/*------------------------------------------------------------------ [Master Stylesheet] Project : Fickle Responsive Admin Template Version : 1.0 Author : AimMateTeam URL : http://aimmate.com Support : aimmateteam@gmail.com Primary use : Dashboard -------------------------------------------------------------------*/ @import "../css/font-awesome/css/font-awesome.min.css"; @import url(https://fonts.googleapis.com/css?family=Armata|PT+Sans|Montserrat:700,400); @import "../css/plugins/nanoscroller.css"; @import "../css/plugins/switchery.min.css"; @import "../css/plugins/bootstrap-switch.css"; /*------------------------------------------------------------------ [Table of contents] + BODY + HEADER + NAVIGATION + BREADCRUMB + MAIN WRAPPER + RIGHT WRAPPER + DASHBOARD + EMAIL + CHARTS + FORM STAFFS + TIME-LINE + TABLE + NOTIFICATION + TASK & NOTE + CALENDER + MAPS + GALLERY + MEDIA + PRICING TABLE + PROFILE + LOGIN + COMING SOON + WIDGETS + PANEL + ICONS + FOOTER + UI ELEMENTS + MEDIA PLAYER @NEW v1.1 + TREE VIEW @NEW v1.1 + FLUID BOX @NEW v1.1 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ # [Color codes] # Black ( navigation background ) : #3F414D; # Blue ( navigation background ) : #5EBFD8; # Deep Blue ( navigation background ) : #023a85; # Red ( navigation background ) : #FF7878; # Light Green ( navigation background ) : #1FB5AD; # Light Purple ( hover navigation background ) : #113564; -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Typography] Headers Logo: 28px 'Montserrat', sans-serif; Body copy: 14px 'PT Sans', sans-serif; Headers: 20px 'Armata', sans-serif; Panel heading: 15px 'Armata', sans-serif; Input, textarea: 14px 'PT Sans', sans-serif; -------------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------BODY--------------------------------- -------------------------------------------------------------------*/ body{ font-family: 'PT Sans', sans-serif; font-size: 14px; height: 100%; background: #f9f9f9; } strong{ font-weight: bold; font-family: sans-serif; } .breadcrumb li a ladda-label{ color: #fff !important; } body.single-page{ background: #565656; } h1, h2, h3, h4, h5, h6{ font-family: 'Armata', sans-serif; } ul.mainNav li a { font-family: 'Armata', sans-serif; } h1{ font-size: 24px; } h2{ font-size: 22px; } h3{ font-size: 20px; } h4{ font-size: 18px; } h5{ font-size: 16px; } h6{ font-size: 14px; } p{ line-height: 23px; } hr { display: block; height: 1px; border: 0; border-top: 1px dashed #e0e0e0; margin: 1em 0; padding: 0; } pre{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } label{ font-weight: 400; } text{ font-weight: normal; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------HEADER--------------------------------- -------------------------------------------------------------------*/ .ls-header{ font-size: 15px; } .ls-top-header{ margin-bottom: 15px; margin-top: 5px; } nav{ background: #555557; } .header-logo{ text-align: center; width: 180px; float: left; } .header-logo a{ line-height: 50px; } .header-logo a span{ font-size: 28px; font-family: 'Montserrat', sans-serif; color: #f2f2f2; margin: 0; padding: 0; line-height: 50px; text-transform: uppercase; } .header-logo a:hover{ text-decoration: none; } #main-container{ width: 100%; height: 100%; background: #ffffff; color: #565656; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- NAVIGATION ------------------------- -------------------------------------------------------------------*/ /*** Top Navigation ***/ .menu-control{ float: left; line-height: 38px; margin-left: 5px; text-align: center; } .menu-control a{ color: #ffffff; outline: none; } .menu-control a:hover{ color: #FF7878; } .menu-control a i{ line-height: 25px; font-size: 18px; } .top-navigation ul{ list-style: none; padding: 0; margin: 0; float: right; } .top-navigation ul li{ display: inline-block; } .top-navigation ul li a{ color: #ffffff; text-decoration: none; line-height: 17px; outline: none; padding: 10px 15px; display:inline-block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-size: 18px; } .top-navigation ul li a:hover{ background: #113564; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .top-navigation ul li a.right-sidebar, .top-navigation ul li a.right-sidebar-setting{ -webkit-transition: none 0.3s ease-in-out; -moz-transition: none 0.3s ease-in-out; -o-transition: none 0.3s ease-in-out; transition: none 0.3s ease-in-out; } .top-navigation ul li.only-phone{ display: none; } .top-navigation ul li.only-phone a{ -webkit-transition: none 0.3s ease-in-out; -moz-transition: none 0.3s ease-in-out; -o-transition: none 0.3s ease-in-out; transition: none 0.3s ease-in-out; } .top-navigation ul li.only-phone a:hover{ background: none; color: #FF7878; -webkit-transition: none 0.3s ease-in-out; -moz-transition: none 0.3s ease-in-out; -o-transition: none 0.3s ease-in-out; transition: none 0.3s ease-in-out; } .search-box{ float: left; margin-left: 5px; text-align: center; } .search-box ul li a span{ font-size: 18px; line-height: 12px; } .search-box input[type=search] { background: url("../images/b.png") no-repeat scroll 9px center / 19px 19px #f2f2f2; border: none; color: #000; cursor: auto; height: 40px; outline: 0; padding-left: 32px; width: 320px; -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } .search-box input::-webkit-input-placeholder { color: #999; } .search-box input::-webkit-search-decoration, .search-box input::-webkit-search-cancel-button { display: none; } /*Top dropDown navigation Start*/ .top-navigation li.open:after{ border-bottom: 6px solid #FF7878; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); content: ""; display: inline-block; position: absolute; right: 18px; top: 33px; z-index: 1; } .red-color .top-navigation li.open:after{ border-bottom: 6px solid #C45C5C; } .top-navigation li a span.badge{ /**** Issue Fixed @new ***/ font-size: 10px; font-weight: normal; padding: 0; position: absolute; right: 5px; text-align: center; top: 4px; font-family: 'Pontano Sans', sans-serif; height: 15px; width: 15px; line-height: 15px; display: block; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .top-navigation .dropdown-menu.right { left: auto; right: 0; } .top-navigation .dropdown-menu { margin: 0; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; padding: 0; border: none; min-width: 275px; } .top-navigation .dropdown-menu h4 { padding: 10px; margin: 0; font-size: 14px; color: white; background: #ff7878; } .red-color .top-navigation h4{ background: #C45C5C; } .top-navigation .dropdown-menu ul { list-style: none; padding: 0; margin: 0; float: none; } .top-navigation .dropdown-menu ul li.only-link { text-align: center; padding: 5px 0; border-bottom: none; margin-top: 0; } .top-navigation .dropdown-menu ul li.only-link a { font-size: 14px; } .ls-feed { list-style: none; padding: 0; margin: 0; } .ls-feed li { background-color: #e0e0e0; font-size: 14px; line-height: 14px; margin-bottom: 10px; padding: 10px 0 10px 33px; position: relative; } .top-navigation ul.ls-feed li{ display: block; } .top-navigation ul.ls-feed li a{ padding: 0; color: #6e6e6e; display: block; line-height: 22px; font-size: 14px; } .top-navigation ul.ls-feed li a:hover{ background: none; } .ls-feed li .label { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; left: 7px; line-height: 11px; padding: 5px; position: absolute; top: 11px; height: 20px; width: 20px; } .feed-box .ls-feed li .label{ top: 7px; padding: 5px 0; } .ls-feed li .date { padding-right: 10px; text-align: right; font-style: italic; font-size: 12px; float: right; } .dropdown-menu.top-notification h4 { color: white; background: #ff7878; } .red-color .dropdown-menu.top-notification h4{ background: #C45C5C; } .dropdown-menu.top-notification .ls-feed li { margin-bottom: 0; border-bottom: 1px dotted #cbc5ba; background: white; color: dimgrey; } /*Top dropDown navigation end*/ /*** Left Navigation ***/ #left-navigation{ width: 200px; background: #58595B; float: left; position: absolute; left: 0; height: 100%; overflow: visible !important; } #left-navigation.active{ width: 50px; } #left-navigation .user-image{ margin: 10px auto; width: 80px; position: relative; } #left-navigation.active .user-image{ width: 40px; } #left-navigation .user-image img{ border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; } #left-navigation.active .user-image{ width: 40px; } #left-navigation.active .user-image img{ width: 40px; } #left-navigation .user-online-status { display: block; left: 0; position: absolute; top: 10px; } #left-navigation.active .user-online-status { top: -5px; } #left-navigation.active .social-icon{ display: none; } #left-navigation .social-icon{ list-style: none; margin: 0 0 5px; padding: 0; text-align: center; } #left-navigation .social-icon li{ display: inline-block; margin: 0 5px; } #left-navigation .social-icon li a{ color: #FF7878; font-size: 15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #left-navigation .social-icon li a:hover{ color: #FFFFFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .black-color #left-navigation{ background: #444755; } .blue-color #left-navigation{ background: #53A2B8; } .deep-blue-color #left-navigation{ background: #052858; } .red-color #left-navigation{ background: #DD7878; } .light-green-color #left-navigation .social-icon li a{ color: #FFFFFF; } .light-green-color #left-navigation .social-icon li a:hover{ color: #565656; } .blue-color #left-navigation .social-icon li a{ color: #FFFFFF; } .blue-color #left-navigation .social-icon li a:hover{ color: #FF7878; } .red-color #left-navigation .social-icon li a{ color: #FFFFFF; } .red-color #left-navigation .social-icon li a:hover{ color: #3F414D; } .light-green-color #left-navigation{ background: #4FADA8; } ul.mainNav{ padding: 0; margin: 0; list-style: none; background: #555557; } ul.mainNav.mobile{ display: none; } .red-color ul.mainNav{ background: #ff7878; } .blue-color ul.mainNav{ background: #5EBFD8; } .light-green-color ul.mainNav{ background: #1FB5AD; } .black-color ul.mainNav{ background: #3F414D; } .deep-blue-color ul.mainNav{ background: #023a85; } ul.mainNav li { border-top: 1px solid #58595B; position: relative; } ul.mainNav.active li ul li{ border: none; } ul.mainNav li:last-child { border-bottom: 1px solid #58595B; } .black-color ul.mainNav li { border-top: 1px solid #444755; } .black-color ul.mainNav li:last-child{ border-bottom: 1px solid #444755; } .blue-color ul.mainNav li{ border-top: 1px solid #47aac5; } .blue-color ul.mainNav li:last-child{ border-bottom: 1px solid #47aac5; } .deep-blue-color ul.mainNav li{ border-top:1px solid #184683; } .deep-blue-color ul.mainNav li:last-child{ border-bottom:1px solid #184683; } .red-color ul.mainNav li{ border-top:1px solid #E48080; } .red-color ul.mainNav li:last-child{ border-bottom:1px solid #E48080; } .light-green-color ul.mainNav li{ border-top:1px solid #4FADA8; } .light-green-color ul.mainNav li:last-child{ border-bottom:1px solid #4FADA8; } ul.mainNav li a { line-height: 13px; font-size: 13px; padding: 10px 5px 10px 10px; display: block; text-decoration: none; color: #c6c6c6; outline: 0; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.mainNav li a.active { color: #fff; background-color: #0e3160; } .red-color ul.mainNav li a, .blue-color ul.mainNav li a, .light-green-color ul.mainNav li a{ color: #fff; } ul.mainNav li a i{ margin-right: 5px; width: 15px; font-size: 14px; } ul.mainNav li a b{ width: 12px; } #left-navigation.active ul.mainNav li a i{ width: 50px; } #left-navigation.active ul.mainNav li a b{ width: 22px; } ul.mainNav li a span{ line-height: 13px; font-size: 13px; } ul.mainNav li a span.badge{ border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-size: 10px; font-weight: 400; line-height: 10px; padding: 2px 5px; position: absolute; right: 30px; } #left-navigation.active ul.mainNav li a span.badge{ right: 25px; } ul.mainNav li a span.navTag{ font-size: 18px; } ul.mainNav li a:hover { background-color:#113564; color:#ffffff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.mainNav ul { margin: 0; padding: 0; display: none; list-style: none; background: #58595B; } ul.mainNav.active ul{ position: absolute; left: 50px; width: 200px; background: #4C4C4E; } ul.mainNav.active li ul.open{ display: block; } ul.mainNav li.active ul{ display: block; } ul.mainNav li.active ul ul{ display: none; } ul.mainNav.active li.active ul{ display: none; } ul.mainNav.active li.active ul.open{ display: block; } ul.mainNav.active li ul.active{ display: none; } ul.mainNav.active li ul.active.open{ display: block; } .blue-color ul.mainNav.active ul, .blue-color ul.mainNav ul{ background: #53A2B8; } .deep-blue-color ul.mainNav.active ul, .deep-blue-color ul.mainNav ul{ background: #184683; } .red-color ul.mainNav.active ul, .red-color ul.mainNav ul{ background: #DD7878; } .light-green-color ul.mainNav.active ul, .light-green-color ul.mainNav ul{ background: #4FADA8; } .black-color ul.mainNav.active ul, .black-color ul.mainNav ul{ background: #444755; } ul.mainNav ul li { margin: 0; padding: 0; clear: both; } ul.mainNav ul li a { padding-left: 30px; font-size: 12px; font-weight: normal; outline:0; } #left-navigation.active ul.mainNav ul li a{ padding-left: 20px; } ul.mainNav ul li a:hover { background-color:#113564; color:#fff; } ul.mainNav.active li.active a i{ color: #fff; } ul.mainNav ul li a.active{ color: #fff; background-color:#113564; font-weight: bold; } ul.mainNav ul ul li a { color:#c6c6c6; padding-left: 30px; } ul.mainNav ul ul li a:hover { background-color:#113564; color: #fff; } ul.mainNav b{ float:right; font-size: 14px; font-weight: 400; } ul.mainNav.active ul{ display: none; } ul.mainNav.active li a i{ padding-left: 10px; } ul.mainNav.active li a b{ display: none; } ul.mainNav.active li:hover, ul.mainNav.check li.check{ width: 200px; background: #49494B; z-index: 999; } ul.mainNav.active li:hover, ul.mainNav.active li.check{ background: #555557; } .blue-color ul.mainNav.active li:hover,.blue-color ul.mainNav.active li.check{ background: #53A2B8; } .deep-blue-color ul.mainNav.active li:hover, .deep-blue-color ul.mainNav.active li.check{ background: #184683; } .red-color ul.mainNav.active li:hover, .red-color ul.mainNav.active li.check{ background: #DD7878; } .light-green-color ul.mainNav.active li:hover, .light-green-color ul.mainNav.active li.check{ background: #4FADA8; } .black-color ul.mainNav.active li:hover, .black-color ul.mainNav.active li.check{ background: #444755; } ul.mainNav.active > li:hover, ul.mainNav.active > li.check{ width: 250px; z-index: 11; } ul.mainNav.active li a span, ul.mainNav.active li a b{ display: none; } ul.mainNav.active li:hover a span, ul.mainNav.active li.check a span, ul.mainNav.active li:hover a b, ul.mainNav.active li.check a b { display: inline-block; } ul.mainNav.active ul ul, ul.mainNav.active ul ul ul{ left: 0; } /*** For Mobile Mobile ***/ .navigation{ color: #ffffff; } .black-color .navigation{ background: #3F414D; } .blue-color .navigation{ background: #5EBFD8; } .deep-blue-color .navigation{ background: #023a85; } .red-color .navigation{ background: #FF7878; } .light-green-color .navigation{ background: #1FB5AD; } .navigation a h1{ font-size: 22px; font-family: 'Montserrat', sans-serif; color: #f2f2f2; margin: 0; padding: 0; line-height: 37px; text-transform: uppercase; } .light-green-color .navigation a h1{ color: #f2f2f2; } .red-color .navigation a h1{ color: #f2f2f2; } .blue-color .navigation a h1{ color: #FFFFFF; } .navigation input.top-search{ float: left; } .phone-nav-box{ background: #58595B; text-align: right; } .phone-nav-box .phone-logo{ text-align: left; float: left; } .phone-nav-box .phone-logo h1{ color: #fff; font-family: 'Montserrat', sans-serif; font-size: 20px; line-height: 38px; margin: 0; padding: 0; text-transform: uppercase; } .red-color .phone-nav-box .phone-logo h1, .blue-color .phone-nav-box .phone-logo h1, .light-green-color .phone-nav-box .phone-logo h1, .black-color .phone-nav-box .phone-logo h1, .deep-blue-color .phone-nav-box .phone-logo h1{ color: #FFFFFF; } .red-color .phone-nav-box{ background: #DD7878; } .blue-color .phone-nav-box{ background: #53A2B8; } .light-green-color .phone-nav-box{ background: #4FADA8; } .black-color .phone-nav-box{ background: #444755; } .deep-blue-color .phone-nav-box{ background: #052858; } .phone-nav-box a{ font-size: 20px; display: inline-block; padding: 10px 20px; outline: 0; color: #fff; text-decoration: none; font-weight: normal; text-align: right; line-height: 38px; } .red-color .phone-nav-box a, .blue-color .phone-nav-box a, .light-green-color .phone-nav-box a, .black-color .phone-nav-box a, .deep-blue-color .phone-nav-box a{ color: #ffffff; } .phone-nav-box a:hover{ text-decoration: none; } .phone-nav-box a span{ line-height: 28px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- BREADCRUMB ------------------------- -------------------------------------------------------------------*/ .ls-breadcrumbs { display: inline-block; overflow: hidden; border-radius: 1px; } .ls-breadcrumbs a { text-decoration: none; outline: none; display: block; float: left; font-size: 12px; line-height: 36px; color: #565656; padding: 0 20px 0 30px; background: #E3DFD8; position: relative; } .ls-breadcrumbs a:first-child { padding-left: 20px; border-radius: 1px; } .ls-breadcrumbs a:first-child:before { left: 14px; } .ls-breadcrumbs a:last-child { border-radius: 1px; padding-right: 20px; } .ls-breadcrumbs a.active, .ls-breadcrumbs a:hover{ background: #e0e0e0; } .ls-breadcrumbs a.active:after, .ls-breadcrumbs a:hover:after { background: #e0e0e0; } .ls-breadcrumbs a:after { content: ''; position: absolute; top: 0; right: -18px; width: 36px; height: 36px; transform: scale(0.707) rotate(45deg); z-index: 1; background: #E3DFD8; box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.1), 3px -3px 0 2px #e0e0e0; border-radius: 0 5px 0 50px; } .ls-breadcrumbs a:last-child:after { content: none; } .ls-breadcrumbs a .fa{ font-size: 14px; margin-right: 3px; color: #565656; } .breadcrumb-box{ margin-bottom: 20px; } .breadcrumb li{ font-size: 12px; } .breadcrumb li a{ font-size: 12px; outline: 0; } .breadcrumb > li + li:before{ color: #565656; } /**** breadcrumb simple ***/ /****** Breadcrumb ****/ .ls-breadcrumbs-simple { display: inline-block; overflow: hidden; border-radius: 1px; } .ls-breadcrumbs-simple a { text-decoration: none; outline: none; display: block; float: left; font-size: 12px; color: #565656; padding: 0 10px 0 10px; position: relative; } .ls-breadcrumbs-simple a:first-child { padding-left: 0; margin-left: 0; border-radius: 1px; } .ls-breadcrumbs-simple a:first-child:before { left: 14px; } .ls-breadcrumbs-simple a:last-child { border-radius: 1px; padding-right: 20px; } .ls-breadcrumbs-simple a.active, .ls-breadcrumbs-simple a.active .fa, .ls-breadcrumbs-simple a:hover{ color: #1fb5ad; } .ls-breadcrumbs-simple a.active:after, .ls-breadcrumbs-simple a:hover:after, .ls-breadcrumbs-simple a:hover .fa{ color: #1fb5ad; } .ls-breadcrumbs-simple a:after { content: ''; position: absolute; top: 4px; right: 0; width: 10px; height: 10px; transform: scale(0.707) rotate(45deg); z-index: 1; box-shadow: 1px -1px 0 1px rgba(0, 0, 0, 0.1), 1px -1px 0 1px #E3DFD8; border-radius: 0 5px 0 50px; } .ls-breadcrumbs-simple a:last-child:after { content: none; } .ls-breadcrumbs-simple a .fa{ font-size: 14px; margin-right: 3px; color: #565656; } /****/ .breadcrumb{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; background: #e0e0e0; margin-bottom:15px; margin-right:0; margin-left:0; } .breadcrumb.no-background{ background: none; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------MAIN WRAPPER------------------------- -------------------------------------------------------------------*/ #min-wrapper{ width: 100%; float: left; padding-left: 200px; background: #58595B; } #min-wrapper.active{ padding-left: 50px; } .black-color #min-wrapper{ background: #3F414D; } .deep-blue-color #min-wrapper{ background: #052858; } .red-color #min-wrapper{ background: #DD7878; } .blue-color #min-wrapper{ background: #53A2B8; } .light-green-color #min-wrapper{ background: #4FADA8; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------RIGHT WRAPPER--------------------------------- -------------------------------------------------------------------*/ #right-wrapper{ width: 280px; height: 100%; min-height: 800px; background: #303741; float: left; position: fixed; right: -280px; z-index: 999; top: 0px; } #right-wrapper .close-right-wrapper{ position: absolute; right: 10px; top: 5px; } #right-wrapper .close-right-wrapper a{ font-size: 16px; color: #fff; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #right-wrapper .close-right-wrapper a:hover{ color: #ff7878; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #right-wrapper .tab-content{ background: #303741; } #right-wrapper.active{ right: 0; } #right-wrapper .nav-tabs{ border-bottom: none; text-align: center; } #right-wrapper .nav-tabs li{ border: none; border-radius: 0; -webkit-border-radius: 0; margin-bottom: 0; } #right-wrapper .nav-tabs li a{ font-size: 14px; padding: 9px 10px; margin-right: 0; border-radius: 0; -webkit-border-radius: 0; border: none; color: #ffffff; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #right-wrapper .nav-tabs li.active a, #right-wrapper .nav-tabs li:hover a{ border-radius: 0; -webkit-border-radius: 0; background: #FF7878; color: #ffffff; border: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .chat-group{ color: #7F8186; padding: 10px 0 10px 20px; } .chat-group h3{ margin: 0; text-transform: capitalize; padding-bottom: 10px; } .chat-group a{ color: #BEC0C2; font-style: normal; display: block; padding-bottom: 10px; font-size: 13px; outline: none; } .chat-group a:hover, .chat-group a.active{ text-decoration: none; color: #ffffff; outline: none; } #chatTab .badge{ /**** Issue Fixed @new ***/ font-size: 10px; line-height: 1; margin-left: 20px; min-width: 14px; padding:0; line-height: 15px; height: 15px; width: 15px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .chat-box{ width: 100%; background: #343A45; } .chat-box .chat-box-header{ padding: 3px 0 3px 20px; border-bottom: 1px solid #303741; color: #BEC0C2; } .chat-box .chat-box-header h5{ font-size: 13px; } .chat-box .chat-box-content{ color: #BEC0C2; } .chat-box .chat-box-content ul{ list-style: none; margin: 0; padding: 0; } .chat-box .chat-box-content ul li{ padding: 10px 0 20px 20px; margin-bottom: 0px; position: relative; } .chat-box .chat-box-content ul li:nth-child(even) { background: #303844; } .chat-box .chat-box-content ul li:nth-child(odd) { } .chat-box .chat-box-content span.user{ font-size: 13px; color: #ffffff; } .chat-box .chat-box-content p{ font-size: 14px; margin-bottom: 0; } .chat-box .chat-box-content span.time{ font-size: 10px; position: absolute; bottom: 10px; right: 5px; margin-right: 20px; } .chat-write{ } .chat-write textarea{ border: 1px solid #303741; box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -webkit-border-radius: 0; color: #ffffff; background: #303741; overflow: hidden; word-wrap: break-word; resize: horizontal; height: 32px; } .chat-write textarea:focus, .chat-write textarea:hover{ border: 1px solid #303741; box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -webkit-border-radius: 0; } .nano { height: 300px; } .nano .nano-pane { background: #e0e0e0; } .nano .nano-slider { background: #3F414D; } .nano-chat{ height: 200px; } .nano-progress{ height: 150px; } .progress-content{ padding-right: 20px; } .setting-box{ color: #7F8186; padding: 10px 0 10px 0px; } .setting-box h3{ margin: 0; padding-bottom: 10px; text-transform: capitalize; } .setting-box h5{ font-size: 12px; padding: 0; margin: 0 0 5px 0; color: #bec0c2; } .setting-box-content ul{ list-style: none; margin: 0; padding: 0; } .setting-box-content ul li{ text-align: right; margin-bottom: 10px; } .setting-box-content ul li b{ float: left; } .setting-box-content ul li span{ color: #bec0c2; } .setting-box-content ul li span.switchery{ height: 15px; width: 30px; } .setting-box-content ul li span.switchery small{ height: 15px; width: 15px; } .rotationToClick, .right-sidebar, .right-sidebar-setting{ display:inline-block; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- DASHBOARD -------------------------- -------------------------------------------------------------------*/ /********** Dashboard css Start **********/ #realTimeChart{ overflow: hidden; } .home-row-top{ margin-top: 27px; margin-bottom: 15px; } .current-status-widget ul{ list-style: none; margin: 0; padding: 0; } .current-status-widget ul li { margin-bottom: 8px; cursor: pointer; } .current-status-widget ul li div.status-box{ height: 100%; width: 100%; } .current-status-widget ul li div.status-box div.status-box-icon{ height: 50px; width: 50px; text-align: center; float: left; } .current-status-widget ul li div.status-box div.status-box-icon i{ font-size: 25px; line-height: 50px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } @keyframes changeiconsize { 0% { font-size: 25px; } 25%{ font-size: 10px; } 50% { font-size: 40px; } 75%{ font-size: 10px; } 100% { font-size: 25px; } } @-webkit-keyframes changeiconsize { 0% { font-size: 25px; } 25%{ font-size: 10px; } 50% { font-size: 40px; } 75%{ font-size: 10px; } 100% { font-size: 25px; } } #box { } .current-status-widget ul li:hover div.status-box div.status-box-icon i{ -webkit-animation: changeiconsize 1s infinite; animation: changeiconsize 1s infinite; } div.status-box-content{ float: left; height: 50px; margin-left: 10px; } div.status-box-content h5{ margin-bottom: 3px; margin-top: 3px; font-size: 15px; } div.status-box-content p{ font-size: 15px; } div.status-box-content h5 i{ font-size: 12px; } .pie-widget{ text-align: center; margin: auto; border: 1px solid #e0e0e0; padding: 20px 0; } .pie-widget p{ display: block; margin-bottom: 5px; font-size: 15px; } .pie-widget h5{ margin: 5px; font-size: 15px; } .pie-widget canvas{ left: 0; position: absolute; top: 0; } .chart-pie-widget{ display: inline-block; height: 110px; line-height: 110px; margin-bottom: 15px; position: relative; text-align: center; width: 110px; z-index: 2; } .pie-widget-count{ line-height: 110px; text-align: center; font-size: 14px; } .pie-widget-count:after { content: "%"; font-size: 12px; margin-left: 0.1em; } .v-map-widget{ border: 1px solid #e0e0e0; height: 340px; } .v-map-widget h3{ padding: 10px 20px; margin: 0; } .world_map_home_widget{ height: 302px; } .v-map-overlay{ position: absolute; right: 15px; top: 38px; width: 100px; background: rgba(0, 0, 0, 0.50); z-index: 1; } .v-map-overlay ul{ list-style: none; margin: 0; padding: 5px 10px; } .v-map-overlay ul li{ color: #f2f2f2; } .world_map_home_widget .jvectormap-zoomin,.world_map_home_widget .jvectormap-zoomout{ color: #f2f2f2; background: rgba(0, 0, 0, 0.50); } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td{ border-bottom-width: 1px; } .flotPieChartWidget{ height: 250px; width: 100%; margin-top: 15px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- EMAIL ------------------------------- -------------------------------------------------------------------*/ /*Email top ui start*/ .top-navigation .email-top li a{ padding: 0; display: block; color: #6e6e6e; } .top-navigation .email-top li a:hover{ background: none; } .email-top { list-style: none; padding: 0; margin: 0; } .email-top li { border-bottom: 1px dashed #cbc5ba; display: inline-block; margin-bottom: 0; padding: 5px 10px; width: 100%; } .email-top li a { color: dimgrey; } .email-top li .email-top-image { float: right; height: 50px; width: 50px; } .email-top li .email-top-image img { width: 100%; border-radius: 50%; } .email-top li .email-top-content { font-size: 14px; padding-top: 6px; line-height: 18px; } .email-top li .email-top-content > div{ font-size: 13px; font-style: italic; } .email-top li .email-top-content .badge { float: right; } .email-top li .email-top-content a { color: #1fb5ad; font-size: 15px; } .email-top li .email-top-content a:after { content: " - "; } /****/ /**** Mail box css start****/ .fieldcontainer { display: block; margin: 0; position: relative; width: 100%; } .searchfieldjs { background-color: #FFFFFF; border: 1px solid #CBC5BA; border-radius: 1px; color: #CCCCCC; display: block; font-size: 12px; padding: 7px 11px; width: 100%; } #search2btn { background: url("../images/search-icon.png") top left no-repeat; border: 0 none; cursor: pointer; height: 32px; opacity: 0.65; position: absolute; right: 0; top: 7px; width: 25px; } .no-default-padding { padding: 0; } .mail-search-box { margin-bottom: 15px; } .mail-box { width: 100%; } .mail-box-navigation { height: 100%; width: 100%; text-align: center; } .mail-box-list.home { padding-left: 10px; width: 100%; } .mail-navigation { margin: 0; padding: 0; list-style: none; } .mail-navigation li { text-align: center; background: #e0e0e0; width: 100px; height: 60px; overflow: hidden; display: inline-block; } .mail-navigation li a { display: inline; color: #000; text-decoration: none; outline: 0; } .mail-navigation li a:hover{ text-decoration: none; } .mail-navigation li a i.fa { font-size: 28px; line-height: 60px; display: block; color: #FF7878; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .mail-navigation li a span { color: #565656; display: block; padding-bottom: 11px; } .mail-navigation li a:hover i.fa{ font-size: 20px; line-height: 30px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; color: #1fb5ad; } .mail-navigation li a.active i.fa{ color: #1fb5ad; } .mail-box-list { width: 30%; float: left; overflow: hidden; } .mail-list { padding: 0; margin: 0; list-style: none; cursor: pointer; } .mail-list li { padding: 10px; border-bottom: 1px solid #cbc5ba; border-left: 1px solid #cbc5ba; border-right: 1px solid #cbc5ba; height: 72px; overflow: hidden; } .mail-list li.new-mail div.mail-user-image { color: #1fb5ad; border: 1px solid #1fb5ad; -moz-border: 1px solid #1fb5ad; -webkit-border: 1px solid #1fb5ad; } .mail-list li.new-mail div.mail-user-image i { color: #1fb5ad; } .mail-list li:first-child { border-top: 1px solid #cbc5ba; } .mail-list a > i { color: #565656; width: 20px; font-size: 14px; } .mail-list div.mail-user-image, .mail-list div.mail-user-mail { float: left; } .mail-list div.mail-user-image { text-align: center; width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; padding: 10px; border: 1px solid #fe6c6c; } .mail-list div.mail-user-image i { color: #fe6c6c; font-size: 25px; line-height: 30px; } .mail-list div.user-picture { padding: 0; overflow: hidden; height: 50px; } .mail-list div.user-picture img { height: 100%; } .mail-list div.mail-user-mail { padding-left: 10px; } .mail-list div.mail-user-mail span { line-height: 45px; transition-delay: 400ms; -moz-transition-delay: 400ms; -webkit-transition-delay: 400ms; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .mail-list div.mail-user-mail .mail-action { opacity: 0; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .mail-list li:hover .mail-user-mail span { line-height: 15px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .mail-list li:hover .mail-action { transition-delay: 400ms; -moz-transition-delay: 400ms; -webkit-transition-delay: 400ms; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; opacity: 1; } .mail-header { border-top: 1px solid #cbc5ba; border-bottom: 1px dashed #cbc5ba; } .mail-contact-user-image-box { float: right; width: 115px; } .mail-contact-user-image-box .mail-date { float: right; width: 115px; color: white; background: #fe6c6c; padding: 5px; text-align: center; } .mail-contact-user-image-box .mail-date span.date { font-weight: bold; font-size: 20px; } .mail-contact-user-image-box .mail-date span.month { text-transform: uppercase; } div.mail-contact-user-image { border: 1px solid #fe6c6c; border-radius: 58px; padding: 10px; text-align: center; width: 115px; height: 115px; line-height: 115px; margin-bottom: 10px; float: right; } div.user-picture-big { padding: 0; overflow: hidden; height: 120px; width: 120px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } div.user-picture-big img { height: 100%; } div.mail-contact-user-image i { color: #fe6c6c; font-size: 50px; } .border { border: 1px solid #fe6c6c; } .mail-body { float: left; width: 70%; } .mail-body.mail-body-inbox{ padding-left: 20px; } .mail-contact { width: 100%; padding-bottom: 18px; border-bottom: 1px dashed #cbc5ba; } .mail-contact-address { float: left; width: 80%; font-size: 16px; margin-top: 40px; } .mail-contact-address .contact-address, .mail-contact-address .mail-subject { font-size: 14px; padding: 5px 10px; width: 100%; border-radius: 1px; border: 1px solid #cbc5ba; background: #e0e0e0; margin-bottom: 15px; } .compose-mail-box.home .mail-contact-address { float: left; width: 100%; } .compose-mail-box.home .mail-contact-user-image-box { display: none; } .mail-main-content { padding: 10px 0; } .mail-action-bar { background: white; border: 1px solid #cbc5ba; margin: 0 auto 15px auto; text-align: left; } .mail-action-bar ul { margin: 0; padding: 0; list-style: none; } .mail-action-bar ul li { display: inline-block; height: 30px; margin-left: 15px; } .mail-action-bar ul li a { line-height: 30px; margin-right: 20px; color: dimgrey; } .mail-action-bar ul li a i.fa{ font-size: 14px; } .mail-action-bar ul li a.active { color: #023a85; } div.compose-mail-box { width: 100%; } div.compose-mail-box.home { padding-left: 0; } input.bg-white { background: white; } .addBccView, .addCcView { display: none; margin-bottom: 10px; } .toView{ margin-bottom: 10px; } .compose-mail-box .mail-contact { border-bottom: 0; -moz-border-bottom: 0; -webkit-border-bottom: 0; } #compose-popup-view { position: fixed; right: 0; bottom: -500px; min-height: 500px; width: 50%; border: 1px solid #fe6c6c; z-index: 100; background: white; } .mail-box-header { background: #ff7878; height: 50px; } .mail-box-header h4 { padding: 0; margin: 0; color: white; width: 100px; float: left; line-height: 50px; padding-left: 15px; } .mail-box-header ul.popup-mail-action { list-style: none; padding: 0; margin: 0; width: 100px; float: right; text-align: right; padding-right: 15px; } .mail-box-header ul.popup-mail-action li { display: inline-block; padding-left: 10px; } .mail-box-header ul.popup-mail-action li a i { color: white; line-height: 50px; } .mail-box-content { padding: 10px; } .mail-box-content #mail_body_content { width: 100%; height: 300px; margin: 5px 0; } .mail-send-btn { margin-top: 15px; } ul.attachments-preview-list{ list-style: none; padding: 0; margin: 0; } ul.attachments-preview-list li{ display: inline-block; margin-right: 20px; margin-bottom: 20px; } .ls-mail-img{ position: relative; display: inline-block; } .ls-mail-img img { display: block; margin: 0; padding: 0; max-width: 100%; height: auto; } .ls-mail-overlay { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); display: block; overflow: hidden; position: absolute; transition: all 0.5s ease 0s; z-index: 20; overflow: hidden; ; } .ls-mail-overlay{ bottom: 0; height: 0; left: 0; right: 0; width: 100%; } .ls-mail-overlay-link{ display: block; line-height: 50px; text-align: center; position: absolute; z-index: 100; } .ls-mail-overlay-link a{ color: #F2F2F2; font-size: 24px; margin: 0 5px; outline: 0 none; text-decoration: none; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-mail-overlay-link a:hover{ color: #ff7878; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-mail-overlay-link{ bottom: 50%; left: 0; margin: 0 auto -30px; right: 0; } .overlay-hover .ls-mail-overlay{ height: 100%; } /*****/ /*** Chat Page Start ***/ .ls-chat { overflow: hidden; margin-bottom: 20px; } .ls-chat img, .ls-chat .rounded { float: left; margin-right: 10px; width: 40px; height: auto; } .ls-chat img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .ls-chat img.rounded { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .ls-chat .text { margin-left: 45px; } .ls-chat .text-right { margin: 0 45px 0 0; } .ls-chat .status, .ls-chat .status-alter { height: 25px; padding: 10px 0 0 10px; border-bottom: 1px solid #e8e8e8; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 12px; border-right: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; } .ls-chat .status { background-color: #f9f9f9; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fef9f9)); background: -webkit-linear-gradient(top, #f9f9f9, #fef9f9); background: -moz-linear-gradient(top, #f9f9f9, #fef9f9); background: -ms-linear-gradient(top, #f9f9f9, #fef9f9); background: -o-linear-gradient(top, #f9f9f9, #fef9f9); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#feffff', endColorstr='#f9f9f9', GradientType=0); /* IE6-9 */ } .ls-chat .status-alter { background-color: #f9f9f9; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ffeeee)); background: -webkit-linear-gradient(top, #f9f9f9, #ffeeee); background: -moz-linear-gradient(top, #f9f9f9, #ffeeee); background: -ms-linear-gradient(top, #f9f9f9, #ffeeee); background: -o-linear-gradient(top, #f9f9f9, #ffeeee); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#feffff', endColorstr='#f9f9f9', GradientType=0); /* IE6-9 */ } .status .date { margin-right: 10px; float: right; font-style: italic; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.92); } .ls-chat .user { font-weight: bold; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.92); font-size: 14px; } .ls-chat p { margin: 0; background: #ffffff; padding: 2px 10px; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; } .text .msg, .text .msg-alter { -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; overflow: hidden; } .text .date, .text-right .date { display: inline-block; font-size: 11px; font-style: italic; padding: 3px 3px 0; } .text .date { float: right; } .text-right .date { float: left; } .text .msg { background-color: #e0e0e0; } .text .msg-alter { background-color: #1fb5ad; text-align: right; color: white; } .ls-chat .right { float: right; margin-right: 0; } .ls-chat .triangle, .ls-chat .triangle-right { width: 9px; height: 12px; } .ls-chat .triangle { float: left; position: relative; position: relative; left: 2px; top: 5px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #e0e0e0; } .ls-chat .triangle-right { float: right; position: relative; position: relative; right: 1px; top: 5px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #1fb5ad; } .input-group-message input { height: 34px; } .nano.nano-chat-widget{ height: 340px; } .nano .nano-content.nano-chat-box{ padding: 10px 20px 10px 5px; } .nano.nano-recent-activities{ height: 430px; } .nano .nano-content.nano-activities{ padding: 10px 10px 10px 5px; } .nano > .nano-pane{ width: 10px; cursor: pointer; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- CHARTS ------------------------------- -------------------------------------------------------------------*/ .bar_chart_canvas_box, .line-chart-area-box{ width: 100%; } .pie-chart-area-box, .doughnut-chart-area-box, .polar-chart-area-box, .radar-chart-area-box{ width: 100%; } #chartTwoLine svg { height: 400px; width: 100%; } .groupMultiBarView { height: 400px; width: 100%; } canvas#barChartCanvas { width: 100% !important; height: auto !important; } canvas#polarAreaChartCanvas, canvas#radarChartCanvas, canvas#doughnutChartCanvas, canvas#pieChartCanvas, canvas#lineChartCanvas { width: 100% !important; height: auto !important; } .pieChartCanvasDataView, .doughnutChartCanvasDataView, .polarAreaChartCanvasDataView, .radarChartCanvasDataView{ border-top: 1px solid #e3dfd8; margin: 15px -16px 0; } .pieChartCanvasDataView ul, .doughnutChartCanvasDataView ul, .polarAreaChartCanvasDataView ul, .radarChartCanvasDataView ul{ height: 95px; list-style: none outside none; margin: 20px auto 10px; padding: 5px auto; width: 175px; } .pieChartCanvasDataView ul li span, .doughnutChartCanvasDataView ul li span, .polarAreaChartCanvasDataView ul li span, .radarChartCanvasDataView ul li span{ border-radius: 8px; display: inline-block; height: 8px; margin-right: 5px; transition: all 300ms ease-in-out 0s; width: 8px; } .sparkBarView, .sparkPieView{ height: 400px; } .sparkPieViewData{ margin-top: 20px; } .sparkPieViewData ul{ list-style: none; margin: 0; padding: 5px 10px; } .sparkPieViewData ul li{ margin-bottom: 5px; margin-right: 15px; display: inline-block; } .sparkPieViewData ul li span{ border-radius: 8px; display: inline-block; height: 8px; margin-right: 5px; transition: all 300ms ease-in-out 0s; width: 8px; } .sparkLine-border{ border: 1px solid #e3dfd8; } span.textColor{ background: #565656; } span.greenActive{ background: #71AD70; } span.redActive{ background: #FF7878; } span.fillColor1{ background: rgba(220,220,220,0.5); } span.fillColor4{ background: #C2E2C2; } span.fillColor5{ background: rgba(255, 120, 120, 0.76); } span.fillColor6{ background: rgba(91, 194, 222, 0.9); } span.fillColor7{ background: rgba(239, 174, 77, 0.71); } span.lightBlueActive{ background: #023a85; } span.brownActive{ background: #B16666; } span.defultColor{ background: #1fb5ad; } span.defultBorder{ background: #E3DFD8; } span.blueActive{ background: #706AF4; } .flotChartRealTime { width: 100%; height: 350px; font-size: 14px; line-height: 0.5em; padding: 10px; } .flotChartRealTime.homeChart { height: 280px; } .flotPieChart { height: 350px; width: 100%; } .seriesToggle { height: 400px; width: 100%; } #choices { margin: 25px auto 0; list-style: none; } #choices li { width: 20%; display: inline-block; } #choices label.switch-label { margin-left: 8px; margin-right: 35px; } .paiChartAction { text-align: center; } .paiChartAction button { margin-bottom: 10px; } .morris-hover { position: absolute; z-index: 1000; } .morris-hover.morris-default-style { border-radius: 10px; padding: 6px; color: #666; background: rgba(255, 255, 255, 0.8); border: solid 2px rgba(230, 230, 230, 0.8); font-family: sans-serif; font-size: 12px; text-align: center; } .morris-hover.morris-default-style .morris-hover-row-label { font-weight: bold; margin: 0.25em 0; } .morris-hover.morris-default-style .morris-hover-point { white-space: nowrap; margin: 0.1em 0; } .sparkline-box { text-align: center; } .sparkline-box p { margin-top: 15px; } .sparkline-box div.panel-heading { text-align: left; } .sparkline { width: 250px; height: auto; margin: auto; } .sparklineBadge-box { padding: 10px; float: right; display: inline-block; } /*Spark Line tooltip start*/ .jqstooltip { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /*Spark Line tooltip start*/ /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- FORM STAFFS ------------------------- -------------------------------------------------------------------*/ form.ls_form_dashed { border-top: none; border-left: none; border-right: none; border-bottom: 1px dashed #cbc5ba; box-shadow: none; } form.ls_form_dashed input { border-top: none; border-left: none; border-right: none; border-bottom: 1px dashed #cbc5ba; box-shadow: none; border-radius: 0; } form.ls_form_dashed input:focus, input.bootbox-input:focus { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #cbc5ba; box-shadow: none; border-radius: 0; } form.ls_form input, form.ls_form select, form.ls_form textarea, input.bootbox-input { border-radius: 1px; outline: none; } form.ls_form input:focus, form.ls_form input.active, form.ls_form select:focus, form.ls_form select.active, form.ls_form textarea:focus, form.ls_form textarea.active, input.bootbox-input:focus { box-shadow: 0 2px 2px #F2F2F2 inset, 0 0 2px #98B6CF; border-color: #AEAEAE; outline: none; } form.ls_form input.rounded { border-radius: 30px; } form.ls_form label.checkbox, form.ls_form label.radio { font-weight: 400; } div.form_view { padding: 0 30px; } .form-box { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #cbc5ba; } .form-box.last { border: 0; } /*****/ .form-control{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .message-form .control-label{ text-align: right; } .has-success .form-control{ border-color:#6DB46F; } .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline{ color: #6DB46F; } .has-success .form-control:focus{ border-color:#6DB46F; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #A1EAA3; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #A1EAA3; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #A1EAA3; } .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline{ color: #AA8E5E; } .has-warning .form-control{ border-color: #AA8E5E; } .has-warning .form-control:focus{ border-color: #AA8E5E; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #DCC59D; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #DCC59D; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #DCC59D; } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline{ color: #ff3434; } .has-error .form-control{ border-color: #ff3434; } .has-error .form-control:focus{ border-color: #ff3434; box-shadow: 0 1px 1px rgba(254, 158, 158, 0.08) inset, 0 0 6px #B4AEAE; -moz-box-shadow: 0 1px 1px rgba(254, 158, 158, 0.08) inset, 0 0 6px #B4AEAE; -webkit-box-shadow: 0 1px 1px rgba(254, 158, 158, 0.08) inset, 0 0 6px #B4AEAE; } .form-horizontal .has-feedback .form-control-feedback{ top: 10px; } .form-horizontal .has-feedback .radio .form-control-feedback { visibility: hidden; } .form-horizontal .has-feedback .checkbox .form-control-feedback { visibility: hidden; } .formError .formErrorContent { width: 100%; background: #ee0101; position:relative; color: #fff; min-width: 120px; font-size: 11px; box-shadow: 0 0 6px #000; border: none; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; -o-box-shadow: 0 0 6px #000; padding: 4px 10px 4px 10px; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; } .formError .formErrorArrow div { border-left: none; border-right: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; } /*****/ #editor { width: 100%; min-height: 200px; background-color: white; border: 1px dashed #cbc5ba; padding: 15px; } .editor-toolbar { border: 1px dashed #cbc5ba; margin: 0 0 15px 0; } .editor-toolbar .btn-group > a.btn { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; padding: 5px 12px; color: #235b67; } .editor-toolbar .btn-group > a.btn-info { color: white; background-color: #023a85; } .editor-toolbar a { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .radio-button-place { line-height: 84px; } #voiceBtn { display: none; } #editor:focus, #editor:active { outline: 0; } .myEditor.demo-image{ text-align: center; } /***/ .box-switchery input { margin-left: 15px; } .help_text { font-size: 12px; } div.ls_divider { border-bottom: 1px dashed #cbc5ba; margin-top: 15px; padding-right: 15px; } div.ls_divider.last { border: 0; } input.ls-group-input, .ls-group-input { margin-bottom: 15px; } .multiselect-container > li > a { padding: 3px 0; } .multiselect-container > li > a > label > input { left: -9999em; position: absolute; } .full-width { width: 100%; } .slider.slider-vertical { margin-left: 5px; } .datePickerCall, .datePickerCall1 { cursor: pointer; } form.ls_form input.dial, form.ls_form input.dial:active, form.ls_form input.dial:focus { border: none; box-shadow: none; outline: 0; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- TIME-LINE -------------------------- -------------------------------------------------------------------*/ .ls_tmtimeline { margin: 30px 0 0 0; padding: 0; list-style: none; position: relative; } /* The line */ .ls_tmtimeline:before { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; background: #dbcdad; left: 25%; margin-left: -10px; } .ls_tmtimeline > li { position: relative; } .ls_tmtimeline > li .ls-timeline-user { position: absolute; text-align: center; width: 25%; padding-right: 60px; } .ls-timeline-user .media-heading { margin-top: 15px; margin-bottom: 10px; color: #5c5b56; font-size: 15px; } .ls_tmtimeline > li .ls-timeline-user img { width: 75px; } /* The date/time */ .ls_tmtimeline > li .ls_tmtime { display: block; } .ls_tmtimeline > li .ls_tmtime span { display: block; } .ls_tmtimeline > li .ls_tmtime span:first-child { font-size: 15px; color: #706a5c; } .ls_tmtimeline > li .ls_tmtime span:last-child { font-size: 15px; color: #71624e; font-weight: bold; } .ls_tmtimeline > li:nth-child(odd) .ls_tmtime span:last-child { color: #71624e; } /* Right content */ .ls_tmtimeline > li .ls_tmlabel { margin: 0 0 15px 30%; padding: 10px 15px; font-size: 14px; font-weight: 300; line-height: 20px; position: relative; border-radius: 1px; } .ls_tmtimeline > li:nth-child(odd) .ls_tmlabel { background: #5c5b56; color: #fff; } .ls_tmtimeline > li:nth-child(even) .ls_tmlabel { background: #CAB38B; } .ls_tmtimeline > li:nth-child(odd) .ls_tmlabel p { color: #D1D0CE; } .ls_tmtimeline > li .ls_tmlabel h2 { margin-top: 0px; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); font-size: 15px; } /* The triangle */ .ls_tmtimeline > li .ls_tmlabel:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #CAB38B; border-width: 10px; top: 20px; } .ls_tmtimeline > li:nth-child(odd) .ls_tmlabel:after { border-right-color: #5c5b56; } .ls_tmlabel ul.task { padding: 0; margin: 0; } .ls_tmlabel ul.task li { display: block; list-style: none; text-align: left; color: #D1D0CE; } .ls_tmlabel ul.task li a { color: #D1D0CE; } .ls_tmlabel ul { padding: 0; margin: 0; text-align: center; } .ls_tmlabel ul li { position: relative; display: inline-block; list-style: none; margin: 3px; } .ls_tmlabel ul li img { width: 90px; } /* The icons */ .ls_tmtimeline > li .ls_tmicon { width: 40px; height: 40px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #806854; background: #fff5cf; border-radius: 50%; box-shadow: 0 0 0 8px #b39c7d; text-align: center; left: 25%; top: 0; margin: 7px 0 0 -25px; } .ls_tmtimeline > li.month { position: relative; text-align: center; height: 100px; margin: 40px 0; } .ls_tmtimeline > li.month h4 { font-size: 14px; line-height: 60px; color: timeline-user-time; } .ls_tmtimeline > li .ls_tmicon_ls { width: 80px; height: 80px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 80px; -webkit-font-smoothing: antialiased; position: absolute; color: #806854; background: #fff5cf; border-radius: 50%; box-shadow: 0 0 0 8px #5c5b56; text-align: center; left: 23%; top: 0; margin: 0 0 0 -25px; } .ls_tmtimeline > li .ls_tmlabel iframe { height: 250px; } .ls-project{ position: relative; } .ls-project ul{ padding: 0; margin: -7px 0 0; text-align: center; } .ls-project ul li{ display: inline-block; list-style: none; margin: 5px; } .ls-project ul li img{ width: 95px; max-width: 100%; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- TABLE ------------------------------- -------------------------------------------------------------------*/ td.ls-table-progress .progress{ margin-bottom: 0; margin-top: 6px; } .ls-table .table > thead > tr > th { font-family: 'Armata',sans-serif; font-weight: normal; font-size: 14px; border-bottom: medium none; } .ls-table-pagination .pagination { margin: 0; } .table tbody form input{ width:100% !important; height: 100% !important; } /** Animated Table **/ .ls-animated-table th div.sortArrow { display: inline-block; float: right; height: 6px; margin-left: 5px; margin-top: 5px; position: relative; vertical-align: 2px; width: 11px; } .ls-animated-table th div.sortArrow div.sortArrowAscending, .ls-animated-table th div.sortArrow div.sortArrowDescending { display: none; height: 6px; position: absolute; width: 11px; } .ls-animated-table th div.sortArrow div.sortArrowAscending { background: url("../images/arrow_asc.png") repeat scroll 0 0 rgba(0, 0, 0, 0); } .ls-animated-table th div.sortArrow div.sortArrowDescending { background: url("../images/arrow_desc.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); } #ls-row tbody tr:hover { background: url("../images/icons/glyphicons_move.png") no-repeat scroll right 10px center / 14px 14px rgba(0, 0, 0, 0); cursor: move; } #ls-column th:hover { background: url("../images/icons/glyphicons_move.png") no-repeat scroll right 10px center / 14px 14px rgba(0, 0, 0, 0); cursor: move; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables features */ .dataTables_wrapper { position: relative; min-height: 302px; clear: both; _height: 302px; zoom: 1; /* Feeling sorry for IE */ } .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 250px; height: 30px; margin-left: -125px; margin-top: -15px; padding: 14px 0 2px 0; border: 1px solid #ddd; text-align: center; color: #999; font-size: 14px; background-color: white; } .dataTables_length { float: left; margin-bottom: 10px; } .dataTables_length label select { width: 100px; color: #555555; border: 1px solid #cbc5ba; border-radius: 1px; font-size: 14px; height: 30px; line-height: 1.42857; padding-left: 12px; padding-right: 12px; padding-top: 3px; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out; background: url("../images/datatable/sort_both.png") no-repeat; background-position: center right; appearance: none; -webkit-appearance: none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ""; } .dataTables_length label select:focus { border: 1px solid #cbc5ba; background: url("/assets/images/datatable/sort_desc.png") no-repeat; background-position: center right; } .dataTables_filter { width: 50%; float: right; text-align: right; margin-bottom: 10px; } .dataTables_filter label input { margin-left: 10px; border: 1px solid #cbc5ba; border-radius: 1px; color: #555555; font-size: 14px; height: 30px; line-height: 1.42857; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; padding-top: 6px; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out; } .dataTables_filter label input:focus { border: 1px solid #cbc5ba; } .dataTables_info { float: left; margin-top: 10px; } .dataTables_paginate { *width: 50px; float: right; text-align: right; margin-top: 10px; } /* Pagination nested */ .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { height: 19px; width: 19px; margin-left: 3px; float: left; } .paginate_disabled_previous { background-image: url("/assets/images/datatable/back_disabled.png"); } .paginate_enabled_previous { background-image: url("/assets/images/datatable/back_enabled.png"); } .paginate_disabled_next { background-image: url("/assets/images/datatable/forward_disabled.png"); } .paginate_enabled_next { background-image: url("/assets/images/datatable/forward_enabled.png"); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables sorting */ .sorting_asc { background: url("/assets/images/datatable/sort_asc.png") no-repeat center right; } .sorting_desc { background: url("/assets/images/datatable/sort_desc.png") no-repeat center right; } .sorting { background: url("/assets/images/datatable/sort_both.png") no-repeat center right; } .sorting_asc_disabled { background: url("/assets/images/datatable/sort_asc_disabled.png") no-repeat center right; } .sorting_desc_disabled { background: url("/assets/images/datatable/sort_desc_disabled.png") no-repeat center right; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Misc */ .dataTables_scroll { clear: both; } .dataTables_scrollBody { *margin-top: -1px; } .clear { clear: both; } .dataTables_empty { text-align: center; } .paging_full_numbers { height: 22px; line-height: 22px; } .paging_full_numbers span.paginate_button, .paging_full_numbers span.paginate_active { padding: 2px 5px; margin: 0 3px; cursor: pointer; *cursor: hand; } .paging_full_numbers { height: 22px; line-height: 22px; } .paging_full_numbers a:active { outline: none; } .paging_full_numbers a:hover { text-decoration: none; } .paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active { padding: 2px 5px; margin: 0 3px; cursor: pointer; *cursor: hand; color: #333 !important; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } .paging_full_numbers a.paginate_button:hover { border-bottom: 2px solid #cbc5ba; padding: 2px 5px; margin: 0 3px; cursor: pointer; text-decoration: none !important; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } .paging_full_numbers a.current { font-size: 16px; color: dimgray; border-bottom: 2px solid dimgray; } /* * KeyTable */ table.KeyTable td { border: 3px solid transparent; } table.KeyTable td.focus { border: 3px solid #cbc5ba; } div.box { height: 100px; padding: 10px; overflow: auto; border: 1px solid #cbc5ba; background-color: #cbc5ba; } /* * Sort arrow icon positioning */ table#ls-editable-table thead th div.DataTables_sort_wrapper { position: relative; padding-right: 20px; } table#ls-editable-table thead th div.DataTables_sort_wrapper span { position: absolute; top: 50%; margin-top: -8px; right: 0; } table#ls-editable-table tbody tr td:hover { background: url("../images/icons/glyphicons_pencil.png"); background-repeat: no-repeat; background-position: center right 10px; background-size: 12px 12px; } table#ls-editable-table tbody tr td input { border: 1px solid #cbc5ba; border-radius: 1px; color: #555555; font-size: 14px; height: 30px; line-height: 1.42857; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; padding-top: 6px; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- NOTIFICATION ----------------------- -------------------------------------------------------------------*/ .amaran{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .amaran-wrapper{ z-index: 9999; } .amaran-wrapper.top{ top: 22px; } .amaran-close i.fa{ color: #ffffff; } .amaran.default, .amaran.user{ font-family: 'PT Sans', sans-serif; background-color: #323232; font-size: 14px; } .amaran.default p span.light, .amaran.default p span{ font-size: 13px; } .amaran.user{ color: #F2F2F2; font-family: 'PT Sans', sans-serif; font-size: 14px; } .amaran.user .info{ padding-right: 12px; } .amaran.user .info b{ font-size: 16px; } .amaran.default.ok .icon{ background: #5cb85c; } .amaran.default.ok p.bold{ color: #5cb85c;; } .amaran.default p{ color: #F2F2F2; } .amaran.default p span.light{ color: #BBBBBB; } .amaran.default.error .icon{ background-color: #ff7878; } .amaran.default.error p.bold{ color: #ff7878; } .amaran.default.warning .icon{ background-color: #f0ad4e; } .amaran.default.warning p.bold{ color: #f0ad4e; } .amaran.default.green .icon, .amaran.user.green{ background-color: #1fb5ad; } .amaran.default.green p.bold{ color: #1fb5ad; } .amaran.user .icon{ border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; height: 80px; width: 80px; margin:10px; overflow: hidden; } .amaran.user.blue{ background-color: #5bc0de; } .amaran.readmore .content{ font-family: 'PT Sans', sans-serif; font-size: 14px; padding: 20px; background: #ffffff; color: #222; margin: 0; } .amaran.readmore .title{ font-family: 'PT Sans', sans-serif; font-size: 16px; } .amaran.readmore, .amaran.readmore .readmore-user{ border-color: #323232; } .amaran.readmore .title{ background-color: #323232; } .amaran.readmore.success, .amaran.readmore.success .readmore-user{ border-color: #5cb85c; } .amaran.readmore.success .title{ background-color: #5cb85c; } .amaran.readmore.red, .amaran.readmore.red .readmore-user{ border-color: #ff7878; } .amaran.readmore.red .title{ background-color: #ff7878; } .amaran.readmore.warning, .amaran.readmore.warning .readmore-user{ border-color: #f0ad4e; } .amaran.readmore.warning .title{ background-color: #f0ad4e; } .amaran.readmore.info, .amaran.readmore.info .readmore-user{ border-color: #5bc0de; } .amaran.readmore.info .title{ background-color: #5bc0de; } .amaran.readmore.green, .amaran.readmore.green .readmore-user{ border-color: #1fb5ad; } .amaran.readmore.green .title{ background-color: #1fb5ad; } /*****/ .customNotification.alert { border-radius: 1px; margin-bottom: 10px; padding: 10px; } .alert{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .list-group-item:first-child{ border-top-left-radius: 1px; -moz-border-top-left-radius: 1px; -webkit-border-top-left-radius: 1px; border-top-right-radius: 1px; -moz-border-top-right-radius: 1px; -webkit-border-top-right-radius: 1px; } .list-group-item:last-child{ border-bottom-left-radius: 1px; -moz-border-bottom-left-radius: 1px; -webkit-border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; -moz-border-bottom-right-radius: 1px; -webkit-border-bottom-right-radius: 1px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- TASK & NOTE ------------------------ -------------------------------------------------------------------*/ /**** Note & Task Start ****/ #slippylist { list-style: none; margin: 0; padding: 0; overflow: hidden; } #slippylist li { border: 1px solid #cbc5ba; padding: 10px 0; margin-bottom: 10px; background: white; user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-transition: all 0.3 fade-in-out; -moz-transition: all 0.3s fade-in-out; -o-transition: all 0.3s fade-in-out; transition: all 0.3s fade-in-out; } #slippylist li:hover { cursor: move; } #slippylist li i { margin: 0 0 0 8px; width: 15px; cursor: pointer; } #slippylist li button i{ margin: 0 3px; } #slippylist li i.fa-circle-o { color: #507d50; line-height: 20px; } #slippylist li i.fa-check { color: #fe6c6c; line-height: 20px; } #slippylist li span.doneTask { text-decoration: line-through; } #slippylist li.strikeout span { position: relative; } #slippylist li.strikeout span::after { border-bottom: 1px solid #fe6c6c; content: ""; left: 0; position: absolute; right: 0; top: 50%; -webkit-transition: all 900ms linear; -moz-transition: all 900ms linear; -o-transition: all 900ms linear; -ms-transition: all 900ms linear; transition: all 900ms linear; } .slip-reordering { box-shadow: 0 2px 10px rgba(0,0,0,0.45); } .slip-swiping-container { overflow-x: hidden; } .removeTask { float: right; padding: 0; margin-right: 10px; } #newTaskAdd { margin-top: 15px; } ul.sortable ul { list-style: none !important; } ul.sortable { list-style: none; margin: 0; padding: 0; } ul.sortable li { border: 1px solid #cbc5ba; padding: 10px; margin-bottom: 15px; } ul.sortable li i{ cursor: pointer; } ul.sortable li.dragged { position: absolute; opacity: 1; z-index: 2000; padding: 10px; height: 40px !important; background: #e0e0e0; } ul.sortable li.placeholder { position: relative; padding: 20px; background: #e0e0e0; /** More li styles **/ } ul.sortable li.placeholder:before { position: absolute; /** Define arrowhead **/ } .nano-task-progress{ height: 370px; } .nano-task-progress .goal-box{ padding-right: 10px; } ul.sortable-box{ list-style: none; margin: 0; padding: 0; } ul.sortable-box li{ border: 1px solid #cbc5ba; padding: 10px; float: left; width: 22%; margin: 0 5px 15px 5px; cursor: move; } ul.sortable-box li.dragged { position: absolute; opacity: 1; z-index: 2000; padding: 10px; height: 40px !important; background: #e0e0e0; } ul.sortable-box li.placeholder { position: relative; padding: 18px; background: #e0e0e0; /** More li styles **/ } ul.sortable-box li.placeholder:before { position: absolute; /** Define arrowhead **/ } /***/ /*Goal ui start*/ .goal-item { list-style: none; padding: 0; margin: 0; } .goal-item li { border-bottom: 1px dashed #cbc5ba; display: inline-block; margin-bottom: 0; margin-top: 10px; padding: 0 10px; width: 100%; } .goal-item li .goal-user-image { float: left; height: 45px; margin-right: 10px; width: 45px; margin-top: -5px; } .goal-item li .goal-user-image img { width: 100%; border-radius: 50%; } .goal-item li .goal-content { font-size: 14px; } .goal-item li .goal-content .progress{ margin-top: 7px; } .goal-item li .goal-content a { color: #1fb5ad; font-size: 15px; } .goal-item li .goal-content a:after { content: " - "; } .top-navigation .goal-item li a{ padding: 0; display: block; color: #6e6e6e; margin-top: 3px; } .top-navigation .goal-item li a:hover{ background: none; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- CALENDER --------------------------- -------------------------------------------------------------------*/ .progress-bar[aria-valuenow="0"]{ } button.addEvent{ width: 100%; font-size: 14px; } #full-calendar { margin-top: 20px; } #full-calendar .fc-event{ font-size: 14px; } #full-calendar .fc-grid th{ font-weight: normal; line-height: 40px; } #full-calendar .fc-grid .fc-day-number{ padding: 0 5px; } #full-calendar .fc-event-inner{ text-align: center; } #calender-wrap { margin: 0 auto; } #external-events { /*float: left;*/ position: relative; width: 100%; padding: 0 10px 10px 10px; /**** Issue Fixed @new ***/ background: #e0e0e0; border-radius: 1px; -moz-border-radius: 1px; -wibkit-border-radius: 1px; } #external-events h4 { font-size: 15px; margin-top: 0; padding-top: 10px; /**** Issue Fixed @new ***/ } .eventList{ margin-bottom: 20px; } .external-event { background: #1fb5ad; color: white; font-size: 14px; text-align: center; height: 30px; line-height: 30px; margin: 5px 0; cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .cal-event-remove{ margin: 20px 0; } #external-events p { margin: 1.5em 0; font-size: 14px; color: #666; text-align: center; } #external-events p input { margin: 0; vertical-align: middle; } #trash { /**** Issue Fixed @new ***/ background-color: #E6E6E6; border: 1px solid #e3dfd8; height: 100px; width: 100%; line-height: 100px; text-align: center; font-size: 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #trash:hover { font-size: 40px; color: #fe6c6c; } #trash.active { font-size: 40px; color: #fe6c6c; } #loading { position: absolute; top: 5px; right: 5px; } .fc-calendar-container{ height: 365px; } .fc-state-default { background-color: #1fb5ad; color: white; background-image: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-state-default.fc-corner-left{ border-bottom-left-radius: 1px; -moz-border-bottom-left-radius: 1px; -webkit-border-bottom-left-radius: 1px; border-top-left-radius: 1px; -moz-border-top-left-radius: 1px; -webkit-border-top-left-radius: 1px; } .fc-state-default.fc-corner-right{ border-bottom-right-radius: 1px; -moz-border-bottom-right-radius: 1px; -webkit-border-bottom-right-radius: 1px; border-top-right-radius: 1px; -moz-border-top-right-radius: 1px; -webkit-border-top-right-radius: 1px; } .fc-text-arrow{ font-family: 'Armata', sans-serif; font-size: 20px; line-height: 20px; margin: 0; } .fc-state-default{ text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: none; } .fc-button-prev .fc-text-arrow, .fc-button-next .fc-text-arrow{ font-weight: normal; } .fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled { color: white; background-color: #1fb5ad; } .fc-state-hover { color: white; background: #ff7878; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .fc-state-down, .fc-state-active { background-color: #ff7878; background-image: none; outline: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-state-disabled { cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; } .fc-header .fc-button{ text-transform: capitalize; } .fc-event{ background-color: #1FB5AD !important; border: none; color: #FFFFFF !important; padding: 4px; } .fc-ltr .fc-event-hori.fc-event-end, .fc-rtl .fc-event-hori.fc-event-start{ border-bottom-right-radius: 1px; border-right-width: 1px; border-top-right-radius: 1px; } .fc-ltr .fc-event-hori.fc-event-start, .fc-rtl .fc-event-hori.fc-event-end{ border-bottom-left-radius: 1px; border-left-width: 1px; border-top-left-radius: 1px; } .fc-content{ clear: none; } .custom-calendar-wrap{ margin: 0 auto; } .custom-calendar-wrap .custom-header { height: 80px; } .custom-calendar-wrap .custom-header nav span{ top: 24px; } .fc-calendar .fc-row > div > span.fc-date{ font-size: 14px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- MAPS ------------------------------- -------------------------------------------------------------------*/ #direction, #branch, #mapDirections, #findLocation, #addMarkerMap, #groupMarker{ height:400px; width: 100%; } .ls-map-locator { background: none repeat scroll 0 0 #555557; padding: 10px 0; } .ls-map-locator ul { list-style: none outside none; margin: 0; padding: 0; } .ls-map-locator ul li { display: inline-block; text-align: center; width: 19%; } .ls-map-locator ul li a{ color: #FFFFFF; outline: none; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } .ls-map-locator ul li a:hover, .ls-map-locator ul li a.active{ outline: none; text-decoration: none; color: #ff7878; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } .ls-map-locator ul li a i { font-size: 30px; line-height: 35px; } .ls-map-locator ul li a span { display: list-item; font-size: 14px; } .ls-map-locator ul li a img { width: 40px; } .mapDirectionsData { margin: auto; padding: 20px 0; text-align: center; } /** Vector Map **/ .world_map { height: 600px; width: 100%; } .world_map_home { height: 300px; width: 100%; } #za_mill_en, #au_mill_en, #map_decoration, #uk_mill_en { height: 400px; width: 100%; } .decoration-map p { background: #1FB5AD; color: #ffffff; padding: 10px; margin: 0; } .jvectormap-zoomin, .jvectormap-zoomout { background: #E3DFD8; border-radius: 1px; color: #565656; cursor: pointer; height: 17px; left: 20px; line-height: 15px; padding: 2px; position: absolute; text-align: center; width: 23px; } /** Vector Map End**/ /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- GALLERY ---------------------------- -------------------------------------------------------------------*/ .ls-gallery-paddingless-wrap{ padding: 0; } .ls-gallery-filter-wrap { margin: 10px 0; } .ls-gallery-search { text-align: right; } .ls-gallery-search input { border-radius: 0; height: 35px; padding-left: 5px; border: 1px solid #DEDEDE; } .ls-gallery-search input:focus, .ls-gallery-search select { border: 1px solid #FF7878; } .ls-gallery-search select { border-radius: 0; border: 1px solid #DEDEDE; height: 35px; background: #ffffff; display: inline-block; padding: 3px 3px 3px 5px; } .ls-gallery-search select > option { border-bottom: 1px solid #DEDEDE; height: 35px; padding: 6px 3px 3px 5px; background: #FFFFFF; } .ls-gallery-search select option:hover { color: #FFFFFF; background-color: #FF7878; cursor: pointer; } .ls-gallery-filter { position: relative; margin: 5px 0; } .ls-gallery-filter ul { padding: 0; margin: 0; text-align: center; } .ls-gallery-filter ul li { list-style: none; display: inline-block; width: 100px; padding: 2px 10px; background-color: #235b67; } .ls-gallery-filter ul li a { color: #E3DFD8; } .ls-gallery-filter ul :hover { color: #ffffff; } .ls-gallery-filter ul .active { background: #222222; } .ls-gallery { position: relative; margin-top: 20px; } .ls-gallery .item { position: absolute; top: 0; z-index: 1; width: 192px; background-color: #fff; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); filter: progid:DXImageTransform.Microsoft.Shadow(color = #adacac, direction = 135, strength = 2); } .ls-gallery .item img { display: block; } .ls-gallery .item a { text-decoration: none; position: absolute; padding: 5px 20px; bottom: -15px; left: 60px; background-color: #222222; z-index: 20; color: #ffffff; } .ls-gallery :hover { box-shadow: 0 1px 5px rgba(34, 25, 25, 0.8); -moz-box-shadow: 0 1px 5px rgba(34, 25, 25, 0.8); -webkit-box-shadow: 0 1px 5px rgba(34, 25, 25, 0.8); filter: progid:DXImageTransform.Microsoft.Shadow(color = #979797, direction = 135, strength = 3); } /******************** Gallery Hover Effect **********/ .ls-hover-block { position: relative; overflow: hidden; } .ls-hover-info { width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: auto; text-align: center; } .ls-hover-info div.ls-icons-link, .ls-hover-info div.ls-icons-remove, .ls-hover-info div.ls-icons-preview{ position: absolute; width: 60px; } .ls-two-column-icon div.ls-icons-link, .ls-two-column-icon div.ls-icons-remove, .ls-two-column-icon div.ls-icons-preview{ top: 45%; } .ls-three-column-icon div.ls-icons-link, .ls-three-column-icon div.ls-icons-remove, .ls-three-column-icon div.ls-icons-preview{ top: 40%; } .ls-four-column-icon div.ls-icons-link, .ls-four-column-icon div.ls-icons-remove, .ls-four-column-icon div.ls-icons-preview{ top: 35%; } .ls-hover-info div.ls-icons-link{ left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; } .ls-hover-info div.ls-icons-preview{ opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; } .ls-hover-info div.ls-icons-remove{ right: -100%; transition: right 200ms linear; -webkit-transition: right 200ms linear; -moz-transition: right 200ms linear; } .ls-hover-info:hover div.ls-icons-link{ transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; } .ls-hover-info:hover div.ls-icons-preview{ opacity: 1; transition-delay: 450ms; -webkit-transition-delay: 450ms; -moz-transition-delay: 450ms; } .ls-hover-info:hover div.ls-icons-remove{ transition-delay: 650ms; -webkit-transition-delay: 650ms; -moz-transition-delay: 650ms; } /* Ls Two Column Icon Gap*/ .ls-two-column-icon:hover div.ls-icons-link{ top: 45%; left: 30%; } .ls-two-column-icon:hover div.ls-icons-preview{ top: 45%; left: 0; right: 0; margin: auto; } .ls-two-column-icon:hover div.ls-icons-remove{ top: 45%; right: 30%; } /* Ls Three Column Icon Gap */ .ls-three-column-icon:hover div.ls-icons-link{ top: 40%; left: 20%; } .ls-three-column-icon:hover div.ls-icons-preview{ top: 40%; left: 0; right: 0; margin: auto; } .ls-three-column-icon:hover div.ls-icons-remove{ top: 40%; right: 20%; } /* Ls Four Column Icon Gap*/ .ls-four-column-icon:hover div.ls-icons-link{ top: 35%; left: 10%; } .ls-four-column-icon:hover div.ls-icons-preview{ top: 35%; left: 0; right: 0; margin: auto; } .ls-four-column-icon:hover div.ls-icons-remove{ top: 35%; right: 10%; } /********************************************/ .ls-hover-info h1 { font-size: 16px; padding: 10px 20px; margin: 0; background: rgba(255, 120, 120, 0.62); color: #E7E7E7; position: absolute; top: 0; left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; } .ls-hover-info p { font-size: 14px; line-height: 1.4; color: #fff; position: absolute; top: 40%; left: 0; right: 0; width: 80%; margin: auto; text-align: center; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; } .ls-hover-info div.ls-icons-link a, .ls-hover-info div.ls-icons-preview a, .ls-hover-info div.ls-icons-remove a { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #555557; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; font-size: 24px; margin: 0 5px; color: #ffffff; opacity: 0.6; } .ls-hover-info:hover h1 { left: 0; transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; } .ls-hover-info:hover p { opacity: 1; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; } .ls-hover-info:hover a { right: 0; transition: right 200ms linear 700ms, color, background 200ms linear; -webkit-transition: right 200ms linear 700ms, color, background 200ms linear; -moz-transition: right 200ms linear 700ms, color, background 200ms linear; } .ls-hover-info a:hover .fa{ color: #ff7878; } .ls-block-effect .ls-blind { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; transition: all 200ms linear; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; transform: scale(0, 1); -webkit-transform: scale(0, 1); } .ls-block-effect .ls-blind { top: 0; left: 0; } .ls-block-effect:hover .ls-blind { transform: scale(1, 1); -webkit-transform: scale(1, 1); } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- MEDIA ------------------------------ -------------------------------------------------------------------*/ .ls-cropper-wrapper { background-color: #f7f7f7; border: 1px solid #eee; box-shadow: inset 0 0 3px #f7f7f7; height: auto; width: 100%; overflow: hidden; } .ls-cropper-wrapper img { width: 100%; } .ls-cropper-preview { margin-bottom: 15px; } .preview { float: left; margin-right: 15px; margin-bottom: 15px; overflow: hidden; background: #f7f7f7; } .preview-lg { width: 290px; height: 160px; max-width: 100%; } .preview-md { width: 145px; height: 90px; max-width: 100%; } .preview-sm { width: 72.5px; height: 45px; max-width: 100%; } .preview-xs { width: 36.25px; height: 22.5px; max-width: 100%; } .ls-cropper-data { padding-right: 15px; } .ls-cropper-data .input-group { width: 100%; margin-bottom: 15px; } .ls-cropper-data .input-group-addon { min-width: 65px; } .ls-cropper-button { margin-bottom: 15px; } .ls-cropper-button > .btn { margin-right: 15px; } .ls-cropper-input .input-group { margin-bottom: 15px; } .ls-cropper-input .input-group .btn { width: 140px; } .cropper-button{ margin-top: 15px; } .media-gap{ margin-top: 30px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- PRICING TABLE ---------------------- -------------------------------------------------------------------*/ .ls-pricing-table-wrap { margin-top: 40px; margin-bottom: 20px; } .ls-android-pricing-table-wrap { margin-top: 30px; margin-bottom: 50px; } .basic { position: relative; box-shadow: 1px 2px 2px #dedede; -moz-box-shadow: 1px 2px 2px #dedede; -webkit-box-shadow: 1px 2px 2px #dedede; -webkit-transform: scale(1, 1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1, 1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; } .basic ul { padding: 0; margin: 0; } .basic ul li { position: relative; list-style: none; text-align: center; height: 70px; padding: 10px; } .basic ul li h4 { font-size: 14px; padding: 5px; margin: 0; } .basic ul li:first-child { height: 150px; line-height: 150px; background-color: #ffffff !important; padding: 0; } .basic ul li:first-child div.ls-hex-bage { width: 100%; height: 55px; line-height: 55px; position: absolute; margin: auto; top: -150px; left: 0; bottom: 0; right: 0; -moz-box-shadow: 0px -2px 2px #ffffff; -webkit-box-shadow: 0px -2px 2px #ffffff; box-shadow: 0px -2px 2px #ffffff; } .basic ul li:first-child div.ls-hex-bage span.ls-pricing { font-size: 24px; font-weight: bold; text-transform: uppercase; } .basic ul li:first-child div.basic-price-simple { position: absolute; height: 85px; width: 100%; bottom: 0; color: #746566; } .basic ul li:first-child div.basic-price-simple h3 { font-size: 46px; font-weight: bold; } .basic ul li:first-child div.basic-price-simple h3 span { font-size: 18px; } .basic ul li:first-child div.basic-price-simple h3 span.doller { font-size: 30px; position: relative; top: -12px; } .basic ul li:first-child div.bage-hide { display: none; } .basic ul li:first-child div.free-bage { background: #beb7a7; } .basic ul li:first-child div.basic-bage { background: #f2aec1; } .basic ul li:first-child div.standard-bage { background: #f2809f; } .basic ul li:first-child div.premium-bage { background: #f2527d; } .basic ul li:first-child div.ls-hex-bage:after { content: ""; position: absolute; bottom: -40px; left: 0; right: 0; width: 0; height: 0; margin: auto; border-left: 75px solid transparent; border-right: 75px solid transparent; } .basic ul li:first-child div.free-bage:after { border-top: 50px solid #beb7a7; } .basic ul li:first-child div.basic-bage:after { border-top: 50px solid #f2aec1; } .basic ul li:first-child div.standard-bage:after { border-top: 50px solid #f2809f; } .basic ul li:first-child div.premium-bage:after { border-top: 50px solid #f2527d; } .basic ul li:last-child { height: 80px; line-height: 80px; background-color: #ffffff !important; padding: 0; } .basic ul li:last-child a.btn { width: 50%; border: 0; color: white; } .basic ul li:last-child a.free-btn { background: #beb7a7; } .basic ul li:last-child a.basic-btn { background: #f2aec1; } .basic ul li:last-child a.standard-btn { background: #f2809f; } .basic ul li:last-child a.premium-btn { background: #f2527d; } .basic ul li:nth-child(odd) { background-color: #e0e0e0; } .basic ul li:nth-child(even) { background-color: #fafafa; } .basic:hover { -webkit-transform: scale(1.05, 1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05, 1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; } .basic:hover ul li:first-child div.bage-hide { display: block; } .basic:hover ul li:last-child a.btn:hover { color: white; background: #58595B; } .free-wrap ul li:first-child { border-top: 3px solid #beb7a7; border-bottom: 2px solid #beb7a7; } .free-wrap ul li:last-child { border-top: 2px solid #beb7a7; } .basic-wrap ul li:first-child { border-top: 3px solid #f2aec1; border-bottom: 2px solid #f2aec1; } .basic-wrap ul li:last-child { border-top: 2px solid #f2aec1; } .standard-wrap ul li:first-child { border-top: 3px solid #f2809f; border-bottom: 2px solid #f2809f; } .standard-wrap ul li:last-child { border-top: 2px solid #f2809f; } .premium-wrap ul li:first-child { border-top: 3px solid #f2527d; border-bottom: 2px solid #f2527d; } .premium-wrap ul li:last-child { border-top: 2px solid #f2527d; } .basic-active { -webkit-transform: scale(1.05, 1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05, 1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; } .basic-active ul li:first-child div.bage-hide { display: block; -webkit-transform: scale(1.05, 1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; z-index: 99; } /***************************************/ .android { position: relative; -webkit-transform: scale(1, 1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1, 1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; } .android ul { padding: 0; margin: 0; } .android ul li { display: block; list-style: none; text-align: center; border: 1px solid #e0e0e0; } .android ul li h4 { font-size: 14px; } .android ul li p .fa { font-size: 16px; } .android ul li p span { font-size: 15px; margin-left: 10px; } .android ul li:first-child { height: 270px; border: 0; } .android ul li:first-child h3 { padding-top: 10px; color: rgba(0, 0, 0, 0.6); font-size: 38px; text-shadow: rgba(255, 255, 255, 0.2) 3px 2px 3px; } .android ul li:first-child p { color: #000; } .android ul li:first-child .ls-bubble { width: 150px; height: 150px; line-height: 150px; border-radius: 50%; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top: -220px; -moz-box-shadow: inset -1px -1px 10px #141412; -webkit-box-shadow: inset -1px -1px 10px #141412; box-shadow: inset -1px -1px 10px #141412; } .android ul li:first-child .ls-bubble span.ls-pricing { font-size: 30px; color: white; font-weight: bold; text-shadow: #2e2e2e 0px 4px 5px; } .android ul li:first-child .ls-bubble span.ls-pricing-m{ /**** Issue Fixed @new ***/ font-size: 16px; font-weight: bold; margin-left: 3px; color: #fff; } .android ul li:last-child { height: 80px; line-height: 80px; padding: 0; border: 0; } .android ul li:last-child a.btn { width: 50%; border: 0; color: #000000; } .android ul li:last-child a.btn:hover { color: white; background: #58595B; } .android-active { transform: scale(1.1, 1.14); -webkit-transform: scale(1.1, 1.14); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.1, 1.14); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; } .android-basic ul li:first-child { background: #aaaa9e; } .android-basic ul li:first-child .ls-bubble { background: #aaaa9e; } .android-basic ul li:last-child { background: #aaaa9e; } .android-basic ul li:last-child a.btn { background-color: white; } .android-basic:hover, .android-pro:hover, .android-premium:hover { transform: scale(1.1, 1.14); -webkit-transform: scale(1.1, 1.14); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.1, 1.14); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 200; } .android-pro ul li:first-child { background: #71624e; } .android-pro ul li:first-child .ls-bubble { background: #71624e; } .android-pro ul li:last-child { background: #71624e; } .android-pro ul li:last-child a.btn { background-color: white; } .android-premium ul li:first-child { background: #5f4f3f; } .android-premium ul li:first-child .ls-bubble { background: #5f4f3f; } .android-premium ul li:last-child { background: #5f4f3f; } .android-premium ul li:last-child a.btn { background-color: white; } /**************************************/ .basic-simple { position: relative; box-shadow: 1px 2px 2px #dedede; -moz-box-shadow: 1px 2px 2px #dedede; -webkit-box-shadow: 1px 2px 2px #dedede; -webkit-transform: scale(1, 1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1, 1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; } .basic-simple ul { padding: 0; margin: 0; } .basic-simple ul li { position: relative; list-style: none; text-align: center; height: 45px; padding: 10px; } .basic-simple ul li h4 { font-size: 14px; padding: 5px; margin: 0; } .basic-simple ul li:first-child { height: 150px; line-height: 150px; padding: 0; } .basic-simple ul li:first-child div.ls-hex-bage-simple { width: 150px; height: 55px; line-height: 55px; position: absolute; margin: auto; top: -150px; left: 0; bottom: 0; right: 0; -moz-box-shadow: 0px -2px 3px #000000; -webkit-box-shadow: 0px -2px 3px #000000; box-shadow: 0px -2px 3px #000000; } .basic-simple ul li:first-child div.ls-hex-bage-simple span.ls-pricing { font-size: 20px; font-weight: bold; text-transform: uppercase; } .basic-simple ul li:first-child div.basic-price-simple { position: absolute; height: 85px; width: 100%; bottom: 0; color: #746566; } .basic-simple ul li:first-child div.basic-price-simple h3 { font-size: 46px; font-weight: bold; color: white; } .basic-simple ul li:first-child div.basic-price-simple h3 span { font-size: 18px; } .basic-simple ul li:first-child div.basic-price-simple h3 span.doller { font-size: 30px; position: relative; top: -12px; } .basic-simple ul li:first-child .basic-simple-package, .basic-simple ul li:first-child .basic-standard-package, .basic-simple ul li:first-child .basic-premium-package { position: relative; padding-top: 2px; } .basic-simple ul li:first-child .basic-simple-package h3, .basic-simple ul li:first-child .basic-standard-package h3, .basic-simple ul li:first-child .basic-premium-package h3 { color: white; font-size: 44px; text-shadow: #030303 4px 4px 4px; } .basic-simple ul li:first-child div.bage-hide { visibility: hidden; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; opacity: 0; } .basic-simple ul li:first-child div.simple-basic-bage { background: white; } .basic-simple ul li:first-child div.simple-standard-bage { background: white; } .basic-simple ul li:first-child div.simple-premium-bage { background: white; } .basic-simple ul li:first-child div.ls-hex-bage-simple:after { content: ""; position: absolute; bottom: -40px; left: 0; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; } .basic-simple ul li:first-child div.simple-basic-bage:after { border-top: 50px solid white; } .basic-simple ul li:first-child div.simple-standard-bage:after { border-top: 50px solid white; } .basic-simple ul li:first-child div.simple-premium-bage:after { border-top: 50px solid white; } .basic-simple ul li:last-child { height: 80px; line-height: 80px; padding: 0; } .basic-simple ul li:last-child a.btn { width: 50%; border: 0; color: black; } .basic-simple ul li:last-child a.free-btn { background: white; } .basic-simple ul li:last-child a.basic-btn { background: white; } .basic-simple ul li:last-child a.standard-btn { background: white; } .basic-simple ul li:last-child a.premium-btn { background: white; } .basic-simple ul li:nth-child(odd) { background-color: #e0e0e0; } .basic-simple ul li:nth-child(even) { background-color: #fafafa; } .basic-simple:hover { -webkit-transform: scale(1.05, 1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05, 1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; } .basic-simple:hover ul li:first-child div.bage-hide { opacity: 1; visibility: visible; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in; transition: opacity 1s ease-in; } .basic-simple:hover ul li:first-child div.basic-simple-package, .basic-simple:hover ul li:first-child div.basic-standard-package, .basic-simple:hover ul li:first-child div.basic-premium-package { opacity: 0; visibility: hidden; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } .basic-simple:hover ul li:last-child a.btn:hover { color: white; background: #58595B; } .simple-basic-wrap ul li:first-child { background: #e8b690; } .simple-basic-wrap ul li:last-child { background: #e8b690; } .simple-standard-wrap ul li:first-child { background: #e88f6c; } .simple-standard-wrap ul li:last-child { background: #e88f6c; } .simple-premium-wrap ul li:first-child { background: #ffa17f; } .simple-premium-wrap ul li:last-child { background: #ffa17f; } .basic-active { -webkit-transform: scale(1.05, 1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05, 1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; } .basic-active ul li:first-child div.bage-hide { opacity: 1; visibility: visible; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in; transition: opacity 1s ease-in; } .basic-active ul li:first-child div.basic-simple-package, .basic-active ul li:first-child div.basic-standard-package, .basic-active ul li:first-child div.basic-premium-package { opacity: 0; visibility: hidden; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- PROFILE ---------------------------- -------------------------------------------------------------------*/ .ls-user-skills { position: relative; } .ls-user-skills ul { padding: 0; margin: 0; } .ls-user-skills ul li { list-style: none; display: block; border-bottom: 1px solid #cbc5ba; padding: 5px 0px; height: 40px; line-height: 30px; } .ls-user-skills ul li div.ls-skill-list { position: relative; } .ls-user-skills ul li div.ls-skill-list h4 { width: 15%; float: left; font-size: 12px; } .ls-user-skills ul li div.ls-skill-list .ls-progress { width: 75%; float: left; margin-top: 13px; } .ls-user-skills ul li div.ls-skill-list span { padding: 5px 0 5px 15px; } .ls-user-skills ul li:last-child { border: none; } .ls-user-skills .ls-add-skill-wrap { border: 1px solid #cbc5ba; } .ls-user-skills .ls-add-skill-wrap a { width: 100px; } .ls-user-details { position: relative; } .ls-user-details .ls-user-name { position: relative; margin-top: 10px; } .ls-user-details .ls-user-name h1 { font-size: 18px; padding: 0; margin: 0; } .ls-user-details .ls-user-name a.user-edit { position: absolute; top: 1px; right: 0; border: 5px solid #cbc5ba; height: 45px; width: 45px; line-height: 35px; text-align: center; border-radius: 50%; color: #cbc5ba; } .ls-user-details .ls-user-links { position: relative; } .ls-user-details .ls-user-links ul { padding: 0; margin: 0; text-align: right; } .ls-user-details .ls-user-links ul li { list-style: none; display: inline-block; width: 40px; height: 40px; line-height: 45px; border: 1px solid #cbc5ba; border-radius: 50%; text-align: center; } .ls-user-details .ls-user-links ul li .fa { font-size: 20px; color: #FF7878; } .ls-user-details .ls-user-links ul li:hover .fa { color: #1FB5AD; } .ls-user-details .user-detail { margin: 15px 0 0 0; padding: 0 10px; } .ls-user-details .user-detail .ls-user-position { padding: 5px 10px; background: #dfdfdf; margin-bottom: 15px; } .ls-user-details .user-detail .ls-user-position h4 { margin-top: 0; font-size: 15px; margin-bottom: 5px; font-weight: normal; } .ls-user-details .user-detail .ls-user-position P { margin: 0; } .ls-user-details .user-detail address { background: #1FB5AD; padding: 5px 10px; color: #FFFFFF; } .ls-user-details .user-detail .ls-user-links { position: relative; margin-top: 50px; } .ls-user-details .user-detail .ls-user-links ul { padding: 0; margin: 0; } .ls-user-details .user-detail .ls-user-links ul li { list-style: none; display: inline-block; width: 40px; height: 40px; line-height: 45px; border: 1px solid #cbc5ba; border-radius: 50%; text-align: center; } .ls-user-details .user-detail .ls-user-links ul li .fa { font-size: 20px; } .ls-user-details .user-detail .user-pic { position: absolute; top: -35px; left: 315px; width: 200px; height: 200px; border: 10px solid #f8f7f7; border-radius: 50%; z-index: 1; overflow: hidden; } .ls-user-details .user-detail .user-pic img { max-width: 100%; width: 180px; height: 180px; border: 10px solid #dfdfdf; border-radius: 50%; } .ls-user-details .ls-user-info .ls-user-text { color: #FFFFFF; background: #1FB5AD; text-align: right; margin-top: 15px; padding: 5px 10px 5px 45px; } .ls-user-details .ls-user-info .ls-user-text2 { background: #dfdfdf; text-align: right; margin-top: 15px; padding: 5px 10px 5px 45px; } .ls-user-details .ls-user-info .ls-user-text2 h4 { margin: 0 0 5px 0; font-size: 15px; font-weight: normal; } .ls-user-subscriber { position: relative; margin-top: 15px; } .ls-user-subscriber .ls-user-element { float: left; margin-top: -12px; } .ls-user-subscriber .ls-user-element .easyPieChartBlack { margin: 0; line-height: 100px; } .ls-user-subscriber .ls-user-box-content { text-align: center; float: left; margin-left: -45px; margin-top: 15px; } .ls-user-subscriber .ls-user-box-content .fa { font-size: 20px; color: #FF7878; } .ls-user-subscriber .ls-user-box-content h1 { font-size: 18px; margin-top: 5px; } .ls-user-feature { width: 100%; } .ls-user-feature ul { padding: 0; margin: 0; text-align: right; } .ls-user-feature ul li { list-style: none; display: inline-block; } .ls-user-feature ul li .circliful { position: relative; } .ls-user-feature ul li .circle-text, .ls-user-feature ul li .circle-info, .ls-user-feature ul li .circle-text-half, .ls-user-feature ul li .circle-info-half { width: 100%; position: absolute; text-align: center; display: inline-block; } .ls-user-feature ul li .circle-info, .ls-user-feature ul li .circle-info-half { color: #999; } .ls-user-feature ul li .circliful .fa { position: absolute; top: 25px; font-size: 18px; color: #FF7878; } .user-profile-tab .user-friend-list{ position: relative; } .user-friend-list ul{ padding: 0px; margin: 0px; text-align: center; } .user-friend-list ul li{ position: relative; list-style: none; display: inline-block; margin: 5px; outline: none !important; } .user-friend-list ul li a{ outline: none; } .user-friend-list ul li a:focus { outline: none; } .user-friend-list ul li img{ height: auto; width: 70px; max-width: 100%; border: 2px solid #fff; transition: all 300ms ease-in-out 0s; } .user-friend-list ul li:hover img{ border: 2px solid #ff7878; transition: all 300ms ease-in-out 0s; } span.ls-friend-status{ border-radius: 8px; bottom: -3px; display: block; height: 10px; left: 30px; position: absolute; width: 10px; } .ls-friends-info ul{ padding: 0; margin: 0; text-align: left; } .ls-friends-info ul li .fa{ color: #1FB5AD; } .ls-friends-info ul li:hover .fa{ color: #ff7878; } .ls-friends-info ul li:first-child{ margin-left: -1px; } .ls-friends-info address .fa{ color: #1FB5AD; } .ls-friends-info-wrap img{ margin-right: 5px; } span.about-me-text{ margin-bottom: 10px; } h3.user-profession-title{ font-size: 14px; margin: 5px 0; padding: 0; } span.user-company-name{ color: #1FB5AD ; } #ls-downloadLink{ margin-top: 15px; } .user-map-locator{ width: 100%; height: 200px; margin-top: 25px; } .ls-view { overflow: hidden; position: relative; text-align: center; cursor: default; } .ls-view .ls-mask, .ls-view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; } .ls-view img { display: block; position: relative; } .ls-view a.info { background:url("../images/link.png") center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; } .ls-view a.ls-timeline-project-info { background:url("../images/link.png") center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; } .ls-hover-effect .ls-mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .ls-hover-effect a.info { position:relative; left: -60px; top: -67px; opacity:0; -moz-transform:scale(0,0); -webkit-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0); -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .ls-hover-effect a.ls-timeline-project-info { position:relative; left: -65px; top: -70px; opacity:0; -moz-transform:scale(0,0); -webkit-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0); -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .ls-hover-effect:hover .ls-mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .ls-hover-effect:hover a.info { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; } .ls-hover-effect:hover a.ls-timeline-project-info { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; } .feed-box-profile{ /**** Issue Fixed @new ***/ border: 1px solid #cbc5ba; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ ------------------------- LOGIN ----------------------------- -------------------------------------------------------------------*/ body.login-screen{ background: #252525; } .login-content { text-align: center; } .login-content h3{ color: #696969; } .login-box { width: 300px; margin: 5% auto; padding: 20px; background: #444444; position: relative; color: #999999; z-index: 1; /**** Issue Fixed @new ***/ } .login-box .login-user-icon { border: 5px solid #565656; border-radius: 75px; color: #565656; font-size: 70px; height: 150px; line-height: 160px; margin: auto; text-align: center; width: 150px; } .login-box .login-user-icon img { width: 75px; } .login-box .login-user-icon.user { overflow: hidden; line-height: 100px; } .login-box .login-user-icon.user img { width: 100%; } .login-box .forgot-pass-box { display: none; } .login-box .login-form, .login-box .forgot-pass-box { padding: 15px 0; } .login-box .login-form .bootstrap-switch, .login-box .forgot-pass-box .bootstrap-switch { border-color: #565656; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .login-box .login-form .bootstrap-switch-label, .login-box .forgot-pass-box .bootstrap-switch-label { background: #565656; } .login-box .login-form .bootstrap-switch.bootstrap-switch-focused, .login-box .forgot-pass-box .bootstrap-switch.bootstrap-switch-focused { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .login-box .login-form .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .login-box .login-form .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .login-box .forgot-pass-box .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .login-box .forgot-pass-box .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { background: #444444; color: #023a85; } .login-box .login-form .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, .login-box .login-form .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .login-box .forgot-pass-box .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, .login-box .forgot-pass-box .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: #444444; color: #ff7878; } .login-box .login-form .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .login-box .login-form .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .login-box .login-form .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label, .login-box .forgot-pass-box .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .login-box .forgot-pass-box .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .login-box .forgot-pass-box .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { font-size: 14px; line-height: 15px; } .login-box .login-form input:focus, .login-box .login-form input:active, .login-box .forgot-pass-box input:focus, .login-box .forgot-pass-box input:active { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .login-box .login-form input, .login-box .forgot-pass-box input { background: #565656; border: 1px solid #565656; color: #999999; } .login-box .login-form .input-group-addon, .login-box .forgot-pass-box .input-group-addon { background: #565656; color: #999999; border-color: #565656; } .login-box .login-form .remember-me, .login-box .forgot-pass-box .remember-me { margin-bottom: 15px; } .login-box .login-form .login-btn-box, .login-box .forgot-pass-box .login-btn-box { text-align: center; width: 100%; margin: auto; } .login-box .login-form .login-btn-box a.login-view:after, .login-box .forgot-pass-box .login-btn-box a.login-view:after { color: #999999; } .login-box .login-form .login-btn-box a, .login-box .forgot-pass-box .login-btn-box a { color: #999999; } .login-box .login-form .login-btn-box a:hover, .login-box .forgot-pass-box .login-btn-box a:hover { color: #1fb5ad; } .login-box .login-form .login-btn-box i, .login-box .forgot-pass-box .login-btn-box i { font-size: 20px; } .login-box .login-form .login-btn-box button, .login-box .forgot-pass-box .login-btn-box button { margin-bottom: 15px; } .login-box .login-form input:focus, .login-box .forgot-pass-box input:focus { border-color: #565656; } .login-box .login-form ::-webkit-input-placeholder, .login-box .forgot-pass-box ::-webkit-input-placeholder { color: #999999; font-size: 12px; } .login-box .login-form :-moz-placeholder, .login-box .forgot-pass-box :-moz-placeholder { /* Firefox 18- */ color: #999999; font-size: 12px; } .login-box .login-form ::-moz-placeholder, .login-box .forgot-pass-box ::-moz-placeholder { /* Firefox 19+ */ color: #999999; font-size: 12px; } .login-box .login-form :-ms-input-placeholder, .login-box .forgot-pass-box :-ms-input-placeholder { color: #999999; font-size: 12px; } .login-box .login-user-icon.user img { width: 100%; } .social-btn-login { text-align: center; margin-bottom: 10px; } .social-btn-login ul { list-style: none; margin: 0; padding: 0; } .social-btn-login ul li { display: inline; padding: 0 7px; } .social-btn-login ul li a { color: #999999; font-size: 14px; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } .social-btn-login ul li a:hover { color: dimgrey; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ ------------------------- NOT FOUND ------------------- -------------------------------------------------------------------*/ .not-found{ color: #FFFFFF; margin: 20% auto; text-align: center; } .not-found h1{ font-size: 100px; line-height: 100px; } .not-found p{ font-size: 15px; } .not-found a{ color: #FFFFFF; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ ------------------------- COMING SOON ------------------- -------------------------------------------------------------------*/ #outer-wrapper { height: 100%; position: relative; transition: all 0.3s ease-in-out 0s; width: 100%; } .coming-soon{ color: #FFFFFF; margin: 10% auto; text-align: center; } .coming-soon h1{ font-family: 'Montserrat', sans-serif; font-size: 50px; line-height: 50px; } .time_circles > div > span{ font-weight: normal; } .coming-soon .timer { margin: auto; width: 80%; } #main-container.comingSoonBody{ background: #58595B; } .copy-right { bottom: 40px; font-size: 15px; margin: 0; padding: 0; position: fixed; width: 100%; font-family: 'Montserrat', sans-serif; } .copy-right.big-screen{ font-size: 15px; text-align: center; color: #696969; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------WIDGETS------------------------------ -------------------------------------------------------------------*/ .gaugeBox{ text-align: center; } .gaugeBox canvas{ margin: auto; } .gaugeBox p{ margin: 0; padding: 0; } .ls-chart-box { cursor: pointer; height: 75px; box-shadow: 3px 3px 3px #e0e0e0; color: white; background: #3F414D; } .ls-wizard { position: relative; margin: auto; border: 1px solid #cbc5ba; height: 75px; background: #1fb5ad; color: white; box-shadow: 3px 3px 3px #e0e0e0; cursor: pointer; } .ls-wizard h2 { font-size: 20px; margin: 0; padding: 25px 0 0 10px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard span { padding: 0 0 0 10px; opacity: 0; font-size: 13px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard .icon { float: right; position: absolute; right: 10px; top: 18px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard .icon i.fa { text-align: right; font-size: 40px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard.fullWidth { width: 100%; } .ls-wizard:hover h2, .ls-wizard.active h2 { font-size: 15px; padding: 5px 0 0 10px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard:hover span, .ls-wizard.active span { font-size: 25px; opacity: 1; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard:hover .icon, .ls-wizard.active .icon { top: 8px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-wizard:hover .icon i.fa, .ls-wizard.active .icon i.fa { font-size: 60px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-chart-box .chart-box-content { float: left; display: inline-block; } .ls-chart-box .chart-box-content h1 { margin: 0; padding: 10px 0 0 15px; font-size: 20px; color: white; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-chart-box .chart-box-content p { padding: 0px 18px; font-size: 18px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-chart-box .sparklineBadge-box { padding: 10px; float: right; display: inline-block; } .ls-chart-box:hover h1, .ls-chart-box.active h1 { font-size: 14px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-chart-box:hover p, .ls-chart-box.active p { font-size: 22px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-widget-box { cursor: pointer; position: relative; height: 120px; box-shadow: 3px 3px 3px #e0e0e0; background: #3F414D; } .ls-widget-box i { position: absolute; left: 15px; top: 0; font-size: 20px; line-height: 120px; opacity: 0.5; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-widget-box .chart-box-content { float: left; display: inline-block; padding-left: 60px; } .ls-widget-box .chart-box-content h1 { margin: 0; padding: 30px 0 0 0; font-size: 20px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-widget-box .chart-box-content p { padding: 0px 0; font-size: 12px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-widget-box .box-element { margin: 5px 10px 0 0; float: right; display: inline-block; } .ls-widget-box:hover i, .ls-widget-box.active i { opacity: 1; font-size: 40px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-widget-box:hover h1, .ls-widget-box.active h1 { font-size: 12px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-widget-box:hover p, .ls-widget-box.active p { font-size: 25px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget { cursor: pointer; height: 180px; width: 180px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; margin: auto; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget i { font-size: 65px; margin: auto; line-height: 180px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget h1 { font-size: 14px; margin: 0; padding: 0; opacity: 0; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget:hover, .ls-circle-widget.active { -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget.square-hover:hover, .ls-circle-widget.square-hover.active{ border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget:hover i, .ls-circle-widget.active i { font-size: 45px; line-height: 65px; padding-top: 50px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-circle-widget:hover h1, .ls-circle-widget.active h1 { opacity: 1; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .setting-widget{ border: 1px solid #E3DFD8; } .setting-widget-header{ padding: 5px 10px; } .setting-widget-header i{ float: right; } .setting-widget-box{ } .setting-widget-box ul{ margin: 0; padding: 0; list-style: none; } .setting-widget-box ul li{ padding: 10px; border-top: 1px solid #e0e0e0; background: #f2f2f2; } .setting-widget-box ul li div.setting-switch{ float: right; } .change-color-switch{ text-align: center; } .change-color-switch ul{ list-style: none; margin: 0; padding: 0; } .change-color-switch ul li{ display: inline-block; height: 20px; width: 20px; margin: 0 0 0 5px; cursor: pointer; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 1px solid #e0e0e0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .change-color-switch ul li.active{ border: 1px solid #FFFFFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .change-color-switch ul li.default{ background: #49494B; } .change-color-switch ul li.red-color{ background: #FF7878; } .change-color-switch ul li.blue-color{ background: #5EBFD8; } .change-color-switch ul li.light-green-color{ background: #1FB5AD; } .change-color-switch ul li.black-color{ background: #3F414D; } .change-color-switch ul li.deep-blue-color{ background: #023a85; } /****/ .flotChartRealTime.widgetRealTime{ height: 220px; } .memberBox{ border: 1px solid #E0E0E0; padding: 0 10px; } .memberBox-header{ padding: 10px 0; } .memberBox-details{ margin: 0; padding: 5px 20px 15px; text-align: center; } .memberBox-details ul{ margin: 0; padding: 0; list-style: none; width: 100%; } .memberBox-details ul li{ display: inline-block; padding: 0 9%; text-align: center; } .widget-memberBox-details ul li { padding: 0 4%; } .memberBox-details ul li div.memberBox-title{ text-align: center; font-size: 17px; } .memberBox-details ul li div.memberBox-title h4{ margin: 3px 0; font-size: 15px; } .memberBox-details ul li div.memberBox-value{ text-align: center; } .memberBox-details ul li div.memberBox-value i{ font-size: 15px; } .memberBox-details ul li div.memberBox-value.up{ color: #1FB5AD; } .memberBox-details ul li div.memberBox-value.down{ color: #023a85; } .sale-widget{ margin-bottom: 20px; } .sale-widget ul li a{ letter-spacing: 1px; } .sale-widget .tab-content{ border-left: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; border-right: 1px #e0e0e0 solid; height: 300px; } .sale-widget .tab-content p{ line-height: 14px; } .sale-widget label.switch-label{ margin-top: 5px; } /*****/ /*Easy pie ui start */ .easy-pai-box { margin: auto; text-align: center; } .easyPie{ position: relative; display: inline-block; width: 110px; height: 110px; margin-bottom: 15px; text-align: center; display: inline-block; line-height: 110px; z-index: 2; } .easyPieChart, .easyPieChartBlue, .easyPieChartGreen, .easyPieChartBrown, .easyPieChartLightGreen, .easyPieChartBlack { position: relative; display: inline-block; width: 110px; height: 110px; margin-bottom: 15px; text-align: center; display: inline-block; line-height: 110px; z-index: 2; } .easyPie canvas{ position: absolute; top: 0; left: 0; } .easyPieChart canvas, .easyPieChartBlue canvas, .easyPieChartGreen canvas, .easyPieChartBrown canvas, .easyPieChartLightGreen canvas, .easyPieChartBlack canvas { position: absolute; top: 0; left: 0; } .easyPiePercent:after { content: '\0025'; margin-left: 0.1em; font-size: .8em; } .easyPieChartBlue:before { content: '\0024'; font-size: .8em; } .easyPieChartGreen:before { content: '\20AC'; font-size: .8em; } .easyPieChartBrown:before { content: "\00a3"; font-size: .8em; } .easyPieChartLightGreenPercent:after { content: '\0025'; margin-left: 0.1em; font-size: .8em; } .easyPiePercentFacebook:after{ content: '\0025'; margin-left: 0.1em; font-size: .8em; } .easyPieChartBlackPercent:after { content: '\0025'; margin-left: 0.1em; font-size: .8em; } /*****/ .icon-tab .tab-content { border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; } .hero-donut-widget{ height: 200px; } .c3-chart-arc text{ font-size: 12px; } .hero-donut-widget svg text, .hero-donut-widget svg text tspan{ font-family: 'PT Sans', sans-serif !important; font-size: 12px !important; font-weight: normal !important; } .hero-donut-box svg text, .hero-donut-box svg text tspan{ font-family: 'PT Sans', sans-serif !important; font-size: 12px !important; font-weight: normal !important; } .sale-widget #product{ text-align: center; height: 300px; } .hero-bar-widget{ height: 300px; } .monthlySale{ height: 200px; text-align: center; } .progress.vertical{ margin: 0 10px; } .monthlySale ul{ list-style: none; padding: 0; margin: 0; } .monthlySale ul li{ height: 200px; display: inline-block; text-align: center; } .monthlySale ul li div.progress{ margin-bottom: 0; } .monthlySale ul li div.monthName{ display:block; text-align: center; } .monthlySale ul li div.progress.vertical{ float: none; } .monthlySale .progress.vertical{ width: 50px; } .progress.vertical .progress-bar.six-sec-ease-in-out { -webkit-transition: height 6s ease-in-out; -moz-transition: height 6s ease-in-out; -ms-transition: height 6s ease-in-out; -o-transition: height 6s ease-in-out; transition: height 6s ease-in-out; } .progress-bar-danger{ background: #FF7878; } .seriesToggleWidget{ height: 260px; width: 80%; float: left; } .seriesToggleWidget div.legend table{ margin-right: 10px; } .seriesToggleWidget div.legend table tbody tr td{ height: 20px; } .seriesToggleWidget div.legend table tbody tr td.legendColorBox div{ margin-right: 10px; } .seriesToggleWidget div.legend table tbody tr td.legendColorBox div >div{ margin-right: 0px; } .seriesToggleWidget div.legend table tbody tr td.legendLabel{ font-size: 13px; } #choicesWidget{ width: 20%; list-style: none; float: left; margin: 5px 0 0 0; padding: 0; } #choicesWidget li{ margin-bottom: 10px; margin-left: 10px; } .skyWeather{ height: 250px; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .current-weather, .feature-weather{ } .current-weather{ width: 100%; height: 180px; } .current-weather-icon{ width: 50%; margin: auto; float: left; text-align: center; padding-top: 40px; } .current-weather-icon canvas{ margin: auto; width: 128px; } .current-weather-details{ float: right; width: 50%; text-align: center; padding-top: 10%; } .current-weather-details h2{ font-size: 45px; margin-bottom: 0; } .current-weather-details p, .current-weather-details span{ font-size: 14px; } .feature-weather{ border-top: 1px solid #82CDCA; } .feature-weather ul{ list-style: none; margin: 0; padding: 0; text-align: center; } .feature-weather ul li{ display: inline-block; text-align: center; border-right: 1px solid #82CDCA; width: 19%; } .feature-weather ul li:last-child{ border: none; } .feature-weather ul li a{ display: block; line-height: 14px; padding: 10px 0; text-align: center; } .feature-weather ul li a:hover{ text-decoration: none; color: #f2f2f2; } .feature-weather ul li a canvas{ } .feature-weather ul li a span{ color: #FFFFFF; display: list-item; text-transform: uppercase; } .social-share-box{ height: 250px; } .social-share{ height: 50%; display: inline-block; background: #e0e0e0; text-align: center; position: relative; cursor: pointer; } .social-share i{ font-size: 50px; color: #FFFFFF; line-height: 125px; } .ls-fb-share{ background: #3B5998; } .ls-tw-share{ background: #55ACEE; } .ls-google-plus{ background: #D44032; } .ls-dribble-plus{ background: #C32361; } .share-overlay { display: block; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; } a.close-overlay.hidden { display: none; } a.expand { color: #F2F2F2; display: block; font-size: 16px; font-weight: 400; line-height: 50px; position: absolute; text-align: center; z-index: 100; outline: 0; text-decoration: none; } a.expand:hover{ outline: 0; text-decoration: none; } .share-overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 0; } .share-overlay a.expand { bottom: 50%; font-size: 38px; left: 0; letter-spacing: 2px; margin: 0 auto -30px; right: 0; font-weight: bold; } .overlay-hover .share-overlay { height: 100%; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ ------------------------- PANEL ------------------------------ -------------------------------------------------------------------*/ .form-control { background-color: rgba(0, 0, 0, 0); box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .panel .form-control { background-color: rgba(0, 0, 0, 0); } .no-margin { margin: 0; } .panel-control, .panel-note-control, .note-control{ list-style: none; padding: 0; margin:0 ; position: absolute; right: 25px; top: 10px; } .panel-control li, .panel-note-control li, .note-control li{ display: inline-block; margin: 0 3px; } .panel-control li a, .panel-note-control li a, .note-control li a{ font-size: 13px; color: #FFFFFF; outline: 0; opacity: 1; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .panel-default .panel-control li a, .panel-default .panel-note-control li a, .panel-default .note-control li a{ color: #565656; } .panel-control li a:hover, .panel-note-control li a:hover, .note-control li a:hover{ color: #565656; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .panel-default .panel-control li a:hover, .panel-default .panel-note-control li a:hover, .panel-default , .note-control li a:hover{ color: #565656; } .panel, .panel-heading { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .panel-default { border-color: #e3dfd8; } .panel-default > .panel-heading { background-color: #e0e0e0; border-color: #e0e0e0; color: #515151; } .panel-red { border-color: #ff7878; } .panel-red > .panel-heading { background-color: #ff7878; border-color: #ff7878; color: white; } .panel-light-green { border-color: #1fb5ad; } .panel-light-green > .panel-heading { background-color: #1fb5ad; border-color: #1fb5ad; color: white; } .panel-light-blue { border-color: #023a85; } .panel-light-blue > .panel-heading { border: #023a85; background: #023a85; color: white; } .panel-dark { border-color: #555557; } .panel-dark > .panel-heading { border: #555557; background: #555557; color: white; } .panel > .panel-body { background-color: #fafafa; } .ls-light-green-progress { background-color: #023a85; } .ls-light-blue-progress { background-color: #1fb5ad; } .ls-green-progress { background-color: #507d50; } .ls-yellow-progress { background-color: #aaa900; } .ls-red-progress { background-color: #ff7878; } .top-panel { margin-top: 20px; } /* Modal Start */ .modal-footer { padding: 10px 20px; margin-top: 0; } .modal-header { padding: 10px 15px; } .panel-less { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; } .panel-less.panel-default { border: none; background-color: transparent; } .panel-less > .panel-heading { background-color: transparent; border: 0; padding: 15px 0; } .panel-less > .panel-body { background-color: transparent; } h3.panel-title{ font-size: 15px; } .modal-content { border-radius: 1px; } .grid-panel-body{ text-align: center; line-height: 50px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------ICONS--------------------------------- -------------------------------------------------------------------*/ .icon-tab{ } .icon-list-padding { padding: 0 15px; } .icon-view-tab.tab-content{ border-bottom: 1px solid #e3dfd8; border-left: 1px solid #e3dfd8; border-right: 1px solid #e3dfd8; } div.fontawesome-icon-list div { background-color: #F9F9F9; border: 1px solid #FFFFFF; float: left; font-size: 14px; height: 100px; line-height: 1.4; padding: 10px; text-align: center; cursor: pointer; } div.fontawesome-icon-list div i.fa { color: #626161; font-size: 30px; margin-bottom: 10px; margin-top: 5px; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } div.fontawesome-icon-list div a { color: #235b67; display: block; text-align: center; word-wrap: break-word; } div.fontawesome-icon-list div:hover i { color: #1fb5ad; font-size: 35px; } .animation-icon-box { text-align: center; color: #626161; } ul.icon-list.middle { padding-bottom: 20px; padding-top: 20px; } ul.icon-list { list-style: none; margin: 0; padding: 0; margin-bottom: 2px; cursor: pointer; } ul.icon-list li { display: inline-block; padding: 0 5px; } .animation-icon { text-align: center; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } .animation-icon:hover { color: #1fb5ad; opacity: 1; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(360deg); } .ls-glyphicons-list { list-style: none outside none; padding: 0; margin: 0; } .ls-glyphicons li { background-color: #F9F9F9; border: 1px solid #FFFFFF; cursor: pointer; float: left; font-size: 12px; height: 100px; line-height: 1.4; padding: 10px; text-align: center; width: 20%; } .ls-glyphicons .glyphicon { color: #626161; font-size: 25px; margin-bottom: 10px; margin-top: 5px; -webkit-transition: all 600ms linear; -moz-transition: all 600ms linear; -o-transition: all 600ms linear; -ms-transition: all 600ms linear; transition: all 600ms linear; } .ls-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word; } .ls-glyphicons li:hover span.glyphicon { color: #1fb5ad; font-size: 35px; } .popupIcon { text-align: center; } .popupIcon i { font-size: 50px; color: #1fb5ad; } .popupIcon pre{ margin-top: 20px; } .customizationIcon h5{ margin-bottom: 20px; } .customizationIcon ul{ margin-bottom: 50px; } /****/ p.bg-label { background-color: #1FB5AD; padding: 15px; } .red, i.red { color: #ff7878; } .blue, i.blue { color: #6b97f4; } .green, i.green { color: #507d50; } .brown, i.brown { color: #763d3d; } .white, i.white { color: white; } .lightGreen, i.lightGreen { color: #1fb5ad; } .light-blue, i.light-blue { color: #023a85; } .yellow, i.yellow { color: #aaa900; } .phast, i.phast { color: #70cac8; } /***** Color css end ****/ .spinIn { -webkit-animation: spinIn 0.6s 1 linear; animation: spinIn 0.6s 1 linear; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes spinIn { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); } } @keyframes spinIn { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .spinOut { -webkit-animation: spinOut 0.6s 1 linear; animation: spinOut 0.6s 1 linear; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes spinOut { 0% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spinOut { 0% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------FOOTER------------------------------ -------------------------------------------------------------------*/ /*Footer css start */ #footer{ background: #ffffff; padding: 10px; border-top: 1px #CBC5BA dotted; } #footer.right{ text-align: right; padding-right: 50px; } #footer a{ color: #565656; } #footer a:hover{ text-decoration: none; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ ------------------------ BLOCKQUOTE -------------------------- -------------------------------------------------------------------*/ blockquote.styles{ font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 80%; margin: auto; padding: 50px; line-height: 1.45; position: relative; color: #383838; background:#ececec; } blockquote.styles:before { color: #7a7a7a; content: "“"; display: block; font-size: 80px; left: 10px; position: absolute; top: 10px; } blockquote.styles cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote.styles cite:before { content: "\2014 \2009"; } blockquote.styles footer{ text-align: right; } div.demo-blockquote{ margin-top: 10%; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------SLIDER--------------------------------- -------------------------------------------------------------------*/ /**** Slider ***/ .owl-theme .owl-controls .owl-buttons div.owl-prev{ position: absolute; top: 40%; left: 30px; background: url('../images/arrows.png') no-repeat; background-position: 0 0; overflow:hidden; font-size: 0; padding-top:16px; } .owl-theme .owl-controls .owl-buttons div.owl-next{ position: absolute; top: 40%; right: 30px; background: url('../images/arrows.png') no-repeat; background-position: -20px 0; overflow:hidden; font-size: 0; padding-top:16px; } .owl-theme .owl-controls .owl-page span{ background: #ff7878; } .owl-caption{ position: absolute ; bottom:0; background-color: #fff; width:100%; opacity: 0.5; padding: 10px 10px } .owl-caption h3{ font-size: 16px; padding: 0; margin: 0; } #owl-demo .item img{ display: block; width: 100%; height: auto; } #bar{ width: 0%; max-width: 100%; height: 4px; background: #ff7878; } #progressBar{ width: 100%; background: #EDEDED; } /**********************************/ /*SLIDER*/ #slideShow { width:100%; } #slideShow img { width: 100%; height: auto; } .ls-slider-content { padding:10px; margin:15px; background-color:#5ebfd8; color:#fff; text-align: center; } .s2 .ls-slider-content { background:#58595b; text-align:center; font-weight:300; font-size:16px; } .s3 .ls-slider-content { background-color:#113564; color:#ccc; } .ls-slider-title { background-color: #ff7878; margin: 15px 15px 0; height: 60px; text-align: center; } .ls-slider-title h2, .ls-slider-title h3 { color: #fff; font-size: 20px; line-height: 3; } .ls-slider-right-view{ margin-left: 67.3333% !important; } @media only screen and (min-width: 600px) { #slideShow { height:350px; } #slideShow img { height:350px; } } @media only screen and (min-width: 1px) and (max-width: 600px) { #slideShow { height:150px; } #slideShow img { height:150px; } .ls-slider-content { padding:5px; margin:10px; font-size:10px; } .s2 .ls-slider-content { font-size:10px; } .s3 .ls-slider-content, .s1 .ls-slider-content { width:150%; height: 20px; font-size:10px; } #slideShow .title { display: none; } } ul.slideControl { list-style:none; text-align: center; margin:5px auto; overflow:hidden; border-top:none; opacity:.5; } ul.slideControl li { display: inline-block; padding:5px; background:#ccc; margin:5px; cursor:pointer; } ul.slideControl li:hover, ul.slideControl li.current { background:#555; } div.opt { margin:10px; background:#eee; padding:5px; } span.option { font-weight:700; } span.description { margin-left:10px; } .ls-slider-2{ margin-top: 30px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- UI ELEMENTS ------------------------ -------------------------------------------------------------------*/ /******* Button & Switch *******/ .button-alignment button.btn{ margin-bottom: 10px; } .ls-blue-btn { background-color: #6b97f4; color: white; text-align: center; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-blue-btn:hover, .ls-blue-btn:active, .ls-blue-btn:focus { background-color: #023a85; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-light-blue-btn { background-color: #023a85; color: white; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-light-blue-btn:hover, .ls-light-blue-btn:active, .ls-light-blue-btn:focus { background-color: #6b97f4; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-green-btn { background-color: #507d50; color: white; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-green-btn:hover, .ls-green-btn:active, .ls-green-btn:focus { background-color: #47A447; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-light-green-btn { background-color: #1fb5ad; color: white; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-light-green-btn:hover, .ls-light-green-btn:active, .ls-light-green-btn:focus { background-color: #1FD9D0; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-red-btn { background-color: #ff7878; color: white; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-red-btn:hover, .ls-red-btn:active, .ls-red-btn:focus { background-color: #D2322D; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-dark-btn { background-color: #565656; color: #999999; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-dark-btn:hover, .ls-dark-btn:active, .ls-dark-btn:focus { background-color: #626262; color: white; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ls-yellow-btn { background-color: #aaa900; color: white; text-align: center; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-yellow-btn:hover, .ls-yellow-btn:active, .ls-yellow-btn:focus { background-color: #C6C524; color: white; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-brown-btn { background-color: #763d3d; color: white; text-align: center; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-brown-btn:hover, .ls-brown-btn:active, .ls-brown-btn:focus { background-color: #AE6A6A; color: white; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ls-button-group button { margin-right: 10px; } .ls-button-group .btn-group { margin-right: 10px; } .ls-button-group .btn-group button { margin: 0; } .btn.fa { line-height: 1.42857; } .btn-ls { background-color: #023a85; border-color: #023a85; color: white; border-radius: 1px; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } .btn-ls:focus, .btn-ls:hover { color: #023a85; background-color: white; } button.fileinput-remove-button { background-color: #ff7878; border-color: #ff7878; color: white; border-radius: 1px; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } .fileinput-remove-button:hover, .fileinput-remove-button:focus { background-color: white; color: #ff7878; } .ls-hexagon-lightBlue { width: 44px; height: 25px; background: #023a85; position: relative; text-align: center; } .ls-hexagon-lightBlue:after { content: ""; position: absolute; bottom: -12.5px; left: 0; width: 0; height: 0; border-left: solid transparent 22px; border-right: solid transparent 22px; border-top: solid #023a85 12.5px; } .ls-hexagon-lightBlue:before { content: ""; position: absolute; top: -12.5px; left: 0; width: 0; height: 0; border-left: solid transparent 22px; border-right: solid transparent 22px; border-bottom: solid #023a85 12.5px; } .ls-hexagon-lightBlue:hover { background-color: #ff7878; } .ls-hexagon-lightBlue .fa { line-height: 25px; font-size: 25px; color: white; } .ls-hexagon-red { width: 34px; height: 20px; background: #ff7878; position: relative; text-align: center; } .ls-hexagon-red:after { content: ""; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-left: solid transparent 17px; border-right: solid transparent 17px; border-top: solid #ff7878 10px; } .ls-hexagon-red:before { content: ""; position: absolute; top: -10px; left: 0; width: 0; height: 0; border-left: solid transparent 17px; border-right: solid transparent 17px; border-bottom: solid #ff7878 10px; } .ls-hexagon-red:hover { background-color: #ff7878; } .ls-hexagon-red .fa { line-height: 20px; font-size: 20px; color: white; } .hex { width: 50px; height: 50px; position: relative; overflow: hidden; float: left; margin-right: -1px; -webkit-backface-visibility: hidden; /* Smooth out them edges ;) */ -webkit-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); -moz-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); -ms-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); -o-transform: rotate(-30deg) skewX(30deg) scaleY(0.866); transform: rotate(-30deg) skewX(30deg) scaleY(0.866); } .hex a { font-size: 18px; line-height: 50px; text-align: center; color: #FFF; background-color: #e1e1e1; position: absolute; right: 6.7%; left: 6.7%; -webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); -moz-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); -ms-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); -o-transform: scaleY(1.155) skewX(-30deg) rotate(30deg); transform: scaleY(1.155) skewX(-30deg) rotate(30deg); outline: 0; } .hex a:hover .overlay { top: 0; outline: 0; } .hex a:focus{ outline: 0; } .hex a i { width: 100%; z-index: 10; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .overlay { width: 100%; height: 100%; position: absolute; top: -100%; left: 0; z-index: -1; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } .facebook .overlay { background-color: #023a85; } .twitter .overlay { background-color: #023a85; } .gplus .overlay { background-color: #ff7878; } .rss .overlay { background-color: #aaa900; } .email .overlay { background-color: #507d50; } .linkedin .overlay { background-color: #763d3d; } .youtube .overlay { background-color: #ff7878; } .skype .overlay { background-color: #023a85; } .instagram .overlay { background-color: #457299; } .pinterest .overlay { background-color: #ff7878; } .bootstrap-switch.bootstrap-switch-focused{ border-color:#AEAEAE; box-shadow: 0 2px 2px #F2F2F2 inset, 0 0 2px #98B6CF; -moz-box-shadow: 0 2px 2px #F2F2F2 inset, 0 0 2px #98B6CF; -mwebkit-box-shadow: 0 2px 2px #F2F2F2 inset, 0 0 2px #98B6CF; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary{ background: #023a85; } .btn.btn-round { border-radius: 18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; } .label { border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; font-weight: 400; } .label-Blue, .label-blue { background-color: #6b97f4; } .label-dark{ background-color: #58595B; } .label-lightBlue { background-color: #023a85; } .label-yellow { background-color: #aaa900; } .label-green { background-color: #507d50; } .label-brown { background-color: #763d3d; } .label-red { background-color: #ff7878; } .label-black { background-color: #3f414d; } .label-light-green { background-color: #1fb5ad; } .badge-Blue { background-color: #6b97f4; } .badge-lightBlue { background-color: #023a85; } .badge-yellow { background-color: #aaa900; } .badge-green { background-color: #507d50; } .badge-brown { background-color: #763d3d; } .badge-red { background-color: #ff7878; } .red-color .badge-red{ background-color: #C45C5C; } .user-status { background: none repeat scroll 0 0 padding-box #575D67; border-radius: 8px; display: inline-block; height: 8px; margin-right: 5px; transition: all 300ms ease-in-out 0s; width: 8px; } .is-online{ background-color:#2ecc71; } .is-busy{ background-color:#ff7878; } .is-idle{ background-color: #F7D227; } .is-offline{ background-color: #A0A0A0; } /****/ .ls-pagination { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .ls-pagination > li:first-child > a, .ls-pagination > li:first-child > span, .ls-pagination > li:last-child > a, .ls-pagination > li:last-child > span { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .ls-pagination > li a { background-color: #e1e1e1; color: dimgrey; } p.preview-advance { padding: 10px 0; } p.preview-advance a { font-size: 12px; color: dimgrey; } p.preview-advance a:hover { color: #023a85; text-decoration: underline; } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{ margin-top: 5px; } .input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] { margin-top: 5px; } .file-preview{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .summerNoteToolBox{ margin: 10px 0; } .v-progressbar{ height: 175px; margin: 0 auto; } .v-progressbar .progress.vertical{ width: 50px; } .v-progressbar .progress.vertical .progress-bar.six-sec-ease-in-out { -webkit-transition: height 6s ease-in-out; -moz-transition: height 6s ease-in-out; -ms-transition: height 6s ease-in-out; -o-transition: height 6s ease-in-out; transition: height 6s ease-in-out; } .progress { border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; height: 5px; } .progress .progress-bar.six-sec-ease-in-out { -webkit-transition: width 6s ease-in-out; -moz-transition: width 6s ease-in-out; -ms-transition: width 6s ease-in-out; -o-transition: width 6s ease-in-out; transition: width 6s ease-in-out; } .ls-light-blue-progress { background-color: #023a85; } .ls-green-progress { background-color: #507d50; } .ls-yellow-progress { background-color: #aaa900; } .ls-red-progress { background-color: #ff7878; } .ls-header-button{ font-size: 14px; } /*******/ .selectize-input{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .selectize-input.focus{ box-shadow: 0 2px 2px #F2F2F2 inset, 0 0 2px #98B6CF; border-color: #AEAEAE; outline: none; } .selectize-input.dropdown-active{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .selectize-control.multi .selectize-input > div{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; font-size: 14px; padding: 2px 10px } .selectize-control.multi .selectize-input > div.active{ background: #1fb5ad; } .selectize-dropdown-content span.label{ font-size: 13px; font-size: 700; color: #565656; } .selectize-dropdown-content span.caption{ font-size: 12px; font-size: 700; color: #565656; } .selectize-dropdown, .selectize-dropdown.form-control{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .minicolors-theme-bootstrap .minicolors-swatch{ border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .xdsoft_datetimepicker{ border-color: #CCCCCC; } .xdsoft_datetimepicker .xdsoft_label{ font-weight: normal; color: #565656; } .xdsoft_datetimepicker .xdsoft_calendar th{ font-weight: 400; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current{ background: #1FB5AD; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover{ background: #FF7878 !important; } .irs-from, .irs-to, .irs-single{ background:#FF7878; } .irs-from:after, .irs-to:after, .irs-single:after{ border-color: #FF7878 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .tooltipButton { list-style: none; margin: 0; padding: 0; } .tooltipButton li { margin-bottom: 15px; display: inline-block; } .toolButton { list-style: none; margin: 0; padding: 0; } .toolButton li { margin-right: 10px; display: inline-block; text-align:center; } .ls-settings-button:hover, .ls-settings-button.pressed { background-color: rgba(0, 0, 0, 0); cursor: pointer; opacity: 1; z-index: 2; text-decoration: none; } .ls-settings-button { background-color: #E1E1E1; border: 1px solid #CCCCCC; border-radius: 1px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15); display: block; height: 28px; margin: 0; opacity: 0.9; width: 30px; z-index: 2; } .ls-settings-button i { display: block; margin: 0 auto; line-height: 28px; color: dimgrey; } .tool-container { background-color: #E1E1E1; box-shadow: 0 0 3px #898989; background-image: none; } .tool-item.selected, .tool-item:hover{ background-color: #CCCCCC; box-shadow: 0 0 3px #898989; background-image: none; } .tool-items a { color: #696969; line-height: 33px; } .tool-top .tool-item, .tool-bottom .tool-item{ border: none; } .tool-left .tool-item, .tool-right .tool-item{ border: none; } .remodal, .remodal *{ font-family: 'PT Sans', sans-serif; } .remodal h1, .remodal h2, .remodal h3, .remodal h4, .remodal h5{ font-family: 'Armata', sans-serif; } .tab-pane{ padding: 10px; } .nav-tabs > li > a{ border-radius: 1px 1px 0 0; -moz-border-radius: 1px 1px 0 0; -webkit-border-radius: 1px 1px 0 0; color: #555; font-size: 15px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{ outline: 0; color: #023a85; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus{ border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; } .nav-tabs.nav-justified > li > a{ border-radius: 1px 1px 0 0; -moz-border-radius: 1px 1px 0 0; -webkit-border-radius: 1px 1px 0 0; } #qrcodeTable table { margin: 30px auto; } #qrcodeCanvas > canvas { margin: 30px auto; display: block; } /*** Knobs ***/ .knoob-box { text-align: center; width: 49%; display: inline-block; } .knoob-box h4 { padding: 0; margin: 0; } .knoob-box-3 { width: 100%; display: inline-block; text-align: center; margin: auto; } .knoob-box-4 { text-align: center; width: 100%; display: inline-block; margin: 20px 0; } .knoob-box-4 h4 { padding: 0; margin: 0; } /****/ .radio-inline { padding-left: 10px; } .radio-inline label { padding-right: 10px; } .icheck-radio-inline { padding-left: 20px; } .input-group-addon { border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } /***/ .ui-widget-header{ background-image: none; background-color: #e0e0e0; } .selectize-control.multi .selectize-input > div{ background: #E0E0E0; color:#777; } /****/ #main-content{ background: #f9f9f9; padding-top: 15px; height: 100%; min-height: 900px; } #change-color{ position: fixed; bottom: 0; height: 30px; width: 200px; right: -200px; background: #555557; z-index: 990; } #change-color-control{ background: #FF7878; bottom: 0; left: -30px; position: absolute; text-align: center; } #change-color-control a{ color: #FFFFFF; display: inline-block; font-size: 18px; line-height: 22px; padding: 4px 10px; } #change-color-control a:hover, #change-color-control a:focus{ outline: 0; } #change-color .change-color-box{ text-align: center; } #change-color .change-color-box ul{ list-style: none; margin: 0; padding: 0; } #change-color .change-color-box ul li{ display: inline-block; height: 20px; width: 20px; margin: 5px 0 0 5px; cursor: pointer; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 1px solid #555557; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #change-color .change-color-box ul li.active{ border: 1px solid #FFFFFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #change-color .change-color-box ul li.default{ background: #49494B; } #change-color .change-color-box ul li.red-color{ background: #FF7878; } #change-color .change-color-box ul li.blue-color{ background: #5EBFD8; } #change-color .change-color-box ul li.light-green-color{ background: #1FB5AD; } #change-color .change-color-box ul li.black-color{ background: #3F414D; } #change-color .change-color-box ul li.deep-blue-color{ background: #023a85; } /****/ .btn { border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .popover { border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; background-color: #fafafa; } .btn-default { background-color: #e1e1e1; color: #565656; } .border-bottom { border-bottom: #cbc5ba dashed 1px; padding-bottom: 15px; margin-bottom: 15px; } .no-border-bottom { padding-bottom: 15px; } .page-min-height { min-height: 750px; } .no-padding { padding: 0; } hr.hr-20 { margin: 20px 0; } hr.footer-border { margin: 0; border: none; } .progress { border-radius: 1px; height: 5px; } .tab-content{ background: #ffffff; } .tab-border.tab-content{ border-bottom: 1px solid #e3dfd8; border-left: 1px solid #e3dfd8; border-right: 1px solid #e3dfd8; } /*-----------------------------------------------------------------*/ /*----------------------------------------------------------------- *********** UPDATE VERSION 1.1 ************ -----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- MEDIA PLAYER ------------------------ -------------------------------------------------------------------*/ .ls-audio-player-wrap, .ls-video-player-wrap { position: relative; } .ls-audio-player-wrap .jp-audio, .ls-video-player-wrap .jp-video { width: 100%; background-color: transparent; border: none; } .ls-video-player-wrap div.jp-video-360p, .ls-video-player-wrap div.jp-video-full{ width: 100%; height: 100%; background-color: transparent; border: none; } .ls-video-player-wrap .jp-jplayer{ border: 1px solid #E2E2EA; background: transparent; margin-bottom: -7px; } .ls-audio-player { position: relative; height: 70px; background: #58595b; } .ls-audio-play { height: 40px; width: 40px; line-height: 38px; text-align: center; border-radius: 50%; margin: auto; background: #58595b; color: #000; position: absolute; top: 15px; left: 10px; box-shadow: 0 0 10px #000000 inset; } .ls-audio-play:hover { cursor: pointer; color: #1FB5AD; } .ls-audio-play a.jp-pause .fa, .ls-audio-suffle a.jp-shuffle-off .fa, .ls-audio-repeat a.jp-repeat-off .fa{ color: #1FB5AD; } .ls-audio-left { position: absolute; left: 60px; } .ls-audio-right { position: absolute; left: 140px; } .ls-audio-stop{ position: absolute; left: 100px; } .ls-audio-suffle{ position: absolute; right: 10px; top: 20px; } .ls-audio-repeat{ position: absolute; right: 38px; top: 20px; } .ls-audio-list{ position: absolute; right: 65px; top: 20px; } .ls-video-screen{ position: absolute; right: 90px; top: 20px; } .ls-audio-left, .ls-audio-right, .ls-audio-stop{ top: 20px; color: #ff7878; height: 30px; width: 30px; border-radius: 50%; background: #58595b; text-align: center; box-shadow: 0 0 10px #000000 inset; } .ls-audio-play a.jp-play{ margin-left: 3px; } .ls-audio-left a.jp-previous{ margin-left: -3px; } .ls-audio-stop a.jp-stop{ margin-top: 3px; margin-left: 0px; } .ls-audio-right a.jp-next{ margin-left: 3px; } .ls-audio-play .fa{ color: #ff7878; font-size: 16px; } .ls-audio-left .fa, .ls-audio-right .fa, .ls-audio-stop .fa, .ls-audio-suffle .fa, .ls-audio-repeat .fa, .ls-vol-down .fa, .ls-vol-up .fa, .ls-audio-list .fa, .ls-video-screen .fa { color: #ff7878; font-size: 12px; } .ls-audio-play:hover .fa, .ls-audio-left:hover .fa, .ls-audio-right:hover .fa, .ls-audio-stop:hover .fa, .ls-audio-suffle:hover .fa, .ls-audio-repeat:hover .fa, .ls-vol-down:hover .fa, .ls-vol-up:hover .fa, .ls-audio-list:hover .fa, .ls-video-screen:hover .fa { color: #1FB5AD; } .ls-audio-time, .ls-audio-vol{ position: absolute; right: 10px; } .ls-video-player-wrap div.jp-video a.jp-mute, .ls-video-player-wrap div.jp-video a.jp-unmute, .ls-video-player-wrap div.jp-video a.jp-volume-max { top: 0; position: static; } .ls-audio-time div.jp-current-time, .ls-audio-time div.jp-duration{ float: none; } .ls-audio-time div.jp-duration { margin-right: 0 !important; } .ls-audio-time div.jp-current-time{ color: #ff7878; } .ls-audio-time div.jp-duration{ color: #969696; } .ls-audio-vol{ top: 15px } .ls-vol-down{ position: absolute; top: 25px; right: 75px; } .ls-vol-up{ position: absolute; top: 25px; right: 0; } .ls-audio-player .ls-audio-vol div.jp-volume-bar { left: -67px; top: 39px; } .ls-video-player-wrap div.jp-seek-bar{ background: rgba(255, 120, 120, 0.50); } .ls-video-player-wrap div.jp-play-bar { background: #ff7878; } .ls-audio-player-wrap .ls-player-playlist, .ls-video-player-wrap .ls-player-playlist{ position: relative; background-color: transparent; border-top: none; } .ls-audio-player-wrap .ls-player-playlist ul, .ls-video-player-wrap .ls-player-playlist ul{ padding: 0; margin: 0; background-color: #555557; } .ls-audio-player-wrap .ls-player-playlist ul li, .ls-video-player-wrap .ls-player-playlist ul li{ list-style: none; display: block; padding: 5px 10px; border-bottom: 1px solid #58595b; } .ls-audio-player-wrap .ls-player-playlist ul li a, .ls-video-player-wrap .ls-player-playlist ul li a{ color: #969696; } .ls-video-player-wrap .ls-player-playlist ul li a span{ color: #ff7878; } .ls-audio-player-wrap .ls-player-playlist ul li:hover a, .ls-video-player-wrap .ls-player-playlist ul li:hover a{ color: #ff7878; } .ls-video-player-wrap .ls-player-playlist ul li:hover a span{ color: #969696; } .ls-audio-player-wrap .ls-player-playlist ul li.jp-playlist-current a, .ls-video-player-wrap .ls-player-playlist ul li.jp-playlist-current a{ color:#ff7878; } .ls-video-player-wrap .ls-player-playlist ul li.jp-playlist-current a span{ color:#969696; } .ls-audio-player-wrap .ls-player-playlist ul li span.jp-free-media, .ls-video-player-wrap .ls-player-playlist ul li span.jp-free-media{ float: right; } .ls-audio-player-wrap .ls-player-playlist ul li a.jp-playlist-item-remove, .ls-video-player-wrap .ls-player-playlist ul li a.jp-playlist-item-remove{ display: block !important; float: right; margin-left: 10px; } /*-----------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- TREE VIEW ------------------------ -------------------------------------------------------------------*/ .ls-tree-view{ background: none; } .ls-tree-view > ul{ padding: 0; margin: 0; } .ls-tree-view ul li{ font-size: 14px; } .ls-tree-view li:before{ border: 2px solid #e3dfd8; } .ls-tree-view li:after { border-top: 1px solid #e3dfd8; } .ls-tree-view li:last-child:before { height: 25px; } .ls-tree-view li > span { border: 1px solid #e3dfd8; border-radius: 1px; } .ls-tree-view ul li span, .ls-tree-view ul li a{ color: #333; } .ls-tree-view li > span span.glyphicon{ color: #b4b0a9; margin-right: 5px; } .ls-tree-view li.parent_li > span > span.glyphicon{ margin-right: 10px; } .ls-tree-view li.parent_li > span:hover, .ls-tree-view li.parent_li > span:hover + ul li span { background: #E0E0E0; } .ls-tree-view .easy-tree-toolbar { background-color: inherit; position: relative; } .ls-tree-view .easy-tree-toolbar > div > button{ margin: 5px; } .ls-tree-view .easy-tree-toolbar .create{ float: left; } .ls-tree-view .easy-tree-toolbar .create .btn{ background-color: #5bc0de; border-color: #46b8da; color: #fff; float: left; } .ls-tree-view .easy-tree-toolbar .edit .btn{ background-color: #f0ad4e; border-color: #eea236; color: #fff; } .ls-tree-view .easy-tree-toolbar .remove .btn{ background-color: #ff7878; border-color: #ff7878; color: #fff; } .ls-tree-view .easy-tree-toolbar .create .input-group{ top: 0; } .ls-tree-view .easy-tree-toolbar .create .input-group-btn{ width: inherit; } .ls-tree-view .easy-tree-toolbar .create .input-group .form-control{ top: 5px; height: 30px; } .ls-tree-view .easy-tree-toolbar .create .input-group span.input-group-btn > .btn{ height: 30px; line-height: 15px; top: 5px; } /*-----MULTI NESTED LIST-------*/ .ls-animated-multi-lists ul { padding: 0em; } .ls-animated-multi-lists ul li, .ls-animated-multi-lists ul li ul li { position:relative; top:0; bottom:0; padding-bottom: 7px; } .ls-animated-multi-lists ul li ul { margin-left: 3em; position: relative; } .ls-animated-multi-lists li { list-style-type: none; } .ls-animated-multi-lists li a { padding:0 0 0 10px; position: relative; top:1em; color: #86827b ; } .ls-animated-multi-lists li a:hover { text-decoration: none; } .ls-animated-multi-lists a.addBorderBefore:before { content: ""; display: inline-block; width: 2px; height: 28px; position: absolute; left: -47px; top:-16px; border-left: 1px solid #e3dfd8; } .ls-animated-multi-lists li:before { content: ""; display: inline-block; width: 25px; height: 0; position: relative; left: 0em; top:11px; border-top: 1px solid #e3dfd8; } .ls-animated-multi-lists ul li ul li:last-child:after, .ls-animated-multi-lists ul li:last-child:after { content: ''; display: block; position: relative; } /*-------------------------------------------------------------*/ /*------------------------------------------------------------------ -------------------------- IMAGE FLUID BOX ------------------------ -------------------------------------------------------------------*/ /* Just positioning of images to introduce variety */ .ls-image-fluid-box a[data-fluidbox] { background-color: #eee; border: none; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; margin-bottom: 1.5rem; } .ls-image-fluid-box a.fluidbox-opened { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } .ls-image-fluid-box a img { display: block; margin: 0 auto; max-width: 100%; transition: all .25s ease-in-out; } .ls-image-fluid-box a[class^='float'] { margin: 1rem; margin-top: 0; width: 33.33333%; } .ls-image-fluid-box a.float-left { float: left; margin-left: 0; } .ls-image-fluid-box a.float-right { float: right; margin-right: 0; } .ls-image-fluid-box a.has-border img { border: .25em solid #111; } .ls-image-fluid-box a.has-padding img { padding: .25em; } .ls-image-fluid-box .ls-fluid-box-gallery { display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; } .ls-image-fluid-box .ls-fluid-box-gallery a { margin-bottom: 1rem; } .ls-image-fluid-box .ls-fluid-box-gallery a.col-1 { width: 100%; } .ls-image-fluid-box .ls-fluid-box-gallery a.col-2 { width: 49%; width: calc(50% - .5rem); } .ls-image-fluid-box .ls-fluid-box-gallery a.col-3 { width: 32%; width: calc(33.33333% - .66667rem); } .ls-image-fluid-box .box { background-color: #eee; border: 1px solid rgba(0,0,0,.25); box-sizing: border-box; padding-bottom: 66.66667%; position: relative; width: 100%; } .ls-image-fluid-box .box img { position: absolute; top: 2rem; left: 2rem; width: 50%; } /* Custom overlays */ .overlay-1 .fluidbox-overlay { background-color: rgba(153,145,139,.85); } .overlay-2 .fluidbox-overlay { background-color: transparent; background-image: linear-gradient(to top left, rgba(130,168,158,0.85), rgba(134,150,173,.85)); } .overlay-3 .fluidbox-overlay { background-color: #000; } .overlay-3 .fluidbox-overlay::before { background-image: url('../images/slider/pestrycake-1280x800.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: .33333; -webkit-filter: blur(4px); } .print-gym-header{display:none;} /*-------------------------------------------------------------*/