@import url('icons/iconfont/style.css'); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700); @import url(fonts/simple-line-icons.css); /* ! /* 【Web】光沅創意 www.KyArt.com.tw | Brad Kuo | brad@kyart.com.tw ---------------------------------------------------------------------------- */ /* __ ____ _____ _ _ _____ _ _ _____ _____ _ _____ ___ _ _ | \/ \ \ / / _ \| | | | ____| | | | ____| |_ _|/ \ |_ _\ \ / / \ | \ | | | |\/| |\ V / | | | | | | _| | | | | _| | | / _ \ | | \ \ /\ / / _ \ | \| | | | | | | || |_| | |_| | |___| |_| | |___ | |/ ___ \ | | \ V V / ___ \| |\ | |_| |_| |_| \__\_\___/|_____|\___/|_____| |_/_/ \_\___| \_/\_/_/ \_\_| \_| ----- */ html { position: relative; z-index: 1; min-height: 100%; } html body { font-size: 15px; min-height: 100%; background-color: #f4f7f9; height: 100%; } .app-loading, .sidebar-open-rtl, .sidebar-open-ltr { overflow: hidden; } /*===================================== START BACKEND LAYOUT =====================================*/ body#FrontPage { background: #009474; color: #fff; overflow: hidden; background-position: center center; } body#KyartPage { background: #ebebeb; color: #868585; overflow: hidden; } #wrapper { background: transparent; } /* Login */ .LoginBox { width: 300px; height: 300px; position: absolute; left: 50%; top: 45%; z-index: 99; margin-top: -260px; margin-left: -150px; display: block; text-align: center; } @media (max-width:480px) { .LoginBox { width: 300px; height: 300px; position: absolute; left: 50%; top: 60%; z-index: 99; margin-top: -260px; margin-left: -150px; display: block; text-align: center; } } .LoginBox .logo { width: 200px; height: 80px; background: url(../img/logo.png) no-repeat center center; display: inline-block; margin: 0 auto; background-size: 70% 85%; } .LoginBox .logoClient { } .LoginBox .SystemName { font-weight: 100; font-size: 1.5em; line-height: 2em; } .signin { margin-top: 10px; } .signin input, .signin .btn { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; } .signin input { margin-bottom: 7px; padding-left: 40px; } .signin input:nth-child(1) { background: #fff url(../img/icon_mail.png) no-repeat 15px 50%; } .signin input:nth-child(2) { background: #fff url(../img/icon_lock.png) no-repeat 15px 50%; } .signin .form-control, .signin .btn { font-family: "Open Sans", "Microsoft JhengHei", sans-serif; height: 40px; font-size: 1.2em; } .signin .btn { font-size: 1.3em; width: 170px; margin: 20px auto; } .tagset { z-index: 999; } /* ---------------------------- * * Template Header * * --------------------------- */ /* Push right */ .csstransforms3d.sidebar-open-ltr #header.navbar { -webkit-transform: translate3d(240px, 0px, 0px); -moz-transform: translate3d(240px, 0px, 0px); -o-transform: translate3d(240px, 0px, 0px); -ms-transform: translate3d(240px, 0px, 0px); transform: translate3d(240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #header.navbar { left: 240px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #header.navbar { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #header.navbar { right: 240px; left: auto; } /* Header Main */ #header.navbar { position: relative; z-index: 1030; width: 100%; border-width: 0px; border-radius: 0px; margin: 0px; -webkit-box-shadow: 0px 3px 1px -3px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 1px -3px rgba(0, 0, 0, 0.12); -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; color: #fff; background: linear-gradient(to left, #25bf67 1%, #3fdd82 100%); } #header.navbar .container .navbar-toolbar, #header.navbar .container-fluid .navbar-toolbar { margin-right: -15px; margin-left: -15px; } #header.navbar .navbar-header { height: 50px; float: none; background: #fff; } #header.navbar .navbar-header > .navbar-brand { display: block; width: 100%; padding: 0px 15px; line-height: 46px; height: 46px; text-align: center; } #header.navbar .navbar-header > .navbar-brand.text-left { text-align: left; } #header.navbar .navbar-header > .navbar-brand.text-right { text-align: right; } #header.navbar .navbar-toolbar .navbar-collapse { max-height: 220px; width: 100%; padding: 0px; border-color: #f2f5f5; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav { float: none; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav > li { float: none; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav > li > a { height: 40px; line-height: 40px; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav > li.open > a:before, #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav > li.open > a:after { display: none; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav.navbar-right, #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav.navbar-left { float: none; } #header.navbar .navbar-toolbar .navbar-collapse > .navbar-nav > .dropdown > .dropdown-menu { position: static; margin: 0px; border-width: 0px; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; } #header.navbar .navbar-toolbar .navbar-nav { margin: 0px; float: left; } #header.navbar .navbar-toolbar .navbar-nav > li { float: left; } #header.navbar .navbar-toolbar .navbar-nav > li > a { padding: 0px 15px; height: 46px; line-height: 46px; color: #9d9d9d; text-shadow: none; } #header.navbar .navbar-toolbar .navbar-nav > li > a:hover, #header.navbar .navbar-toolbar .navbar-nav > li > a:focus { background-color: transparent; color: #919191; } #header.navbar .navbar-toolbar .navbar-nav > li > a:active, #header.navbar .navbar-toolbar .navbar-nav > li > a.active { background-color: #f6f6f6; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta { display: table; width: 100%; color: #fff; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta { color: #fff; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:active .meta, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:focus .meta { color: #ffffff; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .avatar { display: table-cell; vertical-align: middle; width: 32px; height: 32px; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .avatar > img { display: block; width: 100%; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .text { font-size: 13px; font-weight: 600; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .icon { display: table-cell; vertical-align: middle; font-size: 16px; min-width: 16px; text-align: center; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .icon i.icon-bell:before { font-family: 'Simple-Line-Icons'; content: "\e027"; font-style: normal; font-size: 1.2em; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .label, #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .badge { display: block; position: absolute; top: 8px; left: 5px; min-width: 18px; background-color: #ed5466; border-radius: 50%; -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .label.pull-right, #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .badge.pull-right { left: auto; right: 5px; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .hasnotification { position: absolute; top: 4px; left: 3px; -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .hasnotification.pull-right { left: auto; right: 12px; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .arrow { display: table-cell; vertical-align: middle; text-align: right; font-family: "iconfont"; font-size: 12px; width: 12px; height: 12px; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .arrow:after { content: "\e6be"; } #header.navbar .navbar-toolbar .navbar-nav > li > a > .meta > .caret { margin-top: -1px; margin-left: 5px; } #header.navbar .navbar-toolbar .navbar-nav > li > a.sidebar-minimize > .meta > .icon:after { display: inline-block; vertical-align: top; font-family: "iconfont"; content: "\e636"; } #header.navbar .navbar-toolbar .navbar-nav > li > a.sidebar-minimize.minimized > .meta > .icon:after { content: "\e47a"; } #header.navbar .navbar-toolbar .navbar-nav > li.active > a { background-color: transparent; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > li.active > a:hover, #header.navbar .navbar-toolbar .navbar-nav > li.active > a:focus, #header.navbar .navbar-toolbar .navbar-nav > li.active > a:active { background-color: transparent; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a { background-color: transparent; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a:hover, #header.navbar .navbar-toolbar .navbar-nav > li.open > a:focus, #header.navbar .navbar-toolbar .navbar-nav > li.open > a:active { background-color: transparent; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a:before, #header.navbar .navbar-toolbar .navbar-nav > li.open > a:after { position: absolute; content: ""; left: 50%; width: 0px; height: 0px; border-style: solid; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a:before { z-index: 1002; bottom: -6px; margin-left: -9px; border-width: 0 9px 9px 9px; border-color: transparent transparent #e0e7e8 transparent; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a:after { z-index: 1003; bottom: -7px; margin-left: -8px; border-width: 0 8px 8px 8px; border-color: transparent transparent #ffffff transparent; } #header.navbar .navbar-toolbar .navbar-nav > li.open > a > .meta > .arrow:after { content: "\e6bf"; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main { position: absolute; z-index: 1; top: 0px; left: 0px; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a { color: #000; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:hover { color: #ffffff; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:active, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:focus { color: #ffffff; background-color: #8ec31f; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .label, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .badge, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .hasnotification { -webkit-box-shadow: 0px 0px 0px 1px #00b6ad; box-shadow: 0px 0px 0px 1px #00b6ad; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-toggle { padding: 0px; margin: 0px; border-radius: 0px; border-width: 0px; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown > .dropdown-menu { position: absolute; margin-top: 5px; left: 5px; background-color: #ffffff; border: 1px solid #e0e7e8; border-radius: 3px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom { position: static; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu { top: auto; left: 5px; right: 5px; padding: 0px; border-color: #e0e7e8; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu > .dropdown-header { display: table; width: 100%; background-color: #f7f7f7; border-bottom: 1px solid #e6ebed; padding: 0px 15px !important; height: 36px; line-height: 36px; color: #5e5e5e; border-top-left-radius: 3px; border-top-right-radius: 3px; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu > .dropdown-header > .title { display: table-cell; font-weight: 600; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu > .dropdown-header > .option { display: table-cell; font-weight: normal; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu > .viewport, #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu .dropdown-body { height: 320px; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu .dropdown-body { overflow-y: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu form, #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu .form-horizontal { padding: 6px 15px; background-color: #fafafa; border-bottom: 1px solid #e6ebed; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.open > .dropdown-toggle:before { border-color: transparent transparent #e0e7e8 transparent; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.open > .dropdown-toggle:after { border-color: transparent transparent #f7f7f7 transparent; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.mega > .dropdown-menu { padding: 5px 0px; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.mega.open > .dropdown-toggle:before { border-color: transparent transparent #e0e7e8 transparent; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.mega.open > .dropdown-toggle:after { border-color: transparent transparent #ffffff transparent; } #header.navbar .navbar-toolbar .navbar-nav.navbar-right { float: right; } #header.navbar .navbar-toolbar .navbar-nav.navbar-right > .navbar-main { left: auto; right: 0px; } #header.navbar .navbar-toolbar .navbar-nav.navbar-right > li > .dropdown-menu { left: auto; right: 5px; } #header.navbar .navbar-toolbar > .navbar-form { position: absolute; z-index: 991; top: -60px; left: 0px; right: 0px; background-color: #00b6ad; border-width: 0px; margin: 0px; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; box-shadow: none; -webkit-box-shadow: none; -webkit-transition: top 300ms ease; -moz-transition: top 300ms ease; -o-transition: top 300ms ease; transition: top 300ms ease; } #header.navbar .navbar-toolbar > .navbar-form.open { top: 0px; } #header.navbar .navbar-toolbar > .navbar-form .form-group { display: block; margin: 0px; } #header.navbar .navbar-toolbar > .navbar-form .form-control { display: block; width: 100%; color: #f2f2f2; border-width: 0px; background-color: #009d95; } #header.navbar .navbar-toolbar > .navbar-form .has-icon .form-control-icon { color: #f2f2f2; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-webkit-input-placeholder { color: #f2f2f2; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-moz-placeholder { color: #f2f2f2; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-moz-placeholder { color: #f2f2f2; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-ms-input-placeholder { color: #f2f2f2; } #header.navbar.navbar-fixed-top { position: fixed; } #header.navbar .navbar-toolbar .tab-search { margin: 8px 0 0 20px; } #header.navbar .navbar-toolbar .tab-search .form-control { background: transparent; color: #fff; font-size: 15px; border-top: 0px solid #fff; border-right: 0px solid #fff; border-left: 0px solid #fff; border-bottom: 1px solid #fff; display: inline-block; vertical-align: middle; margin-left: 0px; width: 90%; } input[type="text"].txtsearch::-webkit-input-placeholder { color: white; } #header.navbar .navbar-toolbar .tab-search .icon { display: inline-block; } /* ---------------------------- * * Template Header - screen-sm * * --------------------------- */ @media (min-width:768px) and (max-width:991px) { /* Push right */ .csstransforms3d.sidebar-open-ltr #header.navbar { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #header.navbar { left: 0px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #header.navbar { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #header.navbar { right: 240px; left: auto; } /* Header Main */ #header.navbar { height: 60px; } #header.navbar .container .navbar-toolbar, #header.navbar .container-fluid .navbar-toolbar { margin-right: 0px; margin-left: 0px; } #header.navbar .container .navbar-header > .navbar-brand, #header.navbar .container-fluid .navbar-header > .navbar-brand { margin-left: 0px; } #header.navbar .navbar-header { background-color: #00b6ad; height: 60px; float: left; } #header.navbar .navbar-header > .navbar-brand { width: 60px; line-height: 60px; height: 60px; padding: 0px; } #header.navbar .navbar-header > .navbar-brand > .logo-text { display: none; } #header.navbar .navbar-header > .navbar-brand > .logo-figure { margin-top: 5px; } #header.navbar .navbar-toolbar { position: relative; height: 60px; margin-left: 60px !important; } #header.navbar .navbar-toolbar > .navbar-collapse { width: auto; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav, #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li { display: inline-block; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li { float: left; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li > a { height: 60px; line-height: 60px; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li.open > a:before, #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li.open > a:after { display: block; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > .dropdown > .dropdown-menu { position: absolute; margin-top: 5px; background-color: #ffffff; border: 1px solid #e0e7e8; border-radius: 3px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); } #header.navbar .navbar-toolbar > .navbar-nav.navbar-right > .dropdown.custom > .dropdown-menu { left: auto; right: 5px; } #header.navbar .navbar-toolbar > .navbar-nav > li > a { height: 60px; line-height: 60px; } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main { position: static; z-index: 1; top: auto; left: auto; } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a { color: #9d9d9d; } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a:hover { color: #919191; } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a:active, #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a:focus { background-color: #f6f6f6; color: #848484; } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a > .meta > .label, #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a > .meta > .badge, #header.navbar .navbar-toolbar > .navbar-nav > .navbar-main > a > .meta > .hasnotification { -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); } #header.navbar .navbar-toolbar > .navbar-nav > .navbar-toggle { display: none; } #header.navbar .navbar-toolbar > .navbar-nav > .dropdown.custom > .dropdown-menu { width: 300px; } #header.navbar .navbar-toolbar > .navbar-nav > .dropdown.custom.mega > .dropdown-menu { width: auto; } #header.navbar .navbar-toolbar > .navbar-nav.navbar-right > .dropdown.custom > .dropdown-menu { left: auto; } #header.navbar .navbar-toolbar > .navbar-nav.navbar-right > .dropdown.custom.mega > .dropdown-menu { left: 5px; } #header.navbar .navbar-toolbar > .navbar-form { background-color: #ffffff; padding-top: 13px; padding-right: 5px; padding-bottom: 13px; padding-left: 5px; } #header.navbar .navbar-toolbar > .navbar-form .form-control { color: #777777; background-color: transparent; } #header.navbar .navbar-toolbar > .navbar-form .has-icon .form-control-icon { color: #9d9d9d; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-webkit-input-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-moz-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-moz-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-ms-input-placeholder { color: #aaaaaa; } } /* ---------------------------- * * Template Header - screen-md * * --------------------------- */ @media (min-width:992px) { /* Push right */ .csstransforms3d.sidebar-open-ltr #header.navbar { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #header.navbar { left: 0px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #header.navbar { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #header.navbar { right: 240px; left: auto; } /* Header Main */ #header.navbar { height: 46px; } #header.navbar .container .navbar-toolbar, #header.navbar .container-fluid .navbar-toolbar { margin-right: 0px; margin-left: 0px; } #header.navbar .container .navbar-header > .navbar-brand, #header.navbar .container-fluid .navbar-header > .navbar-brand { margin-left: 0px; text-align: left; } #header.navbar .navbar-header { height: 50px; float: left; } #header.navbar .navbar-header > .navbar-brand { width: 240px; line-height: 46px; height: 46px; padding: 0px; } #header.navbar .navbar-header > .navbar-brand > .logo-text, #header.navbar .navbar-header > .navbar-brand > .logo-figure { display: inline-block; margin-top: 0px; } #header.navbar .navbar-toolbar { position: relative; height: 46px; margin-left: 240px !important; } #header.navbar .navbar-toolbar > .navbar-collapse { width: auto; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav, #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li { display: inline-block; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li { float: left; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li > a { height: 60px; line-height: 60px; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li.open > a:before, #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > li.open > a:after { display: block; } #header.navbar .navbar-toolbar > .navbar-collapse > .navbar-nav > .dropdown > .dropdown-menu { position: absolute; margin-top: 5px; background-color: #ffffff; border: 1px solid #e0e7e8; border-radius: 3px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); } #header.navbar .navbar-toolbar .navbar-nav > li > a { height: 46px; line-height: 46px; color: #fff; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main { position: static; z-index: 1; top: auto; left: auto; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a { color: #9d9d9d; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:hover { color: #919191; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:active, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a:focus { background-color: #f6f6f6; color: #848484; } #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .label, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .badge, #header.navbar .navbar-toolbar .navbar-nav > .navbar-main > a > .meta > .hasnotification { -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.96); } #header.navbar .navbar-toolbar .navbar-nav > .navbar-toggle { display: none; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu { width: 300px; } #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom.mega > .dropdown-menu { width: auto; } #header.navbar .navbar-toolbar .navbar-nav.navbar-right > .dropdown.custom > .dropdown-menu { left: auto; } #header.navbar .navbar-toolbar .navbar-nav.navbar-right > .dropdown.custom.mega > .dropdown-menu { left: 5px; } #header.navbar .navbar-toolbar > .navbar-form { background-color: #ffffff; padding-top: 13px; padding-right: 5px; padding-bottom: 13px; padding-left: 5px; } #header.navbar .navbar-toolbar > .navbar-form .form-control { color: #777777; background-color: transparent; } #header.navbar .navbar-toolbar > .navbar-form .has-icon .form-control-icon { color: #9d9d9d; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-webkit-input-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-moz-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control::-moz-placeholder { color: #aaaaaa; } #header.navbar .navbar-toolbar > .navbar-form .form-control:-ms-input-placeholder { color: #aaaaaa; } /* Sidebar minimized */ #header.navbar .navbar-header > .navbar-brand > .logo-figure { display: none; } .sidebar-minimized #header.navbar .navbar-header > .navbar-brand > .logo-figure { display: inline-block; } .sidebar-minimized #header.navbar .navbar-header > .navbar-brand { width: 60px; } .sidebar-minimized #header.navbar .navbar-header > .navbar-brand > .logo-text { display: none; } .sidebar-minimized #header.navbar .navbar-toolbar { margin-left: 60px !important; } } /* ---------------------------- * * Template Sidebar * * --------------------------- */ /* Sidebar Transition */ .csstransforms3d.sidebar-open-ltr .sidebar-left { -webkit-transform: translate3d(240px, 0px, 0px); -moz-transform: translate3d(240px, 0px, 0px); -o-transform: translate3d(240px, 0px, 0px); -ms-transform: translate3d(240px, 0px, 0px); transform: translate3d(240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr .sidebar-left { right: auto; left: 0px; } .csstransforms3d.sidebar-open-rtl .sidebar-right { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl .sidebar-right { left: auto; right: 0px; } .sidebar { position: fixed; top: 0px; bottom: 0px; width: 240px; color: #a9a9a9; background-color: #4f5467; -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; z-index: 200; } .sidebar.sidebar-left { left: -240px; } .sidebar.sidebar-right { right: -240px; } .sidebar.sidebar-right .scrollbar, .sidebar.sidebar-right .scrollrail { left: 0px !important; } .sidebar .header { position: absolute; background-color: #2a2a2a; top: 0px; width: 100%; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; z-index: 10; height: 50px; } .sidebar .header:after { position: absolute; bottom: 0px; left: 0px; right: 0px; content: ""; border-bottom: 1px solid #262626; } .sidebar .header + .viewport { top: 50px; } .sidebar .header + .content { top: 50px; } .sidebar .footer { display: none; } .sidebar .has-footer .footer, .sidebar.has-footer .footer { display: block; position: absolute; background-color: #2a2a2a; width: 100%; bottom: 0px; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; z-index: 11; height: 50px; } .sidebar .has-footer .footer:after, .sidebar.has-footer .footer:after { position: absolute; top: 0px; left: 0px; right: 0px; content: ""; border-top: 1px solid #262626; } .sidebar .has-footer .viewport, .sidebar.has-footer .viewport { bottom: 50px; } .sidebar .has-footer .viewport > .content, .sidebar.has-footer .viewport > .content { bottom: 0px; } .sidebar .has-footer .content, .sidebar.has-footer .content { bottom: 50px; } .sidebar .viewport { position: absolute !important; top: 0px; bottom: 0px; width: 100% !important; } .sidebar .content { position: absolute; top: 0px; bottom: 0px; width: 240px !important; overflow-y: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .sidebar .content > .wrapper { padding-left: 25px; padding-right: 25px; } .sidebar .content hr { border-color: #2f2f2f; } .sidebar .content .heading { font-size: 12px; font-weight: bold; text-transform: uppercase; margin: 0px; padding: 22px 25px 15px 25px; border-bottom: 1px solid #696d7c; } .sidebar .content .heading .col-xs-8 { padding-left: 0; } .sidebar .content .heading .col-xs-8, .sidebar .content .heading .col-xs-8 a { color: #c3c6c8; } .sidebar .content .heading .avatar img { max-width: 100%; width: 100%; } .sidebar .panel { background-color: transparent; border-radius: 0px !important; color: #888888; border-width: 0px !important; } .sidebar .media-list-contact > .media:after { border-color: #2f2f2f; } .sidebar .media-list-contact > .media > .media-body > .media-heading { color: #ddd; } .sidebar .media-list-contact > .media:active { background-color: #2f2f2f; } .sidebar .topmenu { margin: 0; padding: 0; } .sidebar .topmenu li { display: block; position: relative; width: 100%; list-style: none; } .sidebar .topmenu li.submenu-header { display: none; } .sidebar .topmenu li:after { position: absolute; content: ""; left: 55px; right: 0px; bottom: -1px; border-top: 0px solid #44495c; } .sidebar .topmenu li:last-child:after { border: 0px; } .sidebar .topmenu li.active { background-color: #2f2f2f; } .sidebar .topmenu li.active:after { border-color: transparent; } .sidebar .topmenu li.active a { color: #c3c3c3; } .sidebar .topmenu li.active a > .figure > [class^="ico-"], .sidebar .topmenu li.active a > .figure > [class*=" ico-"] { border-color: #00b6ad; color: #fff; } .sidebar .topmenu li.active a > .figure > .hasnotification { -webkit-box-shadow: 0px 0px 0px 2px #2f2f2f; box-shadow: 0px 0px 0px 2px #2f2f2f; } .sidebar .topmenu li.open a > .figure > [class^="ico-"], .sidebar .topmenu li.open a > .figure > [class*=" ico-"] { border-color: #c3c3c3; } .sidebar .topmenu li.open a > .arrow:before { content: "\e671"; } .sidebar .topmenu li.open a { color: #fff; background: #2ecc71; } .sidebar .topmenu li a { display: table; position: relative; table-layout: fixed; width: 100%; font-size: 17px; text-decoration: none; color: #bdbec3; outline: 0; padding: 12px 25px 12px 15px; font-weight: 100; } .sidebar .topmenu li a:hover { color: #fff; } .sidebar .topmenu li a:hover > .figure > [class^="ico-"], .sidebar .topmenu li a:hover > .figure > [class*=" ico-"] { border-color: #c3c3c3; } .sidebar .topmenu li a > .figure { display: table-cell; table-layout: fixed; vertical-align: middle; width: 45px; padding-left: 10px; font-size: 20px; font-family: 'Simple-Line-Icons'; } .sidebar .topmenu li a > .figure i:before { font-style: normal; } .sidebar .topmenu li a > .figure i.icon-speedometer:before { content: "\e007"; } .sidebar .topmenu li a > .figure i.icon-grid:before { content: "\e06a"; } .sidebar .topmenu li a > .figure i.icon-bar-chart:before { content: "\e077"; } .sidebar .topmenu li a > .figure i.icon-users:before { content: "\e001"; } .sidebar .topmenu li a > .figure i.icon-screen-desktop:before { content: "\e011"; } .sidebar .topmenu li a > .figure i.icon-settings:before { content: "\e09a"; } .sidebar .topmenu li a > .figure > .hasnotification { position: absolute; left: 20px; -webkit-box-shadow: 0px 0px 0px 2px #2a2a2a; box-shadow: 0px 0px 0px 2px #2a2a2a; } .sidebar .topmenu li a > .text { display: table-cell; table-layout: fixed; vertical-align: middle; width: 100%; line-height: 30px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .topmenu li a > .number { display: table-cell; table-layout: fixed; vertical-align: middle; width: 40px; font-weight: normal; } .sidebar .topmenu li a > .number > .badge, .sidebar .topmenu li a > .number > .label { float: right; max-width: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .topmenu li a > .arrow { display: table-cell; table-layout: fixed; vertical-align: middle; font-weight: normal; width: 20px; text-align: right; } .sidebar .topmenu li a > .arrow:before { font-family: "iconfont"; content: "\e64f"; font-size: 10px; } .sidebar .topmenu li > .submenu { position: relative; overflow: hidden; background-color: #44495c; } .sidebar .topmenu li > .submenu:after { position: absolute; content: ""; left: 32px; top: 0px; bottom: 0px; border-left: 0px solid #44495c; } .sidebar .topmenu li > .submenu li a { font-size: 15px; color: #eeeeee; padding: 5px 25px 5px 20px; background: transparent; } .sidebar .topmenu li > .submenu li a > .figure { width: 22px; padding-left: 0px; } .sidebar .topmenu li > .submenu li a > .figure > [class*=" ico-"], .sidebar .topmenu li > .submenu li a > .figure > [class^="ico-"] { color: #777777; } .sidebar .topmenu li > .submenu li a > .text { font-weight: normal; } .sidebar .topmenu li > .submenu li a > .arrow:before { content: "\e64f"; } .sidebar .topmenu li > .submenu li a:hover { color: #c3c3c3; } .sidebar .topmenu li > .submenu li a:hover > .figure > [class*=" ico-"], .sidebar .topmenu li > .submenu li a:hover > .figure > [class^="ico-"] { color: #c3c3c3; } .sidebar .topmenu li > .submenu li:after { z-index: 1; width: 8px; height: 8px; border-radius: 50%; background-color: #44495c; left: -12px; top: 13px; bottom: auto; border-color: transparent; -webkit-box-shadow: 0px 0px 0px 2px #44495c; box-shadow: 0px 0px 0px 2px #44495c; } .sidebar .topmenu li > .submenu li.active { background-color: transparent; } .sidebar .topmenu li > .submenu li.active:after { background-color: #00b6ad; } .sidebar .topmenu li > .submenu li.active a { color: #c3c3c3; } .sidebar .topmenu li > .submenu li.active a > .text { font-weight: 600; } .sidebar .topmenu li > .submenu li.active a > .figure > [class*=" ico-"], .sidebar .topmenu li > .submenu li.active a > .figure > [class^="ico-"] { color: #c3c3c3; } .sidebar .topmenu li > .submenu li.open a > .arrow:before { content: "\e671"; } .sidebar .topmenu li > .submenu .submenu { overflow: hidden; padding-left: 10px; } .sidebar .topmenu li > .submenu .submenu:after { display: none; } .sidebar .topmenu li > .submenu .submenu li:after { display: none; } .sidebar .topmenu li > .submenu .submenu li.active a { color: #c3c3c3; } .sidebar .topmenu li > .submenu .submenu li.active a > .text { font-weight: bold; } .sidebar .topmenu li > .submenu .submenu li.open a > .arrow:before { content: "\e671"; } .sidebar .topmenu li > .submenu .submenu li a { color: #777777; padding-top: 0px; padding-bottom: 0px; } .sidebar .topmenu li > .submenu .submenu li a:hover { color: #c3c3c3; } .sidebar .topmenu li > .submenu .submenu li a > .text { font-weight: normal; } .sidebar .topmenu li > .submenu .submenu li a > .arrow:before { content: "\e64f"; } /* ---------------------------- * * Template Sidebar - screen-sm * * --------------------------- */ @media (min-width:768px) and (max-width:991px) { /* Sidebar Transition */ .csstransforms3d.sidebar-open-ltr .sidebar-left.sidebar-menu { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr .sidebar-left.sidebar-menu { left: 0px; } .csstransforms3d.sidebar-open-rtl .sidebar-left.sidebar-menu { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl .sidebar-left.sidebar-menu { left: -240px; } /* Sidebar Main */ .sidebar.sidebar-left.sidebar-menu { position: absolute; left: 0px; top: 0px; bottom: auto; padding-top: 60px; width: 60px; min-height: 100%; } .sidebar.sidebar-left.sidebar-menu .header { display: none; } .sidebar.sidebar-left.sidebar-menu .header + .content { top: 0px; } .sidebar.sidebar-left.sidebar-menu .has-footer .footer, .sidebar.sidebar-left.sidebar-menu.has-footer .footer { display: none; } .sidebar.sidebar-left.sidebar-menu .has-footer .content, .sidebar.sidebar-left.sidebar-menu.has-footer .content { bottom: auto; } .sidebar.sidebar-left.sidebar-menu .viewport { position: relative !important; top: auto; bottom: auto; height: 100%; overflow: visible !important; } .sidebar.sidebar-left.sidebar-menu .viewport > .scrollbar, .sidebar.sidebar-left.sidebar-menu .viewport > .scrollrail { display: none !important; } .sidebar.sidebar-left.sidebar-menu .content { position: relative; height: 100%; width: 60px !important; overflow: visible !important; } .sidebar.sidebar-left.sidebar-menu .content .wrapper, .sidebar.sidebar-left.sidebar-menu .content .heading { visibility: hidden; overflow: hidden; } .sidebar.sidebar-left.sidebar-menu .content .heading { font-size: 0px; padding: 0px; } .sidebar .header { padding-top: 13px; padding-bottom: 13px; min-height: 60px; } .sidebar .header + .viewport { top: 60px; } .sidebar .header + .content { top: 60px; } .sidebar .has-footer .footer { padding-top: 13px; padding-bottom: 13px; min-height: 60px; } .sidebar .has-footer .viewport { bottom: 60px; } .sidebar .has-footer .content { bottom: 60px; } .sidebar .topmenu.topmenu-responsive > li:after { left: 0px; } .sidebar .topmenu.topmenu-responsive > li.hover > .submenu { display: block; } .sidebar .topmenu.topmenu-responsive > li.hover:before { position: absolute; z-index: 1; top: 50%; right: 0px; margin-top: -8px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #202020 transparent transparent; -webkit-box-shadow: inset 1px 0px 4px 0 #1d1d1d; box-shadow: inset 1px 0px 4px 0 #1d1d1d; } .sidebar .topmenu.topmenu-responsive > li.active > a > .number .label, .sidebar .topmenu.topmenu-responsive > li.active > a > .number .badge { -webkit-box-shadow: 0px 0px 0px 2px #2f2f2f; box-shadow: 0px 0px 0px 2px #2f2f2f; } .sidebar .topmenu.topmenu-responsive > li > a { padding-top: 17.5px; padding-bottom: 17.5px; padding-left: 15px; padding-right: 15px; } .sidebar .topmenu.topmenu-responsive > li > a > .text { display: none; } .sidebar .topmenu.topmenu-responsive > li > a > .number { display: block; position: absolute; top: 12px; right: 10px; width: auto; } .sidebar .topmenu.topmenu-responsive > li > a > .number .label, .sidebar .topmenu.topmenu-responsive > li > a > .number .badge { -webkit-box-shadow: 0px 0px 0px 2px #2a2a2a; box-shadow: 0px 0px 0px 2px #2a2a2a; } .sidebar .topmenu.topmenu-responsive > li > a > .arrow { display: none; } .sidebar .topmenu.topmenu-responsive > li > a > .figure { display: block; width: auto; font-size: 18px; padding: 0px; text-align: center; } .sidebar .topmenu.topmenu-responsive > li > .submenu { display: none; position: absolute; left: 60px; top: 0px; width: 200px; height: auto !important; padding-left: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .sidebar .topmenu.topmenu-responsive > li > .submenu:after { display: none; } .sidebar .topmenu.topmenu-responsive > li > .submenu > li.submenu-header { display: block; font-size: 15px; color: #c3c3c3; font-weight: 600; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 5px; margin-top: -2px; } .sidebar .topmenu.topmenu-responsive > li > .submenu > li.submenu-header:after { display: none; } .sidebar .topmenu.topmenu-responsive > li > .submenu > li:after { left: 15px; } .sidebar .topmenu.topmenu-responsive > li > .submenu > li > a { padding-left: 35px; padding-right: 15px; padding-top: 1px; padding-bottom: 1px; } .sidebar .topmenu.topmenu-responsive > li > .submenu .submenu { position: static; padding-left: 20px; background-color: #161616; } .sidebar .topmenu.topmenu-responsive > li > .submenu .submenu > li > a { padding-top: 1px; padding-bottom: 1px; } } /* ---------------------------- * * Template Sidebar - screen-md * * --------------------------- */ @media (min-width:992px) { /* Sidebar Transition */ .csstransforms3d.sidebar-open-ltr .sidebar-left.sidebar-menu { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr .sidebar-left.sidebar-menu { left: 0px; } .csstransforms3d.sidebar-open-rtl .sidebar-left.sidebar-menu { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl .sidebar-left.sidebar-menu { left: -240px; } /* Sidebar Main */ .sidebar.sidebar-left.sidebar-menu { left: 0px; top: 47px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static { position: absolute; left: 0px; top: 0px; bottom: auto; padding-top: 60px; min-height: 100%; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .header { top: 60px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .header + .viewport { padding-top: 60px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .header + .content { padding-top: 60px; top: 0px; bottom: auto; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .has-footer .viewport, .sidebar.sidebar-left.sidebar-menu.sidebar-static.has-footer .viewport { padding-bottom: 60px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .has-footer .viewport > .content, .sidebar.sidebar-left.sidebar-menu.sidebar-static.has-footer .viewport > .content { padding-bottom: 0px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .has-footer .content, .sidebar.sidebar-left.sidebar-menu.sidebar-static.has-footer .content { padding-bottom: 60px; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .viewport { position: relative !important; top: auto; bottom: auto; height: 100%; overflow: visible !important; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .viewport > .scrollbar, .sidebar.sidebar-left.sidebar-menu.sidebar-static .viewport > .scrollrail { display: none !important; } .sidebar.sidebar-left.sidebar-menu.sidebar-static .content { position: relative; height: 100%; overflow: visible !important; } .sidebar .header { padding-top: 13px; padding-bottom: 13px; min-height: 60px; } .sidebar .header + .viewport { top: 60px; } .sidebar .header + .content { top: 60px; } .sidebar .has-footer .footer { padding-top: 13px; padding-bottom: 13px; min-height: 60px; } .sidebar .has-footer .viewport { bottom: 60px; } .sidebar .has-footer .content { bottom: 60px; } /* Sidebar minimized */ .sidebar-minimized { /* Sidebar Main */ } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu { position: absolute; left: 0px; top: 0px; bottom: auto; padding-top: 60px; width: 60px; min-height: 100%; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .header { display: none; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .header + .viewport { padding-top: 0px; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .header + .content { padding-top: 0px; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .has-footer .footer, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu.has-footer .footer { display: none; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .has-footer .viewport, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu.has-footer .viewport { padding-bottom: 0px; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .has-footer .viewport > .content, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu.has-footer .viewport > .content { padding-bottom: 0px; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .has-footer .content, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu.has-footer .content { padding-bottom: 0px; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .viewport { position: relative !important; top: auto; bottom: auto; height: 100%; overflow: visible !important; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .viewport > .scrollbar, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .viewport > .scrollrail { display: none !important; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .content { position: relative; height: 100%; width: 60px !important; overflow: visible !important; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .content .wrapper, .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .content .heading { visibility: hidden; overflow: hidden; } .sidebar-minimized .sidebar.sidebar-left.sidebar-menu .content .heading { font-size: 0px; padding: 0px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li:after { left: 0px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li.hover > .submenu { display: block; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li.hover:before { position: absolute; z-index: 1; top: 50%; right: 0px; margin-top: -8px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #202020 transparent transparent; -webkit-box-shadow: inset 1px 0px 4px 0 #1d1d1d; box-shadow: inset 1px 0px 4px 0 #1d1d1d; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li.active > a > .number .label, .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li.active > a > .number .badge { -webkit-box-shadow: 0px 0px 0px 2px #2f2f2f; box-shadow: 0px 0px 0px 2px #2f2f2f; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a { padding-top: 17.5px; padding-bottom: 17.5px; padding-left: 15px; padding-right: 15px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .text { display: none; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .number { display: block; position: absolute; top: 12px; right: 10px; width: auto; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .number .label, .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .number .badge { -webkit-box-shadow: 0px 0px 0px 2px #2a2a2a; box-shadow: 0px 0px 0px 2px #2a2a2a; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .arrow { display: none; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > a > .figure { display: block; width: auto; font-size: 18px; padding: 0px; text-align: center; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu { display: none; position: absolute; left: 60px; top: 0px; width: 200px; height: auto !important; padding-left: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu:after { display: none; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu > li.submenu-header { display: block; font-size: 15px; color: #c3c3c3; font-weight: 600; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 5px; margin-top: -2px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu > li.submenu-header:after { display: none; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu > li:after { left: 15px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu > li > a { padding-left: 35px; padding-right: 15px; padding-top: 1px; padding-bottom: 1px; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu .submenu { position: static; padding-left: 20px; background-color: #161616; } .sidebar-minimized .sidebar .topmenu.topmenu-responsive > li > .submenu .submenu > li > a { padding-top: 1px; padding-bottom: 1px; } } /* ---------------------------- * * Template Main * * --------------------------- */ #main { position: relative; -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; } #header.navbar.navbar-fixed-top ~ #main { padding-top: 100px; } /* Push right */ .csstransforms3d.sidebar-open-ltr #main { -webkit-transform: translate3d(240px, 0px, 0px); -moz-transform: translate3d(240px, 0px, 0px); -o-transform: translate3d(240px, 0px, 0px); -ms-transform: translate3d(240px, 0px, 0px); transform: translate3d(240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #main { left: 240px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #main { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #main { right: 240px; left: auto; } /* Template Main Content */ #main > .container-fluid, #main > .container { padding: 15px; } #main.tribeseditor > .container-fluid, #main.tribeseditor > .container { padding: 0px; } /* Datatable print */ .DTTT_Print #main { padding: 0px !important; } /* Template Section */ section.section { padding-top: 35px; padding-bottom: 35px; } section.section .section-header { margin-bottom: 35px; } /* ---------------------------- * * Template Main - screen-sm * * --------------------------- */ @media (min-width:768px) and (max-width:991px) { /* Push right */ .csstransforms3d.sidebar-open-ltr #main { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #main { left: 0px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #main { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #main { right: 240px; left: auto; } #header.navbar.navbar-fixed-top ~ #main { padding-top: 60px; } #header.navbar ~ #main { padding-top: 0px; } .sidebar.sidebar-left ~ #main { padding-left: 60px; } } /* ---------------------------- * * Template Main - screen-md * * --------------------------- */ @media (min-width:992px) { /* Push right */ .csstransforms3d.sidebar-open-ltr #main { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .no-csstransforms3d.sidebar-open-ltr #main { left: 0px; right: auto; } /* Push left */ .csstransforms3d.sidebar-open-rtl #main { -webkit-transform: translate3d(-240px, 0px, 0px); -moz-transform: translate3d(-240px, 0px, 0px); -o-transform: translate3d(-240px, 0px, 0px); -ms-transform: translate3d(-240px, 0px, 0px); transform: translate3d(-240px, 0px, 0px); } .no-csstransforms3d.sidebar-open-rtl #main { right: 240px; left: auto; } #main { padding-top: 0px; } .sidebar.sidebar-menu + #main { padding-left: 240px; } #header.navbar ~ #main { padding-top: 0px; } #header.navbar.navbar-fixed-top ~ #main { padding-top: 50px; } /* Sidebar minimized */ .sidebar-minimized #header.navbar.navbar-fixed-top ~ #main { padding-top: 50px; } .sidebar-minimized #header.navbar ~ #main { padding-top: 0px; } .sidebar-minimized .sidebar.sidebar-left ~ #main { padding-left: 60px; } } /* ---------------------------- * * Template Header - screen-xm * * --------------------------- */ @media (max-width:767px) { #header.navbar .navbar-header > .navbar-brand > .logo-figure { display: none; } } /* -- top --- */ .backtopbutton { background-color: rgba(26, 188, 156, .6); display: block; position: fixed; bottom: 5px; right: 5px; color: #fff; padding: 3px 10px; font-size: 1.2em; border-radius: 3px; -moz-border-radius: 3px; line-height: 200%; text-align: center; opacity: 0.7; z-index: 2000; } .backtopbutton:hover { color: #fff; opacity: 1; } .backtopbutton .icon-text { display: block; font-size: 30px; } /*===================================== END BACKEND LAYOUT ======================================*/ /* ---------------------------- * * Font * * --------------------------- */ /* Import External Stylesheet */ .font-alt { font-family: "Roboto Slab", 'Noto Sans TC', "Microsoft JhengHei", Arial, Helvetica, sans-serif; } /* Font Size ------------------------------- */ .fsize12, .smallfont { font-size: 12px !important; } .fsize14 { font-size: 14px !important; } .fsize16 { font-size: 16px !important; } .fsize24 { font-size: 24px !important; } .fsize32 { font-size: 32px !important; } .fsize48 { font-size: 48px !important; } .fsize64 { font-size: 64px !important; } .fsize80 { font-size: 80px !important; } .fsize96 { font-size: 96px !important; } .fsize112 { font-size: 112px !important; } .fsize128 { font-size: 128px !important; } /* ---------------------------- * * Brand * * --------------------------- */ .logo-text, .logo-figure { display: inline-block; vertical-align: top; text-decoration: none; height: 46px; } .logo-text { background-image: url("../img/logo/logo-text.png"); background-repeat: no-repeat; background-size: 188px 45px; width: 115px; } .logo-text + .logo-figure { margin-left: -13px; } .logo-text.inverse { background-image: url("../img/logo/logo-text-inverse.png"); } .logo-figure { width: 32px; background-image: url("../img/logo/logo-figure.png"); background-repeat: no-repeat; background-position: 0px 8px; background-size: 32px 32px; } .logo-figure + .logo-text { margin-left: -13px; } .logo-figure.inverse { background-image: url("../img/logo/logo-figure-inverse.png"); } /* ---------------------------- * * Brand - retina * * --------------------------- */ @media only screen and (-Webkit-min-device-pixel-ratio:1.5), only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5) { .logo-text { background-image: url("../img/logo/logo-text@2x.png"); margin-left: 0 !important; background-size: 90%; } .logo-text.inverse { background-image: url("../img/logo/logo-text-inverse@2x.png"); } .logo-figure { background-image: url("../img/logo/logo-figure@2x.png"); background-size: 32px 32px; } .logo-figure.inverse { background-image: url("../img/logo/logo-figure-inverse@2x.png"); } #header.navbar .navbar-toolbar .tab-search .form-control { background: transparent; color: #fff; font-size: 15px; border-top: 0px solid #fff; border-right: 0px solid #fff; border-left: 0px solid #fff; border-bottom: 0px solid #fff; display: inline-block; vertical-align: middle; margin-left: 0px; width: 80%; } #header.navbar .navbar-header { height: 0px; float: none; background: #fff; } #header.navbar .navbar-header > .navbar-brand { height: 55px; } .sidebar .content .heading { padding: 22px 25px 15px 25px; color: #a9a9a9; background: #4f5467; border-bottom: 1px solid #696d7c; } } /* ---------------------------- * * Helper Class * * --------------------------- */ /* Margin */ .ma15 { margin: 15px !important; } .ma10 { margin: 10px !important; } .ma5 { margin: 5px !important; } .nm { margin: 0px !important; } .ma-15 { margin: -15px !important; } .ma-10 { margin: -10px !important; } .ma-5 { margin: -5px !important; } .mt15 { margin-top: 15px !important; } .mt10 { margin-top: 10px !important; } .mt7 { margin-top: 7px !important; } .mt5 { margin-top: 5px !important; } .mt0 { margin-top: 0px !important; } .mt-15 { margin-top: -15px !important; } .mt-10 { margin-top: -10px !important; } .mt-5 { margin-top: -5px !important; } .mr15 { margin-right: 15px !important; } .mr10 { margin-right: 10px !important; } .mr5 { margin-right: 5px !important; } .mr0 { margin-right: 0px !important; } .mr-15 { margin-right: -15px !important; } .mr-10 { margin-right: -10px !important; } .mr-5 { margin-right: -5px !important; } .mb15 { margin-bottom: 15px !important; } .mb10 { margin-bottom: 10px !important; } .mb5 { margin-bottom: 5px !important; } .mb0 { margin-bottom: 0px !important; } .mb-15 { margin-bottom: -15px !important; } .mb-10 { margin-bottom: -10px !important; } .mb-5 { margin-bottom: -5px !important; } .ml15 { margin-left: 15px !important; } .ml10 { margin-left: 10px !important; } .ml5 { margin-left: 5px !important; } .ml0 { margin-left: 0px !important; } .ml-15 { margin-left: -15px !important; } .ml-10 { margin-left: -10px !important; } .ml-5 { margin-left: -5px !important; } /* Padding */ .pa15 { padding: 15px !important; } .pa10 { padding: 10px !important; } .pa5 { padding: 5px !important; } .np { padding: 0px !important; } .pt15 { padding-top: 15px !important; } .pt10 { padding-top: 10px !important; } .pt5 { padding-top: 5px !important; } .pt0 { padding-top: 0px !important; } .pr15 { padding-right: 15px !important; } .pr10 { padding-right: 10px !important; } .pr5 { padding-right: 5px !important; } .pr0 { padding-right: 0px !important; } .pb15 { padding-bottom: 15px !important; } .pb10 { padding-bottom: 10px !important; } .pb5 { padding-bottom: 5px !important; } .pb0 { padding-bottom: 10px !important; } .pl15 { padding-left: 15px !important; } .pl10 { padding-left: 10px !important; } .pl5 { padding-left: 5px !important; } .pl0 { padding-left: 0px !important; } /* Vertical align */ .valign-top { vertical-align: top !important; } .valign-middle { vertical-align: middle !important; } .valign-bottom { vertical-align: bottom !important; } /* Misc */ .bradius0 { border-radius: 0px !important; } .bdr0 { border-width: 0px !important; } .noshadow { -webkit-box-shadow: none !important; box-shadow: none !important; } .dis-none { display: none; } .overflow-hidden { overflow: hidden; } .float-none { float: none !important; } .nowrap { white-space: nowrap !important; } .num { font-family: "Roboto Slab", 'Noto Sans TC', "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight: lighter; } a, button, input, a:before { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } /* ---------------------------- * * Forms * * --------------------------- */ .form-control { padding: 6px 3px;font-size: 15px; border: 1px solid #cfd9db; line-height: normal; -moz-box-shadow: none; box-shadow: none; border-radius: 0px; } .form-control.form-control-minimal { border-width: 0px; border-radius: 0px; background-color: transparent; } .form-control:focus { -moz-box-shadow: none; box-shadow: none; border-color: #00b1e1; } .input-group { width: 100%; } #storedetailset .form-control { font-size: 13px; padding: 6px 3px; } #storedetailset .form-horizontal.form-bordered .form-group, #storedetailset .form-horizontal.form-striped .form-group { padding-top: 7px; padding-bottom: 7px; border-top: 0px solid transparent !important } #storedetailset .form-horizontal .control-label { font-size: 12px; letter-spacing: -0.04em; } #storedetailset .panel-body { padding: 0 15px; } #storedetailset .custom-checkbox > label, #storedetailset .custom-radio > label, #storedetailset .checkbox-icon > label { position: relative; padding-left: 14px; cursor: pointer; font-weight: normal; margin: 0px; } .storestatus .form-horizontal .control-label { padding-top: 12px !important; } /* Input with icon */ .has-icon { position: relative; float: none !important; } .has-icon > .form-control { padding-right: 34px; } .has-icon.pull-left > .form-control { padding-left: 34px; padding-right: 0px; } .has-icon.pull-left > .form-control-icon { right: auto; left: 0px; } .has-icon > .form-control-icon { position: absolute; z-index: 5; top: 0px; right: 0px; width: 34px; line-height: 33px; text-align: center; color: #777777; } .has-icon > .form-control.input-lg + .form-control-icon { line-height: 45px; } /* Form Feedback */ .has-feedback .form-control-feedback { color: #777777; } .form-horizontal .has-feedback > .form-control-feedback { right: 0px; } .has-success .form-control-feedback { color: #4e7325; } .has-warning .form-control-feedback { color: #d09700; } .has-error .form-control-feedback { color: #a11122; } /* Form stack */ .form-group .form-stack + .form-stack .form-control { margin-top: -1px; } .form-group .form-stack .form-control { position: relative; border-radius: 0px; margin-top: -1px; z-index: 1; } .form-group .form-stack .form-control.input-lg { font-size: 13px; } .form-group .form-stack:first-child .form-control, .form-group .form-stack-wrapper > .form-stack:first-child .form-control { border-top-left-radius: 4px; border-top-right-radius: 4px; } .form-group .form-stack:last-child .form-control, .form-group .form-stack-wrapper > .form-stack:last-child .form-control { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .form-group .form-stack .form-control:focus { z-index: 2; } .control-label { font-weight: 600; color: #3a3a3a; } .help-block { color: #888888; } .input-group-addon { color: #a2a2a2; border-color: #cfd9db; background-color: #f5f5f5; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: auto; } .input-lg { font-size: 16px; } .input-sm { font-size: 12px; } .input-mini { width: 90px !important; min-width: 90px !important; } .input-xs { width: 60px !important; min-width: 0px !important; padding: 5px 2px; display: inline-block; vertical-align: bottom; margin-top: 2px; } .autowidth { width: auto !important; } /* Input */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], textarea { -webkit-appearance: none; } /* checkbox & radio */ input[type="radio"], input[type="checkbox"] { margin: 2px 0 0; margin-top: 1px \9; line-height: normal; } .radio-inline ~ .radio-inline, .checkbox-inline ~ .checkbox-inline { margin-top: 0; margin-left: 10px; } .checkbox, .radio, .checkbox label, .radio label, .checkbox-inline, .radio-inline, .checkbox-inline label, .radio-inline label { min-height: 18px; margin-bottom: 0px; margin-top: 0px; font-weight: normal; } /* custom checkbox & radio */ .custom-checkbox.checkbox, .custom-checkbox.checkbox-inline, .custom-radio.radio, .custom-radio.radio-inline, .checkbox-icon.checkbox, .checkbox-icon.checkbox-inline { padding-left: 0px; } .custom-checkbox > label, .custom-radio > label, .checkbox-icon > label { position: relative; padding-left: 18px; cursor: pointer; font-weight: normal; margin: 0px; } .custom-checkbox > label:before, .custom-checkbox > label:after, .custom-radio > label:before, .custom-radio > label:after, .checkbox-icon > label:before, .checkbox-icon > label:after { font-family: "iconfont"; font-weight: normal; text-shadow: none; position: absolute; top: 0; left: 0; } /* custom checkbox & radio - hover */ .custom-checkbox:hover > label:before, .custom-radio:hover > label:before { border: 1px solid #00b6ad; } /* custom checkbox & radio - unchecked */ .custom-checkbox > label:before { content: ""; width: 18px; height: 18px; border: 1px solid #c8c8c8; border-radius: 3px; } .custom-radio > label:before { content: ""; width: 18px; height: 18px; border: 1px solid #c8c8c8; border-radius: 50%; } .checkbox-icon > label:before { content: ""; width: 18px; height: 18px; } .custom-checkbox > input[type="checkbox"]:checked + label:before, .custom-radio > input[type="radio"]:checked + label:before { border-color: #00b6ad; background-color: #00b6ad; } /* custom checkbox & radio - checked */ .custom-checkbox > label:after { float: left; content: "\e370"; overflow: hidden; color: transparent; font-size: 10px; line-height: 10px; left: 4px; top: 4px; -webkit-transition: max-width ease 0.1s; -moz-transition: max-width ease 0.1s; -o-transition: max-width ease 0.1s; transition: max-width ease 0.1s; } .custom-checkbox > input[type="checkbox"]:checked + label:after { color: #ffffff; } .custom-radio > label:after { float: left; content: ""; overflow: hidden; background-color: transparent; width: 8px; height: 8px; border-radius: 50%; left: 5px; top: 5px; -webkit-transition: max-width ease 0.1s; -moz-transition: max-width ease 0.1s; -o-transition: max-width ease 0.1s; transition: max-width ease 0.1s; } .custom-radio > input[type="radio"]:checked + label:after { background-color: #ffffff; } .checkbox-icon > label:after { float: left; overflow: hidden; color: #94aab0; font-size: 16px; line-height: 16px; left: 1px; top: 1px; -webkit-transition: max-width ease 0.1s; -moz-transition: max-width ease 0.1s; -o-transition: max-width ease 0.1s; transition: max-width ease 0.1s; } .checkbox-icon:hover > label:after { color: #77939a; } /* checkbox-icon icon */ .checkbox-icon.icon-star > label:after { content: "\e2ff"; top: 0px; } .checkbox-icon.icon-star > input[type="checkbox"]:checked + label:after { content: "\e301"; color: #ffd66a; } .checkbox-icon.icon-heart > label:after { content: "\e682"; } .checkbox-icon.icon-heart > input[type="checkbox"]:checked + label:after { content: "\e604"; color: #ed5466; } /* hide the checkbox & radio */ .custom-checkbox > input[type="checkbox"], .custom-radio > input[type="radio"], .checkbox-icon > input[type="checkbox"] { display: none; } /* contextual */ .custom-checkbox-primary:hover > label:before, .custom-radio-primary:hover > label:before { border: 1px solid #00b1e1; } .custom-checkbox-primary > input[type="checkbox"]:checked + label:before, .custom-radio-primary > input[type="radio"]:checked + label:before { border-color: #00b1e1; background-color: #00b1e1; } .custom-checkbox-info:hover > label:before, .custom-radio-info:hover > label:before { border: 1px solid #63d3e9; } .custom-checkbox-info > input[type="checkbox"]:checked + label:before, .custom-radio-info > input[type="radio"]:checked + label:before { border-color: #63d3e9; background-color: #63d3e9; } .has-success .custom-checkbox > label:before, .has-success .custom-radio > label:before, .has-success .custom-checkbox:hover > label:before, .has-success .custom-radio:hover > label:before, .custom-checkbox-success:hover > label:before, .custom-radio-success:hover > label:before { border: 1px solid #91c854; } .has-success .custom-checkbox > input[type="checkbox"]:checked + label:before, .has-success .custom-radio > input[type="radio"]:checked + label:before, .custom-checkbox-success > input[type="checkbox"]:checked + label:before, .custom-radio-success > input[type="radio"]:checked + label:before { border-color: #91c854; background-color: #91c854; } .has-warning .custom-checkbox > label:before, .has-warning .custom-radio > label:before, .has-warning .custom-checkbox:hover > label:before, .has-warning .custom-radio:hover > label:before, .custom-checkbox-warning:hover > label:before, .custom-radio-warning:hover > label:before { border: 1px solid #ffd66a; } .has-warning .custom-checkbox > input[type="checkbox"]:checked + label:before, .has-warning .custom-radio > input[type="radio"]:checked + label:before, .custom-checkbox-warning > input[type="checkbox"]:checked + label:before, .custom-radio-warning > input[type="radio"]:checked + label:before { border-color: #ffd66a; background-color: #ffd66a; } .has-error .custom-checkbox > label:before, .has-error .custom-radio > label:before, .has-error .custom-checkbox:hover > label:before, .has-error .custom-radio:hover > label:before, .custom-checkbox-danger:hover > label:before, .custom-radio-danger:hover > label:before { border: 1px solid #ed5466; } .has-error .custom-checkbox > input[type="checkbox"]:checked + label:before, .has-error .custom-radio > input[type="radio"]:checked + label:before, .custom-checkbox-danger > input[type="checkbox"]:checked + label:before, .custom-radio-danger > input[type="radio"]:checked + label:before { border-color: #ed5466; background-color: #ed5466; } .custom-checkbox-teal:hover > label:before, .custom-radio-teal:hover > label:before { border: 1px solid #6bccb4; } .custom-checkbox-teal > input[type="checkbox"]:checked + label:before, .custom-radio-teal > input[type="radio"]:checked + label:before { border-color: #6bccb4; background-color: #6bccb4; } .custom-checkbox-inverse:hover > label:before, .custom-radio-inverse:hover > label:before { border: 1px solid #2a2a2a; } .custom-checkbox-inverse > input[type="checkbox"]:checked + label:before, .custom-radio-inverse > input[type="radio"]:checked + label:before { border-color: #2a2a2a; background-color: #2a2a2a; } /* custom file upload */ .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0px; right: 0px; min-width: 100%; min-height: 100%; font-size: 999px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block; } /* Input state */ .has-success .form-control { border-color: #91c854; } .has-success .form-control:focus { border-color: #91c854; } .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline { color: #91c854; } .has-success .input-group-addon { color: #436320; border-color: #91c854; background-color: #91c854; } .has-error .form-control { border-color: #ed5466; } .has-error .form-control:focus { border-color: #ed5466; } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline { color: #ed5466; } .has-error .input-group-addon { color: #981020; border-color: #ed5466; background-color: #ed5466; } .has-warning .form-control { border-color: #ffd66a; } .has-warning .form-control:focus { border-color: #ffd66a; } .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline { color: #ffd66a; } .has-warning .input-group-addon { color: #d09700; border-color: #ffd66a; background-color: #ffd66a; } .has-success .form-control, .has-error .form-control, .has-warning .form-control, .has-success .form-control:focus, .has-error .form-control:focus, .has-warning .form-control:focus { -moz-box-shadow: none; box-shadow: none; } /* Form horizontal - bordered */ .form-horizontal.form-bordered .form-group, .form-horizontal.form-striped .form-group { padding-top: 15px; padding-bottom: 15px; margin-bottom: 0px; border-top: 1px solid transparent; border-top-color: #e0e7e8 !important; } .form-horizontal.form-bordered .form-group .no-border, .form-horizontal.form-striped .form-group .no-border { border-top-width: 0px; } .form-horizontal.form-bordered .form-group .help-block, .form-horizontal.form-striped .form-group .help-block { margin-bottom: 0px; } .form-horizontal.form-bordered .form-group:first-child, .form-horizontal.form-striped .form-group:first-child { border-top-width: 0px; } .form-horizontal.form-bordered .form-group:first-child.header, .form-horizontal.form-striped .form-group:first-child.header { border-top-left-radius: 3px; border-top-right-radius: 3px; } .form-horizontal.form-striped .form-group:nth-child(even) { background-color: #f8f8f8; } .form-horizontal .form-group.message-container { padding: 15px; } .form-horizontal .form-group.message-container:empty { display: none; } .form-horizontal .form-group.message-container:empty + .form-group { border-top-width: 0px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .form-horizontal .form-group.message-container > .alert { margin-bottom: 0px; } /* Parsley validation */ .parsley-errors-list { display: none; margin: 0px; padding: 0px; } .parsley-errors-list.filled { display: block; } .parsley-errors-list > li { font-size: 12px; list-style: none; color: #ed5466; } .parsley-error { border-color: #ed5466 !important; } .parsley-custom-error-message { color: #ed5466; } /* checkbox + radio */ .parsley-error.custom-checkbox > label:before, .parsley-error.custom-radio > label:before, .parsley-error.custom-checkbox:hover > label:before, .parsley-error.custom-radio:hover > label:before { border: 1px solid #ed5466; } .parsley-error.custom-checkbox > input[type="checkbox"]:checked + label:before, .parsley-error.custom-radio > input[type="checkbox"]:checked + label:before { border-color: #ed5466; background-color: #ed5466; } .parsley-error.custom-checkbox > label, .parsley-error.custom-radio > label { color: #ed5466; } /* ---------------------------- * * Button & Link * * --------------------------- */ /* anchor reset */ a { color: #387735; text-decoration: none; } a:hover, a:focus, a:active { color: #009dc8; outline: 0; text-decoration: none; } /* button reset */ .btn { font-size: 15px; padding: 7px 25px; line-height: 18px; border-radius: 0px; } .btn:hover, .btn:active, .btn:focus { outline: none !important; } .btn:active, .btn.active { -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1); } .btn > .caret { margin-top: -1px; } .btn-lg { font-size: 18px; padding: 10px 16px; } .btn-sm { font-size: 12px; padding: 5px 10px; } .btn-xs { font-size: 11px; padding: 1px 5px; } .btn.btn-link { color: #00b1e1; } .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link:focus { color: #009dc8; outline: 0; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; } /* button group reset */ .btn-group.open .dropdown-toggle { outline: none; -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1); } .btn-group.open .btn-outline { background-color: transparent !important; } /* button tag */ .btn-tag .btn { margin-bottom: 3px; } /* button caret color */ .btn-inverse .caret, .btn-teal .caret { border-top-color: #fff; } /* btn grey - color reset */ .btn-grey { color: #333; background-color: #ededed; border-color: #ededed; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0); } .btn-grey.btn-outline { background-color: transparent; color: #aaaaaa; text-shadow: none; } .btn-grey.btn-outline:hover, .btn-grey.btn-outline:active, .btn-grey.btn-outline:focus { background-color: transparent; border-color: #c0cdd1; color: #919191; } /* btn default - color reset */ .btn-default { color: #fff; background-color: #8ec31f; border-color: #8ec31f; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0); } .btn-default.btn-outline { background-color: transparent; color: #aaaaaa; text-shadow: none; } .btn-default.btn-outline:hover, .btn-default.btn-outline:active, .btn-default.btn-outline:focus { background-color: transparent; border-color: #c0cdd1; color: #919191; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #777777; background-color: #ededed; border-color: #c6d2d5; } /* btn primary - color reset */ .btn-primary { background-color: #1bbc9b; border-color: #1bbc9b; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-primary.btn-outline { background-color: transparent; color: #00bdf0; text-shadow: none; } .btn-primary.btn-outline:hover, .btn-primary.btn-outline:active, .btn-primary.btn-outline:focus { background-color: transparent; border-color: #0099c2; color: #00b1e1; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-color: #8ec31f; border-color: #8ec31f; } /* btn success - color reset */ .btn-success { background-color: #91c854; border-color: #8ac448; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-success.btn-outline { background-color: transparent; color: #98cc60; text-shadow: none; } .btn-success.btn-outline:hover, .btn-success.btn-outline:active, .btn-success.btn-outline:focus { background-color: transparent; border-color: #82c03e; color: #91c854; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { background-color: #8ac448; border-color: #82c03e; } /* btn info - color reset */ .btn-info { background-color: #63d3e9; border-color: #36c6e3; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-info.btn-outline { background-color: transparent; color: #70d7eb; text-shadow: none; } .btn-info.btn-outline:hover, .btn-info.btn-outline:active, .btn-info.btn-outline:focus { background-color: transparent; border-color: #48cbe5; color: #63d3e9; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { background-color: #56cfe7; border-color: #48cbe5; } /* btn warning - color reset */ .btn-warning { background-color: #f7a21c; border-color: #f7a21c; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-warning.btn-outline { background-color: transparent; color: #ffda79; text-shadow: none; } .btn-warning.btn-outline:hover, .btn-warning.btn-outline:active, .btn-warning.btn-outline:focus { background-color: transparent; border-color: #ffce4b; color: #ffd66a; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning { background-color: #ffd25b; border-color: #ffce4b; } /* btn danger - color reset */ .btn-danger { background-color: #ed5466; border-color: #ec465a; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-danger.btn-outline { background-color: transparent; color: #ee6272; text-shadow: none; } .btn-danger.btn-outline:hover, .btn-danger.btn-outline:active, .btn-danger.btn-outline:focus { background-color: transparent; border-color: #ea384d; color: #ed5466; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { background-color: #ec465a; border-color: #ea384d; } /* btn inverse - color reset */ .btn-inverse { color: #ffffff; background-color: #2a2a2a; border-color: #222222; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-inverse.btn-outline { background-color: transparent; color: #323232; text-shadow: none; } .btn-inverse.btn-outline:hover, .btn-inverse.btn-outline:active, .btn-inverse.btn-outline:focus { background-color: transparent; border-color: #1b1b1b; color: #2a2a2a; } .btn-inverse.disabled, .btn-inverse[disabled], fieldset[disabled] .btn-inverse, .btn-inverse.disabled:hover, .btn-inverse[disabled]:hover, fieldset[disabled] .btn-inverse:hover, .btn-inverse.disabled:focus, .btn-inverse[disabled]:focus, fieldset[disabled] .btn-inverse:focus, .btn-inverse.disabled:active, .btn-inverse[disabled]:active, fieldset[disabled] .btn-inverse:active, .btn-inverse.disabled.active, .btn-inverse[disabled].active, fieldset[disabled] .btn-inverse.active, .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .open .dropdown-toggle.btn-inverse { color: #ffffff; background-color: #222222; border-color: #1b1b1b; } /* btn teal - color reset */ .btn-teal { color: #ffffff; background-color: #6bccb4; border-color: #60c8ae; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-teal.btn-outline { background-color: transparent; color: #76d0ba; text-shadow: none; } .btn-teal.btn-outline:hover, .btn-teal.btn-outline:active, .btn-teal.btn-outline:focus { background-color: transparent; border-color: #54c4a8; color: #6bccb4; } .btn-teal.disabled, .btn-teal[disabled], fieldset[disabled] .btn-teal, .btn-teal.disabled:hover, .btn-teal[disabled]:hover, fieldset[disabled] .btn-teal:hover, .btn-teal.disabled:focus, .btn-teal[disabled]:focus, fieldset[disabled] .btn-teal:focus, .btn-teal.disabled:active, .btn-teal[disabled]:active, fieldset[disabled] .btn-teal:active, .btn-teal.disabled.active, .btn-teal[disabled].active, fieldset[disabled] .btn-teal.active, .btn-teal:hover, .btn-teal:focus, .btn-teal:active, .btn-teal.active, .open .dropdown-toggle.btn-teal { color: #ffffff; background-color: #60c8ae; border-color: #54c4a8; } /* btn facebook - color reset */ .btn-facebook { color: #ffffff; background-color: #3b5998; border-color: #37538d; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-facebook.btn-outline { background-color: transparent; color: #3f5fa3; text-shadow: none; } .btn-facebook.btn-outline:hover, .btn-facebook.btn-outline:active, .btn-facebook.btn-outline:focus { background-color: transparent; border-color: #324c82; color: #3b5998; } .btn-facebook.disabled, .btn-facebook[disabled], fieldset[disabled] .btn-facebook, .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled:active, .btn-facebook[disabled]:active, fieldset[disabled] .btn-facebook:active, .btn-facebook.disabled.active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook.active, .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook { color: #ffffff; background-color: #37538d; border-color: #324c82; } /* btn twitter - color reset */ .btn-twitter { color: #ffffff; background-color: #55acee; border-color: #47a5ed; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .btn-twitter.btn-outline { background-color: transparent; color: #63b3ef; text-shadow: none; } .btn-twitter.btn-outline:hover, .btn-twitter.btn-outline:active, .btn-twitter.btn-outline:focus { background-color: transparent; border-color: #399eeb; color: #55acee; } .btn-twitter.disabled, .btn-twitter[disabled], fieldset[disabled] .btn-twitter, .btn-twitter.disabled:hover, .btn-twitter[disabled]:hover, fieldset[disabled] .btn-twitter:hover, .btn-twitter.disabled:focus, .btn-twitter[disabled]:focus, fieldset[disabled] .btn-twitter:focus, .btn-twitter.disabled:active, .btn-twitter[disabled]:active, fieldset[disabled] .btn-twitter:active, .btn-twitter.disabled.active, .btn-twitter[disabled].active, fieldset[disabled] .btn-twitter.active, .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open .dropdown-toggle.btn-twitter { color: #ffffff; background-color: #47a5ed; border-color: #399eeb; } /* pagination */ .pagination > li > a, .pager > li > a, .pagination > li > span, .pager > li > span { color: #00b1e1; border-color: #cfd9db; } .pagination > li > a:hover, .pager > li > a:hover, .pagination > li > span:hover, .pager > li > span:hover, .pagination > li > a:focus, .pager > li > a:focus, .pagination > li > span:focus, .pager > li > span:focus { color: #00a5d2; background-color: #f5f5f5; border-color: #c9d4d7; } .pagination > .active > a, .pager > .active > a, .pagination > .active > span, .pager > .active > span, .pagination > .active > a:hover, .pager > .active > a:hover, .pagination > .active > span:hover, .pager > .active > span:hover, .pagination > .active > a:focus, .pager > .active > a:focus, .pagination > .active > span:focus, .pager > .active > span:focus { color: #00a9d7; background-color: #f5f5f5; border-color: #c9d4d7; } /* ---------------------------- * * Ladda button spinner * * --------------------------- */ .ladda-button { position: relative; -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } .ladda-button .ladda-spinner { position: absolute; z-index: 2; display: inline-block; width: 32px; height: 32px; top: 50%; margin-top: -16px; opacity: 0; pointer-events: none; -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } .ladda-button .ladda-label { position: relative; z-index: 3; -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } .ladda-button .ladda-progress { position: absolute; width: 0; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; -webkit-transition: 0.1s linear all !important; -moz-transition: 0.1s linear all !important; -ms-transition: 0.1s linear all !important; -o-transition: 0.1s linear all !important; transition: 0.1s linear all !important; } .ladda-button[data-loading] .ladda-progress { opacity: 1; visibility: visible; } .ladda-button[data-style=zoom-in], .ladda-button[data-style=zoom-out] { -webkit-transition: 0.3s ease all !important; -moz-transition: 0.3s ease all !important; -ms-transition: 0.3s ease all !important; -o-transition: 0.3s ease all !important; transition: 0.3s ease all !important; } .ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-out] .ladda-spinner, .ladda-button[data-style=zoom-in] .ladda-label, .ladda-button[data-style=zoom-out] .ladda-label { -webkit-transition: 0.3s ease all !important; -moz-transition: 0.3s ease all !important; -ms-transition: 0.3s ease all !important; -o-transition: 0.3s ease all !important; transition: 0.3s ease all !important; } .ladda-button[data-style=expand-right] .ladda-spinner { right: 14px; } .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner { right: 4px; } .ladda-button[data-style=expand-right][data-loading] { padding-right: 56px; } .ladda-button[data-style=expand-right][data-loading] .ladda-spinner { opacity: 1; } .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] { padding-right: 40px; } .ladda-button[data-style=expand-left] .ladda-spinner { left: 14px; } .ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner { left: 4px; } .ladda-button[data-style=expand-left][data-loading] { padding-left: 56px; } .ladda-button[data-style=expand-left][data-loading] .ladda-spinner { opacity: 1; } .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] { padding-left: 40px; } .ladda-button[data-style=expand-up] { overflow: hidden; } .ladda-button[data-style=expand-up] .ladda-spinner { top: -32px; left: 50%; margin-left: -16px; } .ladda-button[data-style=expand-up][data-size="s"] .ladda-spinner { left: 4px; } .ladda-button[data-style=expand-up][data-loading] { padding-top: 54px; } .ladda-button[data-style=expand-up][data-loading] .ladda-spinner { opacity: 1; top: 14px; margin-top: 0; } .ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] { padding-top: 32px; } .ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner { top: 4px; } .ladda-button[data-style=expand-down] { overflow: hidden; } .ladda-button[data-style=expand-down] .ladda-spinner { top: 62px; left: 50%; margin-left: -16px; } .ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner { top: 40px; } .ladda-button[data-style=expand-down][data-loading] { padding-bottom: 54px; } .ladda-button[data-style=expand-down][data-loading] .ladda-spinner { opacity: 1; top: 32px; margin-top: 0; } .ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] { padding-bottom: 32px; } .ladda-button[data-style=slide-left] { overflow: hidden; } .ladda-button[data-style=slide-left] .ladda-label { position: relative; } .ladda-button[data-style=slide-left] .ladda-spinner { left: 100%; margin-left: -16px; } .ladda-button[data-style=slide-left][data-loading] .ladda-label { opacity: 0; left: -100%; } .ladda-button[data-style=slide-left][data-loading] .ladda-spinner { opacity: 1; left: 50%; } .ladda-button[data-style=slide-right] { overflow: hidden; } .ladda-button[data-style=slide-right] .ladda-label { position: relative; } .ladda-button[data-style=slide-right] .ladda-spinner { right: 100%; margin-left: -16px; } .ladda-button[data-style=slide-right][data-loading] .ladda-label { opacity: 0; left: 100%; } .ladda-button[data-style=slide-right][data-loading] .ladda-spinner { opacity: 1; left: 50%; } .ladda-button[data-style=slide-up] { overflow: hidden; } .ladda-button[data-style=slide-up] .ladda-label { position: relative; } .ladda-button[data-style=slide-up] .ladda-spinner { left: 50%; margin-left: -16px; margin-top: 1em; } .ladda-button[data-style=slide-up][data-loading] .ladda-label { opacity: 0; top: -1em; } .ladda-button[data-style=slide-up][data-loading] .ladda-spinner { opacity: 1; margin-top: -16px; } .ladda-button[data-style=slide-down] { overflow: hidden; } .ladda-button[data-style=slide-down] .ladda-label { position: relative; } .ladda-button[data-style=slide-down] .ladda-spinner { left: 50%; margin-left: -16px; margin-top: -2em; } .ladda-button[data-style=slide-down][data-loading] .ladda-label { opacity: 0; top: 1em; } .ladda-button[data-style=slide-down][data-loading] .ladda-spinner { opacity: 1; margin-top: -16px; } .ladda-button[data-style=zoom-out] { overflow: hidden; } .ladda-button[data-style=zoom-out] .ladda-spinner { left: 50%; margin-left: -16px; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); } .ladda-button[data-style=zoom-out] .ladda-label { position: relative; display: inline-block; } .ladda-button[data-style=zoom-out][data-loading] .ladda-label { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .ladda-button[data-style=zoom-in] { overflow: hidden; } .ladda-button[data-style=zoom-in] .ladda-spinner { left: 50%; margin-left: -16px; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } .ladda-button[data-style=zoom-in] .ladda-label { position: relative; display: inline-block; } .ladda-button[data-style=zoom-in][data-loading] .ladda-label { opacity: 0; -webkit-transform: scale(2.2); -moz-transform: scale(2.2); -ms-transform: scale(2.2); -o-transform: scale(2.2); transform: scale(2.2); } .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .ladda-button[data-style=contract] { overflow: hidden; width: 100px; } .ladda-button[data-style=contract] .ladda-spinner { left: 50%; margin-left: -16px; } .ladda-button[data-style=contract][data-loading] { border-radius: 50%; width: 52px; } .ladda-button[data-style=contract][data-loading] .ladda-label { opacity: 0; } .ladda-button[data-style=contract][data-loading] .ladda-spinner { opacity: 1; } .ladda-button[data-style=contract-overlay] { overflow: hidden; width: 100px; box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0); } .ladda-button[data-style=contract-overlay] .ladda-spinner { left: 50%; margin-left: -16px; } .ladda-button[data-style=contract-overlay] [data-loading] { border-radius: 50%; width: 52px; /* outline: 10000px solid rgba( 0, 0, 0, 0.5 ); */ box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); } .ladda-button[data-style=contract-overlay] [data-loading] .ladda-label { opacity: 0; } .ladda-button[data-style=contract-overlay] [data-loading] .ladda-spinner { opacity: 1; } /* ---------------------------- * * Dropdown Menu * * --------------------------- */ .dropdown-menu { font-size: 13px; border-color: #cfd9db; padding: 5px 0px; border-radius: 4px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); } .dropdown-menu .dropdown-menu { position: static; display: block; width: 100%; margin: 0px; padding: 0px; /* reset */ border-width: 0px; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; } .dropdown-menu > li { margin: 0px; text-align: left; } .dropdown-menu > li > a { line-height: 20px; color: #5e5e5e; padding: 7px 15px !important; font-size: 16px; } .dropdown-menu > li > a:active, .dropdown-menu > li > a:focus { outline: 0; } .dropdown-menu > li > a > .icon { display: inline-block; min-width: 14px; text-align: center; margin-right: 6px; } .dropdown-menu > li:active > a, .dropdown-menu > li.active > a { background-color: #fbfbfb; color: #444444; } .dropdown-menu > li:active > a:hover, .dropdown-menu > li.active > a:hover { background-color: #fbfbfb; color: #373737; } .dropdown-menu > .dropdown-header { padding: 6px 15px !important; font-size: 13px; font-weight: 600; } .dropdown-menu > .dropdown-content { padding: 4px 15px; } .dropdown-menu .divider { margin: 4px 0px; background-color: #ecf0f1; } .dropdown-menu.hasarrow:before { position: absolute; z-index: 2; content: ""; top: -7px; left: 6px; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 7px; border-color: transparent transparent #cfd9db transparent; } .dropdown-menu.hasarrow:after { position: absolute; z-index: 3; content: ""; top: -6px; left: 7px; width: 0px; height: 0px; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; } .dropdown-menu.hasarrow.pull-right:after { right: 7px; left: auto; } .dropdown-menu.hasarrow.pull-right:before { right: 6px; left: auto; } /* ---------------------------- * * Label & Badge & Icons * * --------------------------- */ .badge, .label { font-family: "Open Sans", "Microsoft JhengHei", Arial, Helvetica, sans-serif; display: inline-block; font-size: 11px; font-weight: bold; line-height: 1.7; height: 18px; min-width: 18px; padding: 0px 5px; } .badge:empty, .label:empty { display: none; } /* Hasnotification */ .hasnotification { font-family: "Roboto Slab", 'Noto Sans TC', "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight: 500; width: 20px; height: 20px; border-radius: 50%; background-color: #eeeeee; font-size: 14px; color: #fff; display: inline-block; text-indent: 0; line-height: 20px; text-align: center; } /* Color */ .label-default, .badge-default { background-color: #f5f5f5; color: #a9a9a9; } .label-primary, .badge-primary, .hasnotification-primary { background-color: #00b1e1; } .label-success, .badge-success, .hasnotification-success { background-color: #91c854; } .label-info, .badge-info, .hasnotification-info { background-color: #63d3e9; } .label-warning, .badge-warning, .hasnotification-warning { background-color: #ffd66a; } .label-danger, .badge-danger, .hasnotification-danger { background-color: #ed5466; } .label-teal, .badge-teal, .hasnotification-teal { background-color: #6bccb4; } .label-inverse, .badge-inverse, .hasnotification-inverse { background-color: #2a2a2a; color: #ffffff; } /* ---------------------------- * * Icons * * --------------------------- */ /* ---------------------------- * * Blockquote * * --------------------------- */ blockquote { padding-left: 40px; border-width: 0px; } blockquote > p { position: relative; font-style: italic; font-size: 18px !important; } blockquote > p:before { position: absolute; top: -1px; margin-left: -25px; font-family: "iconfont"; font-size: 18px; content: "\e19f"; color: #eeeeee; } blockquote > p:after { position: absolute; bottom: -1px; margin-left: 5px; font-family: "iconfont"; font-size: 18px; content: "\e1a0"; color: #eeeeee; } .blockquote-reverse { padding-left: 20px; padding-right: 40px; border-width: 0px; } /* ---------------------------- * * Breadcrumb * * --------------------------- */ .breadcrumb.breadcrumb-transparent { background-color: transparent; } /* ---------------------------- * * Typography * * --------------------------- */ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Open Sans", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight: normal; } h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small { color: inherit; } /* Helper ------------------------------- */ /* * bold */ .bold { font-weight: 700; } /* * semi bold */ .semibold { font-weight: 100; } /* * Thin */ .thin { font-weight: 300; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Color ------------------------------- */ /* * white */ .text-white { color: #ffffff !important; } /* * accent */ .text-accent { color: #00b24b !important; font-size: 18px; } a.text-accent:hover { color: #009d95 !important; } /* * default */ .text-default { color: #777777 !important; } a.text-default:hover { color: #5e5e5e !important; } /* * white */ .text-white { color: #f2f2f2 !important; } a.text-white:hover { color: #ffffff !important; } /* * muted */ .text-muted { color: #a2a2a2 !important; } a.text-muted:hover { color: #bbbbbb !important; } /* * primary */ .text-primary { color: #00b24b !important; } a.text-primary:hover { color: #009dc8 !important; } /* * success */ .text-success { color: #91c854 !important; } a.text-success:hover { color: #85c241 !important; } /* * info */ .text-info { color: #63d3e9 !important; } a.text-info:hover { color: #4dcde6 !important; } /* * warning */ .text-warning { color: #ffd66a !important; } a.text-warning:hover { color: #ffcf51 !important; } /* * danger */ .text-danger { color: #ed5466 !important; } a.text-danger:hover { color: #eb3d51 !important; } /* * teal */ .text-teal { color: #6bccb4 !important; } a.text-teal:hover { color: #58c5aa !important; } /* Long Shadow text ------------------------------- */ .longshadow { text-shadow: #e2e2e2 1px 1px, #e2e2e2 2px 2px, #e2e2e2 3px 3px, #e3e3e3 4px 4px, #e5e5e5 5px 5px, #e7e7e7 6px 6px, #e8e8e8 7px 7px, #eaeaea 8px 8px, #ececec 9px 9px, #eeeeee 10px 10px; } /* Dropcap ------------------------------- */ .dropcap { float: left; padding: 0px 10px; font-size: 32px; margin-right: 10px; border-radius: 3px; } /* ---------------------------- * * Image * * --------------------------- */ .img-circle { border-radius: 50% !important; } .img-bordered { -webkit-box-shadow: 0px 0px 0px 3px #ffffff; box-shadow: 0px 0px 0px 3px #ffffff; } .img-bordered-primary { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #00b1e1; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #00b1e1; } .img-bordered-success { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #91c854; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #91c854; } .img-bordered-info { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #63d3e9; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #63d3e9; } .img-bordered-warning { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #ffd66a; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #ffd66a; } .img-bordered-danger { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #ed5466; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #ed5466; } .img-bordered-inverse { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #2a2a2a; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #2a2a2a; } .img-bordered-teal { -webkit-box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #6bccb4; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #6bccb4; } /* * image group */ .img-group > img, .img-group > .more { width: 38px; height: 38px; -webkit-box-shadow: 0 0 0 2px #ffffff; box-shadow: 0 0 0 2px #ffffff; } .img-group > .more { display: inline-block; vertical-align: top; background-color: #00b6ad; line-height: 38px; font-size: 14px; font-weight: 600; text-align: center; color: #ffffff; } .img-group-stack > img + img, .img-group-stack > img + .more { margin-left: -18px; } /* * image grid */ .img-grid .row { margin: 0px; } .img-grid .row + .row { padding-top: 5px; } .img-grid .row > [class^="col-"], .img-grid .row [class*=" col-"] { padding: 0px; } .img-grid .row > [class^="col-"] + [class^="col-"], .img-grid .row [class*=" col-"] + [class^="col-"], .img-grid .row > [class^="col-"] [class*=" col-"], .img-grid .row [class*=" col-"] [class*=" col-"] { padding-left: 5px; } .img-grid + .row { padding-top: 5px; } /* ---------------------------- * * Spinner / Loading indicator * * --------------------------- */ .indicator { display: none; position: absolute; z-index: 999; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; background-color: rgba(255, 255, 255, 0.9); border-radius: 2px; cursor: progress; } .indicator.inline { display: block; position: relative; z-index: 9; height: 34px; background-color: transparent; border-radius: 0px; } .indicator > .spinner { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; width: 18px; height: 18px; background-image: url("../img/loading/spinner.gif"); background-repeat: no-repeat; } .indicator > .spinner.spinner1 { background-image: url("../img/loading/spinner1.gif"); } .indicator > .spinner.spinner2 { background-image: url("../img/loading/spinner2.gif"); } .indicator > .spinner.spinner3 { background-image: url("../img/loading/spinner3.gif"); } .indicator > .spinner.spinner4 { background-image: url("../img/loading/spinner4.gif"); } .indicator > .spinner.spinner5 { background-image: url("../img/loading/spinner5.gif"); } .indicator > .spinner.spinner6 { background-image: url("../img/loading/spinner6.gif"); } .indicator > .spinner.spinner7 { background-image: url("../img/loading/spinner7.gif"); } .indicator > .spinner.spinner8 { background-image: url("../img/loading/spinner8.gif"); } .indicator > .spinner.spinner9 { background-image: url("../img/loading/spinner9.gif"); } .indicator > .spinner.spinner10 { background-image: url("../img/loading/spinner10.gif"); } .indicator > .spinner.spinner11 { background-image: url("../img/loading/spinner11.gif"); } .indicator > .spinner.spinner12 { background-image: url("../img/loading/spinner12.gif"); } .indicator > .spinner.spinner13 { background-image: url("../img/loading/spinner13.gif"); } .indicator > .spinner.spinner14 { background-image: url("../img/loading/spinner14.gif"); } .indicator > .spinner.spinner15 { background-image: url("../img/loading/spinner15.gif"); } .indicator > .spinner.spinner16 { background-image: url("../img/loading/spinner16.gif"); } @media only screen and (-Webkit-min-device-pixel-ratio:1.5), only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5) { .indicator .spinner { background-image: url("../img/loading/spinner@2x.gif"); background-size: 18px 18px; background-repeat: no-repeat; } .indicator .spinner.spinner1 { background-image: url("../img/loading/spinner1@2x.gif"); } .indicator .spinner.spinner2 { background-image: url("../img/loading/spinner2@2x.gif"); } .indicator .spinner.spinner3 { background-image: url("../img/loading/spinner3@2x.gif"); } .indicator .spinner.spinner4 { background-image: url("../img/loading/spinner4@2x.gif"); } .indicator .spinner.spinner5 { background-image: url("../img/loading/spinner5@2x.gif"); } .indicator .spinner.spinner6 { background-image: url("../img/loading/spinner6@2x.gif"); } .indicator .spinner.spinner7 { background-image: url("../img/loading/spinner7@2x.gif"); } .indicator .spinner.spinner8 { background-image: url("../img/loading/spinner8@2x.gif"); } .indicator .spinner.spinner9 { background-image: url("../img/loading/spinner9@2x.gif"); } .indicator .spinner.spinner10 { background-image: url("../img/loading/spinner10@2x.gif"); } .indicator .spinner.spinner11 { background-image: url("../img/loading/spinner11@2x.gif"); } .indicator .spinner.spinner12 { background-image: url("../img/loading/spinner12@2x.gif"); } .indicator .spinner.spinner13 { background-image: url("../img/loading/spinner13@2x.gif"); } .indicator .spinner.spinner14 { background-image: url("../img/loading/spinner14@2x.gif"); } .indicator .spinner.spinner15 { background-image: url("../img/loading/spinner15@2x.gif"); } .indicator .spinner.spinner16 { background-image: url("../img/loading/spinner16@2x.gif"); } } /* ---------------------------- * * Google prettify * * --------------------------- */ .pln { color: #000000; } .str { color: #008800; } .kwd { color: #000088; } .com { color: #880000; } .typ { color: #660066; } .lit { color: #006666; } .pun, .opn, .clo { color: #666600; } .tag { color: #000088; } .atn { color: #660066; } .atv { color: #008800; } .dec, .var { color: #660066; } .fun { color: #ff0000; } pre.prettyprint { padding: 2px; } ol.linenums { margin: 0px; } li.L1, li.L3, li.L5, li.L7, li.L9 { background: #eeeeee; } /****************************** Footer ******************************/ footer { width: 100%; background-color: #8ec31f; display: block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; white-space: nowrap; padding: 6px 12px; font-size: 15px; line-height: 1.42857143; position: absolute; bottom: 0; z-index: 99; } .copyright { color: #f0f0f0; text-transform: uppercase; font-family: "Open Sans", "Microsoft JhengHei", sans-serif; } /* ---------------------------- * * Progress Bar * * --------------------------- */ .progress { display: block; margin-bottom: 15px; background-color: #e6ebed; box-shadow: none; -webkit-box-shadow: none; } .progress.progress-sm { height: 15px; } .progress.progress-xs { height: 6px; } .progress .progress-bar { background-color: #00b1e1; box-shadow: none; -webkit-box-shadow: none; } .progress .progress-bar.progress-bar-success { background-color: #91c854; } .progress .progress-bar.progress-bar-info { background-color: #63d3e9; } .progress .progress-bar.progress-bar-warning { background-color: #ffd66a; } .progress .progress-bar.progress-bar-danger { background-color: #ed5466; } /* ---------------------------- * * Modal * * --------------------------- */ .modal-content { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); } .modal-header { border-bottom: 1px solid #cfd9db; } .modal-header + .modal-body { border-radius: 0px; } .modal-body { background-color: #f5f7f7; border-top-left-radius: 3px; border-top-right-radius: 3px; } .modal-footer { margin-top: 0px; border-top: 1px solid #cfd9db; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; text-align: center; } @media (min-width:768px) { .modal-dialog { width: 1000px; margin: 30px auto; } .table-responsive { overflow-x: inherit; } } .modal-dialog { color: #8b99a1; } .modal-dialog h4 { font-size: 15px; } .modal-dialog p { } .modal-dialog .row { margin-bottom: 15px; } .modal-action { font-size: 1em; margin-bottom: 10px; margin-top: 10px; } .modal-action i { margin-right: 7px; } .modal-action .col-xs-5 a.btn-primary:before { font: 24px 'Simple-Line-Icons'; content: "\e084"; margin-right: 5px; vertical-align: middle; } .modalinput { margin-bottom: 30px; } /* ---------------------------- * * Alert * * --------------------------- */ .alert { padding: 10px; } .alert:empty { display: none; } .alert-dismissable { padding-right: 10px; } .alert-dismissable .close { right: 0px; } /* success */ .alert-success { color: #4e7325 !important; background-color: #e0f0cf; border-color: #d2e8b8; } .alert-success .gritter-item, .alert-success .gritter-close { color: #4e7325 !important; } /* info */ .alert-info { color: #16879d !important; background-color: #e9f9fc; border-color: #d3f3f9; } .alert-info .gritter-item, .alert-info .gritter-close { color: #16879d !important; } /* warning */ .alert-warning { color: #da9e00 !important; background-color: #fff9ea; border-color: #fff3d5; } .alert-warning .gritter-item, .alert-warning .gritter-close { color: #da9e00 !important; } /* danger */ .alert-danger { color: #e8263d !important; background-color: #fcdee2; border-color: #faccd1; } .alert-danger .gritter-item, .alert-danger .gritter-close { color: #e8263d !important; } /* ---------------------------- * * Nav * * --------------------------- */ .nav > li h1, .nav > li h2, .nav > li h3, .nav > li h4, .nav > li h5, .nav > li h6 { margin: 0px; } .nav > li > a:hover, .nav > li > a:focus, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; border-color: transparent; } /* Pills */ .nav-pills > li > a { border-radius: 0px; padding: 7px 20px; color: #000; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: #2ecc71; } .nav-pills > li > a:hover, .nav-pills > li > a:focus { background-color: #eeeeee; } /* Tabs */ .nav-tabs { border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #dde4e6; } .nav-tabs > li > a { color: #000; border-top-left-radius: 3px; border-top-right-radius: 3px; } .nav-tabs > li > a:hover, .nav-tabs > li.open > a { color: #777777; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 1px solid #cfd9db; border-bottom-color: transparent; color: #5e5e5e; } /* tab content */ .tab-content.panel { border-top-width: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; } .tab-content.panel .tab-pane { padding: 15px; } /* Justified */ .nav-justified > li { display: table-cell; width: 1%; } .nav-tabs.nav-justified > li > a { margin-bottom: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-color: #cfd9db; } .nav-tabs.nav-justified > li.active > a, .nav-tabs.nav-justified > li.active > a:hover { border-bottom-color: transparent; } /* Section */ .nav-section.nav-justified > li { display: table-cell; width: 1%; } .nav-section > li { position: relative; } .nav-section > li > a, .nav-section > li > .section { position: relative; padding: 5px 10px; margin: 0px; text-align: center; } /* border */ .nav-section > li > a:after, .nav-section > li > .section:after { position: absolute; z-index: 1; content: ""; width: 1px; right: 0px; top: 0px; bottom: 0px; background-image: -webkit-linear-gradient(top, rgba(215, 224, 226, 0.2) 0%, #d7e0e2 50%, rgba(215, 224, 226, 0.2) 100%); background-image: -moz-linear-gradient(top, rgba(215, 224, 226, 0.2) 0%, #d7e0e2 50%, rgba(215, 224, 226, 0.2) 100%); background-image: -o-linear-gradient(top, rgba(215, 224, 226, 0.2) 0%, #d7e0e2 50%, rgba(215, 224, 226, 0.2) 100%); background-image: linear-gradient(to bottom, rgba(215, 224, 226, 0.2) 0%, #d7e0e2 50%, rgba(215, 224, 226, 0.2) 100%); } .nav-section > li:last-child > a:after, .nav-section > li:last-child > .section:after { background: none; filter: none; } /* ---------------------------- * * Table * * --------------------------- */ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { vertical-align: middle; border-color: #cfd9db; padding: 10px; } .table > thead > tr > th, .table tr > th { color: #5e5e5e; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); font-weight: 600; background-color: #f9f9f9; } .table > thead > tr > th { border-bottom: 2px solid #cfd9db !important; } .table-responsive > .table { margin-bottom: 0px; } /* image */ .table .media-object { display: inline-block; width: 30px; height: 30px; } .table .media-object > img { width: 100%; } /* Table email */ .table-email > tbody > tr:first-child > td { border-top-width: 0px; } /* * meta */ .table-email > tbody > tr > td.meta > .sender { margin: 0px; font-size: 13px; font-weight: 600; color: #5e5e5e; } .table-email > tbody > tr > td.meta > .date { margin: 0px; font-size: 12px; color: #aaaaaa; } /* * message */ .table-email > tbody > tr > td.message > .heading { margin: 0px; font-size: 13px; font-weight: 600; } .table-email > tbody > tr > td.message > .text { margin: 0px; color: #919191; } /* Table layout */ .table-layout { display: table; width: 100%; table-layout: fixed; margin-bottom: 20px; padding: 0px; } .table-layout.table-layout-section > [class*=" col-xs"], .table-layout.table-layout-section > [class^="col-xs"] { border-right: 1px solid #ecf0f1; } .table-layout.table-layout-section > [class*=" col-xs"]:last-child, .table-layout.table-layout-section > [class^="col-xs"]:last-child { border-right-width: 0px; } .table-layout > [class*=" col-"], .table-layout > [class^="col-"] { padding: 0px; } .table-layout > .col-xs-1, .table-layout > .col-xs-2, .table-layout > .col-xs-3, .table-layout > .col-xs-4, .table-layout > .col-xs-5, .table-layout > .col-xs-6, .table-layout > .col-xs-7, .table-layout > .col-xs-8, .table-layout > .col-xs-9, .table-layout > .col-xs-10, .table-layout > .col-xs-11 { display: table-cell; table-layout: fixed; float: none; vertical-align: middle; } @media (min-width:768px) { .table-layout > .col-sm-1, .table-layout > .col-sm-2, .table-layout > .col-sm-3, .table-layout > .col-sm-4, .table-layout > .col-sm-5, .table-layout > .col-sm-6, .table-layout > .col-sm-7, .table-layout > .col-sm-8, .table-layout > .col-sm-9, .table-layout > .col-sm-10, .table-layout > .col-sm-11 { display: table-cell; table-layout: fixed; float: none; vertical-align: middle; } .table-layout.table-layout-section > [class*=" col-sm"], .table-layout.table-layout-section > [class^="col-sm"] { border-right: 1px solid #ecf0f1; } .table-layout.table-layout-section > [class*=" col-sm"]:last-child, .table-layout.table-layout-section > [class^="col-sm"]:last-child { border-right-width: 0px; } } @media (min-width:992px) { .table-layout > .col-md-1, .table-layout > .col-md-2, .table-layout > .col-md-3, .table-layout > .col-md-4, .table-layout > .col-md-5, .table-layout > .col-md-6, .table-layout > .col-md-7, .table-layout > .col-md-8, .table-layout > .col-md-9, .table-layout > .col-md-10, .table-layout > .col-md-11 { display: table-cell; table-layout: fixed; float: none; vertical-align: middle; } .table-layout.table-layout-section > [class*=" col-md"], .table-layout.table-layout-section > [class^="col-md"] { border-right: 1px solid #ecf0f1; } .table-layout.table-layout-section > [class*=" col-md"]:last-child, .table-layout.table-layout-section > [class^="col-md"]:last-child { border-right-width: 0px; } } @media (min-width:1200px) { .table-layout > .col-lg-1, .table-layout > .col-lg-2, .table-layout > .col-lg-3, .table-layout > .col-lg-4, .table-layout > .col-lg-5, .table-layout > .col-lg-6, .table-layout > .col-lg-7, .table-layout > .col-lg-8, .table-layout > .col-lg-9, .table-layout > .col-lg-10, .table-layout > .col-lg-11 { display: table-cell; table-layout: fixed; float: none; vertical-align: middle; } .table-layout.table-layout-section > [class*=" col-lg"], .table-layout.table-layout-section > [class^="col-lg"] { border-right: 1px solid #ecf0f1; } .table-layout.table-layout-section > [class*=" col-lg"]:last-child, .table-layout.table-layout-section > [class^="col-lg"]:last-child { border-right-width: 0px; } } /* Table contextual */ /* * hover */ .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #ffffcc; } /* * striped */ .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr.odd > td, .table-striped > tbody > tr:nth-child(odd) > th, .table-striped > tbody > tr.odd > th { background-color: #fbfbfb; } /* * stroke */ .table > thead > tr > td.stroke, .table > tbody > tr > td.stroke, .table > tfoot > tr > td.stroke, .table > thead > tr > th.stroke, .table > tbody > tr > th.stroke, .table > tfoot > tr > th.stroke, .table > thead > tr.stroke > td, .table > tbody > tr.stroke > td, .table > tfoot > tr.stroke > td, .table > thead > tr.stroke > th, .table > tbody > tr.stroke > th, .table > tfoot > tr.stroke > th { background-color: #f5f5f5; color: #ccc; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); text-decoration: line-through; } .table-hover > tbody > tr.stroke:hover > td { background-color: #f5f5f5; } /* * active */ .table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr > .active:hover, .table-hover > tbody > .active:hover > td, .table-hover > tbody > .active:hover > th { background-color: #f5f5f5 !important; border-color: #cfd9db; } /* * info */ .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr > .info:hover, .table-hover > tbody > .info:hover > td, .table-hover > tbody > .info:hover > th { background-color: #e9f9fc !important; border-color: #d3f3f9; } /* * warning */ .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr > .warning:hover, .table-hover > tbody > .warning:hover > td, .table-hover > tbody > .warning:hover > th { background-color: #fff9ea !important; border-color: #fff3d5; } /* * success */ .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr > .success:hover, .table-hover > tbody > .success:hover > td, .table-hover > tbody > .success:hover > th { background-color: #ffffcc !important; border-color: #ddd; } /* * danger */ .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr > .danger:hover, .table-hover > tbody > .danger:hover > td, .table-hover > tbody > .danger:hover > th { background-color: #fcdee2 !important; border-color: #faccd1; } /* * success */ .table > thead > tr > td.closecase, .table > tbody > tr > td.closecase, .table > tfoot > tr > td.closecase, .table > thead > tr > th.closecase, .table > tbody > tr > th.closecase, .table > tfoot > tr > th.closecase, .table > thead > tr.closecase > td, .table > tbody > tr.closecase > td, .table > tfoot > tr.closecase > td, .table > thead > tr.closecase > th, .table > tbody > tr.closecase > th, .table > tfoot > tr.closecase > th, .table-hover > tbody > tr.closecase:hover > td, .table-hover > tbody > tr > .closecase:hover, .table-hover > tbody > .closecase:hover > td, .table-hover > tbody > .closecase:hover > th { background-color: #eee !important; border-color: #eee; } /* Table td toolbar */ .table td .toolbar { display: inline-block; vertical-align: middle; line-height: normal; } .table td .toolbar .btn.btn-link { border: none; padding: 0px 5px; } .table td .toolbar.toolbar-hover { display: none; } .table tr:hover .toolbar.toolbar-hover { display: inline-block; } /* Media query ------------------------------- */ @media (max-width:1024px) { .table td .toolbar { min-width: 80px; } .table-responsive { width: 100%; overflow-x: scroll; overflow-y: hidden; border: 0px; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .panel .table-responsive { border-left: 0px; border-right: 0px; border-top: 0px; } .panel > .panel-collapse { padding: 0px 5px; } .panel-body { padding: 5px; } } /* ---------------------------- * * Thumbnails * * --------------------------- */ .panel .thumbnail { border-radius: 0px; border: 0px; margin-bottom: 0px; } .panel .thumbnail + .thumbnail { margin-top: 5px; } .panel .thumbnail .media img, .panel .thumbnail .media iframe { border-radius: 0px; } .panel .thumbnail .media > .overlay { border-radius: 0px; } .thumbnail { position: relative; padding: 0px; border-width: 0px; border-radius: 3px; } a.thumbnail { position: relative; padding: 4px; border-width: 1px; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #00b1e1; } /* * media */ .thumbnail .media { position: relative; overflow: hidden; margin-top: 0px; } .thumbnail .media > img, .thumbnail .media > iframe { position: relative; z-index: 2; border-radius: 3px; border: 0px; } .thumbnail .media > img[data-toggle="unveil"] { opacity: 0; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .thumbnail .media > img[data-toggle="unveil"].unveiled { opacity: 1; } /* indicator */ .thumbnail .media > .indicator { display: block; z-index: 1; } /* overlay */ .thumbnail .media > .overlay { position: absolute; z-index: 4; border-radius: 3px; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0, 182, 173, 0.4); opacity: 0; color: #ffffff; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .thumbnail .media:hover > .overlay, .thumbnail .media > .overlay.show { opacity: 1; } .touch .thumbnail .media > .overlay { background-color: transparent; opacity: 1; } /* overlay toolbar */ .thumbnail .media > .overlay > .toolbar { position: absolute; top: 50%; margin-top: -20px; width: 100%; text-align: center; } .touch .thumbnail .media > .overlay > .toolbar { top: 15px; margin-top: 0px; } .thumbnail .media > .overlay > .toolbar > .btn { width: 40px; line-height: 26px; border-radius: 50%; overflow: hidden; border: 0px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 300ms ease; -moz-transition: -moz-transform 300ms ease; -o-transition: -o-transform 300ms ease; transition: -webkit-transform 300ms ease, -moz-transform 300ms ease, -o-transform 300ms ease, transform 300ms ease; } .thumbnail .media > .overlay > .toolbar > .btn + .btn { -webkit-transition: -webkit-transform 250ms ease; -moz-transition: -moz-transform 250ms ease; -o-transition: -o-transform 250ms ease; transition: -webkit-transform 250ms ease, -moz-transform 250ms ease, -o-transform 250ms ease, transform 250ms ease; } .thumbnail .media > .overlay > .toolbar > .btn + .btn + .btn { -webkit-transition: -webkit-transform 200ms ease; -moz-transition: -moz-transform 200ms ease; -o-transition: -o-transform 200ms ease; transition: -webkit-transform 200ms ease, -moz-transform 200ms ease, -o-transform 200ms ease, transform 200ms ease; } .thumbnail .media > .overlay > .toolbar > .btn + .btn + .btn + .btn { -webkit-transition: -webkit-transform 150ms ease; -moz-transition: -moz-transform 150ms ease; -o-transition: -o-transform 150ms ease; transition: -webkit-transform 150ms ease, -moz-transform 150ms ease, -o-transform 150ms ease, transform 150ms ease; } .thumbnail .media > .overlay > .toolbar > .btn + .btn + .btn + .btn + .btn { -webkit-transition: -webkit-transform 100ms ease; -moz-transition: -moz-transform 100ms ease; -o-transition: -o-transform 100ms ease; transition: -webkit-transform 100ms ease, -moz-transform 100ms ease, -o-transform 100ms ease, transform 100ms ease; } .thumbnail .media:hover > .overlay > .toolbar > .btn, .touch .thumbnail > .media > .overlay > .toolbar > .btn { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* meta */ .thumbnail .media .meta { position: absolute; z-index: 3; top: 0px; left: 0px; right: 0px; color: #ffffff; padding: 15px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .thumbnail .media .meta.bottom { top: auto; bottom: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .thumbnail .media .meta.darken { background-color: rgba(0, 0, 0, 0.5); } /* * caption */ .thumbnail .caption + .caption { border-top: 1px solid #cfd9db; } .thumbnail > .caption .tag { font-size: 11px; color: #919191; margin: 0px; } /* * Thumbnail album ----------------------------------------------------------------------------- */ .thumbnail-album { border: 1px solid #cfd9db; background-color: #ffffff; padding: 0px; border-radius: 4px; } /* * media */ .thumbnail-album .media > img { border-radius: 3px 3px 0px 0px; } /* overlay */ .thumbnail-album .media > .overlay { border-radius: 3px 3px 0px 0px; } /* * meta */ .thumbnail-album .meta { padding: 9px; margin: 0px; } .thumbnail-album .meta > li { display: table-cell; vertical-align: middle; width: 1%; } /* * panel reset */ .panel .thumbnail-album .media > .overlay { border-radius: 0px; } /* ---------------------------- * * Panel * * --------------------------- */ .panel { /* max-width: 100%; required by text ellipsis */ position: relative; border-width: 0px; border-color: #cfd9db; border-bottom-width: 0px; border-bottom-color: #c0cdd1; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; background: #ffffff; } .panel.no-border { border-width: 0px; } .panel hr { border-color: #dde4e6; } .panel > .panel-collapse { padding: 0px 15px; } .panel > .panel-collapse.pull { display: none; } .panel > .panel-collapse.pull.out { position: relative; display: block; } .panel > .panel-collapse.pulling { position: relative; overflow: hidden; } .panel > .panel-collapse.pull .num { text-align: left; display: block; font-size: 2em; color: #555555; } .panel > .panel-collapse.pull .text-accent { display: block; margin-bottom: 5px; } .panel > .panel-collapse.pull .event-thumb { overflow: hidden; width: 80px; height: 60px; } .panel > .panel-collapse.pull .event-thumb img { width: 100%; height: 60px; object-fit: cover; } .panel > .panel-collapse.pull .event-thumb.banner { width: 150px; height: 80px: } .panel > .panel-collapse.pull .event-thumb.banner img { width: 100%; height: 60px; object-fit: cover; } #photo-album .event-thumb { width: 100%; height: 150px; } #photo-album .event-thumb img { width: 100%; height: 150px; object-fit: cover; } .eventheader a { display: inline-block; } .eventheader a.btnstastics { color: #666; margin-left: 10px; font-size: 12px; } .eventheader a.btnstastics:hover { color: #8ec31f; } .panel-loadmore { display: block; margin: 30px auto; text-align: center; } .panel-loadmore > .media-body > .media-heading { display: block; font-weight: 600; color: #00b6ad; margin-bottom: 0px; } .panel-loadmore .ico-loop4 { display: inline-block; width: 34px; height: 34px; margin: 0px auto 10px auto; line-height: 33px; text-align: center; background-color: #ecf0f1; color: #b1c2c6; border-radius: 50%; } /* panel widget ------------------------------- */ .widget { margin-bottom: 20px; } .widget .panel, .widget.panel { border-bottom-width: 1px; border-bottom-color: #cfd9db; overflow: hidden; } /* panel ribbon * - contextual ------------------------------- */ .panel > .panel-ribbon { position: absolute; z-index: 10; overflow: hidden; top: -1px; left: -1px; width: 40px; height: 40px; border-top-left-radius: 3px; color: #888888; text-decoration: none; } .panel > .panel-ribbon.pull-right { left: auto; right: -1px; border-top-right-radius: 3px; text-align: right; } .panel > .panel-ribbon > [class*=" ico-"], .panel > .panel-ribbon > [class^="ico-"] { display: inline-block; position: relative; width: 13px; line-height: 13px; margin-top: 6px; margin-left: 6px; text-align: center; z-index: 1; } .panel > .panel-ribbon.pull-right > [class*=" ico-"], .panel > .panel-ribbon.pull-right > [class^="ico-"] { margin-right: 6px; margin-left: 0px; } .panel > .panel-ribbon.pull-right:after { border-width: 0 40px 40px 0; border-color: transparent #eeeeee transparent transparent; } .panel > .panel-ribbon:after { position: absolute; top: 0px; left: 0px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 40px 40px 0 0; border-color: #eeeeee transparent transparent transparent; } /* * contextual */ /* primary */ .panel > .panel-ribbon-primary { color: #007594; } .panel > .panel-ribbon-primary:after { border-color: #00b1e1 transparent transparent transparent; } .panel > .panel-ribbon-primary.pull-right:after { border-color: transparent #00b1e1 transparent transparent; } /* success */ .panel > .panel-ribbon-success { color: #6b9d32; } .panel > .panel-ribbon-success:after { border-color: #91c854 transparent transparent transparent; } .panel > .panel-ribbon-success.pull-right:after { border-color: transparent #91c854 transparent transparent; } /* warning */ .panel > .panel-ribbon-warning { color: #ffc11e; } .panel > .panel-ribbon-warning:after { border-color: #ffd66a transparent transparent transparent; } .panel > .panel-ribbon-warning.pull-right:after { border-color: transparent #ffd66a transparent transparent; } /* info */ .panel > .panel-ribbon-info { color: #20c0e0; } .panel > .panel-ribbon-info:after { border-color: #63d3e9 transparent transparent transparent; } .panel > .panel-ribbon-info.pull-right:after { border-color: transparent #63d3e9 transparent transparent; } /* danger */ .panel > .panel-ribbon-danger { color: #dd172f; } .panel > .panel-ribbon-danger:after { border-color: #ed5466 transparent transparent transparent; } .panel > .panel-ribbon-danger.pull-right:after { border-color: transparent #ed5466 transparent transparent; } /* inverse */ .panel > .panel-ribbon-inverse { color: #040404; } .panel > .panel-ribbon-inverse:after { border-color: #2a2a2a transparent transparent transparent; } .panel > .panel-ribbon-inverse.pull-right:after { border-color: transparent #2a2a2a transparent transparent; } /* teal */ .panel > .panel-ribbon-teal { color: #3cae92; } .panel > .panel-ribbon-teal:after { border-color: #6bccb4 transparent transparent transparent; } .panel > .panel-ribbon-teal.pull-right:after { border-color: transparent #6bccb4 transparent transparent; } /* panel heading * - panel icon * - contextual * - reset ------------------------------- */ .panel-heading { padding: 0px 15px; border-top-right-radius: 3px; border-top-left-radius: 3px; /* experiment */ margin-left: -1px; margin-right: -1px; margin-top: -1px; border: 1px solid transparent; } .panel-heading > .panel-title, .panel-heading > .panel-toolbar { display: table-cell; vertical-align: middle; width: 1%; height: 40px; float: none !important; } .panel-heading > .panel-title.ellipsis, .panel-heading > .panel-toolbar.ellipsis { max-width: 10px; } .panel-heading > .panel-title { font-size: 14px; font-weight: 600; } .panel-heading > .panel-title > .icon { margin-right: 5px; } .panel-heading > .panel-title > a, .panel-heading > .panel-title > a:hover, .panel-heading > .panel-title > a:active, .panel-heading > .panel-title > a:focus { text-decoration: none; outline: 0; } .panel-heading > .panel .panel-heading + .panel-body { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } /* Panel Toolbar * static text * button link * option * input field * tabs ------------------------------- */ .panel-toolbar-wrapper { display: block; background-color: #fbfbfb; border-bottom: 1px solid #e8edf1; padding: 0px 15px; } .panel-toolbar-wrapper.bottom { border-bottom-width: 0px; border-top: 1px solid #cfd9db; } .panel-toolbar-wrapper > .panel-toolbar { display: table-cell; vertical-align: middle; width: 1%; height: 40px; float: none !important; } .panel-toolbar-wrapper > .panel-toolbar.ellipsis { max-width: 10px; } .panel .panel-footer > .panel-toolbar-wrapper { background-color: transparent; padding: 0px; border-width: 0px; } /* * static text */ .panel .panel-toolbar .static-text { display: inline-block; vertical-align: middle; line-height: 34px; color: #777777; } /* * btn-link */ .panel .panel-toolbar .btn-link { color: #f3f3f3; text-decoration: none; } .panel .panel-toolbar .btn-link:hover, .panel .panel-toolbar .btn-link:focus, .panel .panel-toolbar .btn-link:active { color: #ffffff; outline: 0; box-shadow: none; -webkit-box-shadow: none; } .panel.panel-default .panel-toolbar .btn-link { color: #00b1e1; } .panel.panel-default .panel-toolbar .btn-link:hover, .panel.panel-default .panel-toolbar .btn-link:active, .panel.panel-default .panel-toolbar .btn-link:focus { color: #009dc8; } /* * option */ .panel .panel-toolbar > .option { display: inline-block; float: right; min-height: 34px; } .panel .panel-toolbar > .option > .btn { float: left; background-color: transparent; color: #bbb; padding-left: 6px; padding-right: 6px; } .panel.panel-default .panel-toolbar > .option > .btn { color: #777777; } .panel .panel-toolbar > .option > .btn:hover, .panel .panel-toolbar > .option > .btn:active, .panel .panel-toolbar > .option > .btn:focus { color: #000; outline: 0; box-shadow: none; -webkit-box-shadow: none; } .panel.panel-default .panel-toolbar > .option > .btn:hover, .panel.panel-default .panel-toolbar > .option > .btn:active, .panel.panel-default .panel-toolbar > .option > .btn:focus { color: #5e5e5e; } /* icon */ .panel .panel-toolbar > .option > .btn .arrow, .panel .panel-toolbar > .option > .btn .reload, .panel .panel-toolbar > .option > .btn .remove { display: block; font-family: 'iconfont'; font-size: 12px; width: 12px; text-align: center; font-style: normal; } .panel .panel-toolbar > .option > .btn.up > .arrow:before { content: "\e670"; } .panel .panel-toolbar > .option > .btn > .arrow:before { content: "\e671"; } .panel .panel-toolbar > .option > .btn > .reload:before { content: "\e61d"; font-size: 13px; } .panel .panel-toolbar > .option > .btn > .remove:before { content: "\e36c"; } /* * input field */ .panel .panel-toolbar > .form-horizontal .form-group { margin: 0px; } .panel .panel-toolbar > .form-horizontal .has-feedback .form-control-feedback { right: 0px; } /* * tabs */ .panel .panel-toolbar > .nav-tabs { border-bottom: 0px; margin-bottom: -4px; background-color: transparent; } .panel .panel-toolbar > .nav-tabs > li > a { padding: 8px 15px; line-height: 20px; border: 1px solid transparent; border-radius: 3px 3px 0px 0px; color: #f3f3f3; } .panel .panel-toolbar > .nav-tabs > li.active > a, .panel .panel-toolbar > .nav-tabs > li.active > a:hover, .panel .panel-toolbar > .nav-tabs > li.active > a:active, .panel .panel-toolbar > .nav-tabs > li.active > a:focus { border-color: #cfd9db; border-bottom-color: transparent; background-color: #ffffff; color: #444444; } .panel .panel-toolbar > .nav-tabs > li.active > a:before { display: none; } /* panel default reset */ .panel-default .panel-toolbar > .nav-tabs > li > a:hover, .panel-default .panel-toolbar > .nav-tabs > li.open > a { border-bottom-color: #cfd9db; color: #777777; } .panel-default .panel-toolbar > .nav-tabs > li > a { color: #aaaaaa; } /* tab inside panel toolbar wrapper */ .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li > a { color: #aaaaaa; } .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li > a:hover, .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li.open > a, .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li.active > a, .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li.active > a:hover, .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li.active > a:active, .panel .panel-toolbar-wrapper > .panel-toolbar > .nav-tabs > li.active > a:focus { color: #777777; } /* panel body * - indicator * - scrollable * - info * - background * - iframe * - contextual ------------------------------- */ .panel-body { position: relative; } .panel-body:last-child { border-bottom: 0px; } .panel-body.no-contextual { background-color: inherit !important; color: inherit !important; } .panel .panel-body + .table-responsive { border-top: 1px solid #cfd9db; } .panel > .panel-body + .table, .panel > .panel-body + .table-responsive { border-color: #cfd9db; } /* * indicator */ .panel-body > .indicator { left: 0px; right: 0px; top: 0px; bottom: 0px; } /* * scrollable */ .panel .viewport:after { pointer-events: none; position: absolute; content: ""; z-index: 10; left: 0px; right: 0px; top: 0px; height: 40px; } .panel .viewport:before { pointer-events: none; position: absolute; content: ""; z-index: 10; left: 0px; right: 0px; bottom: 0px; height: 40px; } .touch .panel-body.slimscroll { overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } /* panel footer ------------------------------- */ .panel-footer { overflow: auto; background-color: #eaedf1; border-top: 1px solid #eaedf1; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel-body .panel-footer { margin: 15px -15px -15px -15px; } .panel-footer + .panel-body { border-top: 1px solid #cfd9db; } /* panel group * - arrow * - plus ------------------------------- */ .panel-group .panel { border-radius: 4px; } .panel-group.panel-group-compact .panel, .panel-group.panel-group-compact .panel .panel-heading { border-bottom: none; border-radius: 0px; } .panel-group.panel-group-compact .panel:first-child, .panel-group.panel-group-compact .panel:first-child .panel-heading { border-top-right-radius: 3px; border-top-left-radius: 3px; } .panel-group.panel-group-compact .panel:last-child { border-bottom: 1px solid #cfd9db; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel-group.panel-group-compact .panel + .panel { margin: 0px; } .panel-group.panel-group-compact .panel-minimal:last-child { border-bottom-width: 0px; } /* * arrow */ .panel-group .panel-title > a > .arrow, .panel-group .panel-title > a > .plus { text-align: left; font-family: "iconfont"; font-weight: normal; font-size: 12px; line-height: 12px; width: 12px; } .panel-group .panel-title > a > .arrow:before { content: "\e670"; } .panel-group .panel-title > a.collapsed > .arrow:before { content: "\e671"; } .panel-group .panel-title > a > .plus:before { content: "\e662"; } .panel-group .panel-title > a.collapsed > .plus:before { content: "\e661"; } /* Panel Header contextual * - default * - primary * - success * - info * - warning * - danger * - inverse * - teal * - reset ------------------------------- */ /* * default */ .panel-default > .panel-heading { color: #444444; background-color: #f1f1f1; border-color: #cfd9db; } /* * primary */ .panel-primary > .panel-heading { color: #8d9ba2; background-color: #f6f8f8; border-color: #edf1f2; } .panel-primary > .panel-heading + .panel-collapse .panel-body { border-top-color: #009dc8; } /* * success */ .panel-success > .panel-heading { color: #ffffff; background-color: #91c854; border-color: #85c241; } /* * info */ .panel-info > .panel-heading { color: #ffffff; background-color: #63d3e9; border-color: #48cbe5; } /* * warning */ .panel-warning > .panel-heading { color: #ffffff; background-color: #ffd66a; border-color: #ffce4b; } /* * danger */ .panel-danger > .panel-heading { color: #ffffff; background-color: #ed5466; border-color: #ea384d; } /* * inverse */ .panel-inverse > .panel-heading { color: #ffffff; background-color: #2a2a2a; border-color: #1b1b1b; } /* * teal */ .panel-teal > .panel-heading { color: #ffffff; background-color: #6bccb4; border-color: #58c5aa; } /* Panel Minimal ------------------------------- */ .panel.panel-minimal { border-width: 0px; border-radius: 0px; background-color: transparent; } .panel.panel-minimal > .panel-heading { border-width: 0px; background-color: transparent !important; } .panel.panel-minimal > .panel-toolbar-wrapper { background-color: transparent; border-color: transparent; } .panel.panel-minimal .panel-footer { background-color: transparent; border-width: 0px; padding: 0 10px; margin-left: 15p; } /* Panel No Border ------------------------------- */ .panel.panel-noborder { border-width: 0px; } /* Event Dashboard / Event Index ------------------------------- */ .event-container { width: 1280px; margin-left: 15px; margin-right: 15px; } .event-toolbar { display: block; margin-bottom: 25px; } .nav-pills > li:hover > a { background-color: #8ec31f; color: #fff; } .nav-pills > li:hover > a:after, .nav-pills > li.active > a:after { position: absolute; bottom: -8px; display: block; float: none; width: 0; height: 0; margin-top: 13px; margin-right: auto; margin-left: auto; border-color: transparent; border-top-color: #2ecc71; border-style: solid; border-width: 8px 8px 0px 8px; content: " "; left: 39%; } .event-toolbar > .nav-pills > li.tab-heading { display: inline-block; vertical-align: middle; padding: 7px 20px 7px 7px; font-size: 1.1em; border-right: 1px solid #ccc; margin-right: 10px; } .event-toolbar > .nav-pills > li.tab-heading::before { font: 14px FontAwesome; content: "\f009"; margin-right: 8px; color: #000; } .event-toolbar > .nav-pills > li:last-child { display: inline-block; vertical-align: middle; padding: 0px 7px 0px 20px; font-size: 1.1em; border-left: 1px solid #ccc; margin-left: 10px; } .event-toolbar > .nav-pills > li:last-child .tab-search { } .event-toolbar > .nav-pills > li:last-child .tab-search .icon { display: inline-block; margin-right: 3px; } .event-toolbar > .nav-pills > li:last-child .tab-search .form-control { background: transparent; border: 0; border-bottom: 1px solid #ccc; display: inline-block; width: 80%; border-radius: 0px; padding: 0; } @media (max-width:1024px) { .event-toolbar > .nav-pills > li:last-child .tab-search .form-control { width: 77%; } .event-toolbar > .nav-pills > li:last-child .tab-search { width: 100px; } } /* 事件Cover Flow */ .event { position: relative; } .event:after { clear: both; display: table; } .event-gallery { } .event-gallery .row { margin-right: 5px; margin-left: 5px; } /* Slider */ .eventcover-slider { background: transparent; border: 0px solid #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); -o-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); box-shadow: 0 0px 0px rgba(0, 0, 0, 0); margin: 0 0 60px 0px; width: 100%; } .eventcover-slider .slides > li { border-bottom: 0; } .flex-direction-nav a { font-size: 0; color: #fff; } .flex-direction-nav a:before { font-family: "FontAwesome"; font-size: 25px; display: inline-block; content: '\f104'; width: 40px; height: 40px; background-color: rgba(26, 188, 156, .9); border-radius: 50%; line-height: 40px; text-align: center; } .flex-direction-nav a.flex-next:before { content: '\f105'; } /**/ .eventcover-slider .event-cover-list { margin: 0; padding: 0; } .eventcover-slider .event-cover-list li .event-box { float: left; display: block; position: relative; width: 30%; margin-bottom: 30px; } .eventcover-slider .event-cover-list li .event-box .event-body { position: absolute; bottom: 0; top: inherit; width: 100%; background-color: rgba(26, 188, 156, .8); padding: 20px 15px; font-size: 1em; } .eventcover-slider .event-cover-list li .event-box .thumbs-cover { } .eventcover-slider .event-cover-list li .event-box:first-child .event-body { left: 0; top: 0; bottom: inherit; width: 260px; min-height: inherit; } .eventcover-slider .event-cover-list li .event-box:first-child { margin-right: 30px; width: 65%; } .eventcover-slider .event-cover-list li .event-box:first-child .time { font-size: 1em; line-height: 1; } .eventcover-slider .event-cover-list li .event-box:first-child h3 { font-size: 1.6em; line-height: 1; margin: 7px 0 20px 0; } .event-body { color: #fff; } .event-body .time { } .event-body h3 { font-size: 1.2em; margin: 5px 0 10px 0; } .event-body a { color: #fff; } .event-body a:hover { border-color: #f36969; background-color: #f36969; } .event-body a.action-edit, .event-body a.action-preview { width: 80px; height: 35px; display: inline-block; text-align: center; border-radius: 30px; border: 2px solid #fff; line-height: 30px; } .event-body a.action-edit:before, .event-body a.action-preview:before { font: 14px 'Simple-Line-Icons'; margin-right: 7px; } .event-body a.action-edit:before { content: "\e05f"; } .event-body a.action-preview:before { content: "\e011"; } /*event-flow*/ .event-toolbar { } .event-toolbar .functionbar { margin: 0; padding: 0; } .event-toolbar .functionbar li { list-style: none; display: inline-block; position: relative; } .event-toolbar a { color: #009474; } .event-toolbar li a:hover::before { color: #fff; background-color: #009474; } .event-toolbar li.action-addnew a, .event-toolbar li.action-reload a { height: 35px; display: inline-block; padding: 0 15px; text-align: left; line-height: 35px; } .event-toolbar li.action-addnew a:before, .event-toolbar li.action-reload a:before { font: 22px 'FontAwesome'; margin-right: 7px; width: 40px; height: 40px; border: 2px solid #009474; border-radius: 50%; line-height: 37px; text-align: center; display: inline-block; } .event-toolbar li.action-addnew a:before { content: "\f067"; } .event-toolbar li.action-reload a:before { content: "\f021"; } .event-toolbar:after { clear: both; display: table; } .event-toolbar li.action-addnew li a:before { display: none; } .event-toolbar li.action-addnew li a { display: block; line-height: inherit; } .event-toolbar li.action-addnew li { display: block; } .event-toolbar li.action-addnew .dropdown-menu:before { position: absolute; top: -7px; left: 70px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .event-toolbar li.action-addnew .dropdown-menu:after { position: absolute; top: -6px; left: 71px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } /* event-flow */ .thumb img.imghover { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform opacity; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .thumb:hover img.imghover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); z-index: 0; } /**/ .event-flow { } .event.event-flow { } .event-project { min-width: 300px; } .event-project { -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; } .event-project .content { -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .event-project .content > .wrapper { padding-left: 25px; padding-right: 25px; } .event-projectcontent hr { border-color: #2f2f2f; } .event-project .content .heading { font-size: 18px; font-weight: normal; text-transform: uppercase; margin: 0px; padding: 22px 25px 15px 16px; background: #fff; color: #000; border-bottom: 1px solid #ddd; } .event-project .panel { background-color: transparent; border-radius: 0px !important; color: #888888; border-width: 0px !important; } .event-project .media-list-contact > .media:after { border-color: #2f2f2f; } .event-project .media-list-contact > .media > .media-body > .media-heading { color: #ddd; } .event-project .media-list-contact > .media:active { background-color: #2f2f2f; } .event-project { margin: 0; padding: 0; } .eventmenu { margin: 0; padding: 0; } .event-project li { display: block; position: relative; width: 100%; list-style: none; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .1); margin-bottom: 15px; background: #fff; } .event-project li.editing { display: block; position: relative; width: 100%; list-style: none; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .1); margin-bottom: 15px; color: #4e7325 !important; background-color: #e0f0cf; border: 1px solid #d2e8b8; } .event-project li.endediting { display: block; position: relative; width: 100%; list-style: none; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .1); margin-bottom: 15px; color: #16879d !important; background-color: #e9f9fc; border: 1px solid #d3f3f9; } .event-project li.action-addevent { vertical-align: middle; width: 100%; line-height: 30px; white-space: nowrap; display: block; font-size: 15px; color: #fff; text-overflow: ellipsis; table-layout: fixed; text-align: center; padding: 0; } .event-project li.action-addevent a.btn-addevent { display: block; line-height: 40px; text-align: center; background-color: #a5a5a5; color: #fff; padding: 0; } .event-project li.action-addevent a.btn-addevent:hover { background-color: #f26969; } .event-project li.action-addevent a.btn-addevent:before { font: 18px FontAwesome; content: "\f067"; margin-right: 5px; } .event-project li.action-addevent li a { display: table; position: relative; table-layout: fixed; width: auto; font-size: 13px; text-decoration: none; outline: 0; font-weight: 100; padding: 5px 10px 10px 15px; color: #a4a4a4; } .event-project li.action-addevent li { display: block; position: relative; width: 100%; list-style: none; -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0); box-shadow: 0 0 0px rgba(0, 0, 0, 0); margin-bottom: 0px; background: #fff; } .event-project li.action-addevent .dropdown-menu { left: 25%; } .event-project li.action-addevent .dropdown-menu:before { position: absolute; top: -7px; left: 70px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .event-project li.action-addevent .dropdown-menu:after { position: absolute; top: -6px; left: 71px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .event-project li.submenu-header { display: none; } .event-project li:after { content: ""; right: 0px; bottom: -1px; border-top: 0px solid #2f2f2f; position: absolute; left: 0px; } .event-project li:last-child:after { border: 0px; } .event-project li.active { background-color: #2f2f2f; } .event-project li.active:after { border-color: transparent; } .event-project li.active a { color: #c3c3c3; } .event-project li.open a { } .event-project li.open a > .arrow:before { content: "\e670"; } .event-project li a { display: table; position: relative; table-layout: fixed; width: 100%; font-size: 16px; text-decoration: none; outline: 0; font-weight: 100; padding: 5px 10px 10px 15px; color: #a4a4a4; } .event-project li a:hover { } .event-project li .outsidemedia { position: absolute; left: 0; top: -4px; display: inline-block; padding: 1px 2px; font-size: 11px; color: #fff; background: #fdb454; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .event-project li .editstatus { position: absolute; left: -15px; display: none !important; top: -1px; width: 15px; display: inline-block; padding: 1px 0px; font-size: 9px; color: #fff; background: #8ac448; letter-spacing: -0.04em; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .event-project li .editstatusend { display: none !important; position: absolute; left: -15px; top: -1px; width: 15px; display: inline-block; padding: 1px 0px; font-size: 9px; color: #fff; background: #56cfe7; letter-spacing: -0.04em; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .event-project li.open .editstatus, .event-project li.open .editstatusend { display: block !important; } .event-project li .iconconmment { width: 50px; table-layout: fixed; vertical-align: middle; position: absolute; top: 10px; right: 10px; font-size: 14px; } .event-project li .iconconmment:before { font: 14px 'Simple-Line-Icons'; content: "\e04a"; margin-right: 5px; } .event-project li .text { display: block; } .event-project li .text:after { clear: both; } .event-project li a > .author { display: block; font-size: 13px; width: 20px; float: left; color: #009474; } /*圓圈*/ .event-project li a > .author:before { font: 14px 'FontAwesome'; content: "\f10c"; margin-right: 5px; } /**/ .event-project li .time { float: right; display: inline-block; font-size: 12px; } .event-project li .time:before { font: 14px 'Simple-Line-Icons'; content: "\e081"; margin-right: 5px; } .event-project li a.action-media { display: none; position: absolute; left: 0; top: 0; table-layout: fixed; font-size: 13px; background-color: #f26969; color: #fff; width: 100px; text-decoration: none; outline: 0; font-weight: 100; padding: 5px 10px; overflow: hidden; z-index: 9; } .event-project li a.action-media:before { font: 16px 'Simple-Line-Icons'; content: "\e060"; margin-right: 5px; } .event-project li a.thumb { display: none; position: relative; table-layout: fixed; width: 100%; font-size: 16px; text-decoration: none; outline: 0; font-weight: 100; padding: 0px; max-height: 180px; overflow: hidden; } .event-project li.open a.thumb { display: block; border-bottom: 1px solid #ddd; } .event-project li.open a.action-media { display: block; } .event-project li a:after { clear: both; display: table; } .event-project li a > .text { vertical-align: top; width: 100%; line-height: 30px; font-weight: 600; white-space: nowrap; overflow: hidden; display: block; font-size: 15px; color: #000; text-overflow: ellipsis; table-layout: fixed; padding-right: 60px; margin-bottom: 20px; } .event-project li a > .number { display: table-cell; table-layout: fixed; vertical-align: middle; width: 40px; font-weight: normal; } .event-project li a > .number > .badge, .event-project li a > .number > .label { float: right; max-width: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-project li a > .arrow { display: inline-block; table-layout: fixed; vertical-align: middle; font-weight: normal; width: 20px; text-align: right; color: #999; position: absolute; top: 10px; right: 10px; } .event-project li a > .arrow:before { font-family: "iconfont"; content: "\e671"; font-size: 10px; } .event-project li > .submenu.collapse { position: relative; margin: 0; background-color: #36a67c; padding: 0; height: 53px !important; -webkit-transition: height 0.1s; -moz-transition: height 0.1s; transition: height 0.1s; } .event-project li > .submenu ul { margin: 0; padding: 0; } .event-project li a > .vision { font-size: 12px; padding: 0 0 0 2px; position: absolute; bottom: 30px; color: #c89393; } .event-project li > .submenu.collapse.in { display: block; } .event-project li > .submenu ul.comment-menu { padding-top: 7px; } .event-project li > .submenu ul.comment-menu li .dropdown-menu { min-width: 300px; background: #eff7f1; } .event-project li > .submenu ul.comment-menu li .dropdown-menu:before { position: absolute; top: -7px; left: 21px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .event-project li > .submenu ul.comment-menu li .dropdown-menu:after { position: absolute; top: -6px; left: 21px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .event-project li > .submenu ul.comment-menu li .dropdown-menu .media-list > .media.read > .media-body > .media-text { color: #bd4377 !important; } .event-project li > .submenu ul.comment-menu li .dropdown-menu .media-list > .media > .media-body .media-meta { display: block; margin: 5px 0; } .event-project li > .submenu ul.comment-menu li .dropdown-menu .dropdown-body.slimscroll { max-height: 300px !important; } .media-list > .media > .media-body .media-meta .btn-reply { display: inline-block; position: relative; width: auto; font-size: 12px; text-decoration: none; outline: 0; font-weight: 100; padding: 0px; table-layout: fixed; color: #828282; } .media-list > .media > .media-body .media-meta .btn-reply:before { font: 14px FontAwesome; content: "\f0e5"; margin-right: 5px; color: #828282; } .event-project li > .submenu ul.comment-menu li .dropdown-menu .text-primary { color: #828282 !important; } .event-project li > .submenu ul.eventfunc-menu { float: right; } .event-project li > .submenu ul.eventfunc-menu li > a { font-size: 0; } .event-project li > .submenu ul.dropdown-menu { margin-left: -100px; } .event-project li > .submenu ul.dropdown-menu:before { position: absolute; top: -7px; right: 58px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .event-project li > .submenu ul.dropdown-menu:after { position: absolute; top: -6px; right: 60px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .event-project li > .submenu ul.eventfunc-menu li .dropdown-menu li { background-color: transparent; display: block; position: relative; float: none; border-bottom: 1px solid #d2d2d2; width: 100%; list-style: none; padding: 0px; } .event-project li > .submenu ul.eventfunc-menu li .dropdown-menu li a { font-size: 14px; color: #666; padding: 7px 5px; width: 100%; display: block; } .event-project li > .submenu ul.eventfunc-menu li .dropdown-menu li a:hover { background-color: #37a77d; color: #fff; } .iconedit:before, .iconshare:before, .iconchangeeditor:before, .icondelete:before, .iconreturn:before, .iconapproved:before, .iconsetting:before, .iconpreview:before { font: 16px 'Simple-Line-Icons'; } .iconedit:before { content: "\e060"; } .iconshare:before { content: "\e05a"; } .icondelete:before { content: "\e054"; } .iconreturn:before { content: "\e065"; } .iconapproved:before { content: "\e080"; } .iconpreview:before { content: "\e087"; } .iconchangeeditor:before { content: "\e005"; } .iconsetting:before { content: "\e09a"; } .event-project li > .submenu li { background-color: transparent; display: inline-block; float: left; width: auto; list-style: none; -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0); box-shadow: 0 0 0px rgba(0, 0, 0, 0); margin-bottom: 0px; position: relative; border-left: 1px solid #61bb99; } .event-project li > .submenu li a { display: table-cell; position: relative; width: auto; font-size: 16px; text-decoration: none; outline: 0; font-weight: 100; padding: 10px 8px 10px 8px; table-layout: fixed; } .event-project li > .submenu:after { clear: both; display: table; } .event-project li > .submenu li a { font-size: 14px; padding: 1px 0px 1px 0x; background: transparent; color: #fff; } .event-project li > .submenu li a .iconconmment { width: 50px; table-layout: fixed; vertical-align: top; position: relative; top: inherit; right: inherit; font-size: 15x; color: #fff; } { } .event-project li > .submenu ul.dropdown-menu.changeeditor:before { position: absolute; top: -7px; right: 35px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .event-project li > .submenu ul.dropdown-menu.changeeditor:after { position: absolute; top: -6px; right: 37px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .event-project li > .submenu ul.eventfunc-menu .dropdown-menu .btn { padding: 7px 2px; } .event-project li.open .iconconmment { display: none; } .event-project li.open > .submenu li a .iconconmment { display: block; } .event-project li > .submenu ul.comment-menu li .dropdown-menu li { border-left: 0px solid #61bb99; } .event-project li > .submenu li a .iconconmment:before { font-size: 18px; } .event-project li > .submenu li a > .text { font-weight: normal; } .event-project li > .submenu li a > .arrow:before { content: "\e64f"; } .event-project li > .submenu li a:hover { color: #c3c3c3; } .event-project li > .submenu li:after { } .event-project li > .submenu li.active { background-color: transparent; } .event-project li > .submenu li.active:after { background-color: #00b6ad; } .event-project li > .submenu li.active a { color: #c3c3c3; } .event-project li > .submenu li.active a > .text { font-weight: 600; } .event-project li > .submenu li.open a > .arrow:before { content: "\e671"; } .event-project li > .submenu .submenu { overflow: hidden; padding-left: 10px; } .event-project li > .submenu .submenu:after { display: none; } .event-project li > .submenu .submenu li:after { display: none; } .event-project li > .submenu .submenu li.active a { color: #c3c3c3; } .event-project li > .submenu .submenu li.active a > .text { font-weight: bold; } .event-project li > .submenu .submenu li.open a > .arrow:before { content: "\e671"; } .event-project li > .submenu .submenu li a { color: #777777; padding-top: 0px; padding-bottom: 0px; } .event-project li > .submenu .submenu li a:hover { color: #c3c3c3; } .event-project li > .submenu .submenu li a > .text { font-weight: normal; } .event-project li > .submenu .submenu li a > .arrow:before { content: "\e64f"; } /*歷史典藏*/ .event-archive { padding: 0 15px; } @media (min-width:1280px) { .eventcover-slider { width: 90%; } } @media (min-width:769px) and (max-width:1024px) { .eventcover-slider .event-cover-list li .event-box:first-child { margin-right: 0px; width: 85.5%; } .eventcover-slider .event-cover-list li .event-box { width: 40%; } .eventcover-slider .event-cover-list li .event-box:last-child { margin-left: 30px; } } @media (max-width:768px) { .event-container { width: 95%; } .event-project .content .heading { background: #009474; color: #fff; } } @media (max-width:767px) { .nav-pills > li > a { border-radius: 0px; padding: 7px 15px; color: #000; } .event-toolbar > .nav-pills > li:last-child .tab-search .form-control { width: 100px; } .eventcover-slider .event-cover-list li .event-box:first-child { margin-right: 0px; width: 85.5%; } .eventcover-slider .event-cover-list li .event-box { width: 40%; } .eventcover-slider .event-cover-list li .event-box:last-child { margin-left: 30px; } .eventcover-slider .event-cover-list { margin: 0 0 0 65px; padding: 0; } } @media (max-width:480px) { .event-toolbar > .nav-pills > li.tab-heading { display: block; vertical-align: middle; padding: 0px 20px 12px 7px; font-size: 1.1em; border-right: 0px solid #ccc; /* border-bottom: 1px solid #ccc; */ margin-right: 0px; width: 100%; margin-bottom: 10px; text-align: left; } .event-toolbar > .nav-pills > li:last-child { display: inline-block; vertical-align: middle; padding: 0px 7px 0px 0px; font-size: 1.1em; border-left: 0px solid #ccc; margin-left: 10px; width: 50%; margin-bottom: 0px; text-align: center; position: absolute; top: 0; right: 0; } .nav-pills > li > a { border-radius: 0px; padding: 7px 14px; color: #000; } .eventcover-slider .event-cover-list li .event-box:first-child .event-body { left: 0; top: inherit; bottom: 0; width: 100%; min-height: inherit; } .eventcover-slider .event-cover-list li .event-box:first-child { margin-right: 0px; width: 100%; } .eventcover-slider .event-cover-list li .event-box { width: 100%; } .eventcover-slider .event-cover-list li .event-box:last-child { margin-left: 0px; } .eventcover-slider .event-cover-list { margin: 0 0 0 0px; padding: 0; } } #drag-drop-area.drag-drop-area-hover { border: 2px dashed #e4e4e4; height: 200px; background: #ffffff; margin-bottom: 10px; } .drag-drop-inside { margin: 70px auto 0; width: 80%; } .drag-drop-inside p.drag-drop-info { font-size: 15px; text-align: center; color: #aaa; margin: 5px 0; line-height: 1.5; } .drag-drop-inside p { color: #aaa; font-size: 14px; margin: 5px 0; display: block; text-align: center; } /* Panel 總覽統計 ------------------------------- */ .component-toolbar { overflow: inherit; } .component-toolbar .panel-toolbar-wrapper > .panel-toolbar { display: table-cell; vertical-align: middle; width: 1%; height: 50px; } .component-toolbar .nav-pills > li.tab-heading { font-size: 20px; color: #8ec31f; margin-right: 20px; } .component-toolbar .nav-pills > li.tab-heading:before { font: 30px 'Simple-Line-Icons'; content: "\e06c"; margin-right: 10px; } .component-toolbar .panel-toolbar-wrapper > .panel-toolbar:first-child { width: 80%; } .component-toolbar .nav-pills > li a { font-size: 1.1em; background-color: #fff; color: #000; } .component-toolbar .nav-pills > li.active > a, .component-toolbar .nav-pills > li.active > a:hover, .component-toolbar .nav-pills > li.active > a:focus { background-color: #f46869; color: #fff; } .component-toolbar .nav-pills > li:hover > a:after, .component-toolbar .nav-pills > li.active > a:after { position: absolute; bottom: -8px; display: block; float: none; width: 0; height: 0; margin-top: 13px; margin-right: auto; margin-left: auto; border-color: transparent; border-top-color: #f46869; border-style: solid; border-width: 8px 8px 0px 8px; content: " "; left: 39%; } .component-toolbar .nav-pills > li.active:after { border-top-color: #f46869; } .component-toolbar .nav-pills > li.active > a, .component-toolbar .nav-pills > li.active > a:hover, .component-toolbar .nav-pills > li.active > a:focus { color: #fff; } .component-toolbar .nav-pills > li:hover > a { background-color: #f46869; color: #fff; } /**/ .media-ranking { color: #98adbb; } .media-ranking .list-group { background: transparent; } .media-ranking .list-group .list-group-item { position: relative; display: block; padding: 7px 15px; margin-bottom: -1px; background-color: transparent; border-top: 0px solid #d0dde6; border-left: 0px solid #d0dde6; border-right: 0px solid #d0dde6; border-bottom: 1px solid #d0dde6; } .formtable { margin-bottom: 20px; } .red { color: #ff0000; } .green { color: #0aa699; } .yellow { color: #f4ac00; } .pink { color: #f26969 } td .blue { color: #1748fd; background: transparent; } .padder-v { margin-bottom: 20px; padding: 10px 0; } .formtable .col-md-2 { padding-right: 0px; margin-bottom: 5px; } .padder-v .num { font-size: 2.2em; } .row.row-closer { margin-right: 0px; margin-left: 0px; margin-bottom: 20px; } .row.row-closer .padder-v { margin-bottom: 0; } .row.row-closer .barchart { display: table-cell; table-layout: fixed; vertical-align: middle; text-align: center; width: 1%; height: 100%; } .row.row-closer .col-xs-5, .row.row-closer .col-xs-7 { padding-left: 0; padding-right: 0; border-radius: 0; } .purple { background: #7266ba; color: #fff; } .grey { background: #e4eaec; } .darkgrey { background: #d9e3e6; } .grey .num { color: #219b7e; } .grey i { font-size: 15px; } .grey i.ico-arrow-down15 { color: #ff0000; } .blue { background: #23b7e5; color: #fff; } .text-muted { font-size: 12px; } .purple .text-muted, .blue .text-muted { color: #fff !important; } /*媒體績效*/ .album-gallery { padding: 0; display: block; max-width: 1000px; } .album-gallery .panel { background: #fff; overflow: hidden; } .album-gallery .panel .panel-body { padding: 0; height: 275px; overflow: hidden; } .album-gallery .panel .panel-body .thumb img { max-width: 100%; width: 100%; } .album-gallery .panel .panel-body a.action-btn { font-size: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 10; } .album-gallery .panel.firstcover .panel-body { padding: 0; height: 570px; } .album-gallery .panel.firstcover .titleset { position: absolute; width: 100%; height: 100%; } .titleset .changepeople { position: relative; display: inline-block; } .titleset .changepeople .dropdown-menu { z-index: 99999; left: 0; padding: 5px; } .titleset .changepeople .dropdown-menu .btn { font-size: 13px; padding: 7px 3px; } .album-gallery .panel .panel-body .thumb { float: right; position: relative; display: block; } .album-gallery .panel .panel-body .titleset { padding: 10px 20px; line-height: 1.5em; } .album-gallery .panel .panel-body .titleset .action-review, .album-gallery .panel .panel-body .titleset .action-history { display: inline-block; margin-top: 30px; } .album-gallery .panel .panel-body .titleset .action-review:before { font: 16px 'Simple-Line-Icons'; content: "\e060"; margin-right: 5px; width: 35px; height: 35px; line-height: 35px; text-align: center; display: inline-block; border-radius: 50%; background: #f26969; color: #fff; vertical-align: middle; } .album-gallery .panel .panel-body .titleset .action-history:before { font: 16px 'Simple-Line-Icons'; content: "\e081"; margin-right: 5px; width: 35px; height: 35px; line-height: 35px; text-align: center; display: inline-block; border-radius: 50%; background: #f26969; color: #fff; vertical-align: middle; } .album-gallery .panel.firstcover .panel-body .titleset h3.text-accent { font-size: 2em; } .album-gallery .panel.firstcover .panel-body .titleset { background-color: rgba(0, 0, 0, .3); color: #fff; display: block; } .album-gallery .panel.firstcover .panel-body .titleset, .album-gallery .panel.firstcover .panel-body .titleset h3.text-accent { color: #fff !important; } .album-gallery .panel.firstcover .panel-body .titleset .action-review { background: #f26969; color: #fff; padding: 0px 20px; } .album-gallery .panel .panel-body .titleset .action-review { background: #fff; color: #f26969; } .album-gallery .thumb:before { position: absolute; left: 0px; top: 10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #cfd9db; } .album-gallery .thumb:after { position: absolute; left: 1px; top: 10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #fff; } @media (max-width:1024px) { .album-gallery .panel .panel-body { height: 175px; } .album-gallery .panel.firstcover .panel-body { height: 370px; } .album-gallery .panel .panel-body .thumb { float: right; width: 120px; } .album-gallery .panel.firstcover .panel-body .thumb { width: 100%; } .album-gallery .panel .panel-body .titleset .action-review { display: inline-block; margin-top: 10px; } } @media (max-width:480px) { .album-gallery .panel.firstcover .panel-body { height: 230px; } } /*媒體單頁*/ .event-album { display: block; margin-top: 25px; margin-bottom: 40px; } .event-album .thumb img { width: 100%; max-width: 100%; } .event-album h3 { margin-top: 5px; } .mediawedgit .panel-collapse { } .mediawedgit .list-group { border-radius: 0; } .mediawedgit .list-group .list-group-item { border-left: 0px solid #cfd9db; border-right: 0px solid #cfd9db; border-bottom: 2px solid #cfd9db; border-top: 0px solid #cfd9db; } .pagenum { font-size: 15px; right: 0; position: absolute; } .pagenum .num { font-size: 2.2em; display: inline-block; margin-left: 7px; } .form-group { margin-bottom: 0px; } .action-editing, .action-remove { font-size: 0; width: 30px; height: 30px; display: inline-block; margin: 0 3px; } .action-editing:before, .action-remove:before { font: 20px 'Simple-Line-Icons'; } .action-editing:before { content: "\e060"; } .action-remove:before { content: "\e054"; } /*帳號權限、個人資料*/ .myProfile { } .myProfile .panel-default > .panel-heading { color: #444444; background-color: #f6f8f8; border-color: #cfd9db; border-bottom: 3px solid #fff; } .myProfile .panel-heading > .panel-title > a, .myProfile .panel-heading > .panel-title > a:hover, .myProfile .panel-heading > .panel-title > a:active, .myProfile .panel-heading > .panel-title > a:focus { display: block; } .myProfile .list-group-item { border-top: 1px solid #cfd9db; border-left: 0px solid #cfd9db; border-right: 0px solid #cfd9db; border-bottom: 1px solid #cfd9db; } .myProfile .list-group-item:hover { background-color: #ffffcc; } .myProfile .list-group-item a { color: #333; display: block; } .myProfile .panel-default > .panel-heading + .panel-collapse .panel-body.slimscroll { max-height: 300px !important; } .myProfile .panel > .panel-collapse { padding: 0px 0px; } .myProfile .panel-group .panel { margin-bottom: 0; overflow: inherit; } /**/ .my-album .thumb { max-width: 120px; height: 120px; overflow: hidden; } .my-album .thumb img { width: 100%; max-width: 100%; } .my-album h3 { margin-top: 0; } .titleset .list-group-item { border: 0; background-color: transparent; } .my-album .titleset { padding: 5px 0 0px 0; border-bottom: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; } /**/ .my-record { } .my-record .list-table > li { display: block; table-layout: fixed; vertical-align: top; width: auto; padding: 0px 5px; } /* ***************************** Sortable ***************************** */ .SortableBox { padding: 10px 0; } #sortable1, #sortable2, .sortable1, .sortable2 { list-style: none; margin: 0; padding: 0 0 1em; float: left; width: 90%; } #sortable1 li, #sortable2 li, .sortable1 li, .sortable2 li { list-style: none; font-size: 1.2em; cursor: move; -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.055); position: relative; display: block; margin: 0 15px 5px 20px; padding: 5px 30px; border: 1px solid #e4e4e4; background: transparent; } #sortable1 li, #sortable2 li, .sortable1 li, .sortable2 li { padding: 5px 40px 10px; margin: 0 0px 10px 15px; background: #ddd; } #sortable1 li, #sortable2 li, #sortable1 li .row, #sortable2 li .row { margin-bottom: 0px; } #sortable1 li .row-fluid .span3, #sortable2 li .row-fluid .span3, .sortable1 li .row-fluid .span3, .sortable2 li .row-fluid .span3 { margin-left: 0; } #sortable1 li p, #sortable2 li p, .sortable1 li p, .sortable2 li p { font-size: .85em; } #sortable1 li .btn, #sortable2 li .btn, .sortable1 li .btn, .sortable2 li .btn { font-size: .9em; padding: 7px 10px 8px 10px; } #sortable1 li p label, #sortable2 li p label, .sortable1 li p label, .sortable2 li p label { display: inline; } #sortable2 li p .input-mini, .sortable2 li p .input-mini { width: 40px; } #sortable1 li .btnclose, #sortable2 li .btnclose, .sortable1 li .btnclose, .sortable2 li .btnclose { width: 30px; height: 30px; text-align: center; line-height: 30px; color: #bcbcbc; border: 1px solid #bcbcbc; background: #fff; -webkit-border-radius: 400px; position: absolute; top: 0; -moz-border-radius: 400px; border-radius: 400px; display: inline-block; right: 5px; top: 5px; } #sortable1 li .btnclose:hover, #sortable2 li .btnclose:hover, .sortable1 li .btnclose:hover, .sortable2 li .btnclose:hover { text-decoration: none; background: #ff0000; color: #ffffff; border: 1px solid #ff0000; } .SortableBox.settingFront { border: 2px dashed #e4e4e4; background: #ffffff; margin-bottom: 10px; display: table; width: 100%; } /* Panel Table layout ------------------------------- */ .table-layout > [class*=" col-"].panel, .table-layout > [class^="col-"].panel { /* margin-bottom: 0px; overflow: hidden; */ } .table-layout > [class*=" col-"].panel-minimal:first-child + [class*=" col-"].panel, .table-layout > [class^="col-"].panel-minimal:first-child + [class^="col-"].panel { border-left-width: 1px; } .table-layout > [class*=" col-"].panel-minimal:first-child + [class*=" col-"].panel.panel-minimal, .table-layout > [class^="col-"].panel-minimal:first-child + [class^="col-"].panel.panel-minimal { border-left-width: 0px; } .table-layout > [class*=" col-xs"].panel, .table-layout > [class^="col-xs"].panel { border-radius: 0px; } .table-layout > [class*=" col-xs"].panel + [class*=" col-xs"].panel, .table-layout > [class^="col-xs"].panel + [class^="col-xs"].panel { border-left-width: 0px; } .table-layout > [class*=" col-xs"].panel:first-child, .table-layout > [class^="col-xs"].panel:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .table-layout > [class*=" col-xs"].panel:last-child, .table-layout > [class^="col-xs"].panel:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } @media (min-width:768px) { .table-layout > [class*=" col-sm"].panel, .table-layout > [class^="col-sm"].panel { border-radius: 0px; } .table-layout > [class*=" col-sm"].panel + [class*=" col-sm"].panel, .table-layout > [class^="col-sm"].panel + [class^="col-sm"].panel { border-left-width: 0px; } .table-layout > [class*=" col-sm"].panel:first-child, .table-layout > [class^="col-sm"].panel:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .table-layout > [class*=" col-sm"].panel:last-child, .table-layout > [class^="col-sm"].panel:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } } @media (min-width:992px) { .table-layout > [class*=" col-md"].panel, .table-layout > [class^="col-md"].panel { border-radius: 0px; } .table-layout > [class*=" col-md"].panel + [class*=" col-md"].panel, .table-layout > [class^="col-md"].panel + [class^="col-md"].panel { border-left-width: 0px; } .table-layout > [class*=" col-md"].panel:first-child, .table-layout > [class^="col-md"].panel:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .table-layout > [class*=" col-md"].panel:last-child, .table-layout > [class^="col-md"].panel:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } } @media (min-width:1200px) { .table-layout > [class*=" col-lg"].panel, .table-layout > [class^="col-lg"].panel { border-radius: 0px; } .table-layout > [class*=" col-lg"].panel + [class*=" col-lg"].panel, .table-layout > [class^="col-lg"].panel + [class^="col-lg"].panel { border-left-width: 0px; } .table-layout > [class*=" col-lg"].panel:first-child, .table-layout > [class^="col-lg"].panel:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .table-layout > [class*=" col-lg"].panel:last-child, .table-layout > [class^="col-lg"].panel:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } } /* Panel Thumbnail ------------------------------- */ .panel > .thumbnail, .panel .panel-figure > .thumbnail { border-radius: 0px; border-width: 0px; margin: 0px; } .panel > .thumbnail > .media > .overlay, .panel > .thumbnail > .media > img, .panel .panel-figure > .thumbnail > .media > .overlay, .panel .panel-figure > .thumbnail > .media > img { border-radius: 0px; } .panel > .thumbnail > .caption, .panel > .thumbnail > .meta, .panel .panel-figure > .thumbnaill > .caption, .panel .panel-figure > .thumbnaill > .meta { padding: 9px 15px; } /* ---------------------------- * * Page Header * * --------------------------- */ .container-fluid .page-header.page-header-block { margin-top: -15px; margin-left: -15px; margin-right: -15px; border-bottom: 0px solid #dadada; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .1); } .page-header { position: relative; padding-bottom: 15px; margin: 0px 0 15px; border-bottom: 1px solid #e9eeef; overflow: visible; } .page-header.no-border { border-bottom-width: 0px; } .page-header > [class*=" col-"], .page-header > [class^="col-"] { padding-left: 0px; padding-right: 0px; } .page-header .page-header-section + .page-header-section { margin-top: 10px; } .page-header .toolbar { text-align: left; margin-bottom: 5px; } .page-header .toolbar [class*=" col-"], .page-header .toolbar [class^="col-"] { padding-left: 0px; padding-right: 0px; } .page-header .toolbar .toolbar-label { display: block; text-align: left; } .page-header.page-header-block { width: auto; padding: 8px 15px 8px 15px; background-color: #fbfcfc; border-bottom-color: #e9eeef; } .page-header.page-header-block > [class*=" col-"], .page-header.page-header-block > [class^="col-"] { padding-left: 15px; padding-right: 15px; } .page-header.page-header-shadowed { -webkit-box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.03); box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.03); } .page-header .breadcrumb { padding-left: 0px; padding-right: 0px; } @media (min-width:768px) { .page-header .page-header-section { display: table-cell; width: 1%; vertical-align: middle; margin-top: 0px; } .page-header .toolbar { text-align: right; margin-bottom: 0px; } .page-header .toolbar .toolbar-label { display: inline-block; vertical-align: middle; line-height: 34px; } } /* Horizontal rules */ hr { border-color: #cfd9db; } /* ---------------------------- * * Jumbotron * * --------------------------- */ .jumbotron { position: relative; padding: 0px; background-color: transparent; background: url("../img/stellar/background.jpg") no-repeat center top fixed; -webkit-background-size: cover; background-size: cover; color: #ffffff !important; } .jumbotron.jumbotron-bg1 { background: url("../img/stellar/background1.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg2 { background: url("../img/stellar/background2.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg3 { background: url("../img/stellar/background3.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg4 { background: url("../img/stellar/background4.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg5 { background: url("../img/stellar/background5.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg6 { background: url("../img/stellar/background6.jpg") no-repeat center top fixed; } .jumbotron.jumbotron-bg7 { background: url("../img/stellar/background7.jpg") no-repeat center top fixed; } .jumbotron h1, .jumbotron .h1 { font-size: 28px; line-height: 1.4; } .jumbotron:first-child { margin: 0px; } .jumbotron p { font-size: 13px; font-weight: normal; } /* ---------------------------- * * Jumbotron - screen-sm * * --------------------------- */ @media (min-width:768px) { .jumbotron h1, .jumbotron .h1 { font-size: 34px; } } /* ---------------------------- * * Jumbotron - screen-md * * --------------------------- */ @media (min-width:992px) { .jumbotron h1, .jumbotron .h1 { font-size: 38px; } } /* ---------------------------- * * List Group * * --------------------------- */ .list-group-header { font-weight: 600; padding: 10px 15px; color: #777777; font-size: 14px; } .list-group-item { border: 1px solid #cfd9db; } a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus { background-color: #00b1e1; border-color: #00a5d2; } a.list-group-item:hover, a.list-group-item:focus { background-color: #f7f7f7; color: #777777; } /* list table */ .list-table { display: table; table-layout: fixed; width: 100%; margin: 0px; padding: 0px; } .list-table > li { display: table-cell; table-layout: fixed; vertical-align: top; width: auto; padding: 0px 5px; } .list-table > li:first-child { padding-left: 0px; } .list-table > li:last-child { padding-right: 0px; } /* list tabs */ .list-group-tabs > .list-group-item { padding: 0px; } .list-group-tabs > .list-group-item:first-child > a { border-top-right-radius: 4px; border-top-left-radius: 4px; } .list-group-tabs > .list-group-item:last-child > a { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .list-group-tabs > .list-group-item > a { display: block; padding: 10px 15px; color: #919191; } .list-group-tabs > .list-group-item > a:hover, .list-group-tabs > .list-group-item > a:focus { background-color: #f7f7f7; color: #777777; } .list-group-tabs > .list-group-item.active > a { background-color: #f7f7f7; color: #6a6a6a; } .list-table > li img.img-hover { width: 100px; border: 1px solid #eee; } /**/ .list-table > li:last-child { } .list-table > li:last-child .action-toolbar { float: right; } .list-table > li:last-child .action-toolbar a { display: inline-block; color: #f26969; margin: 10px 0px; } .list-table > li:last-child .action-toolbar a:before { font: 18px 'Simple-Line-Icons'; content: "\f00d"; margin-right: 8px; width: 35px; height: 35px; line-height: 35px; display: inline-block; border-radius: 50%; background-color: #f26969; color: #fff; text-align: center; } .list-table > li:last-child .action-toolbar a.action-review:before { content: "\e05e"; } .list-table > li:last-child .action-toolbar a.action-browser:before { content: "\e087"; } .time { font-size: .9em; } .time:before, .list-table > li .time:before { font: 15px 'Simple-Line-Icons'; content: "\e081"; } @media (max-width:480px) { .list-table > li:last-child .action-toolbar a { font-size: 13px; } .list-table > li { display: block; } .list-table > li:last-child .action-toolbar { float: left; } } /* ---------------------------- * * Media list * * --------------------------- */ .media-list > .media { position: relative; padding: 8px 42px 8px 15px; } .media-list > .media + .media { margin-top: 0px; } .media-list > a.media { display: block; } .media-list > a.media:active { background-color: #eeeeee; } .media-list > a.media:hover, .media-list > a.media:focus { background-color: rgba(238, 238, 238, 0.15); outline: 0; } .media-list > .media:after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 1px; border-bottom: 1px solid #dde4e6; } .media-list > .media:last-child:after { border-bottom-width: 0px; } /* border variation */ .media-list > .media.border-dotted:after { border-bottom-style: dotted; } .media-list > .media.no-border:after { border-bottom-width: 0px; } /* * Media body */ .media-list > .media > a { position: absolute; top: 0; } .media-list > .media > a.btn-masklink { left: 0; width: 100%; height: 100%; display: block; z-index: 1; } .media-list > .media > a.btn-close { right: 5px; width: 25px; height: 25px; display: block; z-index: 2; color: #000; top: 10px; position: absolute; } .media-list > .media > a.btn-close i:before { color: #ddd; } /* media heading */ .media-list > .media > .media-body > .media-heading { display: block; font-weight: 600; color: #00b24b; margin-bottom: 0px; } /* media text */ .media-list > .media > .media-body > .media-text { display: block; color: #444444; margin: 0px; } /* media meta */ .media-list > .media > .media-body .media-meta { font-size: 11px; margin: 0px; } .media-list > .media > .media-body span.media-meta, .media-list > .media > .media-body p.media-meta, .media-list > .media > .media-body small.media-meta { color: #999999; } .media-list > .media > .media-body span.media-meta + span.media-meta { margin-left: 3px; } /* Media status - read */ .media-list > .media.read > .media-body > .media-heading, .media-list > .media.read > .media-body > .media-text, .media-list > .media.read > .media-body span.media-meta, .media-list > .media.read > .media-body p.media-meta, .media-list > .media.read > .media-body small.media-meta { color: #333; } /* * Media object */ .media-list > .media .media-object { width: 50px; height: 50px; text-align: center; } /* image */ .media-list > .media .media-object > img { max-width: 100%; } /* icon */ .media-list > .media .media-object > [class*=" ico-"], .media-list > .media .media-object > [class^="ico-"] { display: block; width: 34px; height: 34px; margin: 0px auto; line-height: 33px; text-align: center; background-color: #ecf0f1; color: #b1c2c6; border-radius: 50%; } /* * Media list feed ----------------------------------------------------------------------------- */ /* * Media */ .media-list-feed > .media { z-index: 1; overflow: visible; } .media-list-feed > .media + .media { margin-top: 10px; } .media-list-feed > .media:after { content: ""; position: absolute; z-index: -1; bottom: -50%; top: -50%; left: 32px; right: auto; width: 1px; height: auto; border-bottom-width: 0px; background-color: #dde4e6; } .media-list-feed > .media:first-child:after { top: 20%; } .media-list-feed > .media:last-child:after { background-color: transparent; bottom: 0; } /* * Media body */ /* media heading */ .media-list-feed > .media > .media-body > .media-heading { margin-top: 7px; margin-bottom: 5px; } /* media text */ .media-list-feed > .media > .media-body > .media-text { margin-bottom: 5px; } /* * Media object */ .media-list-feed > .media .media-object { width: 34px; height: 34px; margin-right: 1; margin-right: 10px; } /* * Media list contact ----------------------------------------------------------------------------- */ /* * Media */ .media-list-contact > a.media:active, .media-list-contact > a.media:hover, .media-list-contact > a.media:focus { background-color: transparent; } .media-list-contact > .media:after { left: 65px; } /* * Media object */ .media-list-contact > .media .media-object { width: 40px; height: 40px; } /* * Media list bubble ----------------------------------------------------------------------------- */ /* * Media */ .media-list-bubble > .media { padding: 15px; } .media-list-bubble > a.media:active, .media-list-bubble > a.media:hover, .media-list-bubble > a.media:focus { background-color: transparent; } .media-list-bubble > .media:after { display: none; } /* * Media object */ .media-list-bubble > .media .media-object { position: relative; float: left; margin-right: 15px; } .media-list-bubble > .media-right .media-object { float: right; margin-left: 15px; margin-right: 0px; } /* arrow left */ .media-list-bubble > .media .media-object:after { content: ""; position: absolute; top: 7px; right: -18px; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #f3f3f3 transparent transparent; } /* arrow right */ .media-list-bubble > .media-right .media-object:after { left: -18px; right: auto; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #00b1e1; } /* * Media body */ .media-list-bubble > .media-right > .media-body { text-align: right; } /* media text */ .media-list-bubble > .media > .media-body .media-text { display: inline-block; padding: 8px; background-color: #f3f3f3; border-radius: 6px; /* float: left; clear: both; */ } .media-list-bubble > .media-right > .media-body .media-text { /* float: right; */ color: #f2f2f2; background-color: #00b1e1; } .media-list-bubble > .media > .media-body .media-text ~ .media-text { margin-top: 5px; } /* media meta */ .media-list-bubble > .media > .media-body span.media-meta, .media-list-bubble > .media > .media-body p.media-meta, .media-list-bubble > .media > .media-body small.media-meta { color: #bbbbbb; padding: 0px 3px; margin-top: 5px; } /* * Media list comment ----------------------------------------------------------------------------- */ .media-list-comment .media { padding: 0px; } .media-list-comment .media + .media { margin-top: 25px; } .media-list-comment .media .media { margin-top: 25px; } .media-list-comment .media .media + .media { margin-top: 25px; } /* ---------------------------- * * Chart (flot) * * --------------------------- */ .chart { height: 200px; } /* Flot tooltip */ #flotTip { font-size: 12px !important; font-weight: 600; position: relative; z-index: 5; padding: 4px 5px; border-radius: 3px !important; border-color: transparent !important; background-color: #444 !important; color: #eee; } /* Flot legend */ .chart > .legend > table tr td { padding: 3px; } .chart > .legend > table tr td:first-child { padding-left: 5px; } .chart > .legend > table tr td:last-child { padding-right: 5px; } .chart > .legend > table tr + tr td { padding-top: 0px; } .chart > .legend > div:first-child { background-color: transparent !important; } .chart > .legend .legendColorBox > div { border-color: rgba(0, 0, 0, 0.1) !important; } .chart > .legend .legendColorBox > div, .chart > .legend .legendColorBox > div > div { border-radius: 50%; } /* Flot label / text */ .bgcolor-primary .chart .flot-text .tickLabel, .bgcolor-info .chart .flot-text .tickLabel, .bgcolor-success .chart .flot-text .tickLabel, .bgcolor-warning .chart .flot-text .tickLabel, .bgcolor-danger .chart .flot-text .tickLabel, .bgcolor-teal .chart .flot-text .tickLabel, .bgcolor-inverse .chart .flot-text .tickLabel, .panel-primary .chart .flot-text .tickLabel, .panel-info .chart .flot-text .tickLabel, .panel-success .chart .flot-text .tickLabel, .panel-warning .chart .flot-text .tickLabel, .panel-danger .chart .flot-text .tickLabel, .panel-teal .chart .flot-text .tickLabel, .panel-inverse .chart .flot-text .tickLabel { color: #cccccc !important; } /* Sparkline tooltip */ .jqstooltip { width: 40px; height: 25px !important; } /* ---------------------------- * * Background Color * * --------------------------- */ /* white */ .bgcolor-white { background-color: rgba(255, 255, 255, 0.98) !important; color: #444444 !important; border-color: #cfd9db !important; } /* default */ .bgcolor-default { background-color: #f6f6f6 !important; color: #444444 !important; border-color: #cfd9db !important; } /* primary */ .bgcolor-primary { background-color: #00b1e1 !important; color: #ffffff !important; color: rgba(255, 255, 255, 0.99) !important; border-color: #00a5d2 !important; } /* info */ .bgcolor-info { background-color: #63d3e9 !important; color: #ffffff !important; border-color: #4dcde6 !important; } /* success */ .bgcolor-success { background-color: #2ecc71 !important; color: #ffffff !important; border-color: #2ecc71 !important; } /* warning */ .bgcolor-warning { background-color: #ffd66a !important; color: #ffffff !important; border-color: #ffd056 !important; } /* danger */ .bgcolor-danger { background-color: #ed5466 !important; color: #ffffff !important; border-color: #eb4255 !important; } /* inverse */ .bgcolor-inverse { background-color: #2a2a2a !important; color: #ffffff !important; border-color: #202020 !important; } /* teal */ .bgcolor-teal { background-color: #6bccb4 !important; color: #ffffff !important; border-color: #5cc7ac !important; } /* accent */ .bgcolor-accent { background-color: #00b6ad !important; color: #ffffff !important; border-color: #00a29a !important; } /* ---------------------------- * * To Top Scroller * * --------------------------- */ .totop { position: fixed; z-index: 998; bottom: 10px; right: 10px; display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: rgba(0, 182, 173, 0.8); color: rgba(255, 255, 255, 0.8); text-align: center; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); font-size: 16px; } .totop.pull-left { right: auto; left: 10px; } .totop:hover, .totop:active, .totop:focus { color: rgba(255, 255, 255, 0.9); background-color: rgba(0, 182, 173, 0.9); outline: 0; } /* hide on sidebar open */ .sidebar-open-rtl .totop, .sidebar-open-ltr .totop { opacity: 0; } /* ---------------------------- * * Custom Scrollbar - slimscroll * * --------------------------- */ .scrollrail { opacity: 1 !important; background-color: rgba(181, 181, 181, 0.15) !important; border: 0px !important; border-radius: 0px !important; } .scrollbar { opacity: 1 !important; background-color: rgba(181, 181, 181, 0.9) !important; border: 0px !important; border-radius: 0px !important; } .sidebar .scrollrail { background-color: rgba(27, 27, 27, 0.15) !important; } .sidebar .scrollbar { background-color: rgba(27, 27, 27, 0.9) !important; } /* ---------------------------- * * Custom scrollbar - webkit * * --------------------------- */ .no-touch { /* Let's get this party started */ /* Track */ /* Handle */ } .no-touch::-webkit-scrollbar { width: 12px; } .no-touch::-webkit-scrollbar:horizontal { height: 12px; } .no-touch::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #ecf0f1; } .no-touch::-webkit-scrollbar-thumb { background: #c2c2c2; } .no-touch::-webkit-scrollbar-thumb:window-inactive { background: #cfcfcf; } /* ---------------------------- * * IFrame * * --------------------------- */ .iframe-container { position: relative; padding-bottom: 45%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } .iframe-container iframe, .iframe-container object, .iframe-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /****************************** PAGE LOADER ******************************/ #page-loader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #f2f2f2; z-index: 1000000000000; } #page-loader img { margin: 100px auto; display: block; width: 300px; } .loader { text-align: center; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; } .loader span { display: block; font: 14px "Montserrat", sans-serif; margin-bottom: 20px; } .spinner { margin: 0 auto; width: 40px; height: 40px; position: relative; } .container1 > div, .container2 > div, .container3 > div { width: 7px; height: 7px; background-color: #ffffff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } } /* ---------------------------- * * Animation - http://daneden.me/animate * * --------------------------- */ .animation { visibility: hidden; } .animation.delay { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } .animation.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animation.animating { visibility: visible; -webkit-animation-duration: 800ms; animation-duration: 800ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animation.animated { visibility: visible; } .animation.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* ---------------------------- * * NProgress * * --------------------------- */ /* Make clicks pass-through */ #nprogress { position: absolute; z-index: 9999; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(238, 238, 238, 0.9); /* bar *//* Fancy blur effect */ } #nprogress .bar { background: #ed5466; position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 3px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #ed5466, 0 0 5px #ed5466; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* spinner keyframe animation */ @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------------- * * Timeline * * --------------------------- */ .timeline { overflow: hidden; height: auto; position: relative; padding: 0px; list-style-type: none; } .timeline:after { position: absolute; width: 2px; left: 40px; margin-left: -2px; top: 0px; bottom: 0px; content: ""; background-color: #dde4e6; } .timeline .header { position: relative; z-index: 10; clear: both; margin-top: 0px; margin-bottom: 20px; margin-left: 0; background-color: #e2e6ea; margin-right: auto; } .timeline .header.year { background: #dde4e6; font-size: 14px; font-weight: 600; max-width: 100px; padding-top: 2px; padding-bottom: 2px; color: #333; border-radius: 3px; text-align: center; } .timeline .events { padding-left: 80px; overflow: auto; } .timeline .events > .wrapper { list-style: none; width: 90%; clear: both; } .timeline .events > .wrapper.featured { float: none !important; clear: both !important; margin-top: 80px !important; margin-left: auto; margin-right: auto; } .timeline .events > .wrapper.featured > .panel:after, .timeline .events > .wrapper.featured > .panel:before { display: none; } .timeline .events > .wrapper.featured > .figure { margin-top: -54px; width: 44px; height: 44px; line-height: 44px; margin-left: -24px; font-size: 16px; } .timeline .events > .wrapper:nth-of-type(odd) { float: left; clear: left; } .timeline .events > .wrapper:nth-of-type(odd) > .panel { z-index: 5; } .timeline .events > .wrapper:nth-of-type(odd) > .panel:after, .timeline .events > .wrapper:nth-of-type(odd) > .panel:before { content: ""; position: absolute; width: 0px; height: 0px; border-style: solid; } .timeline .events > .wrapper:nth-of-type(odd) > .panel:after { top: 10px; border-width: 10px 10px 10px 0; border-color: transparent #ffffff transparent transparent; left: -10px; } .timeline .events > .wrapper:nth-of-type(odd) > .panel:before { top: 10px; border-width: 10px 10px 10px 0; border-color: transparent #cfd9db transparent transparent; left: -11px; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-default:after { border-color: transparent transparent transparent #f6f6f6; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-default:before { border-color: transparent transparent transparent #cfd9db; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-primary:after { border-color: transparent transparent transparent #00b1e1; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-primary:before { border-color: transparent transparent transparent #00a5d2; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-success:after { border-color: transparent transparent transparent #91c854; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-success:before { border-color: transparent transparent transparent #85c241; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-info:after { border-color: transparent transparent transparent #63d3e9; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-info:before { border-color: transparent transparent transparent #48cbe5; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-warning:after { border-color: transparent transparent transparent #ffd66a; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-warning:before { border-color: transparent transparent transparent #ffce4b; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-danger:after { border-color: transparent transparent transparent #ed5466; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-danger:before { border-color: transparent transparent transparent #ea384d; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-inverse:after { border-color: transparent transparent transparent #2a2a2a; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-inverse:before { border-color: transparent transparent transparent #1b1b1b; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-teal:after { border-color: transparent transparent transparent #6bccb4; } .timeline .events > .wrapper:nth-of-type(odd) > .panel.panel-teal:before { border-color: transparent transparent transparent #58c5aa; } .timeline .events > .wrapper:nth-of-type(even) { float: left; clear: left; } .timeline .events > .wrapper:nth-of-type(even) > .panel { z-index: 5; } .timeline .events > .wrapper:nth-of-type(even) > .panel:after, .timeline .events > .wrapper:nth-of-type(even) > .panel:before { content: ""; position: absolute; width: 0px; height: 0px; border-style: solid; } .timeline .events > .wrapper:nth-of-type(even) > .panel:after { left: -10px; top: 10px; border-width: 10px 10px 10px 0; border-color: transparent #ffffff transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel:before { left: -11px; top: 10px; border-width: 10px 10px 10px 0; border-color: transparent #cfd9db transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-default:after { border-color: transparent #f6f6f6 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-default:before { border-color: transparent #cfd9db transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-primary:after { border-color: transparent #00b1e1 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-primary:before { border-color: transparent #00a5d2 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-success:after { border-color: transparent #91c854 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-success:before { border-color: transparent #85c241 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-info:after { border-color: transparent #63d3e9 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-info:before { border-color: transparent #48cbe5 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-warning:after { border-color: transparent #ffd66a transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-warning:before { border-color: transparent #ffce4b transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-danger:after { border-color: transparent #ed5466 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-danger:before { border-color: transparent #ea384d transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-inverse:after { border-color: transparent #2a2a2a transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-inverse:before { border-color: transparent #1b1b1b transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-teal:after { border-color: transparent #6bccb4 transparent transparent; } .timeline .events > .wrapper:nth-of-type(even) > .panel.panel-teal:before { border-color: transparent #58c5aa transparent transparent; } .timeline .events > .wrapper > .figure { position: absolute; z-index: 5; left: 40px; margin-top: 5px; margin-left: -18px; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; color: #b1c2c6; background-color: #ecf0f1; -webkit-box-shadow: 0px 0px 0px 3px #ecf0f1; box-shadow: 0px 0px 0px 3px #ecf0f1; } .timeline .events > .wrapper > .figure > img { width: 100%; } .timeline .header .panel-toolbar-wrapper > .panel-toolbar a { background-color: #e2e6ea; border: 1px solid #e2e6ea; color: #666; padding: 7px 20px; } .timeline .header .panel-toolbar-wrapper > .panel-toolbar a:hover { background-color: #ffffff; color: #666; border: 1px solid #fff; } .timeline .header .panel-toolbar-wrapper > .panel-toolbar a:first-child::before { font: 20px 'Simple-Line-Icons'; content: "\e075"; margin-right: 10px; vertical-align: middle; } .timeline .header .panel-toolbar-wrapper > .panel-toolbar a.active { background-color: #ffffff; color: #666; border: 1px solid #fff; } .timeline .header .panel-toolbar-wrapper > .panel-toolbar a:nth-child(2)::before { font: 20px 'Simple-Line-Icons'; content: "\e067"; margin-right: 10px; vertical-align: middle; } /* ---------------------------- * * Timeline - screenxs * * --------------------------- */ @media (max-width:767px) { .timeline .events { padding-left: 0px; } .timeline .events > .wrapper { width: auto; } .timeline .events > .wrapper:nth-of-type(odd), .timeline .events > .wrapper:nth-of-type(even) { float: none; clear: both; margin-top: 48px; } .timeline .events > .wrapper:nth-of-type(odd) > .panel:after, .timeline .events > .wrapper:nth-of-type(even) > .panel:after, .timeline .events > .wrapper:nth-of-type(odd) > .panel:before, .timeline .events > .wrapper:nth-of-type(even) > .panel:before { display: none; } .timeline .events > .wrapper > .figure { margin-top: -41px; } #storedetailset .form-control { font-size: 13px; padding: 6px 5px; margin-bottom: 3px; } } /* ---------------------------- * * Tooltip * * --------------------------- */ .tooltip .tooltip-inner { text-shadow: none !important; } /* ---------------------------- * * Horizontal rule * * --------------------------- */ /* ---------------------------- * * Pattern * * --------------------------- */ .pattern { position: absolute; z-index: 1; left: 0px; right: 0px; top: 0px; bottom: 0px; } .pattern.overlay { background-color: rgba(0, 0, 0, 0.7); } .pattern.overlay.overlay-accent { background-color: rgba(0, 182, 173, 0.8); } .pattern.overlay.overlay-primary { background-color: rgba(0, 177, 225, 0.8); } .pattern.overlay.overlay-info { background-color: rgba(99, 211, 233, 0.8); } .pattern.overlay.overlay-success { background-color: rgba(145, 200, 84, 0.8); } .pattern.overlay.overlay-warning { background-color: rgba(255, 214, 106, 0.8); } .pattern.overlay.overlay-danger { background-color: rgba(237, 84, 102, 0.8); } .pattern + .container, .pattern .container-fluid { position: relative; z-index: 2; } .pattern.pattern1 { background-image: url("../img/pattern/cartographer.png"); } .pattern.pattern2 { background-image: url("../img/pattern/dark-stripes.png"); } .pattern.pattern3 { background-image: url("../img/pattern/dark-wall.png"); } .pattern.pattern4 { background-image: url("../img/pattern/darth-stripe.png"); } .pattern.pattern5 { background-image: url("../img/pattern/egg-shell.png"); } .pattern.pattern6 { background-image: url("../img/pattern/escheresque-dark.png"); } .pattern.pattern7 { background-image: url("../img/pattern/fabric-1-dark.png"); } .pattern.pattern8 { background-image: url("../img/pattern/fake-brick.png"); } .pattern.pattern9 { background-image: url("../img/pattern/inspiration-geometry.png"); } .pattern.pattern10 { background-image: url("../img/pattern/low-contrast-linen.png"); } .pattern.pattern11 { background-image: url("../img/pattern/maze-black.png"); } .pattern.pattern12 { background-image: url("../img/pattern/outlets.png"); } .pattern.pattern13 { background-image: url("../img/pattern/shattered.png"); } .pattern.pattern14 { background-image: url("../img/pattern/translucent-fibres.png"); } .pattern.pattern15 { background-image: url("../img/pattern/diagmonds.png"); } /* ---------------------------- * * Folded Corner Note * * --------------------------- */ .note { position: relative; padding: 8px 25px 8px 15px; overflow: hidden; } .note:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: transparent transparent transparent transparent; } .note.note-rounded { -moz-border-radius: 3px 0px 3px 3px; border-radius: 3px 0px 3px 3px; } .note.note-rounded:before { border-width: 8px; -moz-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } .note.note-default { background: #e8e8e8; color: #444444; } .note.note-default:before { border-color: #ecf0f1 #ecf0f1 #d1d1d1 #d1d1d1; } .note.note-primary { background: #00b1e1; color: #ffffff; } .note.note-primary:before { border-color: #ecf0f1 #ecf0f1 #0091b8 #0091b8; } .note.note-info { background: #63d3e9; color: #ffffff; } .note.note-info:before { border-color: #ecf0f1 #ecf0f1 #3fc9e4 #3fc9e4; } .note.note-success { background: #91c854; color: #ffffff; } .note.note-success:before { border-color: #ecf0f1 #ecf0f1 #7db83b #7db83b; } .note.note-warning { background: #ffd66a; color: #ffffff; } .note.note-warning:before { border-color: #ecf0f1 #ecf0f1 #ffcb41 #ffcb41; } .note.note-danger { background: #ed5466; color: #ffffff; } .note.note-danger:before { border-color: #ecf0f1 #ecf0f1 #e92f45 #e92f45; } .note.note-inverse { background: #2a2a2a; color: #ffffff; } .note.note-inverse:before { border-color: #ecf0f1 #ecf0f1 #161616 #161616; } .bgcolor-white .note.note-default:before, .bgcolor-white .note.note-primary:before, .bgcolor-white .note.note-info:before, .bgcolor-white .note.note-success:before, .bgcolor-white .note.note-warning:before, .bgcolor-white .note.note-danger:before, .bgcolor-white .note.note-inverse:before { border-top-color: #ffffff; border-right-color: #ffffff; } /* ---------------------------- * * Offcanvas * * --------------------------- */ .offcanvas-container { position: relative; width: 100%; height: 100%; overflow: hidden; } .offcanvas-container .offcanvas-wrapper { position: absolute; z-index: 1; left: 0px; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform, left; -moz-transition-property: -moz-transform, left; -o-transition-property: -o-transform, left; transition-property: -webkit-transform, -moz-transform, -o-transform, transform, left; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } .offcanvas-container .offcanvas-content { position: absolute; top: 0px; width: 100%; height: 100%; } .offcanvas-container .offcanvas-left { position: absolute; z-index: 2; top: 0px; left: -100%; width: 100%; height: 100%; } .offcanvas-container .offcanvas-right { position: absolute; z-index: 2; top: 0px; left: 100%; width: 100%; height: 100%; } .offcanvas-container.offcanvas-open-rtl .offcanvas-wrapper { left: 100%; -webkit-transition: left 0.2s ease; -moz-transition: left 0.2s ease; -o-transition: left 0.2s ease; transition: left 0.2s ease; } .offcanvas-container.offcanvas-open-ltr .offcanvas-wrapper { left: -100%; -webkit-transition: left 0.2s ease; -moz-transition: left 0.2s ease; -o-transition: left 0.2s ease; transition: left 0.2s ease; } .csstransforms3d .offcanvas-container.offcanvas-open-ltr .offcanvas-wrapper { left: auto; -webkit-transform: translate3d(100%, 0px, 0px); -moz-transform: translate3d(100%, 0px, 0px); -o-transform: translate3d(100%, 0px, 0px); -ms-transform: translate3d(100%, 0px, 0px); transform: translate3d(100%, 0px, 0px); -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; } .csstransforms3d .offcanvas-container.offcanvas-open-rtl .offcanvas-wrapper { left: auto; -webkit-transform: translate3d(-100%, 0px, 0px); -moz-transform: translate3d(-100%, 0px, 0px); -o-transform: translate3d(-100%, 0px, 0px); -ms-transform: translate3d(-100%, 0px, 0px); transform: translate3d(-100%, 0px, 0px); -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: -webkit-transform 0.2s ease, -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease; } /* ---------------------------- * * For Project Style * * --------------------------- */ .panel.panel-minimal.showStatus { border-width: 0px; border-radius: 0px; background-color: #4f5467; color: #fff; } .panel.panel-minimal.showStatus > .panel-heading > .panel-title { display: table-cell; vertical-align: middle; width: 1%; height: 25px; float: none !important; } .showStatus > .numstatus { display: table; list-style: 0; margin: 0; padding: 0; } .showStatus > .numstatus > li { display: table-cell; vertical-align: middle; text-align: center; width: 1%; height: 70px; float: none !important; color: #fff; padding-bottom: 10px; background-color: #6f92ae; } .showStatus > .numstatus > li:first-child { background-color: #2ecc71; } .showStatus > .numstatus > li:last-child { background-color: #89c0e6; } .showStatus > .numstatus > li a { color: #fff; } .showStatus > .numstatus > li .num { font-size: 2.5em; display: block; } .event-toolbar > .nav-pills > li:last-child .tab-search { } .contactform .control-label { padding-top: 0px !important; } .ico-long-arrow-down, .panel>.dataTables_wrapper .table>thead>tr>th[class*="nosort"]:before { display: none; } .panel>.dataTables_wrapper .table>thead>tr>th:last-child { text-align: center; } /**/ .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋："; display: inline-block; margin-right: 5px;} .logtable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋操作功能："; display: inline-block; margin-right: 5px;} .contactstable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋："; display: inline-block; margin-right: 5px;} .bannertable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋標題或店鋪ID："; display: inline-block; margin-right: 5px;} .faqtable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋FAQ："; display: inline-block; margin-right: 5px;} .keywordtable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋關鍵字："; display: inline-block; margin-right: 5px;} .storestable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋店鋪名稱："; display: inline-block; margin-right: 5px;} .wordstable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋不雅字："; display: inline-block; margin-right: 5px;} .commentstable .dataTables_wrapper .dataTables_filter>label:before{content:"搜尋店鋪名稱："; display: inline-block; margin-right: 5px;} /**/ .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } /*.popover{left: -45px!important;}*/ /* Treeview mode */ .searchtable .form-group.btnsearch{ padding-top: 10px;padding-bottom: 15px; margin-left: 0px; margin-right: 8px; border-top: 0px solid transparent;border-top-color: transparent !important; } .searchtable .col-sm-12{ padding-right: 10px; padding-left: 5px; } .searchtable .form-control { padding: 6px 3px; font-size: 13px; } .searchtable .form-horizontal .control-label { padding-top: 3px; margin-bottom: 0; text-align: right; font-size: 13px; padding-right:5px; padding-left: 0px; } .searchtable .form-horizontal .form-group{ padding-top: 10px; padding-bottom: 10px; } .treeview .list-group-item { padding: 6px 5px;cursor: pointer; font-size: 13px; letter-spacing: -0.04em; border-radius: 0 !important;} .treeview span.indent { margin-left: 10px; margin-right: 10px; } .treeview span.icon { width: 12px; margin-right: 5px; } .treeview .node-disabled { color: silver; cursor: not-allowed; } .treeview .list-group-item.node-selected{ background-color:#28c537 !important; } .treeview span.indent { margin-left: 5px!important; margin-right: 5px!important; } .treeview .badge{ color: #666; background-color: #f2f2f2; font-weight: normal; } /* CSS Document */ @media (max-width:1300px) { html body { font-size: 13px; } .sidebar .topmenu li a { font-size: 15px; } .sidebar .topmenu li > .submenu li a { font-size: 13px; color: #eeeeee; padding: 2px 25px 2px 20px; background: transparent; } .form-control { font-size: 13px; border: 1px solid #cfd9db; line-height: normal; -moz-box-shadow: none; box-shadow: none; border-radius: 0px;} } @media (max-width:768px) { .show_name_mobile { display: grid; } #page-tool { left: 130px; } .edit-text-menu a, .edit-style a { display: inline-block; padding: 0 6px; } } @media (max-width:480px) { #CoverBox { top: 100px; margin-top: 0px; } /**/ #page-header .funcSet li a { font-size: 1.1em; color: #fff; padding: 0 10px; } #page-tool { position: absolute; top: 80px; left: 0px; z-index: 9999; width: 40px; background-color: rgba(58, 56, 58, 1); padding-bottom: 10px; } .edit-text-menu, .edit-style { float: none; } .edit-text-menu a, .edit-style a { display: block; } .edit-style { position: relative; width: 40px; margin-left: 0px; border-left: 0px solid #000; } .edit-style a.ga-edit-action { line-height: 10px; padding: 0px 0 7px 0; } .edit-style a.ga-edit-action::before { display: block; } .edit-style .colorplatte { position: absolute; top: 0px; left: 40px; z-index: 9999; width: 110px; } #page-tool .edit-style .colorplatte:before { position: absolute; top: 0px; left: -7px; display: inline-block; font: 20px FontAwesome; color: #fff; line-height: 40px; content: "\f0d9"; } .fav-page { left: 0%; width: 80px; top: -30px; font-size: 10px; } .fav-page a { font-size: 0; display: inline; } .fav-page a.btn-fav:before { margin-right: 5px; } #sortpannel { width: 320px; } .page-sort-tool ul li { padding: 0px 10px; vertical-align: middle; } .title { font-size: 2em; } .subtitle { font-size: 1.2em; color: #8e8c8c; } .ga-customize { text-align: right; } .ga-customize a::before { display: inline-block; font: 35px FontAwesome; color: #e0e0e0; } #storedetailset .form-horizontal .control-label { margin-top: 7px; } .storestatus .form-horizontal .control-label { padding-top: 0px !important; } .selectmobile { width: 50px !important; min-width: 50px !important; padding: 3px 3px !important; } .inputmobile { width: 60px !important; min-width: 60px !important; padding: 3px 3px !important; } } @media (max-width:320px) { }