You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4346 lines
86 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. /*
  2. Template Name: Webadmin
  3. File: Main Css File
  4. */
  5. /* Google Fonts */
  6. @import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700|Roboto:500|Crete+Round:400i');
  7. /*
  8. - Buttons
  9. - Panels
  10. - Portlets
  11. - Checkbox and Radio
  12. - Progressbars
  13. - Tables
  14. - Form Elements
  15. - Calendar
  16. - Widgets
  17. - Sweet Alerts
  18. - Maps
  19. - Email
  20. - Timeline
  21. - Charts
  22. - Count Down
  23. - Gallery
  24. - Maintenance
  25. - Account Pages
  26. - Invoice
  27. - Menu
  28. */
  29. /* ==============
  30. General
  31. ===================*/
  32. html {
  33. overflow-x: hidden;
  34. position: relative;
  35. min-height: 100%;
  36. background: #f5f5f5;
  37. }
  38. h1,
  39. h2,
  40. h3,
  41. h4,
  42. h5,
  43. h6 {
  44. color: #2a323c;
  45. font-weight: bold;
  46. margin: 10px 0;
  47. }
  48. h1 {
  49. line-height: 43px;
  50. }
  51. h2 {
  52. line-height: 35px;
  53. }
  54. h3 {
  55. line-height: 30px;
  56. }
  57. h3 small {
  58. color: #444444;
  59. }
  60. h4 {
  61. line-height: 22px;
  62. }
  63. h4 small {
  64. color: #444444;
  65. }
  66. h5 small {
  67. color: #444444;
  68. }
  69. * {
  70. outline: none !important;
  71. }
  72. a:hover {
  73. outline: 0;
  74. text-decoration: none;
  75. }
  76. a:active {
  77. outline: 0;
  78. text-decoration: none;
  79. }
  80. a:focus {
  81. outline: 0;
  82. text-decoration: none;
  83. }
  84. .container {
  85. width: auto;
  86. }
  87. .container-alt {
  88. margin-left: auto;
  89. margin-right: auto;
  90. padding-left: 15px;
  91. padding-right: 15px;
  92. }
  93. .footer {
  94. background-color: #f9f9f9;
  95. border-top: 1px solid rgba(0, 0, 0, 0.05);
  96. bottom: 0px;
  97. color: #898989;
  98. text-align: center !important;
  99. padding: 10px;
  100. position: absolute;
  101. right: 0;
  102. left: 240px;
  103. }
  104. .footer p {
  105. margin: 0;
  106. }
  107. #wrapper {
  108. height: 100%;
  109. overflow: hidden;
  110. width: 100%;
  111. }
  112. .page {
  113. bottom: 0;
  114. left: 0;
  115. right: 0;
  116. top: 0;
  117. }
  118. .social-links li a {
  119. -webkit-border-radius: 50%;
  120. background: #0053ab;
  121. border-radius: 50%;
  122. color: #ffffff;
  123. display: inline-block;
  124. height: 30px;
  125. line-height: 30px;
  126. text-align: center;
  127. width: 30px;
  128. }
  129. /* ==============
  130. Bootstrap-custom
  131. ===================*/
  132. .row {
  133. margin-right: -10px;
  134. margin-left: -10px;
  135. }
  136. .col-lg-1,
  137. .col-lg-10,
  138. .col-lg-11,
  139. .col-lg-12,
  140. .col-lg-2,
  141. .col-lg-3,
  142. .col-lg-4,
  143. .col-lg-5,
  144. .col-lg-6,
  145. .col-lg-7,
  146. .col-lg-8,
  147. .col-lg-9,
  148. .col-md-1,
  149. .col-md-10,
  150. .col-md-11,
  151. .col-md-12,
  152. .col-md-2,
  153. .col-md-3,
  154. .col-md-4,
  155. .col-md-5,
  156. .col-md-6,
  157. .col-md-7,
  158. .col-md-8,
  159. .col-md-9,
  160. .col-sm-1,
  161. .col-sm-10,
  162. .col-sm-11,
  163. .col-sm-12,
  164. .col-sm-2,
  165. .col-sm-3,
  166. .col-sm-4,
  167. .col-sm-5,
  168. .col-sm-6,
  169. .col-sm-7,
  170. .col-sm-8,
  171. .col-sm-9,
  172. .col-xs-1,
  173. .col-xs-10,
  174. .col-xs-11,
  175. .col-xs-12,
  176. .col-xs-2,
  177. .col-xs-3,
  178. .col-xs-4,
  179. .col-xs-5,
  180. .col-xs-6,
  181. .col-xs-7,
  182. .col-xs-8,
  183. .col-xs-9 {
  184. padding-left: 10px;
  185. padding-right: 10px;
  186. }
  187. .breadcrumb {
  188. background-color: transparent;
  189. margin-bottom: 15px;
  190. margin-top: 5px;
  191. }
  192. .dropdown-menu {
  193. padding: 4px 0;
  194. border: 0;
  195. }
  196. .dropdown-menu > li > a {
  197. padding: 6px 20px;
  198. }
  199. .bg-primary {
  200. background-color: #0053ab !important;
  201. }
  202. .bg-success {
  203. background-color: #5cb45b !important;
  204. }
  205. .bg-info {
  206. background-color: #04a2b3 !important;
  207. }
  208. .bg-warning {
  209. background-color: #f7b543 !important;
  210. }
  211. .bg-danger {
  212. background-color: #f03154 !important;
  213. }
  214. .bg-muted {
  215. background-color: #d0d0d0 !important;
  216. }
  217. .bg-inverse {
  218. background-color: #212121 !important;
  219. }
  220. .bg-purple {
  221. background-color: #715ded !important;
  222. }
  223. .bg-pink {
  224. background-color: #e866ff !important;
  225. }
  226. .bg-white {
  227. background-color: #ffffff !important;
  228. }
  229. .text-white {
  230. color: #ffffff;
  231. }
  232. .text-danger {
  233. color: #f03154;
  234. }
  235. .text-muted {
  236. color: #898989;
  237. }
  238. .text-primary {
  239. color: #0053ab;
  240. }
  241. .text-warning {
  242. color: #f7b543;
  243. }
  244. .text-success {
  245. color: #5cb45b;
  246. }
  247. .text-info {
  248. color: #04a2b3;
  249. }
  250. .text-pink {
  251. color: #e866ff;
  252. }
  253. .text-purple {
  254. color: #715ded;
  255. }
  256. .text-dark {
  257. color: #2a323c !important;
  258. }
  259. .form-control {
  260. -moz-border-radius: 2px;
  261. -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  262. -webkit-border-radius: 2px;
  263. -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  264. background-color: #fafafa;
  265. border-radius: 2px;
  266. border: 1px solid #eeeeee;
  267. box-shadow: none;
  268. height: 38px;
  269. color: rgba(0, 0, 0, 0.6);
  270. font-size: 14px;
  271. }
  272. .form-control:focus {
  273. background: #ffffff;
  274. border: 1px solid #e0e0e0;
  275. box-shadow: none;
  276. }
  277. .input-lg {
  278. height: 46px;
  279. padding: 10px 16px;
  280. font-size: 16px;
  281. line-height: 1.3333333;
  282. border-radius: 3px;
  283. }
  284. .input-sm {
  285. height: 30px;
  286. padding: 5px 10px;
  287. font-size: 12px;
  288. line-height: 1.5;
  289. border-radius: 3px;
  290. }
  291. .label-primary {
  292. background-color: #0053ab;
  293. }
  294. .label-success {
  295. background-color: #5cb45b;
  296. }
  297. .label-info {
  298. background-color: #04a2b3;
  299. }
  300. .label-warning {
  301. background-color: #f7b543;
  302. }
  303. .label-danger {
  304. background-color: #f03154;
  305. }
  306. .label-dark {
  307. background-color: #2a323c;
  308. }
  309. .badge {
  310. text-transform: uppercase;
  311. padding: 3px 7px;
  312. font-size: 11px;
  313. margin-top: 1px;
  314. }
  315. .badge-xs {
  316. font-size: 9px;
  317. }
  318. .badge-xs,
  319. .badge-sm {
  320. -webkit-transform: translate(0, -2px);
  321. -ms-transform: translate(0, -2px);
  322. -o-transform: translate(0, -2px);
  323. transform: translate(0, -2px);
  324. }
  325. .badge-primary {
  326. background-color: #0053ab;
  327. }
  328. .badge-success {
  329. background-color: #5cb45b;
  330. }
  331. .badge-info {
  332. background-color: #04a2b3;
  333. }
  334. .badge-warning {
  335. background-color: #f7b543;
  336. }
  337. .badge-danger {
  338. background-color: #f03154;
  339. }
  340. .badge-dark {
  341. background-color: #2a323c;
  342. }
  343. .popover {
  344. border-radius: 3px;
  345. }
  346. .pagination > li > a {
  347. background-color: #ffffff;
  348. border: 1px solid #dddddd;
  349. color: #373e4a;
  350. }
  351. .pagination > li > span {
  352. background-color: #ffffff;
  353. border: 1px solid #dddddd;
  354. color: #373e4a;
  355. }
  356. .pagination > .active > a,
  357. .pagination > .active > span,
  358. .pagination > .active > a:hover,
  359. .pagination > .active > span:hover,
  360. .pagination > .active > a:focus,
  361. .pagination > .active > span:focus {
  362. background-color: #0053ab;
  363. border-color: #0053ab;
  364. }
  365. .tabs {
  366. background-color: #ffffff;
  367. margin: 0 auto;
  368. padding: 0px;
  369. position: relative;
  370. white-space: nowrap;
  371. width: 100%;
  372. }
  373. .tabs li.tab {
  374. background-color: #ffffff;
  375. display: block;
  376. float: left;
  377. margin: 0;
  378. text-align: center;
  379. }
  380. .tabs li.tab a {
  381. -moz-transition: color 0.28s ease;
  382. -ms-transition: color 0.28s ease;
  383. -o-transition: color 0.28s ease;
  384. -webkit-transition: color 0.28s ease;
  385. color: #ee6e73;
  386. display: block;
  387. height: 100%;
  388. text-decoration: none;
  389. transition: color 0.28s ease;
  390. width: 100%;
  391. }
  392. .tabs li.tab a.active {
  393. color: #0053ab !important;
  394. }
  395. .tabs .indicator {
  396. background-color: #0053ab;
  397. bottom: 0;
  398. height: 2px;
  399. position: absolute;
  400. will-change: left, right;
  401. }
  402. .tabs-top .indicator {
  403. top: 0;
  404. }
  405. .nav.nav-tabs + .tab-content {
  406. background: #ffffff;
  407. margin-bottom: 30px;
  408. padding: 30px;
  409. }
  410. .tabs-vertical-env {
  411. margin-bottom: 30px;
  412. }
  413. .tabs-vertical-env .tab-content {
  414. background: #ffffff;
  415. display: table-cell;
  416. margin-bottom: 30px;
  417. padding: 30px;
  418. vertical-align: top;
  419. }
  420. .tabs-vertical-env .nav.tabs-vertical {
  421. display: table-cell;
  422. min-width: 120px;
  423. vertical-align: top;
  424. width: 150px;
  425. }
  426. .tabs-vertical-env .nav.tabs-vertical li.active > a {
  427. background-color: #0053ab;
  428. color: #ffffff !important;
  429. border: 0;
  430. }
  431. .tabs-vertical-env .nav.tabs-vertical li.active > a:hover {
  432. color: #ffffff !important;
  433. }
  434. .tabs-vertical-env .nav.tabs-vertical li > a {
  435. color: #333333;
  436. text-align: center;
  437. white-space: nowrap;
  438. }
  439. .nav.nav-tabs > li.active > a {
  440. background-color: #0053ab;
  441. color: #ffffff !important;
  442. border: 0;
  443. }
  444. .nav.nav-tabs > li.active > a:hover {
  445. color: #ffffff !important;
  446. }
  447. .nav.nav-tabs > li > a,
  448. .nav.tabs-vertical > li > a {
  449. background-color: transparent;
  450. border-radius: 0;
  451. border: none;
  452. color: #333333 !important;
  453. cursor: pointer;
  454. line-height: 50px;
  455. font-weight: 500;
  456. padding-left: 20px;
  457. padding-right: 20px;
  458. font-family: 'Roboto', sans-serif;
  459. }
  460. .nav.nav-tabs > li > a:hover,
  461. .nav.tabs-vertical > li > a:hover {
  462. color: #0053ab !important;
  463. }
  464. .tab-content {
  465. border: 1px solid #eeeeee;
  466. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  467. color: #777777;
  468. }
  469. .nav.nav-tabs > li:last-of-type a {
  470. margin-right: 0px;
  471. }
  472. .nav.nav-tabs {
  473. border-bottom: 0;
  474. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  475. }
  476. .nav-tabs.nav-justified > .active > a,
  477. .nav-tabs.nav-justified > .active > a:hover,
  478. .nav-tabs.nav-justified > .active > a:focus,
  479. .tabs-vertical-env .nav.tabs-vertical li.active > a {
  480. border: none;
  481. }
  482. /* Dropcap */
  483. .dropcap {
  484. font-size: 3.1em;
  485. }
  486. .dropcap,
  487. .dropcap-circle,
  488. .dropcap-square {
  489. display: block;
  490. float: left;
  491. font-weight: 400;
  492. line-height: 36px;
  493. margin-right: 6px;
  494. text-shadow: none;
  495. }
  496. .modal .modal-dialog .modal-content {
  497. border-radius: 2px;
  498. padding: 20px 20px 0 20px;
  499. box-shadow: none;
  500. }
  501. .modal .modal-dialog .modal-content .modal-header {
  502. border-bottom-width: 2px;
  503. margin: 0;
  504. padding: 0 0 10px 0;
  505. }
  506. .modal .modal-dialog .modal-content .modal-body {
  507. padding: 10px 0;
  508. }
  509. .modal .modal-dialog .modal-content .modal-footer {
  510. padding-top: 15px;
  511. }
  512. .modal-full {
  513. width: 98%;
  514. }
  515. .modal-content .nav.nav-tabs + .tab-content {
  516. margin-bottom: 0px;
  517. }
  518. .modal-content .panel-group {
  519. margin-bottom: 0px;
  520. }
  521. .modal-content .panel {
  522. border-top: none;
  523. }
  524. .tabs-vertical-env .tab-content {
  525. margin-bottom: 0px;
  526. }
  527. .legendLabel {
  528. padding-left: 10px !important;
  529. }
  530. /* =============
  531. Alerts
  532. ============= */
  533. .alert {
  534. position: relative;
  535. border: 0;
  536. }
  537. .alert .alert-link {
  538. font-weight: 600;
  539. }
  540. .alert-success {
  541. color: #5cb45b;
  542. background-color: rgba(92, 180, 91, 0.15);
  543. }
  544. .alert-success .alert-link {
  545. color: #469745;
  546. }
  547. .alert-success hr {
  548. border-top-color: #469745;
  549. }
  550. .alert-info {
  551. color: #04a2b3;
  552. background-color: rgba(4, 162, 179, 0.2);
  553. }
  554. .alert-info .alert-link {
  555. color: #037581;
  556. }
  557. .alert-info hr {
  558. border-top-color: #037581;
  559. }
  560. .alert-warning {
  561. color: #f7b543;
  562. background-color: rgba(247, 181, 67, 0.15);
  563. }
  564. .alert-warning .alert-link {
  565. color: #f5a212;
  566. }
  567. .alert-warning hr {
  568. border-top-color: #f5a212;
  569. }
  570. .alert-danger {
  571. color: #f03154;
  572. background-color: rgba(240, 49, 84, 0.1);
  573. }
  574. .alert-danger .alert-link {
  575. color: #de1036;
  576. }
  577. .alert-danger hr {
  578. border-top-color: #de1036;
  579. }
  580. .list-group-item.active {
  581. background-color: #dddddd;
  582. border-color: #dddddd;
  583. color: #444444;
  584. z-index: 2;
  585. }
  586. .list-group-item.active:hover {
  587. background-color: #dddddd;
  588. border-color: #dddddd;
  589. color: #444444;
  590. z-index: 2;
  591. }
  592. .list-group-item.active:hover .list-group-item-text {
  593. color: #0053ab;
  594. }
  595. .list-group-item.active:focus {
  596. background-color: #dddddd;
  597. border-color: #dddddd;
  598. color: #444444;
  599. z-index: 2;
  600. }
  601. .list-group-item.active:focus .list-group-item-text {
  602. color: #0053ab;
  603. }
  604. .list-group-item.active .list-group-item-text {
  605. color: #0053ab;
  606. }
  607. .list-group-item {
  608. border-radius: 0px;
  609. padding: 12px 20px;
  610. }
  611. .list-group-item:first-child {
  612. border-radius: 0px;
  613. padding: 12px 20px;
  614. }
  615. .list-group-item:last-child {
  616. border-radius: 0px;
  617. padding: 12px 20px;
  618. }
  619. .list-group-item-heading {
  620. font-weight: 300;
  621. }
  622. .list-group-item.active > .badge {
  623. color: #0053ab;
  624. }
  625. .nav-pills > .active > a > .badge {
  626. color: #0053ab;
  627. }
  628. .has-success .form-control {
  629. border-color: #5cb45b;
  630. box-shadow: none !important;
  631. }
  632. .has-warning .form-control {
  633. border-color: #f7b543;
  634. box-shadow: none !important;
  635. }
  636. .has-error .form-control {
  637. border-color: #f03154;
  638. box-shadow: none !important;
  639. }
  640. .input-group-addon {
  641. border-radius: 2px;
  642. border: 1px solid #eeeeee;
  643. }
  644. /* ==============
  645. Helper Classes
  646. ===================*/
  647. .p-0 {
  648. padding: 0px !important;
  649. }
  650. .p-t-0 {
  651. padding-top: 0px !important;
  652. }
  653. .p-t-10 {
  654. padding-top: 10px !important;
  655. }
  656. .p-b-10 {
  657. padding-bottom: 10px !important;
  658. }
  659. .m-0 {
  660. margin: 0px !important;
  661. }
  662. .m-r-5 {
  663. margin-right: 5px;
  664. }
  665. .m-r-10 {
  666. margin-right: 10px;
  667. }
  668. .m-r-15 {
  669. margin-right: 15px !important;
  670. }
  671. .m-l-10 {
  672. margin-left: 10px;
  673. }
  674. .m-l-15 {
  675. margin-left: 15px;
  676. }
  677. .m-t-5 {
  678. margin-top: 5px !important;
  679. }
  680. .m-t-0 {
  681. margin-top: 0px;
  682. }
  683. .m-t-10 {
  684. margin-top: 10px !important;
  685. }
  686. .m-t-15 {
  687. margin-top: 15px !important;
  688. }
  689. .m-t-20 {
  690. margin-top: 20px;
  691. }
  692. .m-t-30 {
  693. margin-top: 30px !important;
  694. }
  695. .m-t-40 {
  696. margin-top: 40px !important;
  697. }
  698. .m-b-0 {
  699. margin-bottom: 0 !important;
  700. }
  701. .m-b-5 {
  702. margin-bottom: 5px;
  703. }
  704. .m-b-10 {
  705. margin-bottom: 10px;
  706. }
  707. .m-b-15 {
  708. margin-bottom: 15px;
  709. }
  710. .m-b-30 {
  711. margin-bottom: 30px;
  712. }
  713. .w-xs {
  714. min-width: 80px;
  715. }
  716. .w-sm {
  717. min-width: 95px;
  718. }
  719. .w-md {
  720. min-width: 110px;
  721. }
  722. .w-lg {
  723. min-width: 140px;
  724. }
  725. .m-h-50 {
  726. min-height: 50px;
  727. }
  728. .l-h-34 {
  729. line-height: 34px;
  730. }
  731. .font-light {
  732. font-weight: 300;
  733. }
  734. .wrapper-md {
  735. padding: 20px;
  736. }
  737. .pull-in {
  738. margin-left: -15px;
  739. margin-right: -15px;
  740. }
  741. .b-0 {
  742. border: none !important;
  743. }
  744. .no-border {
  745. border: none;
  746. }
  747. .bx-shadow {
  748. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  749. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  750. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  751. }
  752. .mx-box {
  753. max-height: 380px;
  754. min-height: 380px;
  755. }
  756. .thumb-sm {
  757. height: 32px;
  758. width: 32px;
  759. }
  760. .thumb-md {
  761. height: 48px;
  762. width: 48px;
  763. }
  764. .thumb-lg {
  765. height: 88px;
  766. width: 88px;
  767. }
  768. .grid-structure .grid-container {
  769. background-color: #f5f5f5;
  770. margin-bottom: 10px;
  771. padding: 10px 20px;
  772. }
  773. .icon-list div {
  774. cursor: pointer;
  775. line-height: 40px;
  776. white-space: nowrap;
  777. }
  778. .icon-list i {
  779. -webkit-transition: all 0.2s;
  780. -webkit-transition: font-size 0.2s;
  781. display: inline-block;
  782. font-size: 14px;
  783. margin: 0;
  784. text-align: center;
  785. transition: all 0.2s;
  786. transition: font-size 0.2s;
  787. vertical-align: middle;
  788. width: 40px;
  789. }
  790. .icon-list .col-md-3:hover i {
  791. -o-transform: scale(2);
  792. -webkit-transform: scale(2);
  793. moz-transform: scale(2);
  794. transform: scale(2);
  795. }
  796. .ionicon-list i {
  797. font-size: 16px;
  798. }
  799. .ionicon-list .col-md-3:hover i {
  800. -o-transform: scale(2);
  801. -webkit-transform: scale(2);
  802. moz-transform: scale(2);
  803. transform: scale(2);
  804. }
  805. /* ==============
  806. Waves Effect
  807. ===================*/
  808. /*!
  809. * Waves v0.6.0
  810. * http://fian.my.id/Waves
  811. *
  812. * Copyright 2014 Alfiana E. Sibuea and other contributors
  813. * Released under the MIT license
  814. * https://github.com/fians/Waves/blob/master/LICENSE
  815. */
  816. .waves-effect {
  817. position: relative;
  818. cursor: pointer;
  819. display: inline-block;
  820. overflow: hidden;
  821. -webkit-user-select: none;
  822. -moz-user-select: none;
  823. -ms-user-select: none;
  824. user-select: none;
  825. -webkit-tap-highlight-color: transparent;
  826. vertical-align: middle;
  827. z-index: 1;
  828. will-change: opacity, transform;
  829. -webkit-transition: all 0.3s ease-out;
  830. -moz-transition: all 0.3s ease-out;
  831. -o-transition: all 0.3s ease-out;
  832. -ms-transition: all 0.3s ease-out;
  833. transition: all 0.3s ease-out;
  834. }
  835. .waves-effect .waves-ripple {
  836. position: absolute;
  837. border-radius: 50%;
  838. width: 20px;
  839. height: 20px;
  840. margin-top: -10px;
  841. margin-left: -10px;
  842. opacity: 0;
  843. background: rgba(0, 0, 0, 0.2);
  844. -webkit-transition: all 0.7s ease-out;
  845. -moz-transition: all 0.7s ease-out;
  846. -o-transition: all 0.7s ease-out;
  847. -ms-transition: all 0.7s ease-out;
  848. transition: all 0.7s ease-out;
  849. -webkit-transition-property: -webkit-transform, opacity;
  850. -moz-transition-property: -moz-transform, opacity;
  851. -o-transition-property: -o-transform, opacity;
  852. transition-property: transform, opacity;
  853. -webkit-transform: scale(0);
  854. -moz-transform: scale(0);
  855. -ms-transform: scale(0);
  856. -o-transform: scale(0);
  857. transform: scale(0);
  858. pointer-events: none;
  859. }
  860. .waves-effect.waves-light .waves-ripple {
  861. background-color: rgba(255, 255, 255, 0.45);
  862. }
  863. .waves-effect.waves-red .waves-ripple {
  864. background-color: rgba(244, 67, 54, 0.7);
  865. }
  866. .waves-effect.waves-yellow .waves-ripple {
  867. background-color: rgba(255, 235, 59, 0.7);
  868. }
  869. .waves-effect.waves-orange .waves-ripple {
  870. background-color: rgba(255, 152, 0, 0.7);
  871. }
  872. .waves-effect.waves-purple .waves-ripple {
  873. background-color: rgba(156, 39, 176, 0.7);
  874. }
  875. .waves-effect.waves-green .waves-ripple {
  876. background-color: rgba(76, 175, 80, 0.7);
  877. }
  878. .waves-effect.waves-teal .waves-ripple {
  879. background-color: rgba(0, 150, 136, 0.7);
  880. }
  881. .waves-notransition {
  882. -webkit-transition: none !important;
  883. -moz-transition: none !important;
  884. -o-transition: none !important;
  885. -ms-transition: none !important;
  886. transition: none !important;
  887. }
  888. .waves-circle {
  889. -webkit-transform: translateZ(0);
  890. -moz-transform: translateZ(0);
  891. -ms-transform: translateZ(0);
  892. -o-transform: translateZ(0);
  893. transform: translateZ(0);
  894. text-align: center;
  895. width: 2.5em;
  896. height: 2.5em;
  897. line-height: 2.5em;
  898. border-radius: 50%;
  899. -webkit-mask-image: none;
  900. }
  901. .waves-input-wrapper {
  902. border-radius: 0.2em;
  903. vertical-align: bottom;
  904. }
  905. .waves-input-wrapper .waves-button-input {
  906. position: relative;
  907. top: 0;
  908. left: 0;
  909. z-index: 1;
  910. }
  911. .waves-block {
  912. display: block;
  913. }
  914. /* ==============
  915. Animation
  916. ===================*/
  917. /* Bounce 1 */
  918. @-webkit-keyframes cd-bounce-1 {
  919. 0% {
  920. opacity: 0;
  921. -webkit-transform: scale(0.5);
  922. }
  923. 60% {
  924. opacity: 1;
  925. -webkit-transform: scale(1.2);
  926. }
  927. 100% {
  928. -webkit-transform: scale(1);
  929. }
  930. }
  931. @-moz-keyframes cd-bounce-1 {
  932. 0% {
  933. opacity: 0;
  934. -moz-transform: scale(0.5);
  935. }
  936. 60% {
  937. opacity: 1;
  938. -moz-transform: scale(1.2);
  939. }
  940. 100% {
  941. -moz-transform: scale(1);
  942. }
  943. }
  944. @-o-keyframes cd-bounce-1 {
  945. 0% {
  946. opacity: 0;
  947. -o-transform: scale(0.5);
  948. }
  949. 60% {
  950. opacity: 1;
  951. -o-transform: scale(1.2);
  952. }
  953. 100% {
  954. -o-transform: scale(1);
  955. }
  956. }
  957. @keyframes cd-bounce-1 {
  958. 0% {
  959. opacity: 0;
  960. -webkit-transform: scale(0.5);
  961. -moz-transform: scale(0.5);
  962. -ms-transform: scale(0.5);
  963. -o-transform: scale(0.5);
  964. transform: scale(0.5);
  965. }
  966. 60% {
  967. opacity: 1;
  968. -webkit-transform: scale(1.2);
  969. -moz-transform: scale(1.2);
  970. -ms-transform: scale(1.2);
  971. -o-transform: scale(1.2);
  972. transform: scale(1.2);
  973. }
  974. 100% {
  975. opacity: 1;
  976. -webkit-transform: scale(1);
  977. -moz-transform: scale(1);
  978. -ms-transform: scale(1);
  979. -o-transform: scale(1);
  980. transform: scale(1);
  981. }
  982. }
  983. /* Bounce 2 */
  984. @-webkit-keyframes cd-bounce-2 {
  985. 0% {
  986. opacity: 0;
  987. -webkit-transform: translateX(-100px);
  988. }
  989. 60% {
  990. opacity: 1;
  991. -webkit-transform: translateX(20px);
  992. }
  993. 100% {
  994. -webkit-transform: translateX(0);
  995. }
  996. }
  997. @-moz-keyframes cd-bounce-2 {
  998. 0% {
  999. opacity: 0;
  1000. -moz-transform: translateX(-100px);
  1001. }
  1002. 60% {
  1003. opacity: 1;
  1004. -moz-transform: translateX(20px);
  1005. }
  1006. 100% {
  1007. -moz-transform: translateX(0);
  1008. }
  1009. }
  1010. @-o-keyframes cd-bounce-2 {
  1011. 0% {
  1012. opacity: 0;
  1013. -o-transform: translateX(-100px);
  1014. }
  1015. 60% {
  1016. opacity: 1;
  1017. -o-transform: translateX(20px);
  1018. }
  1019. 100% {
  1020. opacity: 1;
  1021. -o-transform: translateX(0);
  1022. }
  1023. }
  1024. @keyframes cd-bounce-2 {
  1025. 0% {
  1026. opacity: 0;
  1027. -webkit-transform: translateX(-100px);
  1028. -moz-transform: translateX(-100px);
  1029. -ms-transform: translateX(-100px);
  1030. -o-transform: translateX(-100px);
  1031. transform: translateX(-100px);
  1032. }
  1033. 60% {
  1034. opacity: 1;
  1035. -webkit-transform: translateX(20px);
  1036. -moz-transform: translateX(20px);
  1037. -ms-transform: translateX(20px);
  1038. -o-transform: translateX(20px);
  1039. transform: translateX(20px);
  1040. }
  1041. 100% {
  1042. opacity: 1;
  1043. -webkit-transform: translateX(0);
  1044. -moz-transform: translateX(0);
  1045. -ms-transform: translateX(0);
  1046. -o-transform: translateX(0);
  1047. transform: translateX(0);
  1048. }
  1049. }
  1050. /* Dropdown */
  1051. @-webkit-keyframes dropdownOpen {
  1052. 0% {
  1053. opacity: 0;
  1054. -webkit-transform: scale(0);
  1055. }
  1056. 100% {
  1057. -webkit-transform: scale(1);
  1058. }
  1059. }
  1060. @-moz-keyframes dropdownOpen {
  1061. 0% {
  1062. opacity: 0;
  1063. -moz-transform: scale(0);
  1064. }
  1065. 100% {
  1066. -moz-transform: scale(1);
  1067. }
  1068. }
  1069. @-o-keyframes dropdownOpen {
  1070. 0% {
  1071. opacity: 0;
  1072. -o-transform: scale(0);
  1073. }
  1074. 100% {
  1075. -o-transform: scale(1);
  1076. }
  1077. }
  1078. @keyframes dropdownOpen {
  1079. 0% {
  1080. opacity: 0;
  1081. -webkit-transform: scale(0);
  1082. -moz-transform: scale(0);
  1083. -ms-transform: scale(0);
  1084. -o-transform: scale(0);
  1085. transform: scale(0);
  1086. }
  1087. 100% {
  1088. opacity: 1;
  1089. -webkit-transform: scale(1);
  1090. -moz-transform: scale(1);
  1091. -ms-transform: scale(1);
  1092. -o-transform: scale(1);
  1093. transform: scale(1);
  1094. }
  1095. }
  1096. /* Progressbar Animated */
  1097. @-webkit-keyframes animationProgress {
  1098. from {
  1099. width: 0;
  1100. }
  1101. }
  1102. @keyframes animationProgress {
  1103. from {
  1104. width: 0;
  1105. }
  1106. }
  1107. /* Portlets loader */
  1108. @-webkit-keyframes loaderAnimate {
  1109. 0% {
  1110. -webkit-transform: rotate(0deg);
  1111. }
  1112. 100% {
  1113. -webkit-transform: rotate(220deg);
  1114. }
  1115. }
  1116. @-moz-keyframes loaderAnimate {
  1117. 0% {
  1118. -moz-transform: rotate(0deg);
  1119. }
  1120. 100% {
  1121. -moz-transform: rotate(220deg);
  1122. }
  1123. }
  1124. @-o-keyframes loaderAnimate {
  1125. 0% {
  1126. -o-transform: rotate(0deg);
  1127. }
  1128. 100% {
  1129. -o-transform: rotate(220deg);
  1130. }
  1131. }
  1132. @keyframes loaderAnimate {
  1133. 0% {
  1134. transform: rotate(0deg);
  1135. }
  1136. 100% {
  1137. transform: rotate(220deg);
  1138. }
  1139. }
  1140. @-webkit-keyframes loaderAnimate2 {
  1141. 0% {
  1142. box-shadow: inset #555 0 0 0 8px;
  1143. -webkit-transform: rotate(-140deg);
  1144. }
  1145. 50% {
  1146. box-shadow: inset #555 0 0 0 2px;
  1147. }
  1148. 100% {
  1149. box-shadow: inset #555 0 0 0 8px;
  1150. -webkit-transform: rotate(140deg);
  1151. }
  1152. }
  1153. @-moz-keyframes loaderAnimate2 {
  1154. 0% {
  1155. box-shadow: inset #555 0 0 0 8px;
  1156. -moz-transform: rotate(-140deg);
  1157. }
  1158. 50% {
  1159. box-shadow: inset #555 0 0 0 2px;
  1160. }
  1161. 100% {
  1162. box-shadow: inset #555 0 0 0 8px;
  1163. -moz-transform: rotate(140deg);
  1164. }
  1165. }
  1166. @-o-keyframes loaderAnimate2 {
  1167. 0% {
  1168. box-shadow: inset #555 0 0 0 8px;
  1169. -o-transform: rotate(-140deg);
  1170. }
  1171. 50% {
  1172. box-shadow: inset #555 0 0 0 2px;
  1173. }
  1174. 100% {
  1175. box-shadow: inset #555 0 0 0 8px;
  1176. -o-transform: rotate(140deg);
  1177. }
  1178. }
  1179. @keyframes loaderAnimate2 {
  1180. 0% {
  1181. box-shadow: inset #555 0 0 0 8px;
  1182. -webkit-transform: rotate(-140deg);
  1183. -moz-transform: rotate(-140deg);
  1184. -ms-transform: rotate(-140deg);
  1185. transform: rotate(-140deg);
  1186. }
  1187. 50% {
  1188. box-shadow: inset #555 0 0 0 2px;
  1189. }
  1190. 100% {
  1191. box-shadow: inset #555 0 0 0 8px;
  1192. -webkit-transform: rotate(140deg);
  1193. -moz-transform: rotate(140deg);
  1194. -ms-transform: rotate(140deg);
  1195. transform: rotate(140deg);
  1196. }
  1197. }
  1198. @keyframes loaderAnimate2 {
  1199. 0% {
  1200. box-shadow: inset #999 0 0 0 17px;
  1201. transform: rotate(-140deg);
  1202. }
  1203. 50% {
  1204. box-shadow: inset #999 0 0 0 2px;
  1205. }
  1206. 100% {
  1207. box-shadow: inset #999 0 0 0 17px;
  1208. transform: rotate(140deg);
  1209. }
  1210. }
  1211. @media print {
  1212. .logo,
  1213. .page-title,
  1214. .breadcrumb,
  1215. .footer {
  1216. display: none !important;
  1217. margin: 0px !important;
  1218. padding: 0px !important;
  1219. }
  1220. .left {
  1221. display: none;
  1222. }
  1223. .right-bar {
  1224. display: none !important;
  1225. }
  1226. .content {
  1227. margin-top: 0px;
  1228. padding-top: 0px;
  1229. }
  1230. .content-page {
  1231. margin-left: 0px !important;
  1232. margin-top: 0px;
  1233. }
  1234. }
  1235. .bs-example-modal {
  1236. position: relative;
  1237. top: auto;
  1238. right: auto;
  1239. bottom: auto;
  1240. left: auto;
  1241. z-index: 1;
  1242. display: block;
  1243. }
  1244. .responsive-utilities td.is-visible {
  1245. background-color: #d9f3ee;
  1246. color: #5cb45b;
  1247. }
  1248. .icon-demo-content {
  1249. text-align: center;
  1250. color: #898989;
  1251. }
  1252. .icon-demo-content i {
  1253. display: block;
  1254. font-size: 28px;
  1255. color: #2a323c;
  1256. margin-bottom: 5px;
  1257. }
  1258. .icon-demo-content .col-sm-6 {
  1259. margin-bottom: 30px;
  1260. }
  1261. .icon-demo-content .col-sm-6:hover i {
  1262. color: #0053ab;
  1263. }
  1264. @media print {
  1265. .topbar,
  1266. .footer,
  1267. .side-menu {
  1268. display: none;
  1269. margin: 0;
  1270. padding: 0;
  1271. }
  1272. }
  1273. /*
  1274. File: Components
  1275. */
  1276. /*
  1277. - Buttons
  1278. - Panels
  1279. - Portlets
  1280. - Checkbox and Radio
  1281. - Progressbars
  1282. - Tables
  1283. - Form Elements
  1284. - Calendar
  1285. - Widgets
  1286. */
  1287. /* ==============
  1288. Buttons
  1289. ===================*/
  1290. /* =============
  1291. Buttons
  1292. ============= */
  1293. .btn {
  1294. border-radius: 2px;
  1295. padding: 6px 14px;
  1296. }
  1297. .btn-md {
  1298. padding: 8px 18px;
  1299. }
  1300. .btn-group-lg > .btn,
  1301. .btn-lg {
  1302. padding: 10px 16px !important;
  1303. font-size: 16px;
  1304. }
  1305. .btn-group-sm > .btn,
  1306. .btn-sm {
  1307. padding: 5px 10px !important;
  1308. }
  1309. .btn-group-xs > .btn,
  1310. .btn-xs {
  1311. padding: 1px 5px !important;
  1312. }
  1313. .btn-group.open .dropdown-toggle {
  1314. -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
  1315. box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
  1316. }
  1317. .btn-primary,
  1318. .btn-success,
  1319. .btn-info,
  1320. .btn-warning,
  1321. .btn-danger,
  1322. .btn-inverse,
  1323. .btn-purple,
  1324. .btn-pink,
  1325. .btn-orange,
  1326. .btn-brown,
  1327. .btn-teal {
  1328. color: #ffffff !important;
  1329. }
  1330. .btn-default {
  1331. background-color: #ffffff;
  1332. border-color: rgba(42, 50, 60, 0.2);
  1333. }
  1334. .btn-default:hover,
  1335. .btn-default:focus,
  1336. .btn-default:active,
  1337. .btn-default.active,
  1338. .btn-default.focus,
  1339. .btn-default:active,
  1340. .btn-default:focus,
  1341. .btn-default:hover,
  1342. .open > .dropdown-toggle.btn-default {
  1343. background-color: rgba(42, 50, 60, 0.07) !important;
  1344. border: 1px solid rgba(42, 50, 60, 0.2) !important;
  1345. }
  1346. .btn-primary {
  1347. background-color: #0053ab !important;
  1348. border: 1px solid #0053ab !important;
  1349. }
  1350. .btn-primary:hover,
  1351. .btn-primary:focus,
  1352. .btn-primary:active,
  1353. .btn-primary.active,
  1354. .btn-primary.focus,
  1355. .btn-primary:active,
  1356. .btn-primary:focus,
  1357. .btn-primary:hover,
  1358. .open > .dropdown-toggle.btn-primary {
  1359. background-color: #2186d8 !important;
  1360. border: 1px solid #2186d8 !important;
  1361. }
  1362. .btn-success {
  1363. background-color: #5cb45b !important;
  1364. border: 1px solid #5cb45b !important;
  1365. }
  1366. .btn-success:hover,
  1367. .btn-success:focus,
  1368. .btn-success:active,
  1369. .btn-success.active,
  1370. .btn-success.focus,
  1371. .btn-success:active,
  1372. .btn-success:focus,
  1373. .btn-success:hover,
  1374. .open > .dropdown-toggle.btn-success {
  1375. background-color: #4ea84d !important;
  1376. border: 1px solid #4ea84d !important;
  1377. }
  1378. .btn-info {
  1379. background-color: #04a2b3 !important;
  1380. border: 1px solid #04a2b3 !important;
  1381. }
  1382. .btn-info:hover,
  1383. .btn-info:focus,
  1384. .btn-info:active,
  1385. .btn-info.active,
  1386. .btn-info.focus,
  1387. .btn-info:active,
  1388. .btn-info:focus,
  1389. .btn-info:hover,
  1390. .open > .dropdown-toggle.btn-info {
  1391. background-color: #038b9a !important;
  1392. border: 1px solid #038b9a !important;
  1393. }
  1394. .btn-warning {
  1395. background-color: #f7b543 !important;
  1396. border: 1px solid #f7b543 !important;
  1397. }
  1398. .btn-warning:hover,
  1399. .btn-warning:focus,
  1400. .btn-warning:active,
  1401. .btn-warning.active,
  1402. .btn-warning.focus,
  1403. .btn-warning:active,
  1404. .btn-warning:focus,
  1405. .btn-warning:hover,
  1406. .open > .dropdown-toggle.btn-warning {
  1407. background-color: #f6ab2b !important;
  1408. border: 1px solid #f6ab2b !important;
  1409. }
  1410. .btn-danger {
  1411. background-color: #f03154 !important;
  1412. border: 1px solid #f03154 !important;
  1413. }
  1414. .btn-danger:active,
  1415. .btn-danger:focus,
  1416. .btn-danger:hover,
  1417. .btn-danger.active,
  1418. .btn-danger.focus,
  1419. .btn-danger:active,
  1420. .btn-danger:focus,
  1421. .btn-danger:hover,
  1422. .open > .dropdown-toggle.btn-danger {
  1423. background-color: #ee1940 !important;
  1424. border: 1px solid #ee1940 !important;
  1425. }
  1426. .btn-dark {
  1427. background-color: #2a323c !important;
  1428. border: 1px solid #2a323c !important;
  1429. color: #ffffff;
  1430. }
  1431. .btn-dark:hover,
  1432. .btn-dark:focus,
  1433. .btn-dark:active,
  1434. .btn-dark.active,
  1435. .btn-dark.focus,
  1436. .btn-dark:active,
  1437. .btn-dark:focus,
  1438. .btn-dark:hover,
  1439. .open > .dropdown-toggle.btn-dark {
  1440. background-color: #20262d !important;
  1441. border: 1px solid #20262d !important;
  1442. color: #ffffff;
  1443. }
  1444. .btn-link {
  1445. color: #2a323c;
  1446. }
  1447. .btn-link:hover {
  1448. color: #0053ab;
  1449. }
  1450. .fileupload {
  1451. overflow: hidden;
  1452. position: relative;
  1453. }
  1454. .fileupload input.upload {
  1455. cursor: pointer;
  1456. filter: alpha(opacity=0);
  1457. font-size: 20px;
  1458. margin: 0;
  1459. opacity: 0;
  1460. padding: 0;
  1461. position: absolute;
  1462. right: 0;
  1463. top: 0;
  1464. }
  1465. /* ==============
  1466. Panels
  1467. ===================*/
  1468. .panel {
  1469. border: none;
  1470. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1471. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1472. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1473. margin-bottom: 20px;
  1474. }
  1475. .panel .panel-body {
  1476. padding: 20px;
  1477. }
  1478. .panel-heading {
  1479. border: none !important;
  1480. padding: 10px 20px;
  1481. }
  1482. .panel-default > .panel-heading {
  1483. background-color: #fafafa;
  1484. border-bottom: none;
  1485. color: #2a323c;
  1486. }
  1487. .panel-footer {
  1488. background: #fafafa;
  1489. border-top: 0;
  1490. }
  1491. .panel-color .panel-title {
  1492. color: #ffffff;
  1493. }
  1494. .panel-primary > .panel-heading {
  1495. background-color: #0053ab;
  1496. }
  1497. .panel-success > .panel-heading {
  1498. background-color: #5cb45b;
  1499. }
  1500. .panel-info > .panel-heading {
  1501. background-color: #04a2b3;
  1502. }
  1503. .panel-warning > .panel-heading {
  1504. background-color: #f7b543;
  1505. }
  1506. .panel-danger > .panel-heading {
  1507. background-color: #f03154;
  1508. }
  1509. .panel-dark > .panel-heading {
  1510. background-color: #2a323c;
  1511. color: #ffffff;
  1512. }
  1513. .panel-fill {
  1514. border-radius: 3px;
  1515. }
  1516. .panel-fill .panel-heading {
  1517. background-color: transparent;
  1518. color: #ffffff;
  1519. border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  1520. }
  1521. .panel-fill .panel-body {
  1522. color: rgba(255, 255, 255, 0.85);
  1523. }
  1524. .panel-fill.panel-default .panel-body {
  1525. color: #666;
  1526. }
  1527. .panel-fill.panel-default .panel-heading {
  1528. background-color: transparent;
  1529. color: #333333;
  1530. border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  1531. }
  1532. .panel-fill.panel-primary {
  1533. background-color: #0053ab;
  1534. }
  1535. .panel-fill.panel-success {
  1536. background-color: #5cb45b;
  1537. }
  1538. .panel-fill.panel-info {
  1539. background-color: #04a2b3;
  1540. }
  1541. .panel-fill.panel-warning {
  1542. background-color: #f7b543;
  1543. }
  1544. .panel-fill.panel-danger {
  1545. background-color: #f03154;
  1546. }
  1547. .panel-fill.panel-dark {
  1548. background-color: #2a323c;
  1549. }
  1550. .panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before {
  1551. content: '\f067';
  1552. }
  1553. .panel-group .panel .panel-heading .accordion-toggle.collapsed:before {
  1554. content: '\f067';
  1555. }
  1556. .panel-group .panel .panel-heading a[data-toggle=collapse] {
  1557. display: block;
  1558. }
  1559. .panel-group .panel .panel-heading a[data-toggle=collapse]:before {
  1560. content: '\f068';
  1561. display: block;
  1562. float: right;
  1563. font-family: 'FontAwesome';
  1564. font-size: 14px;
  1565. text-align: right;
  1566. width: 25px;
  1567. }
  1568. .panel-group .panel .panel-heading .accordion-toggle {
  1569. display: block;
  1570. }
  1571. .panel-group .panel .panel-heading .accordion-toggle:before {
  1572. content: '\f068';
  1573. display: block;
  1574. float: right;
  1575. font-family: 'FontAwesome';
  1576. font-size: 14px;
  1577. text-align: right;
  1578. width: 25px;
  1579. }
  1580. .panel-group .panel .panel-heading + .panel-collapse .panel-body {
  1581. border-top: none;
  1582. }
  1583. .panel-group .panel-heading {
  1584. padding: 12px 26px;
  1585. }
  1586. .panel-group.panel-group-joined .panel + .panel {
  1587. border-top: 1px solid #eeeeee;
  1588. margin-top: 0;
  1589. }
  1590. .panel-group-joined .panel-group .panel + .panel {
  1591. border-top: 1px solid #eeeeee;
  1592. margin-top: 0;
  1593. }
  1594. /* ==============
  1595. Portlets
  1596. ===================*/
  1597. .portlet {
  1598. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1599. -moz-transition: all 0.4s;
  1600. -o-transition: all 0.4s;
  1601. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1602. -webkit-transition: all 0.4s;
  1603. background: #ffffff;
  1604. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  1605. margin-bottom: 20px;
  1606. transition: all 0.4s;
  1607. }
  1608. .portlet .portlet-heading {
  1609. border-radius: 3px;
  1610. color: #ffffff;
  1611. padding: 12px 20px;
  1612. }
  1613. .portlet .portlet-heading .portlet-title {
  1614. color: #ffffff;
  1615. float: left;
  1616. font-size: 16px;
  1617. font-weight: 600;
  1618. margin-bottom: 0;
  1619. margin-top: 0;
  1620. }
  1621. .portlet .portlet-heading .portlet-widgets {
  1622. display: inline-block;
  1623. float: right;
  1624. font-size: 15px;
  1625. line-height: 30px;
  1626. padding-left: 15px;
  1627. position: relative;
  1628. text-align: right;
  1629. }
  1630. .portlet .portlet-heading .portlet-widgets .divider {
  1631. margin: 0 5px;
  1632. }
  1633. .portlet .portlet-heading a {
  1634. color: #999999;
  1635. }
  1636. .portlet .portlet-body {
  1637. -moz-border-radius-bottomleft: 5px;
  1638. -moz-border-radius-bottomright: 5px;
  1639. -webkit-border-bottom-left-radius: 5px;
  1640. -webkit-border-bottom-right-radius: 5px;
  1641. background: #ffffff;
  1642. border-bottom-left-radius: 5px;
  1643. border-bottom-right-radius: 5px;
  1644. padding: 15px;
  1645. }
  1646. .portlet-default .portlet-title {
  1647. color: #797979 !important;
  1648. }
  1649. .portlet .portlet-heading.bg-purple a,
  1650. .portlet .portlet-heading.bg-info a,
  1651. .portlet .portlet-heading.bg-success a,
  1652. .portlet .portlet-heading.bg-primary a,
  1653. .portlet .portlet-heading.bg-danger a,
  1654. .portlet .portlet-heading.bg-warning a,
  1655. .portlet .portlet-heading.bg-inverse a,
  1656. .portlet .portlet-heading.bg-pink a {
  1657. color: #ffffff;
  1658. }
  1659. .panel-disabled {
  1660. background: rgba(243, 242, 241, 0.5);
  1661. bottom: 15px;
  1662. left: 0px;
  1663. position: absolute;
  1664. right: -5px;
  1665. top: 0;
  1666. }
  1667. .loader-1 {
  1668. -moz-animation: loaderAnimate 1000ms linear infinite;
  1669. -o-animation: loaderAnimate 1000ms linear infinite;
  1670. -webkit-animation: loaderAnimate 1000ms linear infinite;
  1671. animation: loaderAnimate 1000ms linear infinite;
  1672. clip: rect(0, 30px, 30px, 15px);
  1673. height: 30px;
  1674. left: 50%;
  1675. margin-left: -15px;
  1676. margin-top: -15px;
  1677. position: absolute;
  1678. top: 50%;
  1679. width: 30px;
  1680. }
  1681. .loader-1:after {
  1682. -moz-animation: loaderAnimate2 1000ms ease-in-out infinite;
  1683. -o-animation: loaderAnimate2 1000ms ease-in-out infinite;
  1684. -webkit-animation: loaderAnimate2 1000ms ease-in-out infinite;
  1685. animation: loaderAnimate2 1000ms ease-in-out infinite;
  1686. border-radius: 50%;
  1687. clip: rect(0, 30px, 30px, 15px);
  1688. content: '';
  1689. height: 30px;
  1690. position: absolute;
  1691. width: 30px;
  1692. }
  1693. /* ==============
  1694. Checkbox and Radio
  1695. ===================*/
  1696. .checkbox {
  1697. padding-left: 20px;
  1698. }
  1699. .checkbox label {
  1700. display: inline-block;
  1701. padding-left: 5px;
  1702. position: relative;
  1703. }
  1704. .checkbox label::before {
  1705. -o-transition: 0.3s ease-in-out;
  1706. -webkit-transition: 0.3s ease-in-out;
  1707. background-color: #ffffff;
  1708. border-radius: 3px;
  1709. border: 1px solid #cccccc;
  1710. content: "";
  1711. display: inline-block;
  1712. height: 17px;
  1713. left: 0;
  1714. margin-left: -20px;
  1715. position: absolute;
  1716. transition: 0.3s ease-in-out;
  1717. width: 17px;
  1718. outline: none !important;
  1719. }
  1720. .checkbox label::after {
  1721. color: #555555;
  1722. display: inline-block;
  1723. font-size: 11px;
  1724. height: 16px;
  1725. left: 0;
  1726. margin-left: -20px;
  1727. padding-left: 3px;
  1728. padding-top: 1px;
  1729. position: absolute;
  1730. top: 0;
  1731. width: 16px;
  1732. }
  1733. .checkbox input[type="checkbox"] {
  1734. cursor: pointer;
  1735. opacity: 0;
  1736. z-index: 1;
  1737. outline: none !important;
  1738. }
  1739. .checkbox input[type="checkbox"]:disabled + label {
  1740. opacity: 0.65;
  1741. }
  1742. .checkbox input[type="checkbox"]:focus + label::before {
  1743. outline-offset: -2px;
  1744. outline: none;
  1745. }
  1746. .checkbox input[type="checkbox"]:checked + label::after {
  1747. content: "\f00c";
  1748. font-family: 'FontAwesome';
  1749. }
  1750. .checkbox input[type="checkbox"]:disabled + label::before {
  1751. background-color: #eeeeee;
  1752. cursor: not-allowed;
  1753. }
  1754. .checkbox.checkbox-circle label::before {
  1755. border-radius: 50%;
  1756. }
  1757. .checkbox.checkbox-inline {
  1758. margin-top: 0;
  1759. }
  1760. .checkbox.checkbox-single label {
  1761. height: 17px;
  1762. }
  1763. .checkbox-primary input[type="checkbox"]:checked + label::before {
  1764. background-color: #0053ab;
  1765. border-color: #0053ab;
  1766. }
  1767. .checkbox-primary input[type="checkbox"]:checked + label::after {
  1768. color: #ffffff;
  1769. }
  1770. .checkbox-danger input[type="checkbox"]:checked + label::before {
  1771. background-color: #f03154;
  1772. border-color: #f03154;
  1773. }
  1774. .checkbox-danger input[type="checkbox"]:checked + label::after {
  1775. color: #ffffff;
  1776. }
  1777. .checkbox-info input[type="checkbox"]:checked + label::before {
  1778. background-color: #04a2b3;
  1779. border-color: #04a2b3;
  1780. }
  1781. .checkbox-info input[type="checkbox"]:checked + label::after {
  1782. color: #ffffff;
  1783. }
  1784. .checkbox-warning input[type="checkbox"]:checked + label::before {
  1785. background-color: #f7b543;
  1786. border-color: #f7b543;
  1787. }
  1788. .checkbox-warning input[type="checkbox"]:checked + label::after {
  1789. color: #ffffff;
  1790. }
  1791. .checkbox-success input[type="checkbox"]:checked + label::before {
  1792. background-color: #5cb45b;
  1793. border-color: #5cb45b;
  1794. }
  1795. .checkbox-success input[type="checkbox"]:checked + label::after {
  1796. color: #ffffff;
  1797. }
  1798. .radio {
  1799. padding-left: 20px;
  1800. }
  1801. .radio label {
  1802. display: inline-block;
  1803. padding-left: 5px;
  1804. position: relative;
  1805. }
  1806. .radio label::before {
  1807. -o-transition: border 0.5s ease-in-out;
  1808. -webkit-transition: border 0.5s ease-in-out;
  1809. background-color: #ffffff;
  1810. border-radius: 50%;
  1811. border: 1px solid #cccccc;
  1812. content: "";
  1813. display: inline-block;
  1814. height: 17px;
  1815. left: 0;
  1816. margin-left: -20px;
  1817. outline: none !important;
  1818. position: absolute;
  1819. transition: border 0.5s ease-in-out;
  1820. width: 17px;
  1821. }
  1822. .radio label::after {
  1823. -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1824. -ms-transform: scale(0, 0);
  1825. -o-transform: scale(0, 0);
  1826. -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1827. -webkit-transform: scale(0, 0);
  1828. -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1829. background-color: #555555;
  1830. border-radius: 50%;
  1831. content: " ";
  1832. display: inline-block;
  1833. height: 11px;
  1834. left: 3px;
  1835. margin-left: -20px;
  1836. position: absolute;
  1837. top: 3px;
  1838. transform: scale(0, 0);
  1839. transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  1840. width: 11px;
  1841. }
  1842. .radio input[type="radio"] {
  1843. cursor: pointer;
  1844. opacity: 0;
  1845. z-index: 1;
  1846. outline: none !important;
  1847. }
  1848. .radio input[type="radio"]:disabled + label {
  1849. opacity: 0.65;
  1850. }
  1851. .radio input[type="radio"]:focus + label::before {
  1852. outline-offset: -2px;
  1853. outline: none;
  1854. }
  1855. .radio input[type="radio"]:checked + label::after {
  1856. -ms-transform: scale(1, 1);
  1857. -o-transform: scale(1, 1);
  1858. -webkit-transform: scale(1, 1);
  1859. transform: scale(1, 1);
  1860. }
  1861. .radio input[type="radio"]:disabled + label::before {
  1862. cursor: not-allowed;
  1863. }
  1864. .radio.radio-inline {
  1865. margin-top: 0;
  1866. }
  1867. .radio.radio-single label {
  1868. height: 17px;
  1869. }
  1870. .radio-primary input[type="radio"] + label::after {
  1871. background-color: #0053ab;
  1872. }
  1873. .radio-primary input[type="radio"]:checked + label::before {
  1874. border-color: #0053ab;
  1875. }
  1876. .radio-primary input[type="radio"]:checked + label::after {
  1877. background-color: #0053ab;
  1878. }
  1879. .radio-danger input[type="radio"] + label::after {
  1880. background-color: #f03154;
  1881. }
  1882. .radio-danger input[type="radio"]:checked + label::before {
  1883. border-color: #f03154;
  1884. }
  1885. .radio-danger input[type="radio"]:checked + label::after {
  1886. background-color: #f03154;
  1887. }
  1888. .radio-info input[type="radio"] + label::after {
  1889. background-color: #04a2b3;
  1890. }
  1891. .radio-info input[type="radio"]:checked + label::before {
  1892. border-color: #04a2b3;
  1893. }
  1894. .radio-info input[type="radio"]:checked + label::after {
  1895. background-color: #04a2b3;
  1896. }
  1897. .radio-warning input[type="radio"] + label::after {
  1898. background-color: #f7b543;
  1899. }
  1900. .radio-warning input[type="radio"]:checked + label::before {
  1901. border-color: #f7b543;
  1902. }
  1903. .radio-warning input[type="radio"]:checked + label::after {
  1904. background-color: #f7b543;
  1905. }
  1906. .radio-success input[type="radio"] + label::after {
  1907. background-color: #5cb45b;
  1908. }
  1909. .radio-success input[type="radio"]:checked + label::before {
  1910. border-color: #5cb45b;
  1911. }
  1912. .radio-success input[type="radio"]:checked + label::after {
  1913. background-color: #5cb45b;
  1914. }
  1915. /* ==============
  1916. Progressbars
  1917. ===================*/
  1918. .progress {
  1919. -webkit-box-shadow: none !important;
  1920. background-color: #f5f5f5;
  1921. box-shadow: none !important;
  1922. height: 10px;
  1923. margin-bottom: 18px;
  1924. overflow: hidden;
  1925. }
  1926. .progress-bar {
  1927. box-shadow: none;
  1928. font-size: 8px;
  1929. font-weight: 600;
  1930. line-height: 12px;
  1931. }
  1932. .progress.progress-sm {
  1933. height: 5px !important;
  1934. }
  1935. .progress.progress-sm .progress-bar {
  1936. font-size: 8px;
  1937. line-height: 5px;
  1938. }
  1939. .progress.progress-md {
  1940. height: 15px !important;
  1941. }
  1942. .progress.progress-md .progress-bar {
  1943. font-size: 10.8px;
  1944. line-height: 14.4px;
  1945. }
  1946. .progress.progress-lg {
  1947. height: 20px !important;
  1948. }
  1949. .progress.progress-lg .progress-bar {
  1950. font-size: 12px;
  1951. line-height: 20px;
  1952. }
  1953. .progress-bar-primary {
  1954. background-color: #0053ab;
  1955. }
  1956. .progress-bar-success {
  1957. background-color: #5cb45b;
  1958. }
  1959. .progress-bar-info {
  1960. background-color: #04a2b3;
  1961. }
  1962. .progress-bar-warning {
  1963. background-color: #f7b543;
  1964. }
  1965. .progress-bar-danger {
  1966. background-color: #f03154;
  1967. }
  1968. .progress-bar-dark {
  1969. background-color: #2a323c;
  1970. }
  1971. .progress-bar-purple {
  1972. background-color: #715ded;
  1973. }
  1974. .progress-bar-pink {
  1975. background-color: #e866ff;
  1976. }
  1977. .progress-animated {
  1978. -webkit-animation-duration: 5s;
  1979. -webkit-animation-name: animationProgress;
  1980. -webkit-transition: 5s all;
  1981. animation-duration: 5s;
  1982. animation-name: animationProgress;
  1983. transition: 5s all;
  1984. }
  1985. /* ==============
  1986. Tables
  1987. ===================*/
  1988. .table {
  1989. margin-bottom: 10px;
  1990. }
  1991. tbody {
  1992. color: #797979;
  1993. }
  1994. th {
  1995. color: #666666;
  1996. font-size: 15px;
  1997. }
  1998. table.focus-on tbody tr.focused th {
  1999. background-color: #0053ab;
  2000. color: #ffffff;
  2001. }
  2002. table.focus-on tbody tr.focused td {
  2003. background-color: #0053ab;
  2004. color: #ffffff;
  2005. }
  2006. .table-rep-plugin tbody th {
  2007. font-size: 14px;
  2008. font-weight: normal;
  2009. }
  2010. .modal-block {
  2011. background: transparent;
  2012. margin: 40px auto;
  2013. max-width: 600px;
  2014. padding: 0;
  2015. position: relative;
  2016. text-align: left;
  2017. }
  2018. .dt-buttons {
  2019. float: left;
  2020. }
  2021. div#datatable-buttons_info {
  2022. float: left;
  2023. }
  2024. table.dataTable th.focus,
  2025. table.dataTable td.focus {
  2026. outline: 3px solid #0053ab !important;
  2027. outline-offset: -1px;
  2028. }
  2029. .fixedHeader-floating {
  2030. top: 70px !important;
  2031. }
  2032. #datatable-editable .actions a {
  2033. padding: 5px;
  2034. }
  2035. #datatable-editable .form-control {
  2036. background-color: #ffffff;
  2037. width: 100%;
  2038. }
  2039. #datatable-editable .fa-trash-o {
  2040. color: #f03154;
  2041. }
  2042. #datatable-editable .fa-times {
  2043. color: #f03154;
  2044. }
  2045. #datatable-editable .fa-pencil {
  2046. color: #29b6f6;
  2047. }
  2048. #datatable-editable .fa-save {
  2049. color: #33b86c;
  2050. }
  2051. #datatable td {
  2052. font-weight: normal;
  2053. }
  2054. div.dataTables_paginate ul.pagination {
  2055. margin-top: 30px;
  2056. }
  2057. div.dataTables_info {
  2058. padding-top: 38px;
  2059. }
  2060. .table-bordered.dataTable > thead > tr > td,
  2061. .table-bordered.dataTable > thead > tr > th {
  2062. border-bottom-width: 1px !important;
  2063. }
  2064. table.dataTable {
  2065. margin-top: 10px !important;
  2066. margin-bottom: 18px !important;
  2067. }
  2068. /* ==============
  2069. Form-elements
  2070. ===================*/
  2071. .error {
  2072. color: #ff0000;
  2073. }
  2074. /* Form validation */
  2075. .parsley-error {
  2076. border-color: #f03154 !important;
  2077. }
  2078. .parsley-errors-list {
  2079. display: none;
  2080. margin: 0;
  2081. padding: 0;
  2082. }
  2083. .parsley-errors-list.filled {
  2084. display: block;
  2085. }
  2086. .parsley-errors-list > li {
  2087. font-size: 12px;
  2088. list-style: none;
  2089. color: #f03154;
  2090. margin-top: 5px;
  2091. }
  2092. /* Bootstrap-touchSpin */
  2093. .bootstrap-touchspin .input-group-btn-vertical .btn {
  2094. padding: 9px 12px;
  2095. }
  2096. .bootstrap-touchspin .input-group-btn-vertical i {
  2097. top: 4px;
  2098. left: 8px;
  2099. }
  2100. /* Summernote */
  2101. .note-editor {
  2102. position: relative;
  2103. }
  2104. .note-editor .btn-default {
  2105. background-color: transparent;
  2106. border-color: transparent !important;
  2107. }
  2108. .note-editor .btn-group-sm > .btn,
  2109. .note-editor .btn-sm {
  2110. padding: 8px 12px !important;
  2111. }
  2112. .note-editor .note-toolbar {
  2113. background-color: #f3f3f3;
  2114. border-bottom: 1px solid #eeeeee;
  2115. margin: 0;
  2116. }
  2117. .note-editor .note-statusbar {
  2118. background-color: #ffffff;
  2119. }
  2120. .note-editor .note-statusbar .note-resizebar {
  2121. border-top: none;
  2122. height: 15px;
  2123. padding-top: 3px;
  2124. }
  2125. .note-editor.note-frame {
  2126. border: 1px solid #eeeeee !important;
  2127. }
  2128. .note-popover .popover .popover-content {
  2129. padding: 5px 0 10px 5px;
  2130. }
  2131. .note-popover .btn-default {
  2132. background-color: transparent;
  2133. border-color: transparent !important;
  2134. }
  2135. .note-popover .btn-group-sm > .btn,
  2136. .note-popover .btn-sm {
  2137. padding: 8px 12px !important;
  2138. }
  2139. .note-toolbar {
  2140. padding: 5px 0 10px 5px;
  2141. }
  2142. .datepicker {
  2143. border: 1px solid #dddddd;
  2144. padding: 8px;
  2145. }
  2146. .datepicker th {
  2147. font-size: 14px !important;
  2148. }
  2149. .search-input {
  2150. margin-bottom: 10px;
  2151. }
  2152. .ms-selectable {
  2153. box-shadow: none;
  2154. outline: none !important;
  2155. }
  2156. .ms-container .ms-list.ms-focus {
  2157. box-shadow: none;
  2158. }
  2159. .ms-container .ms-selectable li.ms-hover {
  2160. background-color: #0053ab;
  2161. }
  2162. .ms-container .ms-selection li.ms-hover {
  2163. background-color: #0053ab;
  2164. }
  2165. .spinner-buttons.btn-group-vertical .btn {
  2166. background-color: #eeeeee;
  2167. border: none !important;
  2168. box-shadow: none !important;
  2169. height: 17px;
  2170. line-height: 16px;
  2171. margin: 0;
  2172. padding-left: 6px;
  2173. padding-right: 6px;
  2174. text-align: center;
  2175. width: 22px;
  2176. }
  2177. .spinner-buttons.btn-group-vertical .btn i {
  2178. color: #333333 !important;
  2179. line-height: 10px;
  2180. margin-top: -3px;
  2181. }
  2182. .spinner-buttons.btn-group-vertical .btn:first-child {
  2183. -webkit-border-radius: 0 0px 0 0 !important;
  2184. border-radius: 0 0px 0 0 !important;
  2185. }
  2186. .spinner-buttons.btn-group-vertical .btn:last-child {
  2187. -webkit-border-radius: 0 0 0px !important;
  2188. border-radius: 0 0 0px !important;
  2189. }
  2190. .note-editor {
  2191. border: 1px solid #dddddd;
  2192. position: relative;
  2193. }
  2194. .note-editor .note-toolbar {
  2195. background-color: #f3f3f3;
  2196. border-bottom: 1px solid #dddddd;
  2197. margin: 0;
  2198. }
  2199. .note-editor .note-statusbar {
  2200. background-color: #ffffff;
  2201. }
  2202. .note-editor .note-statusbar .note-resizebar {
  2203. border-top: 1px solid #dddddd;
  2204. height: 15px;
  2205. padding-top: 3px;
  2206. }
  2207. .note-popover .popover .popover-content {
  2208. padding: 5px 0 10px 5px;
  2209. }
  2210. .note-toolbar {
  2211. padding: 5px 0 10px 5px;
  2212. }
  2213. .code-edit-wrap {
  2214. padding: 0px !important;
  2215. }
  2216. .cm-s-ambiance .CodeMirror-linenumber {
  2217. color: #bcbcbc;
  2218. }
  2219. .cm-s-ambiance .CodeMirror-gutters {
  2220. background-color: #212121 !important;
  2221. box-shadow: none;
  2222. }
  2223. .cm-s-ambiance.CodeMirror {
  2224. background-color: #212121 !important;
  2225. box-shadow: none;
  2226. }
  2227. .bootstrap-timepicker-widget table td a:hover {
  2228. background-color: transparent;
  2229. border-color: transparent;
  2230. border-radius: 4px;
  2231. color: #0053ab;
  2232. text-decoration: none;
  2233. }
  2234. .editor-horizontal .popover-content {
  2235. padding: 9px 30px;
  2236. }
  2237. .datepicker table tr td.active,
  2238. .datepicker table tr td.active:hover,
  2239. .datepicker table tr td.active.disabled,
  2240. .datepicker table tr td.active.disabled:hover {
  2241. background-color: #0053ab !important;
  2242. background-image: none;
  2243. box-shadow: none;
  2244. }
  2245. /* Select2 */
  2246. .select2-container .select2-choice {
  2247. background-image: none !important;
  2248. border: none !important;
  2249. height: auto !important;
  2250. padding: 0px !important;
  2251. line-height: 22px !important;
  2252. background-color: transparent !important;
  2253. box-shadow: none !important;
  2254. }
  2255. .select2-container .select2-choice .select2-arrow {
  2256. background-image: none !important;
  2257. background: transparent;
  2258. border: none;
  2259. width: 14px;
  2260. top: 2px;
  2261. right: 5px;
  2262. }
  2263. .select2-container .select2-container-multi.form-control {
  2264. height: auto;
  2265. }
  2266. .select2-results .select2-highlighted {
  2267. background-color: #0053ab;
  2268. }
  2269. .select2-drop-active {
  2270. border: 1px solid #e3e3e3 !important;
  2271. padding-top: 5px;
  2272. -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  2273. box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  2274. -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  2275. }
  2276. .select2-search input {
  2277. border: 1px solid #e3e3e3;
  2278. }
  2279. .select2-container-multi {
  2280. width: 100%;
  2281. }
  2282. .select2-container-multi .select2-choices {
  2283. border: 2px solid rgba(255, 255, 255, 0.2) !important;
  2284. box-shadow: none !important;
  2285. background: transparent !important;
  2286. background-image: none !important;
  2287. -webkit-border-radius: 4px !important;
  2288. border-radius: 4px !important;
  2289. -moz-border-radius: 4px !important;
  2290. background-clip: padding-box !important;
  2291. min-height: 34px;
  2292. }
  2293. .select2-container-multi .select2-choices .select2-search-choice {
  2294. padding: 6px 8px 7px 19px;
  2295. margin: 5px 0 3px 5px;
  2296. background: #eeeeee;
  2297. border: none;
  2298. -webkit-box-shadow: none;
  2299. box-shadow: none;
  2300. }
  2301. .select2-container-multi .select2-choices .select2-search-field input {
  2302. padding: 7px 7px 7px 10px;
  2303. font-family: inherit;
  2304. }
  2305. .select2-container-multi .select2-choices .select2-search-choice-close {
  2306. top: 6px;
  2307. }
  2308. .select2-chosen {
  2309. line-height: 34px;
  2310. padding-left: 15px;
  2311. color: #444444;
  2312. }
  2313. /* Timepiker */
  2314. .bootstrap-timepicker-widget table td input {
  2315. border: none;
  2316. }
  2317. /* Dropzone */
  2318. .dropzone {
  2319. min-height: 230px;
  2320. border: 2px dashed rgba(0, 0, 0, 0.3);
  2321. background: white;
  2322. border-radius: 6px;
  2323. }
  2324. .dropzone .dz-message {
  2325. font-size: 30px;
  2326. }
  2327. /* ==============
  2328. Calendar
  2329. ===================*/
  2330. .calendar {
  2331. float: left;
  2332. margin-bottom: 0px;
  2333. }
  2334. .none-border .modal-footer {
  2335. border-top: none;
  2336. }
  2337. .fc-toolbar {
  2338. margin-bottom: 5px;
  2339. }
  2340. .fc-toolbar h2 {
  2341. font-size: 18px;
  2342. font-weight: 600;
  2343. line-height: 30px;
  2344. text-transform: uppercase;
  2345. }
  2346. .fc-day {
  2347. background: #ffffff;
  2348. }
  2349. .fc-toolbar .fc-state-active,
  2350. .fc-toolbar .ui-state-active,
  2351. .fc-toolbar button:focus,
  2352. .fc-toolbar button:hover,
  2353. .fc-toolbar .ui-state-hover {
  2354. z-index: 0;
  2355. }
  2356. .fc-widget-header {
  2357. border: 1px solid #d5d5d5;
  2358. }
  2359. .fc-widget-content {
  2360. border: 1px solid #d5d5d5;
  2361. }
  2362. .fc th.fc-widget-header {
  2363. background: #dddddd;
  2364. font-size: 14px;
  2365. line-height: 20px;
  2366. padding: 10px 0px;
  2367. text-transform: uppercase;
  2368. }
  2369. .fc-button {
  2370. background: #ffffff;
  2371. border: 1px solid #d5d5d5;
  2372. color: #555555;
  2373. text-transform: capitalize;
  2374. }
  2375. .fc-text-arrow {
  2376. font-family: arial;
  2377. font-size: 16px;
  2378. }
  2379. .fc-state-hover {
  2380. background: #F5F5F5;
  2381. }
  2382. .fc-state-highlight {
  2383. background: #f0f0f0;
  2384. }
  2385. .fc-cell-overlay {
  2386. background: #f0f0f0;
  2387. }
  2388. .fc-unthemed .fc-today {
  2389. background: #ffffff;
  2390. }
  2391. .fc-event {
  2392. border-radius: 2px;
  2393. border: none;
  2394. cursor: move;
  2395. font-size: 13px;
  2396. margin: 5px 7px;
  2397. padding: 5px 5px;
  2398. text-align: center;
  2399. background-color: #0053ab;
  2400. }
  2401. .external-event {
  2402. color: #ffffff;
  2403. cursor: move;
  2404. margin: 10px 0;
  2405. padding: 6px 10px;
  2406. }
  2407. .fc-basic-view td.fc-week-number span {
  2408. padding-right: 5px;
  2409. }
  2410. .fc-basic-view td.fc-day-number {
  2411. padding-right: 5px;
  2412. }
  2413. /* ==============
  2414. Widgets
  2415. ===================*/
  2416. .widget-chart li {
  2417. width: 31.5%;
  2418. display: inline-block;
  2419. padding: 0;
  2420. }
  2421. .widget-chart li i {
  2422. font-size: 22px;
  2423. }
  2424. /*
  2425. File: Pages
  2426. */
  2427. /*
  2428. - Sweet Alerts
  2429. - Maps
  2430. - Email
  2431. - Timeline
  2432. - Charts
  2433. - Count Down
  2434. - Gallery
  2435. - Maintenance
  2436. - Account Pages
  2437. */
  2438. /* =========== */
  2439. /* Sweet Alert */
  2440. /* =========== */
  2441. .sweet-alert h2 {
  2442. font-size: 18px;
  2443. position: relative;
  2444. }
  2445. .sweet-alert p {
  2446. font-size: 14px;
  2447. line-height: 22px;
  2448. }
  2449. .sweet-alert .icon.success .placeholder {
  2450. border: 4px solid rgba(92, 180, 91, 0.3);
  2451. }
  2452. .sweet-alert .icon.success .line {
  2453. background-color: #5cb45b;
  2454. }
  2455. .sweet-alert .icon.warning {
  2456. border-color: #f7b543;
  2457. }
  2458. .sweet-alert .icon.info {
  2459. border-color: #04a2b3;
  2460. }
  2461. .sweet-alert .btn-warning:focus,
  2462. .sweet-alert .btn-info:focus,
  2463. .sweet-alert .btn-success:focus,
  2464. .sweet-alert .btn-danger:focus,
  2465. .sweet-alert .btn-default:focus {
  2466. box-shadow: none;
  2467. }
  2468. .sweet-alert .btn-lg {
  2469. font-size: 15px !important;
  2470. padding: 6px 14px !important;
  2471. }
  2472. .sweet-alert .icon.error {
  2473. border-color: #f03154;
  2474. }
  2475. .sweet-alert .icon.error .line {
  2476. background-color: #f03154;
  2477. }
  2478. .sweet-alert .icon.warning .body,
  2479. .sweet-alert .icon.warning .dot {
  2480. background-color: #f7b543;
  2481. }
  2482. /* ==============
  2483. Timeline
  2484. ===================*/
  2485. .cd-container {
  2486. width: 90%;
  2487. max-width: 1170px;
  2488. margin: 0 auto;
  2489. }
  2490. .cd-container::after {
  2491. content: '';
  2492. display: table;
  2493. clear: both;
  2494. }
  2495. #cd-timeline {
  2496. margin-bottom: 2em;
  2497. margin-top: 2em;
  2498. padding: 2em 0;
  2499. position: relative;
  2500. }
  2501. #cd-timeline::before {
  2502. background: #fafafa;
  2503. content: '';
  2504. height: 100%;
  2505. left: 18px;
  2506. position: absolute;
  2507. top: 0;
  2508. width: 4px;
  2509. }
  2510. @media only screen and (min-width: 1170px) {
  2511. #cd-timeline {
  2512. margin-bottom: 3em;
  2513. margin-top: 3em;
  2514. }
  2515. #cd-timeline::before {
  2516. left: 50%;
  2517. margin-left: -2px;
  2518. }
  2519. }
  2520. .cd-timeline-block {
  2521. margin: 2em 0;
  2522. position: relative;
  2523. }
  2524. .cd-timeline-block:after {
  2525. clear: both;
  2526. content: "";
  2527. display: table;
  2528. }
  2529. .cd-timeline-block:first-child {
  2530. margin-top: 0;
  2531. }
  2532. .cd-timeline-block:last-child {
  2533. margin-bottom: 0;
  2534. }
  2535. @media only screen and (min-width: 1170px) {
  2536. .cd-timeline-block {
  2537. margin: 4em 0;
  2538. }
  2539. .cd-timeline-block:first-child {
  2540. margin-top: 0;
  2541. }
  2542. .cd-timeline-block:last-child {
  2543. margin-bottom: 0;
  2544. }
  2545. }
  2546. .cd-timeline-img {
  2547. position: absolute;
  2548. top: 0;
  2549. left: 0;
  2550. width: 40px;
  2551. height: 40px;
  2552. border-radius: 50%;
  2553. box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  2554. text-align: center;
  2555. line-height: 40px;
  2556. font-size: 20px;
  2557. color: #fff;
  2558. }
  2559. .cd-timeline-img.cd-success {
  2560. background: #5cb45b;
  2561. }
  2562. .cd-timeline-img.cd-info {
  2563. background: #04a2b3;
  2564. }
  2565. .cd-timeline-img.cd-pink {
  2566. background: #e866ff;
  2567. }
  2568. .cd-timeline-img.cd-danger {
  2569. background: #f03154;
  2570. }
  2571. .cd-timeline-img.cd-primary {
  2572. background: #0053ab;
  2573. }
  2574. .cd-timeline-img.cd-warning {
  2575. background: #f7b543;
  2576. }
  2577. @media only screen and (min-width: 1170px) {
  2578. .cd-timeline-img {
  2579. width: 60px;
  2580. height: 60px;
  2581. line-height: 60px;
  2582. left: 50%;
  2583. margin-left: -30px;
  2584. -webkit-transform: translateZ(0);
  2585. -webkit-backface-visibility: hidden;
  2586. }
  2587. .cssanimations .cd-timeline-img.is-hidden {
  2588. visibility: hidden;
  2589. }
  2590. .cssanimations .cd-timeline-img.bounce-in {
  2591. visibility: visible;
  2592. -webkit-animation: cd-bounce-1 0.6s;
  2593. -moz-animation: cd-bounce-1 0.6s;
  2594. animation: cd-bounce-1 0.6s;
  2595. }
  2596. }
  2597. .cd-timeline-content {
  2598. -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  2599. -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  2600. background: #fafafa;
  2601. border-radius: 0;
  2602. box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  2603. margin-left: 60px;
  2604. padding: 1em;
  2605. position: relative;
  2606. }
  2607. .cd-timeline-content img {
  2608. display: block;
  2609. width: 100%;
  2610. }
  2611. .cd-timeline-content:after {
  2612. clear: both;
  2613. content: "";
  2614. display: table;
  2615. }
  2616. .cd-timeline-content h2 {
  2617. margin-top: 0;
  2618. }
  2619. .cd-timeline-content p {
  2620. color: #666666;
  2621. font-size: 14px;
  2622. margin: 10px 0px 10px 0px;
  2623. }
  2624. .cd-timeline-content .cd-read-more {
  2625. background: #acb7c0;
  2626. border-radius: 0.25em;
  2627. color: white;
  2628. display: inline-block;
  2629. float: right;
  2630. font-size: 14px;
  2631. padding: .8em 1em;
  2632. }
  2633. .cd-timeline-content .cd-date {
  2634. display: inline-block;
  2635. font-size: 14px;
  2636. }
  2637. .cd-timeline-content h3 {
  2638. font-size: 21px;
  2639. margin: 0px;
  2640. }
  2641. .no-touch .cd-timeline-content .cd-read-more:hover {
  2642. background-color: #bac4cb;
  2643. }
  2644. .cd-timeline-content .cd-date {
  2645. float: left;
  2646. padding: .8em 0;
  2647. opacity: .7;
  2648. }
  2649. .cd-timeline-content::before {
  2650. content: '';
  2651. position: absolute;
  2652. top: 16px;
  2653. right: 100%;
  2654. height: 0;
  2655. width: 0;
  2656. border: 12px solid transparent;
  2657. border-right: 12px solid #fafafa;
  2658. }
  2659. @media only screen and (min-width: 1170px) {
  2660. .cd-timeline-content {
  2661. margin-left: 0;
  2662. padding: 1.6em;
  2663. width: 45%;
  2664. }
  2665. .cd-timeline-content::before {
  2666. top: 24px;
  2667. left: 100%;
  2668. border-color: transparent;
  2669. border-left-color: #fafafa;
  2670. }
  2671. .cd-timeline-content .cd-read-more {
  2672. float: left;
  2673. }
  2674. .cd-timeline-content .cd-date {
  2675. position: absolute;
  2676. width: 100%;
  2677. left: 122%;
  2678. top: 6px;
  2679. }
  2680. .cd-timeline-block:nth-child(even) .cd-timeline-content {
  2681. float: right;
  2682. }
  2683. .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
  2684. top: 24px;
  2685. left: auto;
  2686. right: 100%;
  2687. border-color: transparent;
  2688. border-right-color: #fafafa;
  2689. }
  2690. .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
  2691. float: right;
  2692. }
  2693. .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
  2694. left: auto;
  2695. right: 122%;
  2696. text-align: right;
  2697. }
  2698. .cssanimations .cd-timeline-content.is-hidden {
  2699. visibility: hidden;
  2700. }
  2701. .cssanimations .cd-timeline-content.bounce-in {
  2702. visibility: visible;
  2703. -webkit-animation: cd-bounce-2 0.6s;
  2704. -moz-animation: cd-bounce-2 0.6s;
  2705. animation: cd-bounce-2 0.6s;
  2706. }
  2707. }
  2708. @media only screen and (min-width: 1170px) {
  2709. .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
  2710. -webkit-animation: cd-bounce-2-inverse 0.6s;
  2711. -moz-animation: cd-bounce-2-inverse 0.6s;
  2712. animation: cd-bounce-2-inverse 0.6s;
  2713. }
  2714. }
  2715. /* ==============
  2716. Charts
  2717. ===================*/
  2718. .jqstooltip {
  2719. -webkit-box-sizing: content-box;
  2720. -moz-box-sizing: content-box;
  2721. box-sizing: content-box;
  2722. }
  2723. .chart {
  2724. position: relative;
  2725. display: inline-block;
  2726. width: 110px;
  2727. height: 110px;
  2728. margin-top: 20px;
  2729. margin-bottom: 20px;
  2730. text-align: center;
  2731. }
  2732. .chart canvas {
  2733. position: absolute;
  2734. top: 0;
  2735. left: 0;
  2736. }
  2737. .chart.chart-widget-pie {
  2738. margin-top: 5px;
  2739. margin-bottom: 5px;
  2740. }
  2741. .percent {
  2742. display: inline-block;
  2743. line-height: 110px;
  2744. z-index: 2;
  2745. }
  2746. .percent:after {
  2747. content: '%';
  2748. margin-left: 0.1em;
  2749. font-size: .8em;
  2750. }
  2751. #flotTip {
  2752. padding: 4px 8px;
  2753. background-color: #000000;
  2754. z-index: 100;
  2755. color: #ffffff;
  2756. opacity: .7;
  2757. font-size: 12px;
  2758. -webkit-border-radius: 5px;
  2759. -moz-border-radius: 5px;
  2760. border-radius: 5px;
  2761. }
  2762. /* ==============
  2763. Email
  2764. ===================*/
  2765. .mails a {
  2766. color: #444444;
  2767. }
  2768. .mails .checkbox {
  2769. margin-bottom: 0px;
  2770. margin-top: 0px;
  2771. vertical-align: middle;
  2772. }
  2773. .mails .checkbox label {
  2774. min-height: 16px;
  2775. }
  2776. /* ==============
  2777. Count Down
  2778. ===================*/
  2779. .home-wrapper {
  2780. margin: 10% 0px;
  2781. }
  2782. .home-text {
  2783. font-family: 'Nunito', sans-serif;
  2784. }
  2785. .lj-countdown {
  2786. color: #0053ab;
  2787. margin-top: 40px;
  2788. text-align: center;
  2789. }
  2790. .lj-countdown div {
  2791. display: inline-block;
  2792. }
  2793. .lj-countdown div span {
  2794. display: block;
  2795. width: 150px;
  2796. }
  2797. .lj-countdown div span:first-child {
  2798. font-size: 3em;
  2799. font-weight: 700;
  2800. height: 48px;
  2801. line-height: 48px;
  2802. }
  2803. .lj-countdown div span:last-child {
  2804. color: #333333;
  2805. font-size: 0.9em;
  2806. height: 25px;
  2807. line-height: 25px;
  2808. }
  2809. .lj-countdown > * {
  2810. text-align: center;
  2811. }
  2812. /* ==============
  2813. Gallery
  2814. ===================*/
  2815. .portfolioFilter a {
  2816. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  2817. -moz-transition: all 0.3s ease-out;
  2818. -ms-transition: all 0.3s ease-out;
  2819. -o-transition: all 0.3s ease-out;
  2820. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  2821. -webkit-transition: all 0.3s ease-out;
  2822. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  2823. color: #333333;
  2824. padding: 5px 10px;
  2825. transition: all 0.3s ease-out;
  2826. }
  2827. .portfolioFilter a:hover {
  2828. background-color: #0053ab;
  2829. color: #ffffff;
  2830. }
  2831. .portfolioFilter a.current {
  2832. background-color: #0053ab;
  2833. color: #ffffff;
  2834. }
  2835. .thumb {
  2836. background-color: #ffffff;
  2837. border-radius: 3px;
  2838. box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  2839. margin-top: 30px;
  2840. padding-bottom: 10px;
  2841. padding-left: 10px;
  2842. padding-right: 10px;
  2843. padding-top: 10px;
  2844. width: 100%;
  2845. }
  2846. .thumb-img {
  2847. border-radius: 2px;
  2848. overflow: hidden;
  2849. width: 100%;
  2850. }
  2851. .gal-detail h4 {
  2852. margin-top: 16px;
  2853. }
  2854. /* ==============
  2855. Maintenance
  2856. ===================*/
  2857. .icon-main {
  2858. font-size: 88px;
  2859. margin-bottom: 50px;
  2860. }
  2861. .maintenance-page {
  2862. margin: 10% 0%;
  2863. }
  2864. .mainten-box {
  2865. margin-bottom: 30px;
  2866. }
  2867. .mainten-box .text-m-mode {
  2868. margin: 0px auto;
  2869. width: 80%;
  2870. }
  2871. .media-main a.pull-left {
  2872. width: 100px;
  2873. }
  2874. .media-main .info {
  2875. color: #2a323c;
  2876. overflow: hidden;
  2877. }
  2878. .media-main .info h4 {
  2879. margin-bottom: 5px;
  2880. }
  2881. .user-card p.info-text {
  2882. line-height: 26px;
  2883. margin-top: 15px;
  2884. }
  2885. /* ==============
  2886. Maps
  2887. ===================*/
  2888. .gmaps,
  2889. .gmaps-panaroma {
  2890. height: 300px;
  2891. background: #eeeeee;
  2892. border-radius: 3px;
  2893. }
  2894. .gmaps-overlay {
  2895. display: block;
  2896. text-align: center;
  2897. color: #ffffff;
  2898. font-size: 16px;
  2899. line-height: 40px;
  2900. background: #0053ab;
  2901. border-radius: 4px;
  2902. padding: 10px 20px;
  2903. }
  2904. .gmaps-overlay_arrow {
  2905. left: 50%;
  2906. margin-left: -16px;
  2907. width: 0;
  2908. height: 0;
  2909. position: absolute;
  2910. }
  2911. .gmaps-overlay_arrow.above {
  2912. bottom: -15px;
  2913. border-left: 16px solid transparent;
  2914. border-right: 16px solid transparent;
  2915. border-top: 16px solid #0053ab;
  2916. }
  2917. .gmaps-overlay_arrow.below {
  2918. top: -15px;
  2919. border-left: 16px solid transparent;
  2920. border-right: 16px solid transparent;
  2921. border-bottom: 16px solid #0053ab;
  2922. }
  2923. /* ==============
  2924. Account Pages
  2925. ===================*/
  2926. .accountbg {
  2927. background: #fe6066;
  2928. position: absolute;
  2929. height: 100%;
  2930. width: 100%;
  2931. top: 0;
  2932. }
  2933. .wrapper-page {
  2934. margin: 7.5% auto;
  2935. width: 420px;
  2936. position: relative;
  2937. }
  2938. .panel-pages {
  2939. border: 4px solid #eee !important;
  2940. }
  2941. .panel-pages .logo-admin {
  2942. font-size: 28px;
  2943. }
  2944. .panel-pages .panel-body {
  2945. padding: 25px 30px;
  2946. }
  2947. .panel-pages .panel-heading {
  2948. -moz-border-radius: 6px 6px 0px 0px;
  2949. -webkit-border-radius: 6px 6px 0px 0px;
  2950. border-radius: 6px 6px 0px 0px;
  2951. padding: 40px 20px;
  2952. position: relative;
  2953. }
  2954. .panel-pages .panel-heading h3 {
  2955. position: relative;
  2956. z-index: 999;
  2957. }
  2958. .user-thumb {
  2959. position: relative;
  2960. z-index: 999;
  2961. }
  2962. .user-thumb img {
  2963. height: 88px;
  2964. margin: 0 auto;
  2965. width: 88px;
  2966. }
  2967. .ex-page-content h1 {
  2968. font-size: 98px;
  2969. font-weight: 700;
  2970. line-height: 150px;
  2971. text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px, rgba(61, 61, 61, 0.3) 3px 3px;
  2972. }
  2973. /* ==== =====
  2974. Invoice
  2975. ============= */
  2976. .table > thead > tr > .no-line {
  2977. border-bottom: none;
  2978. }
  2979. .table > tbody > tr > .no-line {
  2980. border-top: none;
  2981. }
  2982. .table > tbody > tr > .thick-line {
  2983. border-top: 2px solid;
  2984. }
  2985. /*
  2986. File: Menu
  2987. */
  2988. .topbar {
  2989. background: #ffffff;
  2990. left: 0;
  2991. position: fixed;
  2992. right: 0;
  2993. top: 0;
  2994. z-index: 999;
  2995. }
  2996. .topbar .topbar-left {
  2997. background-color: #ffffff;
  2998. float: left;
  2999. height: 90px;
  3000. position: relative;
  3001. width: 240px;
  3002. z-index: 1;
  3003. }
  3004. .logo {
  3005. width: 100px;
  3006. }
  3007. .logo img {
  3008. width: 90%;
  3009. margin-top: 6%;
  3010. }
  3011. .logo-sm {
  3012. width: 50px;
  3013. }
  3014. .logo-sm {
  3015. width: 100%;
  3016. }
  3017. .logo span,
  3018. .logo-sm span {
  3019. color: #0053ab;
  3020. font-family: 'Crete Round', serif;
  3021. }
  3022. .logo-sm {
  3023. display: none;
  3024. }
  3025. .logo-sm span {
  3026. background-color: #eee;
  3027. height: 70px;
  3028. width: 70px;
  3029. display: block;
  3030. line-height: 70px;
  3031. margin-top: 0px;
  3032. margin-left: 0px;
  3033. }
  3034. .navbar-default {
  3035. background-color: #d31119;
  3036. border-radius: 0px;
  3037. border: none;
  3038. margin-bottom: 0px;
  3039. }
  3040. .navbar-default .navbar-nav > .open > a {
  3041. background-color: rgba(255, 255, 255, 0.1);
  3042. }
  3043. .navbar-default .navbar-nav > .open > a:focus {
  3044. background-color: rgba(255, 255, 255, 0.1);
  3045. }
  3046. .navbar-default .navbar-nav > .open > a:hover {
  3047. background-color: rgba(255, 255, 255, 0.1);
  3048. }
  3049. .nav > li > a {
  3050. color: #ffffff !important;
  3051. padding: 0px 15px;
  3052. position: relative;
  3053. }
  3054. .nav > li > a i {
  3055. font-size: 20px;
  3056. }
  3057. .nav > li > a .badge {
  3058. position: absolute;
  3059. right: 8px;
  3060. top: 7px;
  3061. display: block;
  3062. height: 7px;
  3063. width: 7px;
  3064. padding: 0;
  3065. min-width: 1px;
  3066. }
  3067. .profile {
  3068. padding-top: 17px !important;
  3069. padding-bottom: 12px !important;
  3070. }
  3071. .profile img {
  3072. border: 2px solid #edf0f0;
  3073. height: 36px;
  3074. width: 36px;
  3075. float: left;
  3076. }
  3077. .profile .profile-username {
  3078. margin-left: 45px;
  3079. display: block;
  3080. }
  3081. .profile .profile-username label {
  3082. margin-bottom: 0;
  3083. }
  3084. .dropdown-menu-lg {
  3085. width: 270px;
  3086. }
  3087. .dropdown-menu-lg .list-group {
  3088. margin-bottom: 0;
  3089. }
  3090. .dropdown-menu-lg .list-group-item {
  3091. padding: 10px 20px;
  3092. border-left: 0;
  3093. border-right: 0;
  3094. }
  3095. .dropdown-menu-lg .list-group-item:last-child {
  3096. border-bottom: none;
  3097. }
  3098. .dropdown-menu-lg .media p {
  3099. color: #898989;
  3100. }
  3101. .dropdown-menu-lg .media-heading,
  3102. .dropdown-menu-lg p {
  3103. margin-bottom: 0;
  3104. text-overflow: ellipsis;
  3105. white-space: nowrap;
  3106. display: block;
  3107. width: 100%;
  3108. font-weight: normal;
  3109. overflow: hidden;
  3110. }
  3111. .notifi-title {
  3112. color: #ffffff;
  3113. font-size: 16px;
  3114. font-weight: 400;
  3115. padding: 10px 0 10px;
  3116. margin-top: -5px;
  3117. background-color: #0053ab;
  3118. }
  3119. .notifi-title .badge-success {
  3120. background-color: rgba(255, 255, 255, 0.5);
  3121. color: #2a323c;
  3122. font-weight: bold;
  3123. margin-left: 5px;
  3124. }
  3125. .navbar-form {
  3126. border: none;
  3127. box-shadow: none;
  3128. padding: 0px;
  3129. }
  3130. .search-bar {
  3131. background-color: rgba(255, 255, 255, 0.1) !important;
  3132. border: none !important;
  3133. box-shadow: none !important;
  3134. color: #ffffff;
  3135. font-size: 14px;
  3136. height: 42px;
  3137. margin-top: 6px;
  3138. margin-left: 15px;
  3139. border-radius: 30px;
  3140. padding-left: 20px;
  3141. }
  3142. .btn-search {
  3143. display: none;
  3144. }
  3145. input.search-bar::-webkit-input-placeholder {
  3146. color: rgba(255, 255, 255, 0.7);
  3147. }
  3148. input.search-bar:-moz-placeholder {
  3149. color: rgba(255, 255, 255, 0.7);
  3150. }
  3151. input.search-bar::-moz-placeholder {
  3152. color: rgba(255, 255, 255, 0.7);
  3153. }
  3154. input.search-bar:-ms-input-placeholder {
  3155. color: rgba(255, 255, 255, 0.7);
  3156. }
  3157. .navbar-nav {
  3158. margin: 0;
  3159. }
  3160. .side-menu {
  3161. bottom: 0;
  3162. top: 0;
  3163. width: 240px;
  3164. z-index: 2;
  3165. }
  3166. .side-menu.left {
  3167. background: #ffffff;
  3168. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  3169. position: absolute;
  3170. top: 70px;
  3171. z-index: 99;
  3172. }
  3173. body.fixed-left .side-menu.left {
  3174. bottom: 50px;
  3175. height: 100%;
  3176. margin-bottom: -70px;
  3177. margin-top: 0px;
  3178. padding-bottom: 70px;
  3179. position: fixed;
  3180. }
  3181. .content-page {
  3182. margin-left: 240px;
  3183. overflow: hidden;
  3184. }
  3185. .content-page > .content {
  3186. margin-bottom: 60px;
  3187. margin-top: 70px;
  3188. padding: 20px 5px 15px 5px;
  3189. }
  3190. .button-menu-mobile {
  3191. background: #0053ab;
  3192. border: none;
  3193. color: rgba(255, 255, 255, 0.8);
  3194. font-size: 16px;
  3195. line-height:22px;
  3196. height: 26px;
  3197. width: 26px;
  3198. border-radius: 50%;
  3199. margin-top: 22px;
  3200. margin-left: 10px;
  3201. }
  3202. .button-menu-mobile:hover {
  3203. color: #ffffff;
  3204. }
  3205. .sidebar-inner {
  3206. height: 100%;
  3207. }
  3208. #sidebar-menu,
  3209. #sidebar-menu ul,
  3210. #sidebar-menu li,
  3211. #sidebar-menu a {
  3212. border: 0;
  3213. font-weight: normal;
  3214. line-height: 1;
  3215. list-style: none;
  3216. margin: 0;
  3217. padding: 0;
  3218. position: relative;
  3219. text-decoration: none;
  3220. }
  3221. .notification-icon-box {
  3222. height: 36px;
  3223. width: 36px;
  3224. padding: 0 !important;
  3225. border: 2px solid rgba(255, 255, 255, 0.5) !important;
  3226. line-height: 35px !important;
  3227. text-align: center;
  3228. border-radius: 50%;
  3229. margin: 17px 5px;
  3230. }
  3231. .notification-icon-box i {
  3232. font-size: 16px !important;
  3233. }
  3234. #sidebar-menu {
  3235. background-color: #ffffff;
  3236. padding-bottom: 50px;
  3237. width: 100%;
  3238. }
  3239. #sidebar-menu a {
  3240. line-height: 1.3;
  3241. }
  3242. #sidebar-menu .badge {
  3243. margin-top: 4px;
  3244. }
  3245. #sidebar-menu ul ul {
  3246. display: none;
  3247. }
  3248. #sidebar-menu ul ul li {
  3249. border-top: 0;
  3250. }
  3251. #sidebar-menu ul ul li.active a {
  3252. color: #2a323c;
  3253. }
  3254. #sidebar-menu ul ul a {
  3255. color: rgba(42, 50, 60, 0.8);
  3256. display: block;
  3257. padding: 10px 25px 10px 65px;
  3258. }
  3259. #sidebar-menu ul ul a:hover {
  3260. color: #2a323c;
  3261. }
  3262. #sidebar-menu ul ul a i {
  3263. margin-right: 5px;
  3264. }
  3265. #sidebar-menu ul ul ul a {
  3266. padding-left: 80px;
  3267. }
  3268. #sidebar-menu > ul > li > a {
  3269. color: #2a323c;
  3270. display: block;
  3271. padding: 15px 25px;
  3272. background-color: #ffffff;
  3273. font-size: 15px;
  3274. height: 50px !important;
  3275. }
  3276. #sidebar-menu > ul > li > a:hover {
  3277. background-color: #f2f2f2;
  3278. text-decoration: none;
  3279. }
  3280. #sidebar-menu > ul > li > a > span {
  3281. vertical-align: middle;
  3282. }
  3283. #sidebar-menu > ul > li > a > i {
  3284. display: inline-block;
  3285. font-size: 18px;
  3286. line-height: 17px;
  3287. margin-left: 3px;
  3288. margin-right: 10px;
  3289. text-align: center;
  3290. vertical-align: middle;
  3291. width: 20px;
  3292. color: #4a5869;
  3293. }
  3294. #sidebar-menu > ul > li > a > i.i-right {
  3295. float: right;
  3296. margin: 3px 0 0 0;
  3297. }
  3298. #sidebar-menu > ul > li > a.active {
  3299. color: #0053ab;
  3300. }
  3301. #sidebar-menu > ul > li > a.active i {
  3302. color: #0053ab;
  3303. }
  3304. .subdrop {
  3305. background: #f2f2f2 !important;
  3306. }
  3307. #wrapper.enlarged #sidebar-menu ul ul {
  3308. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  3309. }
  3310. #wrapper.enlarged .left.side-menu {
  3311. padding-top: 0;
  3312. width: 70px;
  3313. z-index: 5;
  3314. }
  3315. #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i {
  3316. margin-right: 20px !important;
  3317. margin-left: 0 !important;
  3318. font-size: 22px;
  3319. }
  3320. #wrapper.enlarged .left.side-menu span.pull-right {
  3321. display: none !important;
  3322. }
  3323. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li {
  3324. position: relative;
  3325. white-space: nowrap;
  3326. }
  3327. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
  3328. position: relative;
  3329. width: 260px;
  3330. background-color: #f2f2f2;
  3331. }
  3332. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul {
  3333. display: block;
  3334. left: 70px;
  3335. position: absolute;
  3336. width: 190px;
  3337. }
  3338. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a {
  3339. background: #ffffff;
  3340. border: none;
  3341. box-shadow: none;
  3342. padding-left: 15px;
  3343. position: relative;
  3344. width: 190px;
  3345. z-index: 6;
  3346. }
  3347. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover {
  3348. color: #2a323c;
  3349. }
  3350. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover a span {
  3351. display: inline;
  3352. }
  3353. #wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop {
  3354. color: #2a323c !important;
  3355. }
  3356. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul {
  3357. display: none;
  3358. }
  3359. #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li:hover > ul {
  3360. display: block;
  3361. left: 190px;
  3362. margin-top: -36px;
  3363. position: absolute;
  3364. width: 190px;
  3365. }
  3366. #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li > a span.pull-right {
  3367. -ms-transform: rotate(270deg);
  3368. -webkit-transform: rotate(270deg);
  3369. position: absolute;
  3370. right: 20px;
  3371. top: 12px;
  3372. transform: rotate(270deg);
  3373. }
  3374. #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li.active a {
  3375. color: #2a323c;
  3376. }
  3377. #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > a span {
  3378. display: none;
  3379. padding-left: 10px;
  3380. }
  3381. #wrapper.enlarged .left.side-menu .user-details {
  3382. display: none;
  3383. }
  3384. #wrapper.enlarged .content-page {
  3385. margin-left: 70px;
  3386. }
  3387. #wrapper.enlarged .topbar .topbar-left {
  3388. width: 70px !important;
  3389. }
  3390. #wrapper.enlarged .topbar .topbar-left .logo {
  3391. display: none;
  3392. opacity: 0;
  3393. }
  3394. #wrapper.enlarged .topbar .topbar-left .logo-sm {
  3395. display: inline-block;
  3396. }
  3397. #wrapper.enlarged .footer {
  3398. left: 70px;
  3399. }
  3400. .user-details {
  3401. min-height: 80px;
  3402. padding: 20px;
  3403. position: relative;
  3404. }
  3405. .user-details img {
  3406. position: relative;
  3407. z-index: 9999;
  3408. height: 64px;
  3409. width: 64px;
  3410. }
  3411. .user-details .user-info {
  3412. text-align: center;
  3413. }
  3414. .user-details .user-info a.dropdown-toggle {
  3415. color: #2a323c;
  3416. display: block;
  3417. font-size: 15px;
  3418. font-weight: 700;
  3419. padding-top: 5px;
  3420. margin-bottom: 5px;
  3421. }
  3422. .user-details .user-info .text-success {
  3423. color: #5cb45b;
  3424. }
  3425. #wrapper.right-bar-enabled .right-bar {
  3426. right: 0;
  3427. }
  3428. #wrapper.right-bar-enabled .left-layout {
  3429. left: 0;
  3430. }
  3431. .side-bar.right-bar {
  3432. float: right !important;
  3433. right: -266px;
  3434. top: 70px;
  3435. }
  3436. .side-bar {
  3437. -moz-transition: all 200ms ease-out;
  3438. -webkit-transition: all 200ms ease-out;
  3439. background-color: #ffffff;
  3440. box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
  3441. display: block;
  3442. float: left;
  3443. height: 100%;
  3444. overflow-y: auto;
  3445. position: fixed;
  3446. transition: all 200ms ease-out;
  3447. width: 240px;
  3448. }
  3449. .right-bar {
  3450. background: #ffffff !important;
  3451. z-index: 99 !important;
  3452. }
  3453. .right-bar h4 {
  3454. border-bottom: 1px solid #eeeeee;
  3455. padding-bottom: 10px;
  3456. }
  3457. .contact-list {
  3458. max-height: 600px;
  3459. }
  3460. .contact-list .list-group-item {
  3461. border: none;
  3462. }
  3463. .contact-list .list-group-item:hover {
  3464. background: #f5f5f5;
  3465. }
  3466. .contact-list i.offline {
  3467. color: #f03154;
  3468. }
  3469. .contact-list i.away {
  3470. color: #f7b543;
  3471. }
  3472. .page-header-title {
  3473. background-color: #d31119;
  3474. margin: -20px -5px 23px -5px;
  3475. padding: 10px 15px 100px 20px;
  3476. box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  3477. }
  3478. .page-header-title .breadcrumb {
  3479. margin-bottom: 0;
  3480. }
  3481. .page-header-title .page-title {
  3482. margin-bottom: 12px;
  3483. color: #ffffff;
  3484. font-size: 22px;
  3485. }
  3486. .page-content-wrapper {
  3487. margin-top: -100px;
  3488. }
  3489. body.fixed-left-void {
  3490. min-height: 1024px;
  3491. }
  3492. .small-menu .side-menu,
  3493. .small-menu .topbar-left {
  3494. width: 190px;
  3495. }
  3496. .small-menu .side-menu .badge,
  3497. .small-menu .topbar-left .badge {
  3498. display: none;
  3499. }
  3500. .small-menu #sidebar-menu > ul > li > a {
  3501. height: auto !important;
  3502. text-align: center;
  3503. }
  3504. .small-menu #sidebar-menu > ul > li > a > i {
  3505. font-size: 24px;
  3506. line-height: 26px;
  3507. display: block;
  3508. width: auto;
  3509. margin: 0;
  3510. }
  3511. .small-menu #sidebar-menu > ul > li > a > span.pull-right {
  3512. display: none !important;
  3513. }
  3514. .small-menu #sidebar-menu ul ul a {
  3515. padding: 10px;
  3516. text-align: center;
  3517. }
  3518. .small-menu .content-page {
  3519. margin-left: 190px;
  3520. }
  3521. .small-menu #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a {
  3522. text-align: left;
  3523. height: 50px !important;
  3524. }
  3525. .small-menu #wrapper.enlarged .left.side-menu #sidebar-menu ul ul a {
  3526. text-align: left;
  3527. }
  3528. .small-menu #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i {
  3529. margin-right: 20px !important;
  3530. margin-left: 0 !important;
  3531. font-size: 22px;
  3532. display: inline-block;
  3533. line-height: 17px;
  3534. text-align: center;
  3535. vertical-align: middle;
  3536. width: 20px;
  3537. }
  3538. .layout2 .topbar-left {
  3539. background-color: #2a323c;
  3540. }
  3541. .layout2 .topbar-left .logo,
  3542. .layout2 .topbar-left .logo-sm {
  3543. color: #ffffff !important;
  3544. }
  3545. .layout2 .page-header-title {
  3546. background-color: transparent;
  3547. box-shadow: none;
  3548. padding: 10px 15px 85px 20px;
  3549. }
  3550. .layout2 .page-header-title .page-title {
  3551. color: #2a323c;
  3552. }
  3553. /*
  3554. File: Responsive
  3555. */
  3556. @media only screen and (max-width: 6000px) and (min-width: 700px) {
  3557. .wrapper.right-bar-enabled .right-bar {
  3558. right: 0;
  3559. z-index: 99;
  3560. }
  3561. }
  3562. @media (min-width: 768px) and (max-width: 991px) {
  3563. body {
  3564. overflow-x: hidden;
  3565. }
  3566. .search-bar {
  3567. display: none !important;
  3568. }
  3569. }
  3570. @media (max-width: 767px) {
  3571. body {
  3572. overflow-x: hidden;
  3573. }
  3574. .content-page {
  3575. margin-left: 0 !important;
  3576. }
  3577. .enlarged .left.side-menu {
  3578. margin-left: -75px;
  3579. }
  3580. .mobile-sidebar {
  3581. left: 0;
  3582. }
  3583. .mobile-content {
  3584. left: 250px;
  3585. right: -250px;
  3586. }
  3587. .wrapper-page {
  3588. width: 90%;
  3589. }
  3590. .navbar-nav .open .dropdown-menu {
  3591. background-color: #ffffff;
  3592. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  3593. left: auto;
  3594. position: absolute;
  3595. right: 0;
  3596. }
  3597. .footer {
  3598. left: 0 !important;
  3599. }
  3600. }
  3601. @media (max-width: 620px) {
  3602. .topbar-left {
  3603. width: 70px !important;
  3604. }
  3605. .logo {
  3606. display: none !important;
  3607. }
  3608. .logo-sm {
  3609. display: inline-block !important;
  3610. }
  3611. .page-header-title {
  3612. text-align: center;
  3613. padding: 10px 15px 88px 20px;
  3614. }
  3615. }
  3616. @media (max-width: 480px) {
  3617. .side-menu {
  3618. z-index: 10 !important;
  3619. }
  3620. .button-menu-mobile {
  3621. display: block;
  3622. }
  3623. .search-bar {
  3624. display: none !important;
  3625. }
  3626. }
  3627. @media (max-width: 420px) {
  3628. .hide-phone {
  3629. display: none !important;
  3630. }
  3631. }
  3632. .ErrMsg, .errormsg {
  3633. color: Red;
  3634. font: bold 10px 'Times New Roman';
  3635. padding: 2px;
  3636. text-align: left;
  3637. }
  3638. .ui-datepicker-trigger {
  3639. padding: 0 1px 0 4px;
  3640. display: none;
  3641. }