@charset "IBM437"; /* Author: AdminDesigns.com * Copyright 2014 Admin Designs =================================================== Table of Contents=================================================== I. SHARED STYLES II. PRIMARY COMPONENTSIII. PANELS IV. THEME ELEMENTS V. HELPERS VI. WIDGETSVII. COLOR SYSTEM VIII. LAYOUT SETTINGS IX. GRID MODIFICATIONS X. PAGES XI. PLUGINSXII. ANIMATE.CSS ====================================================== ================================================ I. SHARED STYLES A. Global B. Grid C. Typography D. Animations =================================================== A. Global=================================================== */ :root { --theme-color: #3b608c; --theme-color-rgb: 59, 96, 140; } @font-face { font-family: 'Nunito-light'; src: url('vendor/fonts/nunito/Nunito-Light.eot'); src: url('vendor/fonts/nunito/Nunito-Light.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-Light.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-Light.woff') format('woff'), url('vendor/fonts/nunito/Nunito-Light.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-Light.svg#Nunito-Light') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Nunito'; src: url('vendor/fonts/nunito/Nunito-Regular.eot'); src: url('vendor/fonts/nunito/Nunito-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-Regular.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-Regular.woff') format('woff'), url('vendor/fonts/nunito/Nunito-Regular.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-Regular.svg#Nunito-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Nunito-SemiBold'; src: url('vendor/fonts/nunito/Nunito-SemiBold.eot'); src: url('vendor/fonts/nunito/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-SemiBold.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-SemiBold.woff') format('woff'), url('vendor/fonts/nunito/Nunito-SemiBold.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-SemiBold.svg#Nunito-SemiBold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Nunito-Bold'; src: url('vendor/fonts/nunito/Nunito-Bold.eot'); src: url('vendor/fonts/nunito/Nunito-Bold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-Bold.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-Bold.woff') format('woff'), url('vendor/fonts/nunito/Nunito-Bold.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-Bold.svg#Nunito-Bold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Nunito-ExtraBold'; src: url('vendor/fonts/nunito/Nunito-ExtraBold.eot'); src: url('vendor/fonts/nunito/Nunito-ExtraBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-ExtraBold.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-ExtraBold.woff') format('woff'), url('vendor/fonts/nunito/Nunito-ExtraBold.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-ExtraBold.svg#Nunito-ExtraBold') format('svg'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Nunito-Black'; src: url('vendor/fonts/nunito/Nunito-Black.eot'); src: url('vendor/fonts/nunito/Nunito-Black.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/nunito/Nunito-Black.woff2') format('woff2'), url('vendor/fonts/nunito/Nunito-Black.woff') format('woff'), url('vendor/fonts/nunito/Nunito-Black.ttf') format('truetype'), url('vendor/fonts/nunito/Nunito-Black.svg#Nunito-Black') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Medium.eot'); src: url('vendor/fonts/product-sans/ProductSans-Medium.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Medium.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Medium.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Medium.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Medium.svg#ProductSans-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Thin.eot'); src: url('vendor/fonts/product-sans/ProductSans-Thin.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Thin.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Thin.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Thin.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Thin.svg#ProductSans-Thin') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Regular.eot'); src: url('vendor/fonts/product-sans/ProductSans-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Regular.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Regular.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Regular.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Regular.svg#ProductSans-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Black.eot'); src: url('vendor/fonts/product-sans/ProductSans-Black.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Black.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Black.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Black.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Black.svg#ProductSans-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Light.eot'); src: url('vendor/fonts/product-sans/ProductSans-Light.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Light.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Light.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Light.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Light.svg#ProductSans-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Product-Sans'; src: url('vendor/fonts/product-sans/ProductSans-Bold.eot'); src: url('vendor/fonts/product-sans/ProductSans-Bold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/product-sans/ProductSans-Bold.woff2') format('woff2'), url('vendor/fonts/product-sans/ProductSans-Bold.woff') format('woff'), url('vendor/fonts/product-sans/ProductSans-Bold.ttf') format('truetype'), url('vendor/fonts/product-sans/ProductSans-Bold.svg#ProductSans-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-ExtraLight.svg#PeugeotNew-ExtraLight') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Light.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Light.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Light.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Light.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Light.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Light.svg#PeugeotNew-Light') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Light.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Light.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Light.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Light.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Light.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Light.svg#PeugeotNew-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.svg#PeugeotNew-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.svg#PeugeotNew-Regular') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Regular.svg#PeugeotNew-Regular') format('svg'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Bold.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Bold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.svg#PeugeotNew-Bold') format('svg'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Bold.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Bold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Bold.svg#PeugeotNew-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Black.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Black.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Black.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Black.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Black.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Black.svg#PeugeotNew-Black') format('svg'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/Peugeot/PeugeotNew-Black.eot'); src: url('vendor/fonts/Peugeot/PeugeotNew-Black.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/Peugeot/PeugeotNew-Black.woff2') format('woff2'), url('vendor/fonts/Peugeot/PeugeotNew-Black.woff') format('woff'), url('vendor/fonts/Peugeot/PeugeotNew-Black.ttf') format('truetype'), url('vendor/fonts/Peugeot/PeugeotNew-Black.svg#PeugeotNew-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.svg#VauxhallNeueBold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.svg#VauxhallNeueBold') format('svg'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueBold.svg#VauxhallNeueBold') format('svg'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.svg#VauxhallNeueExtraBold') format('svg'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.eot'); src: url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.woff2') format('woff2'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.woff') format('woff'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.ttf') format('truetype'), url('vendor/fonts/VauxhallNeue/VauxhallNeueExtraBold.svg#VauxhallNeueExtraBold') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Light.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Light.woff') format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Light.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Light.woff') format("woff"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Light.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Light.woff') format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Light.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Light.woff') format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Regular.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Regular.woff2') format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Medium.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Medium.woff') format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Bold.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Bold.woff') format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Bold.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Bold.woff') format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Bold.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Bold.woff') format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Book.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Book.woff') format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: Favorit; src: url('vendor/fonts/Favorit/FavoritStd-Book.woff2') format("woff2"), url('vendor/fonts/Favorit/FavoritStd-Book.woff') format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "icons"; src: url("vendor/fonts/icons/icons.ttf") format("truetype"), url("vendor/fonts/icons/icons.woff") format("woff"); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"], [class*="_icon"], [class^="-icon"] { display: inline-block; vertical-align: middle; } [class^="icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:before, [class*=" icon-"]:after, [class*="_icon"]:before, [class*="_icon"]:after, [class^="-icon"]:before, [class^="-icon"]:after { display: block; font-family: "icons"; font-size: inherit; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-google:before { content: "\ea88"; } .icon-facebook:before { content: "\ea90"; } .icon-instagram:before { content: "\ea92"; } .icon-twitter:before { content: "\ea96"; } .icon-youtube:before { content: "\ea9d"; } .icon-vimeo:before { content: "\eaa0"; } .icon-dropbox:before { content: "\eaae"; } .icon-github:before { content: "\eab0"; } .icon-skype:before { content: "\eac5"; } .icon-reddit:before { content: "\eac6"; } .icon-linkedin2:before { content: "\eaca"; } .icon-filter:before { content: "\e954"; } .icon-arrow-down:before { content: "\e952"; } .icon-arrow-left:before { content: "\e922"; } .icon-arrow-right:before { content: "\e925"; } .icon-arrow-up:before { content: "\e953"; } .icon-calendar:before { content: "\e929"; } .icon-check-small:before { content: "\e919"; } .icon-check-square:before { content: "\e92a"; } .icon-chevron-down:before { content: "\e936"; } .icon-chevron-left-small:before { content: "\e923"; } .icon-chevron-right-small:before { content: "\e926"; } .icon-chevron-up:before { content: "\e937"; } .icon-clock:before { content: "\e90c"; } .icon-crosshair:before { content: "\e92b"; } .icon-dollar-sign:before { content: "\e90d"; } .icon-download:before { content: "\e90e"; } .icon-download-cloud:before { content: "\e90f"; } .icon-edit:before { content: "\e92c"; } .icon-external-link:before { content: "\e92d"; } .icon-eye:before { content: "\e910"; } .icon-globe:before { content: "\e938"; } .icon-grid:before { content: "\e911"; } .icon-heart:before { content: "\e912"; } .icon-help-circle:before { content: "\e913"; } .icon-home:before { content: "\e914"; } .icon-image:before { content: "\e915"; } .icon-inbox:before { content: "\e934"; } .icon-info:before { content: "\e916"; } .icon-key:before { content: "\e948"; } .icon-link:before { content: "\e917"; } .icon-loader:before { content: "\e949"; } .icon-lock:before { content: "\e94a"; } .icon-log-out:before { content: "\e92e"; } .icon-mail:before { content: "\e939"; } .icon-map-pin:before { content: "\e93a"; } .icon-maximize:before { content: "\e93b"; } .icon-meh:before { content: "\e92f"; } .icon-menu:before { content: "\e93c"; } .icon-message-circle:before { content: "\e93d"; } .icon-message-square:before { content: "\e93e"; } .icon-minus-small:before { content: "\e924"; } .icon-more-horizontal:before { content: "\e955"; } .icon-more-vertical:before { content: "\e918"; } .icon-paperclip:before { content: "\e93f"; } .icon-phone:before { content: "\e940"; } .icon-phone-call:before { content: "\e942"; } .icon-plus-small:before { content: "\e928"; } .icon-power:before { content: "\e930"; } .icon-printer:before { content: "\e943"; } .icon-rotate-cw:before { content: "\e94b"; } .icon-save:before { content: "\e944"; } .icon-search-small:before { content: "\e927"; } .icon-send:before { content: "\e91a"; } .icon-settings:before { content: "\e931"; } .icon-share-box:before { content: "\e91b"; } .icon-share:before { content: "\e91c"; } .icon-star:before { content: "\e91d"; } .icon-tag:before { content: "\e94c"; } .icon-target:before { content: "\e94d"; } .icon-thumbs-down:before { content: "\e94e"; } .icon-thumbs-up:before { content: "\e94f"; } .icon-trash:before { content: "\e91e"; } .icon-unlock:before { content: "\e950"; } .icon-upload:before { content: "\e951"; } .icon-user:before { content: "\e932"; } .icon-user-check:before { content: "\e933"; } .icon-user-minus:before { content: "\e935"; } .icon-user-plus:before { content: "\e941"; } .icon-user-x:before { content: "\e945"; } .icon-users:before { content: "\e946"; } .icon-close:before { content: "\e91f"; } .icon-x-square:before { content: "\e947"; } .icon-zoom-in:before { content: "\e920"; } .icon-zoom-out:before { content: "\e921"; } .icon-dot:before { content: "\e90a"; } .icon-format_quote:before { content: "\e900"; } .icon-checkbox:before { content: "\e90b"; } .icon-heart1:before { content: "\f004"; } .icon-star1:before { content: "\f005"; } .icon-check:before { content: "\f00c"; } .icon-quote-left:before { content: "\f10d"; } .icon-quote-right:before { content: "\f10e"; } .icon-circle:before { content: "\f111"; } .icon-chevron-small-down:before { content: "\e901"; } .icon-chevron-small-left:before { content: "\e902"; } .icon-chevron-small-right:before { content: "\e903"; } .icon-chevron-small-up:before { content: "\e904"; } .icon-chevron-thin-down:before { content: "\e905"; } .icon-chevron-thin-left:before { content: "\e906"; } .icon-chevron-thin-right:before { content: "\e907"; } .icon-chevron-thin-up:before { content: "\e908"; } .icon-dot-single:before { content: "\e909"; } .icon-snapchat-circle:before { content: "\e964"; } .icon-tiktok-circle:before { content: "\e965"; } .icon-pinterest-circle:before { content: "\e966"; } .icon-instagram-circle:before { content: "\e967"; } .icon-facebook-circle:before { content: "\e968"; } .icon-skype-circle:before { content: "\e969"; } .icon-google-circle:before { content: "\e96a"; } .icon-vimeo-circle:before { content: "\e96b"; } .icon-messenger-circle:before { content: "\e96c"; } .icon-whatsapp-circle:before { content: "\e962"; } .icon-youtube-circle:before { content: "\e96e"; } .icon-twitter-circle:before { content: "\e96f"; } .icon-linkedin-circle:before { content: "\e970"; } body { width: 100%; margin: 0; padding: 0; font-family: 'Nunito'; color: #686868; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; font-size-adjust: 100%; font-weight: 400; font-size: 13px; line-height: 1.475; background-color: #fff; } ::-webkit-scrollbar { -webkit-border-radius: 100px; background-color: rgba(0,0,0,0); width: 9px; } ::-webkit-scrollbar-track { background-color: #f3f3f3; } ::-webkit-scrollbar-thumb { border-style: solid; border-color: transparent; border-width: 4px; background-color: #dadce0; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 100px; background: rgba(0,0,0,.2); } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--theme-color); } ::-webkit-scrollbar-button { height: 0; width: 0; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-input-placeholder { color: #bbb !important; font-family: 'Nunito'; } ::-moz-placeholder { color: #bbb !important; font-family: 'Nunito'; } :-ms-input-placeholder { color: #bbb !important; font-family: 'Nunito'; } :-moz-placeholder { color: #bbb !important; font-family: 'Nunito'; } #main { height: 100%; width: 100%; position: relative; background: #f2f3f5; } #content_wrapper { position: relative; display: block; min-height: calc(100vh - 70px); left: 0px; margin-left: 70px; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .sidebar-none #content_wrapper { margin-left: 0px; } /* 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.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-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; } a { color: #666666; cursor: pointer; } a:hover { color: var(--theme-color); text-decoration: none; } a:focus { outline: none; text-decoration: none; } p { /*line-height: 22px; */ font-weight: 400; } p.small, p small { font-size: 13px; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: inherit; text-rendering: optimizelegibility; margin-bottom: 10px; font-family: 'Nunito-Bold'; } h1 { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 18px; font-weight: bold; } h1.small { font-size: 26px; } h2 { font-size: 32px; line-height: 1.17; font-weight: bold; } 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; } 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 !important; } .pt22 { padding-top: 22px !important; } /* 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 #DDD; } 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; } /*===============================================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 { max-width: 100%; } table th { font-family: 'Nunito-Bold'; } .navbar { z-index: 1030; margin-bottom: 0; border-radius: 0; min-height: 70px; max-height: 70px; background-color: #FFF; box-shadow: none; background-repeat: repeat-x; border-left-style: none; border-left-color: inherit; border-left-width: 0; border-right-style: none; border-right-color: inherit; border-right-width: 0; border-top-style: none; border-top-color: inherit; border-top-width: 0; } /* Navbar Logo Container */ .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-left { max-height: 60px; margin-top: 25px; width: calc(100% - 300px); } /* 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 { float: right; width: 410px; } /* 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 #DDD; 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 #DDD; 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 #DDD; border-radius: 0 0 3px 3px; } .navbar-menus .dropdown-footer a { color: var(--theme-color); } .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================================================= */ .sidebar-hidden .sidebar-title { } .sidebar-hidden #sidebar_left .user-info { height: 80px; } .sidebar-hidden #sidebar_left .user-info .media { display: none; } .sidebar-menu > ul > li > a > span:nth-child(1) { padding-left: 0px; } .sidebar-hidden .sidebar-menu ul li { position: relative; } .sidebar-hidden .sidebar-menu ul a.menu-open + ul.sub-nav { /*width: 50px; position: absolute; left: -300px;*/ } #sidebar_left { position: absolute; left: 0; width: 250px; height: 100%; background: #fcfcfc; border-top: 3px solid #e7eef6; z-index: 100; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .sidebar-menu { background-color: #fcfcfc; } .sidebar-menu > ul li { margin: 0; } .sidebar-menu > ul > li:first-child { padding-top: 4px; } .sidebar-menu > ul > li:last-child { padding-bottom: 50px; } .sidebar-menu > ul li a { color: #777; } .sidebar-menu > ul > li > a { padding: 0; line-height: 40px; height: 40px; } .sidebar-menu > ul > li > a:focus { background-color: transparent; } .toggle_icon { font-size: 19px; margin-bottom: 0px; color: #006ed0; display: inline-block; height: 40px; float: right; top: 0; width: 50px; text-align: center; } .toggle_icon span { cursor: pointer; line-height: 40px; color: #777; } /* Menu Title */ .sidebar-menu > ul > li > a > span.sidebar-title { float: left; display: inline-block; padding-left: 20px; min-height: 40px; line-height: 40px; font-size: 14px; width: calc(100% - 95px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sidebar-hidden .sidebar-menu > ul > li > a > span.sidebar-title { width: calc(100% - 80px); } .sidebar-menu > ul > li > a > .sidebar-title-tray { position: absolute; right: 10px; } .sidebar-menu > ul > li > a > .sidebar-title-tray .label { padding: .0em .5em .2em; font-size: 11px; } .sidebar-menu ul > li > a > span.angleCaret { float: right; padding-right: 25px; } .sidebar-menu ul > li > a > span.angleCaret i.fa { font-size: 14px; -webkit-transition: .2s; transition: .2s; line-height: 32px; } .sidebar-menu ul > li > a.menu-open > span.angleCaret .fa { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .sidebar-menu ul.sub-nav { clear: both; display: none; background-color: #eeeeee !important; margin: 5px 0px; padding: 5px 0px; } .sidebar-menu ul a.menu-open + ul.sub-nav { display: block; } .sidebar-menu ul.sub-nav > li > a { padding: 0px; } .sidebar-menu ul.sub-nav > li > a .fa { font-size: 14px !important; } .sidebar-menu ul.sub-nav > li > a strong { font-weight: normal; display: inline-block; float: left; padding-left: 30px; min-height: 40px; line-height: 40px; font-size: 13px; width: calc(100% - 70px); } .sidebar-hidden .sidebar-menu ul.sub-nav > li > a strong { width: calc(100% - 60px); } .sidebar-menu ul li.divider { width: 170px; margin: 0 auto; background: #e7e7e7; } .sidebar-menu ul.sub-nav > li > a span, .sidebar-menu ul.sub-nav > li > a .fa, .sidebar-menu ul.sub-nav > li > a .fas, .sidebar-menu ul.sub-nav > li > a .far { min-width: 30px; display: block; float: right; top: 0; line-height: 40px; width: 50px; text-align: center; } .sidebar-menu > ul > li > a:after, .sidebar-menu ul.sub-nav > li > a:after { opacity: 0; content: ""; width: 2px; height: 100%; display: inline list-item; position: absolute; top: 0; right: -2px; background: var(--theme-color); } .sidebar-menu > ul > li > a.active:after, .sidebar-menu ul.sub-nav > li > a.active:after { opacity: 1; } .sidebar-menu > ul > li > a.active > span:nth-child(1), .sidebar-menu > ul > li > a.active > i { position: relative; z-index: 999; color: var(--theme-color) !important; font-size: 15px !important; } /*.sidebar-menu > ul > li > a > span:nth-child(1)::after, .sidebar-menu > ul > li > a > i::after, .sidebar-menu ul.sub-nav > li > a span.glyphicons::after, .sidebar-menu ul.sub-nav > li > a span.glyphicon::after, .sidebar-menu ul.sub-nav > li > a span.fa::after, .sidebar-menu ul.sub-nav > li > a i.fa::after, .sidebar-menu ul.sub-nav > li > a i.fas::after, .sidebar-menu ul.sub-nav > li > a i.far::after { -webkit-transition: .3s; transition: .3s; opacity: 0; background-color: var(--theme-color); color: #fff; border-radius: 50%; content: ""; display: inline-block; width: 35px; height: 35px; position: absolute; right: 7px; z-index: -1; top: 3px; }*/ /*.sidebar-menu > ul > li > a.active > span:nth-child(1)::after, .sidebar-menu > ul > li > a.active > i::after, .sidebar-menu ul.sub-nav > li > a.active span.glyphicons::after, .sidebar-menu ul.sub-nav > li > a.active span.glyphicon::after, .sidebar-menu ul.sub-nav > li > a.active span.fa::after, .sidebar-menu ul.sub-nav > li > a.active i.fa::after, .sidebar-menu ul.sub-nav > li > a.active i.fas::after, .sidebar-menu ul.sub-nav > li > a.active i.far::after { opacity: 1; }*/ .sidebar-menu > ul > li > a > span:nth-child(1), .sidebar-menu > ul > li > a > i { display: block; float: right; top: 0; line-height: 40px; width: 50px; font-size: 17px; text-align: center; background: #fcfcfc; position: relative; z-index: 9; } .sidebar-menu > ul > li > a > span:nth-child(1), .sidebar-menu > ul > li > a > i, .toggle_icon, .sidebar-menu ul.sub-nav > li > a span, .sidebar-menu ul.sub-nav > li > a .fa, .sidebar-menu ul.sub-nav > li > a .fas, .sidebar-menu ul.sub-nav > li > a .far { -webkit-transform: translate3d(-14px,0,0); transform: translate3d(-14px,0,0); -ms-transform: translate(-14px,0); } .sidebar-hidden .sidebar-menu > ul > li > a > span:nth-child(1), .sidebar-hidden .sidebar-menu > ul > li > a > i, .sidebar-hidden .toggle_icon, .sidebar-hidden .sidebar-menu ul.sub-nav > li > a span, .sidebar-hidden .sidebar-menu ul.sub-nav > li > a .fa, .sidebar-hidden .sidebar-menu ul.sub-nav > li > a .fas, .sidebar-hidden .sidebar-menu ul.sub-nav > li > a .far { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -ms-transform: translate(-10px,0); -webkit-transition: -webkit-transform .4s cubic-bezier(.05,.74,.27,.99); transition: transform .4s cubic-bezier(.05,.74,.27,.99); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .sidebar-menu span.glyphicons, .sidebar-menu span.glyphicon, .sidebar-menu span.fa, .sidebar-menu i.fa, .sidebar-menu i.fas, .sidebar-menu i.far { color: #8e8e8e; } .sidebar-menu ul.sub-nav > li > a.active, .sidebar-menu ul.sub-nav > li > a.active span.glyphicons, .sidebar-menu ul.sub-nav > li > a.active span.glyphicon, .sidebar-menu ul.sub-nav > li > a.active span.fa, .sidebar-menu ul.sub-nav > li > a.active i.fa, .sidebar-menu ul.sub-nav > li > a.active i.fas, .sidebar-menu ul.sub-nav > li > a.active i.far { color: var(--theme-color); } /*===============================================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; } /*====================================================D. Sidebar Toggle - Media Query====================================================== */ @media (max-width: 1100px) { } /*====================================================E. Sidebar Toggle - User input====================================================== */ /* Left SideBar */ .sidebar-ltr #sidebar_left { left: 0; } .sidebar-ltr #sidebar_right { right: -250px; } .sidebar-ltr #content_wrapper { /*margin-left: 230px;*/ } @media (max-width: 1100px) { .sidebar-ltr #content_wrapper { left: 230px; right: auto; margin-left: 0; margin-right: 0; } } /* Right SideBar */ .sidebar-rtl #sidebar_left { left: -230px; } .sidebar-rtl #sidebar_right { right: 0; } .sidebar-rtl #content_wrapper { margin-left: 0; margin-right: 250px; } .sidebar-rtl .navbar { margin-right: 250px; } @media (max-width: 1100px) { .sidebar-rtl #content_wrapper { left: auto; right: 250px; margin-left: 0; margin-right: 0; } } .sidebar-hidden #sidebar_left { left: -180px; } .sidebar-hidden #content_wrapper { margin-left: 70px; } .sidebar-hidden .sidebar-menu ul.sub-nav > li > a strong { /*left: 30px !important; opacity: 0 !important;*/ } .bodylocked #content_wrapper { margin-left: 250px; } .bodylocked #sidebar_left { left: 0px; } .bodylocked .toggle_icon span { color: #006ed0; } .bodylocked .sidebar-menu > ul > li > a > span:nth-child(1), .bodylocked .sidebar-menu > ul > li > a > i, .bodylocked .toggle_icon, .bodylocked .sidebar-menu ul.sub-nav > li > a span, .bodylocked .sidebar-menu ul.sub-nav > li > a .fa, .bodylocked .sidebar-menu ul.sub-nav > li > a .fas, .bodylocked .sidebar-menu ul.sub-nav > li > a .far { -webkit-transform: translate3d(-14px,0,0); transform: translate3d(-14px,0,0); -ms-transform: translate(-14px,0); } .bodylocked .sidebar-menu > ul > li > a > span.sidebar-title { width: calc(100% - 80px); } /*====================================================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: 15px; border: 0px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); padding: 15px; } /* panel helper class */ .panel-overflow { overflow: hidden; } .panel-heading { min-height: 40px; line-height: 40px; position: relative; color: #666; font-size: 13px; border-bottom: 1px solid #e8e8e8; padding: 0; display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; margin-bottom: 15px; } .panel-heading + .panel-body { border-top-color: #e5e5e5; } .panel-title { font-size: 14px; color: var(--theme-color); font-family: 'Nunito-Bold'; display: inline-block; } .panel-title p { margin-left: 10px; display: inline-flex; width: calc(100% - 135px); line-height: normal; margin-bottom: 0; } .panel-heading.bg-blue3 .panel-title { color: #FFF; } .panel-title > .fa, .panel-title > .glyphicon, .panel-title > .glyphicons, .panel-title > .imoon { margin-right: 10px; font-size: 16px; top: 3px; } .panel-body { position: relative; padding: 0; } /* 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 { font-family: 'Nunito-SemiBold'; color: var(--theme-color); } .panel-heading .btn { margin-left: 5px; } .panel-heading a:hover { text-decoration: none; color: var(--theme-color); } .panel-heading a.bg-cstm { color: #ffffff; } .panel-heading .button-group { display: inline-flex; align-items: center; justify-content: flex-end; } .panel-heading .button-group .switch { width: auto; } .panel-footer { background-color: #fafafa; } /*===============================================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 #DDD; } .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 #DDD; 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 #DDD; 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 #DDD; 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 { content: ""; position: absolute; top: -1px; left: 0; height: 2px; background: #a87fc6; 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, .glyphicons, .imoon, .fa, .iconsweets { opacity: 1; transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -webkit-transition: opacity 0.3s ease-in; } /* 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: var(--theme-color); } .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; line-height: 24px; } /* 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: 3px 7px; font-size: 12px; font-weight: 600; } /* 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 { position: relative; overflow: hidden; margin-bottom: 0; background-color: rgb(0 0 0 / 4%); /*border-color: var(--theme-color); -webkit-box-shadow: 0px 0px 0px 0.5px var(--theme-color); -moz-box-shadow: 0px 0px 0px 0.5px rgba(114,160,238,1.00); box-shadow: 0px 0px 0px 0.5px var(--theme-color);*/ } .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; } .thumbnail img { max-height: 100%; } /*===============================================G. Buttons================================================= */ /* Button Settings */ .btn { color: white; outline: none; border-radius: 50px; padding: 5px 20px; display: inline-flex; text-align: center; justify-content: center; height: 37px; align-items: center; line-height: 1; font-family: 'Nunito-Bold' !important; max-width: 100%; } .btn:focus, .btn:active:focus, .btn.active:focus { color: white; outline: none; } .btn.btn-default:focus, .btn.btn-default:active:focus, .btn.btn-default.active:focus { color: #777777; outline: none; } .btn-link { color: #444444; } .btn-link:hover { color: #444444; } .wide, .btn.wide { width: 100% !important; } /* Button Sizes */ .btn-xs { padding: 2px 6px; border-radius: 2px; } .btn-sm { line-height: 1.5; } .btn-lg { line-height: 1.33; } /* 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 */ .btn:hover { color: #FFF; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.13) 1%, rgba(255, 255, 255, 0.13) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 1%, rgba(255, 255, 255, 0.13) 100%); } .btn-gradient:hover, .bg-gradient: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%); } /* 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; } /* 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-weight: normal; font-family: 'Nunito-Bold'; color: #a2a2a2; font-size: 13px; } /* Input Design */ .form-control { border-radius: 5px; height: 37px; font-size: 13px; color: #555; font-family: 'Nunito-Bold'; /*border-color: rgba('var(--theme-color-rgb), 0.7); -webkit-box-shadow: 0px 0px 0px 0.5px rgba('var(--theme-color-rgb), 0.5); -moz-box-shadow: 0px 0px 0px 0.5px rgba('var(--theme-color-rgb), 0.5); box-shadow: 0px 0px 0px 0.5px rgba('var(--theme-color-rgb), 0.5);*/ outline: none; box-shadow: none; } select.form-control { background-image: url(../images/down-arrow.png); background-repeat: no-repeat; background-size: 13px; background-position: center right 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.form-control::-ms-expand { display: none; } select.form-control:focus { /*-webkit-box-shadow: 0px 0px 0px 2px rgba('var(--theme-color-rgb), 0.5); -moz-box-shadow: 0px 0px 0px 2px rgba('var(--theme-color-rgb), 0.5); box-shadow: 0px 0px 0px 2px rgba('var(--theme-color-rgb), 0.5);*/ } .input-group-addon select.form-control { /*background-image: url(../images/down-arrow-white.png);*/ } /* Input Sizes */ .input-xs { padding: 4px 10px; height: 26px; font-size: 12px; line-height: 1.6; } /* Input Addon */ .input-group { } .input-group-addon { } .input-group-addon *:not(option) { } .input-group-addon:first-child { } .input-group-addon:first-child ~ .form-control { } .input-group-addon:first-child ~ .form-control ~ .input-group-addon { } .input-group-addon:last-child { } .input-group .form-control.datepicker { } /* Input Focus */ .form-control:focus { /*border-color: var(--theme-color); box-shadow: none;*/ } .input-group .input-group-addon + .form-control:focus { } /* 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 #cccccc; -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; width: 20px; height: 20px; } .cBox.cBox-inline { display: inline-block; width: auto; } .cBox.cBox-inline + .cBox.cBox-inline { margin-left: 10px; } .cBox input { margin: 0; opacity: 0; z-index: 999; cursor: pointer; left: 0; top: 0; width: 100%; margin-left: 0px !important; } .cBox label { cursor: pointer; color: #666; font-size: 13px; font-weight: bold; padding-left: 5px; margin: 0; } .cBox label:before { content: ""; cursor: pointer; position: absolute; width: 20px; height: 20px; top: -1px; left: 0; border-radius: 4px; border: 1px solid #CCC; border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18); background-color: #ffffff; /*border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);background-color: #f28900;background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*/ } .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 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 12px; height: 7px; background: transparent; top: 4px; left: 4px; border: 3px solid var(--theme-color); 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 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } /* Checkboxes - Custom Colors */ .cBox.facebook-bg label:before { background-color: var(--theme-color); } .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: 70px; height: 32px; color: transparent; display: block; position: relative; text-indent: 100%; cursor: pointer; transition: left 0.15s ease-out; margin: 0px auto !important; margin-left: 0 !important; border: 2px solid #bbbbbb; } div.switch label:after { content: ""; display: block; background: #bbbbbb; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 4px; width: 22px; height: 22px; -webkit-transition: left .15s ease-out; -moz-transition: left .15s ease-out; transition: left 0.15s ease-out; border-radius: 50%; } div.switch input { display: none; } div.switch input + label { margin-left: 0; margin-right: 0; } div.switch input:checked + label, div.switch input:checked + input + label { border-color: var(--theme-color); } div.switch input:checked + label:after, div.switch input:checked + input + label:after { background: var(--theme-color); left: 40px; } 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; } .table > tbody > tr > td div.switch label { height: 25px !important; width: 45px !important; margin-left: auto !important; margin-right: auto !important; } .table > tbody > tr > td div.switch label::after { width: 15px; height: 15px; left: 4px; } .table > tbody > tr > td div.switch input:checked + label::after, .table > tbody > tr > td div.switch input:checked + input + label::after { left: 23px !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-cstm { } .switch.switch-inline { display: inline-block; vertical-align: inherit; width: 100%; } .switch.switch-inline + .switch.switch-inline { margin-left: 15px; } /*===============================================L. Tables================================================= */ /* Table first item changes */ .table tbody > tr:first-child > td { border-top: 0; } .table tbody > tr > td:first-child { font-weight: normal !important; font-family: 'Nunito-Bold'; } /* Table-striped item changes */ .table-striped > tbody > tr:nth-child(even) > td { background-color: #f8f8f8; padding: 8px; } .table-striped > tbody > tr:nth-child(odd) > td { background-color: #FFF; 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 #DDD; } .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 #DDD; } .pricing-features li { padding: 10px 0; border-bottom: 1px solid #DDD; 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 #DDD; 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; } /*=============================================== NEW Tabs================================================= */ .tabs { margin: 0; padding: 0; list-style: none; width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: flex-start; background-color: #fff; border-bottom: 1px solid rgb(218,220,224); } .tabs-link { display: inline-flex; cursor: pointer; align-items: center; justify-content: center; border-bottom: 0; position: relative; -webkit-transition: 0.35s; transition: 0.35s; color: var(--theme-color); font-weight: 500; margin-bottom: 0; height: 50px; margin-right: 20px; font-family: 'Nunito-Bold'; } .tabs-link:last-child { margin-right: 0; } .tabs-link:hover:before, .tabs-link.resp-tab-active:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #41fc91; } .tabs-content { display: none; } .resp-tabs-container { padding-top: 15px; min-height: 50px; } .resp-tabs-container .resp-accordion { display: none; } /*===============================================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; } .modal .modal-body .tab-content { padding: 0; } /* TAB NAVIGATION */ .nav-tabs { position: relative; border: 0; padding-right: 10px; } .nav-tabs > li > a { position: relative; z-index: 9; padding: 9px 20px; margin-right: 2px; font-family: 'Nunito-Bold'; font-size: 13px; border: none; border-radius: 5px 5px 0px 0px; /*background: #b2c8e0; color: #fff;*/ } .nav-tabs > li:first-child > a { margin-left: 0; } .tab-block .nav.nav-tabs { text-align: right; font-size: 0; } .tab-block .nav.nav-tabs li { float: none !important; display: inline-block; } .tab-content .tab-block .nav.nav-tabs li { float: left !important; } /* TAB NAVIGATION STATES */ .nav-tabs > li > a:hover { background-color: #fff; } .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: var(--theme-color); 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: var(--theme-color); 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: 5px 0; cursor: pointer; } /* 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================================================= */ /*Filter Msg*/ .filter-message-box { color: red; } /*---------------------------------------------------------------------------- ACCORDION START -----------------------------------------------------------------------------*/ .accordion-item { margin-bottom: 10px; } .resp-accordion, .accordion-header { position: relative; background-color: #fff; min-height: 55px; padding: 15px 19px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; margin: 0; line-height: 1.2; cursor: pointer; text-align: left; color: var(--theme-color); font-size: 15px; font-family: 'Nunito-Bold'; -webkit-box-shadow: 0px 0px 5px 3px rgb(41 52 114 / 10%); -moz-box-shadow: 0px 0px 5px 3px rgb(41 52 114 / 10%); box-shadow: 0px 0px 5px 3px rgb(41 52 114 / 10%); } .resp-accordion span, .accordion-header span { } .resp-accordion .fa, .accordion-header .fa { font-size: 14px; -webkit-transition: 0.35s; transition: 0.35s; } .resp-accordion .fa:before, .accordion-header .fa:before { content: "\f078"; } .resp-accordion.resp-tab-active .fa:before, .accordion-header.active .fa:before { content: "\f077"; } .resp-accordion:hover, .resp-accordion.resp-tab-active, .accordion-header:hover, .accordion-header.active { background-color: var(--theme-color); color: #fff; } .accordion-Content { display: none; padding: 20px; background: #fff; border-radius: 0px 0px 10px 10px; } /*---------------------------------------------------------------------------- ACCORDION END -----------------------------------------------------------------------------*/ /*header search*/ .hdrSrch { width: 270px; position: relative; display: inline-flex; margin-top: 15px; margin-left: 25px; } .hdrSrch input { padding: 0px 0px; color: #979797; border-bottom: 2px solid #e6e6e6 !important; border: none; border-radius: 0px; font-size: 17px; min-height: 40px; width: 100%; padding-left: 30px; } .hdrSrch input::-webkit-input-placeholder { color: #cecece; } .hdrSrch input::-moz-placeholder { color: #cecece; } .hdrSrch input[type="text"] { } .hdrSrch input:focus { border-color: var(--theme-color) !important; outline: none; } .hdrSrch .fa { font-size: 20px; position: absolute; top: 8px; color: var(--theme-color); left: 2px; } .right-links { display: inline-flex; float: left; } .right-links a { color: #bbbbbb; margin-right: 25px; font-family: 'Nunito-Bold'; } .right-links .help-link { color: var(--theme-color); } .hdrRgt { display: inline-flex; float: right; text-align: right; margin-right: 38px; height: 70px; align-items: center; } .hdrNav, .hdrNav ul, .hdrNav li, .hdrUsr, .hdrLogout { 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; font-family: 'Nunito-Bold'; height: 22px; } .hdrNav a:hover { color: var(--theme-color); text-decoration: none; } .hdrUsr { color: #bbbbbb; margin-right: 25px; position: relative; float: left; font-family: 'Nunito-Bold'; } .hdrUsr span { vertical-align: middle; display: inline-block; } .hdrLogout { font-size: 13px; color: #bbbbbb; font-weight: bold; margin-left: 23px; padding-left: 32px; position: relative; padding-right: 44px; } .hdrLogout::before { content: ""; height: 23px; width: 2px; background: #dbdbdb; position: absolute; left: 0; top: -5px; } .hdrLogout a { color: #bbbbbb; } .hdrLogout a:hover { text-decoration: none; } .hdrLogout .glyphicon { font-size: 20px; position: absolute; right: 9px; top: -1px; } .usrImg { display: inline-block; position: relative; margin-right: 5px; text-align: center; width: 35px; height: 35px; border-radius: 50%; overflow: hidden; vertical-align: middle; } .usrImg span { display: inline-block; width: 100%; height: 100%; line-height: 35px; background: #f2f3f5; color: var(--theme-color); } .usrImg img { width: 100%; } .lblName { color: var(--theme-color); } .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; font-weight: 900; } .hdrDD:hover { color: var(--theme-color); } .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; z-index: 99; 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; font-family: 'Nunito-SemiBold'; width: 100%; font-size: 12px; } .hdrDD_Menu li a:hover { color: var(--theme-color); } .hdrDropdown { width: 250px; position: relative; height: 40px; display: inline-flex; float: left; margin-right: 25px; margin-top: 13px; } /* Modal Header */ .modal-header { border-bottom: 4px solid #efefef; margin-bottom: 20px; padding: 0; padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .modal-title { color: #000; font-size: 14px; font-family: 'Nunito-Bold'; display: inline-block; } .modal-header .button-group { white-space: nowrap; display: inline-flex; align-items: center; } .modal-header .btn { margin-left: 5px; } .modal-header .nav-tabs { padding: 0; } .modal-header .nav-tabs > li > a { background: transparent; color: var(--theme-color); border-bottom: none; } .modal-header .nav-tabs > li.active > a, .modal-header .nav-tabs > li.active > a:hover, .modal-header .nav-tabs > li.active > a:focus { background-color: var(--theme-color); color: #fff; } .modal-body label { /*margin-bottom: 10px;*/ } .modal .modal-footer { border-top: 4px solid #efefef; padding: 25px 0px 0; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } .modal .modal-footer:before, .modal .modal-footer:after { display: none; } .modal-footer .btn { min-width: 120px; } .modal-footer .btn.sv-btn { min-width: 150px; } .popupShown body, .sidebarShown body { overflow: hidden; } .sidebarShown:before { content: ""; background: #000; width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1031; opacity: 0.5; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .alignIcons { display: inline-flex; } .alignIcons a { display: inherit; margin: 0 5px; } .alignIcons a.up-active, .alignIcons a.mid-active { background-color: #15a02b; border-color: #15a02b; -webkit-box-shadow: 0px 0px 0px 0.5px #15a02b; -moz-box-shadow: 0px 0px 0px 0.5px #15a02b; box-shadow: 0px 0px 0px 0.5px #15a02b; } .alignIcons a img { max-height: 100%; } .alignIcons a.up-active img, .alignIcons a.mid-active img { filter: brightness(0) invert(1); } .modal { background: rgba(0, 0, 0, 0.5); height: 100%; padding: 2rem; } .modal.fade.in { overflow-x: hidden; overflow-y: auto; } .modal-open .modal { background: transparent !important; } .modal .close { width: 33px; height: 33px; display: inline-flex; opacity: 1; margin-left: 10px; margin-right: -3px; margin-top: 0px; } .modal .close svg { width: 100%; height: 100%; fill: inherit; pointer-events: none; } /*.modal .panel { padding: 25px; margin: 0; } .modal .panel-title { color: #000; } .modal .panel-heading { border-bottom: 4px solid #efefef; margin-bottom: 20px; padding-bottom: 15px; }*/ .modal .modal-body { padding: 0; } .modal-dialog { height: auto !important; /*min-height: calc(100% - 60px);*/ min-height: calc(100% - 0px); display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 800px; max-width: 100%; } .modal-dialog.wide { width: 100%; max-width: 1330px; } .modal-dialog-900 { width: 900px; } .modal-dialog-1000 { width: 1000px; } .modal-dialog-1100 { width: 1120px; } .modal-dialog-1200 { width: 1200px; } .modal-content { width: 100%; max-width: 100%; padding: 25px; margin: 0; } .modal-dialog .modal-body table[bgcolor="#d2222c"] tr:hover td { background-color: #d2222c !important; } .page_cont_clr .modal { display: block !important; } .modal.popupDAM .modal-dialog, .modal.builders-mediaPopup .modal-dialog { width: 1330px !important; /*max-width: calc(100% - 170px);*/ } .shared_BlankLayout .modal.builders-mediaPopup .modal-dialog { /*max-width: 100%;*/ } .modal.popupDAM .modal-dialog { width: 1330px !important; } /*===============================================Q. Custom Modals================================================= */ /* 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; } } /*===============================================C. Font Size Helpers================================================= */ .fs3 { font-size: 4px !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; } .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: 5px !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; } .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-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; } .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; } .lh1 { line-height: 1 !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 #DDD !important; } .border-left { border-left: 1px solid #DDD; } .border-right { border-right: 1px solid #DDD; } .border-top { border-top: 1px solid #DDD; } .border-bottom { border-bottom: 1px solid #DDD; } /* 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; } .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; top: 0; right: 0; bottom: 0; margin: auto; display: inline-flex; align-items: center; justify-content: end; } .icon-bg i { } .icon-bg i:before { font-size: 60px; } .secpart .panel { border: 1px solid #e8e8e8; } /*===============================================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: #a87fc6; 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; } /* Content Header */ .fc-content .fc-grid .fc-day-header { color: #999; font-weight: 600; border: 0; border-bottom: 1px solid #DDD; padding-bottom: 10px; } /* Content Body/Container */ .fc-content .fc-grid table tbody { background: #FFF; } /* Content Day Number */ .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.dashboard-page .jvectormap-zoomin, body.dashboard-page .jvectormap-zoomout { display: none; } body.dashboard-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 #DDD; } .messages-page .note-editor .note-editable { border: 1px solid #DDD; 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 #main { background: none; } 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 #main { background: none; } 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================================================= */ body.login-page #main { background: none; } body.login-page .loginlogo { text-align: center; margin-bottom: 20px; /*min-height:125px;*/ } body.login-page .loginlogo img { max-height: 200px; } body.login-page .panel { position: relative; border: none; box-shadow: none; margin: 0px; padding: 0px; height: 100%; } body.login-page .login-avatar { margin: 15px 20px 25px; padding-bottom: 25px; border-bottom: 1px dashed #DDD; } body.login-page .login-avatar img { display: block; margin: 0 auto; padding: 5px; border: 2px solid #DDD; } body.login-page .login-alert { font-size: 13px; padding: 9px 13px; } .loginlogoText { font-family: 'Mont Heavy DEMO', Arial; } .loginlogoText h2 { margin-bottom: 0; } .loginlogoText .logoClr { color: #fcbf03; } .loginlogoText span:not(.logoClr) { color: #2e3c59; } /*===============================================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 #DDD; border-bottom: 1px solid #DDD; 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 #main { min-height: 1400px; } 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; } @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); } .login-page .panel-bg { padding: 12px; width: 430px; margin: 0 auto; background: rgba(255, 255, 255, 0.4); box-shadow: 0px 0 1px rgba(255, 255, 255, 0.8) inset; } .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 #DDD; 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 { } #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: flex !important; align-items: center; justify-content: center; background-color: rgb(0 0 0 / 4%); } .mngMBlock .isotope-item .work-img img { /*position: absolute; width: 100%; top: 0px; height: auto; left: 0px; bottom: 0px; right: 0px; margin: auto; max-height: initial;*/ } .mngMBlock .isotope-item label { line-height: 1em; margin-top: 5px; text-overflow: ellipsis; overflow: hidden; } @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 #ccc; background: url("../vendor/plugins/gmap/images/arrow_left_12x12.png") no-repeat 50% 50%; } .map .pagination .fwd-btn { float: right; border-left: 1px solid #ccc; 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 #DDD; 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: var(--theme-color); 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 #DDD; 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: var(--theme-color); } .tree-alt-bg.tree-grey span.dynatree-folder { background-color: var(--theme-color); } /* 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 #ccc; 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: #5cb85c; } .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 #ccc; 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================================================= */ .panel-tabs > li.active:after { background: #a287d4; } /*===============================================A. Icons================================================= */ /* Panel Header Icon */ .panel-title > .fa, .panel-title > .glyphicon, .panel-title > .glyphicons, .panel-title > .imoon { } .panel-title.bluetx { color: var(--theme-color); } /*===============================================A. Menu and Button Dropdowns================================================= */ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { /*background-color: #a287d4;*/ } /*===============================================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: var(--theme-color); border-color: var(--theme-color); } .pagination > li > a, .pagination > li > span { color: var(--theme-color); } .pagination-alt > li.active > a { background-color: var(--theme-color); border-color: var(--theme-color); } /*===============================================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: var(--theme-color); } .cBox.cBox-blue2 label:before { background-color: var(--theme-color); } .cBox.cBox-blue3 label:before { background-color: var(--theme-color); } .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: var(--theme-color); } .cBox.cBox-grey3 label:before { background-color: var(--theme-color); } /*===============================================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: var(--theme-color); } div.switch.switch-blue2 input:checked + label { background-color: var(--theme-color); } div.switch.switch-blue3 input:checked + label { background-color: var(--theme-color); } 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: var(--theme-color); } div.switch.switch-grey3 input:checked + label { background-color: var(--theme-color); } div.switch.switch-cstm input:checked + label { } /*===============================================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: var(--theme-color); } .ui-rangeSlider.slider-blue2 .ui-rangeSlider-bar { background-color: var(--theme-color); } .ui-rangeSlider.slider-blue3 .ui-rangeSlider-bar { background-color: var(--theme-color); } .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: var(--theme-color); } .ui-rangeSlider.slider-grey3 .ui-rangeSlider-bar { background-color: var(--theme-color); } /*===============================================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: var(--theme-color) !important; } .progress-bar-blue2 { background-color: var(--theme-color) !important; } .progress-bar-blue3 { background-color: var(--theme-color) !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: var(--theme-color) !important; } .progress-bar-grey3 { border-color: var(--theme-color) !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-teal { color: #a8e9ea !important; } .text-teal2 { color: #2dc5c7 !important; } .text-teal3 { color: #1e9093 !important; } .text-blue { color: var(--theme-color) !important; } .text-blue2 { color: var(--theme-color) !important; } .text-blue3 { color: var(--theme-color) !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: #e51850 !important; } .text-red3 { color: #ff4f3e !important; } .text-orange { color: #fbb882 !important; } .text-orange2 { color: #f9892e !important; } .text-orange3 { color: #e55e20 !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: var(--theme-color) !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: var(--theme-color) !important; } .border-blue2 { border-color: var(--theme-color) !important; } .border-blue3 { border-color: var(--theme-color) !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: var(--theme-color) !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-teal { background-color: #a8e9ea !important; } .bg-teal2 { background-color: #2dc5c7 !important; } .bg-teal3 { background-color: #1e9093 !important; } .bg-blue { background-color: var(--theme-color) !important; } .bg-blue2 { background-color: var(--theme-color) !important; } .bg-blue3 { background-color: var(--theme-color) !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: var(--theme-color) !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 { color: #555555; } .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 { color: #555555; } .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 { color: #555555; } .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 { text-shadow: 0 1px #ffffff; background-color: ""; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } .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; } .red { color: red; } /*buyonline reportlog block*/ .rprtClrLog .bg-red2 { background-color: #ef9d8d !important; } .rprtClrLog .bg-teal2 { background-color: #83d9da !important; } .rprtClrLog .bg-orange2 { background-color: #ffb77b !important; } .rprtClrLog .bg-blue2 { background-color: #7da2da !important; } .rprtClrLog .bg-green2 { background-color: #86d8ab !important; } .bg-cstm { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; } .sv-btn { background-color: #15a02b !important; border-color: #15a02b !important; color: #fff !important; } .sv2-btn { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; } .fltr-btn { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; } .bck-btn { background-color: #f3f1f2 !important; border-color: #f3f1f2 !important; color: #000000 !important; } .cncl-btn { background-color: #df6662 !important; border-color: #df6662 !important; color: #fff !important; } .prv-btn { background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; } .prv-btn .fa { display: none; } .rvt-btn { background-color: #999999 !important; border-color: #999999 !important; color: #fff !important; } .blk-btn { background-color: #000 !important; border-color: #000 !important; color: #fff !important; } .table > tbody > tr > td .prv-btn { padding: 2px 10px 1px; font-size: 13px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; height: 25px; } .blcktxtBtn { color: #000 !important; } .lrgBtn { width: 100%; max-width: 200px; } .tblCstm { font-size: 14px; } .tblCstm th { font-size: 14px; background-color: var(--theme-color) !important; color: #FFF; font-weight: normal; font-family: 'Nunito-SemiBold'; } .tblCstm th .custom-type .label { color: #fff !important; } .tblCstm th .custom-type .checkmark { border-color: #fff !important; } /*.tblCstm th:first-child, .tblCstm td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .tblCstm th:last-child, .tblCstm td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }*/ .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; border-color: transparent; } .pgURL a { color: var(--theme-color); text-decoration: underline; font-family: 'Nunito-Bold'; } .qScore { /*color: var(--theme-color); font-family: 'Nunito-Bold';*/ } .hdrTbl { cursor: pointer; } .hdrTbl .glyphicons { top: 2px; } .bfrArrow { padding-left: 15px; position: relative; color: var(--theme-color); } .bfrArrow::before { content: "\f078"; font-size: 12px; font-family: FontAwesome; padding-right: 10px; position: absolute; top: 1px; left: 0; color: #000000; } .leadCentreTable .hdrTbl:hover td { background-color: #deebfc !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 { /*border-radius: 0 !important;*/ } .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;*/ } .leadCentreTable .tblCstm th { background: transparent !important; color: var(--theme-color) !important; font-family: 'Nunito-Bold'; } .leadCentreTable .table tbody tr th, .leadCentreTable .table tbody tr td { border-color: transparent; } .tblClrHovr > tbody > tr:hover > td, .tblCstm > tbody > tr:hover > td { background-color: #edf2fd !important; } .leadCentreTable tbody > tr:nth-child(4n) > td { background: #f8f8f8; } .hdrTbl td { /*border-left:0px!important;border-top:2px solid var(--theme-color)!important;border-right:0px!important;border-bottom:2px solid var(--theme-color)!important; border: none !important; font-family: 'Nunito-Bold'; background-color: #f8f8f8;*/ } /*.hdrTbl2 td {border-left:0px!important;border-top:2px solid var(--theme-color)!important;border-right:0px!important;border-bottom:2px solid var(--theme-color)!important; color:var(--theme-color)!important; font-weight:bold;} .hdrTbl2 td:first-child {border-left:2px solid var(--theme-color)!important; border-radius:5px;} .hdrTbl2 td:last-child {border-right:2px solid var(--theme-color)!important; border-radius:5px;}*/ /*===============================================X. LAYOUT SETTINGS================================================= */ /* If header is fixed modify primary containers padding */ .navbar.navbar-fixed-top + #main { margin-top: 70px; } /* 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-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-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 { 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: var(--theme-color); 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; } .capitalizeTEXT .widgetTl strong { text-transform: capitalize; } .nmbrBlck .widgetTl { } .dashBlk .brdClr { margin-bottom: 12px; } .dashBlk .brdClr > .panel { border: none; border-radius: 5px; margin-bottom: 0px; } .dashBlk .brdClr > .panel > .panel-body { min-height: 445px; } .defaultBlck.nmbrBlck .panel { min-height: 330px; 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 { width: 30%; margin-right: 20px; display: inline-block; float: left; } .clsparent .vst_count:nth-child(3n) { margin-right: 0px !important; } .clsparent .vst_count span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 86%; display: inline-block; } .dashBlk .brdClr.infoWid > .panel > .panel-body { min-height: 202px; } .widgetTl span { display: block; text-align: center; font-size: 30px; font-weight: bold; color: #020c18; line-height: 1em; margin-top: 30px; } .widgetTl span e { font-style: normal; line-height: 1; display: inline-block; } .widgetTl span i { font-style: normal; line-height: 1; display: inline-block; font-size: 25px; } .widgetTl span svg { fill: #020c18; width: 40px; height: 18px; display: inline-flex; line-height: 1; } .widgetTl strong a { text-decoration: underline; color: inherit; } .infoBlck .infoBlgLeft { padding-left: 20px; padding-right: 20px; } .infoBlck .infoBlgRight { padding-left: 25px; padding-right: 0px; } .infoBlck .infoBlgLeft, .infoBlck .infoBlgRight { padding-top: 20px; padding-bottom: 0px; min-height: 395px; position: relative; } .infoBlck .infoBlgLeft .btmtxt, .infoBlck .infoBlgRight .btmtxt { position: absolute; bottom: 5px; left: 0px; right: 0px; } .dateRpt .vst_count { line-height: 20px; } .dateRpt .vst_count span { font-size: 13px; } .dateRpt .vst_count strong, .dateRpt .vst_count strong span { font-size: 13px; } .infoBlgLbl { margin-top: 30px; border-bottom: 2px solid #e3e3e3; margin-bottom: 5px; padding-bottom: 10px; } .infoBlgLbl label { font-size: 15px; /*color: var(--theme-color);*/ color: var(--theme-color); font-family: 'Nunito-Bold'; 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: 5px; padding-right: 10px; height: 185px; min-height: 185px; overflow: hidden; position: relative; transition: 0.5s; } .widgetCont::-webkit-scrollbar { width: 8px } .widgetCont::-webkit-scrollbar-track { background-color: #f3f3f3; border-radius: 8px } .widgetCont::-webkit-scrollbar-thumb { background: var(--theme-color); border-radius: 8px; } .usrBlck .panel { background: url("../images/user-dash.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; } .usrBlck .widgetTl { padding: 0; border: none; font-size: 20px; line-height: normal; margin-bottom: 15px; } .usrBlck .widgetTl i { font-style: normal; opacity: 0.8; } .usrBlck .widgetCont { padding: 0; font-family: 'Nunito-Bold'; } .usrBlck .widgetCont p { line-height: normal; } .usrBlck .widgetFtr { text-align: left; position: relative; border-top: 2px solid #fff; padding-top: 15px; padding-bottom: 0px; /*padding-left: 30px;*/ font-size: 12px; } .usrBlck .widgetFtr p { font-size: 12px; 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 .panel .panel-body { padding: 25px 5px; } .widget-mail { display: flex; border-top: 3px solid #fff; padding-top: 20px; } .widget-mail span { display: inline-flex; width: 23px; height: 23px; fill: #fff; min-width: 23px; margin-right: 10px; opacity: 0.9; } .widget-mail div { display: flex; flex-direction: column; opacity: 0.9; margin-top: 3px; } .widget-mail label { color: #fff; margin-bottom: 12px; font-size: 11px; line-height: 1; } .widget-mail a { color: #fff; font-size: 12px; line-height: 1; margin-bottom: 5px; } .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: 13px 25px;*/ } .brdClr.infoWid .panel-body { /*min-height: initial;*/ } .infoWid.weatherDiv .panel-body { padding: 20px 15px; } .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; font-family: 'Nunito-Bold'; margin-bottom: 25px; } .coremi_news a { font-weight: bold; color: #000; font-size: 12px; } .weatherDiv .weatherWidget { } .dropdown-el { position: absolute; left: 0; top: 0; z-index: 99; min-width: 250px; display: inline-block; min-height: 40px; max-height: 40px; overflow: hidden; cursor: pointer; outline: none; border-radius: 99px; background-color: #fff; transition: 0.3s all ease-in-out; box-shadow: 0px 0px 10px 5px rgb(118 144 165 / 11%); } .dropdown-el label { color: #000; } .dropdown-el a, .dropdown-el label, .dropdown-el input { color: #444; text-align: left; line-height: 30px; border-top: none !important; display: block; cursor: pointer; position: relative; transition: 0.1s color ease-in-out; margin-bottom: 0px; font-size: 15px !important; letter-spacing: -0.5px; padding: 5px 20px; font-family: 'Nunito-Bold'; background: transparent; border: none; width: 100%; } .dropdown-el::after { content: "\f078"; position: absolute; right: 16px; top: 7px; transition: .3s all ease-in-out; font-family: FontAwesome; font-size: 15px; color: #4d4d4d; } .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: 600px; font-size: 18px; padding: 10px; padding-top: 10px; } .dropdown-el.expanded label { cursor: initial !important; } .dropdown-el.expanded a:hover, .dropdown-el.expanded input:hover { transition: 0.01s; color: var(--theme-color); } .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 #006ed0; border-color: #006ed0 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: #006ed0; 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; }*/ .arrowImg span { display: inline-block; width: 20px; height: 20px; } .arrowImg span svg { width: 100%; height: 100%; fill: #fff; } /*--------------------------------------------------------------------------------------*/ .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; font-family: 'Nunito-Bold'; 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; } /*--------------------------------------------------------------------------------------*/ .lead-info-box { background: #eaf9f4; padding: 15px; border-radius: 8px; font-family: 'Nunito-Bold'; } .lead-info-box .divider { height: 4px; background: #fff; } .lead-info-box label { color: #606463; margin-bottom: 0; } .lead-name h2 { color: var(--theme-color); font-size: 24px; margin-bottom: 5px; } .lead-name p { color: var(--theme-color); line-height: normal; font-size: 16px; margin-bottom: 0; } .lead-name p a { color: inherit; text-transform: lowercase; width: 100%; overflow: hidden; display: inline-block; text-overflow: ellipsis; } .lead-phone { padding-top: 32px; } .lead-phone h2 { font-size: 20px; color: var(--theme-color); margin-bottom: 0; } .lead-phone h2 a { color: inherit; } .lead-phone h2 .fa { margin-right: 5px; color: #bfcee3; } .lead-Hot { text-align: right; } .lead-Hot h2 { line-height: 1; color: var(--theme-color); font-size: 16px; margin-bottom: 0; display: inline-flex; align-items: center; } .lead-Hot h2 input { cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 !important; opacity: 0; z-index: 1; width: 100%; height: 100%; } .lead-Hot h2 strong { cursor: pointer; position: relative; display: inline-flex; margin-left: 10px; background: #ddd; color: #3d608a; width: 75px; height: 35px; border-radius: 50px; } .lead-Hot h2 .fa { cursor: pointer; color: var(--theme-color); display: inline-flex; justify-content: right; align-items: center; border-radius: 50px; font-family: inherit; width: 100%; text-align: right; font-size: 15px; padding: 0px 15px; } .lead-Hot h2 .fa::before { content: ""; display: block; background: #fff; position: absolute; top: 0; bottom: 0; margin: auto; left: 8px; width: 22px; height: 22px; -webkit-transition: left .15s ease-out; -moz-transition: left .15s ease-out; transition: left 0.15s ease-out; border-radius: 50%; -webkit-transition: left .15s ease-out; -moz-transition: left .15s ease-out; transition: left 0.15s ease-out; } .lead-Hot h2 input:checked + .fa { background: #8ff0cf; color: #fff; justify-content: start; } .lead-Hot.mark-closed h2 .fa { color: #d3332e; } .lead-Hot h2 input[type=checkbox]:checked + .fa:before { opacity: 1; right: 8px; left: auto; } /*Contacts Details*/ .contactInn { position: relative; background-color: #fff; -webkit-box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); border-radius: 8px; min-height: 310px; padding: 12px; } .contactInn .panel-heading { border: none; padding-bottom: 0; } .contactInn .panel-heading .panel-title { font-size: 13px; } .contactInn .panel-body { } .contactInn .cstmStat li { padding: 5px 10px; margin-bottom: 0px; } .contactInn .cstmStat li label { margin-bottom: 0px; } .contactInn .cstmStat li:nth-child(even) { background-color: #ebecf0; } .qltyScr { position: relative; } .qltyScr .score { background-color: #8ff0cf; height: 50px; width: 50px; color: #0d4a29; border-radius: 50%; text-align: center; font-size: 18px; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; border: 3px solid #f3fcf9; } .qltyScr .score label { color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; margin: inherit; } .lead-info-box .qltyScr .score { margin-top: -20px; } .dvsCnt .qltyScr > label { margin: 0; margin-right: 15px; line-height: 1; } .dvsCnt ul { display: flex; list-style: none; margin: 0; } .dvsCnt ul li { margin-right: 15px; margin-bottom: 0; } [class*="sentiment-"] { background: #61c06e; padding: 6px 12px; border-radius: 50px; color: #fff; line-height: 0; display: inline-flex; font-family: 'Nunito-SemiBold'; align-items: center; } [class*="sentiment-"] i { margin-right: 5px; } .sentiment-pv { background: #7ebe7e; } .sentiment-nv { background: #ff7f7f; } .sentiment-nv .fa-thumbs-o-down { transform: scaleX(-1); } .sentiment-nl { background: #edb959; } .sentiment-nl .fa-thumbs-o-up { rotate: 265deg; } .dealerEnqTab label, .dealerKeyInterTab label { font-family: 'Nunito'; } .dealerEnqTab .enqValue, .dealerKeyInterTab .enqValue { font-family: 'Nunito-Bold'; } .dealerEnqTab .enqValue a, .dealerKeyInterTab .enqValue a { color: var(--theme-color); } .tabInnMenu { padding-left: 20px; } .tabInnMenu + .tab-content { position: relative; background-color: #fff; -webkit-box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 10%); border-radius: 8px; } .tabInnMenu li { margin-right: 20px; font-size: 13px; line-height: 1.1; text-align: center; display: inline-block; font-family: 'Nunito-Bold'; color: #4d9be6; position: relative; padding: 0px 2px; margin-bottom: 20px; } .tabInnMenu li a { color: var(--theme-color) !important; padding: 0; background-color: transparent !important; z-index: 99; } .tabInnMenu li a.active { } .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: #8ff0cf; height: 3px; content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; border-radius: 99px; } .divAllocate label { margin-bottom: 0; margin-top: 10px; } .divAllocate .qltyScr { margin-top: 9px; } .divAllocate select.form-control { /*border-width: 1px; border-color: #b5b5b5; font-weight: normal; font-family: 'Nunito'; background: initial; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;*/ } .divAllocate select.form-control::-ms-expand { display: initial; } .viewsDtls { font-family: 'Nunito-Bold'; margin-bottom: 15px; margin-top: 20px; font-size: 14px; color: var(--theme-color); background-color: #f8f8f8; padding: 15px; border-radius: 5px; } .blueClr { color: var(--theme-color); } .greyClr { color: #a9a9a9; } .pinkClr { color: #06b97c; } .infoToolTip { color: #000; font-size: 15px; } .seoAdvBtn { display: inline-block; height: auto; padding: 5px; font-weight: normal; font-family: 'Nunito-Bold'; line-height: normal; color: var(--theme-color); cursor: pointer; } .seoAdvBtn .fa { font-size: 14px; float: left; } .panel-heading + .panel-body > .table-responsive.mt15 { /*margin-top: 0px!important;*/ } .multiselect.form-control, .select.form-control { background: #ffffff url("../images/upDownIcon.png") no-repeat right 1.3rem 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; display: inline-block; width: 100%; padding: 7px 10px 5px; color: #495057; vertical-align: middle; background-size: 8px; border-radius: 5px !important; } .input-group .input-group-addon select.form-control { padding: 7px 10px !important; width: 115px; background-position: center right 8px; height: auto; border: none; box-shadow: none; background-color: transparent; } select option { font-family: 'Nunito',Calibri,Arial !important; font-size: 14px; color: #495057; } /*.table > tbody > tr > td .cBox { top: -10px; }*/ .btn.btn-primary.btn-file { background-color: var(--theme-color); border-color: var(--theme-color); } .btn.upload_btn-file { padding: 6px 20px 5px; } .mobWebBtn { display: inline-flex; align-items: center; justify-content: start; } .mobWebBtn span { display: inline-flex; justify-content: center; align-items: center; margin-right: 15px; border-radius: 5px; border: 1px solid var(--theme-color); cursor: pointer; font-size: 19px; width: 30px; height: 30px; line-height: 1; } .mobWebBtn span.active, .mobWebBtn span:hover { background: var(--theme-color); } .mobWebBtn span.active .fa, .mobWebBtn span:hover .fa { color: #fff; } .mobWebBtn span .fa { font-size: 16px; color: var(--theme-color); } .mobWebBtn span .fa:before { } .mobWebBtn .mobGGL .fa { font-size: 25px; } .modal .mobWebBtn { } .modal .mobWebBtn span.active, .modal .mobWebBtn span:hover { } .modal .mobWebBtn span { } .modal .mobWebBtn span .fa { } .modal .mobWebBtn span:hover .fa, .modal .mobWebBtn span.active .fa { } .white-background { background: #fff; } .metaPrev { font-family: arial,sans-serif; width: 651px; max-width: 100%; } .metaPrev.metaPrevMOB { background: #f1f3f4; padding: 10px 16px; width: 375px; margin-right: auto; } .metaPrev.metaPrevMOB .white-background { background: #fff; padding: 15px 16px 12px 16px; box-shadow: 0 0 0 1px #ebedef; } .metaPrev .gglTtl { display: flex; padding: 0; align-items: center; margin-bottom: 12px; font-size: 12px; line-height: 1.3; } .metaPrev .gglTtl p { margin: 0; width: calc(100% - 40px); } .metaPrev .gglTtl p strong { color: #202124; font-size: 14px; display: block; line-height: 20px; white-space: nowrap; font-family: inherit; font-weight: normal; } .metaPrev .gglTtl p span { font-size: 12px; line-height: 1; display: inline-flex; align-items: center; } .metaPrev .gglTtl span i { font-style: normal; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 26px); } .metaPrev .gglTtl svg { height: 18px; width: 18px; fill: #4d5156; display: inline-block; margin-left: 8px; } .metaPrev .favicon { background-color: #f1f3f4; border: 1px solid #ecedef; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; height: 28px; width: 28px; min-width: 28px; margin-right: 12px; vertical-align: middle; } .metaPrev .favicon img { /*height: 18px; width: 18px;*/ } .metaPrev .gglHead { color: #1a0dab !important; font-size: 20px; font-weight: 400; line-height: 1.3; margin-bottom: 8px; } .metaPrev .gglHead a { color: inherit !important; } .metaPrev .gglDec { color: #4d5156; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; line-height: 1.58; text-align: left; font-size: 14px; font-weight: normal; } .ftrDecBlk span { display: none; } .metaPrev.metaPrevMOB .gglHead { } .metaPrev.metaPrevMOB .gglTtl { } .metaPrev.metaPrevMOB .gglTtl img { } .metaPrev.metaPrevMOB .gglTtl span { width: 100%; justify-content: space-between; } /*.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 { } .seoSrchPre .modal-body { } .seoSrchPre .mobWebBtn { } .seoSrchPre .mobWebBtn span.active, .seoSrchPre .mobWebBtn span:hover { } .seoSrchPre .mobWebBtn span.active .fa, .seoSrchPre .mobWebBtn span:hover .fa { } .seoSrchPre .mobWebBtn span { } .seoSrchPre .metaPrev.metaPrevMOB .gglTtl span i { max-width: 200px; } .seoSrchPre .metaPrevMOB { width: 100%; } /*.seoSrchPre .metaPrev.metaPrevMOB .ftrDecBlk .gglDec { width: calc(100% - 165px); }*/ .actnCellspn .fa-close { color: #DD3C00; } .actnCellspn .fa-save { color: #5cb85c; } .activeModel { display: inline-block; float: right; margin-right: 10px; } .activeModel::after { clear: both; display: block; content: ""; } .activeModel span { float: left; margin-right: 10px; } .activeModel .switch.switch-cstm.switch-inline { float: left; width: auto; margin-top: 6px; } .input-flex { display: flex; align-items: flex-start; } .chatgpt { display: inline-flex; align-items: center; cursor: pointer; position: relative; } .chatgpt svg { width: 37px; height: 37px; border: 2px solid transparent; padding: 4px; border-radius: 50px; pointer-events: none; -webkit-transition: 0.15s; transition: 0.15s; margin-left: 5px; } .chatgpt:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 37px; height: 37px; border: 2px solid #444; padding: 3px; border-radius: 50px; pointer-events: none; } .chatgpt.active:before { animation: border-rotate 1s infinite; border-color: #e9e9e9; border-top-color: #19c37d; } .chatgpt.active svg { /*animation: border-rotate2 1s infinite;*/ } .chatgpt:not(.active):hover:before { border-color: #19c37d; } .chatgpt:not(.active):hover svg { background: #19c37d; fill: #fff; } @keyframes border-rotate { 100% { rotate: 360deg } } @keyframes border-rotate2 { 100% { rotate: -360deg } } /*===========================================================================================*/ .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; } .nmbrBlck .btmtxt { font-size: 15px; font-family: 'Nunito-Bold'; line-height: 1.2em; letter-spacing: -0.5px; text-align: center; width: 100%; color: var(--theme-color); padding-top: 23px; } .nmbrBlck .btmtxt a { color: inherit; } .infoOpen .showReadMore { overflow: auto; } .widgetCont:not(.showReadMore) + .moreInfoBtn { display: none; } .infoBlck .btmtxt { /*font-size: 13px; font-family: 'Nunito-Bold'; line-height: 1.2em; letter-spacing: -0.5px; text-align: center; width: 100%;*/ /*position: absolute; left: 0; right: 0; bottom: 20px;*/ } .leadCtr .headLeft { display: inline-block; float: left; width: calc(100% - 225px); } .leadCtr .headLeft .panel-title p { } .leadCtr .headRight { display: inline-block; float: right; margin-top: 10px; } @media screen and (max-width:1300px) { .leadCtr .headRight { margin-top: 18px; } } .rdcPrice td { vertical-align: top !important; font-family: 'Nunito' !important; } .rdcPrice td ul { padding: 10px 10px; margin: 0px; } .rdcPrice td ul li { list-style: none; } .rdcPrice td ul li span { display: inline-block; } .rdcPrice td ul li span:first-child { min-width: 100px; } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none !important; } .docs-controls { display: flex; align-items: center; justify-content: flex-start; } .docs-controls .btn:last-child { margin-right: 0; } .docs-controls .btn { margin-bottom: 3px; margin-right: 2px; width: 35px; height: auto; border-radius: 5px; padding: 5px 0; } .docs-controls .btn-group.btn-group-crop .btn { width: auto; } .btn-group.btn-group-crop { display: block !important; } .cropBlock .btnSave { background-color: #15a02b !important; border-color: #15a02b !important; color: #fff !important; margin-top: 3px; } .btn-group-crop button span { /*padding-top: 5px !important;*/ } /*========================================Ticket System===================================================*/ .grid-item.maxPadding { } .infoBlck .btmtxt { /*font-size: 13px; font-family: 'Nunito-Bold'; line-height: 1.2em; letter-spacing: -0.5px; text-align: center; width: 100%; position: absolute; left: 0; right: 0; bottom: 10px;*/ } .bdr-btn { color: var(--theme-color) !important; border-color: var(--theme-color) !important; } .bdr-btn:hover { background-color: var(--theme-color) !important; color: #fff !important; } .tktNormal { border-color: #3f97e0 !important; } .tktHigh { border-color: #ecc848 !important; } .tktCritical { border-color: #f56262 !important; } .tktNormal .fa-info-circle { color: #3f97e0 !important; } .tktHigh .fa-info-circle { color: #ecc848 !important; } .tktCritical .fa-info-circle { color: #f56262 !important; } .tktSystm { margin-left: auto !important; } .tktSystm .form-control { background-color: #f7fafc; border-color: #e4e9f1; } .tktSystm .nav-tabs > li > a { background: transparent !important; color: #555 !important; border-color: transparent !important; } .tktSystm .tktSystmNav { border-bottom: 2px solid rgba(12, 116, 227, 0.15); } .tktSystm .nav-tabs > li { position: relative; margin-right: 5px; } .tktSystm .nav-tabs > li::after { content: ""; width: 100%; height: 2px; background: rgb(12, 116, 227); position: absolute; bottom: -2px; left: 0; opacity: 0; -webkit-transition: 0.35s; transition: 0.35s; } .tktSystm .nav-tabs > li:hover:after { opacity: 1; } .tktSystm .nav-tabs > li.active:after { bottom: -1px; opacity: 1; } .tktSystm .tktSystmLst { border-left: 7px solid #ccc; background-color: #fff; padding: 25px; margin-bottom: 25px; border-radius: 5px; box-shadow: 0 1px 5px 0 rgba(32,33,36,0.2); border-color: rgba(223,225,229,0); position: relative; } .tktSystm .tktSystmLst:first-child { margin-top: 20px; } .tktSystm .hideShwFltr a { color: var(--theme-color); } .tktSystmTitle { font-size: 18px; width: calc(100% - 90px); font-family: 'Nunito-Bold'; } .tktSystmTitle a { display: inline-block; } .tktSystmMsg { display: inline-block; position: absolute; top: 25px; right: 25px; background-color: #e2e8f0; padding: 5px; border-radius: 50px; min-width: 80px; text-align: center; } .tktSystmMsg .fa { margin-right: 10px; vertical-align: middle; } .tktSystmMsg span { display: inline-block; vertical-align: middle; font-size: 15px; } .tktSystmLst ul { padding: 0px; font-size: 0; margin: 0px; } .tktSystmLst ul li { display: inline-block; font-size: 0px; margin: 0px; margin-right: 14px; padding-right: 14px; position: relative; } .tktSystmLst ul li:after { content: ""; display: inline-block; width: 2px; background-color: #e2e8f0; height: 100%; position: absolute; right: 0; top: 0; } .tktSystmLst ul li:last-child:after { display: none; } .tktSystmLst ul li .fa { vertical-align: middle; margin-right: 5px; } .tktSystmLst ul li .fa.fa-tag { color: #85b0dd; } .tktSystmLst ul li .fa.fa-clock-o { color: #4cae4c; } .tktSystmLst ul li span { vertical-align: middle; display: inline-block; font-size: 14px; } .rdBtnBlc { position: relative; min-height: 110px; } .rdBtnBlc h3 { width: calc(100% - 50px); font-size: 14px; text-transform: uppercase; color: #000; font-weight: bold; letter-spacing: 1px; font-family: 'Nunito' !important; } .rdBtnBlc p { width: calc(100% - 50px); margin: 0px; } .rdBtnBlc .rdInpt { padding: 20px; margin: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; display: inline-block; z-index: 1; } .rdBtnBlc .rdInpt input { margin: 0; position: absolute; opacity: 0; cursor: pointer; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; } .rdBtnBlc .rdMark { position: absolute; top: 20px; right: 20px; height: 20px; width: 20px; background-color: #fff; border-radius: 50%; border: 1px solid #eee; } .rdBtnBlc .rdFillBdr { border-radius: 5px; border: 1px solid #e4e9f1; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0; z-index: -1; } .rdBtnBlc .rdInpt input:checked ~ .rdMark { background-color: #2196F3; border-color: transparent; } .rdBtnBlc .rdInpt input:checked ~ .rdFillBdr { background-color: #ebf8ff; border-color: #96d0f5; } .rdBtnBlc .rdMark:after { content: ""; position: absolute; display: none; } .rdBtnBlc .rdInpt input:checked ~ .rdMark:after { display: block; } .rdBtnBlc .rdInpt .rdMark:after { top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: white; } .tktSystm .fileUpload_content { border: 1px dashed #e4e9f1; min-height: 150px; background-color: #f7fafc; } .tktSystm .fileUpload_area .docs-tooltip { top: 30px; text-align: center; font-size: 18px; color: #4a5568; } .tktSystm .docs-tooltip .fa { font-size: 50px; color: #4a5568; } .tktSystm .fileUpload_area .drgTxt { display: block; margin: 0; } .tktSystm .fileUpload_area .drgTxt span { font-size: 14px; } .dvRspnseBlck { margin-bottom: 20px; } .dvRspnseBlck .panel { /*width: calc(100% - 120px);*/ width: 75%; margin-left: 0px; margin-right: auto; background-color: #f4f4f4; margin-bottom: 10px; border-radius: 10px 10px 10px 0px; box-shadow: none; } .dvRspnseBlck .panel .panel-body { padding: 20px; min-height: 100px; } .dvRspnseBlck .panel label { color: #333; } .dvRspnse span { display: block; color: #2b2c33; margin-bottom: 5px; } .dvRspnse p { line-height: 1.6; color: #333; margin-bottom: 20px; } .myRspnseBlck .panel { margin-left: auto; margin-right: 0px; background-color: #dbeafb; border-radius: 10px 10px 0px 10px; } .myRspnseBlck .dvRspnseUsr { text-align: right; } .myRspnseBlck .dvRspnseUsr label { margin-left: auto; margin-right: 120px; } .myRspnseBlck .dvRspnseUsr .usrImg { float: right; margin-right: 0px; margin-left: 10px; left: inherit; right: 0; background-color: #fff; } .dvRspnseAtts { margin-bottom: 20px; } .dvRspnseAtts ul { margin: auto; padding: 0px; list-style: none; } .dvRspnseAtts ul li { margin: auto; margin-bottom: 10px; } .dvRspnseAtts ul li:before { content: ""; display: inline-block; width: 5px; height: 5px; background: #333; border-radius: 50%; vertical-align: middle; opacity: 0.9; } .dvRspnseAtts ul li:last-child { margin-bottom: auto; } .dvRspnseAtts ul li a { color: #333; padding-left: 5px; display: inline-block; vertical-align: middle; } .dvRspnseTm { position: absolute; bottom: 11px; right: 20px; font-size: 12px; margin: auto; } .dvRspnseBlck .dvRspnseUsr { display: inline-block; width: 100%; vertical-align: middle; text-align: left; margin-top: 0px; position: relative; } .dvRspnseBlck .dvRspnseUsr label { margin: 0px; margin-left: 120px; vertical-align: middle; display: inline-block; } .dvRspnseBlck .dvRspnseUsr span { margin: 0px; vertical-align: middle; display: inline-block; font-weight: normal; font-family: 'Nunito-SemiBold'; color: #656565; font-size: 13px; line-height: normal; } .dvRspnseBlck .dvRspnseUsr .usrImg { float: left; top: -56px; margin-left: 0px; margin-right: 10px; width: 100%; height: auto; border-radius: 5px; text-align: left; background-color: #fffef2; padding: 5px 10px; position: absolute; left: 0; max-width: 110px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .dvRspnseBlck1 .panel { /*border-bottom: 1px solid #dadadc; border-radius: 5px 5px 0px 0px;*/ } .dvResponseUpld .upldFilelst { margin: 0px !important; } .dvResponseUpld .upldFilelst .uFilelst:first-child { margin-top: 10px; } .dvReplyBx { position: relative; } .dvReplyBx .panel { /*width: calc(100% - 120px);*/ width: 75%; margin-left: auto; background-color: #f1f1f4; margin-bottom: 40px; } .dvReplyBx .panel .panel-body { padding: 20px; } .dvReplyBx .panel .form-control { background-color: #fff; border-color: #ffffff; } .dvReplyBx .dvRspnseUsr { position: relative; } .dvReplyBx .dvRspnseUsr .usrImg { float: left; top: -86px; margin-left: 0px; margin-right: 10px; height: auto; border-radius: 5px; text-align: left; background-color: #f1f1f4; padding: 5px 10px; position: absolute; left: 0; width: calc(25% - 15px); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .dvReplyBx .dvRspnseUsr .usrImg span { margin: 0px; vertical-align: middle; display: inline-block; font-weight: normal; font-family: 'Nunito-SemiBold'; color: #656565; font-size: 13px; line-height: normal; } .dvReplyBx .usrImage { width: 25px; height: 25px; max-width: 100%; display: inline-block; overflow: hidden; border-radius: 50%; margin-right: 5px; vertical-align: top; } .dvReplyBx .usrNameTxt { display: inline-block; margin: 3px auto; } .dvReplyBx .lmt_crct { margin-bottom: -15px !important; } .dvReplyFtr .commnt_send { display: inline-block; min-width: 120px; text-align: right; vertical-align: top; } .dvReplyFtr .commnt_attch { width: calc(100% - 40px); position: relative; display: inline-block; } .dvReplyFtr .commnt_attch .drgdrpWrp { border-radius: 3px; position: relative; height: 78px; background-color: #FFF; width: calc(100% - 35px); display: inline-block; vertical-align: top; } .dvReplyFtr .infoIcn { display: inline-block; display: inline-block; margin: 5px; vertical-align: top; cursor: pointer; vertical-align: middle; cursor: pointer; } .dvReplyFtr .infoIcn .fa { font-size: 20px; } .dvReplyFtr .filetype { opacity: 0; visibility: hidden; position: absolute; top: 0px; right: 35px; max-width: 280px; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 5px; -webkit-transition: 0.35s; transition: 0.35s; width: 100%; display: inline-block; } .dvReplyFtr .infoIcn:hover ~ .filetype { opacity: 1; visibility: visible; } .drp_files input[type="file"] { width: 100%; height: 100%; opacity: 0; display: inline-block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 99; cursor: pointer; } .drpInfo { font-size: 14px; box-sizing: border-box; position: absolute; top: 0px; bottom: 0; left: 0px; right: 0; margin: auto; z-index: 0; color: #ababab; cursor: pointer; width: 100%; height: 100%; display: table; vertical-align: top; padding: 20px 10px; text-align: center; } .drpInfo .fa { font-size: 15px; display: table-cell; vertical-align: top; text-align: right; padding-right: 10px; } .drpInfo span { display: table-cell; vertical-align: top; text-align: left; line-height: normal; } .drpInfo span i { font-style: normal; } .tktSystm .dvResponseUpld .drp_files { width: 170px !important; display: inline-block; } .tktSystm .dvResponseUpld .fileUpload_content { background-color: #fff; border: 1px solid var(--theme-color); } .tktSystm .dvResponseUpld .docs-tooltip { width: 100%; max-width: 100%; left: 0px; top: 0px; bottom: 0px; color: var(--theme-color); font-size: 14px; } .tktSystm .dvResponseUpld .fileUpload_content { min-height: 31px; } .tktSystm .dvResponseUpld .fileUpload_area .drgTxt { margin: 4px 5px; } .tktSystm .dvResponseUpld .infoIcn { display: inline-block; margin-left: 10px; vertical-align: middle; cursor: pointer; } .tktSystm .dvResponseUpld .infoIcn .fa { font-size: 20px; } .tktSystm .dvResponseUpld .filetype { opacity: 0; visibility: hidden; position: absolute; top: calc(-50% - 8px); left: 210px; max-width: 280px; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 5px; -webkit-transition: 0.35s; transition: 0.35s; width: 100%; display: inline-block; } .tktSystm .dvResponseUpld .infoIcn:hover ~ .filetype { opacity: 1; visibility: visible; } .tktSystm .dvResponseUpld .filetype label { margin: 0px; } .tktSystm .lmt_crct { text-align: right; width: 100%; display: block; } .tktSystmPopup { /* background-color: rgba(0, 0, 0, 0.3); */ } .tktSystmPopup .modal-dialog { } .tktSystmPopup .modal-dialog .modal-content { } .tktSystmPopup .modal-dialog .modal-body { padding-top: 50px; padding-bottom: 50px; } .tktSystmPopup .modal-dialog .modal-body p { } .tktSystmPopup .modal-dialog .modal-body a { } .tktSystmPopup .tickIcon { display: inline-block; width: 60px; height: 60px; background: #1fa67a; color: #fff; border-radius: 50px; text-align: center; margin-bottom: 10px; } .tktSystmPopup .tickIcon .fa { font-size: 35px; color: #fff; line-height: 1.8; } .tI10 { text-indent: 10px !important; } b, strong { font-family: 'Nunito-Bold'; } .fixedTbl { table-layout: fixed; } .dashBlk .brdClr.logoBlkWithTxt > .panel, .dashBlk .logoBlkWithTxt + .brdClr.nmbrBlck > .panel { /*min-height: 470px;*/ } /*31 may 2022 */ .DashboardReport .defaultBlck .panel { background-color: #fff; -webkit-box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.12); box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.12); border-radius: 22px; } .DashboardReport .vst_count span { display: inline-flex; line-height: 1.2; align-items: center; font-size: 14px; font-family: 'Nunito-SemiBold'; } .DashboardReport .vst_count a { display: flex; width: 100%; align-items: center; align-content: center; flex-flow: row wrap; justify-content: space-between; } .DashboardReport .vst_count { display: inline-flex; width: 100%; align-items: center; line-height: normal; } .DashboardReport .defaultBlck .vst_count { border-bottom: 1px solid #e7eef6; margin-bottom: 6px; padding-bottom: 6px; } .DashboardReport .defaultBlck .vst_count strong { display: inline-flex; align-items: center; float: none; } .DashboardReport .nmbrBlck .widgetTl + .widgetTl strong { font-size: 25px; } .readMore { text-align: center; padding-top: 10px; color: var(--theme-color); font-weight: 600; } .readMore a { color: var(--theme-color); } #dvLike + .head-wrap { padding-top: 0; } .head-wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; } .head-links { display: inline-flex; align-items: center; justify-content: flex-start; } .head-links a { white-space: nowrap; border-radius: 50px; padding: 7px 8px; border: 3px solid transparent; line-height: normal; font-family: 'Nunito-Bold'; text-align: center; color: var(--theme-color); transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .head-links:not(.stepclk) a:first-child:not(.active) { padding-left: 0; } .head-links:not(.stepclk) a:last-child:not(.active) { padding-right: 0; } .bodylocked .head-links a { padding-left: 10px; padding-right: 10px; } .head-links a.active { background: #fff; border-color: #fcbf03; } .head-wrap .dropdown-el { box-shadow: none; } .dropdown-wrap { position: relative; width: 250px; height: 40px; } .dropdown-wrap .dropdown-el { margin: 0px; right: 0; } .likeToWrap { position: relative; height: 70px; } .likeToWrap .dropdown-el { top: 15px; right: 0; left: auto; } .head-wrap + .right-side-like .likeToWrap { height: auto; } .head-wrap + .right-side-like .likeToWrap .dropdown-el { top: 21px; right: 15px; box-shadow: 0px 0px 10px 5px rgb(118 144 165 / 15%); } .panel.openAI { padding: 25px 30px; } .openAI ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; align-items: center; } .openAI ul li { display: inherit; align-items: inherit; justify-content: inherit; margin-bottom: 0; width: 100%; font-family: 'Nunito-SemiBold'; } .openAI ul strong { color: #000; line-height: 0; display: inline-flex; align-items: center; white-space: nowrap; min-height: 37px; } .openAI ul strong i { margin-right: 5px; font-size: 12px; } .openAI-logo { position: relative; height: 37px; display: inline-flex; align-items: center; justify-content: flex-start; margin-right: 35px; } .openAI-logo:after { content: ""; position: absolute; top: 0; background: #edeef0; width: 2px; height: 100%; right: -35px; margin: auto; } .openAI-logo img { width: 95px; } .openAI-logo a { display: inline-flex; align-items: center; line-height: 1; color: #000; } .openAI-logo b { font-size: 17px; } .openAI-logo .chatgpt { margin-right: 5px; } .openAI .form-group { margin: 0; padding-left: 35px; padding-right: 15px; position: relative; width: 100%; line-height: normal; font-size: 12px; } .openAI .form-group span { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; } .openAI .form-group span .form-control { margin-right: 15px; } .openAI p { margin: 0; padding-left: 35px; padding-right: 15px; position: relative; width: 100%; line-height: normal; font-size: 13px; } .openAI p b { display: inline-block; } .loadDiv { display: none; width: 100%; padding-top: 20px; } .loadDiv img { width: 50px; text-align: center; display: block; margin: 0 auto; } .breadcrumbs-head { padding: 10px 0; border-bottom: 1px solid #dbdce1; background: #fff; position: relative; z-index: 20; } .breadcrumbs-head { position: -webkit-sticky; position: sticky; top: 70px; } .breadcrumbs ul { width: 100%; font-weight: 600; list-style: none; margin: 0; padding: 0; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 1; } .breadcrumbs ul > li:first-child a { } .breadcrumbs ul > li:first-child + li:before { } .breadcrumbs ul > li { margin: 0; line-height: inherit; display: inline; color: #000; } .breadcrumbs ul > li:hover { color: var(--theme-color); } .breadcrumbs ul > li + li:before { content: "\f054"; margin: 0 10px; display: inline-block; vertical-align: middle; line-height: inherit; min-height: 16px; position: relative; font-family: FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 10px; top: 1px; } .breadcrumbs ul > li a.active, .breadcrumbs ul > li.active a { cursor: default; color: #adadad; } .breadcrumbs ul > li a { color: inherit; text-decoration: none; display: inline; line-height: inherit; } .breadcrumbs-head .container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .breadcrumbs-head .container::after { display: none; } .breadcrumbs-head .container::before { display: none; } .head-controller ul { padding: 0; margin: 0; display: inline-flex; align-items: center; list-style: none; } .head-controller li { margin-bottom: 0; /*line-height: 0;*/ margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; } .head-controller li a { display: inherit; justify-content: inherit; align-items: inherit; } .head-controller li a i { display: inherit; justify-content: inherit; align-items: inherit; width: 40px; height: 40px; border-radius: 50%; } .head-controller li a i svg { pointer-events: none; } .head-controller li a.active i, .head-controller li a:hover i { background-color: #f3f1f2; } .width-auto { width: auto !important; } .d-none { display: none !important; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-block { display: block !important; } .d-flex { display: flex !important; } .row-wrap { flex-flow: row wrap; } .d-inline-flex { display: inline-flex !important; } .align-items-center { align-items: center; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .align-items-start { align-items: start; } .align-items-end { align-items: end; } .marketingRpt { position: relative; } .marketingRpt > div { background: #f2f3f5; border-radius: 5px; padding: 20px; text-align: left; display: flex; align-items: center; flex-direction: column; justify-content: center; align-content: center; transition: 0.1s all ease-in-out; } .marketingRpt > div * { pointer-events: none; } .marketingRpt input[type="submit"] { border: none; background: transparent; color: inherit; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; width: 100%; height: 100%; } .marketingRpt span { color: var(--theme-color); font-size: 20px; font-weight: bold; display: inline-flex; align-items: center; margin-bottom: 5px; /*background-color: #fff; height: 50px; width: 50px; min-width: 50px; border-radius: 50%; text-align: center; justify-content: center; border: 2px solid var(--theme-color);*/ } .marketingRpt h3 { font-size: 15px; font-weight: 600; color: #000; display: block; line-height: 1.2; margin: 0; } .marketingRpt input:hover + div { box-shadow: 0px 5px 5px rgba(236, 236, 236, 0.6); background: #e6f0fb; } .marketingRpt input:hover + div * { } .marketing-liketo { margin: 30px 0 15px 0; display: flex; align-items: center; float: right; } .marketing-liketo .dropdown-wrap { position: relative; } .marketing-liketo .dropdown-el { top: auto; bottom: 0; } .marketing-liketo h3 { color: #000; font-size: 17px; font-family: 'Nunito-Bold'; display: inline-flex; margin-bottom: 0; margin-right: 15px; } /* new core page builder common css start*/ /* new core page builder common css start*/ .sidebar { display: block !important; background: #fff; position: fixed; top: 0px; right: -10%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); width: calc(50% - 180px); max-width: 95%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: all 0.8s; transition: all 0.8s; box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%); border-left: 1px solid rgb(218,220,224); height: 100%; overflow: hidden; z-index: 1031; } .sidebar.visible { opacity: 1; right: 0%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .sidebar-40 { width: calc(40% - 0px) !important; } .sidebar-50 { width: calc(50% - 0px) !important; } .sidebar-60 { width: calc(60% - 0px) !important; } .sidebar-70 { width: calc(70% - 0px) !important; } .sidebar-header { border-bottom: 1px solid rgba(0,0,0,.12); position: relative; display: flex; justify-content: space-between; height: 60px; align-items: center; padding: 0 22px; padding-right: 12px; color: #3c4043; font-size: 18px; } .sidebar-header span { white-space: nowrap; margin-right: 10px; } .sidebar-header > div { display: inline-flex; align-items: center; } .sidebar-header .form-control { height: 32px; } .sidebar-header .close { float: none; opacity: 1; fill: #616161; width: 36px; height: 36px; min-width: 36px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; margin-left: 5px; } .sidebar-header .close:hover { background: rgba(0, 0, 0, 0.04); } .sidebar-header .btn { margin-left: 10px; } .sidebar-header .publsSwtch { white-space: nowrap; vertical-align: middle; } .sidebar-header .publsSwtch label { margin: 0; margin-right: 10px; } .sidebar .content { height: calc(100vh - 60px); } .sidebar iframe { width: 100%; height: 100%; border: none; padding: 0; margin: 0; } .sidebar-header .d-inline-block { position: relative; } .sidebar-header .fltr-btn { background-image: url(../images/searchIcon.png) !important; background-color: transparent !important; background-repeat: no-repeat; border-radius: 4px; border: none; padding: 0; width: 30px; background-position: center left 2px; margin: 0; position: absolute; top: 0; right: 0px; box-shadow: none !important; height: 32px; font-size: 0; } .sidebar .modal-body, .sidebar-header + .modal-body { padding: 22px; } .elementRow { padding-bottom: 1.5rem; padding-top: 1.5rem; border-bottom: 1px dashed rgba(0,0,0,.12); } .elementRow:first-child { padding-top: 0; } .elementRow:last-child { border: none; } .element-addEdit { background-color: #f3f3f3; border: 0px dotted rgba(0,0,0,.1); width: 100%; min-height: inherit; position: relative; max-width: 100%; } .element-dashed { width: 100%; height: 44px; position: relative; border: 2px dashed rgba(0,0,0,.1); } .add-icon { font-style: normal; box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 5px 0px rgb(60 64 67 / 15%); background-color: #fff; color: rgb(32,33,36); left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all .28s cubic-bezier(.4,0,.2,1); transition: all .28s cubic-bezier(.4,0,.2,1); z-index: 10; width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; } .add-icon svg { pointer-events: none; } .add-icon.active, .add-icon:hover { background: var(--theme-color); z-index: 11; } .add-icon.active > svg, .add-icon:hover > svg { fill: #fff; } .element-text { padding: 15px 10px; color: #212121; font-size: 11pt; font-weight: 400; line-height: 1.6667; cursor: text; } .element-text h3 { font-family: 'Nunito-Bold'; color: var(--theme-color); font-size: 20px; margin-bottom: 0; } .elementRpt .btn:not(.pulse-button) { box-shadow: none !important; } .elementRpt .btn svg { display: none; font-size: 20px; height: 20px; fill: #fff; margin-right: 3px; margin-top: -2px; } .elementRpt .btn.btn-ghost svg { display: inline-block; } .elementRpt .link-button, .elementRpt .box-link-button { color: #5f6267; padding-left: 0; padding-right: 0; background: transparent !important; } .elementIdRpt { min-height: inherit; } .elementRpt { min-height: inherit; } .elementRpt .element-thumb { background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 300px; width: 100%; position: relative; } .elementRpt .element-thumb i, .elementRpt .element-thumb svg { /*color: #80868b !important; fill: #80868b !important;*/ } .elementRpt .mce-edit-focus { outline-color: transparent; } .element-content { min-height: inherit; } .elementRpt .e_360_sphere .element-thumb { background-size: 100% auto; } .scroll-div { background-color: #fff; -webkit-flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; padding: 1px; padding-right: 15px; padding-left: 5px; } .modal-body .scroll-div { /*height: calc(100vh - 103px);*/ max-height: calc(100vh - 103px); } .builderTabs .scroll-div { /*height: calc(100vh - 155px);*/ max-height: calc(100vh - 175px); padding-right: 0; } .builders-TabElement .scroll-div { max-height: calc(100vh - 180px); } .builders-navwidget .scroll-div { max-height: calc(100vh - 284px); } .modal .modal-body .scroll-div { /* if modal not in the sidebar */ max-height: initial; } .row-image { display: flex; flex-flow: row wrap; margin-left: -11px; margin-right: -11px; /*padding-bottom: 100px;*/ } .row-image .col-image { padding-left: 11px; padding-right: 11px; flex: 0 0 150px; max-width: 150px; width: 150px; } @media screen and (min-width:768px) and (max-width:1299px) { .modal.builders-mediaPopup .row-image .col-image { flex: 0 0 145px; max-width: 145px; } } .placeholder-AddNew { position: relative; text-align: center; } .placeholder-AddNew a { display: flex; align-items: center; border: 2px dashed rgb(232,234,237); background-color: rgb(0 0 0 / 4%); transition: 0.15s ease; cursor: pointer; position: relative; overflow: hidden; width: 100%; height: 100px; justify-content: center; margin-bottom: 5px; box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); border-radius: 10px; } .placeholder-AddNew a:hover { border-color: var(--theme-color) } .placeholder-AddNew svg { fill: #888889; pointer-events: none; } .placeholder-AddNew p { margin-bottom: 20px; text-align: left; line-height: normal; color: #3c4043; display: flex; justify-content: center; align-items: center; font-family: 'Nunito-Bold'; } .builders-BannerSliderElement .row-image .col-image { flex: 0 0 100%; max-width: 100%; width: 100%; } .builders-BannerSliderElement .imageSelectBox { height: 132px; } .builders-BannerSliderElement .row-image .col-image.col-6 { flex: 0 0 50%; max-width: 50%; width: 50%; } .builders-BannerSliderElement .row-image .col-image.col-6 .imageSelectBox { height: 140px; } @media screen and (min-width:794px) { .builders-BannerSliderElement .row-image .col-image.col-6 .imageSelectBox { height: 230px; } } @media screen and (min-width:600px) and (max-width:793px) { .builders-BannerSliderElement .row-image .col-image.col-6 .imageSelectBox { height: 170px; } } .builders-BannerSliderElement .imageSelectBox .element-thumb { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background-size: auto 100%; background-repeat: no-repeat; background-position: center; } .builders-BannerSliderElement .imageSelectBox .element-thumb img { max-width: initial; display: none; } .builders-BannerSliderElement .imageSelectBox .element-textblock { position: absolute; width: 100%; text-align: left; padding: 10px 20px; font-size: 10px; top: 0; z-index: 1; } .builders-BannerSliderElement .cAlignTop .imageSelectBox .element-textblock { top: 0; } .builders-BannerSliderElement .cAlignBot .imageSelectBox .element-textblock { top: auto; bottom: 0; } .builders-BannerSliderElement .cAlignLeft .imageSelectBox .element-textblock { text-align: left; } .builders-BannerSliderElement .cAlignRight .imageSelectBox .element-textblock { text-align: right; } .builders-BannerSliderElement .imageSelectBox .element-tagline { line-height: 1; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .builders-BannerSliderElement .imageSelectBox .element-heading { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .builders-BannerSliderElement .imageSelectBox .element-description { line-height: normal; margin-top: 10px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .builders-BannerSliderElement .imageSelectBox .element-textblock h1 { font-size: 2.625em; margin-bottom: 0; white-space: inherit; overflow: inherit; text-overflow: inherit; width: inherit; } .builders-BannerSliderElement .imageSelectBox .element-textblock h2 { font-size: 2em; margin-bottom: 0; white-space: inherit; overflow: inherit; text-overflow: inherit; width: inherit; } .builders-BannerSliderElement .imageSelectBox .element-textblock h3 { font-size: 1.375em; margin-bottom: 0; white-space: inherit; overflow: inherit; text-overflow: inherit; width: inherit; } .builders-BannerSliderElement .imageSelectBox .element-textblock h4, .builders-BannerSliderElement .imageSelectBox .element-textblock h5 { font-size: 1.25em; margin-bottom: 0; white-space: inherit; overflow: inherit; text-overflow: inherit; width: inherit; } .builders-BannerSliderElement .imageSelectBox .element-textblock h6 { font-size: 1.125em; margin-bottom: 0; white-space: inherit; overflow: inherit; text-overflow: inherit; width: inherit; } .imageSelectRpt { position: relative; text-align: center; margin-bottom: 5px; } .imageSelectRpt > input { margin: 0 !important; outline: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; cursor: pointer; } .imageSelectBox { display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.05); background-color: rgb(0 0 0 / 4%); transition: 0.15s ease; cursor: pointer; position: relative; margin-bottom: 0; overflow: hidden; width: 100%; height: 100px; justify-content: center; } .imageSelectBox img { padding: 0; margin: 0; max-width: 100%; max-height: 100%; } .imageSelectBox:before { background-color: #e7e7e7; content: ""; position: absolute; display: block; width: 25px; height: 25px; border-radius: 50%; top: 5px; right: 5px; opacity: 1; transform: scale(1); transition: 0.25s ease; z-index: 2; } .imageSelectBox:after { color: #c9c9c9; font-size: 14px; content: "\f00c"; font-family: "Font Awesome\ 5 Free"; font-weight: 900; position: absolute; top: 5px; right: 5px; line-height: 1; opacity: 1; transform: scale(1); transition: 0.25s ease; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; z-index: 2; } .selected .imageSelectBox:after { } .imageSelectRpt:hover > input + .imageSelectBox, .imageSelectRpt > input:checked + .imageSelectBox { border-color: #15a02b; } .imageSelectRpt:hover > input + .imageSelectBox:before, .imageSelectRpt > input:checked + .imageSelectBox:before { background-color: #15a02b; } .imageSelectRpt:hover > input + .imageSelectBox:after, .imageSelectRpt > input:checked + .imageSelectBox:after { color: #fff; } .image-name { margin-bottom: 20px; text-align: left; line-height: normal; color: #3c4043; display: flex; justify-content: space-between; align-items: center; position: relative; } .image-name span:nth-child(2) { font-size: 12px; background: var(--theme-color); background: #e7e7e7; text-align: center; overflow: initial; white-space: initial; text-overflow: initial; width: auto; padding: 2px 5px; font-family: 'Nunito-SemiBold'; position: absolute; top: -26px; left: 1px; } .image-name span:nth-last-child(2) { } .image-name span { /*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;*/ width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .image-name span:empty { display: none !important; } .imageSelectRpt .cpn_div span { background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; line-height: 1.2; padding: 5px; text-align: left; display: block; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropmenu-menu { display: inline-flex; position: relative; z-index: 2; } .dropmenu-menu .add-dropmenu-menu { padding: 16px; text-align: left; width: auto; } .dropmenu-menu .add-dropmenu-menu .close { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; } .dropmenu-menu .add-dropmenu-menu .close svg { width: 100%; height: 100%; display: inline-block; } .dropmenu-menu .add-dropmenu-menu li .btn { margin-left: 0px; margin-right: 0px; justify-content: center; display: inline-flex; } .dropmenu-menu .add-dropmenu-menu li .form-control ~ .btn { margin-left: 10px !important; } .dropmenu-menu .add-dropmenu-menu .file-group { display: inline-flex; } .dropmenu-menu.video-droptool { z-index: 1; } .video-droptool .add-dropmenu-menu { width: 400px !important; } /* new core page builder common css end*/ /* new core page builder common css end*/ .border-radius-50 { border-radius: 50px !important; } /*input[type="file"] { outline: none !important; padding-top: 8px; } input[type="file"]::file-selector-button { outline: none; font-size: 13px; color: #555; font-family: 'Nunito-Bold'; border: none; border-right: 1px solid #ccc; padding-right: 5px; background-color: #fff; transition: 1s; }*/ .file-group { display: flex; justify-content: center; align-items: center; } .file-group [type=file] ~ .btn { margin-left: 10px !important; } .file-group ~ .btn { margin-left: 10px !important; } [type=file] { cursor: pointer; -webkit-transition: 0.35s; transition: 0.35s; padding: 5px; } [type=file]::file-selector-button, [type=file]::-webkit-file-upload-button { height: 25px; -webkit-transition: 0.35s; transition: 0.35s; cursor: pointer; font: inherit; background: #f3f1f2; color: #000; padding: 3px 10px; margin: 0; margin-right: 5px; border: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; font-size: 12px; } [type=file]:hover::file-selector-button, [type=file]:focus::file-selector-button, [type=file]:active::file-selector-button, [type=file]:visited::file-selector-button, [type=file]:hover::-webkit-file-upload-button, [type=file]:focus::-webkit-file-upload-button, [type=file]:active::-webkit-file-upload-button, [type=file]:visited::-webkit-file-upload-button { /*background: #000000; color: #fff;*/ } [type=file]::placeholder { } @media (prefers-reduced-motion: reduce) { [type=file]::file-selector-button, [type=file]::-webkit-file-upload-button { } } /*---------------------------------------------------------------------------- SIDEBAR START -----------------------------------------------------------------------------*/ .cms-sidebar { background: #fff; position: fixed; width: 400px; max-width: 95%; height: 100%; z-index: 1030; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: all 0.8s; transition: all 0.8s; -webkit-box-shadow: -8px 0px 9px -5px rgba(0, 0, 0, 0.18); -moz-box-shadow: -8px 0px 9px -5px rgba(0, 0, 0, 0.18); box-shadow: -8px 0px 9px -5px rgba(0, 0, 0, 0.18); } .cms-sidebar.visible + .cms-backdrop { background-color: #000; height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; z-index: 1029; transition: opacity .3s linear; opacity: .47; } .cms-sidebar .close { float: none; opacity: 1; fill: #616161; width: 36px; height: 36px; min-width: 36px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; margin-left: 5px; position: absolute; top: 10px; right: 10px; z-index: 1; } .cms-sidebar .close:hover { background: rgba(0, 0, 0, 0.04); } .cms-sidebar .cms-sidebar-content { position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 100%; padding: 40px; height: 100%; max-height: 100vh; } .element-row { display: flex; flex-flow: row wrap; margin-left: -15px; margin-right: -15px; } .element-row .element-thumb { flex: 0 0 25%; max-width: 25%; padding-left: 15px; padding-right: 15px; margin-bottom: 1.5rem; } .element-row .element-textblock { flex: 0 0 75%; max-width: 75%; padding-left: 15px; padding-right: 15px; margin-bottom: 1.5rem; font-size: 15px; font-family: 'Nunito-Bold'; } .element-row .element-textblock h2 { font-size: 1.5em; font-weight: normal; } .element-row .element-textblock h3 { font-size: 1.17em; font-weight: normal; } .element-row .element-textblock h4 { font-size: 1em; font-weight: normal; } .cms-sidebar.style1 { left: 0; right: 0; top: -10%; width: 100%; max-width: 100%; height: auto; overflow: visible; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); box-shadow: 0px 0px 10px rgb(51 51 51 / 15%); border-bottom: 1px solid rgb(218,220,224); } .cms-sidebar.style1.visible { opacity: 1; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .cms-sidebar.style1 .cms-sidebar-content { width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%; padding-left: 30px; padding-right: 30px; } .cms-sidebar.style2 { left: 0; right: 0; top: -10%; width: 100%; max-width: 100%; height: auto; overflow: visible; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); box-shadow: 0px 0px 10px rgb(51 51 51 / 15%); border-bottom: 1px solid rgb(218,220,224); } .cms-sidebar.style2.visible { opacity: 1; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .cms-sidebar.style2 .cms-sidebar-content { width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%; padding-left: 30px; padding-right: 30px; } .cms-sidebar.style2 .element-row { display: flex; flex-direction: row-reverse; } .cms-sidebar.style3 { left: 0; right: 0; top: -10%; width: 100%; max-width: 100%; height: auto; overflow: visible; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); box-shadow: none; } .cms-sidebar.style3:after { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: calc(100% + 60px); background: #fff; border-radius: 0 0 150% 150%/0 0 200% 200%; transform: scaleX(1.5); z-index: -1; box-shadow: 0px 0px 10px rgb(51 51 51 / 15%); } .cms-sidebar.style3.visible { opacity: 1; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .cms-sidebar.style3 .cms-sidebar-content { width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; } .cms-sidebar.style4 { left: 0; right: 0; top: -10%; width: 100%; max-width: 100%; height: auto; overflow: visible; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); box-shadow: 0px 0px 10px rgb(51 51 51 / 15%); border-bottom: 1px solid rgb(218,220,224); } .cms-sidebar.style4:after { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: calc(100% + 60px); background: #fff; border-radius: 0 0 150% 150%/0 0 200% 200%; transform: scaleX(1.5); z-index: -1; box-shadow: 0px 0px 10px rgb(51 51 51 / 15%); } .cms-sidebar.style4.visible { opacity: 1; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .cms-sidebar.style4 .cms-sidebar-content { width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; } .cms-sidebar.style4 .element-row { display: flex; flex-direction: row-reverse; } .cms-sidebar.style5 { top: 0; left: -10%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%); border-left: 1px solid rgb(218,220,224); } .cms-sidebar.style5.visible { opacity: 1; left: 0%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .cms-sidebar.style5 .element-row { display: flex; flex-direction: column; padding-top: 32px; } .cms-sidebar.style5 .element-row .element-thumb, .cms-sidebar.style5 .element-row .element-textblock { flex: 0 0 100%; max-width: 100%; margin-bottom: 0; } .cms-sidebar.style5 .element-row .element-textblock { margin-top: 23px; } .cms-sidebar.style6 { top: 0; right: -10%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .cms-sidebar.style6.visible { opacity: 1; right: 0%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .cms-sidebar.style6 .element-row { display: flex; flex-direction: column; } .cms-sidebar.style6 .element-row .element-thumb, .cms-sidebar.style6 .element-row .element-textblock { flex: 0 0 100%; max-width: 100%; } /*---------------------------------------------------------------------------- CUSTOM TYPE -----------------------------------------------------------------------------*/ .custom-type { display: inline-flex; margin-bottom: 0; position: relative; text-align: left; align-items: flex-start; margin-right: 10px; } .custom-type:last-child { margin-right: 0; } .custom-type .checkmark { border-radius: 4px; background-color: #fff; border: 1px solid #bbbbbb; display: block; flex-shrink: 0; margin-right: 0.5rem; position: relative; height: 20px; width: 20px; transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); cursor: pointer; } .custom-type .checkmark:after { align-items: center; color: #ffffff; content: " "; display: flex; font-family: "icons"; font-size: 15px; justify-content: 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: 100%; height: 100%; } .custom-type .label { cursor: pointer; line-height: 1.1; min-height: 20px; display: inline-flex; flex-wrap: wrap; align-items: center; color: #686868 !important; font-size: 14px !important; padding: 0 !important; } .custom-type input { height: 100%; width: 100%; left: 0px; margin: 0 !important; padding: 0 !important; opacity: 0; position: absolute; top: 0; z-index: 1; cursor: pointer; } .custom-type input:checked + .checkmark, .custom-type input:checked + [type="hidden"] + .checkmark { background-color: var(--theme-color); border-color: var(--theme-color); } .custom-type input:checked + .checkmark:after, .custom-type input:checked + [type="hidden"] + .checkmark:after { opacity: 1; } .custom-type [type="radio"] + .checkmark, .custom-type [type="radio"] + [type="hidden"] + .checkmark { border-radius: 50%; } .custom-type [type="radio"] + .checkmark:after, .custom-type [type="radio"] + [type="hidden"] + .checkmark:after { background-color: var(--theme-color); top: 0px; left: 0px; right: 0; bottom: 0; margin: auto; border-radius: 50%; width: 10px; height: 10px; } .custom-type [type="radio"]:checked + .checkmark, .custom-type [type="radio"]:checked + [type="hidden"] + .checkmark { background: transparent; } .custom-type [type="checkbox"]:checked + .checkmark, .custom-type [type="checkbox"]:checked + [type="hidden"] + .checkmark { box-shadow: none; } .custom-type [type="checkbox"] + .checkmark:after, .custom-type [type="checkbox"] + [type="hidden"] + .checkmark:after { content: "\e90b"; } /*---------------------------------------------------------------------------- CUSTOM TYPE END -----------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------- BACKGROUND TINT LAYERS -----------------------------------------------------------------------------*/ .imgBlockTint, .imgBlockHover { opacity: 0; content: ""; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; display: block; transition: 0.7s; pointer-events: none; cursor: pointer; } .imgBlockTint { opacity: 0.3; } .builder-slider:hover .imgBlockHover { opacity: 0.87; } /*-----------------------------------------------------------------------------*/ .elements_LayoutElements { background-image: url(../img/carBGIMG.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .hide-panel-heading .panel { padding: 0; } .hide-panel-heading .panel-heading { display: none; } .url-permalink { display: flex; align-items: center; min-height: 30px; } .url-permalink label { margin-bottom: 0; } .url-permalink input { padding: 3px 7px; margin-left: 3px; line-height: 1; margin-bottom: 3px; border-radius: 50px; border: 1px dashed #80868b; outline: none; } .url-permalink input:focus { outline: none; } .slider-preview iframe { width: 100%; height: 370px; border: none; } .builder-mobSlider.hide-line .element-textblock { display: none !important; } .button-view .row:not(.button-controls) { display: none; } .text-black, .fa.text-black, .fas.text-black { color: #000 !important; } .roundBlock { text-align: center; border: 4px solid var(--theme-color); color: var(--theme-color); fill: var(--theme-color); border-radius: 30px; width: 260px; height: 220px; display: inline-flex; justify-content: center; align-items: center; flex-direction: column; margin-right: 30px; margin-bottom: 30px; float: left; } .roundBlock h4 { font-size: 50px; line-height: 1em; font-family: 'Nunito-black'; } .roundBlock p { line-height: normal; font-size: 16px; font-family: 'Nunito-Bold'; margin-bottom: 0px; } .roundBlock svg { fill: inherit; width: 50px; height: 40px; margin-top: 15px; } .popupAssistStats h3 { color: #020c18; margin-bottom: 15px; } .popupAssistStats .panel-body { text-align: center; } .popupAssistStats .panel-body h2 { display: block; text-align: center; font-size: 30px; font-weight: bold; color: #020c18; line-height: 1em; } .popupAssistStats .panel-body > p { margin: 0; line-height: normal; font-size: 15px; font-family: 'Nunito-Bold'; color: var(--theme-color); } .popupAssistStats .panel-body h5 { font-size: 17px; margin-bottom: 15px; color: var(--theme-color); } .popupAssistStats .panel-body ul { padding: 0; margin: 0; color: #020c18; } .popupAssistStats .panel-body ul li { text-align: left; margin-bottom: 15px; list-style: none; } .popupAssistStats .panel-body ul li:last-child { margin-bottom: 0; } .popupAssistStats .panel-body ul li span { display: inline-block; line-height: 1.2; font-size: 15px; font-family: 'Nunito-Bold'; } .popupAssistStats .panel-body ul li span:first-child { width: 50%; text-align: right; padding-right: 11px; } .statsTable { margin-bottom: 50px; } .statsTable .tblCstm th { background: transparent !important; color: #000; font-family: 'Nunito-Black'; border: none; } .statsTable .tblCstm td { color: #000; font-family: 'Nunito-Bold'; border: none; min-width: initial; } .statsTable .table-striped > tbody > tr:nth-child(even) > td { background-color: #f2f3f5; } .statsTable .tblClrHovr > tbody > tr:hover > td, .statsTable .tblCstm > tbody > tr:hover > td { background-color: #dce1ed !important; } .statsTable .statsCount { width: 30px; height: 30px; min-width: 30px; margin-left: 10px; margin-right: 10px; display: inline-flex; justify-content: center; text-align: center; align-items: center; background: var(--theme-color); color: #fff; } .statsTable .statsUrl { display: inline-block; max-width: calc(100% - 70px); word-break: break-all; vertical-align: middle; } .statsFlex { display: flex; } .knob-Wrap { display: inline-flex; flex-direction: column; position: relative; float: left; margin-left: 20px; } .knob-Wrap > div { display: inline-flex !important; align-items: center; justify-content: center; position: relative; z-index: 1; } .knob-Wrap input { margin: 0 !important; margin-top: -25px !important; font-size: 60px !important; } .knob-Wrap p { color: #ed9317; text-align: center; margin: 0; position: absolute; left: 0; right: 0; bottom: 55px; width: 100%; z-index: 99999; font-family: 'Nunito-Bold'; line-height: 1.2; font-size: 15px; } .disabled-dropdown { color: #999 !important; pointer-events: none !important; } .datepicker[readonly] { background: #fff; cursor: pointer; } .loading { display: none; background-color: rgba(0, 0, 0, 0.8); height: 100%; width: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; transition: opacity .3s linear; } .loading .round { width: 100px; height: 100px; border-radius: 50%; border: 5px solid #ddd; border-top-color: var(--theme-color); animation: rotate 1s infinite; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } @keyframes rotate { 100% { rotate: 360deg; } } .no-img { background-color: rgba(0,0,0,.03) !important; background-image: initial !important; } .no-img .add-icon { display: inline-flex !important; } .no-img img { opacity: 0; } .element-addEdit .no-img { border: none; } .mce-tinymce { z-index: 19 !important; } .mce-floatpanel.mce-fixed { top: 129px !important; } .element-valuation { display: flex; align-items: center; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 20px 0; } .element-valuation .container { max-width: 1126px; } .element-valuation .row { display: flex; flex-flow: row wrap; margin-left: -15px; margin-right: -15px; align-items: center; } .element-valuation .row::after, .element-valuation .row::before { display: none; } .element-valuation .element-textwrap { max-width: 440px; padding-left: 1px; } .element-valuation .element-tagline { font-weight: 500; color: #ffffff; opacity: 1.0; font-size: 17px; margin-bottom: 14px; margin-top: 4px; } .element-valuation .element-heading { font-weight: 600; color: #ffffff; opacity: 1.0; font-size: 28px; margin-bottom: 21px; max-width: 380px; line-height: 1.15; } .element-valuation .element-heading span { color: var(--theme-color); } .element-valuation .form-group { margin-bottom: 10px; } .element-valuation input, .element-valuation select { border: none; border-radius: 4px; width: 100%; font-size: 16px; height: 61px; padding: 10px 25px; } .element-valuation select { font-weight: 600; } .element-valuation input.text-uppercase::placeholder { text-transform: initial; } .element-valuation .button { margin-top: 12px; background: #01b975; font-size: 18px; font-weight: 700; width: 100%; height: 63px; max-width: initial; margin-bottom: 3px; border-radius: 50px; } .element-valuation .marketing { margin: 0; list-style: none; margin-left: 29px; } .element-valuation .marketing li { display: flex; align-items: center; color: #fff; margin-bottom: 22px; } .element-valuation .marketing img { width: 34px; margin-right: 19px; } .element-valuation .marketing strong { font-size: 24px; font-weight: 700; } .elm-elecalculator .element-valuation .element-tagline { font-size: 28px; } .elm-elecalculator .element-valuation .element-heading { font-size: 17px; } /*--------------*/ .element-service { color: #000; } .element-service .srBbody { padding-left: 300px; padding-right: 0; width: 852px; max-width: 100%; float: right; } .element-service .sr-thumb { margin-top: 10px; margin-bottom: 9px; height: 152px; } .element-service .sr-thumb img { margin-left: -18px; } .element-service .element-heading { font-size: 22px; padding-left: 3px; margin-bottom: 2px; font-family: 'Nunito-Black'; } .element-service .element-description { font-weight: 600; padding-left: 5px; margin-bottom: 12px; font-size: 14px; } .element-service input { border: none; font-size: 1em; height: 39px; width: 100%; border-radius: 50px; padding: 10px 15px; } .element-service input.text-uppercase::placeholder { text-transform: initial; } .element-service .button { border-radius: 50px; background: #fc6401; height: 40px; } .element-service .arrangeCall { text-align: center; margin-top: 31px; color: #fff; font-weight: 600; padding-left: 5px; margin-bottom: 12px; font-size: 14px; } /*--------------*/ .element-service-v2 .srBanner { display: flex; background-repeat: no-repeat; text-align: center; background-size: cover; background-position: center; padding-top: 50px; padding-bottom: 50px; } .element-service-v2 .srBanner .container { max-width: 915px; padding: 0; } .element-service-v2 .srBanner .element-heading { font-weight: 600; color: #ffffff; font-size: 38px; margin-bottom: 4px; } .element-service-v2 .srBanner .postCodeSearch { position: relative; width: 415px; text-align: center; margin: auto; margin-top: 23px; max-width: 100%; } .element-service-v2 .srBanner .postCodeSearch input[type*="text"] { border: none; padding: 10px 25px; padding-right: 100px; width: 100%; font-size: 20px; height: 50px; border-radius: 99px; box-shadow: 0px 0px 0px 4px rgb(255 255 255 / 30%); pointer-events: none; } .element-service-v2 .srBanner .postCodeSearch input::placeholder { color: #aaaaaa } .element-service-v2 .srBanner .postCodeSearch input.text-uppercase::placeholder { text-transform: initial; } .element-service-v2 .srBanner .postCodeSearch .btn { position: absolute; top: 0; bottom: 0; right: 4px; min-width: initial; width: 85px; margin: auto; height: 42px; font-size: 1.35em; font-weight: 500; border-radius: 99px; pointer-events: none; } .element-service-v2 .srBanner .postCodeSearch .btn[value*="Wait..."] { /*font-size: 12px;*/ } .element-service-v2 .srBanner .element-description { font-weight: 500; color: #ffffff; opacity: 1.0; font-size: 21px; margin-bottom: 19px; } .element-service-v2 .srBanner .element-description a { font-size: 16px; color: inherit; font-weight: 400; margin-top: 21px; display: inline-block; border-bottom: 1px solid #fff; letter-spacing: 0.05px; pointer-events: none; } .element-service-v2 .srBanner p { margin-top: 25px; margin-bottom: 25px; } .element-service-v2 .srBanner p a { /*font-size: 22px; font-weight: 600; display: inline-block; color: var(--secondary-theme-color); letter-spacing: -0.5px;*/ } .element-service-v2 .srBanner p .btn { width: 600px; max-width: 100%; pointer-events: none; } /*--------------*/ .e_ImageRow { position: relative; display: flex; align-items: center; background: #f1f1f1; text-align: center !important; border-radius: 16px; padding: 44px; } .e_ImageRow .container { width: 550px; max-width: 100%; } .e_ImageRow .element-heading { margin-bottom: 12px; } .e_ImageRow .element-heading textarea { font-size: 28px; letter-spacing: -0.65px; text-align: inherit; padding: 0; line-height: 1; min-height: auto; display: flex; align-items: flex-end; padding-top: 10px; } .e_ImageRow .element-description { margin: auto; margin-bottom: 20px; } .e_ImageRow .element-description textarea { padding: 0; text-align: inherit; font-size: 14px; } .e_ImageRow .element-thumb { font-size: 0; min-height: initial; } .elm-imagerow .elementRpt { padding-left: 90px; padding-right: 90px; } .elm-imagerow.cAlignLeft .e_ImageRow .element-thumb { position: absolute; max-width: 193px; bottom: -2px; left: -90px; } .elm-imagerow.cAlignCenter .e_ImageRow { margin-bottom: 55px; } .elm-imagerow.cAlignCenter .e_ImageRow .button-wrap { margin-bottom: 60px; } .elm-imagerow.cAlignCenter .e_ImageRow .element-thumb { height: 115px; margin-bottom: -105px; } .elm-imagerow.cAlignCenter .e_ImageRow .element-thumb img { max-height: 100%; } .elm-imagerow.cAlignRight .e_ImageRow .element-thumb { position: absolute; max-width: 193px; bottom: -2px; right: -90px; } .e_ImageRow .element-thumb.no-img { margin-top: 30px; height: 115px; display: inline-flex; justify-content: center; width: 240px; background-color: #e9e9e9 !important; bottom: 0px !important; } .e_ImageRow .element-thumb.no-img img { max-height: 100%; } #gritter-notice-wrapper { pointer-events: none; } .min-height-200 iframe { min-height: 200px !important; } .min-height-150 iframe { min-height: 150px !important; } .ui-autocomplete-input { background-image: url(../images/down-arrow.png); background-repeat: no-repeat; background-size: 13px; background-position: center right 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .ui-autocomplete { z-index: 99999; background-color: white; max-height: 200px; overflow-y: auto; border: 1px solid #000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 0px 10px; }