diff --git a/app/package.json b/app/package.json index a1f0e3f..7e5e9aa 100644 --- a/app/package.json +++ b/app/package.json @@ -9,11 +9,15 @@ "@testing-library/user-event": "^13.5.0", "antd": "^4.18.2", "axios": "^0.24.0", + "html-react-parser": "^1.4.5", + "jquery": "^3.6.0", "moment": "^2.29.1", "node-sass": "^7.0.1", "react": "^17.0.2", "react-bootstrap": "1.0.1", + "react-datepicker": "^4.6.0", "react-dom": "^17.0.2", + "react-file-reader": "^1.1.4", "react-js-pagination": "^3.0.3", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", diff --git a/app/public/css/core.css b/app/public/css/core.css new file mode 100644 index 0000000..4d2a365 --- /dev/null +++ b/app/public/css/core.css @@ -0,0 +1,9387 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i'); + +/* ================================================================= + + Table of contents + + - Base + - Sidebar + - Header + - Sidebar second + - Template options + - Skins + - Navbar + - Content + - Widgets + - Pages + - Apps + - Forms + - Tables + - Extra + - Frontend + - Charts + - Calendar + - Maps + - Demo + - Other + - Bootstrap + - Helper classes + - Components + - Animations + +================================================================= */ + +/* ================================================================= + Base +================================================================= */ + +html, body { + width: 100%; + height: 100%; +} + +html { + position: relative; + font-size: 13px; +} + +body { + background-color: #bbc2ce; + font-family: 'Open Sans', sans-serif; +} + +.wrapper { + position: relative; + overflow: hidden; + min-height: 100%; + background-color: #e8ebf0; +} + +.boxed-wrapper .wrapper { + margin-left: auto; + margin-right: auto; + max-width: 1270px; +} + +/* * { + outline: none !important; +} */ + +* { + outline: none ; +} +a:focus, +a:hover, +a:active { + text-decoration: none; +} + +.content-appear > .wrapper { + -webkit-transform: rotateY(10deg) translateX(-150px); + transform: rotateY(10deg) translateX(-150px); + -webkit-transition: 0.4s all ease-in-out; + transition: 0.4s all ease-in-out; + opacity: 0; +} + +.content-appearing > .wrapper { + -webkit-transform: rotateY(0deg) translateX(0); + transform: rotateY(0deg) translateX(0); + opacity: 1; +} + +.preloader { + position: fixed; + top: 0; + width: 100%; + height: 100%; + z-index: 99999; + background: rgba(255, 255, 255, 0.8); +} + +.preloader:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 30px; + height: 30px; + border: 2px solid #20b9ae; + border-radius: 50%; + border-left-color: transparent; + border-right-color: transparent; + animation: rotate 425ms infinite linear; + -o-animation: rotate 425ms infinite linear; + -ms-animation: rotate 425ms infinite linear; + -webkit-animation: rotate 425ms infinite linear; + -moz-animation: rotate 425ms infinite linear; +} + +.site-overlay { + display: none; + position: fixed; + z-index: 98; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); +} + +@media (max-width:991px) { + .site-sidebar-opened .site-overlay { + display: block; + } +} + +/* ================================================================= + Sidebar +================================================================= */ + +.site-sidebar { + position: absolute; + z-index: 99; + top: 0; + bottom: 0; + left: 0; + margin-top: 60px; + width: 220px; + background-color: #212330; +} + +@media (max-width: 767px) { + .site-sidebar { + margin-left: -220px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + } + + .site-sidebar-opened .site-sidebar { + left: 0; + } +} + +.site-sidebar .custom-scroll { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.site-sidebar ul { + margin: 0; + padding: 0; + list-style: none; +} + +.site-sidebar .sidebar-menu .menu-title { + margin-top: 0.75rem; + padding: 0.5rem 1.25rem; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.5); + text-transform: uppercase; +} + +.site-sidebar .sidebar-menu li { + position: relative; +} + +.site-sidebar .sidebar-menu li > a { + display: block; + position: relative; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.7); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-sidebar .sidebar-menu li > a:hover, +.site-sidebar .sidebar-menu li.active > a { + color: #fff; +} + +.site-sidebar .sidebar-menu > li.active > a { + background-color: rgba(255, 255, 255, 0.1); +} + +@media (min-width: 768px) { + .site-sidebar .sidebar-menu > li.active > a:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + margin-top: -6px; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 6px 6px 6px 0; + border-right-color: #e8ebf0; + } +} + +.site-sidebar .sidebar-menu > li > a .s-icon { + float: left; + margin-right: 1.125rem; +} + +.site-sidebar .sidebar-menu > li > a .s-icon i { + position: relative; + top: 1px; + font-size: 1.15rem; +} + +.site-sidebar .sidebar-menu > li > a .s-text { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.site-sidebar .sidebar-menu > li.with-sub > a .s-caret { + float: right; + margin-left: 1rem; + font-size: 14px; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-sidebar .sidebar-menu > li.with-sub.active > a .s-caret { + -webkit-transform: rotate(0); + transform: rotate(0); +} + +.site-sidebar .sidebar-menu > li > a .tag { + float: right; + margin-top: 2px; + border-radius: 1rem; +} + +.site-sidebar .sidebar-menu ul { + display: none; +} + +.site-sidebar .sidebar-menu ul ul { + margin-left: 1rem; + display: none; +} + +.site-sidebar .sidebar-menu ul li > a { + padding: 0.5rem 1rem 0.5rem 3.5rem; +} + +/* Layout settings */ +.fixed-sidebar .site-sidebar { + position: fixed; +} + +@media (min-width: 768px) { + .compact-sidebar .site-sidebar { + width: 70px !important; + } + + .compact-sidebar .site-sidebar .custom-scroll, + .compact-sidebar .site-sidebar .jspContainer { + overflow: visible !important; + } + + .compact-sidebar .jspVerticalBar { + width: 0 !important; + } + + .compact-sidebar .site-sidebar .sidebar-menu .menu-title { + display: none; + } + + .compact-sidebar .site-sidebar .sidebar-menu li.compact-hide { + display: none; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li.active > a:after { + display: none; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li > a { + padding: 1rem 0 1rem 1.875rem; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li > a .s-icon { + margin-right: 2.85rem; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li > a .s-icon i { + top: 0; + font-size: 1.5rem; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li > a > .tag { + position: absolute; + z-index: 10; + top: 5px; + left: 35px; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li > a > .s-text, + .compact-sidebar .site-sidebar .sidebar-menu > li > a > .s-caret { + display: none; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li li > a > .s-caret { + color: #999; + } + + .compact-sidebar .site-sidebar .sidebar-menu li > ul { + position: absolute; + top: 100%; + left: 70px; + width: 220px; + background: #fff; + border-left: none; + } + + .compact-sidebar .site-sidebar .sidebar-menu > li:hover { + width: 290px; + background-color: #373944; + } + + .compact-sidebar .site-sidebar .sidebar-menu li:hover > a > .s-text { + display: block; + } + + .compact-sidebar .site-sidebar .sidebar-menu li:hover > ul { + display: block !important; + } + + .compact-sidebar .site-sidebar .sidebar-menu ul li > a { + padding: 0.5rem 1rem; + color: #777; + } + + .compact-sidebar .site-sidebar .sidebar-menu ul li > a:hover, + .compact-sidebar .site-sidebar .sidebar-menu ul li.active > a { + color: #333; + } + + .compact-sidebar .site-sidebar .sidebar-menu ul li.active > a { + font-weight: bold; + } +} + +/* Sidebar widgets */ +.site-sidebar .sidebar-menu .progress-widget { + padding: 0.75rem 1rem; + font-size: 0.75rem; +} + +.site-sidebar .sidebar-menu .progress-widget.progress-widget-light { + color: #eee; +} + +.site-sidebar .sidebar-menu .progress-widget.progress-widget-light .progress[value] { + background-color: rgba(255, 255, 255, 0.4); +} + +.site-sidebar .sidebar-menu .progress-widget.progress-widget-light .progress[value]::-webkit-progress-bar { + background-color: rgba(255, 255, 255, 0.4); +} + +@media screen and (min-width: 0\0) { + .site-sidebar .sidebar-menu .progress-widget.progress-widget-light .progress { + background-color: rgba(255, 255, 255, 0.4); + } +} + +.site-sidebar .sidebar-menu .progress-widget.progress-widget-dark { + color: #333; +} + +/* ================================================================= + Header +================================================================= */ + +.fixed-header .site-header { + z-index: 100; +} + +.fixed-header .site-header { + position: fixed; + top: 0; + left: 0; + right: 0; +} + +.site-header .navbar { + padding: 0; + background-color: #fff; +} + +.site-header .navbar-left { + height: 60px; + background-color: #212330; + text-align: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +@media (min-width: 768px) { + .site-header .navbar-left { + float: left; + width: 220px; + } + + .compact-sidebar .site-header .navbar-left { + width: 70px; + } +} + +.site-header .navbar-brand { + display: inline-block; + float: none; + margin: 0; + padding: 0rem 0 0; + height: 60px; +} + +.site-header .navbar-brand .logo { + width: 205px; + height: 70px; + background: url(../img/logo.png) no-repeat; +} + +@media (min-width: 768px) { + .compact-sidebar .site-header .navbar-brand .logo { + width: 55px; + background: url(../img/logo-small.png) no-repeat; + } +} + +.site-header .navbar-right { + padding: 0 15px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +@media (min-width: 768px) { + .site-header .navbar-right { + margin-left: 220px; + height: 60px !important; + } + + .compact-sidebar .site-header .navbar-right { + margin-left: 70px; + } +} + +.site-header .toggle-button { + position: relative; + width: 55px; + height: 60px; + line-height: 60px; + font-size: 1.5rem; + cursor: pointer; +} + +.site-header .navbar-right .toggle-button { + margin-left: -15px; +} + +.site-header .toggle-button.light { + color: rgba(0, 0, 0, 0.5); +} + +.site-header .toggle-button.dark { + color: rgba(255, 255, 255, 0.5); +} + +.site-header .toggle-button span { + position: absolute; + display: block; + top: 50%; + right: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .toggle-button span.hamburger { + left: 15px; + margin-top: -1px; + width: 22px; + height: 2px; +} + +.site-header .toggle-button span.more { + left: 50%; + margin: -2px 0 0 -2px; + width: 4px; + height: 4px; + border-radius: 50%; +} + +.site-header .toggle-button.light span { + background-color: rgba(0, 0, 0, 0.5); +} + +.site-header .toggle-button.dark span { + background-color: rgba(255, 255, 255, 0.5); +} + +.site-header .toggle-button span:before, +.site-header .toggle-button span:after { + content: ''; + position: absolute; + display: block; + left: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .toggle-button span.hamburger:before, +.site-header .toggle-button span.hamburger:after { + height: 2px; +} + +.site-header .toggle-button span.more:before, +.site-header .toggle-button span.more:after { + height: 4px; + border-radius: 50%; +} + +.site-header .toggle-button.light span:before, +.site-header .toggle-button.light span:after { + background-color: rgba(0, 0, 0, 0.5); +} + +.site-header .toggle-button.dark span:before, +.site-header .toggle-button.dark span:after { + background-color: rgba(255, 255, 255, 0.5); +} + +.site-header .toggle-button span.hamburger:before { + top: -6px; +} +.site-header .toggle-button span.hamburger:after { + bottom: -6px; +} + +.site-header .toggle-button span.more:before { + top: -8px; +} +.site-header .toggle-button span.more:after { + bottom: -8px; +} + +.site-header .toggle-button.light:hover span, +.site-header .toggle-button.light:hover span:before, +.site-header .toggle-button.light:hover span:after, +.site-header .toggle-button.light:focus span, +.site-header .toggle-button.light:focus span:before, +.site-header .toggle-button.light:focus span:after { + background-color: #333; +} + +.site-header .toggle-button.dark:hover span, +.site-header .toggle-button.dark:hover span:before, +.site-header .toggle-button.dark:hover span:after, +.site-header .toggle-button.dark:focus span, +.site-header .toggle-button.dark:focus span:before, +.site-header .toggle-button.dark:focus span:after { + background-color: #fff; +} + +.site-header .toggle-button-second { + width: 45px; + height: 59px; + line-height: 60px; + text-align: center; + cursor: pointer; +} + +.site-header .navbar-right .toggle-button-second { + margin: 0 -15px 0 15px; +} + +.site-header .toggle-button-second.light { + border-left: 1px solid rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.5); +} + +.site-header .toggle-button-second.dark { + border-left: 1px solid rgba(255, 255, 255, 0.125); + color: rgba(255, 255, 255, 0.7); +} + +.site-header .toggle-button-second i { + display: inline-block; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .toggle-button-second.active i { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.site-header .navbar-nav > li > a, +.site-header .navbar-nav > li > span { + padding-top: 1rem; + padding-bottom: 1rem; +} + +@media (min-width: 768px) { + .site-header .navbar-nav > li > a, + .site-header .navbar-nav > li > span { + padding-top: 0; + padding-bottom: 0; + line-height: 60px; + } +} + +.site-header .navbar-nav > li > a i { + position: relative; + top: 2px; + font-size: 1.3rem; +} + +.site-header .navbar-nav > li .btn { + vertical-align: baseline; +} + +.site-header .navbar-nav > li .avatar img { + vertical-align: top; +} + +.site-header .navbar .dropdown-menu { + margin-top: -1px; +} + +@media (max-width: 767px) { + .site-header .navbar .navbar-toggleable-sm { + position: absolute; + top: 60px; + left: 0; + right: 0; + padding: 1rem 2rem; + background-color: #fff; + border-bottom: 1px solid #ddd; + } +} + +@media (max-width: 991px) { + .site-header .navbar { + margin-left: 0 !important; + } +} + +.site-header .header-form { + padding-top: 1.1rem; +} + +@media (max-width: 767px) { + .site-header .header-form { + padding: 0.75rem 0; + } +} + +.site-header .header-form form { + position: relative; +} + +.site-header .header-form .btn { + position: absolute; + top: 1px; + right: 1px; + color: #999; +} + +@media (min-width: 768px) { + .site-header .header-form .form-control { + width: 180px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + } + + .site-header .header-form .form-control:focus { + width: 300px; + } +} + +.site-header .dropdown-more { + display: block; + padding: 0.75rem 1rem; + background-color: #eee; + color: #999; + text-align: center; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .dropdown-more:hover, +.site-header .dropdown-more:focus { + color: #333; +} + +/* Apps */ +.site-header .dropdown-apps { + padding: 0; + min-width: 300px; +} + +.site-header .dropdown-apps .a-grid { + padding: 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.site-header .dropdown-apps .a-item { + text-align: center; +} + +.site-header .dropdown-apps .a-item a { + display: block; + padding: 1rem 0; + color: rgba(0, 0, 0, 0.5); + border: 1px solid transparent; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .dropdown-apps .a-item a:hover, +.site-header .dropdown-apps .a-item a:focus { + border-color: rgba(0, 0, 0, 0.125); + color: rgba(0, 0, 0, 0.9); +} + +.site-header .dropdown-apps .a-item .ai-icon { + margin: 0 auto 1rem auto; + width: 32px; + height: 32px; +} + +.site-header .dropdown-apps .a-item .ai-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Tasks */ +.site-header .dropdown-tasks { + padding: 0; + min-width: 300px; +} + +.site-header .dropdown-tasks .t-item { + display: block; + padding: 0.75rem 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.site-header .dropdown-tasks .t-item:last-child { + border-bottom: none; +} + +.site-header .dropdown-tasks a.t-item { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .dropdown-tasks .t-item .progress { + margin-bottom: 0.5rem; +} + +.site-header .dropdown-tasks .t-item .avatar { + margin-right: 0.5rem; +} + +/* Messages */ +.site-header .dropdown-messages { + padding: 0; + min-width: 300px; +} + +.site-header .dropdown-messages .m-item { + display: block; + position: relative; + padding: 0.75rem 1rem 0.75rem 4.5rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.site-header .dropdown-messages .m-item:last-child { + border-bottom: none; +} + +.site-header .dropdown-messages .m-item { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-header .dropdown-messages .m-item .mi-icon { + position: absolute; + top: 15px; + left: 15px; + width: 30px; + height: 30px; + line-height: 30px; + font-size: 0.75rem; + text-align: center; + border-radius: 50%; +} + +.site-header .dropdown-messages .m-item .mi-text { + color: #999; +} + +.site-header .dropdown-messages .m-item .mi-time { + font-size: 90%; + color: #999; +} + +/* ================================================================= + Sidebar second +================================================================= */ + +.site-sidebar-second { + position: absolute; + z-index: 96; + right: -350px; + top: 60px; + bottom: 0; + width: 350px; + background: #ffffff; + border-left: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 5px 10px 40px rgba(0, 0, 0, 0.1); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.fixed-header .site-sidebar-second { + position: fixed; +} + +.site-sidebar-second.opened { + right: 0; +} + +.site-sidebar-second .nav-tabs { + width: 100%; + background-color: #eee; + border: none; +} + +.site-sidebar-second .nav-tabs .nav-item { + display: table-cell; + float: none; + margin-bottom: 0; + width: 1%; + text-align: center; +} + +.site-sidebar-second .nav-tabs .nav-item + .nav-item { + margin-left: 0; +} + +.site-sidebar-second .nav-tabs .nav-link { + padding: 0.75em 1em; + color: #999; + border: none; +} + +.site-sidebar-second .nav-tabs .nav-link.active, .site-sidebar-second .nav-tabs .nav-link.active:focus, .site-sidebar-second .nav-tabs .nav-link.active:hover { + color: #333; +} + +.site-sidebar-second .nav-tabs .nav-item.open .nav-link, +.site-sidebar-second .nav-tabs .nav-item.open .nav-link:focus, +.site-sidebar-second .nav-tabs .nav-item.open .nav-link:hover { + border-color: #eee; +} + +.site-sidebar-second .tab-content { + padding: 1rem 0; +} + +.site-sidebar-second h6 { + margin-bottom: 1rem; + font-weight: normal; + color: #999; + text-transform: uppercase; +} + +.site-sidebar-second .sidebar-group { + padding: 1.5rem 0; +} + +/* Chat */ +.site-sidebar-second .sidebar-chat h6 { + padding: 0 2rem; +} + +.site-sidebar-second .sidebar-chat a { + display: block; + position: relative; + padding: 0.5rem 2rem; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.site-sidebar-second .sidebar-chat a:hover { + background-color: #f5f5f5; +} + +.site-sidebar-second .sidebar-chat span { + display: inline-block; +} + +.site-sidebar-second .sidebar-chat .sc-status { + margin-right: 1rem; + width: 10px; + height: 10px; + border-radius: 50%; +} + +.site-sidebar-second .sidebar-chat .sc-name { + margin-right: 1rem; +} + +.site-sidebar-second .sidebar-chat .tag { + position: relative; + top: -2px; + border-radius: 1rem; +} + +.site-sidebar-second .sidebar-chat .sc-writing { + position: relative; + padding-left: 25px; + color: #999; + font-size: 90%; +} + +.site-sidebar-second .sidebar-chat .sc-writing i { + position: absolute; + top: 3px; + left: 0; + -webkit-animation-name: writing; + -o-animation-name: writing; + animation-name: writing; + -webkit-animation-duration: 1.2s; + -o-animation-duration: 1.2s; + animation-duration: 1.2s; + -webkit-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Chat window */ +.site-sidebar-second .sidebar-chat-window { + display: none; + padding: 0 2rem; +} + +.site-sidebar-second .sidebar-chat-window .scw-header { + padding: 1.5rem 0; +} + +.site-sidebar-second .sidebar-chat-window .scw-header a { + display: block; + margin-top: 5px; +} + +.site-sidebar-second .sidebar-chat-window .scw-header .avatar { + display: inline-block; + margin-left: 0.5rem; +} + +.site-sidebar-second .sidebar-chat-window .scw-item { + margin-bottom: 1.5rem; + text-align: left; +} + +.site-sidebar-second .sidebar-chat-window .scw-item.self { + text-align: right; +} + +.site-sidebar-second .sidebar-chat-window .scw-item span { + display: inline-block; + padding: 0.5rem 1rem; + max-width: 70%; + background-color: #eee; + text-align: left; +} + +.site-sidebar-second .sidebar-chat-window .scw-item.self span { + background-color: #3e70c9; + color: #fff; +} + +.site-sidebar-second .sidebar-chat-window .scw-form { + padding-top: 1rem; + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.site-sidebar-second .sidebar-chat-window .scw-form form { + position: relative; +} + +.site-sidebar-second .sidebar-chat-window .scw-form .form-control { + padding: 0; + border-color: transparent; + background-color: transparent; +} + +.site-sidebar-second .sidebar-chat-window .scw-form .btn { + position: absolute; + top: -2px; + background-color: #fff !important; + right: 0; + background-color: transparent; + font-size: 0.75rem; + color: #999; + border: none; + box-shadow: none; +} + +/* Activity */ +.site-sidebar-second .sidebar-activity { + padding: 2rem; +} + +/* Todo */ +.site-sidebar-second .sidebar-todo { + padding: 0 2rem; +} + +.site-sidebar-second .sidebar-todo .st-item { + position: relative; + margin-bottom: 1rem; + padding-right: 3rem; +} + +.site-sidebar-second .sidebar-todo .st-item input[type=checkbox]:checked+span+span { + text-decoration: line-through; + color: #999; +} + +/* Settings */ +.site-sidebar-second .sidebar-settings { + padding: 0 2rem; +} + +.site-sidebar-second .sidebar-settings .ss-item { + position: relative; + margin-bottom: 1rem; + padding-right: 3rem; +} + +.site-sidebar-second .sidebar-settings .ss-checkbox { + position: absolute; + top: 0; + right: 0; +} + +/* ================================================================= + Template options +================================================================= */ + +.template-options { + position: absolute; + z-index: 97; + right: -320px; + top: 60px; + bottom: 0; + width: 320px; + background: #fff; + border-left: 1px solid rgba(0, 0, 0, 0.1); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +@media (min-width: 544px) { + .template-options { + right: -400px; + width: 400px; + } +} + +@media (min-width: 992px) { + .template-options { + z-index: 99; + } +} + +.fixed-header .template-options { + position: fixed; +} + +.template-options .custom-scroll { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.template-options.opened { + right: 0; + box-shadow: 5px 10px 40px rgba(0, 0, 0, 0.1); +} + +.template-options .to-content { + padding: 2rem; +} + +@media (min-width: 544px) { + .template-options .to-content { + padding: 3rem; + } +} + +.template-options .to-content h6 { + margin-bottom: 1rem; + font-weight: normal; + color: #999; + text-transform: uppercase; +} + +.template-options a, +.template-options label { + display: block; + position: relative; + margin-bottom: 0.5rem; +} + +.template-options label, +.template-options label:focus, +.template-options label:hover { + cursor: pointer; +} + +.template-options label.skin-label { + width: 50px; +} + +.template-options input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.template-options .disabled { + cursor: not-allowed; +} + +.template-options .disabled label { + background-color: #aaa; + pointer-events: none; +} + +.template-options .to-icon { + position: absolute; + z-index: 10; + opacity: 0; + left: 50%; + top: 50%; + margin: -15px 0 0 -15px; + width: 30px; + height: 30px; + line-height: 30px; + background-color: #20b9ae; + font-size: 1.25rem; + color: #fff; + text-align: center; + border-radius: 50%; +} + +.template-options input:checked + .to-icon { + opacity: 1; +} + +.template-options .to-material { + position: relative; + padding-left: 4rem; +} + +.template-options .to-material .tom-checkbox { + position: absolute; + top: -2px; + left: 0; +} + +.template-options .to-skin { + position: relative; + width: 50px; + height: 50px; +} + +.template-options .to-skin:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.template-options .to-skin:after { + content: ''; + display: table; + clear: both; +} + +.template-options .to-skin span { + display: inline-block; + float: left; + width: 25px; + height: 25px; +} + +.template-options .to-skin .skin-dark-blue { + background-color: #212330; +} + +.template-options .to-skin .skin-dark-blue-2 { + background-color: #373944; +} + +.template-options .to-skin .skin-grey { + background-color: #ddd; +} + +/* Toggle */ +.template-options .to-toggle { + position: absolute; + top: 200px; + left: -45px; + width: 45px; + height: 45px; + line-height: 47px; + background-color: #fff; + font-size: 1.4rem; + color: #999; + text-align: center; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.125); + border-right: none; + box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.template-options .to-toggle:hover { + color: #333; +} + +/* ================================================================= + Skins +================================================================= */ + +/* Skin 1 */ +.skin-1 .site-sidebar { + background-color: #fff; +} + +.skin-1 .site-sidebar .sidebar-menu .menu-title { + color: rgba(0, 0, 0, 0.5); +} + +.skin-1 .site-sidebar .sidebar-menu li > a { + color: rgba(0, 0, 0, 0.7); +} + +.skin-1 .site-sidebar .sidebar-menu li > a:hover, +.skin-1 .site-sidebar .sidebar-menu li.active > a { + color: #333; +} + +.skin-1 .site-sidebar .sidebar-menu > li.active > a, +.skin-1.compact-sidebar .site-sidebar .sidebar-menu > li:hover { + background-color: #eee; +} + +.skin-1 .site-header .navbar-left { + background-color: #373944; +} + +.skin-1 .site-header .navbar { + background-color: #373944; +} + +/* Skin 2 */ +.skin-2 .site-sidebar { + background-color: #111; +} + +.skin-2 .site-header .navbar-left { + background-color: #e31e24; +} + +/* Skin 3 */ +.skin-3 .site-sidebar { + background-color: #fff; +} + +.skin-3 .site-sidebar .sidebar-menu .menu-title { + color: rgba(0, 0, 0, 0.5); +} + +.skin-3 .site-sidebar .sidebar-menu li > a { + color: rgba(0, 0, 0, 0.7); +} + +.skin-3 .site-sidebar .sidebar-menu li > a:hover, +.skin-3 .site-sidebar .sidebar-menu li.active > a { + color: #333; +} + +.skin-3 .site-sidebar .sidebar-menu > li.active > a, +.skin-3.compact-sidebar .site-sidebar .sidebar-menu > li:hover { + background-color: #eee; +} + +.skin-3 .site-header .navbar-left { + background-color: #fff; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.skin-3 .site-header .navbar-brand .logo { + background: url(../img/logo-second.png) no-repeat; +} + +/* Skin 1 */ +.skin-4 .site-sidebar { + background-color: #fff; +} + +.skin-4 .site-sidebar .sidebar-menu .menu-title { + color: rgba(0, 0, 0, 0.5); +} + +.skin-4 .site-sidebar .sidebar-menu li > a { + color: rgba(0, 0, 0, 0.7); +} + +.skin-4 .site-sidebar .sidebar-menu li > a:hover, +.skin-4 .site-sidebar .sidebar-menu li.active > a { + color: #333; +} + +.skin-4 .site-sidebar .sidebar-menu > li.active > a, +.skin-4.compact-sidebar .site-sidebar .sidebar-menu > li:hover { + background-color: #eee; +} + +.skin-4 .site-header .navbar-left { + background-color: #fff; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.skin-4 .site-header .navbar { + background-color: #373944; +} + +.skin-4 .site-header .navbar-brand .logo { + background: url(../img/logo-second.png) no-repeat; +} + +/* Skin 5 */ +.skin-5 .site-sidebar { + background-color: #fff; +} + +.skin-5 .site-sidebar .sidebar-menu .menu-title { + color: rgba(0, 0, 0, 0.5); +} + +.skin-5 .site-sidebar .sidebar-menu li > a { + color: rgba(0, 0, 0, 0.7); +} + +.skin-5 .site-sidebar .sidebar-menu li > a:hover, +.skin-5 .site-sidebar .sidebar-menu li.active > a { + color: #333; +} + +.skin-5 .site-sidebar .sidebar-menu > li.active > a, +.skin-5.compact-sidebar .site-sidebar .sidebar-menu > li:hover { + background-color: #eee; +} + +.skin-5 .site-header .navbar-left { + background-color: #3e70c9; +} + +.skin-5 .site-header .navbar { + background-color: #3e70c9; +} + +/* Skin 6 */ +.skin-6 .site-sidebar { + background-color: #000; +} + +.skin-6 .site-header .navbar-left { + background-color: #000; +} + +.skin-6 .site-header .navbar { + background-color: #20b9ae; +} + +/* ================================================================= + Navbar +================================================================= */ + +.navbar { + padding: 1rem; + border-radius: 0; +} + +.navbar .navbar-toggler { + padding-left: 0; + padding-right: 0; + border-radius: 0; +} + +@media (max-width: 767px) { + .navbar .navbar-toggleable-sm { + padding-top: 1rem; + } +} + +@media (min-width: 768px) { + .navbar-nav .nav-item+.nav-item { + margin-left: 1.5rem; + } +} + +.navbar-brand, +.nav-link { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.navbar-brand { + font-weight: bold; +} + +.navbar .avatar { + display: inline-block; +} + +.navbar .tag { + position: relative; + top: -1px; + margin-left: 0.5rem; + border-radius: 1rem; +} + +@media (max-width: 767px) { + .navbar ul > li > a .tag { + float: right; + } +} + +@media (min-width: 768px) { + .navbar ul > li > a .tag { + top: -12px; + margin-left: 0; + } +} + +.form-inline .input-group .form-control, +.form-inline .input-group .input-group-addon, +.form-inline .input-group .input-group-btn { + width: auto; +} + +.navbar .navbar-toggleable-sm .form-inline .input-group .form-control { + width: 100%; +} + +@media (max-width: 767px) { + .navbar .navbar-toggleable-sm .form-inline .input-group .input-group-addon, + .navbar .navbar-toggleable-sm .form-inline .input-group .input-group-btn { + width: 1%; + } +} + +.navbar .dropdown-menu { + margin: 0; + border: 1px solid #ddd; +} +.form-inline .input-group { + display: inline-table; + vertical-align: middle; +} +.dropdown-menu i { + position: relative; + top: 1px; +} + +@media (max-width: 767px){ + .navbar .dropdown-menu { + position: static; + margin-bottom: 1rem; + width: 100%; + } +} + +.navbar-light .navbar-brand { + color: rgba(0, 0, 0, 0.9); +} + +.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { + color: rgba(0, 0, 0, 0.9); +} + +.navbar-light .navbar-nav .nav-link { + color: rgba(0, 0, 0, 0.5); +} + +.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { + color: rgba(0, 0, 0, 0.9); +} + +.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .open > .nav-link:focus, .navbar-light .navbar-nav .open > .nav-link:hover, +.navbar-light .navbar-nav .active > .nav-link, +.navbar-light .navbar-nav .active > .nav-link:focus, +.navbar-light .navbar-nav .active > .nav-link:hover, +.navbar-light .navbar-nav .nav-link.open, +.navbar-light .navbar-nav .nav-link.open:focus, +.navbar-light .navbar-nav .nav-link.open:hover, +.navbar-light .navbar-nav .nav-link.active, +.navbar-light .navbar-nav .nav-link.active:focus, +.navbar-light .navbar-nav .nav-link.active:hover { + color: rgba(0, 0, 0, 0.9); +} + +.navbar-dark .navbar-toggler { + color: #fff; +} + +.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.7); +} + +.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { + color: rgba(255, 255, 255, 0.9); +} + +.navbar-dark .navbar-nav .open > .nav-link, .navbar-dark .navbar-nav .open > .nav-link:focus, .navbar-dark .navbar-nav .open > .nav-link:hover, +.navbar-dark .navbar-nav .active > .nav-link, +.navbar-dark .navbar-nav .active > .nav-link:focus, +.navbar-dark .navbar-nav .active > .nav-link:hover, +.navbar-dark .navbar-nav .nav-link.open, +.navbar-dark .navbar-nav .nav-link.open:focus, +.navbar-dark .navbar-nav .nav-link.open:hover, +.navbar-dark .navbar-nav .nav-link.active, +.navbar-dark .navbar-nav .nav-link.active:focus, +.navbar-dark .navbar-nav .nav-link.active:hover { + color: rgba(255, 255, 255, 0.9); +} + +@media (max-width: 767px) { + .navbar-dark .navbar-nav .nav-link { + color: rgba(0, 0, 0, 0.5); + } + + .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { + color: rgba(0, 0, 0, 0.9); + } + + .navbar-dark .navbar-nav .open > .nav-link, .navbar-dark .navbar-nav .open > .nav-link:focus, .navbar-dark .navbar-nav .open > .nav-link:hover, + .navbar-dark .navbar-nav .active > .nav-link, + .navbar-dark .navbar-nav .active > .nav-link:focus, + .navbar-dark .navbar-nav .active > .nav-link:hover, + .navbar-dark .navbar-nav .nav-link.open, + .navbar-dark .navbar-nav .nav-link.open:focus, + .navbar-dark .navbar-nav .nav-link.open:hover, + .navbar-dark .navbar-nav .nav-link.active, + .navbar-dark .navbar-nav .nav-link.active:focus, + .navbar-dark .navbar-nav .nav-link.active:hover { + color: rgba(0, 0, 0, 0.9); + } +} + +@media (min-width: 768px) { + .navbar-full-width { + padding-top: 0; + padding-bottom: 0; + } + + .navbar-full-width .navbar-nav { + width: 100%; + } + + .navbar-full-width .navbar-nav > li { + display: table-cell; + float: none; + width: 1%; + text-align: center; + } + + .navbar-full-width .navbar-nav > li > a { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-right: 1px solid rgba(0, 0, 0, 0.1); + } + + .navbar-full-width .navbar-nav > li:last-child > a { + border-right: none; + } +} + +@media (min-width: 768px) { + .navbar-bottom-line { + padding-top: 0; + padding-bottom: 0; + } + + .navbar-bottom-line .navbar-brand { + padding-top: 0.65rem; + } + + .navbar-bottom-line .navbar-nav .nav-item + .nav-item { + margin-left: 2rem; + } + + .navbar-bottom-line .navbar-nav > li > a { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid transparent; + } + + .navbar-bottom-line .navbar-nav .active > .nav-link, + .navbar-bottom-line .navbar-nav .active > .nav-link:focus, + .navbar-bottom-line .navbar-nav .active > .nav-link:hover { + color: #3e70c9; + border-color: #3e70c9; + } + + .navbar-bottom-line .navbar-nav .nav-link:focus, .navbar-bottom-line .navbar-nav .nav-link:hover { + border-color: rgba(0, 0, 0, 0.3); + } +} + +/* ================================================================= + Content +================================================================= */ + +.site-content { + margin-left: 0; +} + +/* Layout settings */ +.fixed-header .site-content { + padding-top: 60px; +} + +.fixed-footer .content-area { + margin-bottom: 3.5rem; +} + +@media (min-width: 768px) { + .compact-sidebar .site-content { + margin-left: 70px; + } +} +@media (max-width: 767px) { + .site-content { + margin-left: 0!important; + } +} + +/* ================================================================= + Widgets +================================================================= */ + +/* Banners */ +.banner { + position: relative; + overflow: hidden; + background-color: #fff; +} + +.banner .b-img { + position: absolute; + z-index: 8; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.banner .gradient { + position: absolute; + z-index: 9; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.8; +} + +.banner .b-content { + position: relative; + z-index: 10; + padding: 3rem 2rem; +} + +.banner .b-title { + font-size: 2rem; + font-weight: bold; + color: #fff; + text-transform: uppercase; +} + +.banner .b-title span { + display: inline-block; + margin-bottom: 1rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.4); +} + +.banner .b-text { + color: rgba(255, 255, 255, 0.9); +} + +/* Cart mini */ +.cart-mini .cm-title { + padding: 0.75rem 1.25rem; + font-weight: bold; + text-transform: uppercase; +} + +.cart-mini .cm-title span { + font-weight: bold; +} + +.cart-mini .positions td { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.cart-mini .cm-total { + padding-top: 7px; +} + +/* Comments */ +.comments .c-item { + margin-bottom: 1rem; +} + +.comments .c-item:last-child { + margin-bottom: 0; +} + +.comments .c-item .c-item { + margin-top: 1rem; + margin-left: 62px; +} + +.comments .c-item .c-user { + margin-right: 0.5rem; + font-weight: bold; +} + +.comments .c-item .c-text { + margin-bottom: 0.5rem; +} + +.comments .c-rating { + padding-top: 27px; + width: 100px; + text-align: right; +} + +.comments .c-compose textarea { + padding: 1rem 1.25rem; + width: 100%; + min-height: 80px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +/* Modals */ +.custom-modal-1 .cm-img { + position: relative; + height: 200px; +} + +.custom-modal-1 .gradient { + position: absolute; + z-index: 9; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.8; +} + +.custom-modal-1 .modal-body, +.custom-modal-1 .cm-content { + position: relative; + z-index: 10; +} + +.custom-modal-1 .cm-content { + padding: 1.25rem; + color: #fff; + text-align: center; +} + +.custom-modal-1 .cm-title { + padding-top: 40px; + font-weight: bold; + font-size: 2rem; + text-transform: uppercase; +} + +.custom-modal-1 .cm-text { + color: rgba(255, 255, 255, 0.7); +} + +.custom-modal-2 .modal-header { + padding: 12px 15px 10px; + background-color: #f5f5f5; + text-align: center; +} + +.custom-modal-2 .modal-title { + font-weight: normal; + text-transform: uppercase; +} + +.custom-modal-2 .form-control { + background-color: #f5f5f5; +} + +.custom-modal-3 { + color: #fff; +} + +.custom-modal-3 .modal-content:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +.custom-modal-3 .modal-body { + position: relative; + z-index: 10; +} + +.custom-modal-3 h2 { + padding-top: 150px; +} + +.custom-modal-3 h6 { + font-weight: normal; + text-transform: uppercase; +} + +.custom-modal-3 .form-control { + background-color: rgba(255, 255, 255, 0.8); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.custom-modal-3 .form-control:focus { + background-color: rgba(255, 255, 255, 0.9); +} + +.custom-modal-4 .modal-content { + position: relative; + padding-left: 250px; +} + +.custom-modal-4 .cm-img { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 250px; +} + +.custom-modal-4 .gradient { + position: absolute; + z-index: 9; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.8; +} + +.custom-modal-4 .cm-content { + position: absolute; + bottom: 0; + z-index: 10; + padding: 1.25rem; + color: #fff; +} + +.custom-modal-4 h6 { + font-weight: normal; + color: rgba(255, 255, 255, 0.7); +} + +.custom-modal-5 .modal-body { + padding: 2rem 3rem; +} + +.custom-modal-5 .cm-icon { + display: inline-block; + width: 50px; + height: 50px; + line-height: 50px; + color: #fff; + text-align: center; + border-radius: 50%; +} + +.custom-modal-5 .btn { + border-left: none; + border-right: none; + border-bottom: none; +} + +.custom-modal-6 .modal-header, +.custom-modal-6 .modal-footer { + text-align: center; +} + +/* Footers */ +footer .f-logo { + font-size: 1.25rem; + font-weight: bold; +} + +footer .f-menu ul { + margin-bottom: 0; +} + +footer .f-menu ul li { + margin-bottom: 0.25rem; +} + +footer .f-menu ul li a { + color: #777; + border-bottom: 1px solid transparent; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +footer .f-menu ul li a:focus, +footer .f-menu ul li a:hover, +footer .f-menu ul li.active a { + color: #333; + border-color: #333; +} + +footer .f-title { + margin-bottom: 1rem; + font-weight: bold; + text-transform: uppercase; +} + +/* Gallery */ +.gallery a { + display: block; + position: relative; + overflow: hidden; + margin-bottom: 1rem; +} + +.gallery a img { + -webkit-transition: all 0.2s linear; + transition: all 0.2s linear; +} + +.gallery a:hover img { + opacity: 0.7; + filter: alpha(opacity=70); +} + +.gallery a .g-icon { + position: absolute; + z-index: 10; + width: 50px; + height: 50px; + top: 50%; + left: 50%; + margin: -25px 0 0 -25px; + font-size: 1.5rem; + color: rgba(255, 255, 255, 0.9); + line-height: 55px; + text-align: center; + -webkit-transition: all 0.2s linear; + transition: all 0.2s linear; + opacity: 0; + filter: alpha(opacity=0); +} + +.gallery a:hover .g-icon { + opacity: 1; + filter: alpha(opacity=100); +} + +.gallery-2 .g-item { + overflow: hidden; + position: relative; + background-color: #f3f7fc; +} + +.gallery-2 .g-item a { + display: block; + overflow: hidden; +} + +.gallery-2 .g-item img { + width: 100%; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.gallery-2 .g-item:hover img { + -webkit-transform: scale(1.2); + transform: scale(1.2); +} + +.gallery-2 .g-item .g-item-overlay { + position: absolute; + bottom: -40px; + left: 0; + padding: 0.75rem 1.25rem; + width: 100%; + height: 40px; + color: #fff; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.gallery-2 .g-item:hover .g-item-overlay { + bottom: 0; +} + +/* Headers */ +.header { + position: relative; + overflow: hidden; + background-color: #fff; + color: #fff; +} + +.header .gradient { + position: absolute; + z-index: 9; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.8; +} + +.header .h-content { + position: relative; + z-index: 10; + padding: 2rem; +} + +.header .h-logo a { + font-size: 1.5rem; + font-weight: bold; + text-transform: uppercase; +} + +.header .h-menu { + padding-top: 6px; +} + +.header .h-menu li { + margin-right: 1rem; +} + +.header .h-menu a { + font-size: 1.125rem; +} + +.header .h-links a { + font-size: 1.5rem; +} + +.header .h-title { + margin-bottom: 2rem; + padding-top: 100px; + font-size: 3rem; + font-weight: bold; + text-transform: uppercase; +} + +.header .h-text { + margin-bottom: 2.5rem; + font-size: 1.125rem; + color: rgba(255, 255, 255, 0.9); +} + +.header .btn { + margin: 0 0.5rem; + font-size: 1rem; + text-transform: uppercase; +} + +.header .h-buttons, +.header .h-form, +.header .h-timer { + padding-bottom: 100px; +} + +.header .h-form .form-control { + background-color: rgba(255, 255, 255, 0.8); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.header .h-form .form-control:focus { + background-color: rgba(255, 255, 255, 0.9); +} + +.header .h-form .input-group-addon { + font-size: 1.25rem; + color: rgba(0, 0, 0, 0.5); + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.header .h-timer .ht-item { + display: inline-block; + margin: 0 1rem; + font-size: 3rem; +} + +.header .h-timer .ht-item span { + display: block; + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); +} + +.header .h-down { + position: absolute; + z-index: 10; + bottom: 0; + left: 50%; + margin-left: -35px; + width: 70px; + height: 70px; + line-height: 70px; + text-align: center; +} + +.header .h-down a { + display: block; + width: 100%; + height: 100%; + font-size: 1.5rem; +} + +/* Items list */ +.items-list .il-item { + position: relative; + overflow: hidden; + padding: 1rem 1.25rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.items-list .il-item:hover { + background-color: #f5f5f5; +} + +.items-list .il-item .media-heading { + margin-top: 4px; +} + +.items-list .il-item .il-icon { + position: absolute; + top: 20px; + right: -30px; + font-size: 20px; + color: #999; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.items-list .il-item:hover .il-icon { + right: 15px; +} + +/* Messenger */ +.messenger { + overflow: hidden; +} + +.messenger .m-title { + padding: 0 1.25rem; + height: 65px; + line-height: 65px; + font-weight: bold; + text-transform: uppercase; + background-color: #f5f5f5; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.messenger .m-header { + padding: 1rem 1.25rem; + height: 65px; + background-color: #f5f5f5; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.messenger .m-form { + position: absolute; + z-index: 10; + bottom: 0; + left: 0; + right: 0; + padding: 1rem 1.25rem; + background-color: #f5f5f5; + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.messenger .m-form .mf-search { + position: relative; +} + +.messenger .m-form .mf-search .form-control { + border-color: transparent; + background-color: transparent; +} + +.messenger .m-form .mf-search .btn { + position: absolute; + top: 0; + right: 0; + background-color: transparent; + color: #999; + border: none; + box-shadow: none; +} + +.messenger .m-form .mf-compose { + position: relative; + padding-right: 78px; +} + +.messenger .m-form .mf-compose .form-control { + border-radius: 25rem 0 0 25rem; +} + +.messenger .m-form .mf-compose .btn { + position: absolute; + top: 0; + right: 0; + width: 80px; + border-radius: 0 25rem 25rem 0; + box-shadow: none; +} + +.messenger .m-header .mh-links { + padding-top: 5px; + width: 100px; + text-align: right; +} + +.messenger .m-header .mh-links a { + font-size: 1.25em; + margin-left: 1rem; +} + +.messenger .m-contacts, +.messenger .m-chat { + position: relative; + height: 630px; +} + +.messenger .m-contacts { + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.messenger .m-contacts .mc-item { + padding: 1rem 1.25rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.messenger .m-contacts .mc-item.active { + background-color: #e5eff2; +} + +.messenger .m-contacts .mc-item:last-child { + border-bottom: none; +} + +.messenger .m-contacts .mc-item .media, +.messenger .m-contacts .mc-item .media-body { + overflow: visible; +} + +.messenger .m-contacts .mc-item .tag { + margin-left: 0.5rem; + border-radius: 1rem; +} + +.messenger .m-chat .mc-item { + padding: 1.25rem; +} + +.messenger .m-chat .mc-item.left .avatar { + float: left; + margin-right: 1rem; +} + +.messenger .m-chat .mc-item.right .avatar { + float: right; + margin-left: 1rem; +} + +.messenger .m-chat .mc-item .mc-content { + background-color: #f5f5f5; + padding: 1.25rem; + max-width: 50%; + border: 1px solid rgba(0, 0, 0, 0.05); +} + +.messenger .m-chat .mc-item.left .mc-content { + float: left; +} + +.messenger .m-chat .mc-item.right .mc-content { + float: right; + background-color: #e5eff2; +} + +/* Notifications */ +.notifications { + position: relative; +} + +.notifications:after { + content: ''; + position: absolute; + z-index: 9; + left: 24px; + top: 0; + bottom: 0; + width: 1px; + background: #ddd; +} + +.notifications .n-item { + position: relative; + z-index: 10; + margin-bottom: 1.5rem; +} + +.notifications .n-item:last-child { + margin-bottom: 0; +} + +.notifications .n-item .media, +.notifications .n-item.media-body { + overflow: visible; +} + +.notifications .n-item .avatar img { + -webkit-box-shadow: 0 0 0 5px #fff; + box-shadow: 0 0 0 5px #fff; +} + +.notifications .n-item .n-icon { + position: absolute; + top: -5px; + left: -5px; + width: 20px; + height: 20px; + line-height: 20px; + font-size: 10px; + color: #fff; + text-align: center; + border-radius: 50%; + -webkit-box-shadow: 0 0 0 3px #fff; + box-shadow: 0 0 0 3px #fff; +} + +.notifications .n-item .n-text a { + font-weight: bold; +} + +.notifications .n-item .n-comment { + background-color: #f5f5f5; + padding: 1rem 1.25rem; + border: 1px solid rgba(0, 0, 0, 0.05); +} + +/* Posiitons */ +.positions td, +.positions th { + vertical-align: middle; +} + +.positions tr:last-child td { + border-bottom: 1px solid #eceeef; +} + +.positions .p-img img { + width: 48px; +} + +.positions .p-quantity .btn { + border-radius: 50%; +} + +.positions .p-quantity span { + margin: 0 5px; +} + +/* Post */ +.post .tag { + padding: 0.4em 0.8em; + text-transform: uppercase; +} + +.post .p-content { + padding: 1.25rem; +} + +.post-1 .p-img { + position: relative; + height: 200px; +} + +.post-1 .p-img .p-info { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0.75rem 1.25rem; + background-color: rgba(0, 0, 0, 0.5); + color: #fff; +} + +.post-1 .tag { + position: absolute; + top: 1.25rem; + right: 1.25rem; +} + +.post-1 .p-info i { + margin-right: 0.5rem; + color: rgba(255, 255, 255, 0.7); +} + +.post-2 { + height: 150px; + padding-left: 150px; + padding-right: 75px; +} + +.post-2 .p-img { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 150px; +} + +.post-2 .p-content .p-text { + overflow: hidden; + max-height: 65px; +} + +.post-2 .p-content .p-info { + position: absolute; + top: 0; + bottom: 0; + right: 0; + border-left: 1px solid rgba(0, 0, 0, 0.125); +} + +.post-2 .p-content .p-info a { + display: block; + padding-top: 20px; + width: 74px; + height: 74px; + color: #333; + text-align: center; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.post-2 .p-content .p-info a:first-child { + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.post-2 .p-content .p-info a:focus, +.post-2 .p-content .p-info a:hover { + background-color: #f5f5f5; +} + +.post-3 .p-img { + position: relative; + height: 200px; +} + +.post-3 .p-author { + position: relative; + padding: 6px 0 0 95px; +} + +.post-3 .p-author .avatar { + position: absolute; + top: -32px; + left: 1.25rem; +} + +.post-3 .p-info { + background-color: #f5f5f5; + padding: 0.75rem 1.25rem; + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.post-3 .p-info i { + margin-right: 0.5rem; +} + +.post-4 { + padding-left: 200px; + min-height: 200px; +} + +.post-4 .p-img { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 200px; +} + +.post-4 .avatar { + display: inline-block; +} + +.post-4 .p-info { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.post-4 .p-info i { + margin-right: 0.5rem; +} + +.post-5 { + color: #fff; +} + +.post-5:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +.post-5 .p-content { + position: relative; + z-index: 10; + padding-top: 200px; +} + +.post-5 .p-content .small { + color: rgba(255, 255, 255, 0.9); +} + +.post-5 .tag { + position: absolute; + top: 1.25rem; + right: 1.25rem; +} + +.post-5 .p-info { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.3); +} + +.post-5 .p-info i { + margin-right: 0.5rem; +} + +/* Posts list */ +.posts-list .pl-item { + padding: 1.25rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.posts-list .pl-item .pli-img { + position: relative; + width: 150px; +} + +.posts-list .pl-item a .pli-img { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.posts-list .pl-item a:hover .pli-img { + opacity: 0.8; +} + +.posts-list .pl-item .tag { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0.4em 0.8em; + text-transform: uppercase; +} + +.posts-list .pl-item i { + margin-right: 0.5rem; +} + +/* Products */ +.product .p-img { + display: block; + position: relative; +} + +.product .p-content { + padding: 1.25rem; +} + +.product .p-content .p-info { + margin-bottom: 0.5rem; + color: #999; +} + +.product-1 .p-img { + overflow: hidden; + height: 200px; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-1 .p-img:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.product-1 .p-img:hover:before { + opacity: 1; +} + +.product-1 .p-status { + position: absolute; + top: 1.25rem; + right: 0; + padding: 0.5rem 1rem; + line-height: 1; + font-size: 90%; + text-transform: uppercase; + border-radius: 0.125rem 0 0 0.125rem; +} + +.product-1 .p-img .p-links { + position: absolute; + bottom: -80px; + left: 0; + right: 0; + text-align: center; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.product-1 .p-img:hover .p-links { + bottom: 80px; +} + +.product-1 .p-img .p-links a { + display: inline-block; + margin: 0 0.5rem; + width: 40px; + height: 40px; + line-height: 38px; + color: #fff; + border-radius: 50%; + border: 2px solid #fff; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.product-1 .p-img .p-links a:focus, +.product-1 .p-img .p-links a:hover { + background-color: #fff; + color: #333; + text-decoration: none; +} + +.product-1 .p-content h5 { + margin-bottom: 0.25rem; +} + +.product-1 .p-content .p-info { + font-size: 90%; +} + +.product-1 .p-price { + margin-bottom: 0.75rem; + font-size: 1.25rem; + font-weight: bold; +} + +.product-2 { + text-align: center; +} + +.product-2 .p-img { + height: 200px; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-2 .p-img:after { + content: ''; + position: absolute; + bottom: -1px; + left: 50%; + margin-left: -5px; + border-right: 9px solid transparent; + border-bottom: 9px solid #fff; + border-left: 9px solid transparent; +} + +.product-2 .p-status { + position: absolute; + top: 1.25rem; + right: 1.25rem; + width: 40px; + height: 40px; + line-height: 42px; + font-size: 90%; + text-transform: uppercase; + border-radius: 50%; +} + +.product-2 .p-content h5 { + margin-bottom: 0.25rem; +} + +.product-2 .p-content .p-info { + font-size: 90%; +} + +.product-2 .p-price { + margin-bottom: 0.75rem; + font-size: 1.25rem; + font-weight: bold; +} + +.product-2 .p-price span { + margin: 0 0.5rem; +} + +.product-2 .p-price span.old { + font-size: 1rem; + font-weight: normal; + text-decoration: line-through; +} + +.product-3 .p-img { + overflow: hidden; + padding: 0 1.25rem; + height: 200px; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-3 .p-img:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.3); + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.product-3 .p-img:hover:before { + opacity: 1; +} + +.product-3 .p-img .btn { + position: relative; + z-index: 10; + margin-top: -100px; +} + +.product-3 .p-img:hover .btn { + margin-top: 84px; +} + +.product-3 .p-content h5 { + margin-bottom: 0; +} + +.product-3 .p-content .p-info { + font-size: 90%; +} + +.product-3 .p-info { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-4 .p-img { + height: 200px; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-4 .p-price span.old { + margin-right: 0.5rem; + font-weight: normal; + color: #999; + text-decoration: line-through; +} + +.product-4 .p-links { + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-4 .p-links .pl-item { + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-4 .p-links .pl-item:last-child { + border-right: none; +} + +.product-4 .p-links .pl-item a { + display: block; + width: 100%; + height: 100%; + padding: 0.75rem 0 0.5rem; + color: #999; + text-align: center; +} + +.product-4 .p-links .pl-item a:focus, +.product-4 .p-links .pl-item a:hover { + color: #333; + background-color: #f5f5f5; + text-decoration: none; +} + +.product-4 .p-links .pl-item a i { + font-size: 1.25rem; +} + +.product-5 { + overflow: hidden; + padding-left: 200px; +} + +.product-5 .p-img { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 200px; +} + +.product-5 .p-status { + padding: 0.5rem 1rem; + line-height: 1; + font-size: 80%; + text-transform: uppercase; + border-radius: 0.125rem; +} + +.product-5 .p-timer { + padding-top: 2px; + color: #999; +} + +.product-5 .p-timer i { + margin-right: 0.25rem; + position: relative; + top: 1px; +} + +.product-5 h5 { + margin-top: 3rem; +} + +.product-5 .p-content .p-info { + margin-bottom: 0.75rem; +} + +.product-5 .p-category { + margin-top: 3rem; + font-size: 90%; +} + +/* Product view */ +.product-view .pv-images a { + display: block; +} + +.product-view .pv-images img { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.product-view .pv-images a:hover img { + opacity: 0.7; +} + +.product-view .pv-content { + margin-bottom: 1.5rem; +} + +.product-view .pv-content .pv-title { + position: relative; + padding-right: 50px; + margin-bottom: 1rem; + font-size: 2rem; + font-weight: normal; + text-transform: uppercase; +} + +.product-view .pv-content .pv-title a { + display: block; + position: absolute; + top: 2px; + right: 0; + font-size: 1.5rem; +} + +.product-view .pv-content .fa-ul i { + position: relative; + top: -1px; + margin-right: 0.5rem; + font-size: 70%; + color: #999; +} + +.product-view .pv-form { + margin-bottom: 1.25rem; + padding: 1.5rem; + background-color: #f5f5f5; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.product-view .pv-form .pv-price { + margin-bottom: 1rem; + font-size: 1.25rem; + font-weight: bold; +} + +.product-view .pv-form .pv-price span.old { + margin-right: 1rem; + font-weight: normal; + color: #999; + text-decoration: line-through; +} + +/* Share */ +.share { + overflow: hidden; + background-color: #fff; + border-radius: 0.25rem; +} + +.share .s-item a { + display: block; + padding: 1rem 0 0.75rem; + text-align: center; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.share .s-item a:hover { + opacity: 0.8; +} + +.share .s-item i { + font-size: 1.25rem; +} + +.share .s-item span { + display: block; +} + +.share-1 .s-item i { + color: #fff; +} + +.share-1 .s-item span { + color: rgba(255, 255, 255, 0.7); +} + +.share-2 .s-item { + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.share-2 .s-item:last-child { + border-right: none; +} + +/* Social */ +.social { + color: #fff; +} + +.social .s-title { + font-weight: bold; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); +} + +.social .s-title i { + position: relative; + top: 2px; + margin-right: 0.5rem; + font-size: 1.25rem; +} + +.social .s-time { + color: rgba(255, 255, 255, 0.8); +} + +/* Steps */ +.steps .s-numbers { + position: relative; + margin-bottom: 2rem; +} + +.steps .s-numbers:before { + content: ''; + position: absolute; + z-index: 9; + top: 20px; + left: 0; + right: 0; + height: 1px; + background-color: #ddd; +} + +.steps .s-number { + position: relative; + z-index: 10; +} + +.steps .s-number span { + display: inline-block; +} + +.steps .s-number .sn-icon { + width: 40px; + height: 40px; + line-height: 40px; + background-color: #ccc; + color: #fff; + text-align: center; + border-radius: 50%; + -webkit-box-shadow: 0 0 0 10px #fff; + box-shadow: 0 0 0 10px #fff; +} + +.steps .s-number.complete .sn-icon { + background-color: #43b968; +} + +.steps .s-number.active .sn-icon { + background-color: #3e70c9; +} + +.steps .s-number .sn-text { + margin-top: 5px; + text-transform: uppercase; + color: #999; +} + +.steps .s-number.complete .sn-text { + color: #43b968; +} + +.steps .s-number.active .sn-text { + color: #3e70c9; +} + +.steps .c-select { + width: 100%; +} + +/* Tiles */ +.tile { + position: relative; + overflow: hidden; +} + +.tile .t-content { + position: relative; + z-index: 10; +} + +.tile h1 { + font-family: 'Roboto', sans-serif; + font-weight: normal; +} + +.tile h6 { + font-weight: normal; + color: #999; +} + +.tile-1 .t-icon { + position: absolute; + top: 0; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; +} + +.tile-1 .t-icon span { + position: absolute; + z-index: 8; + top: -60px; + width: 120px; + height: 120px; + line-height: 120px; + border-radius: 50%; +} + +.tile-1 .t-icon i { + position: relative; + z-index: 9; + font-size: 1.75rem; + color: #fff; +} + +.tile-1 .t-icon.left { + left: 0; +} + +.tile-1 .t-icon.left span { + left: -60px; +} + +.tile-1 .t-icon.left i { + padding-right: 15px; +} + +.tile-1 .t-icon.right { + right: 0; +} + +.tile-1 .t-icon.right span { + right: -60px; +} + +.tile-1 .t-icon.right i { + padding-left: 15px; + color: rgba(255, 255, 255, 0.9); +} + +.tile-2 { + border: none !important; +} + +.tile-2 h6 { + color: rgba(255, 255, 255, 0.7); +} + +.tile-2 .t-icon i { + position: absolute; + z-index: 9; + bottom: -15px; + right: 10px; + font-size: 6rem; + color: rgba(0, 0, 0, 0.1); +} + +.tile-2 .t-icon.left i { + left: 10px; +} + +.tile-2 .t-icon.right i { + right: 10px; +} + +.tile-3 .t-icon i { + position: absolute; + z-index: 9; + top: 20px; + line-height: 1; + font-size: 4rem; + color: #ddd; +} + +.tile-3 .t-icon.left i { + left: 15px; +} + +.tile-3 .t-icon.right i { + right: 15px; +} + +.tile-4 .t-icon { + position: absolute; + z-index: 9; + top: 20px; + width: 60px; + height: 60px; + line-height: 65px; + background-color: #e8ebf0; + font-size: 2rem; + color: #818a91; + text-align: center; + border-radius: 50%; +} + +.tile-4 .t-icon.left { + left: 15px; +} + +.tile-4 .t-icon.right { + right: 15px; +} + +/* User cards */ +.user-1 { + text-align: center; +} + +.user-1 .u-img { + margin-bottom: -32px; + height: 170px; +} + +.user-1 .avatar { + margin: 0 auto 1rem auto; +} + +.user-1 .u-content { + padding: 0 1.25rem 1.25rem; +} + +.user-1 .u-counters { + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.user-1 .u-counters .uc-item { + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.user-1 .u-counters .uc-item:last-child { + border-right: none; +} + +.user-1 .u-counters .uc-item a { + display: block; + padding: 1rem 0 0.75rem; + width: 100%; + height: 100%; +} + +.user-1 .u-counters .uc-item a:focus, +.user-1 .u-counters .uc-item a:hover { + background-color: #f5f5f5; +} + +.user-1 .u-counters .uc-item strong { + display: block; + line-height: 1; + font-size: 1.25rem; +} + +.user-1 .u-counters .uc-item span { + font-size: 0.75rem; + color: #999; + text-transform: uppercase; +} + +.user-2 .u-img { + position: relative; + height: 210px; +} + +.user-2 .u-content { + padding: 1.25rem; +} + +.user-2 .u-content .media-body { + padding-top: 3px; +} + +.user-2 .u-categories { + position: absolute; + top: 1.25rem; + right: 1.25rem; +} + +.user-2 .u-categories .tag { + display: inline-block; + margin-right: 0.5rem; + padding: 0.4em 0.8em; + text-transform: uppercase; +} + +.user-2 .u-counters { + position: absolute; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.5); + text-align: center; +} + +.user-2 .u-counters .uc-item { + border-right: 1px solid rgba(255, 255, 255, 0.2); +} + +.user-2 .u-counters .uc-item:last-child { + border-right: none; +} + +.user-2 .u-counters .uc-item a { + display: block; + padding: 0.5rem 0; + width: 100%; + height: 100%; +} + +.user-2 .u-counters .uc-item i { + margin-right: 0.5rem; + color: rgba(255, 255, 255, 0.9); +} + +.user-3 { + padding-top: 174px; + background-color: #eee; + -webkit-background-size: cover; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + color: #fff; + text-align: center; +} + +.user-3:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +.user-3 .u-content { + position: relative; + z-index: 10; + padding: 1.25rem 1.25rem 3rem; +} + +.user-3 .u-counters { + position: relative; + z-index: 10; + border-top: 1px solid rgba(255, 255, 255, 0.4); +} + +.user-3 .u-counters .uc-item a { + display: block; + padding: 1rem 0 0.75rem; + width: 100%; + height: 100%; +} + +.user-3 .u-counters .uc-item strong { + display: block; + line-height: 1; + font-size: 1.25rem; +} + +.user-3 .u-counters .uc-item span { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.9); + text-transform: uppercase; +} + +.user-4 { + padding: 3rem 1.25rem; + background-color: #eee; + -webkit-background-size: cover; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + color: #fff; + text-align: center; +} + +.user-4:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +.user-4 .u-content { + position: relative; + z-index: 10; +} + +.user-4 .avatar { + display: inline-block; +} + +.user-5 { + padding: 3rem 1.25rem; + text-align: center; +} + +.user-5 .avatar { + display: inline-block; +} + +/* Write something */ +.write-something textarea { + padding: 1rem 1.25rem; + width: 100%; + background: transparent; + border: none; + resize: none; +} + +.write-something a { + display: inline-block; + margin-right: 1.5rem; + padding: 8px 0 4px; +} + +.write-something a i { + font-size: 1.25em; +} + +/* ================================================================= + Pages +================================================================= */ + +/* Auth */ +.auth-bg { + background-color: #212330; +} + +.auth { + color: #fff; +} + +.auth .auth-header { + margin-bottom: 6rem; + padding-top: 6rem; + padding-bottom: 6rem; + background-color: rgba(255, 255, 255, 0.05); + text-align: center; +} + +.auth .auth-header h6 { + font-weight: normal; + color: rgba(255, 255, 255, 0.7); +} + +.auth .form-control { + background-color: rgba(255, 255, 255, 0.8); + border-color: rgba(255, 255, 255, 0.8); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.auth .form-control:focus { + background-color: rgba(255, 255, 255, 0.9); +} + +.auth .input-group-addon { + padding: 0 0.75rem; + font-size: 1.25rem; + background-color: rgba(255, 255, 255, 0.8); + border: none; +} + +/* Error */ +.error-message { + padding-top: 6rem; + padding-bottom: 6rem; +} + +.error-message h1 { + position: relative; + font-size: 90px; + height: 300px; + line-height: 300px; +} + +.error-message h1 span { + display: block; + position: absolute; + top: 0; + left: 50%; + margin-left: -150px; + width: 300px; + height: 300px; + line-height: 300px; + font-size: 300px; + color: rgba(255, 255, 255, 0.1); +} + +.error-message .error-message-text { + color: rgba(255, 255, 255, 0.7); +} + +/* Profile */ +.profile-header .profile-header-cover { + height: 250px; + background-color: #f3f7fc; +} + +.profile-header-counters { + background: #fff; + border-top: 1px solid rgba(0, 0, 0, 0.125); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.profile-header-counters a { + display: block; + padding: 0.75rem 1.25rem; + text-align: center; + border-left: 1px solid rgba(0, 0, 0, 0.125); +} + +.profile-card { + margin-top: -150px; +} + +.profile-card .profile-avatar { + padding: 0.5rem 0.5rem 0; +} + +.profile-card .profile-avatar img { + width: 100%; +} + +.profile-card h4 { + font-weight: bold; +} + +.profile-card .list-group { + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.profile-card .list-group-item { + border: none; +} + +.profile-tabs .nav-link { + padding: 1rem 1.5rem; +} + +.stream-item { + padding: 1.25rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.stream-item:last-child { + border-bottom: none; +} + +.stream-item.media { + margin-top: 0; +} + +.stream-item .media-heading { + margin-top: 0.5rem; +} + +.stream-item .media-heading span { + font-weight: normal; +} + +.stream-item .stream-img { + display: inline-block; + float: left; + margin-right: 1rem; + max-width: 200px; + height: auto; +} + +.stream-item .stream-meta { + color: #777; +} + +.stream-item .stream-body { + margin-top: 1rem; +} + +.stream-item .stream-body p { + margin-bottom: 0; +} + +/* Sign form */ +.sign-form { + padding-top: 100px; +} + +.sign-form .box { + background-color: rgba(255, 255, 255, 0.9); +} + +.sign-form .form-material .form-control { + padding: 0.75rem 1.5rem; +} + +/* ================================================================= + Apps +================================================================= */ + +/* Mail */ +.mail-items td { + position: relative; + vertical-align: middle; +} + +.mail-items .mail-item-sender { + padding-left: 25px; +} + +.mail-items .mail-item-sender .avatar { + display: inline-block; +} + +.mail-items .mail-item-important { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 20px; + line-height: 55px; + color: #aaa; + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.mail-items .mail-item-important:hover { + color: #777; +} + +.mail-items tr:hover .mail-item-important, +.mail-items tr.important .mail-item-important { + opacity: 1; +} + +.mail-items tr.important { + background-color: #f9e0df; +} + +.mail-items tr.important:hover { + background-color: #fdd9d7; +} + +.mail-items tr.important .mail-item-important { + color: #f44236; +} + +.mail-items tr.unread { + font-weight: bold; +} + +.mail-items .mail-item-attachment { + width: 20px; +} + +.mail-items .mail-item-time { + width: 100px; + text-align: right; +} + +.mail-items .mail-item-checkbox { + width: 50px; + text-align: center; +} + +.mail-items a { + color: #333; +} + +/* ================================================================= + Forms +================================================================= */ + +/* Material*/ +.form-material .form-control { + padding: 0.75rem 0; + background-color: rgba(0, 0, 0, 0); + background-position: center bottom, center calc(99%); + background-repeat: no-repeat; + background-size: 0 2px, 100% 1px; + transition: background 0s ease-out 0s; +} + +.form-material .form-control, +.form-material .form-control.focus, +.form-material .form-control:focus { + background-image: linear-gradient(#a567e2, #a567e2), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); + border: 0 none; + border-radius: 0; + box-shadow: none; + float: none; +} + +.form-material.material-primary .form-control, +.form-material.material-primary .form-control.focus, +.form-material.material-primary .form-control:focus { + background-image: linear-gradient(#3e70c9, #3e70c9), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); +} + +.form-material.material-info .form-control, +.form-material.material-info .form-control.focus, +.form-material.material-info .form-control:focus { + background-image: linear-gradient(#20b9ae, #20b9ae), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); +} + +.form-material.material-success .form-control, +.form-material.material-success .form-control.focus, +.form-material.material-success .form-control:focus { + background-image: linear-gradient(#43b968, #43b968), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); +} + +.form-material.material-warning .form-control, +.form-material.material-warning .form-control.focus, +.form-material.material-warning .form-control:focus { + background-image: linear-gradient(#f59345, #f59345), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); +} + +.form-material.material-danger .form-control, +.form-material.material-danger .form-control.focus, +.form-material.material-danger .form-control:focus { + background-image: linear-gradient(#f44236, #f44236), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); +} + +.form-material .form-control.focus, +.form-material .form-control:focus { + background-size: 100% 2px, 100% 1px; + outline: 0 none; + transition-duration: 0.3s; +} + +/* Select2 */ +.select2-container--default .select2-selection--single { + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0; +} + +.select2-container--default .select2-selection--multiple { + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0; +} + +.select2-container--default.select2-container--focus .select2-selection--multiple { + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: #eee; + border: 1px solid #ddd; + border-radius: 0; +} + +/* Tags Input */ +.bootstrap-tagsinput { + width: 100%; + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0; +} + +.bootstrap-tagsinput .label-info { + background-color: #20b9ae; + display: inline-block; + padding: 4px 7px 5px; +} + +/* Multi Select */ +.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 100%; +} + +.ms-container .ms-list { + border-radius: 0; + box-shadow: none; +} + +.ms-container .ms-selectable li.ms-elem-selectable, +.ms-container .ms-selection li.ms-elem-selection { + padding: 6px 10px; +} + +.ms-container .ms-selectable li.ms-hover, +.ms-container .ms-selection li.ms-hover { + background: #20b9ae; +} + +/* TouchSpin */ +.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { + border-top-right-radius: 0; +} +.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { + margin-top: -3px; + border-bottom-right-radius: 0; +} + +/* Datepicker */ +.datepicker td, .datepicker th { + text-align: center; + width: 30px; + height: 30px; + border-radius: 0; +} + +.datepicker table tr td.today, +.datepicker table tr td.today:hover, +.datepicker table tr td.today.disabled, +.datepicker table tr td.today.disabled:hover { + background-image: none; + background: #43b968; + color: #ffffff; +} + +.datepicker table tr td.active, +.datepicker table tr td.active:hover, +.datepicker table tr td.active.disabled, +.datepicker table tr td.active.disabled:hover { + background-image: none; + background: #3e70c9; + color: #ffffff; +} + +/* Date Range Picker */ +.daterangepicker .input-mini { + border-radius: 0 !important; +} + +.daterangepicker td, .daterangepicker th { + text-align: center; + width: 30px; + height: 30px; + border-radius: 0 !important; +} + +.daterangepicker td.active, .daterangepicker td.active:hover { + background-color: #3e70c9; +} + +.ranges li { + background: #f5f5f5; + border-radius: 0 !important; + color: #333; +} + +.ranges li:hover { + background: #eee; + border: 1px solid #eee; + color: #333; +} + +.ranges li.active { + background: #3e70c9; + border: 1px solid #3e70c9; +} + +/* Jquery Steps */ +.wizard-steps { + display: table; + width: 100%; +} + +.wizard-steps > li { + display: table-cell; + padding: 20px 20px; + background: #f5f5f5; + font-weight: bold; + text-transform: uppercase; + border: 1px solid rgba(0, 0, 0, 0.125); + border-right: none; +} + +.wizard-steps > li > i { + float: right; + font-size: 1.25rem; +} + +.wizard-steps > li:last-child { + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.wizard-steps > li.current, +.wizard-steps > li.done { + background: #3e70c9; + color: #fff !important; +} + +.wizard-steps > li.done { + background: #43b968; +} + +.wizard-steps > li.error { + background: #f44236; +} + +.wizard-content { + padding: 2rem; + border-color: rgba(0, 0, 0, 0.125); + border-top: none; + margin-bottom: 1rem; +} + +/* ================================================================= + Tables +================================================================= */ + +/* Data Tables */ +table.dataTable { + border-spacing: 0; +} + +table.dataTable thead th, table.dataTable thead td { + border-bottom: 1px solid #ddd; +} + +table.dataTable tfoot th, table.dataTable tfoot td { + border-top: 1px solid #ddd; +} + +table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, +table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, +table.dataTable thead .sorting_desc_disabled:before { + display: none; +} + +table.dataTable thead th { + position: relative; + background-image: none !important; +} + +table.dataTable thead th.sorting:after, +table.dataTable thead th.sorting_asc:after, +table.dataTable thead th.sorting_desc:after { + position: absolute; + top: 12px; + right: 8px; + display: block; + font-family: 'FontAwesome'; +} + +table.dataTable thead th.sorting:after { + content: '\f0dc'; + color: #333; + font-size: 1em; + padding-top: 0.12em; +} + +table.dataTable thead th.sorting_asc:after { + content: '\f0de'; +} + +table.dataTable thead th.sorting_desc:after { + content: '\f0dd'; +} + +/* Editable Tables */ +.editable-table + input.error { + border: 1px solid #f44236; + outline: 0; + outline-offset: 0; +} + +.editable-table + input, +.editable-table + input:focus, +#editable-datatable_wrapper + input:focus { + border: 1px solid #20b9ae !important; + outline: 0!important; + outline-offset: 0 !important; +} + +.editable-table td:focus { + outline: 0; +} + +/* Responsive Tables */ +table.focus-on tbody tr.focused th, table.focus-on tbody tr.focused td { + background-color: #3e70c9; + color: #fff; +} + +/* jsGrid Tables */ +.jsgrid .table { + margin-bottom: 0; +} + +.jsgrid-header-row .jsgrid-header-sort { + background-color: #3e70c9; + color: #fff; +} + +.jsgrid-header-sort-asc:before { + margin-right: 10px; + padding-top: 8px; + border-color: transparent transparent #fff; +} + +/* ================================================================= + Extra +================================================================= */ + +/* Loading progress */ +#nprogress .spinner { + width: 140px; + right: auto; + left: 50%; + top: 20px; + margin-left: -73px; + padding: 8px 15px; + background: #fff; + color: #333; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +#nprogress .spinner:after { + content: "Loading..."; + display: inline-block; + position: absolute; + top: 7px; + left: 48px; +} + +/* Comments */ +.management { + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.management .m-item { + position: relative; + padding: 1.5rem 1.5rem 1.5rem 3.5rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.management .m-item:active, +.management .m-item:hover { + background-color: #f5f5f5; +} + +.management .m-item:last-child { + border-bottom: none; +} + +.management .m-item .mi-checkbox { + position: absolute; + top: 1.5rem; + left: 1.5rem; +} + +.management .m-item .mi-title { + margin-bottom: 0.5rem; + color: #999; +} + +.management .m-item .mi-title a { + font-weight: bold; +} + +.management .m-item .mi-text { + margin-bottom: 1rem; + color: #999; + text-align: justify; +} + +.management .m-item .btn { + margin-right: 0.5rem; +} + +/* Image Crop */ +.jcrop-holder #preview-pane { + display: block; + position: absolute; + z-index: 10; + top: 0; + right: -280px; +} + +#preview-pane .preview-container { + width: 250px; + height: 170px; + overflow: hidden; +} + +/* Price card */ +.price-card { + margin-bottom: 0; +} + +.price-card .price-card-header sup { + position: relative; + top: -1em; + font-size: 75%; +} + +.price-card .price-card-header .text-big { + font-size: 2em; + font-weight: bold; +} + +.price-card .price-card-header .text-small { + font-size: 0.75rem; +} + +.price-card .price-card-list li { + display: block; + position: relative; + padding: 0.75rem 1.25rem; +} + +.price-card .price-card-list li:after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.price-card .price-card-list li:last-child:after { + border: none; +} + +/* Search */ +.search-header { + background: #fff; + padding: 2rem 0; +} + +.search-header .sh-search-field, +.search-header .sh-search-submit { + height: 54px; +} + +.search-header .sh-search-submit { + font-size: 18px; + font-weight: bold; +} + +.search-tabs{ + border-top: 1px solid #ddd; + background: #f5f5f5; +} + +.search-tabs .st-item a { + display: block; + padding: 1rem 0; + width: 100%; + height: 100%; + text-align: center; + border-right: 1px solid #ddd; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.search-tabs .st-item:last-child a { + border-right: none; +} + +.search-tabs .st-item a:focus, +.search-tabs .st-item a:hover, +.search-tabs .st-item a:active { + background-color: #eee; + color: #333; +} + +.search-results h6 { + margin-bottom: 0.25rem; +} + +.search-results p { + margin-bottom: 0.25rem; +} + +.search-results .sr-item { + margin-bottom: 1.5rem; +} + +.search-results .sr-item:last-child { + margin-bottom: 0; +} + +/* Timeline */ +.timeline .tl-item { + display: block; +} + +.timeline .tl-item:after { + content: ''; + display: table; + clear: both; +} + +.timeline.timeline-center .tl-item { + margin-left: 50%; +} + +.timeline.timeline-center .tl-left { + margin-left: 0; + margin-right: 50%; +} + +.timeline .tl-wrap { + position: relative; + padding: 1.25rem; + border-style: solid; + border-color: rgba(0, 0, 0, 0.125); + border-width: 0 0 0 2px; +} + +.timeline.timeline-center .tl-left .tl-wrap { + float: right; + margin-right: -2px; + border-left-width: 0; + border-right-width: 2px; +} + +.timeline .tl-wrap:before { + content: ''; + position: absolute; + top: 1.25rem; + left: -8px; + margin-top: 18px; + width: 14px; + height: 14px; + background: #fff; + border-width: 2px; + border-style: solid; + border-color: inherit; + border-radius: 50%; +} + +.timeline.timeline-center .tl-left .tl-wrap:before { + left: auto; + right: -8px; +} + +.timeline.timeline-center .tl-date { + font-size: 90%; +} + +.timeline.timeline-center .tl-left .tl-date { + text-align: right; +} + +.timeline .tl-content { + display: inline-block; + position: relative; + margin-bottom: 0.5rem; +} + +.timeline .tl-left .arrow.right { + display: none; +} + +.timeline.timeline-center .tl-left .arrow.right { + display: block; +} + +.timeline.timeline-center .tl-left .arrow.left { + display: none; +} + +.timeline .arrow { + position: absolute; + z-index: 10; + top: 15px; +} + +.timeline .arrow:after, +.timeline .arrow:before { + content: ''; + display: block; + position: absolute; + left: 0; + width: 0; + height: 0; + border-width: 9px; + border-color: transparent; + border-style: solid; +} + +.timeline .arrow:after { + border-width: 8px +} + +.timeline .arrow.right { + right: 0; +} + +.timeline .arrow.right:before { + border-left-color: rgba(0, 0, 0, 0.125); + border-right-color: transparent; + border-right-width: 0; +} + +.timeline .arrow.right:after { + top: 1px; + left: 0; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: inherit; + border-right-width: 0 +} + +.timeline .arrow.left { + left: -9px; +} + +.timeline .arrow.left:before { + border-right-color: rgba(0, 0, 0, 0.125); + border-left-color: transparent; + border-left-width: 0; +} + +.timeline .arrow.left:after { + top: 1px; + left: 1px; + border-top-color: transparent; + border-bottom-color: transparent; + border-right-color: inherit; + border-left-width: 0; +} + +/* ================================================================= + Frontend +================================================================= */ + +.frontend-wrapper { + max-width: 1370px; + margin: 0 auto; +} + +.frontend-max-width .container-fluid { + max-width: 1170px; +} + +/* Block 1 */ +.block-1 { + padding: 70px 0 50px; +} + +.block-1 .b-item { + margin-bottom: 2rem; + overflow: hidden; + text-align: center; +} + +.block-1 .b-item .bi-image { + position: relative; + margin-bottom: 20px; + height: 200px; +} + +.block-1 .b-item .bi-image:before { + content: ''; + position: absolute; + z-index: 9; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.4); + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-1 .b-item:hover .bi-image:before { + opacity: 1; +} + +.block-1 .b-item .bi-image:after { + content: ''; + position: absolute; + z-index: 10; + bottom: 0; + right: 0; + border-width: 30px 30px 0 0; + border-style: solid; + border-color: #f44236 #fff; +} + +.block-1 .b-item .btn { + position: relative; + z-index: 10; + margin-top: -100px; +} + +.block-1 .b-item:hover .btn { + margin-top: 84px; +} + +.block-1 .b-item .bi-title { + font-size: 1.125rem; + text-align: center; +} + +/* Block 2 */ +.block-2 { + padding: 25px 0; + background-color: #f5f5f5; + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.block-2 .b-item { + position: relative; + margin: 35px 0; + padding-left: 80px; +} + +.block-2 .b-item .bi-icon { + position: absolute; + top: -5px; + left: 0; + font-size: 4rem; + color: rgba(255, 255, 255, 0.4); +} + +.block-2 .b-item .bi-title { + margin-bottom: 0.5rem; + font-size: 1.125rem; + font-weight: bold; +} + +.block-2 .b-item .bi-text { + color: rgba(255, 255, 255, 0.8); +} + +/* Block 3 */ +.block-3 { + padding: 70px 0 100px; +} + +.block-3 .b-item { + position: relative; + padding: 90px 0 0 40px; +} + +.block-3 .b-item .bi-number { + position: absolute; + z-index: 9; + top: 0; + left: 0; + line-height: 1; + font-family: 'Exo 2', sans-serif; + font-weight: bold; + font-size: 119px; + color: #ddd; +} + +.block-3 .b-item .bi-title { + position: relative; + z-index: 10; + margin-bottom: 10px; + font-size: 1.125rem; +} + +.block-3 .b-item .bi-text { + color: #999; +} + +/* Block-4 */ +.block-4 { + padding: 40px 0; + text-align: center; +} + +.block-4 .b-to-top { + display: block; + margin: 0 auto; + width: 20px; + height: 20px; + font-size: 20px; + color: #999; + text-align: center; + cursor: pointer; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-4 .b-to-top:hover, +.block-4 .b-to-top:focus { + text-decoration: none; + color: #333; +} + +/* Block 5 */ +.block-5 { + position: relative; + padding: 30px 0; +} + +.block-5:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); +} + +.block-5 .b-content { + position: relative; + z-index: 10; + color: #fff; +} + +.block-5 .b-logo { + margin-bottom: 150px; + font-size: 1.5rem; + font-weight: bold; + text-transform: uppercase; +} + +.block-5 .b-title { + margin-bottom: 2rem; + font-size: 3rem; + font-weight: bold; + text-transform: uppercase; +} + +.block-5 .b-text { + margin-bottom: 150px; + font-size: 1.125rem; + color: rgba(255, 255, 255, 0.9); +} + +/* Block 6 */ +.block-6 { + padding: 100px 0 120px; +} + +.block-6 .b-item .bi-icon { + margin-bottom: 0.5rem; + font-size: 40px; + color: #bbb; +} + +.block-6 .b-item .bi-title { + font-size: 1.125rem; +} + +/* Block 7 */ +.block-7 .b-item { + position: relative; + overflow: hidden; +} + +.block-7 .b-item img { + position: relative; + z-index: 9; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-7 .b-item:hover img { + -webkit-transform: scale(1.05); + -moz-transform: scale(1.05); + -o-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-7 .b-item .bi-content { + position: absolute; + z-index: 10; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 0 100px; + background: rgba(0, 0, 0, 0.7); + color: #fff; + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-7 .b-item .bi-content:before { + content: ''; + display: inline-block; + height: 100%; + width: 1px; + vertical-align: middle; +} + +.block-7 .b-item .bi-content span { + display: inline-block; + position: relative; + z-index: 10; + max-width: 98%; + vertical-align: middle; +} + +.block-7 .b-item .bi-content h6 { + margin-bottom: 2rem; + text-transform: uppercase; +} + +.block-7 .b-item .bi-content h4 { + line-height: 30px; + font-weight: normal; + text-transform: uppercase; +} + +.block-7 .b-item .bi-content .separator { + width: 65px; + height: 1px; + background: #fff; + margin: 2rem 0; +} + +.block-7 .b-item .bi-content p { + margin-bottom: 2rem; + font-size: 1.125rem; +} + +.block-7 .b-item:hover .bi-content { + opacity: 1; +} + +/* Block 8 */ +.block-8 { + padding: 100px 0; +} + +.block-8 h4 { + line-height: 30px; + font-weight: normal; + text-transform: uppercase; +} + +.block-8 .separator { + width: 65px; + height: 1px; + background: #333; + margin: 2rem 0; +} + +.block-8 p { + font-size: 1.125rem; + color: #999; +} + +.block-8 .b-img { + position: relative; + overflow: hidden; + margin-bottom: 2rem; +} + +.block-8 .b-img .bi-title { + position: absolute; + bottom: -40px; + left: 0; + padding: 0.75rem 1.25rem; + width: 100%; + height: 40px; + color: #fff; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.block-8 .b-img:hover .bi-title { + bottom: 0; +} + +/* Block 9 */ +.block-9 { + position: relative; + padding: 120px 0; + color: #fff; +} + +.block-9:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); +} + +.block-9 .b-number { + font-size: 5rem; + margin-bottom: 1rem; +} + +.block-9 .b-title { + margin-bottom: 0.5rem; + font-size: 1.125rem; + text-transform: uppercase; +} + +.block-9 .b-text { + padding-right: 100px; + color: rgba(255, 255, 255, 0.8); +} + +/* Block 10 */ +.block-10 { + padding: 120px 0; + color: #fff; +} + +/* ================================================================= + Charts +================================================================= */ + +.chart-container { + width: 100%; + height: 350px; +} + +.chart-placeholder { + width: 100%; + height: 100%; +} + +.flotTip { + z-index: 100; + padding: 8px 12px; + background-color: #333; + font-size: 13px; + color: #fff; + opacity: 0.8; +} + +.jqstooltip { + background-color: #333 !important; + padding: 5px !important; + width: auto !important; + height: auto !important; + border: none !important; +} + +.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { + stroke: #43b968; +} + +.ct-series-a .ct-slice-pie, .ct-series-a .ct-area { + fill: #43b968; +} + +.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut { + stroke: #3e70c9; +} + +.ct-series-b .ct-slice-pie, .ct-series-b .ct-area { + fill: #3e70c9; +} + +.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut { + stroke: #f59345; +} + +.ct-series-c .ct-slice-pie, .ct-series-c .ct-area { + fill: #f59345; +} + +.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut { + stroke: #f44236; +} + +.ct-series-d .ct-slice-pie, .ct-series-d .ct-area { + fill: #f44236; +} + +.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut { + stroke: #a567e2; +} + +.ct-series-e .ct-slice-pie, .ct-series-e .ct-area { + fill: #a567e2; +} + +.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut { + stroke: #20b9ae; +} + +.ct-series-f .ct-slice-pie, .ct-series-f .ct-area { + fill: #20b9ae; +} + +.chartist-light .ct-grid { + stroke: rgba(255, 255, 255, 0.2); +} + +.chartist-light .ct-label { + fill: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.2); +} + +.chartist-animated .ct-series-a .ct-line { + fill: none; + stroke-width: 4px; + stroke-dasharray: 5px; + -webkit-animation: dashoffset 1s linear infinite; + -o-animation: dashoffset 1s linear infinite; + animation: dashoffset 1s linear infinite; +} + +.chartist-animated .ct-series-b .ct-point { + -webkit-animation: bouncing-stroke .5s ease infinite; + -o-animation: bouncing-stroke .5s ease infinite; + animation: bouncing-stroke .5s ease infinite; +} + +.chartist-animated .ct-series-c .ct-point { + -webkit-animation: exploding-stroke 1s ease-out infinite; + -o-animation: exploding-stroke 1s ease-out infinite; + animation: exploding-stroke 1s ease-out infinite; +} + +.chart-easy { + position: relative; + width: 100px; + height: 100px; + text-align: center; +} + +.chart-easy canvas { + position: absolute; + top: 0; + left: 0; +} + +.chart-easy span { + display: block; + line-height: 100px; + z-index: 2; + font-size: 18px; + color: #2b2b2b; +} + +/* ================================================================= + Calendar +================================================================= */ + +#external-events .fc-event { + margin-top: 1rem; +} + +#external-events .fc-event { + display: inline-block; + margin-right: 15px; +} + +.fc-toolbar { + margin-bottom: 0.5rem; + margin-top: 2rem; +} + +.fc-toolbar h2 { + font-size: 18px; + line-height: 30px; + text-transform: uppercase; +} + +.fc-view { + margin-top: 1rem; +} + +.fc-day { + background: #fff; +} + +.fc-toolbar .fc-state-active, +.fc-toolbar .ui-state-active, +.fc-toolbar button:focus, +.fc-toolbar button:hover, +.fc-toolbar .ui-state-hover { + z-index: 0; +} + +.fc th.fc-widget-header { + background: #eee; + color: #333; + font-size: 14px; + line-height: 20px; + padding: 7px 0px; + text-transform: uppercase; +} + +.fc-button { + background: #fff; + text-transform: capitalize; + text-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.fc-text-arrow { + font-family: inherit; + font-size: 16px; +} + +.fc-state-hover { + background: #f5f5f5; +} + +.fc-unthemed .fc-today { + background: #d9f1e1!important; +} + +.fc-state-highlight { + background: #f0f0f0; +} + +.fc-cell-overlay { + background: #f0f0f0; +} + +.fc-unthemed .fc-today { + background: #fff; +} + +.fc-event { + border-radius: 0px; + border: none; + cursor: move; + font-size: 13px; + margin: 1px -1px 0 -1px; + padding: 6px 10px; + text-align: center; + background: #3e70c9; + color: #fff !important; +} + +.calendar-event { + cursor: move; + margin: 10px 5px 0 0; + padding: 6px 10px; + display: inline-block; + color: #fff; + min-width: 140px; + text-align: center; + background: #03a9f3; +} + +.calendar-event a { + float: right; + opacity: 0.6; + font-size: 10px; + margin: 4px 0 0 10px; + color: #fff; +} + +.fc-basic-view td.fc-week-number span { + padding-right: 5px; +} + +.fc-basic-view td.fc-day-number { + padding-right: 5px; +} + +.fc-state-active, .fc-state-down { + background-color: #eee; + box-shadow: none; +} + +#calendar button { + border-radius: 0 !important; +} + +/* ================================================================= + Maps +================================================================= */ + +.box-arrow { + display: inline-block; + position: relative; + padding: 10px 20px; + font-size: 1rem; + color: #fff; + text-align: center; +} + +.box-arrow span { + position: absolute; + bottom: -9px; + left: 50%; + margin-left: -10px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top-width: 10px; + border-top-style: solid; + border-top-color: inherit; +} + +/* ================================================================= + Demo +================================================================= */ + +.demo-chart { + position: relative; + left: 0; + right: -10px; +} + +.demo-chart-2 { + height: 245px !important; +} + +.demo-progress { + padding-top: 70px; +} + +/* ================================================================= + Other +================================================================= */ + +/* Arrows */ +.arrow:before, +.arrow:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.arrow-top:before { + top: -9px; + left: 50%; + margin-left: -9px; + border-width: 0 9px 9px; + border-bottom-color: #ccc; +} + +.arrow-top:after { + top: -8px; + left: 50%; + margin-left: -8px; + border-width: 0 8px 8px; + border-bottom-color: #fff; +} + +.arrow-bottom:before { + bottom: -9px; + left: 50%; + margin-left: -9px; + border-width: 9px 9px 0; + border-top-color: #ccc; +} + +.arrow-bottom:after { + bottom: -8px; + left: 50%; + margin-left: -8px; + border-width: 8px 8px 0; + border-top-color: #fff; +} + +.arrow-left:before { + top: 50%; + left: -9px; + margin-top: -9px; + border-width: 9px 9px 9px 0; + border-right-color: #ccc; +} + +.arrow-left:after { + top: 50%; + left: -8px; + margin-top: -8px; + border-width: 8px 8px 8px 0; + border-right-color: #fff; +} + +.arrow-right:before { + top: 50%; + right: -9px; + margin-top: -9px; + border-width: 9px 0 9px 9px; + border-left-color: #ccc; +} + +.arrow-right:after { + top: 50%; + right: -8px; + margin-top: -8px; + border-width: 8px 0 8px 8px; + border-left-color: #fff; +} + +.arrow-top.left:before, +.arrow-bottom.left:before { + left: 10px; + margin-left: 0; +} + +.arrow-top.left:after, +.arrow-bottom.left:after { + left: 11px; + margin-left: 0; +} + +.arrow-top.right:before, +.arrow-bottom.right:before { + left: auto; + right: 10px; + margin-left: 0; +} + +.arrow-top.right:after, +.arrow-bottom.right:after { + left: auto; + right: 11px; + margin-left: 0; +} + +.arrow-left.top:before, +.arrow-right.top:before { + top: 10px; + margin-top: 0; +} + +.arrow-left.top:after, +.arrow-right.top:after { + top: 11px; + margin-top: 0; +} + +.arrow-left.bottom:before, +.arrow-right.bottom:before { + top: auto; + bottom: 10px; + margin-top: 0; +} + +.arrow-left.bottom:after, +.arrow-right.bottom:after { + top: auto; + bottom: 11px; + margin-top: 0; +} + +.arrow-top.arrow-primary:before, +.arrow-top.arrow-primary:after { + border-bottom-color: #3e70c9; +} + +.arrow-bottom.arrow-primary:before, +.arrow-bottom.arrow-primary:after { + border-top-color: #3e70c9; +} + +.arrow-left.arrow-primary:before, +.arrow-left.arrow-primary:after { + border-right-color: #3e70c9; +} + +.arrow-right.arrow-primary:before, +.arrow-right.arrow-primary:after { + border-left-color: #3e70c9; +} + +.arrow-top.arrow-success:before, +.arrow-top.arrow-success:after { + border-bottom-color: #43b968; +} + +.arrow-bottom.arrow-success:before, +.arrow-bottom.arrow-success:after { + border-top-color: #43b968; +} + +.arrow-left.arrow-success:before, +.arrow-left.arrow-success:after { + border-right-color: #43b968; +} + +.arrow-right.arrow-success:before, +.arrow-right.arrow-success:after { + border-left-color: #43b968; +} + +.arrow-top.arrow-info:before, +.arrow-top.arrow-info:after { + border-bottom-color: #20b9ae; +} + +.arrow-bottom.arrow-info:before, +.arrow-bottom.arrow-info:after { + border-top-color: #20b9ae; +} + +.arrow-left.arrow-info:before, +.arrow-left.arrow-info:after { + border-right-color: #20b9ae; +} + +.arrow-right.arrow-info:before, +.arrow-right.arrow-info:after { + border-left-color: #20b9ae; +} + +.arrow-top.arrow-warning:before, +.arrow-top.arrow-warning:after { + border-bottom-color: #f59345; +} + +.arrow-bottom.arrow-warning:before, +.arrow-bottom.arrow-warning:after { + border-top-color: #f59345; +} + +.arrow-left.arrow-warning:before, +.arrow-left.arrow-warning:after { + border-right-color: #f59345; +} + +.arrow-right.arrow-warning:before, +.arrow-right.arrow-warning:after { + border-left-color: #f59345; +} + +.arrow-top.arrow-danger:before, +.arrow-top.arrow-danger:after { + border-bottom-color: #f44236; +} + +.arrow-bottom.arrow-danger:before, +.arrow-bottom.arrow-danger:after { + border-top-color: #f44236; +} + +.arrow-left.arrow-danger:before, +.arrow-left.arrow-danger:after { + border-right-color: #f44236; +} + +.arrow-right.arrow-danger:before, +.arrow-right.arrow-danger:after { + border-left-color: #f44236; +} + +.arrow-top.arrow-purple:before, +.arrow-top.arrow-purple:after { + border-bottom-color: #a567e2; +} + +.arrow-bottom.arrow-purple:before, +.arrow-bottom.arrow-purple:after { + border-top-color: #a567e2; +} + +.arrow-left.arrow-purple:before, +.arrow-left.arrow-purple:after { + border-right-color: #a567e2; +} + +.arrow-right.arrow-purple:before, +.arrow-right.arrow-purple:after { + border-left-color: #a567e2; +} + +.arrow-top.arrow-outline-primary:before { + border-bottom-color: #3e70c9; +} + +.arrow-top.arrow-outline-primary:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-primary:before { + border-top-color: #3e70c9; +} + +.arrow-bottom.arrow-outline-primary:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-primary:before { + border-right-color: #3e70c9; +} + +.arrow-left.arrow-outline-primary:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-primary:before { + border-left-color: #3e70c9; +} + +.arrow-right.arrow-outline-primary:after { + border-left-color: #fff; +} + +.arrow-top.arrow-outline-success:before { + border-bottom-color: #43b968; +} + +.arrow-top.arrow-outline-success:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-success:before { + border-top-color: #43b968; +} + +.arrow-bottom.arrow-outline-success:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-success:before { + border-right-color: #43b968; +} + +.arrow-left.arrow-outline-success:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-success:before { + border-left-color: #43b968; +} + +.arrow-right.arrow-outline-success:after { + border-left-color: #fff; +} + +.arrow-top.arrow-outline-info:before { + border-bottom-color: #20b9ae; +} + +.arrow-top.arrow-outline-info:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-info:before { + border-top-color: #20b9ae; +} + +.arrow-bottom.arrow-outline-info:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-info:before { + border-right-color: #20b9ae; +} + +.arrow-left.arrow-outline-info:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-info:before { + border-left-color: #20b9ae; +} + +.arrow-right.arrow-outline-info:after { + border-left-color: #fff; +} + +.arrow-top.arrow-outline-warning:before { + border-bottom-color: #f59345; +} + +.arrow-top.arrow-outline-warning:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-warning:before { + border-top-color: #f59345; +} + +.arrow-bottom.arrow-outline-warning:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-warning:before { + border-right-color: #f59345; +} + +.arrow-left.arrow-outline-warning:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-warning:before { + border-left-color: #f59345; +} + +.arrow-right.arrow-outline-warning:after { + border-left-color: #fff; +} + +.arrow-top.arrow-outline-danger:before { + border-bottom-color: #f44236; +} + +.arrow-top.arrow-outline-danger:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-danger:before { + border-top-color: #f44236; +} + +.arrow-bottom.arrow-outline-danger:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-danger:before { + border-right-color: #f44236; +} + +.arrow-left.arrow-outline-danger:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-danger:before { + border-left-color: #f44236; +} + +.arrow-right.arrow-outline-danger:after { + border-left-color: #fff; +} + +.arrow-top.arrow-outline-purple:before { + border-bottom-color: #a567e2; +} + +.arrow-top.arrow-outline-purple:after { + border-bottom-color: #fff; +} + +.arrow-bottom.arrow-outline-purple:before { + border-top-color: #a567e2; +} + +.arrow-bottom.arrow-outline-purple:after { + border-top-color: #fff; +} + +.arrow-left.arrow-outline-purple:before { + border-right-color: #a567e2; +} + +.arrow-left.arrow-outline-purple:after { + border-right-color: #fff; +} + +.arrow-right.arrow-outline-purple:before { + border-left-color: #a567e2; +} + +.arrow-right.arrow-outline-purple:after { + border-left-color: #fff; +} + +.arrow-top.arrow-sm:before { + top: -6px; + margin-left: -6px; + border-width: 0 6px 6px; +} + +.arrow-top.arrow-sm:after { + top: -5px; + margin-left: -5px; + border-width: 0 5px 5px; +} + +.arrow-top.arrow-lg:before { + top: -12px; + margin-left: -12px; + border-width: 0 12px 12px; +} + +.arrow-top.arrow-lg:after { + top: -11px; + margin-left: -11px; + border-width: 0 11px 11px; +} + +.arrow-bottom.arrow-sm:before { + bottom: -6px; + margin-left: -6px; + border-width: 6px 6px 0; +} + +.arrow-bottom.arrow-sm:after { + bottom: -5px; + margin-left: -5px; + border-width: 5px 5px 0; +} + +.arrow-bottom.arrow-lg:before { + bottom: -12px; + margin-left: -12px; + border-width: 12px 12px 0; +} + +.arrow-bottom.arrow-lg:after { + bottom: -11px; + margin-left: -11px; + border-width: 11px 11px 0; +} + +.arrow-left.arrow-sm:before { + left: -6px; + margin-top: -6px; + border-width: 6px 6px 6px 0; +} + +.arrow-left.arrow-sm:after { + left: -5px; + margin-top: -5px; + border-width: 5px 5px 5px 0; +} + +.arrow-left.arrow-lg:before { + left: -12px; + margin-top: -12px; + border-width: 12px 12px 12px 0; +} + +.arrow-left.arrow-lg:after { + left: -11px; + margin-top: -11px; + border-width: 11px 11px 11px 0; +} + +.arrow-right.arrow-sm:before { + right: -6px; + margin-top: -6px; + border-width: 6px 0 6px 6px; +} + +.arrow-right.arrow-sm:after { + right: -5px; + margin-top: -5px; + border-width: 5px 0 5px 5px; +} + +.arrow-right.arrow-lg:before { + right: -12px; + margin-top: -12px; + border-width: 12px 0 12px 12px; +} + +.arrow-right.arrow-lg:after { + right: -11px; + margin-top: -11px; + border-width: 11px 0 11px 11px; +} + +/* Avatars */ +.avatars .avatar { + display: inline-block; +} + +.avatar { + position: relative; + line-height: 1; +} + +.avatar img { + width: 100%; + border-radius: 50% +} + +.avatar .status { + position: absolute; + width: 10px; + height: 10px; + border: 2px solid #fff; + border-radius: 50%; +} + +.avatar .status.top { + top: -2px; +} + +.avatar .status.left { + left: 0; +} + +.avatar .status.bottom { + bottom: -2px; +} + +.avatar .status.right { + right: 0; +} + +.avatar.box-32 .status { + margin: 0; +} + +.avatar.box-48 .status { + margin: 2px; +} + +.avatar.box-64 .status { + margin: 4px; +} + +.avatar.box-96 .status { + margin: 9px; +} + +.avatar.box-128 .status { + margin: 14px; +} + +.avatar.box-160 .status { + margin: 19px; +} + +/* Icon */ +.icon-area div { + overflow: hidden; + line-height: 5rem; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +} + +.icon-area div:hover { + background-color: #f5f5f5; +} + +.icon-area i, +.icon-area span { + display: inline-block; + width: 3rem; + font-size: 2rem; + vertical-align: middle; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.icon-area div:hover i, +.icon-area div:hover span { + width: 4rem; + font-size: 3rem; +} + +/* Flags */ +.flags .f-item { + padding: 1rem; + border: 1px solid #ddd; + margin-bottom: 1rem; +} + +.flags .f-item .name, +.flags .f-item .capital { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flags .f-item .code { + display: block; + font-size: 90%; + color: #999; +} + +.flags .f-item .capital { + margin-bottom: 0.5rem; +} + +.flags .f-item .flag-icon { + font-size: 4rem +} + +/* Material design */ +.material-design .site-header { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 2px 8px 0 rgba(0, 0, 0, 0.1); +} + +.material-design .site-sidebar { + box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.05), 2px 0 8px 0 rgba(0, 0, 0, 0.1); +} + +.material-design .site-sidebar .sidebar-menu > li.active > a:after { + display: none; +} + +.material-design .alert, +.material-design .box, +.material-design .card, +.material-design .dropdown-menu, +.material-design .nav-pills .nav-link.active { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 2px 8px 0 rgba(0, 0, 0, 0.1); +} + +.material-design .btn { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 2px 8px 0 rgba(0, 0, 0, 0.2); +} + +.material-design .btn:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.25); +} + +.material-design .site-header .header-form .btn, +.material-design .input-group-btn .btn { + box-shadow: none; +} + +.material-design .modal-content { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 2px 8px 0 rgba(0, 0, 0, 0.2); +} + +.material-design #toast-container > div { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important; +} + +.material-design #toast-container > :hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.15) !important; +} + +/*Theme-settings */ +.theme-settings a { + display: block; + font-weight: bold; + color: rgba(0, 0, 0, 0.5); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.theme-settings a:hover, +.theme-settings a:focus { + display: block; + color: rgba(0, 0, 0, 0.9); +} + +.theme-settings a img { + margin-bottom: 0.5rem; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.theme-settings a:hover img { + opacity: 0.7; +} + +/* Footer */ +.footer { + border-top: 1px solid rgba(0, 0, 0, 0.125); + color: #777; + padding: 1rem 0; +} + +.fixed-footer .footer { + position: fixed; + z-index: 100; + bottom: 0; + left: 0; + right: 0; + background-color: #fff; +} + +@media (min-width: 768px) { + .fixed-footer .footer { + margin-left: 220px; + } +} + +/* Row */ +.row-area { + padding-right: 15px; + padding-left: 15px; +} + +.row-area .row { + margin-top: 1rem; +} + +.row-area .row > [class^=col-] { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + background-color: rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.125); +} + +/* Titles */ +.title-1 { + text-align: center; +} + +.title-1 span { + display: inline-block; + position: relative; + padding: 0 1rem; +} + +.title-1 span:before { + content: ''; + position: absolute; + z-index: 9; + top: 15px; + left: -50px; + width: 50px; + border-width: 1px; + border-style: solid; + border-color: inherit; +} + +.title-1 span:after { + content: ''; + position: absolute; + z-index: 9; + top: 15px; + right: -50px; + width: 50px; + border-top-width: 2px; + border-top-style: solid; + border-top-color: inherit; +} + +/* Other */ +.dropdown-static-opened { + display: block; + position: static; +} + +.static-modal.modal { + display: block; + position: relative; + z-index: 1; + top: auto; + right: auto; + bottom: auto; + left: auto; +} + +.static-modal .modal-dialog { + margin: 0; + width: auto; + max-width: none; +} + +/* ================================================================= + Bootstrap +================================================================= */ + +/* Alert */ +.alert { + border-radius: 0; + border-color: rgba(0, 0, 0, 0.125); +} + +.alert-success hr, +.alert-info hr, +.alert-warning hr, +.alert-danger hr { + border-top-color: rgba(0, 0, 0, 0.125); +} + +.alert-success { + color: #43b968; + background-color: #d9f1e1; +} + +.alert-success .alert-link { + color: #43b968; +} + +.alert-info { + color: #20b9ae; + background-color: #c5f1ed; +} + +.alert-info .alert-link { + color: #20b9ae; +} + +.alert-warning { + color: #f59345; + background-color: #fde9da; +} + +.alert-warning .alert-link { + color: #f59345; +} + +.alert-danger { + color: #f44236; + background-color: #fdd9d7; +} + +.alert-danger .alert-link { + color: #f44236; +} + +.alert-success-outline { + color: #43b968; + background-color: transparent; + border-color: #43b968; +} + +.alert-success-outline hr { + border-top-color: #43b968; +} + +.alert-success-outline .alert-link { + color: #43b968; +} + +.alert-info-outline { + color: #20b9ae; + background-color: transparent; + border-color: #20b9ae; +} + +.alert-info-outline hr { + border-top-color: #20b9ae; +} + +.alert-info-outline .alert-link { + color: #20b9ae; +} + +.alert-warning-outline { + color: #f59345; + background-color: transparent; + border-color: #f59345; +} + +.alert-warning-outline hr { + border-top-color: #f59345; +} + +.alert-warning-outline .alert-link { + color: #f59345; +} + +.alert-danger-outline { + color: #f44236; + background-color: transparent; + border-color: #f44236; +} + +.alert-danger-outline hr { + border-top-color: #f44236; +} + +.alert-danger-outline .alert-link { + color: #f44236; +} + +.alert-success-fill hr, +.alert-info-fill hr, +.alert-warning-fill hr, +.alert-danger-fill hr { + border-top-color: rgba(255, 255, 255, 0.3); +} + +.alert-success-fill { + color: #fff; + background-color: #43b968; + border-color: #43b968; +} + +.alert-success-fill .alert-link { + color: #fff; +} + +.alert-info-fill { + color: #fff; + background-color: #20b9ae; + border-color: #20b9ae; +} + +.alert-info-fill .alert-link { + color: #fff; +} + +.alert-warning-fill { + color: #fff; + background-color: #f59345; + border-color: #f59345; +} + +.alert-warning-fill .alert-link { + color: #fff; +} + +.alert-danger-fill { + color: #fff; + background-color: #f44236; + border-color: #f44236; +} + +.alert-danger-fill .alert-link { + color: #fff; +} + + + + +/* Card */ +.card { + border-radius: 0; +} + +.card-img { + border-radius: 0; +} + +.card-primary { + background-color: #3e70c9; + border-color: #3e70c9; +} + +.card-success { + background-color: #43b968; + border-color: #43b968; +} + +.card-info { + background-color: #20b9ae; + border-color: #20b9ae; +} + +.card-warning { + background-color: #f59345; + border-color: #f59345; +} + +.card-danger { + background-color: #f44236; + border-color: #f44236; +} + +.card-purple { + background-color: #a567e2; + border-color: #a567e2; +} + +.card-black { + background-color: #333; + border-color: #333; +} + +.card-outline-primary { + border-color: #3e70c9; +} + +.card-outline-secondary { + border-color: #ccc; +} + +.card-outline-info { + border-color: #20b9ae; +} + +.card-outline-success { + border-color: #43b968; +} + +.card-outline-warning { + border-color: #f59345; +} + +.card-outline-danger { + border-color: #f44236; +} + +.card-outline-purple { + background-color: transparent; + border-color: #a567e2; +} + +.card-outline-black { + background-color: transparent; + border-color: #333; +} + +/* Nav */ +.nav-1 { + text-align: center; +} + +.nav-1 .nav-link { + display: block; + padding: 1rem 0; + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.nav-1 .nav-link span { + display: inline-block; + font-size: 1.5rem; +} + +.nav-1 .nav-link:focus, +.nav-1 .nav-link:hover { + color: #3e70c9; + background-color: #f5f5f5; +} + +.nav-1 .active, +.nav-1 .active:focus, +.nav-1 .active:hover { + color: #fff; + background-color: #3e70c9; +} + +.nav-2 { + text-align: center; +} + +.nav-2 .nav-item { + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.nav-2 .nav-link { + display: block; + padding: 1rem 0; + color: #777; +} + +.nav-2 .nav-link span { + display: inline-block; + font-size: 1.5rem; +} + +.nav-2 .nav-link:focus, +.nav-2 .nav-link:hover { + color: #3e70c9; + background-color: #f5f5f5; +} + +.nav-2 .active .nav-link, +.nav-2 .active .nav-link:focus, +.nav-2 .active .nav-link:hover { + color: #fff; + background-color: #3e70c9; +} + +.nav-3 { + text-align: center; +} + +.nav-3 .nav-link { + display: block; + padding: 1rem 0; +} + +.nav-3 .nav-link .avatar { + display: inline-block; +} + +.nav-3 .nav-link i { + font-size: 1.25rem; +} + +.nav-3 .nav-link:focus, +.nav-3 .nav-link:hover { + color: #3e70c9; + background-color: #f5f5f5; +} + +.nav-3 .active .nav-link, +.nav-3 .active .nav-link:focus, +.nav-3 .active .nav-link:hover { + color: #fff; + background-color: #3e70c9; +} + +.nav-4 .nav-item { + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.nav-4 .nav-link { + display: block; + padding: 1rem 1.5rem; + color: #777; + border-left: 3px solid transparent; +} + +.nav-4 .nav-link i { + margin-right: 0.75rem; +} + +.nav-4 .nav-link:focus, +.nav-4 .nav-link:hover { + background-color: #f5f5f5; +} + +.nav-4 .active .nav-link, +.nav-4 .active .nav-link:focus, +.nav-4 .active .nav-link:hover { + color: #3e70c9; + border-color: #3e70c9; +} + +.nav-5 .nav-title { + padding: 0.5rem 1.5rem; + background-color: #eee; + font-size: 90%; + text-transform: uppercase; +} + +.nav-5 .nav-link { + display: block; + padding: 0.5rem 1.5rem; + color: #777; +} + +.nav-5 .nav-link i { + margin-right: 0.75rem; +} + +.nav-5 .nav-link:focus, +.nav-5 .nav-link:hover { + color: #3e70c9; +} + +.nav-5 .active .nav-link, +.nav-5 .active .nav-link:focus, +.nav-5 .active .nav-link:hover { + color: #3e70c9; +} + +.nav-6 .nav-item { + display: block; + position: relative; + text-align: center; +} + +.nav-6 .gradient { + position: absolute; + z-index: 9; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0.8; +} + +.nav-6 .nav-link { + display: block; + position: relative; + z-index: 10; + padding: 3rem 1.5rem; + color: #fff; + text-transform: uppercase; +} + +.nav-6 .nav-link span { + font-size: 90%; + text-transform: none; +} + +.nav-6 .nav-link:focus, +.nav-6 .nav-link:hover { + color: rgba(255, 255, 255, 0.9); +} + +.nav-6 .active .nav-link, +.nav-6 .active .nav-link:focus, +.nav-6 .active .nav-link:hover { + color: #fff; +} + +.nav-7 .nav-item { + border-left: 3px solid transparent; +} + +.nav-7 .nav-link { + display: block; + padding: 0.75rem 1.5rem; + color: #777; +} + +.nav-7 .nav-link i { + margin-right: 0.75rem; + color: #3e70c9; +} + +.nav-7 .nav-item ul { + display: none; + margin: 0; + padding: 0 0 0.75rem 27px; + list-style: none; +} + +.nav-7 .nav-item.opened { + display: block; + background-color: #f5f5f5; + border-color: #3e70c9; +} + +.nav-7 .nav-item.opened ul { + display: block; +} + +.nav-7 .nav-link:focus, +.nav-7 .nav-link:hover { + color: #3e70c9; +} + +.nav-7 .active .nav-link, +.nav-7 .active .nav-link:focus, +.nav-7 .active .nav-link:hover { + color: #3e70c9; +} + +.nav-8 .nav-link { + display: block; + padding: 0.5rem 0; + color: #777; +} + +.nav-8 .nav-link i { + margin-right: 0.75rem; +} + +.nav-8 .nav-link:focus, +.nav-8 .nav-link:hover { + color: #3e70c9; +} + +.nav-8 .active .nav-link, +.nav-8 .active .nav-link:focus, +.nav-8 .active .nav-link:hover { + color: #3e70c9; + background-color: transparent; +} + +/* Nav tabs and pills */ +.v-tabs { + border: none !important; + border-right: 1px solid #ddd !important; +} + +.v-tabs .nav-item { + display: block; + float: none; +} + +.v-tabs .nav-item + .nav-item { + margin-left: 0; + margin-top: 0.5rem; +} + +.v-tabs .nav-link { + border-right: none; +} + +.v-tabs .nav-link:focus, .v-tabs .nav-link:hover { + border-color: #eceeef; +} + +.v-tabs .nav-link.active, .v-tabs .nav-link.active:focus, .v-tabs .nav-link.active:hover { + border-color: #ddd; +} + +.nav-tabs .nav-link { + padding: 0.5em 1.25em; + color: #333; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.nav-tabs-2 { + border-bottom-color: #eee; +} + +.nav-tabs-2 .nav-item + .nav-item { + margin-left: 0; +} + +.nav-tabs-2 .nav-link { + border: none; + border-bottom: 1px solid transparent; +} + +.nav-tabs-2 .nav-link.active, .nav-tabs-2 .nav-link.active:focus, .nav-tabs-2 .nav-link.active:hover { + color: #333; + border-color: #3e70c9; +} + +.nav-tabs-2 .nav-item.open .nav-link, +.nav-tabs-2 .nav-item.open .nav-link:focus, +.nav-tabs-2 .nav-item.open .nav-link:hover { + border-color: #eee; +} + +.nav-tabs-3 .nav-link { + border: none; +} + +.nav-tabs-3 .nav-link:focus, .nav-tabs-3 .nav-link:hover { + background-color: #eee; +} + +.nav-tabs-3 .nav-link.active, .nav-tabs-3 .nav-link.active:focus, .nav-tabs-3 .nav-link.active:hover { + color: #fff; + background-color: #3e70c9; +} + +.nav-tabs-3 .nav-item.open .nav-link, +.nav-tabs-3 .nav-item.open .nav-link:focus, +.nav-tabs-3 .nav-item.open .nav-link:hover { + background-color: #eee; +} + +.nav-pills .nav-link { + border-radius: 0; +} + +.nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover, +.nav-pills .nav-item.open .nav-link, +.nav-pills .nav-item.open .nav-link:focus, +.nav-pills .nav-item.open .nav-link:hover { + background-color: #3e70c9; +} + +.nav-pills-2 .nav-link { + border: 1px solid transparent; +} + +.nav-pills-2 .nav-link.active, .nav-pills-2 .nav-link.active:focus, .nav-pills-2 .nav-link.active:hover { + color: #3e70c9; + background-color: transparent; + border-color: #3e70c9; +} + +.nav-pills-2 .nav-item.open .nav-link, +.nav-pills-2 .nav-item.open .nav-link:focus, +.nav-pills-2 .nav-item.open .nav-link:hover { + color: #3e70c9; + background-color: transparent; +} + +.nav-pills-rounded .nav-link { + border-radius: 25rem; +} + +/* Progress */ +.progress-sm { + height: 0.5rem; +} + +.progress-lg { + height: 1.5rem; +} + +.progress[value] { + border-radius: 0; +} + +.progress[value]::-moz-progress-bar { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.progress[value]::-webkit-progress-value { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.progress[value="100"]::-moz-progress-bar { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.progress[value="100"]::-webkit-progress-value { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.progress[value]::-webkit-progress-bar { + border-radius: 0; +} + +base::-moz-progress-bar, +.progress[value] { + border-radius: 0; +} + +@media screen and (min-width: 0\0) { + .progress { + border-radius: 0; + } + .progress-bar { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + .progress[width="100%"] { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } +} + +.progress-rounded[value] { + border-radius: 0.25rem; +} + +.progress-rounded[value]::-moz-progress-bar { + border-bottom-left-radius: 0.25rem; + border-top-left-radius: 0.25rem; +} + +.progress-rounded[value]::-webkit-progress-value { + border-bottom-left-radius: 0.25rem; + border-top-left-radius: 0.25rem; +} + +.progress-rounded[value="100"]::-moz-progress-bar { + border-bottom-right-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.progress-rounded[value="100"]::-webkit-progress-value { + border-bottom-right-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.progress-rounded[value]::-webkit-progress-bar { + border-radius: 0.25rem; +} + +base::-moz-progress-bar, +.progress-rounded[value] { + border-radius: 0.25rem; +} + +@media screen and (min-width: 0\0) { + .progress-rounded { + border-radius: 0.25rem; + } + .progress-rounded-bar { + border-bottom-left-radius: 0.25rem; + border-top-left-radius: 0.25rem; + } + .progress-rounded[width="100%"] { + border-bottom-right-radius: 0.25rem; + border-top-right-radius: 0.25rem; + } +} + +.progress-success[value]::-webkit-progress-value { + background-color: #43b968; +} + +.progress-success[value]::-moz-progress-bar { + background-color: #43b968; +} + +.progress-success[value]::-ms-fill { + background-color: #43b968; +} + +@media screen and (min-width: 0\0) { + .progress-success .progress-bar { + background-color: #43b968; + } +} + +.progress-info[value]::-webkit-progress-value { + background-color: #20b9ae; +} + +.progress-info[value]::-moz-progress-bar { + background-color: #20b9ae; +} + +.progress-info[value]::-ms-fill { + background-color: #20b9ae; +} + +@media screen and (min-width: 0\0) { + .progress-info .progress-bar { + background-color: #20b9ae; + } +} + +.progress-warning[value]::-webkit-progress-value { + background-color: #f59345; +} + +.progress-warning[value]::-moz-progress-bar { + background-color: #f59345; +} + +.progress-warning[value]::-ms-fill { + background-color: #f59345; +} + +@media screen and (min-width: 0\0) { + .progress-warning .progress-bar { + background-color: #f59345; + } +} + +.progress-danger[value]::-webkit-progress-value { + background-color: #f44236; +} + +.progress-danger[value]::-moz-progress-bar { + background-color: #f44236; +} + +.progress-danger[value]::-ms-fill { + background-color: #f44236; +} + +@media screen and (min-width: 0\0) { + .progress-danger .progress-bar { + background-color: #f44236; + } +} + +/* Tag */ +.tag { + padding: 0.2em 0.4em 0.3em; + font-size: 80%; + min-width: 20px; + border-radius: 0; +} + +.tag-pill { + padding-right: .7em; + padding-left: .7em; + border-radius: 10rem; +} + +.tag-default { + background-color: #adb7be; +} + +.tag-default[href]:focus, .tag-default[href]:hover { + background-color: #c6d1d8; +} + +.tag-primary { + background-color: #3e70c9; +} + +.tag-primary[href]:focus, .tag-primary[href]:hover { + background-color: #467ee1; +} + +.tag-success { + background-color: #43b968; +} + +.tag-success[href]:focus, .tag-success[href]:hover { + background-color: #4bcb73; +} + +.tag-info { + background-color: #20b9ae; +} + +.tag-info[href]:focus, .tag-info[href]:hover { + background-color: #33cbc0; +} + +.tag-warning { + background-color: #f59345; +} + +.tag-warning[href]:focus, .tag-warning[href]:hover { + background-color: #fea45c; +} + +.tag-danger { + background-color: #f44236; +} + +.tag-danger[href]:focus, .tag-danger[href]:hover { + background-color: #ff574c; +} + +.tag-purple { + background-color: #a567e2; +} + +.tag-purple[href]:focus, .tag-purple[href]:hover { + background-color: #a567e2; +} + +.tag-black { + background-color: #333; +} + +.tag-black[href]:focus, .tag-black[href]:hover { + background-color: #333; +} + +/* Tooltip */ +.tooltip-inner { + background-color: #333; + border-radius: 0; +} + +.tooltip.tooltip-top .tooltip-inner::before, +.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #333; +} + +.tooltip.tooltip-right .tooltip-inner::before, +.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #333; +} + +.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #333; +} + +.tooltip.tooltip-left .tooltip-inner::before, +.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #333; +} + +.tooltip-primary .tooltip-inner { + background-color: #3e70c9; +} + +.tooltip-primary.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-primary.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #3e70c9; +} + +.tooltip-primary.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-primary.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #3e70c9; +} + +.tooltip-primary.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-primary.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #3e70c9; +} + +.tooltip-primary.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-primary.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #3e70c9; +} + +.tooltip-success .tooltip-inner { + background-color: #43b968; +} + +.tooltip-success.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-success.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #43b968; +} + +.tooltip-success.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-success.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #43b968; +} + +.tooltip-success.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-success.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #43b968; +} + +.tooltip-success.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-success.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #43b968; +} + +.tooltip-info .tooltip-inner { + background-color: #20b9ae; +} + +.tooltip-info.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-info.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #20b9ae; +} + +.tooltip-info.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-info.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #20b9ae; +} + +.tooltip-info.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-info.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #20b9ae; +} + +.tooltip-info.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-info.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #20b9ae; +} + +.tooltip-warning .tooltip-inner { + background-color: #f59345; +} + +.tooltip-warning.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-warning.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #f59345; +} + +.tooltip-warning.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-warning.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #f59345; +} + +.tooltip-warning.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-warning.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #f59345; +} + +.tooltip-warning.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-warning.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #f59345; +} + +.tooltip-danger .tooltip-inner { + background-color: #f44236; +} + +.tooltip-danger.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-danger.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #f44236; +} + +.tooltip-danger.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-danger.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #f44236; +} + +.tooltip-danger.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-danger.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #f44236; +} + +.tooltip-danger.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-danger.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #f44236; +} + +.tooltip-purple .tooltip-inner { + background-color: #a567e2; +} + +.tooltip-purple.tooltip.tooltip-top .tooltip-inner::before, +.tooltip-purple.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { + border-top-color: #a567e2; +} + +.tooltip-purple.tooltip.tooltip-right .tooltip-inner::before, +.tooltip-purple.tooltip.bs-tether-element-attached-left .tooltip-inner::before { + border-right-color: #a567e2; +} + +.tooltip-purple.tooltip.tooltip-bottom .tooltip-inner::before, +.tooltip-purple.tooltip.bs-tether-element-attached-top .tooltip-inner::before { + border-bottom-color: #a567e2; +} + +.tooltip-purple.tooltip.tooltip-left .tooltip-inner::before, +.tooltip-purple.tooltip.bs-tether-element-attached-right .tooltip-inner::before { + border-left-color: #a567e2; +} + +/* Other */ +abbr[title] { + text-decoration: none; +} + +.breadcrumb { + border-radius: 0; +} + +.breadcrumb.no-bg { + background-color: transparent; + padding: 0; +} + +code { + color: #f44236; + background-color: #f9e5e4; +} + +.close { + text-shadow: none; +} + +.custom-control-indicator { + width: 16px; + height: 16px; + line-height: 16px; +} + +.custom-control-input:checked ~ .custom-control-indicator { + background-color: #3e70c9; +} + +.custom-control-input:focus ~ .custom-control-indicator { + -webkit-box-shadow: none; + box-shadow: none; +} + +.custom-control-input:active ~ .custom-control-indicator { + background-color: #e5eff2; +} + +.custom-checkbox .custom-control-indicator { + border-radius: 0; + -webkit-background-size: 70% 70%; + background-size: 70% 70%; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.custom-checkbox .custom-control-description { + margin-left: 0.5rem; +} + +.custom-select { + border-radius: 0; +} + +.custom-select:focus { + border-color: #3e70c9; +} + +.dropdown-menu { + border-radius: 0; +} + +.dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover { + background-color: #3e70c9; +} + + + +/* h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-weight: 600; +} */ + +.input-group-addon { + padding: 0.45rem 0.75rem; + border-radius: 0; +} + +.img-thumbnail { + border-radius: 0; +} + +.mark, mark { + background-color: #f9efb8; +} + +.media-left { + padding-right: 1rem; +} + +.modal-backdrop { + background-color: #333; +} + +.modal-content { + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0; +} + +.pagination { + border-radius: 0; +} + +.page-link { + color: #999; +} + +.page-link:focus, .page-link:hover { + color: #333; + background-color: #eceeef; + border-color: #ddd; +} + +.page-item:first-child .page-link { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.page-item:last-child .page-link { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.pagination-lg .page-item:first-child .page-link { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.pagination-lg .page-item:last-child .page-link { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.pagination-sm .page-item:first-child .page-link { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.pagination-sm .page-item:last-child .page-link { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover { + background-color: #3e70c9; + border-color: #3e70c9; +} + +.popover { + font-size: 1rem; + border-radius: 0; +} + +select.form-control:not([size]):not([multiple]) { + height: 33px; +} + +.table-grey-head thead { + background-color: #f5f5f5; +} + +.text-muted { + color: #999; +} + +/* ================================================================= + Helper classes +================================================================= */ + +/* Background */ +.bg-primary { + color: #fff !important; + background-color: #3e70c9 !important; +} + +a.bg-primary:focus, a.bg-primary:hover { + background-color: #467ee1 !important; +} + +.bg-secondary { + color: #fff !important; + background-color: #888 !important; +} + +a.bg-secondary:focus, a.bg-secondary:hover { + background-color: #999 !important; +} + +.bg-info { + color: #fff !important; + background-color: #20b9ae !important; +} + +a.bg-info:focus, a.bg-info:hover { + background-color: #5ad3e4 !important; +} + +.bg-success { + color: #fff !important; + background-color: #43b968 !important; +} + +a.bg-success:focus, a.bg-success:hover { + background-color: #4bcb73 !important; +} + +.bg-warning { + color: #fff !important; + background-color: #f59345 !important; +} + +a.bg-warning:focus, a.bg-warning:hover { + background-color: #fea45c !important; +} + +.bg-danger { + color: #fff !important; + background-color: #f44236 !important; +} + +a.bg-danger:focus, a.bg-danger:hover { + background-color: #ff574c !important; +} + +.bg-purple { + color: #fff !important; + background-color: #a567e2 !important; +} + +a.bg-purple:focus, a.bg-purple:hover { + background-color: #b773f9 !important; +} + +.bg-black { + color: #fff !important; + background-color: #333 !important; +} + +a.bg-black:focus, a.bg-black:hover { + background-color: #444 !important; +} + +.bg-white { + background-color: #fff !important; +} + +a.bg-white:focus, a.bg-white:hover { + background-color: #fff !important; +} + +.bg-facebook { + color: #fff !important; + background-color: #3b5998 !important; +} + +.bg-twitter { + color: #fff !important; + background-color: #00aced !important; +} + +.bg-linkedin { + color: #fff !important; + background-color: #007bb6 !important; +} + +.bg-dribbble { + color: #fff !important; + background-color: #ea4c89 !important; +} + +.bg-googleplus { + color: #fff !important; + background-color: #dd4b39 !important; +} + +.bg-instagram { + color: #fff !important; + background-color: #517fa4 !important; +} + +.bg-pinterest { + color: #fff !important; + background-color: #cb2027 !important; +} + +.bg-dropbox { + color: #fff !important; + background-color: #007ee5 !important; +} + +.bg-flickr { + color: #fff !important; + background-color: #ff0084 !important; +} + +.bg-tumblr { + color: #fff !important; + background-color: #32506d !important; +} + +.bg-skype { + color: #fff !important; + background-color: #00aff0 !important; +} + +.bg-youtube { + color: #fff !important; + background-color: #bb0000 !important; +} + +/* Box */ +.box { + position: relative; + display: block; + margin-bottom: 0.5rem; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.box-block { + padding: 1.25rem; +} + +.box-32 { + width: 32px; + height: 32px; + line-height: 32px; +} + +.box-48 { + width: 48px; + height: 48px; + line-height: 48px; +} + +.box-64 { + width: 64px; + height: 64px; + line-height: 64px; +} + +.box-96 { + width: 96px; + height: 96px; + line-height: 96px; +} + +.box-128 { + width: 128px; + height: 128px; + line-height: 128px; +} + +.box-160 { + width: 160px; + height: 160px; + line-height: 160px; +} + +/* Gradient */ +.gradient-primary { + background-image: -webkit-gradient(linear, left top, right top, from(#3e70c9), to(#833ec9)); + background-image: -webkit-linear-gradient(left, #3e70c9 0%, #833ec9 100%); + background-image: -o-linear-gradient(left, #3e70c9 0%, #833ec9 100%); + background-image: linear-gradient(to right, #3e70c9 0%, #833ec9 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e70c9', endColorstr='#833ec9', GradientType=1); + background-repeat: repeat-x; +} + +.gradient-info { + background-image: -webkit-gradient(linear, left top, right top, from(#20b9ae), to(#006fd6)); + background-image: -webkit-linear-gradient(left, #20b9ae 0%, #006fd6 100%); + background-image: -o-linear-gradient(left, #20b9ae 0%, #006fd6 100%); + background-image: linear-gradient(to right, #20b9ae 0%, #006fd6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20b9ae', endColorstr='#006fd6', GradientType=1); + background-repeat: repeat-x; +} + +.gradient-success { + background-image: -webkit-gradient(linear, left top, right top, from(#43b968), to(#43acb9)); + background-image: -webkit-linear-gradient(left, #43b968 0%, #43acb9 100%); + background-image: -o-linear-gradient(left, #43b968 0%, #43acb9 100%); + background-image: linear-gradient(to right, #43b968 0%, #43acb9 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43b968', endColorstr='#43acb9', GradientType=1); + background-repeat: repeat-x; +} + +.gradient-warning { + background-image: -webkit-gradient(linear, left top, right top, from(#f59345), to(#f5eb45)); + background-image: -webkit-linear-gradient(left, #f59345 0%, #f5eb45 100%); + background-image: -o-linear-gradient(left, #f59345 0%, #f5eb45 100%); + background-image: linear-gradient(to right, #f59345 0%, #f5eb45 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f59345', endColorstr='#f5eb45', GradientType=1); + background-repeat: repeat-x; +} + +.gradient-danger { + background-image: -webkit-gradient(linear, left top, right top, from(#f44236), to(#f4e936)); + background-image: -webkit-linear-gradient(left, #f44236 0%, #f4e936 100%); + background-image: -o-linear-gradient(left, #f44236 0%, #f4e936 100%); + background-image: linear-gradient(to right, #f44236 0%, #f4e936 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f44236', endColorstr='#f4e936', GradientType=1); + background-repeat: repeat-x; +} + +.gradient-purple { + background-image: -webkit-gradient(linear, left top, right top, from(#a567e2), to(#e267d1)); + background-image: -webkit-linear-gradient(left, #a567e2 0%, #e267d1 100%); + background-image: -o-linear-gradient(left, #a567e2 0%, #e267d1 100%); + background-image: linear-gradient(to right, #a567e2 0%, #e267d1 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a567e2', endColorstr='#e267d1', GradientType=1); + background-repeat: repeat-x; +} + +/* Heading underline */ +.h-underline { + position: relative; + padding-bottom: 1rem; +} + +.h-underline:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + height: 2px; +} + +.h-underline-50:after { + width: 50px; +} + +.h-underline-100:after { + width: 100px; +} + +.h-underline-150:after { + width: 150px; +} + +.h-underline-primary:after { + background-color: #3e70c9; +} + +.h-underline-info:after { + background-color: #20b9ae; +} + +.h-underline-success:after { + background-color: #43b968; +} + +.h-underline-warning:after { + background-color: #f59345; +} + +.h-underline-danger:after { + background-color: #f44236; +} + +.h-underline-purple:after { + background-color: #a567e2; +} + +.h-underline-black:after { + background-color: #333; +} + +/* Overflow */ +.overflow-x-auto { + overflow-x: auto; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.overflow-auto { + overflow: auto; +} + +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.overflow-hidden { + overflow: hidden; +} + +/* Row */ +.row.row-sm { + margin-left: -0.5rem; + margin-right: -0.5rem; +} + +.row.row-sm>[class*=col-] { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.row.row-md { + margin-left: -0.75rem; + margin-right: -0.75rem; +} + +.row.row-md [class*=col-] { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.row.no-gutter { + margin-left: 0; + margin-right: 0; +} + +.row.no-gutter > [class*=col-] { + padding-left: 0; + padding-right: 0; +} + +/* Shadow */ +.shadow-primary { + -webkit-box-shadow: 0 0 0 5px #3e70c9 !important; + box-shadow: 0 0 0 5px #3e70c9 !important; +} + +.shadow-info { + -webkit-box-shadow: 0 0 0 5px #20b9ae !important; + box-shadow: 0 0 0 5px #20b9ae !important; +} + +.shadow-success { + -webkit-box-shadow: 0 0 0 5px #43b968 !important; + box-shadow: 0 0 0 5px #43b968 !important; +} + +.shadow-warning { + -webkit-box-shadow: 0 0 0 5px #f59345 !important; + box-shadow: 0 0 0 5px #f59345 !important; +} + +.shadow-danger { + -webkit-box-shadow: 0 0 0 5px #f44236 !important; + box-shadow: 0 0 0 5px #f44236 !important; +} + +.shadow-purple { + -webkit-box-shadow: 0 0 0 5px #a567e2 !important; + box-shadow: 0 0 0 5px #a567e2 !important; +} + +.shadow-black { + -webkit-box-shadow: 0 0 0 5px #333 !important; + box-shadow: 0 0 0 5px #333 !important; +} + +.shadow-white { + -webkit-box-shadow: 0 0 0 5px #fff !important; + box-shadow: 0 0 0 5px #fff !important; +} + +/* Text */ +a.text-primary, +a.text-info, +a.text-success, +a.text-warning, +a.text-daner, +a.text-purple, +a.text-black, +a.text-white, +a.text-grey { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.text-primary { + color: #3e70c9 !important; +} + +.text-primary .underline { + border-bottom: 1px solid #3e70c9 !important; +} + +a.text-primary:focus, a.text-primary:hover { + color: #82a2dc !important; +} + +a.text-primary:focus .underline, a.text-primary:hover .underline { + border-color: #82a2dc !important; +} + +.text-success { + color: #43b968 !important; +} + +.text-success .underline { + border-bottom: 1px solid #43b968 !important; +} + +a.text-success:focus, a.text-success:hover { + color: #85d19d !important; +} + +a.text-success:focus .underline, a.text-success:hover .underline { + border-color: #85d19d !important; +} + +.text-info { + color: #20b9ae !important; +} + +.text-info .underline { + border-bottom: 1px solid #20b9ae !important; +} + +a.text-info:focus, a.text-info:hover { + color: #5ad3e4 !important; +} + +a.text-info:focus .underline, a.text-info:hover .underline { + border-color: #5ad3e4 !important; +} + +.text-warning { + color: #f59345 !important; +} + +.text-warning .underline { + border-bottom: 1px solid #f59345 !important; +} + +a.text-warning:focus, a.text-warning:hover { + color: #f8b986 !important; +} + +a.text-warning:focus .underline, a.text-warning:hover .underline { + border-color: #f8b986 !important; +} + +.text-danger { + color: #f44236 !important; +} + +.text-danger .underline { + border-bottom: 1px solid #f44236 !important; +} + +a.text-danger:focus, a.text-danger:hover { + color: #f8847d !important; +} + +a.text-danger:focus .underline, a.text-danger:hover .underline { + border-color: #f8847d !important; +} + +.text-purple { + color: #a567e2 !important; +} + +.text-purple .underline { + border-bottom: 1px solid #a567e2 !important; +} + +a.text-purple:focus, a.text-purple:hover { + color: #c49cec !important; +} + +a.text-purple:focus .underline, a.text-purple:hover .underline { + border-color: #c49cec !important; +} + +.text-black { + color: #333 !important; +} + +.text-black .underline { + border-bottom: 1px solid #333 !important; +} + +a.text-black:focus, a.text-black:hover { + color: #7b7b7b !important; +} + +a.text-black:focus .underline, a.text-black:hover .underline { + border-color: #7b7b7b !important; +} + +.text-white { + color: #fff !important; +} + +.text-white .underline { + border-bottom: 1px solid #fff !important; +} + +a.text-white:focus, a.text-white:hover { + color: rgba(255, 255, 255, 0.7) !important; +} + +a.text-white:focus .underline, a.text-white:hover .underline { + border-color: rgba(255, 255, 255, 0.7) !important; +} + +.text-grey { + color: #999 !important; +} + +.text-grey .underline { + border-bottom: 1px solid #999 !important; +} + +a.text-grey:focus, a.text-grey:hover { + color: #aaa !important; +} + +a.text-grey:focus .underline, a.text-grey:hover .underline { + border-color: #aaa !important; +} + +.text-facebook { + color: #3b5998 !important; +} + +.text-twitter { + color: #00aced !important; +} + +.text-linkedin { + color: #007bb6 !important; +} + +.text-dribbble { + color: #ea4c89 !important; +} + +.text-googleplus { + color: #dd4b39 !important; +} + +.text-instagram { + color: #517fa4 !important; +} + +.text-pinterest { + color: #cb2027 !important; +} + +.text-dropbox { + color: #007ee5 !important; +} + +.text-flickr { + color: #ff0084 !important; +} + +.text-tumblr { + color: #32506d !important; +} + +.text-skype { + color: #00aff0 !important; +} + +.text-youtube { + color: #bb0000 !important; +} + +/* Minimum width */ +.w-min-xs { + min-width: 80px; +} + +.w-min-sm { + min-width: 100px; +} + +.w-min-md { + min-width: 120px; +} + +.w-min-lg { + min-width: 140px; +} + +/* Other */ +.font-90 { + font-size: 90%; +} + +.img-cover { + -webkit-background-size: cover; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.img-fixed { + background-attachment: fixed; +} + +.text-underline { + text-decoration: underline !important; +} + +/* Border */ +.b-a-0 { + border: none !important; +} + +.b-t-0 { + border-top: none !important; +} + +.b-l-0 { + border-left: none !important; +} + +.b-b-0 { + border-bottom: none !important; +} + +.b-r-0 { + border-right: none !important; +} + +.b-a { + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.b-t { + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.b-l { + border-left: 1px solid rgba(0, 0, 0, 0.125); +} + +.b-b { + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.b-r { + border-right: 1px solid rgba(0, 0, 0, 0.125); +} + +.b-a-dashed { + border-style: dashed !important; +} + +.b-t-dashed { + border-top-style: dashed !important; +} + +.b-l-dashed { + border-left-style: dashed !important; +} + +.b-b-dashed { + border-bottom-style: dashed !important; +} + +.b-r-dashed { + border-right-style: dashed !important; +} + +.b-a-dotted { + border-style: dotted !important; +} + +.b-t-dotted { + border-top-style: dotted !important; +} + +.b-l-dotted { + border-left-style: dotted !important; +} + +.b-b-dotted { + border-bottom-style: dotted !important; +} + +.b-r-dotted { + border-right-style: dotted !important; +} + +.b-a-width-2 { + border-width: 2px !important; +} + +.b-a-width-3 { + border-width: 3px !important; +} + +.b-a-width-4 { + border-width: 4px !important; +} + +.b-a-width-5 { + border-width: 5px !important; +} + +.b-t-width-2 { + border-top-width: 2px !important; +} + +.b-t-width-3 { + border-top-width: 3px !important; +} + +.b-t-width-4 { + border-top-width: 4px !important; +} + +.b-t-width-5 { + border-top-width: 5px !important; +} + +.b-l-width-2 { + border-left-width: 2px !important; +} + +.b-l-width-3 { + border-left-width: 3px !important; +} + +.b-l-width-4 { + border-left-width: 4px !important; +} + +.b-l-width-5 { + border-left-width: 5px !important; +} + +.b-b-width-2 { + border-bottom-width: 2px !important; +} + +.b-b-width-3 { + border-bottom-width: 3px !important; +} + +.b-b-width-4 { + border-bottom-width: 4px !important; +} + +.b-b-width-5 { + border-bottom-width: 5px !important; +} + +.b-r-width-2 { + border-right-width: 2px !important; +} + +.b-r-width-3 { + border-right-width: 3px !important; +} + +.b-r-width-4 { + border-right-width: 4px !important; +} + +.b-r-width-5 { + border-right-width: 5px !important; +} + +.b-a-radius-0 { + border-radius: 0 !important; +} + +.b-a-radius-0-125 { + border-radius: 0.125rem !important; +} + +.b-a-radius-0-25 { + border-radius: 0.25rem !important; +} + +.b-a-radius-0-5 { + border-radius: 0.5rem !important; +} + +.b-a-radius-circle { + border-radius: 50% !important; +} + +.b-t-l-radius-0 { + border-top-left-radius: 0 !important; +} + +.b-t-l-radius-0-125 { + border-top-left-radius: 0.125rem !important; +} + +.b-t-l-radius-0-25 { + border-top-left-radius: 0.25rem !important; +} + +.b-t-l-radius-0-5 { + border-top-left-radius: 0.5rem !important; +} + +.b-t-l-radius-circle { + border-top-left-radius: 50% !important; +} + +.b-t-r-radius-0 { + border-top-right-radius: 0 !important; +} + +.b-t-r-radius-0-125 { + border-top-right-radius: 0.125rem !important; +} + +.b-t-r-radius-0-25 { + border-top-right-radius: 0.25rem !important; +} + +.b-t-r-radius-0-5 { + border-top-right-radius: 0.5rem !important; +} + +.b-t-r-radius-circle { + border-top-right-radius: 50% !important; +} + +.b-b-r-radius-0 { + border-bottom-right-radius: 0 !important; +} + +.b-b-r-radius-0-125 { + border-bottom-right-radius: 0.125rem !important; +} + +.b-b-r-radius-0-25 { + border-bottom-right-radius: 0.25rem !important; +} + +.b-b-r-radius-0-5 { + border-bottom-right-radius: 0.5rem !important; +} + +.b-b-r-radius-circle { + border-bottom-right-radius: 50% !important; +} + +.b-b-l-radius-0 { + border-bottom-left-radius: 0 !important; +} + +.b-b-l-radius-0-125 { + border-bottom-left-radius: 0.125rem !important; +} + +.b-b-l-radius-0-25 { + border-bottom-left-radius: 0.25rem !important; +} + +.b-b-l-radius-0-5 { + border-bottom-left-radius: 0.5rem !important; +} + +.b-b-l-radius-circle { + border-bottom-left-radius: 50% !important; +} + +.b-a-primary { + border-color: #3e70c9 !important; +} + +.b-t-primary { + border-top-color: #3e70c9 !important; +} + +.b-l-primary { + border-left-color: #3e70c9 !important; +} + +.b-b-primary { + border-bottom-color: #3e70c9 !important; +} + +.b-r-primary { + border-right-color: #3e70c9 !important; +} + +.b-a-secondary { + border-color: #ccc !important; +} + +.b-t-secondary { + border-top-color: #ccc !important; +} + +.b-l-secondary { + border-left-color: #ccc !important; +} + +.b-b-secondary { + border-bottom-color: #ccc !important; +} + +.b-r-secondary { + border-right-color: #ccc !important; +} + +.b-a-info { + border-color: #20b9ae !important; +} + +.b-t-info { + border-top-color: #20b9ae !important; +} + +.b-l-info { + border-left-color: #20b9ae !important; +} + +.b-b-info { + border-bottom-color: #20b9ae !important; +} + +.b-r-info { + border-right-color: #20b9ae !important; +} + +.b-a-success { + border-color: #43b968 !important; +} + +.b-t-success { + border-top-color: #43b968 !important; +} + +.b-l-success { + border-left-color: #43b968 !important; +} + +.b-b-success { + border-bottom-color: #43b968 !important; +} + +.b-r-success { + border-right-color: #43b968 !important; +} + +.b-a-warning { + border-color: #f59345 !important; +} + +.b-t-warning { + border-top-color: #f59345 !important; +} + +.b-l-warning { + border-left-color: #f59345 !important; +} + +.b-b-warning { + border-bottom-color: #f59345 !important; +} + +.b-r-warning { + border-right-color: #f59345 !important; +} + +.b-a-danger { + border-color: #f44236 !important; +} + +.b-t-danger { + border-top-color: #f44236 !important; +} + +.b-l-danger { + border-left-color: #f44236 !important; +} + +.b-b-danger { + border-bottom-color: #f44236 !important; +} + +.b-r-danger { + border-right-color: #f44236 !important; +} + +.b-a-purple { + border-color: #a567e2 !important; +} + +.b-t-purple { + border-top-color: #a567e2 !important; +} + +.b-l-purple { + border-left-color: #a567e2 !important; +} + +.b-b-purple { + border-bottom-color: #a567e2 !important; +} + +.b-r-purple { + border-right-color: #a567e2 !important; +} + +.b-a-black { + border-color: #333 !important; +} + +.b-t-black { + border-top-color: #333 !important; +} + +.b-l-black { + border-left-color: #333 !important; +} + +.b-b-black { + border-bottom-color: #333 !important; +} + +.b-r-black { + border-right-color: #333 !important; +} + +.b-a-white { + border-color: #fff !important; +} + +.b-t-white { + border-top-color: #fff !important; +} + +.b-l-white { + border-left-color: #fff !important; +} + +.b-b-white { + border-bottom-color: #fff !important; +} + +.b-r-white { + border-right-color: #fff !important; +} + +/* Margin */ +.m-0-25 { + margin: 0.25rem 0.25rem !important; +} + +.mt-0-25 { + margin-top: 0.25rem !important; +} + +.mr-0-25 { + margin-right: 0.25rem !important; +} + +.mb-0-25 { + margin-bottom: 0.25rem !important; +} + +.ml-0-25 { + margin-left: 0.25rem !important; +} + +.mx-0-25 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} + +.my-0-25 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.m-0-5 { + margin: 0.5rem 0.5rem !important; +} + +.mt-0-5 { + margin-top: 0.5rem !important; +} + +.mr-0-5 { + margin-right: 0.5rem !important; +} + +.mb-0-5 { + margin-bottom: 0.5rem !important; +} + +.ml-0-5 { + margin-left: 0.5rem !important; +} + +.mx-0-5 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} + +.my-0-5 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.m-0-75 { + margin: 0.75rem 0.75rem !important; +} + +.mt-0-75 { + margin-top: 0.75rem !important; +} + +.mr-0-75 { + margin-right: 0.75rem !important; +} + +.mb-0-75 { + margin-bottom: 0.75rem !important; +} + +.ml-0-75 { + margin-left: 0.75rem !important; +} + +.mx-0-75 { + margin-right: 0.75rem !important; + margin-left: 0.75rem !important; +} + +.my-0-75 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +@media (min-width: 544px) { + .m-sm-0 { + margin: 0 0 !important; + } + + .mt-sm-0 { + margin-top: 0 !important; + } + + .mr-sm-0 { + margin-right: 0 !important; + } + + .mb-sm-0 { + margin-bottom: 0 !important; + } + + .ml-sm-0 { + margin-left: 0 !important; + } + + .mx-sm-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .my-sm-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .m-sm-1 { + margin: 1rem 1rem !important; + } + + .mt-sm-1 { + margin-top: 1rem !important; + } + + .mr-sm-1 { + margin-right: 1rem !important; + } + + .mb-sm-1 { + margin-bottom: 1rem !important; + } + + .ml-sm-1 { + margin-left: 1rem !important; + } + + .mx-sm-1 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .my-sm-1 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .m-sm-2 { + margin: 1.5rem 1.5rem !important; + } + + .mt-sm-2 { + margin-top: 1.5rem !important; + } + + .mr-sm-2 { + margin-right: 1.5rem !important; + } + + .mb-sm-2 { + margin-bottom: 1.5rem !important; + } + + .ml-sm-2 { + margin-left: 1.5rem !important; + } + + .mx-sm-2 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .my-sm-2 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .m-sm-3 { + margin: 3rem 3rem !important; + } + + .mt-sm-3 { + margin-top: 3rem !important; + } + + .mr-sm-3 { + margin-right: 3rem !important; + } + + .mb-sm-3 { + margin-bottom: 3rem !important; + } + + .ml-sm-3 { + margin-left: 3rem !important; + } + + .mx-sm-3 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .my-sm-3 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } +} + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 0 !important; + } + + .mt-md-0 { + margin-top: 0 !important; + } + + .mr-md-0 { + margin-right: 0 !important; + } + + .mb-md-0 { + margin-bottom: 0 !important; + } + + .ml-md-0 { + margin-left: 0 !important; + } + + .mx-md-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .my-md-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .m-md-1 { + margin: 1rem 1rem !important; + } + + .mt-md-1 { + margin-top: 1rem !important; + } + + .mr-md-1 { + margin-right: 1rem !important; + } + + .mb-md-1 { + margin-bottom: 1rem !important; + } + + .ml-md-1 { + margin-left: 1rem !important; + } + + .mx-md-1 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .my-md-1 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .m-md-2 { + margin: 1.5rem 1.5rem !important; + } + + .mt-md-2 { + margin-top: 1.5rem !important; + } + + .mr-md-2 { + margin-right: 1.5rem !important; + } + + .mb-md-2 { + margin-bottom: 1.5rem !important; + } + + .ml-md-2 { + margin-left: 1.5rem !important; + } + + .mx-md-2 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .my-md-2 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .m-md-3 { + margin: 3rem 3rem !important; + } + + .mt-md-3 { + margin-top: 3rem !important; + } + + .mr-md-3 { + margin-right: 3rem !important; + } + + .mb-md-3 { + margin-bottom: 3rem !important; + } + + .ml-md-3 { + margin-left: 3rem !important; + } + + .mx-md-3 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .my-md-3 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } +} + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 0 !important; + } + + .mt-lg-0 { + margin-top: 0 !important; + } + + .mr-lg-0 { + margin-right: 0 !important; + } + + .mb-lg-0 { + margin-bottom: 0 !important; + } + + .ml-lg-0 { + margin-left: 0 !important; + } + + .mx-lg-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .my-lg-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .m-lg-1 { + margin: 1rem 1rem !important; + } + + .mt-lg-1 { + margin-top: 1rem !important; + } + + .mr-lg-1 { + margin-right: 1rem !important; + } + + .mb-lg-1 { + margin-bottom: 1rem !important; + } + + .ml-lg-1 { + margin-left: 1rem !important; + } + + .mx-lg-1 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .my-lg-1 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .m-lg-2 { + margin: 1.5rem 1.5rem !important; + } + + .mt-lg-2 { + margin-top: 1.5rem !important; + } + + .mr-lg-2 { + margin-right: 1.5rem !important; + } + + .mb-lg-2 { + margin-bottom: 1.5rem !important; + } + + .ml-lg-2 { + margin-left: 1.5rem !important; + } + + .mx-lg-2 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .my-lg-2 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .m-lg-3 { + margin: 3rem 3rem !important; + } + + .mt-lg-3 { + margin-top: 3rem !important; + } + + .mr-lg-3 { + margin-right: 3rem !important; + } + + .mb-lg-3 { + margin-bottom: 3rem !important; + } + + .ml-lg-3 { + margin-left: 3rem !important; + } + + .mx-lg-3 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .my-lg-3 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } +} + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 0 !important; + } + + .mt-xl-0 { + margin-top: 0 !important; + } + + .mr-xl-0 { + margin-right: 0 !important; + } + + .mb-xl-0 { + margin-bottom: 0 !important; + } + + .ml-xl-0 { + margin-left: 0 !important; + } + + .mx-xl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .my-xl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .m-xl-1 { + margin: 1rem 1rem !important; + } + + .mt-xl-1 { + margin-top: 1rem !important; + } + + .mr-xl-1 { + margin-right: 1rem !important; + } + + .mb-xl-1 { + margin-bottom: 1rem !important; + } + + .ml-xl-1 { + margin-left: 1rem !important; + } + + .mx-xl-1 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .my-xl-1 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .m-xl-2 { + margin: 1.5rem 1.5rem !important; + } + + .mt-xl-2 { + margin-top: 1.5rem !important; + } + + .mr-xl-2 { + margin-right: 1.5rem !important; + } + + .mb-xl-2 { + margin-bottom: 1.5rem !important; + } + + .ml-xl-2 { + margin-left: 1.5rem !important; + } + + .mx-xl-2 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .my-xl-2 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .m-xl-3 { + margin: 3rem 3rem !important; + } + + .mt-xl-3 { + margin-top: 3rem !important; + } + + .mr-xl-3 { + margin-right: 3rem !important; + } + + .mb-xl-3 { + margin-bottom: 3rem !important; + } + + .ml-xl-3 { + margin-left: 3rem !important; + } + + .mx-xl-3 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .my-xl-3 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } +} + +/* Padding */ +.pa-0-25 { + padding: 0.25rem 0.25rem !important; +} + +.pt-0-25 { + padding-top: 0.25rem !important; +} + +.pr-0-25 { + padding-right: 0.25rem !important; +} + +.pb-0-25 { + padding-bottom: 0.25rem !important; +} + +.pl-0-25 { + padding-left: 0.25rem !important; +} + +.px-0-25 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} + +.py-0-25 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.pa-0-5 { + padding: 0.5rem 0.5rem !important; +} + +.pt-0-5 { + padding-top: 0.5rem !important; +} + +.pr-0-5 { + padding-right: 0.5rem !important; +} + +.pb-0-5 { + padding-bottom: 0.5rem !important; +} + +.pl-0-5 { + padding-left: 0.5rem !important; +} + +.px-0-5 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} + +.py-0-5 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.pa-0-75 { + padding: 0.75rem 0.75rem !important; +} + +.pt-0-75 { + padding-top: 0.75rem !important; +} + +.pr-0-75 { + padding-right: 0.75rem !important; +} + +.pb-0-75 { + padding-bottom: 0.75rem !important; +} + +.pl-0-75 { + padding-left: 0.75rem !important; +} + +.px-0-75 { + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; +} + +.py-0-75 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +/* ================================================================= + Components +================================================================= */ + +/* Animate.css */ +@media (max-width: 767px) { + .animated { + /* CSS transitions */ + -o-transition-property: none !important; + -moz-transition-property: none !important; + -ms-transition-property: none !important; + -webkit-transition-property: none !important; + transition-property: none !important; + /* CSS transforms */ + -o-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -webkit-transform: none !important; + transform: none !important; + /* CSS animations */ + -webkit-animation: none !important; + -moz-animation: none !important; + -o-animation: none !important; + -ms-animation: none !important; + animation: none !important; + } +} + +/* Jscrollpane */ +.jspPane { + width: 100% !important; +} + +.jspVerticalBar { + right: 4px; + width: 4px; + height: 100%; + background: transparent; +} + +.jspTrack { + background: transparent; + opacity: 0; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.jspContainer:hover .jspTrack { + opacity: 1; +} + +.jspDrag { + border-radius: 0.25rem; +} + +.custom-scroll-light .jspDrag { + background: rgba(255, 255, 255, 0.1); +} + +.custom-scroll-dark .jspDrag { + background: rgba(0, 0, 0, 0.1); +} + +/* jVectorMap */ +.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback { + border-radius: 0; + background: rgba(0, 0, 0, 0.5); + padding: 5px; +} + +.jvectormap-zoomout { + top: 35px; +} + +/* SweetAlert2 */ +.swal2-modal { + border-radius: 0; +} + +/* Toastr */ +#toast-container > div { + border-radius: 0; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +#toast-container > :hover { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.toast-success { + background-color: #43b968; +} + +.toast-error { + background-color: #f44236; +} + +.toast-info { + background-color: #20b9ae; +} + +.toast-warning { + background-color: #f59345; +} + +/* Waves */ +.waves-effect.waves-light .waves-ripple { + background: rgba(255, 255, 255, 0.1); + background: -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 90%); + background: -o-radial-gradient(rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 90%); + background: -moz-radial-gradient(rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 90%); + background: radial-gradient(rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 90%); +} + +.waves-effect.waves-classic.waves-light .waves-ripple { + background: rgba(255, 255, 255, 0.1); +} + +/* ================================================================= + Animations +================================================================= */ + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUp { + -webkit-animation: fadeInUp 1s 1; + -moz-animation: fadeInUp 1s 1; + -ms-animation: fadeInUp 1s 1; + -o-animation: fadeInUp 1s 1; + animation: fadeInUp 1s 1; +} + +@-webkit-keyframes fadeInBottom { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInBottom { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInBottom { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInBottom { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInBottom { + -webkit-animation: fadeInBottom 1s 1; + -moz-animation: fadeInBottom 1s 1; + -ms-animation: fadeInBottom 1s 1; + -o-animation: fadeInBottom 1s 1; + animation: fadeInBottom 1s 1; +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(-20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeft { + -webkit-animation: fadeInLeft 1s 1; + -moz-animation: fadeInLeft 1s 1; + -ms-animation: fadeInLeft 1s 1; + -o-animation: fadeInLeft 1s 1; + animation: fadeInLeft 1s 1; +} + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInRight { + 0% { + opacity: 0; + -moz-transform: translateX(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInRight { + 0% { + opacity: 0; + -o-transform: translateX(20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRight { + -webkit-animation: fadeInRight 1s 1; + -moz-animation: fadeInRight 1s 1; + -ms-animation: fadeInRight 1s 1; + -o-animation: fadeInRight 1s 1; + animation: fadeInRight 1s 1; +} + + +@-webkit-keyframes dashoffset { + 0% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -20px; + } +} + +@-o-keyframes dashoffset { + 0% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -20px; + } +} + +@keyframes dashoffset { + 0% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -20px; + } +} + +@-webkit-keyframes bouncing-stroke { + 0%, 100% { + stroke-width: 5px; + } + 50% { + stroke-width: 10px; + } +} + +@-o-keyframes bouncing-stroke { + 0%, 100% { + stroke-width: 5px; + } + 50% { + stroke-width: 10px; + } +} + +@keyframes bouncing-stroke { + 0%, 100% { + stroke-width: 5px; + } + 50% { + stroke-width: 10px; + } +} + +@-webkit-keyframes exploding-stroke { + 0% { + stroke-width: 2px; + opacity: 1; + } + 100% { + stroke-width: 20px; + opacity: 0; + } +} + +@-o-keyframes exploding-stroke { + 0% { + stroke-width: 2px; + opacity: 1; + } + 100% { + stroke-width: 20px; + opacity: 0; + } +} + +@keyframes exploding-stroke { + 0% { + stroke-width: 2px; + opacity: 1; + } + 100% { + stroke-width: 20px; + opacity: 0; + } +} + +@-webkit-keyframes writing { + 0% { + left: 0 + } + 100% { + left: 6px + } +} + +@-o-keyframes writing { + 0% { + left: 0 + } + 100% { + left: 6px + } +} + +@keyframes writing { + 0% { + left: 0 + } + 100% { + left: 6px + } +} + +@keyframes rotate { + 100%{ transform: rotate(360deg); transform: rotate(360deg); } +} + +@-o-keyframes rotate { + 100%{ -o-transform: rotate(360deg); transform: rotate(360deg); } +} + +@-ms-keyframes rotate { + 100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); } +} + +@-webkit-keyframes rotate { + 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } +} + +@-moz-keyframes rotate { + 100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); } +} + +.navbar { + border-radius: 0px !important; +} +.nav>li>a{ + padding: 0px !important; +} +.nav>li>a:hover{ + background-color: transparent !important; +} +.nav>li>a:link{ + background-color: transparent !important; +} +.nav>li>a>i{ + font-size: 1.6rem !important; +} +@media (max-width: 550px) { + .title_header { + display: none + } +} +@media (max-width: 1024px) { + .form_capture { + padding-left: 0.1rem!important; + padding-right: 0.1rem!important; + } +} + +.carousel-control-next-icon, +.carousel-control-prev-icon { + background-image: linear-gradient(#20b9ae, #20b9ae), linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); + color: red; + font-size: 20px; + opacity:1; +} \ No newline at end of file diff --git a/app/public/css/semantic.min.css b/app/public/css/semantic.min.css new file mode 100644 index 0000000..ceca66d --- /dev/null +++ b/app/public/css/semantic.min.css @@ -0,0 +1,3 @@ +.ui.dropdown{cursor:pointer;position:relative;display:inline-block;outline:0;text-align:left;-webkit-transition:width .1s ease,-webkit-box-shadow .1s ease;transition:width .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,width .1s ease;transition:box-shadow .1s ease,width .1s ease,-webkit-box-shadow .1s ease;-webkit-tap-highlight-color:transparent}.ui.dropdown .menu{cursor:auto;position:absolute;display:none;outline:0;top:100%;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;margin:0;padding:0 0;background:#fff;font-size:1em;text-shadow:none;text-align:left;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15);border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;z-index:11;will-change:transform,opacity}.ui.dropdown .menu>*{white-space:nowrap}.ui.dropdown>input:not(.search):first-child,.ui.dropdown>select{display:none!important}.ui.dropdown>.dropdown.icon{position:relative;width:auto;font-size:.85714286em;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon{width:auto;float:right;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon+.text{margin-right:1em}.ui.dropdown>.text{display:inline-block;-webkit-transition:none;transition:none}.ui.dropdown .menu>.item{position:relative;cursor:pointer;display:block;border:none;height:auto;text-align:left;border-top:none;line-height:1em;color:rgba(0,0,0,.87);padding:.78571429rem 1.14285714rem!important;font-size:1rem;text-transform:none;font-weight:400;-webkit-box-shadow:none;box-shadow:none;-webkit-touch-callout:none}.ui.dropdown .menu>.item:first-child{border-top-width:0}.ui.dropdown .menu .item>[class*="right floated"],.ui.dropdown>.text>[class*="right floated"]{float:right!important;margin-right:0!important;margin-left:1em!important}.ui.dropdown .menu .item>[class*="left floated"],.ui.dropdown>.text>[class*="left floated"]{float:left!important;margin-left:0!important;margin-right:1em!important}.ui.dropdown .menu .item>.flag.floated,.ui.dropdown .menu .item>.icon.floated,.ui.dropdown .menu .item>.image.floated,.ui.dropdown .menu .item>img.floated{margin-top:0}.ui.dropdown .menu>.header{margin:1rem 0 .75rem;padding:0 1.14285714rem;color:rgba(0,0,0,.85);font-size:.78571429em;font-weight:700;text-transform:uppercase}.ui.dropdown .menu>.divider{border-top:1px solid rgba(34,36,38,.1);height:0;margin:.5em 0}.ui.dropdown.dropdown .menu>.input{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;margin:1.14285714rem .78571429rem;min-width:10rem}.ui.dropdown .menu>.header+.input{margin-top:0}.ui.dropdown .menu>.input:not(.transparent) input{padding:.5em 1em}.ui.dropdown .menu>.input:not(.transparent) .button,.ui.dropdown .menu>.input:not(.transparent) .icon,.ui.dropdown .menu>.input:not(.transparent) .label{padding-top:.5em;padding-bottom:.5em}.ui.dropdown .menu>.item>.description,.ui.dropdown>.text>.description{float:right;margin:0 0 0 1em;color:rgba(0,0,0,.4)}.ui.dropdown .menu>.message{padding:.78571429rem 1.14285714rem;font-weight:400}.ui.dropdown .menu>.message:not(.ui){color:rgba(0,0,0,.4)}.ui.dropdown .menu .menu{top:0!important;left:100%;right:auto;margin:0 0 0 -.5em!important;border-radius:.28571429rem!important;z-index:21!important}.ui.dropdown .menu .menu:after{display:none}.ui.dropdown>.text>.flag,.ui.dropdown>.text>.icon,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.icon,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>img{margin-top:0}.ui.dropdown .menu>.item>.flag,.ui.dropdown .menu>.item>.icon,.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>.label,.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.flag,.ui.dropdown>.text>.icon,.ui.dropdown>.text>.image,.ui.dropdown>.text>.label,.ui.dropdown>.text>img{margin-left:0;float:none;margin-right:.78571429rem}.ui.dropdown .menu>.item>.image,.ui.dropdown .menu>.item>img,.ui.dropdown>.text>.image,.ui.dropdown>.text>img{display:inline-block;vertical-align:top;width:auto;margin-top:-.5em;margin-bottom:-.5em;max-height:2em}.ui.dropdown .ui.menu>.item:before,.ui.menu .ui.dropdown .menu>.item:before{display:none}.ui.menu .ui.dropdown .menu .active.item{border-left:none}.ui.buttons>.ui.dropdown:last-child .menu,.ui.menu .right.dropdown.item .menu,.ui.menu .right.menu .dropdown:last-child .menu{left:auto;right:0}.ui.label.dropdown .menu{min-width:100%}.ui.dropdown.icon.button>.dropdown.icon{margin:0}.ui.button.dropdown .menu{min-width:100%}.ui.selection.dropdown{cursor:pointer;word-wrap:break-word;line-height:1em;white-space:normal;outline:0;-webkit-transform:rotateZ(0);transform:rotateZ(0);min-width:14em;min-height:2.71428571em;background:#fff;display:inline-block;padding:.78571429em 2.1em .78571429em 1em;color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;-webkit-transition:width .1s ease,-webkit-box-shadow .1s ease;transition:width .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,width .1s ease;transition:box-shadow .1s ease,width .1s ease,-webkit-box-shadow .1s ease}.ui.selection.dropdown.active,.ui.selection.dropdown.visible{z-index:10}select.ui.dropdown{height:38px;padding:.5em;border:1px solid rgba(34,36,38,.15);visibility:visible}.ui.selection.dropdown>.delete.icon,.ui.selection.dropdown>.dropdown.icon,.ui.selection.dropdown>.search.icon{cursor:pointer;position:absolute;width:auto;height:auto;line-height:1.21428571em;top:.78571429em;right:1em;z-index:3;margin:-.78571429em;padding:.91666667em;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.compact.selection.dropdown{min-width:0}.ui.selection.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch;border-top-width:0!important;width:auto;outline:0;margin:0 -1px;min-width:calc(100% + 2px);width:calc(100% + 2px);border-radius:0 0 .28571429rem .28571429rem;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.selection.dropdown .menu:after,.ui.selection.dropdown .menu:before{display:none}.ui.selection.dropdown .menu>.message{padding:.78571429rem 1.14285714rem}@media only screen and (max-width:767px){.ui.selection.dropdown .menu{max-height:8.01428571rem}}@media only screen and (min-width:768px){.ui.selection.dropdown .menu{max-height:10.68571429rem}}@media only screen and (min-width:992px){.ui.selection.dropdown .menu{max-height:16.02857143rem}}@media only screen and (min-width:1920px){.ui.selection.dropdown .menu{max-height:21.37142857rem}}.ui.selection.dropdown .menu>.item{border-top:1px solid #fafafa;padding:.78571429rem 1.14285714rem!important;white-space:normal;word-wrap:normal}.ui.selection.dropdown .menu>.hidden.addition.item{display:none}.ui.selection.dropdown:hover{border-color:rgba(34,36,38,.35);-webkit-box-shadow:none;box-shadow:none}.ui.selection.active.dropdown{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.dropdown:focus{border-color:#96c8da;-webkit-box-shadow:none;box-shadow:none}.ui.selection.dropdown:focus .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.visible.dropdown>.text:not(.default){font-weight:400;color:rgba(0,0,0,.8)}.ui.selection.active.dropdown:hover{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.selection.active.dropdown:hover .menu{border-color:#96c8da;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15)}.ui.active.selection.dropdown>.dropdown.icon,.ui.visible.selection.dropdown>.dropdown.icon{opacity:'';z-index:3}.ui.active.selection.dropdown{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.active.empty.selection.dropdown{border-radius:.28571429rem!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.active.empty.selection.dropdown .menu{border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.search.dropdown{min-width:''}.ui.search.dropdown>input.search{background:none transparent!important;border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;cursor:text;top:0;left:1px;width:100%;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);padding:inherit}.ui.search.dropdown>input.search{position:absolute;z-index:2}.ui.search.dropdown>.text{cursor:text;position:relative;left:1px;z-index:3}.ui.search.selection.dropdown>input.search{line-height:1.21428571em;padding:.67857143em 2.1em .67857143em 1em}.ui.search.selection.dropdown>span.sizer{line-height:1.21428571em;padding:.67857143em 2.1em .67857143em 1em;display:none;white-space:pre}.ui.search.dropdown.active>input.search,.ui.search.dropdown.visible>input.search{cursor:auto}.ui.search.dropdown.active>.text,.ui.search.dropdown.visible>.text{pointer-events:none}.ui.active.search.dropdown input.search:focus+.text .flag,.ui.active.search.dropdown input.search:focus+.text .icon{opacity:.45}.ui.active.search.dropdown input.search:focus+.text{color:rgba(115,115,115,.87)!important}.ui.search.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch}@media only screen and (max-width:767px){.ui.search.dropdown .menu{max-height:8.01428571rem}}@media only screen and (min-width:768px){.ui.search.dropdown .menu{max-height:10.68571429rem}}@media only screen and (min-width:992px){.ui.search.dropdown .menu{max-height:16.02857143rem}}@media only screen and (min-width:1920px){.ui.search.dropdown .menu{max-height:21.37142857rem}}.ui.multiple.dropdown{padding:.22619048em 2.1em .22619048em .35714286em}.ui.multiple.dropdown .menu{cursor:auto}.ui.multiple.search.dropdown,.ui.multiple.search.dropdown>input.search{cursor:text}.ui.multiple.dropdown>.label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;vertical-align:top;white-space:normal;font-size:1em;padding:.35714286em .78571429em;margin:.14285714rem .28571429rem .14285714rem 0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.multiple.dropdown .dropdown.icon{margin:'';padding:''}.ui.multiple.dropdown>.text{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.dropdown>.label~input.search{margin-left:.14285714em!important}.ui.multiple.dropdown>.label~.text{display:none}.ui.multiple.search.dropdown>.text{display:inline-block;position:absolute;top:0;left:0;padding:inherit;margin:.45238095em 0 .45238095em .64285714em;line-height:1.21428571em}.ui.multiple.search.dropdown>.label~.text{display:none}.ui.multiple.search.dropdown>input.search{position:static;padding:0;max-width:100%;margin:.45238095em 0 .45238095em .64285714em;width:2.2em;line-height:1.21428571em}.ui.inline.dropdown{cursor:pointer;display:inline-block;color:inherit}.ui.inline.dropdown .dropdown.icon{margin:0 .21428571em 0 .21428571em;vertical-align:baseline}.ui.inline.dropdown>.text{font-weight:700}.ui.inline.dropdown .menu{cursor:auto;margin-top:.21428571em;border-radius:.28571429rem}.ui.dropdown .menu .active.item{background:0 0;font-weight:700;color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none;z-index:12}.ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);z-index:13}.ui.loading.dropdown>i.icon{height:1em!important}.ui.loading.selection.dropdown>i.icon{padding:1.5em 1.28571429em!important}.ui.loading.dropdown>i.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.dropdown>i.icon:after{position:absolute;content:'';top:50%;left:50%;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;-webkit-animation:dropdown-spin .6s linear;animation:dropdown-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em}.ui.loading.dropdown.button>i.icon:after,.ui.loading.dropdown.button>i.icon:before{display:none}@-webkit-keyframes dropdown-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes dropdown-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.default.dropdown:not(.button)>.text,.ui.dropdown:not(.button)>.default.text{color:rgba(191,191,191,.87)}.ui.default.dropdown:not(.button)>input:focus~.text,.ui.dropdown:not(.button)>input:focus~.default.text{color:rgba(115,115,115,.87)}.ui.loading.dropdown>.text{-webkit-transition:none;transition:none}.ui.dropdown .loading.menu{display:block;visibility:hidden;z-index:-1}.ui.dropdown>.loading.menu{left:0!important;right:auto!important}.ui.dropdown>.menu .loading.menu{left:100%!important;right:auto!important}.ui.dropdown .menu .selected.item,.ui.dropdown.selected{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.dropdown>.filtered.text{visibility:hidden}.ui.dropdown .filtered.item{display:none!important}.ui.dropdown.error,.ui.dropdown.error>.default.text,.ui.dropdown.error>.text{color:#9f3a38}.ui.selection.dropdown.error{background:#fff6f6;border-color:#e0b4b4}.ui.selection.dropdown.error:hover{border-color:#e0b4b4}.ui.dropdown.error>.menu,.ui.dropdown.error>.menu .menu{border-color:#e0b4b4}.ui.dropdown.error>.menu>.item{color:#9f3a38}.ui.multiple.selection.error.dropdown>.label{border-color:#e0b4b4}.ui.dropdown.error>.menu>.item:hover{background-color:#fff2f2}.ui.dropdown.error>.menu .active.item{background-color:#fdcfcf}.ui.dropdown>.clear.dropdown.icon{opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.dropdown>.clear.dropdown.icon:hover{opacity:1}.ui.disabled.dropdown,.ui.dropdown .menu>.disabled.item{cursor:default;pointer-events:none;opacity:.45}.ui.dropdown .menu{left:0}.ui.dropdown .menu .right.menu,.ui.dropdown .right.menu>.menu{left:100%!important;right:auto!important;border-radius:.28571429rem!important}.ui.dropdown>.left.menu{left:auto!important;right:0!important}.ui.dropdown .menu .left.menu,.ui.dropdown>.left.menu .menu{left:auto;right:100%;margin:0 -.5em 0 0!important;border-radius:.28571429rem!important}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon,.ui.dropdown .left.menu .item .dropdown.icon{width:auto;float:left;margin:0}.ui.dropdown .item .left.dropdown.icon+.text,.ui.dropdown .left.menu .item .dropdown.icon+.text{margin-left:1em;margin-right:0}.ui.upward.dropdown>.menu{top:auto;bottom:100%;-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.08);box-shadow:0 0 3px 0 rgba(0,0,0,.08);border-radius:.28571429rem .28571429rem 0 0}.ui.dropdown .upward.menu{top:auto!important;bottom:0!important}.ui.simple.upward.active.dropdown,.ui.simple.upward.dropdown:hover{border-radius:.28571429rem .28571429rem 0 0!important}.ui.upward.dropdown.button:not(.pointing):not(.floating).active{border-radius:.28571429rem .28571429rem 0 0}.ui.upward.selection.dropdown .menu{border-top-width:1px!important;border-bottom-width:0!important;-webkit-box-shadow:0 -2px 3px 0 rgba(0,0,0,.08);box-shadow:0 -2px 3px 0 rgba(0,0,0,.08)}.ui.upward.selection.dropdown:hover{-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.05);box-shadow:0 0 2px 0 rgba(0,0,0,.05)}.ui.active.upward.selection.dropdown{border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.selection.dropdown.visible{-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.08);box-shadow:0 0 3px 0 rgba(0,0,0,.08);border-radius:0 0 .28571429rem .28571429rem!important}.ui.upward.active.selection.dropdown:hover{-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.05);box-shadow:0 0 3px 0 rgba(0,0,0,.05)}.ui.upward.active.selection.dropdown:hover .menu{-webkit-box-shadow:0 -2px 3px 0 rgba(0,0,0,.08);box-shadow:0 -2px 3px 0 rgba(0,0,0,.08)}.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{overflow-x:hidden;overflow-y:auto}.ui.scrolling.dropdown .menu{overflow-x:hidden;overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch;min-width:100%!important;width:auto!important}.ui.dropdown .scrolling.menu{position:static;overflow-y:auto;border:none;-webkit-box-shadow:none!important;box-shadow:none!important;border-radius:0!important;margin:0!important;min-width:100%!important;width:auto!important;border-top:1px solid rgba(34,36,38,.15)}.ui.dropdown .scrolling.menu>.item.item.item,.ui.scrolling.dropdown .menu .item.item.item{border-top:none}.ui.dropdown .scrolling.menu .item:first-child,.ui.scrolling.dropdown .menu .item:first-child{border-top:none}.ui.dropdown>.animating.menu .scrolling.menu,.ui.dropdown>.visible.menu .scrolling.menu{display:block}@media all and (-ms-high-contrast:none){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{min-width:calc(100% - 17px)}}@media only screen and (max-width:767px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:10.28571429rem}}@media only screen and (min-width:768px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:15.42857143rem}}@media only screen and (min-width:992px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}}@media only screen and (min-width:1920px){.ui.dropdown .scrolling.menu,.ui.scrolling.dropdown .menu{max-height:20.57142857rem}}.ui.simple.dropdown .menu:after,.ui.simple.dropdown .menu:before{display:none}.ui.simple.dropdown .menu{position:absolute;display:block;overflow:hidden;top:-9999px!important;opacity:0;width:0;height:0;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.simple.active.dropdown,.ui.simple.dropdown:hover{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.simple.active.dropdown>.menu,.ui.simple.dropdown:hover>.menu{overflow:visible;width:auto;height:auto;top:100%!important;opacity:1}.ui.simple.dropdown:hover>.menu>.item:hover>.menu,.ui.simple.dropdown>.menu>.item:active>.menu{overflow:visible;width:auto;height:auto;top:0!important;left:100%!important;opacity:1}.ui.simple.disabled.dropdown:hover .menu{display:none;height:0;width:0;overflow:hidden}.ui.simple.visible.dropdown>.menu{display:block}.ui.fluid.dropdown{display:block;width:100%;min-width:0}.ui.fluid.dropdown>.dropdown.icon{float:right}.ui.floating.dropdown .menu{left:0;right:auto;-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)!important;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)!important;border-radius:.28571429rem!important}.ui.floating.dropdown>.menu{margin-top:.5em!important;border-radius:.28571429rem!important}.ui.pointing.dropdown>.menu{top:100%;margin-top:.78571429rem;border-radius:.28571429rem}.ui.pointing.dropdown>.menu:after{display:block;position:absolute;pointer-events:none;content:'';visibility:visible;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:.5em;height:.5em;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);background:#fff;z-index:2}.ui.pointing.dropdown>.menu:after{top:-.25em;left:50%;margin:0 0 0 -.25em}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu{top:100%;bottom:auto;left:0;right:auto;margin:1em 0 0}.ui.top.left.pointing.dropdown>.menu:after{top:-.25em;left:1em;right:auto;margin:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.top.right.pointing.dropdown>.menu{top:100%;bottom:auto;right:0;left:auto;margin:1em 0 0}.ui.top.pointing.dropdown>.left.menu:after,.ui.top.right.pointing.dropdown>.menu:after{top:-.25em;left:auto!important;right:1em!important;margin:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.pointing.dropdown>.menu{top:0;left:100%;right:auto;margin:0 0 0 1em}.ui.left.pointing.dropdown>.menu:after{top:1em;left:-.25em;margin:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu{left:auto!important;right:100%!important;margin:0 1em 0 0}.ui.left:not(.top):not(.bottom).pointing.dropdown>.left.menu:after{top:1em;left:auto;right:-.25em;margin:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.ui.right.pointing.dropdown>.menu{top:0;left:auto;right:100%;margin:0 1em 0 0}.ui.right.pointing.dropdown>.menu:after{top:1em;left:auto;right:-.25em;margin:0;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.ui.bottom.pointing.dropdown>.menu{top:auto;bottom:100%;left:0;right:auto;margin:0 0 1em}.ui.bottom.pointing.dropdown>.menu:after{top:auto;bottom:-.25em;right:auto;margin:0;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.ui.bottom.pointing.dropdown>.menu .menu{top:auto!important;bottom:0!important}.ui.bottom.left.pointing.dropdown>.menu{left:0;right:auto}.ui.bottom.left.pointing.dropdown>.menu:after{left:1em;right:auto}.ui.bottom.right.pointing.dropdown>.menu{right:0;left:auto}.ui.bottom.right.pointing.dropdown>.menu:after{left:auto;right:1em}.ui.pointing.upward.dropdown .menu,.ui.top.pointing.upward.dropdown .menu{top:auto!important;bottom:100%!important;margin:0 0 .78571429rem;border-radius:.28571429rem}.ui.pointing.upward.dropdown .menu:after,.ui.top.pointing.upward.dropdown .menu:after{top:100%!important;bottom:auto!important;-webkit-box-shadow:1px 1px 0 0 rgba(34,36,38,.15);box-shadow:1px 1px 0 0 rgba(34,36,38,.15);margin:-.25em 0 0}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 1em 0 0}.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after{top:auto!important;bottom:0!important;margin:0 0 1em 0;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu{top:auto!important;bottom:0!important;margin:0 0 0 1em}.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after{top:auto!important;bottom:0!important;margin:0 0 1em 0;-webkit-box-shadow:-1px -1px 0 0 rgba(34,36,38,.15);box-shadow:-1px -1px 0 0 rgba(34,36,38,.15)}@font-face{font-family:Dropdown;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff');font-weight:400;font-style:normal}.ui.dropdown>.dropdown.icon{font-family:Dropdown;line-height:1;height:1em;width:1.23em;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.ui.dropdown>.dropdown.icon{width:auto}.ui.dropdown>.dropdown.icon:before{content:'\f0d7'}.ui.dropdown .menu .item .dropdown.icon:before{content:'\f0da'}.ui.dropdown .item .left.dropdown.icon:before,.ui.dropdown .left.menu .item .dropdown.icon:before{content:"\f0d9"}.ui.vertical.menu .dropdown.item>.dropdown.icon:before{content:"\f0da"}.ui.dropdown>.clear.icon:before{content:"\f00d"} + +.transition{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animating.transition{-webkit-backface-visibility:hidden;backface-visibility:hidden;visibility:visible!important}.loading.transition{position:absolute;top:-99999px;left:-99999px}.hidden.transition{display:none;visibility:hidden}.visible.transition{display:block!important;visibility:visible!important}.disabled.transition{-webkit-animation-play-state:paused;animation-play-state:paused}.looping.transition{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.transition.browse{-webkit-animation-duration:.5s;animation-duration:.5s}.transition.browse.in{-webkit-animation-name:browseIn;animation-name:browseIn}.transition.browse.left.out,.transition.browse.out{-webkit-animation-name:browseOutLeft;animation-name:browseOutLeft}.transition.browse.right.out{-webkit-animation-name:browseOutRight;animation-name:browseOutRight}@-webkit-keyframes browseIn{0%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1}10%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{-webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);z-index:999}}@keyframes browseIn{0%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1}10%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{-webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);z-index:999}}@-webkit-keyframes browseOutLeft{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;-webkit-transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutLeft{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;-webkit-transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@-webkit-keyframes browseOutRight{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;-webkit-transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutRight{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;-webkit-transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}.drop.transition{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:cubic-bezier(.34,1.61,.7,1);animation-timing-function:cubic-bezier(.34,1.61,.7,1)}.drop.transition.in{-webkit-animation-name:dropIn;animation-name:dropIn}.drop.transition.out{-webkit-animation-name:dropOut;animation-name:dropOut}@-webkit-keyframes dropIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes dropIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes dropOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes dropOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}.transition.fade.in{-webkit-animation-name:fadeIn;animation-name:fadeIn}.transition[class*="fade up"].in{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.transition[class*="fade down"].in{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}.transition[class*="fade left"].in{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.transition[class*="fade right"].in{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.transition.fade.out{-webkit-animation-name:fadeOut;animation-name:fadeOut}.transition[class*="fade up"].out{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}.transition[class*="fade down"].out{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}.transition[class*="fade left"].out{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.transition[class*="fade right"].out{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(10%);transform:translateX(10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(10%);transform:translateX(10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-10%);transform:translateX(-10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-10%);transform:translateX(-10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-5%);transform:translateY(-5%)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-5%);transform:translateY(-5%)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(5%);transform:translateX(5%)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(5%);transform:translateX(5%)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-5%);transform:translateX(-5%)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-5%);transform:translateX(-5%)}}.flip.transition.in,.flip.transition.out{-webkit-animation-duration:.6s;animation-duration:.6s}.horizontal.flip.transition.in{-webkit-animation-name:horizontalFlipIn;animation-name:horizontalFlipIn}.horizontal.flip.transition.out{-webkit-animation-name:horizontalFlipOut;animation-name:horizontalFlipOut}.vertical.flip.transition.in{-webkit-animation-name:verticalFlipIn;animation-name:verticalFlipIn}.vertical.flip.transition.out{-webkit-animation-name:verticalFlipOut;animation-name:verticalFlipOut}@-webkit-keyframes horizontalFlipIn{0%{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}}@keyframes horizontalFlipIn{0%{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}}@-webkit-keyframes verticalFlipIn{0%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}}@keyframes verticalFlipIn{0%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}}@-webkit-keyframes horizontalFlipOut{0%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}}@keyframes horizontalFlipOut{0%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}}@-webkit-keyframes verticalFlipOut{0%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}}@keyframes verticalFlipOut{0%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}}.scale.transition.in{-webkit-animation-name:scaleIn;animation-name:scaleIn}.scale.transition.out{-webkit-animation-name:scaleOut;animation-name:scaleOut}@-webkit-keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes scaleOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes scaleOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}}.transition.fly{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}.transition.fly.in{-webkit-animation-name:flyIn;animation-name:flyIn}.transition[class*="fly up"].in{-webkit-animation-name:flyInUp;animation-name:flyInUp}.transition[class*="fly down"].in{-webkit-animation-name:flyInDown;animation-name:flyInDown}.transition[class*="fly left"].in{-webkit-animation-name:flyInLeft;animation-name:flyInLeft}.transition[class*="fly right"].in{-webkit-animation-name:flyInRight;animation-name:flyInRight}.transition.fly.out{-webkit-animation-name:flyOut;animation-name:flyOut}.transition[class*="fly up"].out{-webkit-animation-name:flyOutUp;animation-name:flyOutUp}.transition[class*="fly down"].out{-webkit-animation-name:flyOutDown;animation-name:flyOutDown}.transition[class*="fly left"].out{-webkit-animation-name:flyOutLeft;animation-name:flyOutLeft}.transition[class*="fly right"].out{-webkit-animation-name:flyOutRight;animation-name:flyOutRight}@-webkit-keyframes flyIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes flyIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes flyInUp{0%{opacity:0;-webkit-transform:translate3d(0,1500px,0);transform:translate3d(0,1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes flyInUp{0%{opacity:0;-webkit-transform:translate3d(0,1500px,0);transform:translate3d(0,1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes flyInDown{0%{opacity:0;-webkit-transform:translate3d(0,-1500px,0);transform:translate3d(0,-1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInDown{0%{opacity:0;-webkit-transform:translate3d(0,-1500px,0);transform:translate3d(0,-1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyInLeft{0%{opacity:0;-webkit-transform:translate3d(1500px,0,0);transform:translate3d(1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInLeft{0%{opacity:0;-webkit-transform:translate3d(1500px,0,0);transform:translate3d(1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyInRight{0%{opacity:0;-webkit-transform:translate3d(-1500px,0,0);transform:translate3d(-1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInRight{0%{opacity:0;-webkit-transform:translate3d(-1500px,0,0);transform:translate3d(-1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes flyOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes flyOutUp{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes flyOutUp{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes flyOutDown{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes flyOutDown{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@-webkit-keyframes flyOutRight{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes flyOutRight{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes flyOutLeft{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes flyOutLeft{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.transition.slide.in,.transition[class*="slide down"].in{-webkit-animation-name:slideInY;animation-name:slideInY;-webkit-transform-origin:top center;transform-origin:top center}.transition[class*="slide up"].in{-webkit-animation-name:slideInY;animation-name:slideInY;-webkit-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="slide left"].in{-webkit-animation-name:slideInX;animation-name:slideInX;-webkit-transform-origin:center right;transform-origin:center right}.transition[class*="slide right"].in{-webkit-animation-name:slideInX;animation-name:slideInX;-webkit-transform-origin:center left;transform-origin:center left}.transition.slide.out,.transition[class*="slide down"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;-webkit-transform-origin:top center;transform-origin:top center}.transition[class*="slide up"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;-webkit-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="slide left"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;-webkit-transform-origin:center right;transform-origin:center right}.transition[class*="slide right"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;-webkit-transform-origin:center left;transform-origin:center left}@-webkit-keyframes slideInY{0%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}100%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes slideInY{0%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}100%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@-webkit-keyframes slideInX{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}100%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes slideInX{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}100%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes slideOutY{0%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}100%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}@keyframes slideOutY{0%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}100%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}@-webkit-keyframes slideOutX{0%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}100%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}}@keyframes slideOutX{0%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}100%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}}.transition.swing{-webkit-animation-duration:.8s;animation-duration:.8s}.transition[class*="swing down"].in{-webkit-animation-name:swingInX;animation-name:swingInX;-webkit-transform-origin:top center;transform-origin:top center}.transition[class*="swing up"].in{-webkit-animation-name:swingInX;animation-name:swingInX;-webkit-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="swing left"].in{-webkit-animation-name:swingInY;animation-name:swingInY;-webkit-transform-origin:center right;transform-origin:center right}.transition[class*="swing right"].in{-webkit-animation-name:swingInY;animation-name:swingInY;-webkit-transform-origin:center left;transform-origin:center left}.transition.swing.out,.transition[class*="swing down"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;-webkit-transform-origin:top center;transform-origin:top center}.transition[class*="swing up"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;-webkit-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="swing left"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;-webkit-transform-origin:center right;transform-origin:center right}.transition[class*="swing right"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;-webkit-transform-origin:center left;transform-origin:center left}@-webkit-keyframes swingInX{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateX(15deg);transform:perspective(1000px) rotateX(15deg)}80%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}100%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}}@keyframes swingInX{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateX(15deg);transform:perspective(1000px) rotateX(15deg)}80%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}100%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}}@-webkit-keyframes swingInY{0%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateY(-17.5deg);transform:perspective(1000px) rotateY(-17.5deg)}80%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}100%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}}@keyframes swingInY{0%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateY(-17.5deg);transform:perspective(1000px) rotateY(-17.5deg)}80%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}100%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}}@-webkit-keyframes swingOutX{0%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}40%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}60%{-webkit-transform:perspective(1000px) rotateX(17.5deg);transform:perspective(1000px) rotateX(17.5deg)}80%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes swingOutX{0%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}40%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}60%{-webkit-transform:perspective(1000px) rotateX(17.5deg);transform:perspective(1000px) rotateX(17.5deg)}80%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@-webkit-keyframes swingOutY{0%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}40%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}60%{-webkit-transform:perspective(1000px) rotateY(-10deg);transform:perspective(1000px) rotateY(-10deg)}80%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}}@keyframes swingOutY{0%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}40%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}60%{-webkit-transform:perspective(1000px) rotateY(-10deg);transform:perspective(1000px) rotateY(-10deg)}80%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}}.transition.zoom.in{-webkit-animation-name:zoomIn;animation-name:zoomIn}.transition.zoom.out{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomIn{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomIn{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}}.flash.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:flash;animation-name:flash}.shake.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:shake;animation-name:shake}.bounce.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:bounce;animation-name:bounce}.tada.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:tada;animation-name:tada}.pulse.transition{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-name:pulse;animation-name:pulse}.jiggle.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:jiggle;animation-name:jiggle}.transition.glow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:cubic-bezier(.19,1,.22,1);animation-timing-function:cubic-bezier(.19,1,.22,1)}.transition.glow{-webkit-animation-name:glow;animation-name:glow}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-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);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)}}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-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%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.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);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.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)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-webkit-keyframes jiggle{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jiggle{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes glow{0%{background-color:#fcfcfd}30%{background-color:#fff6cd}100%{background-color:#fcfcfd}}@keyframes glow{0%{background-color:#fcfcfd}30%{background-color:#fff6cd}100%{background-color:#fcfcfd}} \ No newline at end of file diff --git a/app/public/img/photo-placeholder.png b/app/public/img/photo-placeholder.png new file mode 100644 index 0000000..834976f Binary files /dev/null and b/app/public/img/photo-placeholder.png differ diff --git a/app/public/index.html b/app/public/index.html index 4aebba2..38f03d5 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -33,6 +33,7 @@ + FSI diff --git a/app/src/App.css b/app/src/App.css index bb65a2d..476589c 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -276,3 +276,45 @@ button.close:hover { height: 50px !important; font-weight: bold !important; } + +@media screen and (max-width: 1400px) { + .col_xxl-4 { + -webkit-box-flex: 0!important; + flex: 0 0 33.33333%!important; + max-width: 33.33333%!important; + } + .col_xxl-6 { + -webkit-box-flex: 0!important; + flex: 0 0 50%!important; + max-width: 50%!important; + } +} + +/* .box { + position: relative; + display: block; + margin-bottom: 0.5rem; + border: 1px solid rgba(0, 0, 0, 0.125); +} + +.box-block { + padding: 1.25rem; +} */ + +.ant-card-body { + padding: 10px!important; +} + +@media (min-width: 768px) { + .hide_desktop { + display: none; + } + .modal-90w { + width: 90%; + max-width: none!important; + } +} + +.carousel-control-next-icon, .carousel-control-prev-icon { + background-image: none; +} \ No newline at end of file diff --git a/app/src/App.js b/app/src/App.js index d56de06..7d65998 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -1,6 +1,7 @@ import React from 'react' import ListItem from './components/List/ListItem'; import Login from './components/Login/Login'; +import SearchImage from './components/SearchImg/SearchImage'; import 'antd/dist/antd.css'; import "./App.css"; import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom'; @@ -13,6 +14,7 @@ function App() { } /> } /> + } /> } /> diff --git a/app/src/components/SearchImg/SearchImage.js b/app/src/components/SearchImg/SearchImage.js new file mode 100644 index 0000000..dc8e250 --- /dev/null +++ b/app/src/components/SearchImg/SearchImage.js @@ -0,0 +1,592 @@ +import React, { Component } from 'react'; +import swal from 'sweetalert'; +import { Redirect } from 'react-router-dom'; +import $ from 'jquery'; +import Pagination from "react-js-pagination"; +import moment from 'moment'; +import { Row, Col, Image, ProgressBar } from 'react-bootstrap'; +import { PulseLoader } from 'react-spinners'; +// import { css } from '@emotion/core'; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +// import ReactTooltip from 'react-tooltip' +import ReactFileReader from 'react-file-reader'; +import Parser from 'html-react-parser'; +import { HOST } from '../../config/index'; +import { Card, Avatar, Image as ImageAntd } from 'antd'; +import { UserOutlined } from '@ant-design/icons'; +// import ModalViewHistory from '../../modal/ModalViewHistory'; + +// const override = css` +// display: block; +// margin: 0 auto; +// border-color: red; +// `; + + +class SearchImage extends Component { + constructor(props) { + super(props); + + this.state = { + // isLogin: Store.getState().isLogin.isLogin, + // access_token: Store.getState().isLogin.access_token, + // box_engine_cf: Store.getState().boxai.box_engine_cf[0], + loading: false, + listHistory: [], + crrHistory: [], + dataVerification: null, + filesImagePerson: "", + page_num: 1, + page_size: 10, + total_count: 0, + // startDate: new Date(moment().format("YYYY-MM-DD") + ' 00:00:00'), + // endDate: new Date(moment().format("YYYY-MM-DD") + ' 23:59:59'), + valueRes: 1, + threshold: 50, + similarity: 70, + value: 0, + selectedEncoding: [], + boxs: [], + slides: [], + encodings: [], + plugins: [], + nimages: [], + startDate: new Date(), + endDate: new Date(), + showModal: false, + crrdatainfo: null, + offset: 0, + showFirst: 0, + showLast: 0, + totalLength: 0, + }; + this.onchange = this.onchange.bind(this); + this.closeModal = this.closeModal.bind(this); + + var itemsPerPage = 1; + if ($(window).width() < 768) { + itemsPerPage = 6 + } else { + itemsPerPage = 6 + } + this.itemsPerPage = itemsPerPage; + // Store.subscribe(() => { + // if (Store.getState().boxai.box_engine_cf.length !== 0) { + // this.setState({ + // ...this.state, + // loading: false, + // valueRes: 1, + // listHistory: [], + // crrHistory: [], + // // isLogin: Store.getState().isLogin.isLogin, + // // access_token: Store.getState().isLogin.access_token, + // // box_engine_cf: Store.getState().boxai.box_engine_cf[0], + // dataImageMoveChange: null, + // }); + // } else { + // this.setState({ + // ...this.state, + // loading: false, + // valueRes: 1, + // listHistory: [], + // crrHistory: [], + // // isLogin: Store.getState().isLogin.isLogin, + // // access_token: Store.getState().isLogin.access_token, + // // box_engine_cf: Store.getState().boxai.box_engine_cf[0], + // dataImageMoveChange: null, + // }); + // } + // }); + + } + componentDidMount() { + window.$('.carousel').carousel({ + interval: false, + wrap: false + }).on('slid.bs.carousel', function () { + var curSlide = window.$('.active'); + if (curSlide.is(':first-child')) { + window.$('.carousel-control-prev').hide(); + window.$('.carousel-control-next').show(); + } else if (curSlide.is(':last-child')) { + window.$('.carousel-control-prev').show(); + window.$('.carousel-control-next').hide(); + } else { + window.$('.carousel-control-prev').show(); + window.$('.carousel-control-next').show(); + } + }); + + } + onchange(value) { + this.setState({ value }); + } + closeModal() { + this.setState({ + showModal: false, + }) + } + handlePrevChange() { + var index = this.state.value; + index = index - 1 + if (index > 0) + this.setState({ + pageNumber: 1, + value: index, + selectedEncoding: this.state.encodings[index], + + }, () => { + this.getPerson() + }) + + + } + handleNextChange() { + var index = this.state.value; + if (index < (this.state.encodings.length - 1)) + index = index + 1 + this.setState({ + pageNumber: 1, + value: index, + selectedEncoding: this.state.encodings[index], + + }, () => { + this.getPerson() + }) + + + } + changeFace(index) { + + this.setState({ + pageNumber: 1, + value: index, + selectedEncoding: this.state.encodings[index], + + }, () => { + this.getPerson() + }) + + } + + + getPerson() { + // if (this.state.box_engine_cf === undefined || !this.state.filesImagePerson) return; + if (!this.state.valueRes || !this.state.threshold) { + return swal('Cảnh báo!', 'Vui lòng điền đầy đủ các trường', 'warning'); + } + + this.setState({ + loading: true, + }); + fetch(`${HOST}/api/search_people`, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM' + }, + body: JSON.stringify({ + encodings: this.state.selectedEncoding, + image: "", + threshold: parseInt(this.state.threshold) / 100, + result_number: this.state.valueRes, + }) + }).then((response) => { + return response.json() + }).then((rs) => { + console.log(rs) + if (rs.status === 10000) { + var data = rs.data; + this.setState({ + listHistory: data, + loading: false, + // total_count: rs.count, + }); + this.FilterSearch(this.state.page_num) + } + else { + swal("Lỗi!", "Ảnh không hợp lệ!", "error"); + this.setState({ + listHistory: [], + loading: false, + total_count: 0, + }); + } + }).catch((error) => { + if (error) { + console.log(error) + swal("Lỗi!", "Ảnh không hợp lệ!", "error"); + this.setState({ + listHistory: [], + loading: false, + total_count: 0, + }); + } + }) + } + + + + getFaces() { + var image_base64; + image_base64 = this.state.filesImagePerson.replace('data:image/png;base64,', ''); + image_base64 = image_base64.replace('data:image/jpg;base64,', ''); + image_base64 = image_base64.replace('data:image/jpeg;base64,', ''); + + fetch(`${HOST}/api/face_images/faces`, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + image: image_base64 + }) + }).then((response) => { + return response.json() + }).then((rs) => { + if (rs.status === 10000) { + var boxs = [] + var slides = [] + var item = "" + var encodings = [] + rs.imgs.map((value, index) => { + var item_active = "" + // var item_inactive = "" + if (index === 0) { + item += "