interface/themes/patientportal-style.css

   1 /**
   2  * style.css
   3  *
   4  * @package   OpenEMR
   5  * @link      https://www.open-emr.org
   6  * @author    Jerry Padgett <sjpadgett@gmail.com>
   7  * @copyright Copyright (c) 2016-2017 Jerry Padgett <sjpadgett@gmail.com>
   8  * @license   https://github.com/openemr/openemr/blob/master/LICENSE GNU General Public License 3
   9  */
  10 @import './../../../interface/themes/oe-common/oe-sidebar.scss';
  11 /*
  12     Core: General style
  13 ----------------------------
  14 */
  15
  16 /* Layouts */
  17 .wrapper {
  18     min-height: 100%;
  19 }
  20
  21 .wrapper:before,
  22 .wrapper:after {
  23     display: table;
  24     content: " ";
  25 }
  26
  27 .wrapper:after {
  28     clear: both;
  29 }
  30
  31 /* Header */
  32 body > .header {
  33     position: absolute;
  34     top: 0;
  35     left: 0;
  36     right: 0;
  37     z-index: 1030;
  38 }
  39
  40 /* Define 2 column template */
  41 .right-side,
  42 .left-side {
  43     /*min-height: 100%;*/
  44     display: block;
  45 }
  46
  47 /*right side - contins main content*/
  48 .right-side {
  49     /*background-color: #f1f2f7;*/
  50     margin-left: 220px;
  51 }
  52
  53 /*left side - contains sidebar*/
  54 .left-side {
  55     position: absolute;
  56     width: 220px;
  57     top: 0;
  58 }
  59
  60 @media screen and (min-width: 992px) {
  61     .left-side {
  62         top: 50px;
  63     }
  64
  65     /*Right side strech mode*/
  66     .right-side.strech {
  67         margin-left: 0;
  68     }
  69
  70     .right-side.strech > .content-header {
  71         margin-top: 0px;
  72     }
  73
  74     /* Left side collapse */
  75     .left-side.collapse-left {
  76         left: -220px;
  77     }
  78 }
  79
  80 /*Give content full width on xs screens*/
  81 @media screen and (max-width: 992px) {
  82     .right-side {
  83         margin-left: 0;
  84     }
  85 }
  86
  87 /*
  88     By default the layout is not fixed but if you add the class .fixed to the body element
  89     the sidebar and the navbar will automatically become poisitioned fixed
  90 */
  91 body.fixed > .header,
  92 body.fixed .left-side,
  93 body.fixed .navbar {
  94     position: fixed;
  95 }
  96
  97 body.fixed > .header {
  98     top: 0;
  99     right: 0;
 100     left: 0;
 101 }
 102
 103 body.fixed .navbar {
 104     left: 0;
 105     right: 0;
 106 }
 107
 108 body.fixed .wrapper {
 109     margin-top: 50px;
 110 }
 111
 112 /* Content */
 113 .content {
 114     padding: 20px 15px;
 115     background: #f0f3f4;
 116     overflow: auto;
 117 }
 118
 119 /* Page Header */
 120 .page-header {
 121     margin: 10px 0 20px 0;
 122     font-size: 22px;
 123 }
 124
 125 .page-header > small {
 126     color: #666;
 127     display: block;
 128     margin-top: 5px;
 129 }
 130
 131 /* All images should be responsive */
 132 img {
 133     max-width: 100% !important;
 134 }
 135
 136 /* Display inline */
 137 .inline {
 138     display: inline;
 139     width: auto;
 140 }
 141
 142 /*Hide elements by display none only*/
 143 .hide {
 144     display: none !important;
 145 }
 146
 147 /* Remove borders */
 148 .no-border {
 149     border: 0px !important;
 150 }
 151
 152 /* Remove padding */
 153 .no-padding {
 154     padding: 0px !important;
 155 }
 156
 157 /* Remove margins */
 158 .no-margin {
 159     margin: 0px !important;
 160 }
 161
 162 /* Remove box shadow */
 163 .no-shadow {
 164     box-shadow: none !important;
 165 }
 166
 167 /* Don't display when printing */
 168 @media print {
 169     .no-print {
 170         display: none;
 171     }
 172
 173     .left-side,
 174     .header,
 175     .content-header {
 176         display: none;
 177     }
 178
 179     .right-side {
 180         margin: 0;
 181     }
 182 }
 183
 184 /* Remove border radius */
 185 .flat {
 186     -webkit-border-radius: 0 !important;
 187     -moz-border-radius: 0 !important;
 188     border-radius: 0 !important;
 189 }
 190
 191 .table.no-border,
 192 .table.no-border td,
 193 .table.no-border th {
 194     border: 0;
 195 }
 196
 197 /* .text-center in tables */
 198 table.text-center,
 199 table.text-center td,
 200 table.text-center th {
 201     text-align: center;
 202 }
 203
 204 .table.align th {
 205     text-align: left;
 206 }
 207
 208 .table.align td {
 209     text-align: right;
 210 }
 211
 212 .text-bold,
 213 .text-bold.table td,
 214 .text-bold.table th {
 215     font-weight: 700;
 216 }
 217
 218 .border-radius-none {
 219     -webkit-border-radius: 0 !important;
 220     -moz-border-radius: 0 !important;
 221     border-radius: 0 !important;
 222 }
 223
 224 .connectedSortable {
 225     min-height: 100px;
 226 }
 227
 228 /*---------------------------------------------------
 229     LESS Elements 0.9
 230   ---------------------------------------------------
 231     A set of useful LESS mixins
 232     More info at: http://lesselements.com
 233   ---------------------------------------------------*/
 234 /*
 235     Components: navbar, logo and content header
 236 -------------------------------------------------
 237 */
 238 body > .header {
 239     position: relative;
 240     max-height: 100px;
 241     z-index: 1030;
 242 }
 243
 244 body > .header .navbar {
 245     /*height: 50px;
 246     margin-bottom: 0;
 247     margin-left: 220px;*/
 248 }
 249
 250 body > .header .navbar .sidebar-toggle {
 251     float: left;
 252     padding: 9px 5px;
 253     margin-top: 8px;
 254     margin-right: 0;
 255     margin-bottom: 8px;
 256     margin-left: 5px;
 257     background-color: transparent;
 258     background-image: none;
 259     border: 1px solid transparent;
 260     -webkit-border-radius: 0 !important;
 261     -moz-border-radius: 0 !important;
 262     border-radius: 0 !important;
 263 }
 264
 265 body > .header .navbar .sidebar-toggle:hover .icon-bar {
 266     background: #f6f6f6;
 267 }
 268
 269 body > .header .navbar .sidebar-toggle .icon-bar {
 270     display: block;
 271     width: 22px;
 272     height: 2px;
 273     -webkit-border-radius: 4px;
 274     -moz-border-radius: 4px;
 275     border-radius: 4px;
 276 }
 277
 278 body > .header .navbar .sidebar-toggle .icon-bar + .icon-bar {
 279     margin-top: 4px;
 280 }
 281
 282 body > .header .navbar .nav > li.user > a {
 283     font-weight: bold;
 284 }
 285
 286 body > .header .navbar .nav > li.user > a > .fa,
 287 body > .header .navbar .nav > li.user > a > .glyphicon,
 288 body > .header .navbar .nav > li.user > a > .ion {
 289     margin-right: 5px;
 290 }
 291
 292 body > .header .navbar .nav > li > a > .label {
 293     -webkit-border-radius: 50%;
 294     -moz-border-radius: 50%;
 295     border-radius: 50%;
 296     position: absolute;
 297     top: 7px;
 298     right: 2px;
 299     font-size: 10px;
 300     font-weight: normal;
 301     width: 15px;
 302     height: 15px;
 303     line-height: 1.0em;
 304     text-align: center;
 305     padding: 2px;
 306 }
 307
 308 body > .header .navbar .nav > li > a:hover > .label {
 309     top: 3px;
 310 }
 311
 312 .right-side > .content-header {
 313     position: relative;
 314     padding: 15px;
 315 }
 316
 317 .right-side > .content-header > h1 {
 318     margin: 0;
 319     font-size: 24px;
 320 }
 321
 322 .right-side > .content-header > h1 > small {
 323     font-size: 15px;
 324     display: inline-block;
 325     padding-left: 4px;
 326     font-weight: 300;
 327 }
 328
 329 .breadcrumb {
 330     background-color: #fff;
 331 }
 332
 333 .breadcrumb a {
 334     color: #000;
 335 }
 336
 337 .right-side > .content-header > .breadcrumb {
 338     float: right;
 339     background: transparent;
 340     margin-top: 0px;
 341     margin-bottom: 0;
 342     font-size: 12px;
 343     padding: 7px 5px;
 344     position: absolute;
 345     top: 15px;
 346     right: 10px;
 347     -webkit-border-radius: 2px;
 348     -moz-border-radius: 2px;
 349     border-radius: 2px;
 350 }
 351
 352 @media screen and (max-width: 767px) {
 353     .right-side > .content-header > .breadcrumb {
 354         position: relative;
 355         margin-top: 5px;
 356         top: 0;
 357         right: 0;
 358         float: none;
 359         background: #efefef;
 360     }
 361 }
 362
 363 @media (max-width: 767px) {
 364     .navbar .navbar-nav > li {
 365         float: left;
 366     }
 367
 368     .navbar-nav {
 369         margin: 0;
 370         float: left;
 371     }
 372
 373     .navbar-nav > li > a {
 374         padding-top: 15px;
 375         padding-bottom: 15px;
 376         line-height: 20px;
 377     }
 378
 379     .navbar .navbar-right {
 380         float: right;
 381     }
 382 }
 383
 384 @media screen and (max-width: 560px) {
 385     body > .header {
 386         position: relative;
 387     }
 388
 389     body > .header .logo,
 390     body > .header .navbar {
 391         width: 100%;
 392         float: none;
 393         position: relative !important;
 394     }
 395
 396     body > .header .navbar {
 397         margin: 0;
 398     }
 399
 400     body.fixed > .header {
 401         position: fixed;
 402     }
 403
 404     body.fixed > .wrapper,
 405     body.fixed .sidebar-offcanvas {
 406         /*margin-top: 100px!important;*/
 407     }
 408 }
 409
 410 /*
 411     Component: Sidebar
 412 --------------------------
 413 */
 414 .sidebar {
 415     margin-bottom: 5px;
 416 }
 417
 418 .sidebar .sidebar-form input:focus {
 419     -webkit-box-shadow: none;
 420     -moz-box-shadow: none;
 421     box-shadow: none;
 422     border-color: transparent !important;
 423 }
 424
 425 .sidebar .sidebar-menu {
 426     list-style: none;
 427     margin: 0;
 428     padding: 0;
 429 }
 430
 431 .sidebar .sidebar-menu > li {
 432     margin: 0;
 433     padding: 0;
 434 }
 435
 436 .sidebar .sidebar-menu > li > a {
 437     padding: 12px 5px 12px 15px;
 438     display: block;
 439 }
 440
 441 .sidebar .sidebar-menu > li > a > .fa,
 442 .sidebar .sidebar-menu > li > a > .glyphicon,
 443 .sidebar .sidebar-menu > li > a > .icon {
 444     width: 20px;
 445 }
 446
 447 .sidebar .sidebar-menu .treeview-menu {
 448     display: none;
 449     list-style: none;
 450     padding: 0;
 451     margin: 0;
 452 }
 453
 454 .sidebar .sidebar-menu .treeview-menu > li {
 455     margin: 0;
 456 }
 457
 458 .sidebar .sidebar-menu .treeview-menu > li > a {
 459     padding: 8px 5px 8px 15px;
 460     display: block;
 461     font-size: 14px;
 462     margin: 0px 0px;
 463 }
 464
 465 .sidebar .sidebar-menu .treeview-menu > li > a > .fa,
 466 .sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
 467 .sidebar .sidebar-menu .treeview-menu > li > a > .icon {
 468     width: 20px;
 469 }
 470
 471 .user-panel {
 472     padding: 10px;
 473 }
 474
 475 .user-panel:before,
 476 .user-panel:after {
 477     display: table;
 478     content: " ";
 479 }
 480
 481 .user-panel:after {
 482     clear: both;
 483 }
 484
 485 .user-panel > .image > img {
 486     width: 45px;
 487     height: 45px;
 488 }
 489
 490 .user-panel > .info {
 491     font-weight: 600;
 492     padding: 5px 5px 5px 15px;
 493     font-size: 14px;
 494     line-height: 1;
 495 }
 496
 497 .user-panel > .info > p {
 498     margin-bottom: 9px;
 499 }
 500
 501 .user-panel > .info > a {
 502     text-decoration: none;
 503     padding-right: 5px;
 504     margin-top: 3px;
 505     font-size: 11px;
 506     font-weight: normal;
 507 }
 508
 509 .user-panel > .info > a > .fa,
 510 .user-panel > .info > a > .ion,
 511 .user-panel > .info > a > .glyphicon {
 512     margin-right: 3px;
 513 }
 514
 515 /*
 516  * Off Canvas
 517  * --------------------------------------------------
 518  *  Gives us the push menu effect
 519  */
 520 @media screen and (max-width: 992px) {
 521     .relative {
 522         position: relative;
 523     }
 524
 525     .row-offcanvas-right .sidebar-offcanvas {
 526         right: -220px;
 527     }
 528
 529     .row-offcanvas-left .sidebar-offcanvas {
 530         left: -220px;
 531     }
 532
 533     .row-offcanvas-right.active {
 534         right: 220px;
 535     }
 536
 537     .row-offcanvas-left.active {
 538         left: 220px;
 539     }
 540
 541     .sidebar-offcanvas {
 542         left: 0;
 543     }
 544
 545     body.fixed .sidebar-offcanvas {
 546         margin-top: 50px;
 547         left: -220px;
 548     }
 549
 550     body.fixed .row-offcanvas-left.active .navbar {
 551         left: 220px !important;
 552         right: 0;
 553     }
 554
 555     body.fixed .row-offcanvas-left.active .sidebar-offcanvas {
 556         left: 0px;
 557     }
 558 }
 559
 560 /*
 561     Dropdown menus
 562 ----------------------------
 563 */
 564 /*Dropdowns in general*/
 565 .dropdown-menu {
 566     -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 567     -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 568     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 569     z-index: 2300;
 570 }
 571
 572 .dropdown-menu > li > a > .glyphicon,
 573 .dropdown-menu > li > a > .fa,
 574 .dropdown-menu > li > a > .ion {
 575     margin-right: 10px;
 576 }
 577
 578 .dropdown-menu > li > a:hover {
 579     background-color: #3c8dbc;
 580     color: #f9f9f9;
 581 }
 582
 583 .dropdown-menu-right > li > a:hover {
 584     background-color: #39435c;
 585     color: #f9f9f9;
 586 }
 587
 588 /*
 589     Navbar custom dropdown menu
 590 ------------------------------------
 591 */
 592 .navbar-nav > .notifications-menu > .dropdown-menu,
 593 .navbar-nav > .messages-menu > .dropdown-menu,
 594 .navbar-nav > .tasks-menu > .dropdown-menu {
 595     width: 260px;
 596     padding: 0 0 0 0 !important;
 597     margin: 0 !important;
 598     top: 100%;
 599     border: 1px solid #dfdfdf;
 600     -webkit-border-radius: 4px !important;
 601     -moz-border-radius: 4px !important;
 602     border-radius: 4px !important;
 603 }
 604
 605 .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
 606 .navbar-nav > .messages-menu > .dropdown-menu > li.header,
 607 .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
 608     -webkit-border-top-left-radius: 4px;
 609     -webkit-border-top-right-radius: 4px;
 610     -webkit-border-bottom-right-radius: 0;
 611     -webkit-border-bottom-left-radius: 0;
 612     -moz-border-radius-topleft: 4px;
 613     -moz-border-radius-topright: 4px;
 614     -moz-border-radius-bottomright: 0;
 615     -moz-border-radius-bottomleft: 0;
 616     border-top-left-radius: 4px;
 617     border-top-right-radius: 4px;
 618     border-bottom-right-radius: 0;
 619     border-bottom-left-radius: 0;
 620     background-color: #ffffff;
 621     padding: 7px 10px;
 622     border-bottom: 1px solid #f4f4f4;
 623     color: #444444;
 624     font-size: 14px;
 625 }
 626
 627 .navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
 628 .navbar-nav > .messages-menu > .dropdown-menu > li.header:after,
 629 .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after {
 630     bottom: 100%;
 631     left: 92%;
 632     border: solid transparent;
 633     content: " ";
 634     height: 0;
 635     width: 0;
 636     position: absolute;
 637     pointer-events: none;
 638     border-color: rgba(255, 255, 255, 0);
 639     border-bottom-color: #ffffff;
 640     border-width: 7px;
 641     margin-left: -7px;
 642 }
 643
 644 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
 645 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
 646 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
 647     -webkit-border-top-left-radius: 0px;
 648     -webkit-border-top-right-radius: 0px;
 649     -webkit-border-bottom-right-radius: 4px;
 650     -webkit-border-bottom-left-radius: 4px;
 651     -moz-border-radius-topleft: 0px;
 652     -moz-border-radius-topright: 0px;
 653     -moz-border-radius-bottomright: 4px;
 654     -moz-border-radius-bottomleft: 4px;
 655     border-top-left-radius: 0px;
 656     border-top-right-radius: 0px;
 657     border-bottom-right-radius: 4px;
 658     border-bottom-left-radius: 4px;
 659     font-size: 12px;
 660     background-color: #f4f4f4;
 661     padding: 7px 10px;
 662     border-bottom: 1px solid #eeeeee;
 663     color: #444444;
 664     text-align: center;
 665 }
 666
 667 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
 668 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
 669 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
 670     background: #f4f4f4;
 671     text-decoration: none;
 672     font-weight: normal;
 673 }
 674
 675 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
 676 .navbar-nav > .messages-menu > .dropdown-menu > li .menu,
 677 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
 678     margin: 0;
 679     padding: 0;
 680     list-style: none;
 681     overflow-x: hidden;
 682 }
 683
 684 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
 685 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
 686 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
 687     display: block;
 688     white-space: nowrap;
 689     /* Prevent text from breaking */
 690     border-bottom: 1px solid #f4f4f4;
 691 }
 692
 693 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
 694 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
 695 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
 696     background: #fafafa;
 697     text-decoration: none;
 698 }
 699
 700 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
 701     font-size: 12px;
 702     color: #444444;
 703 }
 704
 705 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > i {
 706     border-radius: 30px;
 707 }
 708
 709 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
 710 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
 711 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
 712     font-size: 20px;
 713     width: 50px;
 714     text-align: center;
 715     padding: 15px 0px;
 716     margin-right: 5px;
 717     /* Default background and font colors */
 718     background: #00c0ef;
 719     color: #f9f9f9;
 720     /* Fallback for browsers that doesn't support rgba */
 721     color: rgba(255, 255, 255, 0.7);
 722 }
 723
 724 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.danger,
 725 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.danger,
 726 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.danger {
 727     background: #f56954;
 728 }
 729
 730 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.warning,
 731 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.warning,
 732 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.warning {
 733     background: #f39c12;
 734 }
 735
 736 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.success,
 737 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.success,
 738 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.success {
 739     background: #00a65a;
 740 }
 741
 742 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.info,
 743 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.info,
 744 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.info {
 745     background: #00c0ef;
 746 }
 747
 748 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
 749     margin: 0px;
 750     line-height: 20px;
 751     padding: 10px 5px 10px 5px;
 752     -webkit-border-radius: 4px;
 753     -moz-border-radius: 4px;
 754     border-radius: 4px;
 755 }
 756
 757 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
 758     margin: auto 10px auto auto;
 759     width: 40px;
 760     height: 40px;
 761     border: 1px solid #dddddd;
 762 }
 763
 764 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
 765     padding: 0;
 766     margin: 0 0 0 45px;
 767     color: #444444;
 768     font-size: 15px;
 769 }
 770
 771 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
 772     color: #999999;
 773     font-size: 10px;
 774     float: right;
 775 }
 776
 777 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
 778     margin: 0 0 0 5px;
 779     font-size: 12px;
 780     color: #888888;
 781 }
 782
 783 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before,
 784 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
 785     display: table;
 786     content: " ";
 787 }
 788
 789 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
 790     clear: both;
 791 }
 792
 793 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
 794     padding: 10px;
 795 }
 796
 797 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
 798     font-size: 14px;
 799     padding: 0;
 800     margin: 0 0 10px 0;
 801     color: #666666;
 802 }
 803
 804 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
 805     padding: 0;
 806     margin: 0;
 807 }
 808
 809 .navbar-nav > .user-menu > .dropdown-menu {
 810     -webkit-border-radius: 0;
 811     -moz-border-radius: 0;
 812     border-radius: 0;
 813     padding: 0;
 814     border-top-width: 0;
 815     width: 225px;
 816 }
 817
 818 .navbar-nav > .user-menu > .dropdown-menu:after {
 819     bottom: 100%;
 820     right: 10px;
 821     border: solid transparent;
 822     content: " ";
 823     height: 0;
 824     width: 0;
 825     position: absolute;
 826     pointer-events: none;
 827     border-color: rgba(255, 255, 255, 0);
 828     border-bottom-color: #f9fafc;
 829     border-width: 10px;
 830     margin-left: -10px;
 831 }
 832
 833 .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
 834     height: 175px;
 835     padding: 10px;
 836     background: #3c8dbc;
 837     text-align: center;
 838 }
 839
 840 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
 841     z-index: 5;
 842     height: 90px;
 843     width: 90px;
 844     border: 8px solid;
 845     border-color: transparent;
 846     border-color: rgba(255, 255, 255, 0.2);
 847 }
 848
 849 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
 850     z-index: 5;
 851     color: #f9f9f9;
 852     color: rgba(255, 255, 255, 0.8);
 853     font-size: 17px;
 854     text-shadow: 2px 2px 3px #333333;
 855     margin-top: 10px;
 856 }
 857
 858 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
 859     display: block;
 860     font-size: 12px;
 861 }
 862
 863 .navbar-nav > .user-menu > .dropdown-menu > li.user-body {
 864     padding: 15px;
 865     border-bottom: 1px solid #f4f4f4;
 866     border-top: 1px solid #dddddd;
 867 }
 868
 869 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:before,
 870 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
 871     display: table;
 872     content: " ";
 873 }
 874
 875 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
 876     clear: both;
 877 }
 878
 879 .navbar-nav > .user-menu > .dropdown-menu > li.user-body > div > a {
 880     color: #0073b7;
 881 }
 882
 883 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
 884     background-color: #f9f9f9;
 885     padding: 10px;
 886 }
 887
 888 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:before,
 889 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
 890     display: table;
 891     content: " ";
 892 }
 893
 894 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
 895     clear: both;
 896 }
 897
 898 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-secondary {
 899     color: #666666;
 900 }
 901
 902 /* Add fade animation to dropdown menus */
 903 .open > .dropdown-menu {
 904     animation-name: fadeAnimation;
 905     animation-duration: .7s;
 906     animation-iteration-count: 1;
 907     animation-timing-function: ease;
 908     animation-fill-mode: forwards;
 909     -webkit-animation-name: fadeAnimation;
 910     -webkit-animation-duration: .7s;
 911     -webkit-animation-iteration-count: 1;
 912     -webkit-animation-timing-function: ease;
 913     -webkit-animation-fill-mode: forwards;
 914     -moz-animation-name: fadeAnimation;
 915     -moz-animation-duration: .7s;
 916     -moz-animation-iteration-count: 1;
 917     -moz-animation-timing-function: ease;
 918     -moz-animation-fill-mode: forwards;
 919 }
 920
 921 @keyframes fadeAnimation {
 922     from {
 923         opacity: 0;
 924         top: 120%;
 925     }
 926
 927     to {
 928         opacity: 1;
 929         top: 100%;
 930     }
 931 }
 932
 933 @-webkit-keyframes fadeAnimation {
 934     from {
 935         opacity: 0;
 936         top: 120%;
 937     }
 938
 939     to {
 940         opacity: 1;
 941         top: 100%;
 942     }
 943 }
 944
 945 /* Fix dropdown menu for small screens to display correctly on small screens */
 946 @media screen and (max-width: 767px) {
 947
 948     .navbar-nav > .notifications-menu > .dropdown-menu,
 949     .navbar-nav > .user-menu > .dropdown-menu,
 950     .navbar-nav > .tasks-menu > .dropdown-menu,
 951     .navbar-nav > .messages-menu > .dropdown-menu {
 952         position: absolute;
 953         top: 100%;
 954         right: 0;
 955         left: auto;
 956         border-right: 1px solid #dddddd;
 957         border-bottom: 1px solid #dddddd;
 958         border-left: 1px solid #dddddd;
 959         background: #ffffff;
 960     }
 961 }
 962
 963 /* Fix menu positions on xs screens to appear correctly and fully */
 964 @media screen and (max-width: 480px) {
 965
 966     .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
 967     .navbar-nav > .tasks-menu > .dropdown-menu > li.header,
 968     .navbar-nav > .messages-menu > .dropdown-menu > li.header {
 969         /* Remove arrow from the top */
 970     }
 971
 972     .navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
 973     .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after,
 974     .navbar-nav > .messages-menu > .dropdown-menu > li.header:after {
 975         border-width: 0px !important;
 976     }
 977
 978     .navbar-nav > .tasks-menu > .dropdown-menu {
 979         position: absolute;
 980         right: -120px;
 981         left: auto;
 982     }
 983
 984     .navbar-nav > .notifications-menu > .dropdown-menu {
 985         position: absolute;
 986         right: -170px;
 987         left: auto;
 988     }
 989
 990     .navbar-nav > .messages-menu > .dropdown-menu {
 991         position: absolute;
 992         right: -210px;
 993         left: auto;
 994     }
 995 }
 996
 997 /*
 998    All form elements including input, select, textarea etc.
 999 -----------------------------------------------------------------
1000 */
1001 .form-control {
1002     -webkit-border-radius: 3px !important;
1003     -moz-border-radius: 3px !important;
1004     border-radius: 3px !important;
1005     box-shadow: none;
1006     margin: 5px;
1007 }
1008
1009 .form-control:focus {
1010     border-color: #3c8dbc !important;
1011     box-shadow: none;
1012 }
1013
1014 .form-group.has-success label {
1015     color: #00a65a;
1016 }
1017
1018 .form-group.has-success .form-control {
1019     border-color: #00a65a !important;
1020     box-shadow: none;
1021 }
1022
1023 .form-group.has-warning label {
1024     color: #f39c12;
1025 }
1026
1027 .form-group.has-warning .form-control {
1028     border-color: #f39c12 !important;
1029     box-shadow: none;
1030 }
1031
1032 .form-group.has-error label {
1033     color: #f56954;
1034 }
1035
1036 .form-group.has-error .form-control {
1037     border-color: #f56954 !important;
1038     box-shadow: none;
1039 }
1040
1041 /* Input group */
1042 .input-group .input-group-addon {
1043     border-radius: 0;
1044     background-color: #f4f4f4;
1045 }
1046
1047 /* button groups */
1048 .btn-group-vertical .btn.btn-flat:first-of-type,
1049 .btn-group-vertical .btn.btn-flat:last-of-type {
1050     border-radius: 0;
1051 }
1052
1053 /* Checkbox and radio inputs */
1054 .checkbox,
1055 .radio {
1056     /*padding-left: 0;*/
1057 }
1058
1059 /*
1060     Compenent: Progress bars
1061 --------------------------------
1062 */
1063 /* size variation */
1064 .progress.sm {
1065     height: 10px;
1066 }
1067
1068 .progress.xs {
1069     height: 7px;
1070 }
1071
1072 /* Vertical bars */
1073 .progress.vertical {
1074     position: relative;
1075     width: 30px;
1076     height: 200px;
1077     display: inline-block;
1078     margin-right: 10px;
1079 }
1080
1081 .progress.vertical > .progress-bar {
1082     width: 100% !important;
1083     position: absolute;
1084     bottom: 0;
1085 }
1086
1087 .progress.vertical.sm {
1088     width: 20px;
1089 }
1090
1091 .progress.vertical.xs {
1092     width: 10px;
1093 }
1094
1095 /* Remove margins from progress bars when put in a table */
1096 .table tr > td .progress {
1097     margin: 0;
1098 }
1099
1100 .progress-bar-light-blue,
1101 .progress-bar-primary {
1102     background-color: #3c8dbc;
1103 }
1104
1105 .progress-striped .progress-bar-light-blue,
1106 .progress-striped .progress-bar-primary {
1107     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
1108     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1109     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1110     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1111 }
1112
1113 .progress-bar-green,
1114 .progress-bar-success {
1115     background-color: #00a65a;
1116 }
1117
1118 .progress-striped .progress-bar-green,
1119 .progress-striped .progress-bar-success {
1120     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
1121     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1122     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1123     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1124 }
1125
1126 .progress-bar-aqua,
1127 .progress-bar-info {
1128     background-color: #00c0ef;
1129 }
1130
1131 .progress-striped .progress-bar-aqua,
1132 .progress-striped .progress-bar-info {
1133     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
1134     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1135     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1136     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1137 }
1138
1139 .progress-bar-yellow,
1140 .progress-bar-warning {
1141     background-color: #f39c12;
1142 }
1143
1144 .progress-striped .progress-bar-yellow,
1145 .progress-striped .progress-bar-warning {
1146     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
1147     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1148     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1149     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1150 }
1151
1152 .progress-bar-red,
1153 .progress-bar-danger {
1154     background-color: #f56954;
1155 }
1156
1157 .progress-striped .progress-bar-red,
1158 .progress-striped .progress-bar-danger {
1159     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
1160     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1161     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1162     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1163 }
1164
1165 /*
1166     Component: Small boxes
1167 */
1168 .small-box {
1169     position: relative;
1170     display: block;
1171     -webkit-border-radius: 2px;
1172     -moz-border-radius: 2px;
1173     border-radius: 2px;
1174     margin-bottom: 15px;
1175 }
1176
1177 .small-box > .inner {
1178     padding: 10px;
1179 }
1180
1181 .small-box > .small-box-footer {
1182     position: relative;
1183     text-align: center;
1184     padding: 3px 0;
1185     color: #fff;
1186     color: rgba(255, 255, 255, 0.8);
1187     display: block;
1188     z-index: 10;
1189     background: rgba(0, 0, 0, 0.1);
1190     text-decoration: none;
1191 }
1192
1193 .small-box > .small-box-footer:hover {
1194     color: #fff;
1195     background: rgba(0, 0, 0, 0.15);
1196 }
1197
1198 .small-box h3 {
1199     font-size: 38px;
1200     font-weight: bold;
1201     margin: 0 0 10px 0;
1202     white-space: nowrap;
1203     padding: 0;
1204 }
1205
1206 .small-box p {
1207     font-size: 15px;
1208 }
1209
1210 .small-box p > small {
1211     display: block;
1212     color: #f9f9f9;
1213     font-size: 13px;
1214     margin-top: 5px;
1215 }
1216
1217 .small-box h3,
1218 .small-box p {
1219     z-index: 5px;
1220 }
1221
1222 .small-box .icon {
1223     position: absolute;
1224     top: auto;
1225     bottom: 5px;
1226     right: 5px;
1227     z-index: 0;
1228     font-size: 90px;
1229     color: rgba(0, 0, 0, 0.15);
1230 }
1231
1232 .small-box:hover {
1233     text-decoration: none;
1234     color: #f9f9f9;
1235 }
1236
1237 .small-box:hover .icon {
1238     /*animation-name: tansformAnimation;
1239   animation-duration: .5s;
1240   animation-iteration-count: 1;
1241   animation-timing-function: ease;
1242   animation-fill-mode: forwards;
1243   -webkit-animation-name: tansformAnimation;
1244   -webkit-animation-duration: .5s;
1245   -webkit-animation-iteration-count: 1;
1246   -webkit-animation-timing-function: ease;
1247   -webkit-animation-fill-mode: forwards;
1248   -moz-animation-name: tansformAnimation;
1249   -moz-animation-duration: .5s;
1250   -moz-animation-iteration-count: 1;
1251   -moz-animation-timing-function: ease;
1252   -moz-animation-fill-mode: forwards;*/
1253 }
1254
1255 @keyframes tansformAnimation {
1256     from {
1257         font-size: 90px;
1258     }
1259
1260     to {
1261         font-size: 100px;
1262     }
1263 }
1264
1265 @-webkit-keyframes tansformAnimation {
1266     from {
1267         font-size: 90px;
1268     }
1269
1270     to {
1271         font-size: 100px;
1272     }
1273 }
1274
1275 @media screen and (max-width: 480px) {
1276     .small-box {
1277         text-align: center;
1278     }
1279
1280     .small-box .icon {
1281         display: none;
1282     }
1283
1284     .small-box p {
1285         font-size: 12px;
1286     }
1287 }
1288
1289 /*
1290     component: Boxes
1291 -------------------------
1292 */
1293 .box {
1294     position: relative;
1295     background: #ffffff;
1296     /*border-top: 2px solid #c1c1c1;*/
1297     margin-bottom: 20px;
1298     -webkit-border-radius: 3px;
1299     -moz-border-radius: 3px;
1300     border-radius: 3px;
1301     width: 100%;
1302     /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
1303 }
1304
1305 .box.box-primary {
1306     border-top-color: #3c8dbc;
1307 }
1308
1309 .box.box-info {
1310     border-top-color: #00c0ef;
1311 }
1312
1313 .box.box-danger {
1314     border-top-color: #f56954;
1315 }
1316
1317 .box.box-warning {
1318     border-top-color: #f39c12;
1319 }
1320
1321 .box.box-success {
1322     border-top-color: #00a65a;
1323 }
1324
1325 .box.height-control .box-body {
1326     max-height: 300px;
1327     overflow: auto;
1328 }
1329
1330 .box .box-header {
1331     position: relative;
1332     -webkit-border-top-left-radius: 3px;
1333     -webkit-border-top-right-radius: 3px;
1334     -webkit-border-bottom-right-radius: 0;
1335     -webkit-border-bottom-left-radius: 0;
1336     -moz-border-radius-topleft: 3px;
1337     -moz-border-radius-topright: 3px;
1338     -moz-border-radius-bottomright: 0;
1339     -moz-border-radius-bottomleft: 0;
1340     border-top-left-radius: 3px;
1341     border-top-right-radius: 3px;
1342     border-bottom-right-radius: 0;
1343     border-bottom-left-radius: 0;
1344     border-bottom: 0px solid #f4f4f4;
1345     color: #444;
1346 }
1347
1348 .box .box-header:before,
1349 .box .box-header:after {
1350     display: table;
1351     content: " ";
1352 }
1353
1354 .box .box-header:after {
1355     clear: both;
1356 }
1357
1358 .box .box-header > .fa,
1359 .box .box-header > .glyphicon,
1360 .box .box-header > .ion,
1361 .box .box-header .box-title {
1362     display: inline-block;
1363     padding: 10px 10px 10px 10px;
1364     margin: 0;
1365     font-size: 20px;
1366     font-weight: 400;
1367     float: left;
1368     cursor: default;
1369 }
1370
1371 .box .box-header a {
1372     color: #444;
1373 }
1374
1375 .box .box-header > .box-tools {
1376     padding: 5px 10px 5px 5px;
1377 }
1378
1379 .box .box-body {
1380     padding: 10px;
1381     -webkit-border-top-left-radius: 0;
1382     -webkit-border-top-right-radius: 0;
1383     -webkit-border-bottom-right-radius: 3px;
1384     -webkit-border-bottom-left-radius: 3px;
1385     -moz-border-radius-topleft: 0;
1386     -moz-border-radius-topright: 0;
1387     -moz-border-radius-bottomright: 3px;
1388     -moz-border-radius-bottomleft: 3px;
1389     border-top-left-radius: 0;
1390     border-top-right-radius: 0;
1391     border-bottom-right-radius: 3px;
1392     border-bottom-left-radius: 3px;
1393 }
1394
1395 .box .box-body > table,
1396 .box .box-body > .table {
1397     margin-bottom: 0;
1398 }
1399
1400 .box .box-body.chart-responsive {
1401     width: 100%;
1402     overflow: hidden;
1403 }
1404
1405 .box .box-body > .chart {
1406     position: relative;
1407     overflow: hidden;
1408     width: 100%;
1409 }
1410
1411 .box .box-body > .chart svg,
1412 .box .box-body > .chart canvas {
1413     width: 100% !important;
1414 }
1415
1416 .box .box-body .fc {
1417     margin-top: 5px;
1418 }
1419
1420 .box .box-body .fc-header-title h2 {
1421     font-size: 15px;
1422     line-height: 1.6em;
1423     color: #666;
1424     margin-left: 10px;
1425 }
1426
1427 .box .box-body .fc-header-right {
1428     padding-right: 10px;
1429 }
1430
1431 .box .box-body .fc-header-left {
1432     padding-left: 10px;
1433 }
1434
1435 .box .box-body .fc-widget-header {
1436     background: #fafafa;
1437     box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.02);
1438 }
1439
1440 .box .box-body .fc-grid {
1441     width: 100%;
1442     border: 0;
1443 }
1444
1445 .box .box-body .fc-widget-header:first-of-type,
1446 .box .box-body .fc-widget-content:first-of-type {
1447     border-left: 0;
1448     border-right: 0;
1449 }
1450
1451 .box .box-body .fc-widget-header:last-of-type,
1452 .box .box-body .fc-widget-content:last-of-type {
1453     border-right: 0;
1454 }
1455
1456 .box .box-body .table {
1457     margin-bottom: 0;
1458 }
1459
1460 .box .box-body .full-width-chart {
1461     margin: -19px;
1462 }
1463
1464 .box .box-body.no-padding .full-width-chart {
1465     margin: -9px;
1466 }
1467
1468 .box .box-footer {
1469     border-top: 1px solid #f4f4f4;
1470     -webkit-border-top-left-radius: 0;
1471     -webkit-border-top-right-radius: 0;
1472     -webkit-border-bottom-right-radius: 3px;
1473     -webkit-border-bottom-left-radius: 3px;
1474     -moz-border-radius-topleft: 0;
1475     -moz-border-radius-topright: 0;
1476     -moz-border-radius-bottomright: 3px;
1477     -moz-border-radius-bottomleft: 3px;
1478     border-top-left-radius: 0;
1479     border-top-right-radius: 0;
1480     border-bottom-right-radius: 3px;
1481     border-bottom-left-radius: 3px;
1482     padding: 10px;
1483     background-color: #ffffff;
1484 }
1485
1486 .box.box-solid {
1487     border-top: 0px;
1488 }
1489
1490 .box.box-solid > .box-header {
1491     padding-bottom: 0px !important;
1492 }
1493
1494 .box.box-solid > .box-header .btn.btn-secondary {
1495     background: transparent;
1496 }
1497
1498 .box.box-solid.box-primary > .box-header {
1499     color: #fff;
1500     background: #3c8dbc;
1501     background-color: #3c8dbc;
1502 }
1503
1504 .box.box-solid.box-primary > .box-header a {
1505     color: #444;
1506 }
1507
1508 .box.box-solid.box-info > .box-header {
1509     color: #fff;
1510     background: #00c0ef;
1511     background-color: #00c0ef;
1512 }
1513
1514 .box.box-solid.box-info > .box-header a {
1515     color: #444;
1516 }
1517
1518 .box.box-solid.box-danger > .box-header {
1519     color: #fff;
1520     background: #f56954;
1521     background-color: #f56954;
1522 }
1523
1524 .box.box-solid.box-danger > .box-header a {
1525     color: #444;
1526 }
1527
1528 .box.box-solid.box-warning > .box-header {
1529     color: #fff;
1530     background: #f39c12;
1531     background-color: #f39c12;
1532 }
1533
1534 .box.box-solid.box-warning > .box-header a {
1535     color: #444;
1536 }
1537
1538 .box.box-solid.box-success > .box-header {
1539     color: #fff;
1540     background: #00a65a;
1541     background-color: #00a65a;
1542 }
1543
1544 .box.box-solid.box-success > .box-header a {
1545     color: #444;
1546 }
1547
1548 .box.box-solid > .box-header > .box-tools .btn {
1549     border: 0;
1550     box-shadow: none;
1551 }
1552
1553 .box.box-solid.collapsed-box .box-header {
1554     -webkit-border-radius: 3px;
1555     -moz-border-radius: 3px;
1556     border-radius: 3px;
1557 }
1558
1559 .box.box-solid[class*='bg'] > .box-header {
1560     color: #fff;
1561 }
1562
1563 .box .box-group > .box {
1564     margin-bottom: 5px;
1565 }
1566
1567 .box .knob-label {
1568     text-align: center;
1569     color: #333;
1570     font-weight: 100;
1571     font-size: 12px;
1572     margin-bottom: 0.3em;
1573 }
1574
1575 .box .todo-list {
1576     margin: 0;
1577     padding: 0px 0px;
1578     list-style: none;
1579 }
1580
1581 .box .todo-list > li {
1582     -webkit-border-radius: 2px;
1583     -moz-border-radius: 2px;
1584     border-radius: 2px;
1585     padding: 10px;
1586     background: #f3f4f5;
1587     margin-bottom: 2px;
1588     border-left: 2px solid #e6e7e8;
1589     color: #444;
1590 }
1591
1592 .box .todo-list > li:last-of-type {
1593     margin-bottom: 0;
1594 }
1595
1596 .box .todo-list > li.danger {
1597     border-left-color: #f56954;
1598 }
1599
1600 .box .todo-list > li.warning {
1601     border-left-color: #f39c12;
1602 }
1603
1604 .box .todo-list > li.info {
1605     border-left-color: #00c0ef;
1606 }
1607
1608 .box .todo-list > li.success {
1609     border-left-color: #00a65a;
1610 }
1611
1612 .box .todo-list > li.primary {
1613     border-left-color: #3c8dbc;
1614 }
1615
1616 .box .todo-list > li > input[type='checkbox'] {
1617     margin: 0 10px 0 5px;
1618 }
1619
1620 .box .todo-list > li .text {
1621     display: inline-block;
1622     margin-left: 5px;
1623     font-weight: 600;
1624 }
1625
1626 .box .todo-list > li .label {
1627     margin-left: 10px;
1628     font-size: 9px;
1629 }
1630
1631 .box .todo-list > li .tools {
1632     display: none;
1633     float: right;
1634     color: #f56954;
1635 }
1636
1637 .box .todo-list > li .tools > .fa,
1638 .box .todo-list > li .tools > .glyphicon,
1639 .box .todo-list > li .tools > .ion {
1640     margin-right: 5px;
1641     cursor: pointer;
1642 }
1643
1644 .box .todo-list > li:hover .tools {
1645     display: inline-block;
1646 }
1647
1648 .box .todo-list > li.done {
1649     color: #999;
1650 }
1651
1652 .box .todo-list > li.done .text {
1653     text-decoration: line-through;
1654     font-weight: 500;
1655 }
1656
1657 .box .todo-list > li.done .label {
1658     background: #eaeaec !important;
1659 }
1660
1661 .box .todo-list .handle {
1662     display: inline-block;
1663     cursor: move;
1664     margin: 0 5px;
1665 }
1666
1667 .box > .overlay,
1668 .box > .loading-img {
1669     position: absolute;
1670     top: 0;
1671     left: 0;
1672     width: 100%;
1673     height: 100%;
1674 }
1675
1676 .box > .overlay {
1677     z-index: 1010;
1678     background: rgba(255, 255, 255, 0.7);
1679 }
1680
1681 .box > .overlay.dark {
1682     background: rgba(0, 0, 0, 0.5);
1683 }
1684
1685 .box > .loading-img {
1686     z-index: 1020;
1687     background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat;
1688 }
1689
1690 /*
1691     Component: Navs
1692 */
1693 /* NAV PILLS */
1694 .nav.nav-pills > li > a {
1695     border-top: 3px solid transparent;
1696     -webkit-border-radius: 0;
1697     -moz-border-radius: 0;
1698     border-radius: 0;
1699     color: #444;
1700 }
1701
1702 .nav.nav-pills > li > a > .fa,
1703 .nav.nav-pills > li > a > .glyphicon,
1704 .nav.nav-pills > li > a > .ion {
1705     margin-right: 5px;
1706 }
1707
1708 .nav.nav-pills > li.active > a,
1709 .nav.nav-pills > li.active > a:hover {
1710     background-color: #f6f6f6;
1711     border-top-color: #3c8dbc;
1712     color: #444;
1713 }
1714
1715 .nav.nav-pills > li.active > a {
1716     font-weight: 600;
1717 }
1718
1719 .nav.nav-pills > li > a:hover {
1720     background-color: #f6f6f6;
1721 }
1722
1723 .nav.nav-pills.nav-stacked > li > a {
1724     border-top: 0;
1725     border-left: 3px solid transparent;
1726     -webkit-border-radius: 0;
1727     -moz-border-radius: 0;
1728     border-radius: 0;
1729     color: #444;
1730 }
1731
1732 .nav.nav-pills.nav-stacked > li > a:hover {
1733     background-color: #f6f6f6;
1734     border-left-color: #3c8dbc;
1735 }
1736
1737 .nav.nav-pills.nav-stacked > li.active > a,
1738 .nav.nav-pills.nav-stacked > li.active > a:hover {
1739     background-color: #f6f6f6;
1740     border-left-color: #3c8dbc;
1741     color: #444;
1742 }
1743
1744 .nav.nav-pills.nav-stacked > li.header {
1745     border-bottom: 1px solid #ddd;
1746     color: #777;
1747     margin-bottom: 10px;
1748     padding: 5px 10px;
1749     text-transform: uppercase;
1750 }
1751
1752 /* NAV TABS */
1753 .nav-tabs-custom {
1754     margin-bottom: 20px;
1755     background: #fff;
1756     /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
1757 }
1758
1759 .nav-tabs-custom > .nav-tabs {
1760     margin: 0;
1761     border-bottom-color: #f4f4f4;
1762 }
1763
1764 .nav-tabs-custom > .nav-tabs > li {
1765     border-top: 3px solid transparent;
1766     margin-bottom: -2px;
1767     margin-right: 5px;
1768 }
1769
1770 .nav-tabs-custom > .nav-tabs > li > a {
1771     -webkit-border-radius: 0 !important;
1772     -moz-border-radius: 0 !important;
1773     border-radius: 0 !important;
1774 }
1775
1776 .nav-tabs-custom > .nav-tabs > li > a,
1777 .nav-tabs-custom > .nav-tabs > li > a:hover {
1778     background: transparent;
1779     margin: 0;
1780 }
1781
1782 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
1783 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
1784 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
1785     border-color: transparent;
1786 }
1787
1788 .nav-tabs-custom > .nav-tabs > li.active {
1789     border-top-color: #3c8dbc;
1790 }
1791
1792 .nav-tabs-custom > .nav-tabs > li.active > a,
1793 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
1794     background-color: #fff;
1795 }
1796
1797 .nav-tabs-custom > .nav-tabs > li.active > a {
1798     border-top: 0;
1799     border-left-color: #f4f4f4;
1800     border-right-color: #f4f4f4;
1801 }
1802
1803 .nav-tabs-custom > .nav-tabs > li:first-of-type {
1804     margin-left: 0px;
1805 }
1806
1807 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
1808     border-left-width: 0;
1809 }
1810
1811 .nav-tabs-custom > .nav-tabs.float-right {
1812     float: none !important;
1813 }
1814
1815 .nav-tabs-custom > .nav-tabs.float-right > li {
1816     float: right;
1817 }
1818
1819 .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type {
1820     margin-right: 0px;
1821 }
1822
1823 .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type.active > a {
1824     border-left-width: 1px;
1825     border-right-width: 0px;
1826 }
1827
1828 .nav-tabs-custom > .nav-tabs > li.header {
1829     font-weight: 400;
1830     line-height: 35px;
1831     padding: 0 10px;
1832     font-size: 20px;
1833     color: #444;
1834     cursor: default;
1835 }
1836
1837 .nav-tabs-custom > .nav-tabs > li.header > .fa,
1838 .nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
1839 .nav-tabs-custom > .nav-tabs > li.header > .ion {
1840     margin-right: 10px;
1841 }
1842
1843 .nav-tabs-custom > .tab-content {
1844     background: #fff;
1845     padding: 10px;
1846 }
1847
1848 /* Nav tabs bottom */
1849 .tabs-bottom.nav-3 li a {
1850     width: 3333.33333333% !important;
1851 }
1852
1853 .tabs-bottom li a {
1854     border: 0;
1855 }
1856
1857 /* PAGINATION */
1858 .pagination > li > a {
1859     background: #fafafa;
1860     color: #666;
1861     /*-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
1862   -moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
1863   box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);*/
1864 }
1865
1866 .pagination > li:first-of-type a,
1867 .pagination > li:last-of-type a {
1868     -webkit-border-radius: 2px;
1869     -moz-border-radius: 2px;
1870     border-radius: 2px;
1871 }
1872
1873 /*
1874     Component: Mailbox
1875 */
1876 .mail-box aside {
1877     display: table-cell;
1878     float: none;
1879     height: 100%;
1880     padding: 0;
1881     vertical-align: top;
1882 }
1883
1884 .mailbox .table-mailbox {
1885     border-left: 1px solid #ddd;
1886     border-right: 1px solid #ddd;
1887     border-bottom: 1px solid #ddd;
1888 }
1889
1890 .mailbox .table-mailbox tr.unread > td {
1891     background-color: rgba(0, 0, 0, 0.05);
1892     color: #000;
1893     font-weight: 600;
1894 }
1895
1896 .mailbox .table-mailbox tr > td > .fa.fa-star,
1897 .mailbox .table-mailbox tr > td > .fa.fa-star-o,
1898 .mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star,
1899 .mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star-empty {
1900     color: #f39c12;
1901     cursor: pointer;
1902 }
1903
1904 .mailbox .table-mailbox tr > td.small-col {
1905     width: 30px;
1906 }
1907
1908 .mailbox .table-mailbox tr > td.name {
1909     width: 150px;
1910     font-weight: 600;
1911 }
1912
1913 .mailbox .table-mailbox tr > td.time {
1914     text-align: right;
1915     width: 100px;
1916 }
1917
1918 .mailbox .table-mailbox tr > td {
1919     white-space: nowrap;
1920 }
1921
1922 .mailbox .table-mailbox tr > td > a {
1923     color: #444;
1924 }
1925
1926 @media screen and (max-width: 767px) {
1927     .mailbox .nav-stacked > li:not(.header) {
1928         float: left;
1929         width: 50%;
1930     }
1931
1932     .mailbox .nav-stacked > li:not(.header).header {
1933         border: 0 !important;
1934     }
1935
1936     .mailbox .search-form {
1937         margin-top: 10px;
1938     }
1939 }
1940
1941
1942
1943 /*
1944     Skins
1945     -----
1946 */
1947 /*
1948     Skin Blue
1949     ---------
1950 */
1951 /* skin-blue navbar */
1952 .skin-blue .navbar {
1953     background-color: #d3e7f0;
1954     /* #3c8dbc; */
1955 }
1956
1957 .skin-blue .navbar .nav a {
1958     color: rgba(0, 0, 0, 0.8);
1959     /* rgba(255, 255, 255, 0.8); */
1960 }
1961
1962 .skin-blue .navbar .nav > li > a:hover,
1963 .skin-blue .navbar .nav > li > a:active,
1964 .skin-blue .navbar .nav > li > a:focus,
1965 .skin-blue .navbar .nav .open > a,
1966 .skin-blue .navbar .nav .open > a:hover,
1967 .skin-blue .navbar .nav .open > a:focus {
1968     background: rgba(0, 0, 0, 0.1);
1969     color: #f6f6f6;
1970 }
1971
1972 .skin-blue .navbar .navbar-right > .nav {
1973     margin-right: 10px;
1974 }
1975
1976 .skin-blue .navbar .sidebar-toggle .icon-bar {
1977     background: rgba(255, 255, 255, 0.8);
1978 }
1979
1980 .skin-blue .navbar .sidebar-toggle:hover .icon-bar {
1981     background: #f6f6f6 !important;
1982 }
1983
1984 /* skin-blue logo */
1985 .skin-blue .logo {
1986     background-color: #367fa9;
1987     color: #f9f9f9;
1988 }
1989
1990 .skin-blue .logo > a {
1991     color: #f9f9f9;
1992 }
1993
1994 .skin-blue .logo:hover {
1995     background: #fff;
1996     color: #fff;
1997 }
1998
1999 /* skin-blue content header */
2000 .skin-blue .right-side > .content-header {
2001     background: #fbfbfb;
2002     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
2003 }
2004
2005 /* Skin-blue user panel */
2006 .skin-blue .user-panel > .image > img {
2007     border: 1px solid #dfdfdf;
2008 }
2009
2010 .skin-blue .user-panel > .info,
2011 .skin-blue .user-panel > .info > a {
2012     color: #555555;
2013 }
2014
2015 /* skin-blue sidebar */
2016 .skin-blue .sidebar {
2017     background: #d3e7f0;
2018     border-bottom: 1px solid #fff;
2019 }
2020
2021 .skin-blue .sidebar > .sidebar-menu > li {
2022     border-top: 1px solid #fff;
2023     border-bottom: 1px solid #dbdbdb;
2024 }
2025
2026 .skin-blue .sidebar > .sidebar-menu > li:first-of-type {
2027     border-top: 1px solid #dbdbdb;
2028 }
2029
2030 .skin-blue .sidebar > .sidebar-menu > li:first-of-type > a {
2031     border-top: 1px solid #fff;
2032 }
2033
2034 .skin-blue .sidebar > .sidebar-menu > li > a {
2035     margin-right: 1px;
2036 }
2037
2038 .skin-blue .sidebar > .sidebar-menu > li > a:hover,
2039 .skin-blue .sidebar > .sidebar-menu > li.active > a {
2040     color: #222;
2041     background: #f9f9f9;
2042 }
2043
2044 .skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
2045     margin: 0 1px;
2046     background: #f9f9f9;
2047 }
2048
2049 .skin-blue .left-side {
2050     background: #d3e7f0;
2051     /* #f4f4f4; */
2052     min-height: 100%;
2053     -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
2054     -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
2055     box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
2056 }
2057
2058 .skin-blue .sidebar a {
2059     color: #555555;
2060 }
2061
2062 .skin-blue .sidebar a:hover {
2063     text-decoration: none;
2064 }
2065
2066 .skin-blue .treeview-menu > li > a {
2067     color: #777;
2068 }
2069
2070 .skin-blue .treeview-menu > li.active > a,
2071 .skin-blue .treeview-menu > li > a:hover {
2072     color: #111;
2073 }
2074
2075 .skin-blue .sidebar-form {
2076     -webkit-border-radius: 2px;
2077     -moz-border-radius: 2px;
2078     border-radius: 2px;
2079     border: 1px solid #dbdbdb;
2080     margin: 10px 10px;
2081 }
2082
2083 .skin-blue .sidebar-form input[type="text"],
2084 .skin-blue .sidebar-form .btn {
2085     box-shadow: none;
2086     background-color: #fafafa;
2087     border: 1px solid #fafafa;
2088     height: 35px;
2089 }
2090
2091 .skin-blue .sidebar-form input[type="text"] {
2092     color: #666;
2093     -webkit-border-top-left-radius: 2px !important;
2094     -webkit-border-top-right-radius: 0 !important;
2095     -webkit-border-bottom-right-radius: 0 !important;
2096     -webkit-border-bottom-left-radius: 2px !important;
2097     -moz-border-radius-topleft: 2px !important;
2098     -moz-border-radius-topright: 0 !important;
2099     -moz-border-radius-bottomright: 0 !important;
2100     -moz-border-radius-bottomleft: 2px !important;
2101     border-top-left-radius: 2px !important;
2102     border-top-right-radius: 0 !important;
2103     border-bottom-right-radius: 0 !important;
2104     border-bottom-left-radius: 2px !important;
2105 }
2106
2107 .skin-blue .sidebar-form input[type="text"]:focus,
2108 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2109     background-color: #fff;
2110     color: #666;
2111 }
2112
2113 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2114     border-left-color: #fff;
2115 }
2116
2117 .skin-blue .sidebar-form .btn {
2118     color: #999;
2119     -webkit-border-top-left-radius: 0 !important;
2120     -webkit-border-top-right-radius: 2px !important;
2121     -webkit-border-bottom-right-radius: 2px !important;
2122     -webkit-border-bottom-left-radius: 0 !important;
2123     -moz-border-radius-topleft: 0 !important;
2124     -moz-border-radius-topright: 2px !important;
2125     -moz-border-radius-bottomright: 2px !important;
2126     -moz-border-radius-bottomleft: 0 !important;
2127     border-top-left-radius: 0 !important;
2128     border-top-right-radius: 2px !important;
2129     border-bottom-right-radius: 2px !important;
2130     border-bottom-left-radius: 0 !important;
2131 }
2132
2133 /*general page*/
2134 .progress-xs {
2135     height: 10px;
2136 }
2137
2138 .progress-sm {
2139     height: 12px;
2140 }
2141
2142 .card {
2143     border: none;
2144     margin: .75rem;
2145 }
2146
2147 .card-header {
2148     border-bottom: 1px solid #eee;
2149     background-color: #FAFAFA;
2150 }
2151
2152 .card .card-header {
2153     padding: 5px 10px;
2154     font-size: 1.2rem;
2155     text-transform: capitalize;
2156 }
2157
2158 .card-body {
2159     padding: 0.25rem;
2160 }
2161
2162 .card-header .nav {
2163     border: medium none;
2164     font-size: 13px;
2165     margin: -10px -15px -15px;
2166 }
2167
2168 .card-header .nav > li > a,
2169 .card-header .nav > li.active > a,
2170 .card-header .nav > li.active > a:hover,
2171 .card-header .nav > li.active > a:focus {
2172     border-width: 0;
2173     border-radius: 0;
2174 }
2175
2176 .card-header .nav > li > a {
2177     color: #898989;
2178 }
2179
2180 .card-header .nav > li.active > a,
2181 .card-header .nav > li > a:hover {
2182     color: #27c24c;
2183     background: #fff;
2184 }
2185
2186 .card-header .nav > li:first-child.active > a,
2187 .card-header .nav > li:first-child > a:hover {
2188     border-radius: 0px 0 0 0;
2189     -webkit-border-radius: 0px 0 0 0;
2190     /*border: 1px solid #eee;*/
2191 }
2192
2193 .block {
2194     display: block;
2195 }
2196
2197
2198 .dropdown-menu.dropdown-custom > li {
2199     padding: 8px 10px;
2200     font-size: 12px;
2201 }
2202
2203 .dropdown-menu li:first-child.dropdown-header {
2204     border-top: 0;
2205     border-top-left-radius: 3px;
2206     border-top-right-radius: 3px;
2207 }
2208
2209 li.dropdown-header {
2210     padding: 5px 10px;
2211     color: #394263;
2212     background-color: #f9fafc;
2213     border-top: 1px solid #eaedf1;
2214     border-bottom: 1px solid #eaedf1;
2215 }
2216
2217 .dropdown-menu .divider {
2218     margin: 2px 0;
2219     padding: 0 !important;
2220     background-color: #f0f0f0;
2221 }
2222
2223 .dropdown-menu.dropdown-custom > li > a {
2224     border-radius: 3px;
2225 }
2226
2227 .dropdown-menu > li > a {
2228     padding: 6px 10px;
2229 }
2230
2231 .dropdown-menu.dropdown-custom > li > a:hover {
2232     color: #fff;
2233 }
2234
2235 .dropdown-menu.dropdown-custom {
2236     min-width: 200px;
2237 }
2238
2239 .horizontal .dropdown-menu > li > a {
2240     padding: 8px 15px;
2241 }
2242
2243 .horizontal .dropdown-menu > li > a:hover {
2244     background-color: #eee;
2245     /*color: #fff;*/
2246 }