@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700); @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300); body { background: #2C3B48; font-family: 'Open Sans', sans-serif; color: #878686; line-height: 20px; font-size: 14px; text-rendering: optimizeLegibility; overflow-x:hidden; } ul{ margin:0px; padding:0px; } ul ul{ padding-left:20px; } a { color: #0781B7; } a:focus, a:active, a:hover { outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; color: #0781B7; text-decoration:none; } h1, h2, h3, h4, h5 { font-family: 'Open Sans', sans-serif; color: #2b2b2b; } .mtop10 { margin-top: 10px; } hr { border-color: #ddd; } /*--------------------------------------------*/ /* Helper clasess /*--------------------------------------------*/ .clear{ clear:both; } .p-0 { padding: 0px !important; } .p-20 { padding: 20px !important; } .p-30 { padding: 30px !important; } .p-l-0 { padding-left: 0px !important; } .p-r-0 { padding-right: 0px !important; } .p-t-0 { padding-top: 0px !important; } .p-b-0 { padding-bottom: 0px !important; } .p-t-10 { padding-top: 10px !important; } .p-b-10 { padding-bottom: 10px !important; } .p-l-r-10 { padding-left: 10px; padding-right: 10px; } .m-0 { margin: 0px !important; } .m-r-5 { margin-right: 5px !important; } .m-r-10 { margin-right: 10px !important; } .m-r-15 { margin-right: 15px !important; } .m-l-5 { margin-left: 5px !important; } .m-l-10 { margin-left: 10px !important; } .m-l-15 { margin-left: 15px !important; } .m-t-5 { margin-top: 5px !important; } .m-t-0 { margin-top: 0px !important; } .m-t-10 { margin-top: 10px !important; } .m-t-15 { margin-top: 15px !important; } .m-t-20 { margin-top: 20px !important; } .m-t-30 { margin-top: 30px !important; } .m-t-40 { margin-top: 40px !important; } .m-b-0 { margin-bottom: 0px !important; } .m-b-5 { margin-bottom: 5px !important; } .m-b-10 { margin-bottom: 10px !important; } .m-b-15 { margin-bottom: 15px !important; } .m-b-20 { margin-bottom: 20px !important; } .m-b-25 { margin-bottom: 25px !important; } .m-b-30 { margin-bottom: 30px !important; } .m-r-5{ margin-right:5px; } /*--------------------------------------------*/ /* Page titles /*--------------------------------------------*/ .page-title-box { margin: -20px -15px 20px -15px; padding: 20px; box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02); background-color: #ffffff; } .page-title-box .page-title { margin: 0; float: left; font-size: 20px; } .page-title-box .breadcrumb { background-color: transparent !important; } .breadcrumb { padding: 0; margin-bottom: 0; list-style: none; border-radius: 0; float: right; } /* Helper clasess*/ .white-box { background: #FFF; padding: 20px; float: left; width: 100%; margin-bottom:30px; } .popover-content { display: inline-block; } /*--------------------------------------------*/ /* Left Side /*--------------------------------------------*/ .left-side { width: 240px; position: absolute; top: 0; left: 0; } .sticky-left-side { position: fixed; height: 100%; overflow-y: auto; z-index: 100; } .left-side-collapsed .sticky-left-side { overflow-y: visible; } .logo { padding-top: 5px; height: 50px; } .logo a { font-size: 28px; color: #fff; margin: 16px 0 0 0px; text-decoration: none; display: inline-block; } .logo-icon { display: none; } .left-side-collapsed .logo-icon { height: 45px; margin-top: -48px; display: block !important; } .left-side-inner { padding: 0px; margin-bottom: 50px; } .left-side .searchform { display: none; } .left-side .searchform::after { content: ''; display: block; clear: both; } .left-side .searchform input { padding: 10px; width: 90%; margin: 0 0 20px 12px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: none; } .left-side .logged-user { padding: 0 0 15px 12px; margin: 0 0 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: none; } .left-side .logged-user .media-object { width: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; float: left; } .left-side .logged-user .media-body { margin-left: 60px; color: #d7d7d7; } .left-side .logged-user .media-body h4 { font-size: 15px; margin: 5px 0 0 0; } .left-side .logged-user .media-body h4 a { color: #fff; } .left-side .logged-user .media-body span { font-style: italic; font-size: 11px; opacity: 0.5; } .custom-nav { margin-bottom: 10px; } .custom-nav > li > a { color: #d8d4d4; padding: 12px 20px; border-radius: 0; -webkit-border-radius: 0; } .custom-nav > li > a:hover, .custom-nav > li > a:active, .custom-nav > li > a:focus { background-color: #353f4f !important; color: #FFF; border-radius: 0; -webkit-border-radius: 0; } /*.custom-nav > li.menu-list > a { background: transparent url(../images/plus-white.png) no-repeat 93% center; }*/ .custom-nav > li.menu-list > a:after { content: "\f067"; font-family: FontAwesome; right: 9px; position: absolute; top: 10px; color:#8E99AB; font-size:12px; } .custom-nav > li.menu-list.nav-active > a:after { content: "\f068"; font-family: FontAwesome; right: 9px; position: absolute; top: 12px; } .left-side-collapsed .custom-nav > li.menu-list > a:after{ display:none; } /*.custom-nav > li.menu-list > a:hover { background-color: #232F3A; background-image: url(../images/plus.png); } .custom-nav > li.nav-active > a { background-color: #1D2833; background-image: url(../images/minus.png); color: #FFF; }*/ .custom-nav > li.nav-active > ul { display: block; } /*.custom-nav > li.nav-active > a:hover { background-image: url(../images/minus.png); }*/ .custom-nav > li.active > a, .custom-nav > li.active > a:hover, .custom-nav > li.active > a:focus { background-color: #232F3A; color: #d8d4d4; } /*.custom-nav > li.menu-list.active > a { background-image: url(../images/plus.png); } .custom-nav > li.nav-active.active > a { background-image: url(../images/minus.png); }*/ /*.custom-nav > li.nav-active.active > a:hover { background-image: url(../images/minus.png); }*/ .custom-nav li i { font-size: 16px; vertical-align: middle; margin-right: 10px; width: 16px; text-align: center; } .custom-nav .sub-menu-list { list-style: none; display: none; margin: 0; padding: 0; background: #283541; } .custom-nav .sub-menu-list > li > a { color: #fff; font-size: 13px; display: block; padding: 10px 5px 10px 50px; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .custom-nav .sub-menu-list > li > a:hover, .custom-nav .sub-menu-list > li > a:active, .custom-nav .sub-menu-list > li > a:focus { text-decoration: none; color: #fff; background: #2a323f; } .custom-nav .sub-menu-list > li .fa { font-size: 12px; opacity: 0.5; margin-right: 5px; text-align: left; width: auto; vertical-align: baseline; } .custom-nav .sub-menu-list > li.active > a { color: #FFF; background-color: #2A323F; } .custom-nav .sub-menu-list ul { margin-left: 12px; border: 0; } .custom-nav .menu-list.active ul { display: block; } /*--------------------------------------------*/ /* Left Side Collapse /*--------------------------------------------*/ .left-side-collapsed .logo { display: none; } .left-side-collapsed .header-section { margin-left: 0px; } .left-side-collapsed .left-side { width: 52px; top: 52px; } .left-side-collapsed .left-side-inner { padding: 0; } h5.left-nav-title { margin-left: 10px; color: #fff; } .left-side-collapsed .custom-nav { margin: 2px 0 20px 0; } .left-side-collapsed .custom-nav li a { text-align: center; padding: 10px; position: relative; } .left-side-collapsed .custom-nav > li.menu-list > a { background-image: none; } .left-side-collapsed .custom-nav li a span { position: absolute; background: #283541; padding: 10px; left: 52px; top: 0; min-width: 173px; text-align: left; z-index: 100; display: none; } .left-side-collapsed .custom-nav li.active a span { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .left-side-collapsed .custom-nav ul, .left-side-collapsed .custom-nav .menu-list.nav-active ul { display: none; } .left-side-collapsed .custom-nav .menu-list.nav-hover ul { display: block; } .left-side-collapsed .custom-nav li.nav-hover a span { display: block; color: #fff; } .left-side-collapsed .custom-nav li.nav-hover.active a span { background: #65CEA7; color: #fff; } .left-side-collapsed .custom-nav li.nav-hover ul { display: block; position: absolute; top: 40px; left: 53px; margin: 0; min-width: 172px; background: #353F4F; z-index: 100; -moz-border-radius: 0 0 2px 0; -webkit-border-radius: 0 0 2px 0; border-radius: 0 0 2px 0; overflow-y: auto; } .left-side-collapsed .custom-nav ul a { text-align: left; padding: 6px 10px; padding-left: 10px; } .left-side-collapsed .custom-nav ul a:hover { background: #2A323F; } .left-side-collapsed .custom-nav li a i { margin-right: 0; } .left-side-collapsed .main-content { margin-left: 53px; } .left-side-collapsed .left-side { overflow: visible !important; } /*--------------------------------------------*/ /* Header Section /*--------------------------------------------*/ .header-section { background: #fff; border-bottom: 1px solid #eff0f4; } .header-section::after { clear: both; display: block; content: ''; } .toggle-btn { width: 52px; height: 50px; font-size: 20px; padding: 15px; cursor: pointer; float: left; color: #212121; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .toggle-btn:hover { background: #F2F2F2; color: #141313; } .searchform input { box-shadow: none; float: left; font-size: 14px; height: 35px; margin: 7px 0 0 10px; padding: 10px; width: 220px; } .searchform input:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-color: #ddd; } .menu-right { float: right; margin-right: 15px; } .notification-menu { list-style: none; } .notification-menu > li { display: inline-block; float: left; position: relative; } .notification-menu > li > a > i { margin-top: 6px; } .notification-menu .dropdown-toggle { padding: 12px 10px; border-color: #fff; background: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border: none; } .notification-menu .dropdown-toggle:hover, .notification-menu .dropdown-toggle:focus, .notification-menu .dropdown-toggle:active, .notification-menu .dropdown-toggle.active, .notification-menu .open .dropdown-toggle.dropdown-toggle { background: #f3f3f3; color: #171616; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .notification-menu .dropdown-toggle img { vertical-align: middle; margin-right: 5px; width: 26px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .notification-menu .dropdown-toggle .caret { margin-left: 5px; } .notification-menu .dropdown-menu { border: 0; margin-top: 0px; -moz-border-radius: 2px 0 2px 2px; -webkit-border-radius: 2px 0 2px 2px; border-radius: 2px 0 2px 2px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 5px; } .notification-menu .dropdown-menu li { display: block; margin: 0; float: none; background: none; padding: 0px; } .notification-menu .dropdown-menu-usermenu li { padding: 0; } .notification-menu .dropdown-menu li a { font-size: 13px; padding: 7px 10px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .notification-menu .dropdown-menu li a:hover { background: #F5F5F5; color: #3c3a3a; } .notification-menu .dropdown-menu li i { font-size: 11px; margin-right: 5px; } .notification-menu .dropdown-menu-head { padding: 0; min-width: 300px; } .notification-menu .info-number { padding: 12px 15px; height: 50px; font-size: 16px; background: #fff; color: #333; border-color: #fff; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .notification-menu .dropdown-menu-head ul { border: 1px solid #ddd; border-top: 0; padding: 0; } .notification-menu .dropdown-menu-head li a { color: #333; padding: 10px 15px; opacity: 1; } .notification-menu .dropdown-menu-head li a:hover { background: none; color: #000 !important; text-decoration: none; } .notification-menu .btn-group { margin-bottom: 0; } .dropdown-menu .last { background-color: #F8F8F8 !important; border-bottom: 0 none; } .dropdown-list li { padding: 15px; overflow: hidden; border-bottom: 1px solid #eee; } .dropdown-list li:last-child { border-bottom: 0; } .dropdown-list .thumb { width: 36px; float: left; } .dropdown-list .thumb img { width: 100%; display: block; vertical-align: middle; } .dropdown-list .desc { margin-left: 45px; display: block; } .dropdown-list .desc h5 { font-size: 13px; margin-top: 7px; } .dropdown-list li:last-child { padding: 10px 15px; } .dropdown-list li .badge { float: right; } .user-list { width: 300px; } .user-list .progress { margin-bottom: 0; } .normal-list li a .label i { margin-right: 0; } .normal-list li a span.label { float: left; margin-right: 10px; padding: 5px; width: 20px; } .normal-list li a:hover { color: #65CEA7 !important; text-decoration: none; } .normal-list li .name { font-size: 13px; font-family: 'Arial' Helvetica, sans-serif; line-height: 21px; } .normal-list li .msg { font-size: 12px; line-height: normal; color: #999; display: block; } .info-number .badge { background: #F86A5E; border-radius: 2px; -webkit-border-radius: 2px; font-size: 10px; font-weight: normal; line-height: 13px; padding: 2px 5px; position: absolute; right: 4px; top: 10px; } .notification-list { max-height: 230px; } .notification-list em { width: 30px; text-align: center; height: 30px; line-height: 28px; margin-top: 4px; } .notification-list .media-body { display: inherit; width: auto; overflow: hidden; margin-left: 50px; } .notification-list .media-body h5 { text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; font-weight: 600; overflow: hidden; font-size: 13px; } .notification-list .media-body p { font-size: 14px; } .notifi-title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 15px; text-transform: uppercase; font-weight: 600; padding: 11px 20px 15px; color: #4c5667; } .noti-primary { color: #FFF; border:1px solid #03A9F3; background:#03A9F3; } .noti-success { color: #FFF; border:1px solid #81c868; background:#81c868; } .noti-info { color: #FFF; border: 1px solid #34d3eb; background:#34d3eb; } .noti-warning { color: #FFF; border: 1px solid #ffbd4a; background:#ffbd4a; } .noti-danger { color: #FFF; border: 1px solid #f05050; background:#f05050; } .noti-dark { color: #FFF; border: 1px solid #36404a; background:#36404a; } .noti-purple { color: #7266ba; border: 1px solid #7266ba; background:#7266ba; } .noti-pink { color: #FFF; border: 2px solid #fb6d9d; background:#fb6d9d; } .noti-custom { color: #FFF; border: 1px solid #5fbeaa; background:#5fbeaa; } .noti-inverse { color: #FFF; border: 1px solid #4c5667; background:#4c5667; } .notifications.dropdown .dropdown-menu li { border-bottom: 1px solid #e3e1e1; display: block; font-size: 12px; } .notifications.dropdown .dropdown-menu .external-last { background-color: #F8F8F8; border-bottom: 0 none; } .message-list a { color: #7a7777; font-size: 13px; padding: 10px 10px; float: left; width: 100%; border-bottom: 1px solid #f3f3f3; } .message-list a:hover { background: #f3f3f380; } .message-list span.photo { width: 45px; height: 45px; float:left; } .message-list span.photo img { width: 45px; height: 45px; } .message-list span.subject { display: block; margin-left: 60px; font-weight: 600; font-size: 13px; } .message-list span.message { display: block; margin-left: 60px; white-space: initial; } .message-list span.time { margin-left: 60px; color: #aeaaaa; display: block; } /*--------------------------------------------*/ /* Sticky Header /*--------------------------------------------*/ .sticky-header .header-section { position: fixed; top: 0; left: 240px; width: 100%; z-index: 100; } .sticky-header .main-content { padding-top: 50px; } .sticky-header .menu-right { margin-right: 255px; } .sticky-header.left-side-collapsed .header-section { left: 53px; } .sticky-header.left-side-collapsed .menu-right { margin-right: 67px; } .dropdown-menu-head { background: #fff } .dropdown-menu-head .title { background: #F2F2F2; color: #292626; padding: 15px; text-transform: uppercase; font-size: 13px; margin: 0; font-weight: 600; font-size: 13px; } /*--------------------------------------------*/ /* Main content /*--------------------------------------------*/ .main-content { margin-left: 240px; background: #ECECED; } .header-title { font-size: 15px; font-weight: 600; line-height: 19px; margin-bottom: 20px; margin-top: 0; text-transform: uppercase; } .wrapper { padding: 15px; } .wrapper::after { clear: both; display: block; content: ''; margin-bottom: 30px; } /*--------------------------------------------*/ /* White Panel & Popover /*--------------------------------------------*/ .white-box { background: #FFF; padding: 20px; float: left; width: 100%; margin-bottom:30px; } .popover-content { display: inline-block; } .Popovers-wrap .btn, .tooltip-wrap .btn{ margin-bottom:10px; } /*--------------------------------------------*/ /* Button /*--------------------------------------------*/ .button-wrap .btn{ margin-bottom: 12px; margin-right: 8px; } .btn { border-radius: 0px; } .btn.round { border-radius:25px; } .btn.outline-btn { background:transparent; } .btn-label { background: rgba(0, 0, 0, 0.05); display: inline-block; margin: -6px 12px -6px -14px; padding: 7px 15px; } .round .btn-label { border-radius: 15px 0px 0px 15px; } .btn-default { background: #f8f8f8; border: 1px solid #e4e7ea; } .btn-default:hover, .btn-default:focus, .btn-default.disabled:hover, .btn-default.disabled:focus{ opacity: 0.8; background:#e4e7ea; border-color:#e4e7ea !important; } .btn-primary { background: #03a9f3; border: 1px solid #03a9f3; } .btn-primary:hover, .btn-primary:focus, .btn-primary.disabled:hover, .btn-primary.disabled:focus{ opacity: 0.8; background:#03a9f3 !important; border-color:#03a9f3 !important; } .btn-primary.outline-btn { color:#03a9f3; } .btn-primary.outline-btn:hover, .btn-primary.outline-btn:focus, .btn-success.outline-btn:hover{ background:#03a9f3; color:#FFF; opacity:1; } .btn-success { background: #81c868; border: 1px solid #81c868; } .btn-success:hover, .btn-success:focus, .btn-success.disabled:hover, .btn-success.disabled:focus{ opacity: 0.8; background:#81c868 ; border-color:#81c868 !important; } .btn-success.outline-btn { color:#81c868; } .btn-success.outline-btn:hover, .btn-success.outline-btn:focus, .btn-success.outline-btn:hover{ background:#81c868; color:#FFF; opacity:1; } .btn-info { background: #34d3eb ; border: 1px solid #34d3eb ; } .btn-info:hover, .btn-info:focus, .btn-info.disabled:hover, .btn-info.disabled:focus{ opacity: 0.8; background:#34d3eb ; border-color:#34d3eb !important ; } .btn-info.outline-btn { color:#34d3eb; } .btn-info.outline-btn:hover, .btn-info.outline-btn:focus, .btn-info.outline-btn:hover{ background:#34d3eb; color:#FFF; opacity:1; } .btn-danger { background: #f05050; border: 1px solid #f05050; } .btn-danger:hover, .btn-danger:focus, .btn-danger.disabled:hover, .btn-danger.disabled:focus{ opacity: 0.8; background:#f05050; border-color:#f05050 !important; } .btn-danger.outline-btn { color:#f05050; } .btn-danger.outline-btn:hover, .btn-danger.outline-btn:focus, .btn-danger.outline-btn:hover{ background:#f05050; color:#FFF; opacity:1; } .btn-warning { background: #ffbd4a; border: 1px solid #ffbd4a; } .btn-warning:hover, .btn-warning:focus, .btn-warning.disabled:hover, .btn-warning.disabled:focus{ opacity: 0.8; background:#ffbd4a; border-color:#ffbd4a !important; } .btn-warning.outline-btn { color:#ffbd4a; } .btn-warning.outline-btn:hover, .btn-warning.outline-btn:focus, .btn-warning.outline-btn:hover{ background:#ffbd4a; color:#FFF; opacity:1; } .btn-white { background: #FFF; border: 1px solid #eaeaea ; color: #4c5667; } .btn-white:hover, .btn-white:focus, .btn-white.disabled:hover, .btn-white.disabled:focus{ opacity: 0.8; background:#f9f9f9; border-color:#eaeaea !important; } .btn-white.outline-btn { background:transparent; border: 1px solid #a49f9f; color: #4c5667; } .btn-white:hover, .btn-white:focus, .btn-white.disabled:hover, .btn-white.disabled:focus{ opacity: 1; background:#f9f9f9; color:#4c5667; } .btn-purple { background:#7266ba; border: 1px solid #7266ba; color:#FFF; } .btn-purple:hover, .btn-purple:focus, .btn-purple.disabled:hover, .btn-purple.disabled:focus{ opacity: 0.8; background:#7266ba; border-color:#7266ba !important; color:#FFF; } .btn-purple.outline-btn { color:#7266ba; } .btn-purple.outline-btn:hover, .btn-purple.outline-btn:focus, .btn-purple.outline-btn:hover{ background:#7266ba; color:#FFF; opacity:1; } .btn-inverse { color: #fff; background-color: #12AFCB; border-color: #12AFCB; } .btn-inverse:hover, .btn-inverse.disabled:hover, .btn-inverse:focus, .btn-inverse.disabled:focus{ background: #03a9f3; opacity: 0.8; border: 1px solid #03a9f3 !important; color:#FFF; } .btn-inverse.outline-btn { color:#03a9f3; } .btn-inverse.outline-btn:hover, .btn-inverse.outline-btn:focus, .btn-inverse.outline-btn:hover{ background:#03a9f3; color:#FFF; opacity:1; } .btn-pink{ color: #fff; background-color: #fb6d9d ; border-color: #fb6d9d ; } .btn-pink:hover, .btn-pink:focus, .btn-pink.disabled:hover, .btn-pink.disabled:focus{ opacity: 0.8; background:#fb6d9d; border-color:#fb6d9d !important; color:#FFF; } .btn-pink.outline-btn { color:#fb6d9d; } .btn-pink.outline-btn:hover, .btn-pink.outline-btn:focus, .btn-pink.outline-btn:hover{ background:#fb6d9d; color:#FFF; opacity:1; } .fileupload { overflow: hidden; position: relative; } .fileupload input.upload { cursor: pointer; filter: alpha(opacity=0); font-size: 20px; margin: 0; opacity: 0; padding: 0; position: absolute; right: 0; top: 0; } .btn-facebook { color: #ffffff !important; background-color: #3b5998 !important; } .btn-twitter { color: #ffffff !important; background-color: #00aced !important; } .btn-linkedin { color: #ffffff !important; background-color: #007bb6 !important; } .btn-dribbble { color: #ffffff !important; background-color: #ea4c89 !important; } .btn-googleplus { color: #ffffff !important; background-color: #dd4b39 !important; } .btn-instagram { color: #ffffff !important; background-color: #517fa4 !important; } .btn-pinterest { color: #ffffff !important; background-color: #cb2027 !important; } .btn-dropbox { color: #ffffff !important; background-color: #007ee5 !important; } .btn-flickr { color: #ffffff !important; background-color: #ff0084 !important; } .btn-tumblr { color: #ffffff !important; background-color: #32506d !important; } .btn-skype { color: #ffffff !important; background-color: #00aff0 !important; } .btn-youtube { color: #ffffff !important; background-color: #bb0000 !important; } .btn-github { color: #ffffff !important; background-color: #171515 !important; } /*--------------------------------------------*/ /* label /*--------------------------------------------*/ .label-warning { background-color: #f0a015; } .label { display: inline-block; padding: 5px 16px 6px; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 20px; min-width: 100px; } /*--------------------------------------------*/ /* Progressbars /*--------------------------------------------*/ .progress { -webkit-box-shadow: none !important; background-color: #e1e1e1; box-shadow: none !important; height: 10px; margin-bottom: 18px; overflow: hidden; } .progress-bar { box-shadow: none; font-size: 8px; font-weight: 600; line-height: 12px; } .progress.progress-sm { height: 5px !important; } .progress.progress-sm .progress-bar { font-size: 8px; line-height: 5px; } .progress.progress-md { height: 15px !important; } .progress.progress-md .progress-bar { font-size: 10.8px; line-height: 14.4px; } .progress.progress-lg { height: 20px !important; } .progress.progress-lg .progress-bar { font-size: 12px; line-height: 20px; } .progress-bar-primary { background-color: #6a76fc; } .progress-bar-success { background-color: #00b19d; } .progress-bar-info { background-color: #3ddcf7; } .progress-bar-warning { background-color: #ffaa00; } .progress-bar-danger { background-color: #ef5350; } .progress-bar-inverse { background-color: #4c5667; } .progress-bar-purple { background-color: #7266ba; } .progress-bar-pink { background-color: #f76397; } .progress-animated { -webkit-animation-duration: 5s; -webkit-animation-name: animationProgress; -webkit-transition: 5s all; animation-duration: 5s; animation-name: animationProgress; transition: 5s all; } /*--------------------------------------------*/ /* Pagination and data table /*--------------------------------------------*/ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #5f5f5f !important; border: 1px solid #ebebeb; background: #f1f1f1 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:active, .dataTables_wrapper .dataTables_paginate .paginate_button:focus, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #5f5f5f !important; border: 1px solid transparent; background: #f7f7f7 !important; box-shadow: none; } table.dataTable tfoot th, table.dataTable tfoot td { padding: 10px 18px 6px 18px; border-top: 1px solid transparent; } table.dataTable thead th, table.dataTable thead td { padding: 10px 18px; border-bottom: 1px solid #e6e3e3; } .table > thead > tr > th{ color: #6b6a6a; font-weight: 600; font-size: 14px; } /*--------------------------------------------*/ /* Icons /*--------------------------------------------*/ .icon-list-demo div { cursor: pointer; line-height: 38px; white-space: nowrap; color: #75798B; } .icon-list-demo{ margin-bottom:30px; } .icon-list-demo.material i{ display:block; } .icon-list-demo div:hover { color: #ffffff; } .icon-list-ion i{ font-size:15px; -webkit-transition: all 0.2s; } .icon-list-ion div{ min-height:100px; max-height:100px; padding:10px; } .icon-list-ion div:hover{ background-color: #03a9f3; color:#FFF; cursor: pointer; } .icon-list-ion div:hover i{ font-size:40px; } .icon-list-demo div p { margin-bottom: 0px; line-height: inherit; } .icon-list-demo i { -webkit-transition: all 0.2s; display: inline-block; font-size: 15px; margin: 0; text-align: center; transition: all 0.2s; vertical-align: middle; width: 40px; } .icon-list-demo .col-md-4 { -webkit-border-radius: 3px; border-radius: 3px; -moz-border-radius: 3px; background-clip: padding-box; } .icon-list-demo .col-md-4:hover { background-color: #03a9f3; } .icon-list-demo .col-md-4:hover i { -o-transform: scale(2); -webkit-transform: scale(2); moz-transform: scale(2); transform: scale(2); } .icon-list-demo.material div{ font-size:13px !important; line-height: 30px; margin-bottom: 20px; } /*--------------------------------------------*/ /* Range Slider /*--------------------------------------------*/ .bg-primary { color: #fff; background-color: #337ab7 !important; background-image: none !important; } .bg-red { border-color: #cb5a5e !important; background-image: none !important; background-color: #cb5a5e !important; color: #FFFFFF !important; } .bg-blue { border-color: #3598dc !important; background-image: none !important; background-color: #3598dc !important; color: #FFFFFF !important; } .bg-green { border-color: #26a69a !important; background-image: none !important; background-color: #26a69a !important; color: #FFFFFF !important; } .bg-purple { border-color: #8e5fa2 !important; background-image: none !important; background-color: #8e5fa2 !important; color: #FFFFFF !important; } .bg-yellow { border-color: #c49f47 !important; background-image: none !important; background-color: #c49f47 !important; color: #FFFFFF !important; } .bg-green { border-color: #26a69a !important; background-image: none !important; background-color: #26a69a !important; color: #FFFFFF !important; } .slider { border: 0; padding: 0; display: block; margin: 12px 5px; min-height: 11px; } /*--------------------------------------------*/ /* Mail /*--------------------------------------------*/ .mailbox-nav-main{ background: #FFF; padding: 10px; box-shadow: 0px 0px 2px #cbc7c7; } .mailbox-nav{ background: #dddddd4d; } .mailbox-nav li a { display: block; padding: 15px 7px 6px 16px; color: #353333; text-decoration: none; border-bottom: 1px solid #CCC; overflow: hidden; } .mailbox-nav .active a, .mailbox-nav li a:hover { background: #ECECEC; border-color: #EAEEF1; } .mailbox-nav li a i { margin-right:5px } .icon-state-warning { color: #f6d433; } .mailbox-content { background:#fff; padding:15px } .mailbox-header { margin-bottom:20px } .mailbox-header h2 { margin:3px 0 } .note-editor { border: 1px solid #DCE1E4; border-radius: 0; } .mail-hidden-options{ display:inline-block; } .mailbox-content { overflow:hidden } .mailbox-content table thead tr th { border-bottom:1px solid #ddd } .mailbox-content table tbody tr td { cursor:pointer } .mailbox-content table tbody tr:hover { background:#FAFAFA } .mailbox-content table tbody tr.read { background:#F9F9F9; color:#7F7F7F } .mailbox-content table tbody tr.checked { background:#FFC } .badge.badge-success { background: #03a9f3; color: #FFF; } .message-header { overflow:hidden; border-bottom:1px solid #f1f1f1; padding:5px 0 15px; margin-bottom:10px } .message-header h3 { float: left; font-size: 14px; margin: 0; color: #2b2b2b; font-weight: 600; } .message-header p { float:right; margin:0 } .message-sender { overflow:hidden; border-bottom:1px solid #f1f1f1; padding:0 0 5px; margin-bottom:10px } .message-sender img { width:30px; border-radius:50%; display:inline-block; margin-right:5px } .message-sender p { display:inline-block } .message-sender span { color:#7F7F7F } .message-content { overflow:hidden; border-bottom:1px solid #f1f1f1; padding:0 0 5px; margin-bottom:10px } .message-attachments { overflow:hidden; border-bottom:1px solid #f1f1f1; padding:0 0 15px; margin-bottom:10px } .message-attachment { position:relative; width:200px; float:left; margin-right:10px; border:1px solid #f1f1f1 } .message-attachment a { text-decoration:none } .message-attachment img { display:block; width:100% } .attachment-info { background:#f9f9f9; padding:10px } .attachment-info p { margin:0 } .attachment-info span { font-size:11px; color:#aaa } .compose-message { overflow: hidden; padding: 0 0 10px; float: left; width: 100%; } .compose-options { width:100%; overflow:hidden; display:block } .note-editor { border:1px solid #DCE1E4; border-radius:0 } .note-dialog .note-modal-form { margin:0 15px } .note-editor .note-toolbar { border-bottom: 0; background: transparent; padding: 10px; } .note-popover .popover .popover-content>.btn-group,.note-toolbar>.btn-group { margin-top:0 } .note-editor .note-editable { overflow: auto; min-height: 200px; outline: 0; padding: 10px; } .note-editor .note-statusbar { background:0 0 } .note-editor .note-statusbar .note-resizebar { border:0 } div.checker span { display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; background-position: 0 -260px; } /*--------------------------------------------*/ /* dashboard2 /*--------------------------------------------*/ .analytics-box{ } .analytics-box .analytics-info{ } .analytics-box .analytics-info{ margin-top: 15px; } .analytics-box h3 { font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 0; } .analytics-box .analytics-info .analytics-stats { float: left; margin-top: 12px; margin-right: 30px; font-size: 22px; font-weight: 400; color: #3E3B3B; } .analytics-box .analytics-info span{ float: right; } .progress-main { margin-bottom: 20px; font-size: 15px; float: left; width: 100%; } .progress-main .progress { margin-top: 16px; float: left; width: 100%; font-size: 18px; } .progress-main .progress-text { float: left; color: #2b2b2b; } .progress-main .progress-stats { float: right; color: #2d2c2c; } /*Todo list*/ .todo-list li { list-style: none; margin-bottom: 24px; } .list-task .task-done span { text-decoration: line-through; } .list-task .task-done { text-decoration: line-through; } /*feeds*/ .bg-primary { background-color: #03a9f3 !important; } .bg-success { background-color: #81c868 !important; } .bg-info { background-color: #34d3eb !important; } .bg-warning { background-color: #ffbd4a !important; } .bg-danger { background-color: #f05050 !important; } .feeds-box{ margin-bottom: 35px; } .feeds-box .feeds-icon { width: 40px; height: 40px; background: #ccc; text-align: center; line-height: 40px; border-radius: 50%; color:#FFF; position: absolute; } .feeds-box .feeds-info{ margin-left: 56px; } .feeds-box .feeds-info h5{ margin: 0; } .feeds-box .feeds-info span { color: #989595; } .Browser_stats li { display: block; margin-bottom: 10px; border-bottom: 1px solid #dedede; padding-bottom: 26px; } .Browser_stats li .browser-info{ } .Browser_stats li .browser-info img{ height: 20px; width: 20px; margin-right: 15px; } .Browser_stats li .broser-stats { float: right; color: #8a8f92; } /*--------------------------------------------*/ /* dashboardd /*--------------------------------------------*/ .info-box-main { background: #FFF; padding: 15px 12px; position: relative; margin-bottom: 30px; } .info-box-main .info-icon { width: 50px; position: absolute; top: 10px; right: 0; line-height: 50px; font-size: 25px; color: #575555; } .info-box-main .info-stats { margin-right: 50px; } .info-box-main .info-stats p { font-size: 20px; margin-bottom: 0; color: #3E3B3B; font-weight: 400; } .info-box-main .info-stats span { margin: 5px 0px 13px; display: inline-block; color: #727070; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; } .info-box-progress{ } .info-box-progress .progress { height: 5px; margin-bottom: 0; } /*inbox-widget-----*/ .inbox-inner { float: left; width: 100%; margin-bottom: 15px; border-bottom: 1px solid #efefef; padding-bottom: 14px; } .mailbox-content .table > tbody > tr > td{ vertical-align: middle; } .mailbox-content .checkbox{ margin-bottom: 0; } .inbox-inner:last-child { border-bottom:0px; margin-bottom:0px; padding-bottom: 0px; } .inbox-img { width: 50px; float: left; } .inbox-img img{ border-radius:50%; width:50px; height:50px; } .inbox-item-info { margin-left: 60px; position: relative; } .inbox-item-info .author { font-size: 14px; color: #2b2b2b; margin-bottom: 0; font-family: 'Open Sans', sans-serif; font-weight: 600; } .inbox-item-info .inbox-message { margin-bottom: 0px; color: #7e7c7c; } .inbox-item-info .inbox-date { position: absolute; top: -7px; right: 0; color: #7d7979; } .inbox-inner a:hover, .inbox-inner a:focus, .inbox-inner a:visited{ text-decoration:none !important; } /*time line*/ .timeline { padding: 0; margin: 5px 0 15px; list-style: none; position: relative; } .timeline-compact::after, .timeline-compact::before, .timeline-compact > li.latest::before { background-color: #4285F4; } .timeline-compact > li { padding-bottom: 35px; } .timeline > li { display: block; position: relative; padding-left: 30px; padding-bottom: 16px; } .timeline { list-style: none; } .timeline-compact > li::before { border: 1px solid #f6c163; } .timeline > li::before { content: ""; position: absolute; left: 0; top: 2px; height: 16px; width: 16px; background-color: #fff; border-radius: 50%; border: 1px solid #4285f4; } .timeline-compact .timeline-date { float: right; text-transform: capitalize; margin-bottom: 0; line-height: 22px; } .timeline-compact .timeline-title { font-size: 14px; font-weight: 600; font-family: 'Open Sans', sans-serif; color: #2b2b2b; } .timeline-compact .timeline-description { color: #737373; margin-top: 4px; } .timeline::after, .timeline::before { position: absolute; background-color: #4285f4; content: ""; } .timeline::before { left: 7px; top: 2px; height: 100%; width: 2px; } /*chat widget*/ .inbox-scroll-list{ height:330px; } .chat-scroll-list{ height:300px; } .chat-widget ul { margin:0px; padding:0px; } .chat-widget ul li { list-style: none; margin-bottom: 20px; } .chat-widget ul li.left img { float: left; } .chat-widget ul li.right img{ float: right; } .chat-widget ul li img { height: 45px; width: 45px; border-radius: 50%; } .chat-widget ul li.left .chat-info { background: #03A9F3; padding: 10px; margin-left: 65px; } .chat-widget ul li.left .name , .chat-widget ul li.left .chat-info .message, .chat-widget ul li.left .chat-info .name, .chat-widget ul li.left .chat-info .datetime { color:#FFF; } .chat-widget ul li.right .chat-info { background: #F0F0F0; padding: 10px; margin-right: 65px; } .chat-widget ul li .chat-info .name { color: #565353; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 15px; } .chat-widget ul li .chat-info .datetime { color: #8f8b8b; } .chat-widget ul li .chat-info .message{ display: inline-block; } .form-control { border-radius: 0; box-shadow: none; border: 1px solid #c5bebe; } .form-control:focus { border-radius: 0; box-shadow: none; border: 1px solid #969191; } /*--------------------------------------------*/ /* chart /*--------------------------------------------*/ #flotTip { padding: 8px 12px; background-color: #36404a; z-index: 100; color: #ffffff; opacity: 0.9; font-size: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .canvas-chart { position: relative; } .has-doughnut-legend { margin-right: 80px; } ul.doughnut-legend { padding: 0; margin: 0; list-style: none; position: absolute; top: 30px; right: 28px; font-size: 13px; } ul.doughnut-legend li span { display: inline-block; height: 10px; width: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; vertical-align: middle; margin: 0 8px 2px 0; } .jqstooltip { background-color: rgba(43, 48, 58, 0.8); padding: 3px 5px 5px 5px; min-height: 16px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .jqstooltip { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /*--------------------------------------------*/ /* Form /*--------------------------------------------*/ .form-group{ float:left; width:100%; } .bootstrap-tagsinput input { border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 0; background-color: transparent; padding: 0; margin: 0; width: auto !important; max-width: inherit; } .bootstrap-tagsinput { display: block; width: 100%; min-height: 32px; padding: 1px 3px; font-size: 13px; line-height: 1.428571429; color: #262626; vertical-align: middle; background-color: #fff; border: 1px solid #ccc; border-radius: 0; } .bootstrap-tagsinput .tag { color: #fff; position: relative; margin: 3px 0 3px 2px; display: inline-block; -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box; } .bootstrap-tagsinput > span { font-weight: 400; padding: 4px 28px 4px 8px; font-size: 13px; border: 1px solid #2dc3e8; background: #2dc3e8; } .bootstrap-tagsinput .tag [data-role="remove"] { display: block; top: -1px; right: 0; padding: 3px 4px 3px 5px; width: 23px; height: 22px; position: absolute; cursor: pointer; } .bootstrap-tagsinput .tag [data-role="remove"]::after { content: ""; font-family: fontAwesome; padding: 2px 1px; line-height: 16px; font-size: 14px; text-align: center; zoom: 1; filter: alpha(opacity=70); -webkit-opacity: .7; -moz-opacity: .7; opacity: .7; } .ms-selectable .search-input, .ms-selection .search-input { margin-bottom: 10px; } /*--------------------------------------------*/ /* dropzone /*--------------------------------------------*/ .dropzone { min-height: 230px; border: 2px dashed rgba(0, 0, 0, 0.3); background: white; border-radius: 6px; } .dropzone .dz-message { font-size: 30px; } .dropzone .dz-message { text-align: center; } .has-success .form-control { border-color: #4cae4c; box-shadow: none !important; } .has-warning .form-control { border-color: #f0ad4e; box-shadow: none !important; } .has-error .form-control { border-color: #f05050; box-shadow: none !important; } /*--------------------------------------------*/ /* Wizard /*--------------------------------------------*/ .wizard > .content { background: #ffffff; min-height: 240px; } .wizard > .content > .body { padding: 0px; position: relative; } .wizard > .content > .body input { border: 1px solid #E3E3E3; } .wizard > .content > .body ul > li { display: block; line-height: 30px; } .wizard > .content > .body label.error { color: #f05050; margin-left: 0; } .wizard > .content > .body label { display: inline-block; margin-top: 10px; } .wizard > .steps .number { display: inline-block; } .wizard > .steps .disabled a { background: #ffffff; color: #333333; cursor: default; border: 1px solid #eaeaea; } .wizard > .steps .disabled a:hover { background: #f9f9f9; color: #333333; cursor: default; border: 1px solid #eaeaea; } .wizard > .steps .disabled a:active { background: #f9f9f9; color: #333333; cursor: default; border: 1px solid #eaeaea; } .wizard > .steps .current a { background: #03A9F3; } .wizard > .steps .current a:hover { background: #139AD7; } .wizard > .steps .current a:hover .number { color: #ffffff; } .wizard > .steps .current a:active { background: #5fbeaa; } .wizard > .steps .current a:active .number { color: #ffffff; } .wizard > .steps .current a .number { color: #ffffff; } .wizard > .steps .done a { background: #5D5F62; } .wizard > .steps .done a:hover { background: #7a8c9a; } .wizard > .steps .done a:active { background: #7a8c9a; } .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active, .wizard > .content { border-radius: 2px; } .wizard > .actions a { background: #03A9F3; border-radius: 2px; color: #ffffff; } .wizard > .actions a:hover { background:#119CDA; border-radius: 2px; color: #ffffff; } .wizard > .actions a:active { background: #5fbeaa; border-radius: 2px; color: #ffffff; } .wizard > .actions .disabled a { background: #ffffff; color: #333333; cursor: default; border: 1px solid #eaeaea; } .wizard > .actions .disabled a:hover { background: #f9f9f9; color: #333333; cursor: default; border: 1px solid #eaeaea; } .wizard > .actions .disabled a:active { background: #f9f9f9; color: #333333; cursor: default; border: 1px solid #eaeaea; } /*--------------------------------------------*/ /* image crop /*--------------------------------------------*/ .img-preview { height: 150px; width: 220px; overflow: hidden; } /*--------------------------------------------*/ /* Panel /*--------------------------------------------*/ .panel-wrap{ margin-bottom:30px; } .panel { margin-bottom: 20px; } .panel-color .panel-title { color: #ffffff; } .panel-footer { background: #f4f8fb; border-top: 0px; } .panel-heading , .panel{ border-radius:0px; } .panel-heading { padding: 12px 15px; } .panel-primary { border-color:#03A9F3; } .panel-default { border-color:#F4F8FB; } .panel-success { border-color: #81C868; } .panel-danger { border-color: #F05050; } .panel-info { border-color: #34D3EB; } .panel-warning { border-color: #FFBD4A; } .panel-purple { border-color: #7266BA; } .panel-inverse { border-color: #12AFCB; } .panel-pink { border-color: #d2245c; } .panel-default > .panel-heading { color: #333; background-color: #F4F8FB; border-color: #DEE2E4; } .panel-primary > .panel-heading { background-color: #03a9f3; border-color: #03a9f3; } .panel-success > .panel-heading { background-color: #81c868; } .panel-info > .panel-heading { background-color: #34d3eb; } .panel-warning > .panel-heading { background-color: #ffbd4a; } .panel-danger > .panel-heading { background-color: #f05050; } .panel-purple > .panel-heading { background-color: #7266ba; } .panel-pink > .panel-heading { background-color: #d2245c; } .panel-inverse > .panel-heading { background-color: #12AFCB; } .panel.panel-border{ border:none; } .panel-border .panel-heading { background-color: #ffffff; border-top: 3px solid #DADFE2 !important; padding: 10px 20px 0px; border-bottom: 0px; border-radius: 0; } .panel-border .panel-body { padding: 15px 20px 20px 20px; } .panel-border.panel-custom .panel-heading { border-color: #5fbeaa !important; color: #5fbeaa !important; } .panel-border.panel-primary .panel-heading { border-color: #5d9cec !important; color: #5d9cec !important; } .panel-border.panel-success .panel-heading { border-color: #81c868 !important; color: #81c868 !important; } .panel-border.panel-info .panel-heading { border-color: #34d3eb !important; color: #34d3eb !important; } .panel-border.panel-warning .panel-heading { border-color: #ffbd4a !important; color: #ffbd4a !important; } .panel-border.panel-danger .panel-heading { border-color: #f05050 !important; color: #f05050 !important; } .panel-border.panel-purple .panel-heading { border-color: #7266ba !important; color: #7266ba !important; } .panel-border.panel-pink .panel-heading { border-color: #d2245c !important; color: #fb6d9d !important; } .panel-border.panel-inverse .panel-heading { border-color: #4c5667 !important; color: #4c5667 !important; } /*--------------------------------------------*/ /* Tabs /*--------------------------------------------*/ .tab-content{ background: #FFF; padding: 30px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { cursor: default; background-color: #FFF; border: 1px solid #F8F8F8; border-bottom-color: transparent; } .nav-tabs { border-bottom: 1px solid #F8F8F8; } .nav-tabs > li > a { margin-right: 2px; line-height: 22px; border: 1px solid transparent; border-radius: 0; padding: 12px 25px; color: #4b4a4a; } .nav-tabs > li > a:hover { border-color: #eee #eee #F8F8F8; } .nav-tabs.tabs-border { } .nav-tabs.tabs-border > li > a{ border-bottom: 2px solid transparent; background:transparent !important; } .nav-tabs.tabs-border > li.active > a, .nav-tabs.tabs-border > li.active > a:focus, .nav-tabs.tabs-border > li.active > a:hover { border: 0; border-bottom: 2px solid #03a9f3; color: #03a9f3; background:transparent !important; } .vertical-tabs-main .vertical-tabs { display: table-cell; min-width: 120px; vertical-align: top; width: 150px; border: 0; background:#EBEFF2; } .vertical-tabs-main .tab-content { background: #ffffff; display: table-cell; margin-bottom: 30px; padding: 30px; vertical-align: top; } .vertical-tabs-main .vertical-tabs.nav-tabs > li { float: none; } vertical-tabs-main .vertical-tabs. .nav > li > a { border: 1px solid transparent !important; padding: 12px 12px; background: #F5F5F5; } .vertical-tabs-main .nav-tabs > li.active > a, .vertical-tabs-main .nav-tabs > li > a:hover, .vertical-tabs-main .nav-tabs > li.active > a:focus, .vertical-tabs-main .nav-tabs > li.active > a:hover { background: #FFF; } .panel-group .panel-default > .panel-heading { color: #333; background-color: #FFF; border-color: #FFF; border-radius: 0; padding: 14px 15px; } .panel-group .panel .panel-heading a[data-toggle="collapse"] { display: block; } .panel-group .panel .panel-heading a.collapsed[data-toggle="collapse"]::before { content: '\f106'; } .panel-group .panel .panel-heading a[data-toggle="collapse"]::before { content: '\f107'; display: block; float: right; font-family: 'FontAwesome'; font-size: 14px; text-align: right; width: 25px; } /*--------------------------------------------*/ /* Checkbox and Radio /*--------------------------------------------*/ .checkbox { padding-left: 20px; } .checkbox label { display: inline-block; padding-left: 5px; position: relative; } .checkbox, .radio { margin-top: 0; } .checkbox label::before { -o-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; background-color: #ffffff; border-radius: 1px; border: 1px solid #c0bfbf; content: ""; display: inline-block; height: 17px; left: 0; margin-left: -20px; position: absolute; transition: 0.3s ease-in-out; width: 17px; outline: none !important; } .checkbox label::after { color: #817D7D; display: inline-block; font-size: 11px; height: 16px; left: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; position: absolute; top: 0; width: 16px; } .checkbox.primary label::after, .checkbox.success label::after, .checkbox.info label::after, .checkbox.warning label::after, .checkbox.danger label::after, .checkbox.purple label::after, .checkbox.pink label::after, .checkbox.inverse label::after{ color: #FFF; } .checkbox input[type="checkbox"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:focus + label::before { outline-offset: -2px; outline: none; outline: thin dotted; } .checkbox input[type="checkbox"]:checked + label::after { content: "\f00c"; font-family: 'FontAwesome'; } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #e4e7ea; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox.checkbox-single label { height: 17px; } .checkbox.default input[type="checkbox"]:checked+label:before { background:#EBECF0; border-color:#EBECF0; color:#FFF !important; } .checkbox.primary input[type="checkbox"]:checked+label:before { background:#188ae2; border-color:#188ae2; color:#FFF !important; } .checkbox.success input[type="checkbox"]:checked+label:before { background:#00bf4f; border-color:#00bf4f; color:#FFF; } .checkbox.info input[type="checkbox"]:checked+label:before { background:#00aeff; border-color:#00aeff; color:#FFF; } .checkbox.warning input[type="checkbox"]:checked+label:before { background:#ffa000; border-color:#ffa000; color:#FFF; } .checkbox.danger input[type="checkbox"]:checked+label:before { background:#f60e0e; border-color:#f60e0e; color:#FFF; } .checkbox.purple input[type="checkbox"]:checked+label:before { background:#5b69bc; border-color:#5b69bc; color:#FFF; } .checkbox.pink input[type="checkbox"]:checked+label:before { background:#ff8acc; border-color:#ff8acc; color:#FFF; } .checkbox.inverse input[type="checkbox"]:checked+label:before { background:#212121; border-color:#212121; color:#FFF; } .checkbox.circled label:before { -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100% } /* Radios */ .radio { padding-left: 20px; } .radio label { display: inline-block; padding-left: 5px; position: relative; } .radio label::before { -o-transition: border 0.5s ease-in-out; -webkit-transition: border 0.5s ease-in-out; background-color: #ffffff; border-radius: 50%; border: 1px solid rgba(42, 43, 44, 0.39); content: ""; display: inline-block; height: 17px; left: 0; margin-left: -20px; position: absolute; transition: border 0.5s ease-in-out; width: 17px; outline: none !important; } .radio label::after { -moz-transition: -moz-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); -o-transition: -o-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33); -webkit-transform: scale(0, 0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33); background-color: #2b2b2b; border-radius: 50%; content: " "; display: inline-block; height: 7px; left: 5px; margin-left: -20px; position: absolute; top: 5px; transform: scale(0, 0); transition: transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33); width: 7px; } .radio input[type="radio"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; } .radio input[type="radio"]:disabled + label { opacity: 0.65; } .radio input[type="radio"]:focus + label::before { outline-offset: -2px; outline: 5px auto -webkit-focus-ring-color; outline: thin dotted; } .radio input[type="radio"]:checked + label::after { -ms-transform: scale(1, 1); -o-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio.radio-single label { height: 17px; } .radio-primary input[type="radio"] + label::after { background-color: #ab8ce4; } .radio-primary input[type="radio"]:checked + label::before { border-color: #ab8ce4; } .radio-primary input[type="radio"]:checked + label::after { background-color: #ab8ce4; } .radio-danger input[type="radio"] + label::after { background-color: #fb9678; } .radio-danger input[type="radio"]:checked + label::before { border-color: #fb9678; } .radio-danger input[type="radio"]:checked + label::after { background-color: #fb9678; } .radio-info input[type="radio"] + label::after { background-color: #03a9f3; } .radio-info input[type="radio"]:checked + label::before { border-color: #03a9f3; } .radio-info input[type="radio"]:checked + label::after { background-color: #03a9f3; } .radio-warning input[type="radio"] + label::after { background-color: #fec107; } .radio-warning input[type="radio"]:checked + label::before { border-color: #fec107; } .radio-warning input[type="radio"]:checked + label::after { background-color: #fec107; } .radio-success input[type="radio"] + label::after { background-color: #00c292; } .radio-success input[type="radio"]:checked + label::before { border-color: #00c292; } .radio-success input[type="radio"]:checked + label::after { background-color: #00c292; } .radio-purple input[type="radio"] + label::after { background-color: #9675ce; } .radio-purple input[type="radio"]:checked + label::before { border-color: #9675ce; } .radio-purple input[type="radio"]:checked + label::after { background-color: #9675ce; } .radio-red input[type="radio"] + label::after { background-color: #fb9678; } .radio-red input[type="radio"]:checked + label::before { border-color: #fb9678; } .radio-red input[type="radio"]:checked + label::after { background-color: #fb9678; } /*--------------------------------------------*/ /* alert and notification /*--------------------------------------------*/ .top-center-fullwidth .jq-toast-wrap { left: 0 !important; right: 0 !important; width: 100% !important; top: 0 !important; } .bottom-center-fullwidth .jq-toast-wrap { left: 0 !important; right: 0 !important; width: 100% !important; bottom: 0 !important; } .jq-toast-wrap .jq-toast-single { color: #fff; border-radius: 0; margin: 0; } .jq-toast-wrap .jq-toast-single.jq-has-icon { padding: 13px 10px 13px 50px; } .jq-toast-wrap .jq-toast-single .jq-toast-loader { border-radius: 0; } .alert-success { color: #FFF; background-color: #81c868; border-color: #81c868; } .alert-info { color: #FFF; background-color: #34d3eb; border-color: #34d3eb; } .alert-warning { color: #FFF; background-color: #ffbd4a; border-color: #ffbd4a; } .alert-danger { color: #FFF; background-color: #f05050; border-color: #f05050; } .alert .close { filter: alpha(opacity=20); opacity: .5; } /*--------------------------------------------*/ /* Sweet Alerts /*--------------------------------------------*/ .white-box.alert-box { text-align: center; padding: 56px 20px !important; } .white-box.alert-box p{ margin-bottom:20px; } .sweet-overlay { background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 1050; } .sweet-alert { background-color: #fff; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 2000; } @media all and (max-width: 767px) { .sweet-alert { width: auto; margin-left: 0; margin-right: 0; left: 15px; right: 15px; } } .sweet-alert .icon { width: 80px; height: 80px; border: 4px solid gray; border-radius: 50%; margin: 20px auto; position: relative; box-sizing: content-box; } .sweet-alert .icon.error { border-color: #db5565; } .sweet-alert .icon.error .x-mark { position: relative; display: block; } .sweet-alert .icon.error .line { position: absolute; height: 5px; width: 47px; background-color: #db5565; display: block; top: 37px; border-radius: 2px; } .sweet-alert .icon.error .line.left { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: 17px; } .sweet-alert .icon.error .line.right { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: 16px; } .sweet-alert .icon.warning { border-color: #f4ad49; } .sweet-alert .icon.warning .body { position: absolute; width: 5px; height: 47px; left: 50%; top: 10px; border-radius: 2px; margin-left: -2px; background-color: #f4ad49; } .sweet-alert .icon.warning .dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; left: 50%; bottom: 10px; background-color: #f4ad49; } .sweet-alert .icon.info { border-color: #29b6d8; } .sweet-alert .icon.info::before { content: ""; position: absolute; width: 5px; height: 29px; left: 50%; bottom: 17px; border-radius: 2px; margin-left: -2px; background-color: #29b6d8; } .sweet-alert .icon.info::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; top: 19px; background-color: #29b6d8; } .sweet-alert .icon.success { border-color: #51bf87; } .sweet-alert .icon.success::before, .sweet-alert .icon.success::after { content: ''; border-radius: 50%; position: absolute; width: 60px; height: 120px; background: white; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .icon.success::before { border-radius: 120px 0 0 120px; top: -7px; left: -33px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 60px 60px; -ms-transform-origin: 60px 60px; transform-origin: 60px 60px; } .sweet-alert .icon.success::after { border-radius: 0 120px 120px 0; top: -11px; left: 30px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0px 60px; -ms-transform-origin: 0px 60px; transform-origin: 0px 60px; } .sweet-alert .icon.success .placeholder { width: 80px; height: 80px; border: 4px solid rgba(81, 191, 135, 0.2); border-radius: 50%; box-sizing: content-box; position: absolute; left: -4px; top: -4px; z-index: 2; } .sweet-alert .icon.success .fix { width: 5px; height: 90px; background-color: #fff; position: absolute; left: 28px; top: 8px; z-index: 1; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .icon.success .line { height: 5px; background-color: #51bf87; display: block; border-radius: 2px; position: absolute; z-index: 2; } .sweet-alert .icon.success .line.tip { width: 25px; left: 14px; top: 46px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .icon.success .line.long { width: 47px; right: 8px; top: 38px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .icon.custom { background-size: contain; border-radius: 0; border: none; background-position: center center; background-repeat: no-repeat; } .sweet-alert .btn-default { margin-right: 10px; } .sweet-alert .btn-default:focus { border-color: #e8e8e8; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(232, 232, 232, 0.6); } .sweet-alert .btn-success { margin-right: 10px; } .sweet-alert .btn-success:focus { border-color: #51bf87; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(81, 191, 135, 0.6); } .sweet-alert .btn-info { margin-right: 10px; } .sweet-alert .btn-info:focus { border-color: #29b6d8; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(41, 182, 216, 0.6); } .sweet-alert .btn-danger { margin-right: 10px; } .sweet-alert .btn-danger:focus { border-color: #db5565; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(219, 85, 101, 0.6); } .sweet-alert .btn-warning { margin-right: 10px; } .sweet-alert .btn-warning:focus { border-color: #f4ad49; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 173, 73, 0.6); } .sweet-alert button::-moz-focus-inner { border: 0; } @-webkit-keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-tranform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-tranform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } .showSweetAlert { -webkit-animation: showSweetAlert 0.3s; animation: showSweetAlert 0.3s; } .hideSweetAlert { -webkit-animation: hideSweetAlert 0.2s; animation: hideSweetAlert 0.2s; } @-webkit-keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @-webkit-keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @-webkit-keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } @keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } .animateSuccessTip { -webkit-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s; } .animateSuccessLong { -webkit-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s; } .icon.success.animate::after { -webkit-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in; } @-webkit-keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } @keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } .animateErrorIcon { -webkit-animation: animateErrorIcon 0.5s; animation: animateErrorIcon 0.5s; } @-webkit-keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } @keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } .animateXMark { -webkit-animation: animateXMark 0.5s; animation: animateXMark 0.5s; } @-webkit-keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } @keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } .pulseWarning { -webkit-animation: pulseWarning 0.75s infinite alternate; animation: pulseWarning 0.75s infinite alternate; } @-webkit-keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } @keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } .pulseWarningIns { -webkit-animation: pulseWarningIns 0.75s infinite alternate; animation: pulseWarningIns 0.75s infinite alternate; } .progress { position: relative; } .progress .progress-bar { position: absolute; overflow: hidden; } .progress .progressbar-back-text { position: absolute; width: 100%; height: 100%; font-size: 12px; text-align: center; } .progress .progressbar-front-text { display: block; width: 100%; font-size: 12px; text-align: center; } .progress.right .progress-bar { right: 0; } .progress.right .progressbar-front-text { position: absolute; right: 0; } .progress.vertical { width: 20px; height: 100%; float: left; margin-right: 20px; } .progress.vertical.bottom { position: relative; } .progress.vertical.bottom .progressbar-front-text { position: absolute; bottom: 0; } .progress.vertical .progress-bar { width: 100%; height: 0; transition: height 0.6s ease; transition: all height 0.6s ease ease-out; } .progress.vertical.bottom .progress-bar { position: absolute; bottom: 0; } .progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] { min-width: 0; } .progress-bar[aria-valuenow="0"] { color: #ffffff; min-width: 0; background-color: #cccccc; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .progress-bar[aria-valuenow="0"].progress-bar-success { background-color: #51bf87; } .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-success { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar[aria-valuenow="0"].progress-bar-info { background-color: #29b6d8; } .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-info { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar[aria-valuenow="0"].progress-bar-warning { background-color: #f4ad49; } .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-warning { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar[aria-valuenow="0"].progress-bar-danger { background-color: #db5565; } .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-danger { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /*--------------------------------------------*/ /* Login page /*--------------------------------------------*/ .login-wrapper{ float:none; margin:0px auto; max-width: 400px; } .login-inner { background: #FFF; float: left; width: 100%; padding: 33px 40px; margin: 120px 0px 100px; } .logo { text-align: center; margin: 0px 0px 20px; } label { font-weight: 400; } .copy-text { float: left; width: 100%; border-top: 1px solid #e9e4e4; padding: 17px 0px 0px; text-align: center; margin: 4px 0px 0px; } .userimage { text-align: center; margin-bottom: 30px; } .userimage img{ width: 90px; height: 90px; border-radius: 50%; display: inline-block; } /*--------------------------------------------*/ /* Error page /*--------------------------------------------*/ .error-inner { text-align: center; padding: 100px 0px 120px; } .error-inner h1 { font-weight: 700; font-size: 182px; color: #E3E0E0; } .error-inner h3{ color: #E3E0E0; text-transform:uppercase; font-size: 19px; } .error-inner p { margin-top: 20px; color: #E3E0E0; } .error-inner .btn { margin-top: 22px; } /*--------------------------------------------*/ /* profile page /*--------------------------------------------*/ .profile-cover { background: url('../images/profile-cover.jpg'); background-size: cover; width: 100%; height: 400px; position: relative; margin-bottom: 30px; } .profile-inner { margin-top: 16px; position: absolute; width: 100%; left: 0; height: 100%; right: 0; } .profile-info{ text-align:center; } .overlay-profile { background: rgba(0,0,0,.4); left: 0; right: 0; top: 0; bottom: 0; position: absolute; } .profile-media { width:120px; height: 120px; display: inline-block; } .profile-media img{ border-radius:50%; width: 120px; height: 120px; } .profile-intro{ color: #FFF; } .profile-intro h4 { color: #FFF; font-size: 26px; font-weight: 400; } .profile-intro ul li { list-style: none; display: block; position: relative; padding-left: 15px; } .profile-intro ul li a{ } .profile-stats { width: 100%; padding: 0px 20px; text-align: right; margin-top: 20px; position: absolute; bottom: 25px; left: 0; right: 0; } .profile-stats ul li { display: inline-block; color: #FFF; margin-left:30px; } .profile-stats ul li h4{ color: #FFF; font-weight: 600; font-size: 20px; margin-bottom: 0; } .post-list li a{ color:#787878; } .post-header{ float:left; width:100%; } .post-author-media { width: 80px; height: 80px; position: absolute; } .post-author-media img{ width: 80px; height: 80px; border-radius:50%; } .post-author { margin-left: 95px; margin-top: 20px; } .post-author h4 { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .post-author p { color: #938e8e; } .comment-info { background: #f6f6f6; padding: 4px 20px; margin-top: 8px; display: inline-block; width: 100%; } .comment-info ul{ } .comment-info ul li { display: inline-block; margin-right: 11px; } .comment-info ul li a { color: #454545; font-size: 13px; text-decoration: navajowhite; } .post-desc { float: left; width: 100%; margin-top: 28px; } .timeline-comment { margin-top: 20px; float: left; width: 100%; border-bottom: 1px solid #e3e3e3; } .timeline-comment img { width: 40px; height: 40px; border-radius: 50%; float: left; } .timeline-comment span { float: left; margin: 10px 0px 0px 20px; color: #292727; } .timeline-comment span small{ margin-left:10px; } .text-light{ color: #938e8e; } .timeline-comment .comment-text { margin-top: 10px; float: left; width: 100%; } .friend-list{ } .friend-list ul li { display: inline-block; list-style: none; margin: 0px 3px 10px; } .friend-list ul li a img { width: 50px; height: 50px; border-radius: 50%; } /*-------------------------------- Pricing page ---------------------------------*/ .pricing-table { text-align: center; margin-bottom: 30px; background: #FFF; border: 2px solid #F0EFEF; } .pricing-table h2 { font-size: 21px; color: #FFF; text-transform: uppercase; margin-bottom: 20px; } .pricing-header { padding: 25px; background: #03a9f3; } .pricing-table h3 { font-size: 40px; font-weight: 700; color: #FFF; margin-bottom: 4px; } .pricing-table h3 span{ font-weight:700; } .pricing-table p { color: #FFF; } .pricing-table .feature-list { padding: 15px 0; } .pricing-table .feature-list ul { list-style: none outside none; padding: 0px; } .pricing-table .feature-list ul li { padding: 13px 0px; border-bottom: 1px solid #EFEFEF; color: #302E2E; font-size: 17px; } .pricing-table .price-signup { padding: 10px 50px 30px; } /*-----------------------------------------------------------------*/ /* FAQ /*-----------------------------------------------------------------*/ .accordion-main{ margin-bottom:30px; } .panel-group .panel-heading { cursor: pointer; padding: 15px 15px; } .panel-body ul li{ margin-bottom:5px; line-height:20px; font-weight:300; } .panel-body ul li i{ margin-right:5px; } .panel-title { font-size: 15px; color:#413F3F; text-transform:uppercase; } .panel-group .panel { background: none; box-shadow: none; border: 1px solid #A19E9E; margin-bottom: 26px; border-radius:0; } .panel-group .panel-body { border: none; } #accordion .accordion-toggle:after { font-family:'FontAwesome'; content:"\f068"; float: right; color:#878585; } #accordion .panel-heading.collapsed .accordion-toggle:after { content:"\f067"; } ul.unstyled, ol.unstyled { list-style: none outside none; } /*-------------------------------- Typography ---------------------------------*/ .text-danger { color: #f05050 !important; } .text-muted { color: #7B7777 !important; } .text-primary { color: #03a9f3 !important; } .text-warning { color: #ffbd4a !important; } .text-success { color: #81c868 !important; } .text-info { color: #34d3eb !important; } blockquote { padding: 15px 20px; margin: 0 0 20px; font-size: 16px; border-left: 4px solid #03a9f3; background: #fbfbfb; color: #2f2c2c; } /*-------------------------------- Search Result ---------------------------------*/ .search-box-top { padding: 10px 12px; background: #f2f2f2; border-radius:2px; margin-bottom: 10px; border: 1px solid #e1e1e1; } .search-item { border-bottom: 1px solid #ededed; padding: 12px 0px; } .search-item h3 { margin: 0; } .search-item h3 a { font-size: 17px; color: #104CA7; } .search-item .search-link { color: #119AD1; margin: 3px 0px 8px; display: inline-block; } .search-item a:hover{ text-decoration:none; } /*-------------------------------- Widget ---------------------------------*/ .card-profile { background: #FFF; padding: 20px; margin-bottom:30px; } .profile-header{ background:url(../images/profile-widge-bg.png) no-repeat; background-size: cover; height:155px; margin:-20px; text-align:center; position:relative; } .profile-header img { width: 120px; height: 120px; border-radius: 50%; position: absolute; bottom: -55px; margin: 0px auto; display: inline-block; left: 0; right: 0; border: 2px solid #fff; } .profile-body { margin-top: 100px; text-align: center; } ul.profile-contact { margin:0px; padding:0px; } ul.profile-contact li { list-style:none; display:block; position:relative; } ul.profile-contact li i { margin-right: 8px; font-size: 16px; } .dash-box { background: #FFF; padding: 20px; margin-bottom: 30px; } .dash-box .dash-icon { width: 50px; height: 50px; color: #FFF; text-align: center; line-height: 50px; border-radius: 50%; font-size: 21px; position: absolute; } .dash-box .dash-info{ margin-left: 67px; } .dash-box .dash-info h4 { margin: 0; font-size: 22px; font-weight: 400; } .dash-box .dash-info p{ } .user-box { background: #FFF; margin-bottom: 30px; float: left; width: 100%; padding: 10px; position: relative; } .user-box .user-img { width: 60px; height: 60px; position: absolute; } .user-box .user-img img{ border-radius:50%; max-width:100%; } .user-box .user-info { margin-left: 72px; margin-top: 2px; } .user-box .user-info h4 { margin: 0; font-size: 14px; text-transform: uppercase; font-weight: 600; } .user-box .user-info p{ margin: 2px 0px 1px; } .user-box .user-info span{ color: #03A9F3; } .card-profile2 { background: #FFF; padding: 20px; margin-bottom:30px; text-align:center; } .card-profile2 .profile-photo { width: 120px; height: 120px; border-radius: 50%; } ul.social-info { margin: 20px 0px 20px; } .card-profile2 ul.social-info li a { color: #908f8f; font-size: 16px; } .card-profile2 .btn { margin: 11px 0px 20px; padding: 6px 73px; } .card-profile3 { background: #FFF; padding: 20px; margin-bottom: 30px; } .card-profile3 .p-header { text-align: center; margin: -20px -20px 14px; padding: 50px 20px; background: #476ffc; } .card-profile3 .p-header img{ width: 120px; height: 120px; border-radius: 50%; margin-bottom:10px; } .card-profile3 .p-header h4{ color:#FFF; } .card-profile3 .p-header p{ color:#FFF; margin: 0; } .card-profile3 .p-info{ text-align:center; } .card-profile3 .p-info .p-stats { margin-bottom: 20px; } .card-profile3 .p-info .p-stats h4{ } .card-profile3 .p-info .p-stats p { font-size: 23px; font-weight: 600; margin-top: 20px; color: #504E4E; } /*-------------------------------- TimeLine ---------------------------------*/ .container { width: 90%; max-width: 1170px; margin: 0 auto; } .container::after { content: ''; display: table; clear: both; } #timeline { margin-bottom: 2em; margin-top: 2em; padding: 2em 0; position: relative; } #timeline::before { background: #ffffff; content: ''; height: 100%; display: inline-block; left: 18px; position: absolute; top: 0; width: 4px; } .timeline-block { margin: 2em 0; position: relative; } .timeline-block:after { clear: both; content: ""; display: table; } .timeline-block:first-child { margin-top: 0; } .timeline-block:last-child { margin-bottom: 0; } .timeline-img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); text-align: center; line-height: 40px; font-size: 20px; color: #fff; } .timeline-img.success { background: #81c868; } .timeline-img.info { background: #34d3eb; } .timeline-img.pink { background: #fb6d9d; } .timeline-img.danger { background: #f05050; } .timeline-img.primary { background: #5d9cec; } .timeline-img.warning { background: #ffbd4a; } .timeline-content { -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); background: white; border-radius: 0; box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); margin-left: 60px; padding: 1em; position: relative; } .timeline-content img { display: block; width: 100%; } .timeline-content:after { clear: both; content: ""; display: table; } .timeline-content h2 { margin-top: 0; } .timeline-content p { color: #666666; font-size: 14px; margin: 10px 0px 10px 0px; } .timeline-content .read-more { background: #acb7c0; border-radius: 0.25em; color: white; display: inline-block; float: right; font-size: 14px; padding: .8em 1em; } .timeline-content .date { display: inline-block; font-size: 15px; text-transform: uppercase; } .timeline-content h3 { font-size: 18px; margin: 0px; } .no-touch .timeline-content .read-more:hover { background-color: #bac4cb; } .timeline-content .date { float: left; margin-right: 20px; padding: .8em 0; opacity: .7; } .timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white; } /*--------------------------------------------*/ /* Google map /*--------------------------------------------*/ .gmaps, .gmaps-panaroma { height: 300px; } .gmaps, .gmaps-panaroma { height: 300px; background: #e4e7ea; border-radius: 3px; } .gmaps-overlay { display: block; text-align: center; color: #ffffff; font-size: 16px; line-height: 40px; background: #ab8ce4; border-radius: 4px; padding: 10px 20px; } .gmaps-overlay_arrow { left: 50%; margin-left: -16px; width: 0; height: 0; position: absolute; } .gmaps-overlay_arrow.above { bottom: -15px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #ab8ce4; } .gmaps-overlay_arrow.below { top: -15px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #ab8ce4; } .jvectormap-zoomin, .jvectormap-zoomout { width: 10px; height: 10px; line-height: 10px; } .jvectormap-zoomout { top: 40px; } /*--------------------------------------------*/ /* Footer /*--------------------------------------------*/ footer { background: #fff; padding: 15px; color: #7A7676; position: static; bottom: 0; width: 100%; border-top: 1px solid #eff0f4; text-align: center; font-size: 14px; }