portal/assets/css/style.css

   1 /**
   2  *
   3  * Copyright (C) 2016-2017 Jerry Padgett <sjpadgett@gmail.com>
   4  *
   5  * LICENSE: This program is free software: you can redistribute it and/or modify
   6  *  it under the terms of the GNU Affero General Public License as
   7  *  published by the Free Software Foundation, either version 3 of the
   8  *  License, or (at your option) any later version.
   9  *
  10  *  This program is distributed in the hope that it will be useful,
  11  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  *  GNU Affero General Public License for more details.
  14  *
  15  *  You should have received a copy of the GNU Affero General Public License
  16  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  17  *
  18  * @package OpenEMR
  19  * @author Jerry Padgett <sjpadgett@gmail.com>
  20  * @link http://www.open-emr.org
  21  */
  22
  23 /*@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
  24 @import url(//fonts.googleapis.com/css?family=Kaushan+Script);*/
  25 /*!
  26
  27 !*/
  28 /*
  29     Core: General style
  30 ----------------------------
  31 */
  32 #loader {
  33   position: absolute;
  34   left: 50%;
  35   top: 40%;
  36   z-index: 1;
  37   width: 150px;
  38   height: 150px;
  39   margin: -75px 0 0 -75px;
  40   border: 16px solid #f3f3f3;
  41   border-radius: 50%;
  42   border-top: 16px solid #3498db;
  43   border-bottom: 16px solid #3498db;
  44   width: 120px;
  45   height: 120px;
  46   -webkit-animation: spin 2s linear infinite;
  47   animation: spin 2s linear infinite;
  48 }
  49 @-webkit-keyframes spin {
  50   0% { -webkit-transform: rotate(0deg); }
  51   100% { -webkit-transform: rotate(360deg); }
  52 }
  53 @keyframes spin {
  54   0% { transform: rotate(0deg); }
  55   100% { transform: rotate(360deg); }
  56 }
  57
  58 html,
  59 body {
  60   overflow-x: hidden!important;
  61   //font-family: 'Source Sans Pro', sans-serif;
  62   font-family: 'Lato', sans-serif;
  63   -webkit-font-smoothing: antialiased;
  64   min-height: 100%;
  65   background: #f1f2f7;
  66
  67 }
  68 input[type="checkbox"], input[type="radio"] {
  69     margin: 0 5px 5px;
  70     line-height: normal;
  71 }
  72 a {
  73   color: #3c8dbc;
  74 }
  75 a:hover,
  76 a:active,
  77 a:focus {
  78   outline: none;
  79   text-decoration: none;
  80   color: #72afd2;
  81 }
  82 /* Layouts */
  83 .wrapper {
  84   min-height: 100%;
  85 }
  86 .wrapper:before,
  87 .wrapper:after {
  88   display: table;
  89   content: " ";
  90 }
  91 .wrapper:after {
  92   clear: both;
  93 }
  94 /* Header */
  95 body > .header {
  96   position: absolute;
  97   top: 0;
  98   left: 0;
  99   right: 0;
 100   z-index: 1030;
 101 }
 102 /* Define 2 column template */
 103 .right-side,
 104 .left-side {
 105   //min-height: 100%;
 106   display: block;
 107 }
 108 /*right side - contins main content*/
 109 .right-side {
 110   background-color: #f1f2f7;
 111   margin-left: 220px;
 112 }
 113 /*left side - contains sidebar*/
 114 .left-side {
 115   position: absolute;
 116   width: 220px;
 117   top: 0;
 118 }
 119 @media screen and (min-width: 992px) {
 120   .left-side {
 121     top: 50px;
 122   }
 123   /*Right side strech mode*/
 124   .right-side.strech {
 125     margin-left: 0;
 126   }
 127   .right-side.strech > .content-header {
 128     margin-top: 0px;
 129   }
 130   /* Left side collapse */
 131   .left-side.collapse-left {
 132     left: -220px;
 133   }
 134 }
 135 /*Give content full width on xs screens*/
 136 @media screen and (max-width: 992px) {
 137   .right-side {
 138     margin-left: 0;
 139   }
 140 }
 141 /*
 142     By default the layout is not fixed but if you add the class .fixed to the body element
 143     the sidebar and the navbar will automatically become poisitioned fixed
 144 */
 145 body.fixed > .header,
 146 body.fixed .left-side,
 147 body.fixed .navbar {
 148   position: fixed;
 149 }
 150 body.fixed > .header {
 151   top: 0;
 152   right: 0;
 153   left: 0;
 154 }
 155 body.fixed .navbar {
 156   left: 0;
 157   right: 0;
 158 }
 159 body.fixed .wrapper {
 160   margin-top: 50px;
 161 }
 162 /* Content */
 163 .content {
 164   padding: 20px 15px;
 165   background: #f0f3f4;
 166   overflow: auto;
 167 }
 168 /* Utility */
 169 /* H1 - H6 font */
 170 h1,
 171 h2,
 172 h3,
 173 h4,
 174 h5,
 175 h6,
 176 .h1,
 177 .h2,
 178 .h3,
 179 .h4,
 180 .h5,
 181 .h6 {
 182   /*font-family: 'Source Sans Pro', sans-serif;*/
 183   font-family: 'Lato', sans-serif;
 184 }
 185 /* Page Header */
 186 .page-header {
 187   margin: 10px 0 20px 0;
 188   font-size: 22px;
 189 }
 190 .page-header > small {
 191   color: #666;
 192   display: block;
 193   margin-top: 5px;
 194 }
 195 /* All images should be responsive */
 196 img {
 197   max-width: 100% !important;
 198 }
 199 .sort-highlight {
 200   background: #f4f4f4;
 201   border: 1px dashed #ddd;
 202   margin-bottom: 10px;
 203 }
 204 /* 10px padding and margins */
 205 .pad {
 206   padding: 20px 10px 10px;
 207 }
 208 .margin {
 209   margin: 10px;
 210 }
 211 .pad-20 {
 212   padding: 20px;
 213 }
 214 /* Display inline */
 215 .inline {
 216   display: inline;
 217   width: auto;
 218 }
 219 /*alert*/
 220 .alert-danger {
 221   background-color: #fad5d5;
 222 }
 223 .alert-success {
 224   background-color: #cffabd;
 225 }
 226 .alert-warning {
 227   background-color: #fcf4c9;
 228 }
 229 /*badge colors*/
 230
 231 .badge-success {
 232   background-color: #27C24C;
 233   color: #DFF5E4;
 234 }
 235 .badge-warning {
 236   background-color: #FAD733;
 237   color: #FDF8E5;
 238 }
 239 .badge-info {
 240   background-color: #23B7E5;
 241   color: #E3F6FC;
 242 }
 243 .badge-danger {
 244   background-color: #F05050;
 245   color: #FAE6E6;
 246 }
 247 .badge-primary {
 248   background-color: #4697ce;
 249 }
 250 .badge-inverse {
 251   background-color: #4f5259;
 252   color: #DFE2F0;
 253 }
 254 .badge, .label {
 255   font-weight: bold;
 256   text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 257 }
 258
 259 /*label*/
 260 .label-primary {
 261   background-color: #4697ce;
 262 }
 263 .label-default {
 264   background-color: #a1a1a1;
 265
 266 }
 267 .label-success {
 268   background-color: #27C24C;
 269   color: #DFF5E4;
 270 }
 271 .label-info {
 272   background-color: #23B7E5;
 273   color: #E3F6FC;
 274 }
 275 .label-inverse {
 276   background-color: #4f5259;
 277   color: #DFE2F0;
 278 }
 279 .label-warning {
 280   background-color: #FAD733;
 281   color: #FDF8E5;
 282 }
 283 .label-danger {
 284   background-color: #F05050;
 285   color: #FAE6E6;
 286 }
 287 /* Background colors */
 288 .bg-red,
 289 .bg-yellow,
 290 .bg-aqua,
 291 .bg-blue,
 292 .bg-light-blue,
 293 .bg-green,
 294 .bg-navy,
 295 .bg-teal,
 296 .bg-olive,
 297 .bg-lime,
 298 .bg-orange,
 299 .bg-fuchsia,
 300 .bg-purple,
 301 .bg-maroon,
 302 .bg-black
 303 .bg-violet {
 304   color: #f9f9f9 !important;
 305 }
 306
 307 .twt-area {
 308   border-bottom: 1px dotted #eee;
 309   margin-bottom: 5px;
 310   padding-bottom: 3px;
 311 }
 312 .twt-area textarea {
 313   margin-bottom: 3px;
 314 }
 315 .m-lr-10 {
 316   /*margin-top: 10px;*/
 317   margin-left: 10px;
 318   margin-right: 10px;
 319 }
 320 .m-t-15 {
 321   margin-top: 15px;
 322 }
 323 .m-b-5 {
 324   margin-bottom: 5px;
 325 }
 326 .m-b-10 {
 327   margin-bottom: 10px;
 328 }
 329 .m-b-15 {
 330   margin-bottom: 15px;
 331 }
 332 .m-b-20 {
 333   margin-bottom: 20px;
 334 }
 335 .teammates a {
 336   color:#505050;
 337 }
 338 .teammates img {
 339   border-radius: 5px;
 340   margin-right: 10px;
 341 }
 342 .teammates li {
 343   border: 1px solid #edf1f2;
 344 }
 345 .bg-white {
 346   background-color: #fff !important;
 347 }
 348 .bg-gray {
 349   background-color: #eaeaec !important;
 350 }
 351 .bg-black {
 352   background-color: #222222 !important;
 353 }
 354 .bg-red {
 355   background-color: #F05050 !important;
 356 }
 357 .bg-yellow {
 358   background-color: #FAD733 !important;
 359 }
 360 .bg-aqua {
 361   background-color: #4FC1E9 !important
 362 }
 363 .bg-blue {
 364   background-color: #0073b7 !important;
 365 }
 366 .bg-light-blue {
 367   background-color: #3c8dbc !important;
 368 }
 369 .bg-green {
 370   background-color: #27C24C  !important;
 371 }
 372 .bg-navy {
 373   background-color: #001f3f !important;
 374 }
 375 .bg-teal {
 376   background-color: #39cccc !important;
 377 }
 378 .bg-olive {
 379   background-color: #3d9970 !important;
 380 }
 381 .bg-lime {
 382   background-color: #01ff70 !important;
 383 }
 384 .bg-orange {
 385   background-color: #ff851b !important;
 386 }
 387 .bg-fuchsia {
 388   background-color: #f012be !important;
 389 }
 390 .bg-purple {
 391   background-color: #932ab6 !important;
 392 }
 393 .bg-maroon {
 394   background-color: #85144b !important;
 395 }
 396 .bg-violet {
 397   background-color: #7266ba !important;
 398 }
 399 .bg-twitter {
 400   background-color: #00c7f7;
 401   color: white;
 402 }
 403 .bg-facebook {
 404   background-color: #335397;
 405   color: white;
 406 }
 407 .bg-google-plus {
 408   background-color: #df4a32;
 409   color: white;
 410 }
 411 /* Text colors */
 412 .text-primary {
 413   color: #4697ce;
 414 }
 415 .text-info {
 416   color: #63b7e6;
 417 }
 418 .text-success {
 419   color: #7dcc93;
 420 }
 421 .text-warning {
 422   color: #e8db4f;
 423 }
 424 .text-red {
 425   color: #f56954 !important;
 426 }
 427 .text-yellow {
 428   color: #f39c12 !important;
 429 }
 430 .text-aqua {
 431   color: #00c0ef !important;
 432 }
 433 .text-blue {
 434   color: #0073b7 !important;
 435 }
 436 .text-black {
 437   color: #222222 !important;
 438 }
 439 .text-light-blue {
 440   color: #3c8dbc !important;
 441 }
 442 .text-green {
 443   color: #00a65a !important;
 444 }
 445 .text-navy {
 446   color: #001f3f !important;
 447 }
 448 .text-teal {
 449   color: #39cccc !important;
 450 }
 451 .text-olive {
 452   color: #3d9970 !important;
 453 }
 454 .text-lime {
 455   color: #01ff70 !important;
 456 }
 457 .text-orange {
 458   color: #ff851b !important;
 459 }
 460 .text-fuchsia {
 461   color: #f012be !important;
 462 }
 463 .text-purple {
 464   color: #932ab6 !important;
 465 }
 466 .text-maroon {
 467   color: #85144b !important;
 468 }
 469 /*slider css*/
 470 #red .slider-selection {
 471     background: #f05050;
 472 }
 473
 474 #blue .slider-selection {
 475     background: #4697ce;
 476 }
 477
 478 #green .slider-selection {
 479     background: #27C24C;
 480 }
 481
 482 #yellow .slider-selection {
 483     background: #fad733;
 484 }
 485
 486 #aqua .slider-selection {
 487     background: #00c0ef;
 488 }
 489
 490 .slider-handle {
 491   background-color: #fff;
 492   border: 2px solid #86D4FC;
 493 }
 494
 495 /*bg-violet*/
 496 #purple .slider-selection {
 497     background: #7266ba;
 498 }
 499 /*Hide elements by display none only*/
 500 .hide {
 501   display: none !important;
 502 }
 503 /* Remove borders */
 504 .no-border {
 505   border: 0px !important;
 506 }
 507 /* Remove padding */
 508 .no-padding {
 509   padding: 0px !important;
 510 }
 511 /* Remove margins */
 512 .no-margin {
 513   margin: 0px !important;
 514 }
 515 /* Remove box shadow */
 516 .no-shadow {
 517   box-shadow: none!important;
 518 }
 519 /* Don't display when printing */
 520 @media print {
 521   .no-print {
 522     display: none;
 523   }
 524   .left-side,
 525   .header,
 526   .content-header {
 527     display: none;
 528   }
 529   .right-side {
 530     margin: 0;
 531   }
 532 }
 533 /* Remove border radius */
 534 .flat {
 535   -webkit-border-radius: 0 !important;
 536   -moz-border-radius: 0 !important;
 537   border-radius: 0 !important;
 538 }
 539 /* Change the color of the striped tables */
 540 .table-striped > tbody > tr:nth-child(odd) > td,
 541 .table-striped > tbody > tr:nth-child(odd) > th {
 542   background-color: #f3f4f5;
 543 }
 544 .table.no-border,
 545 .table.no-border td,
 546 .table.no-border th {
 547   border: 0;
 548 }
 549 /* .text-center in tables */
 550 table.text-center,
 551 table.text-center td,
 552 table.text-center th {
 553   text-align: center;
 554 }
 555 .table.align th {
 556   text-align: left;
 557 }
 558 .table.align td {
 559   text-align: right;
 560 }
 561 .text-bold,
 562 .text-bold.table td,
 563 .text-bold.table th {
 564   font-weight: 700;
 565 }
 566 .border-radius-none {
 567   -webkit-border-radius: 0 !important;
 568   -moz-border-radius: 0 !important;
 569   border-radius: 0 !important;
 570 }
 571 /* _fix for sparkline tooltip */
 572 .jqstooltip {
 573   padding: 5px!important;
 574   width: auto!important;
 575   height: auto!important;
 576 }
 577 /*
 578 Gradient Background colors
 579 */
 580 .bg-teal-gradient {
 581   background: #39cccc !important;
 582   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #39cccc), color-stop(1, #7adddd)) !important;
 583   background: -ms-linear-gradient(bottom, #39cccc, #7adddd) !important;
 584   background: -moz-linear-gradient(center bottom, #39cccc 0%, #7adddd 100%) !important;
 585   background: -o-linear-gradient(#7adddd, #39cccc) !important;
 586   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7adddd', endColorstr='#39cccc', GradientType=0) !important;
 587   color: #fff;
 588 }
 589 .bg-light-blue-gradient {
 590   background: #3c8dbc !important;
 591   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
 592   background: -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
 593   background: -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
 594   background: -o-linear-gradient(#67a8ce, #3c8dbc) !important;
 595   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;
 596   color: #fff;
 597 }
 598 .bg-blue-gradient {
 599   background: #0073b7 !important;
 600   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0073b7), color-stop(1, #0089db)) !important;
 601   background: -ms-linear-gradient(bottom, #0073b7, #0089db) !important;
 602   background: -moz-linear-gradient(center bottom, #0073b7 0%, #0089db 100%) !important;
 603   background: -o-linear-gradient(#0089db, #0073b7) !important;
 604   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0089db', endColorstr='#0073b7', GradientType=0) !important;
 605   color: #fff;
 606 }
 607 .bg-aqua-gradient {
 608   background: #00c0ef !important;
 609   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00c0ef), color-stop(1, #14d1ff)) !important;
 610   background: -ms-linear-gradient(bottom, #00c0ef, #14d1ff) !important;
 611   background: -moz-linear-gradient(center bottom, #00c0ef 0%, #14d1ff 100%) !important;
 612   background: -o-linear-gradient(#14d1ff, #00c0ef) !important;
 613   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14d1ff', endColorstr='#00c0ef', GradientType=0) !important;
 614   color: #fff;
 615 }
 616 .bg-yellow-gradient {
 617   background: #f39c12 !important;
 618   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f39c12), color-stop(1, #f7bc60)) !important;
 619   background: -ms-linear-gradient(bottom, #f39c12, #f7bc60) !important;
 620   background: -moz-linear-gradient(center bottom, #f39c12 0%, #f7bc60 100%) !important;
 621   background: -o-linear-gradient(#f7bc60, #f39c12) !important;
 622   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7bc60', endColorstr='#f39c12', GradientType=0) !important;
 623   color: #fff;
 624 }
 625 .bg-purple-gradient {
 626   background: #932ab6 !important;
 627   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #932ab6), color-stop(1, #b959d9)) !important;
 628   background: -ms-linear-gradient(bottom, #932ab6, #b959d9) !important;
 629   background: -moz-linear-gradient(center bottom, #932ab6 0%, #b959d9 100%) !important;
 630   background: -o-linear-gradient(#b959d9, #932ab6) !important;
 631   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b959d9', endColorstr='#932ab6', GradientType=0) !important;
 632   color: #fff;
 633 }
 634 .bg-green-gradient {
 635   background: #00a65a !important;
 636   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00a65a), color-stop(1, #00ca6d)) !important;
 637   background: -ms-linear-gradient(bottom, #00a65a, #00ca6d) !important;
 638   background: -moz-linear-gradient(center bottom, #00a65a 0%, #00ca6d 100%) !important;
 639   background: -o-linear-gradient(#00ca6d, #00a65a) !important;
 640   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ca6d', endColorstr='#00a65a', GradientType=0) !important;
 641   color: #fff;
 642 }
 643 .bg-red-gradient {
 644   background: #f56954 !important;
 645   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f56954), color-stop(1, #f89384)) !important;
 646   background: -ms-linear-gradient(bottom, #f56954, #f89384) !important;
 647   background: -moz-linear-gradient(center bottom, #f56954 0%, #f89384 100%) !important;
 648   background: -o-linear-gradient(#f89384, #f56954) !important;
 649   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89384', endColorstr='#f56954', GradientType=0) !important;
 650   color: #fff;
 651 }
 652 .bg-black-gradient {
 653   background: #222222 !important;
 654   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #222222), color-stop(1, #3c3c3c)) !important;
 655   background: -ms-linear-gradient(bottom, #222222, #3c3c3c) !important;
 656   background: -moz-linear-gradient(center bottom, #222222 0%, #3c3c3c 100%) !important;
 657   background: -o-linear-gradient(#3c3c3c, #222222) !important;
 658   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#222222', GradientType=0) !important;
 659   color: #fff;
 660 }
 661 .bg-maroon-gradient {
 662   background: #85144b !important;
 663   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #85144b), color-stop(1, #b11b64)) !important;
 664   background: -ms-linear-gradient(bottom, #85144b, #b11b64) !important;
 665   background: -moz-linear-gradient(center bottom, #85144b 0%, #b11b64 100%) !important;
 666   background: -o-linear-gradient(#b11b64, #85144b) !important;
 667   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b11b64', endColorstr='#85144b', GradientType=0) !important;
 668   color: #fff;
 669 }
 670 .connectedSortable {
 671   min-height: 100px;
 672 }
 673 /*---------------------------------------------------
 674     LESS Elements 0.9
 675   ---------------------------------------------------
 676     A set of useful LESS mixins
 677     More info at: http://lesselements.com
 678   ---------------------------------------------------*/
 679 /*
 680     Components: navbar, logo and content header
 681 -------------------------------------------------
 682 */
 683 body > .header {
 684   position: relative;
 685   max-height: 100px;
 686   z-index: 1030;
 687 }
 688 body > .header .navbar {
 689   height: 50px;
 690   margin-bottom: 0;
 691   margin-left: 220px;
 692 }
 693 body > .header .navbar .sidebar-toggle {
 694   float: left;
 695   padding: 9px 5px;
 696   margin-top: 8px;
 697   margin-right: 0;
 698   margin-bottom: 8px;
 699   margin-left: 5px;
 700   background-color: transparent;
 701   background-image: none;
 702   border: 1px solid transparent;
 703   -webkit-border-radius: 0 !important;
 704   -moz-border-radius: 0 !important;
 705   border-radius: 0 !important;
 706 }
 707 body > .header .navbar .sidebar-toggle:hover .icon-bar {
 708   background: #f6f6f6;
 709 }
 710 body > .header .navbar .sidebar-toggle .icon-bar {
 711   display: block;
 712   width: 22px;
 713   height: 2px;
 714   -webkit-border-radius: 4px;
 715   -moz-border-radius: 4px;
 716   border-radius: 4px;
 717 }
 718 body > .header .navbar .sidebar-toggle .icon-bar + .icon-bar {
 719   margin-top: 4px;
 720 }
 721 body > .header .navbar .nav > li.user > a {
 722   font-weight: bold;
 723 }
 724 body > .header .navbar .nav > li.user > a > .fa,
 725 body > .header .navbar .nav > li.user > a > .glyphicon,
 726 body > .header .navbar .nav > li.user > a > .ion {
 727   margin-right: 5px;
 728 }
 729 body > .header .navbar .nav > li > a > .label {
 730   -webkit-border-radius: 50%;
 731   -moz-border-radius: 50%;
 732   border-radius: 50%;
 733   position: absolute;
 734   top: 7px;
 735   right: 2px;
 736   font-size: 10px;
 737   font-weight: normal;
 738   width: 15px;
 739   height: 15px;
 740   line-height: 1.0em;
 741   text-align: center;
 742   padding: 2px;
 743 }
 744 body > .header .navbar .nav > li > a:hover > .label {
 745   top: 3px;
 746 }
 747 body > .header .logo {
 748   float: left;
 749   font-size: 20px;
 750   line-height: 50px;
 751   text-align: center;
 752   padding: 0 10px;
 753   width: 220px;
 754   font-family: 'Kaushan Script', cursive;
 755   font-weight: 500;
 756   height: 50px;
 757   display: block;
 758   background-color:#d3e7f0;
 759 }
 760 body > .header .logo .icon {
 761   margin-right: 10px;
 762 }
 763 .right-side > .content-header {
 764   position: relative;
 765   padding: 15px;
 766 }
 767 .right-side > .content-header > h1 {
 768   margin: 0;
 769   font-size: 24px;
 770 }
 771 .right-side > .content-header > h1 > small {
 772   font-size: 15px;
 773   display: inline-block;
 774   padding-left: 4px;
 775   font-weight: 300;
 776 }
 777 .breadcrumb {
 778   background-color: #fff;
 779 }
 780 .breadcrumb a {
 781   color: #000;
 782 }
 783 .right-side > .content-header > .breadcrumb {
 784   float: right;
 785   background: transparent;
 786   margin-top: 0px;
 787   margin-bottom: 0;
 788   font-size: 12px;
 789   padding: 7px 5px;
 790   position: absolute;
 791   top: 15px;
 792   right: 10px;
 793   -webkit-border-radius: 2px;
 794   -moz-border-radius: 2px;
 795   border-radius: 2px;
 796 }
 797 .breadcrumb-alt {
 798   overflow: hidden;
 799   list-style: none;
 800   margin: 0px 0px 20px;
 801   padding: 0px;
 802   width: 100%;
 803 }
 804 .breadcrumb-alt > li {
 805 float: left;
 806 margin: 0px 25px 0px 0px;
 807 }
 808 .breadcrumb-alt > li > a {
 809 position: relative;
 810 float: left;
 811 background-color: rgb(238, 238, 238);
 812 color: rgb(118, 118, 118);
 813 font-size: 12px;
 814 padding: 10px;
 815 }
 816 .breadcrumb-alt > li > a::before {
 817 position: absolute;
 818 top: 50%;
 819 left: -1em;
 820 margin-top: -1.6em;
 821 border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgba(0, 0, 0, 0);
 822 border-style: solid;
 823 border-width: 1.5em 0px 1.7em 1em;
 824 content: '';
 825 }
 826 .breadcrumb-alt > li > a::after {
 827 position: absolute;
 828 top: 50%;
 829 right: -1em;
 830 margin-top: -1.5em;
 831 border-bottom: 1.5em solid rgba(0, 0, 0, 0);
 832 border-left: 1em solid rgb(238, 238, 238);
 833 border-top: 1.5em solid rgba(0, 0, 0, 0);
 834 content: '';
 835 }
 836 .right-side > .content-header > .breadcrumb > li > a {
 837   color: #444;
 838   text-decoration: none;
 839 }
 840 .right-side > .content-header > .breadcrumb > li > a > .fa,
 841 .right-side > .content-header > .breadcrumb > li > a > .glyphicon,
 842 .right-side > .content-header > .breadcrumb > li > a > .ion {
 843   margin-right: 5px;
 844 }
 845 .right-side > .content-header > .breadcrumb > li + li:before {
 846   content: '>\00a0';
 847 }
 848 @media screen and (max-width: 767px) {
 849   .right-side > .content-header > .breadcrumb {
 850     position: relative;
 851     margin-top: 5px;
 852     top: 0;
 853     right: 0;
 854     float: none;
 855     background: #efefef;
 856   }
 857 }
 858 @media (max-width: 767px) {
 859   .navbar .navbar-nav > li {
 860     float: left;
 861   }
 862   .navbar-nav {
 863     margin: 0;
 864     float: left;
 865   }
 866   .navbar-nav > li > a {
 867     padding-top: 15px;
 868     padding-bottom: 15px;
 869     line-height: 20px;
 870   }
 871   .navbar .navbar-right {
 872     float: right;
 873   }
 874 }
 875 @media screen and (max-width: 560px) {
 876   body > .header {
 877     position: relative;
 878   }
 879   body > .header .logo,
 880   body > .header .navbar {
 881     width: 100%;
 882     float: none;
 883     position: relative!important;
 884   }
 885   body > .header .navbar {
 886     margin: 0;
 887   }
 888   body.fixed > .header {
 889     position: fixed;
 890   }
 891   body.fixed > .wrapper,
 892   body.fixed .sidebar-offcanvas {
 893     margin-top: 100px!important;
 894   }
 895 }
 896 /*
 897     Component: Sidebar
 898 --------------------------
 899 */
 900 .sidebar {
 901   margin-bottom: 5px;
 902 }
 903 .sidebar .sidebar-form input:focus {
 904   -webkit-box-shadow: none;
 905   -moz-box-shadow: none;
 906   box-shadow: none;
 907   border-color: transparent!important;
 908 }
 909 .sidebar .sidebar-menu {
 910   list-style: none;
 911   margin: 0;
 912   padding: 0;
 913 }
 914 .sidebar .sidebar-menu > li {
 915   margin: 0;
 916   padding: 0;
 917 }
 918 .sidebar .sidebar-menu > li > a {
 919   padding: 12px 5px 12px 15px;
 920   display: block;
 921 }
 922 .sidebar .sidebar-menu > li > a > .fa,
 923 .sidebar .sidebar-menu > li > a > .glyphicon,
 924 .sidebar .sidebar-menu > li > a > .ion {
 925   width: 20px;
 926 }
 927 .sidebar .sidebar-menu .treeview-menu {
 928   display: none;
 929   list-style: none;
 930   padding: 0;
 931   margin: 0;
 932 }
 933 .sidebar .sidebar-menu .treeview-menu > li {
 934   margin: 0;
 935 }
 936 .sidebar .sidebar-menu .treeview-menu > li > a {
 937   padding: 8px 5px 8px 15px;
 938   display: block;
 939   font-size: 14px;
 940   margin: 0px 0px;
 941 }
 942 .sidebar .sidebar-menu .treeview-menu > li > a > .fa,
 943 .sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
 944 .sidebar .sidebar-menu .treeview-menu > li > a > .ion {
 945   width: 20px;
 946 }
 947 .user-panel {
 948   padding: 10px;
 949 }
 950 .user-panel:before,
 951 .user-panel:after {
 952   display: table;
 953   content: " ";
 954 }
 955 .user-panel:after {
 956   clear: both;
 957 }
 958 .user-panel > .image > img {
 959   width: 45px;
 960   height: 45px;
 961 }
 962 .user-panel > .info {
 963   font-weight: 600;
 964   padding: 5px 5px 5px 15px;
 965   font-size: 14px;
 966   line-height: 1;
 967 }
 968 .user-panel > .info > p {
 969   margin-bottom: 9px;
 970 }
 971 .user-panel > .info > a {
 972   text-decoration: none;
 973   padding-right: 5px;
 974   margin-top: 3px;
 975   font-size: 11px;
 976   font-weight: normal;
 977 }
 978 .user-panel > .info > a > .fa,
 979 .user-panel > .info > a > .ion,
 980 .user-panel > .info > a > .glyphicon {
 981   margin-right: 3px;
 982 }
 983 /*
 984  * Off Canvas
 985  * --------------------------------------------------
 986  *  Gives us the push menu effect
 987  */
 988 @media screen and (max-width: 992px) {
 989   .relative {
 990     position: relative;
 991   }
 992   .row-offcanvas-right .sidebar-offcanvas {
 993     right: -220px;
 994   }
 995   .row-offcanvas-left .sidebar-offcanvas {
 996     left: -220px;
 997   }
 998   .row-offcanvas-right.active {
 999     right: 220px;
1000   }
1001   .row-offcanvas-left.active {
1002     left: 220px;
1003   }
1004   .sidebar-offcanvas {
1005     left: 0;
1006   }
1007   body.fixed .sidebar-offcanvas {
1008     margin-top: 50px;
1009     left: -220px;
1010   }
1011   body.fixed .row-offcanvas-left.active .navbar {
1012     left: 220px !important;
1013     right: 0;
1014   }
1015   body.fixed .row-offcanvas-left.active .sidebar-offcanvas {
1016     left: 0px;
1017   }
1018 }
1019 /*
1020     Dropdown menus
1021 ----------------------------
1022 */
1023 /*Dropdowns in general*/
1024 .dropdown-menu {
1025   -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
1026   -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
1027   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
1028   z-index: 2300;
1029 }
1030 .dropdown-menu > li > a > .glyphicon,
1031 .dropdown-menu > li > a > .fa,
1032 .dropdown-menu > li > a > .ion {
1033   margin-right: 10px;
1034 }
1035 .dropdown-menu > li > a:hover {
1036   background-color: #3c8dbc;
1037   color: #f9f9f9;
1038 }
1039 .dropdown-menu-right > li > a:hover {
1040   background-color: #39435c;
1041   color: #f9f9f9;
1042 }
1043 /*Drodown in navbars*/
1044 .skin-blue .navbar .dropdown-menu > li > a {
1045   color: #444444;
1046 }
1047 /*
1048     Navbar custom dropdown menu
1049 ------------------------------------
1050 */
1051 .navbar-nav > .notifications-menu > .dropdown-menu,
1052 .navbar-nav > .messages-menu > .dropdown-menu,
1053 .navbar-nav > .tasks-menu > .dropdown-menu {
1054   width: 260px;
1055   padding: 0 0 0 0!important;
1056   margin: 0!important;
1057   top: 100%;
1058   border: 1px solid #dfdfdf;
1059   -webkit-border-radius: 4px !important;
1060   -moz-border-radius: 4px !important;
1061   border-radius: 4px !important;
1062 }
1063 .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
1064 .navbar-nav > .messages-menu > .dropdown-menu > li.header,
1065 .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
1066   -webkit-border-top-left-radius: 4px;
1067   -webkit-border-top-right-radius: 4px;
1068   -webkit-border-bottom-right-radius: 0;
1069   -webkit-border-bottom-left-radius: 0;
1070   -moz-border-radius-topleft: 4px;
1071   -moz-border-radius-topright: 4px;
1072   -moz-border-radius-bottomright: 0;
1073   -moz-border-radius-bottomleft: 0;
1074   border-top-left-radius: 4px;
1075   border-top-right-radius: 4px;
1076   border-bottom-right-radius: 0;
1077   border-bottom-left-radius: 0;
1078   background-color: #ffffff;
1079   padding: 7px 10px;
1080   border-bottom: 1px solid #f4f4f4;
1081   color: #444444;
1082   font-size: 14px;
1083 }
1084 .navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
1085 .navbar-nav > .messages-menu > .dropdown-menu > li.header:after,
1086 .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after {
1087   bottom: 100%;
1088   left: 92%;
1089   border: solid transparent;
1090   content: " ";
1091   height: 0;
1092   width: 0;
1093   position: absolute;
1094   pointer-events: none;
1095   border-color: rgba(255, 255, 255, 0);
1096   border-bottom-color: #ffffff;
1097   border-width: 7px;
1098   margin-left: -7px;
1099 }
1100 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
1101 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
1102 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
1103   -webkit-border-top-left-radius: 0px;
1104   -webkit-border-top-right-radius: 0px;
1105   -webkit-border-bottom-right-radius: 4px;
1106   -webkit-border-bottom-left-radius: 4px;
1107   -moz-border-radius-topleft: 0px;
1108   -moz-border-radius-topright: 0px;
1109   -moz-border-radius-bottomright: 4px;
1110   -moz-border-radius-bottomleft: 4px;
1111   border-top-left-radius: 0px;
1112   border-top-right-radius: 0px;
1113   border-bottom-right-radius: 4px;
1114   border-bottom-left-radius: 4px;
1115   font-size: 12px;
1116   background-color: #f4f4f4;
1117   padding: 7px 10px;
1118   border-bottom: 1px solid #eeeeee;
1119   color: #444444;
1120   text-align: center;
1121 }
1122 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
1123 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
1124 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
1125   background: #f4f4f4;
1126   text-decoration: none;
1127   font-weight: normal;
1128 }
1129 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
1130 .navbar-nav > .messages-menu > .dropdown-menu > li .menu,
1131 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
1132   margin: 0;
1133   padding: 0;
1134   list-style: none;
1135   overflow-x: hidden;
1136 }
1137 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
1138 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
1139 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
1140   display: block;
1141   white-space: nowrap;
1142   /* Prevent text from breaking */
1143   border-bottom: 1px solid #f4f4f4;
1144 }
1145 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
1146 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
1147 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
1148   background: #fafafa;
1149   text-decoration: none;
1150 }
1151 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
1152   font-size: 12px;
1153   color: #444444;
1154 }
1155 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > i {
1156   border-radius: 30px;
1157 }
1158 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
1159 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
1160 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
1161   font-size: 20px;
1162   width: 50px;
1163   text-align: center;
1164   padding: 15px 0px;
1165   margin-right: 5px;
1166   /* Default background and font colors */
1167   background: #00c0ef;
1168   color: #f9f9f9;
1169   /* Fallback for browsers that doesn't support rgba */
1170   color: rgba(255, 255, 255, 0.7);
1171 }
1172 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.danger,
1173 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.danger,
1174 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.danger {
1175   background: #f56954;
1176 }
1177 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.warning,
1178 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.warning,
1179 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.warning {
1180   background: #f39c12;
1181 }
1182 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.success,
1183 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.success,
1184 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.success {
1185   background: #00a65a;
1186 }
1187 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon.info,
1188 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa.info,
1189 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion.info {
1190   background: #00c0ef;
1191 }
1192 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
1193   margin: 0px;
1194   line-height: 20px;
1195   padding: 10px 5px 10px 5px;
1196   -webkit-border-radius: 4px;
1197   -moz-border-radius: 4px;
1198   border-radius: 4px;
1199 }
1200 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
1201   margin: auto 10px auto auto;
1202   width: 40px;
1203   height: 40px;
1204   border: 1px solid #dddddd;
1205 }
1206 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
1207   padding: 0;
1208   margin: 0 0 0 45px;
1209   color: #444444;
1210   font-size: 15px;
1211 }
1212 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
1213   color: #999999;
1214   font-size: 10px;
1215   float: right;
1216 }
1217 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
1218   margin: 0 0 0 5px;
1219   font-size: 12px;
1220   color: #888888;
1221 }
1222 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before,
1223 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
1224   display: table;
1225   content: " ";
1226 }
1227 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
1228   clear: both;
1229 }
1230 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
1231   padding: 10px;
1232 }
1233 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
1234   font-size: 14px;
1235   padding: 0;
1236   margin: 0 0 10px 0;
1237   color: #666666;
1238 }
1239 .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
1240   padding: 0;
1241   margin: 0;
1242 }
1243 .navbar-nav > .user-menu > .dropdown-menu {
1244   -webkit-border-radius: 0;
1245   -moz-border-radius: 0;
1246   border-radius: 0;
1247   padding: 0;
1248   border-top-width: 0;
1249   width: 225px;
1250 }
1251 .navbar-nav > .user-menu > .dropdown-menu:after {
1252   bottom: 100%;
1253   right: 10px;
1254   border: solid transparent;
1255   content: " ";
1256   height: 0;
1257   width: 0;
1258   position: absolute;
1259   pointer-events: none;
1260   border-color: rgba(255, 255, 255, 0);
1261   border-bottom-color: #f9fafc;
1262   border-width: 10px;
1263   margin-left: -10px;
1264 }
1265 .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
1266   height: 175px;
1267   padding: 10px;
1268   background: #3c8dbc;
1269   text-align: center;
1270 }
1271 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
1272   z-index: 5;
1273   height: 90px;
1274   width: 90px;
1275   border: 8px solid;
1276   border-color: transparent;
1277   border-color: rgba(255, 255, 255, 0.2);
1278 }
1279 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
1280   z-index: 5;
1281   color: #f9f9f9;
1282   color: rgba(255, 255, 255, 0.8);
1283   font-size: 17px;
1284   text-shadow: 2px 2px 3px #333333;
1285   margin-top: 10px;
1286 }
1287 .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
1288   display: block;
1289   font-size: 12px;
1290 }
1291 .navbar-nav > .user-menu > .dropdown-menu > li.user-body {
1292   padding: 15px;
1293   border-bottom: 1px solid #f4f4f4;
1294   border-top: 1px solid #dddddd;
1295 }
1296 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:before,
1297 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
1298   display: table;
1299   content: " ";
1300 }
1301 .navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
1302   clear: both;
1303 }
1304 .navbar-nav > .user-menu > .dropdown-menu > li.user-body > div > a {
1305   color: #0073b7;
1306 }
1307 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
1308   background-color: #f9f9f9;
1309   padding: 10px;
1310 }
1311 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:before,
1312 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
1313   display: table;
1314   content: " ";
1315 }
1316 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
1317   clear: both;
1318 }
1319 .navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-default {
1320   color: #666666;
1321 }
1322 /* Add fade animation to dropdown menus */
1323 .open > .dropdown-menu {
1324   animation-name: fadeAnimation;
1325   animation-duration: .7s;
1326   animation-iteration-count: 1;
1327   animation-timing-function: ease;
1328   animation-fill-mode: forwards;
1329   -webkit-animation-name: fadeAnimation;
1330   -webkit-animation-duration: .7s;
1331   -webkit-animation-iteration-count: 1;
1332   -webkit-animation-timing-function: ease;
1333   -webkit-animation-fill-mode: forwards;
1334   -moz-animation-name: fadeAnimation;
1335   -moz-animation-duration: .7s;
1336   -moz-animation-iteration-count: 1;
1337   -moz-animation-timing-function: ease;
1338   -moz-animation-fill-mode: forwards;
1339 }
1340 @keyframes fadeAnimation {
1341   from {
1342     opacity: 0;
1343     top: 120%;
1344   }
1345   to {
1346     opacity: 1;
1347     top: 100%;
1348   }
1349 }
1350 @-webkit-keyframes fadeAnimation {
1351   from {
1352     opacity: 0;
1353     top: 120%;
1354   }
1355   to {
1356     opacity: 1;
1357     top: 100%;
1358   }
1359 }
1360 /* Fix dropdown menu for small screens to display correctly on small screens */
1361 @media screen and (max-width: 767px) {
1362   .navbar-nav > .notifications-menu > .dropdown-menu,
1363   .navbar-nav > .user-menu > .dropdown-menu,
1364   .navbar-nav > .tasks-menu > .dropdown-menu,
1365   .navbar-nav > .messages-menu > .dropdown-menu {
1366     position: absolute;
1367     top: 100%;
1368     right: 0;
1369     left: auto;
1370     border-right: 1px solid #dddddd;
1371     border-bottom: 1px solid #dddddd;
1372     border-left: 1px solid #dddddd;
1373     background: #ffffff;
1374   }
1375 }
1376 /* Fix menu positions on xs screens to appear correctly and fully */
1377 @media screen and (max-width: 480px) {
1378   .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
1379   .navbar-nav > .tasks-menu > .dropdown-menu > li.header,
1380   .navbar-nav > .messages-menu > .dropdown-menu > li.header {
1381     /* Remove arrow from the top */
1382   }
1383   .navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
1384   .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after,
1385   .navbar-nav > .messages-menu > .dropdown-menu > li.header:after {
1386     border-width: 0px!important;
1387   }
1388   .navbar-nav > .tasks-menu > .dropdown-menu {
1389     position: absolute;
1390     right: -120px;
1391     left: auto;
1392   }
1393   .navbar-nav > .notifications-menu > .dropdown-menu {
1394     position: absolute;
1395     right: -170px;
1396     left: auto;
1397   }
1398   .navbar-nav > .messages-menu > .dropdown-menu {
1399     position: absolute;
1400     right: -210px;
1401     left: auto;
1402   }
1403 }
1404 /*
1405    All form elements including input, select, textarea etc.
1406 -----------------------------------------------------------------
1407 */
1408 .form-control {
1409   /*-webkit-border-radius: 3px !important;
1410   -moz-border-radius: 3px !important;
1411   border-radius: 3px !important;*/
1412   box-shadow: none;
1413 }
1414 .form-control:focus {
1415   border-color: #3c8dbc !important;
1416   box-shadow: none;
1417 }
1418 .form-group.has-success label {
1419   color: #00a65a;
1420 }
1421 .form-group.has-success .form-control {
1422   border-color: #00a65a !important;
1423   box-shadow: none;
1424 }
1425 .form-group.has-warning label {
1426   color: #f39c12;
1427 }
1428 .form-group.has-warning .form-control {
1429   border-color: #f39c12 !important;
1430   box-shadow: none;
1431 }
1432 .form-group.has-error label {
1433   color: #f56954;
1434 }
1435 .form-group.has-error .form-control {
1436   border-color: #f56954 !important;
1437   box-shadow: none;
1438 }
1439 /* Input group */
1440 .input-group .input-group-addon {
1441   border-radius: 0;
1442   background-color: #f4f4f4;
1443 }
1444 /* button groups */
1445 .btn-group-vertical .btn.btn-flat:first-of-type,
1446 .btn-group-vertical .btn.btn-flat:last-of-type {
1447   border-radius: 0;
1448 }
1449 /* Checkbox and radio inputs */
1450 .checkbox,
1451 .radio {
1452   /*padding-left: 0;*/
1453 }
1454 /*
1455     Compenent: Progress bars
1456 --------------------------------
1457 */
1458 /* size variation */
1459 .progress.sm {
1460   height: 10px;
1461 }
1462 .progress.xs {
1463   height: 7px;
1464 }
1465 /* Vertical bars */
1466 .progress.vertical {
1467   position: relative;
1468   width: 30px;
1469   height: 200px;
1470   display: inline-block;
1471   margin-right: 10px;
1472 }
1473 .progress.vertical > .progress-bar {
1474   width: 100%!important;
1475   position: absolute;
1476   bottom: 0;
1477 }
1478 .progress.vertical.sm {
1479   width: 20px;
1480 }
1481 .progress.vertical.xs {
1482   width: 10px;
1483 }
1484 /* Remove margins from progress bars when put in a table */
1485 .table tr > td .progress {
1486   margin: 0;
1487 }
1488 .progress-bar-light-blue,
1489 .progress-bar-primary {
1490   background-color: #3c8dbc;
1491 }
1492 .progress-striped .progress-bar-light-blue,
1493 .progress-striped .progress-bar-primary {
1494   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));
1495   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);
1496   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);
1497   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);
1498 }
1499 .progress-bar-green,
1500 .progress-bar-success {
1501   background-color: #00a65a;
1502 }
1503 .progress-striped .progress-bar-green,
1504 .progress-striped .progress-bar-success {
1505   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));
1506   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);
1507   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);
1508   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);
1509 }
1510 .progress-bar-aqua,
1511 .progress-bar-info {
1512   background-color: #00c0ef;
1513 }
1514 .progress-striped .progress-bar-aqua,
1515 .progress-striped .progress-bar-info {
1516   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));
1517   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);
1518   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);
1519   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);
1520 }
1521 .progress-bar-yellow,
1522 .progress-bar-warning {
1523   background-color: #f39c12;
1524 }
1525 .progress-striped .progress-bar-yellow,
1526 .progress-striped .progress-bar-warning {
1527   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));
1528   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);
1529   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);
1530   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);
1531 }
1532 .progress-bar-red,
1533 .progress-bar-danger {
1534   background-color: #f56954;
1535 }
1536 .progress-striped .progress-bar-red,
1537 .progress-striped .progress-bar-danger {
1538   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));
1539   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);
1540   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);
1541   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);
1542 }
1543 /*
1544     Component: Small boxes
1545 */
1546 .small-box {
1547   position: relative;
1548   display: block;
1549   -webkit-border-radius: 2px;
1550   -moz-border-radius: 2px;
1551   border-radius: 2px;
1552   margin-bottom: 15px;
1553 }
1554 .small-box > .inner {
1555   padding: 10px;
1556 }
1557 .small-box > .small-box-footer {
1558   position: relative;
1559   text-align: center;
1560   padding: 3px 0;
1561   color: #fff;
1562   color: rgba(255, 255, 255, 0.8);
1563   display: block;
1564   z-index: 10;
1565   background: rgba(0, 0, 0, 0.1);
1566   text-decoration: none;
1567 }
1568 .small-box > .small-box-footer:hover {
1569   color: #fff;
1570   background: rgba(0, 0, 0, 0.15);
1571 }
1572 .small-box h3 {
1573   font-size: 38px;
1574   font-weight: bold;
1575   margin: 0 0 10px 0;
1576   white-space: nowrap;
1577   padding: 0;
1578 }
1579 .small-box p {
1580   font-size: 15px;
1581 }
1582 .small-box p > small {
1583   display: block;
1584   color: #f9f9f9;
1585   font-size: 13px;
1586   margin-top: 5px;
1587 }
1588 .small-box h3,
1589 .small-box p {
1590   z-index: 5px;
1591 }
1592 .small-box .icon {
1593   position: absolute;
1594   top: auto;
1595   bottom: 5px;
1596   right: 5px;
1597   z-index: 0;
1598   font-size: 90px;
1599   color: rgba(0, 0, 0, 0.15);
1600 }
1601 .small-box:hover {
1602   text-decoration: none;
1603   color: #f9f9f9;
1604 }
1605 .small-box:hover .icon {
1606   /*animation-name: tansformAnimation;
1607   animation-duration: .5s;
1608   animation-iteration-count: 1;
1609   animation-timing-function: ease;
1610   animation-fill-mode: forwards;
1611   -webkit-animation-name: tansformAnimation;
1612   -webkit-animation-duration: .5s;
1613   -webkit-animation-iteration-count: 1;
1614   -webkit-animation-timing-function: ease;
1615   -webkit-animation-fill-mode: forwards;
1616   -moz-animation-name: tansformAnimation;
1617   -moz-animation-duration: .5s;
1618   -moz-animation-iteration-count: 1;
1619   -moz-animation-timing-function: ease;
1620   -moz-animation-fill-mode: forwards;*/
1621 }
1622 @keyframes tansformAnimation {
1623   from {
1624     font-size: 90px;
1625   }
1626   to {
1627     font-size: 100px;
1628   }
1629 }
1630 @-webkit-keyframes tansformAnimation {
1631   from {
1632     font-size: 90px;
1633   }
1634   to {
1635     font-size: 100px;
1636   }
1637 }
1638 @media screen and (max-width: 480px) {
1639   .small-box {
1640     text-align: center;
1641   }
1642   .small-box .icon {
1643     display: none;
1644   }
1645   .small-box p {
1646     font-size: 12px;
1647   }
1648 }
1649 /*
1650     component: Boxes
1651 -------------------------
1652 */
1653 .box {
1654   position: relative;
1655   background: #ffffff;
1656   /*border-top: 2px solid #c1c1c1;*/
1657   margin-bottom: 20px;
1658   -webkit-border-radius: 3px;
1659   -moz-border-radius: 3px;
1660   border-radius: 3px;
1661   width: 100%;
1662   /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
1663 }
1664 .box.box-primary {
1665   border-top-color: #3c8dbc;
1666 }
1667 .box.box-info {
1668   border-top-color: #00c0ef;
1669 }
1670 .box.box-danger {
1671   border-top-color: #f56954;
1672 }
1673 .box.box-warning {
1674   border-top-color: #f39c12;
1675 }
1676 .box.box-success {
1677   border-top-color: #00a65a;
1678 }
1679 .box.height-control .box-body {
1680   max-height: 300px;
1681   overflow: auto;
1682 }
1683 .box .box-header {
1684   position: relative;
1685   -webkit-border-top-left-radius: 3px;
1686   -webkit-border-top-right-radius: 3px;
1687   -webkit-border-bottom-right-radius: 0;
1688   -webkit-border-bottom-left-radius: 0;
1689   -moz-border-radius-topleft: 3px;
1690   -moz-border-radius-topright: 3px;
1691   -moz-border-radius-bottomright: 0;
1692   -moz-border-radius-bottomleft: 0;
1693   border-top-left-radius: 3px;
1694   border-top-right-radius: 3px;
1695   border-bottom-right-radius: 0;
1696   border-bottom-left-radius: 0;
1697   border-bottom: 0px solid #f4f4f4;
1698   color: #444;
1699 }
1700 .box .box-header:before,
1701 .box .box-header:after {
1702   display: table;
1703   content: " ";
1704 }
1705 .box .box-header:after {
1706   clear: both;
1707 }
1708 .box .box-header > .fa,
1709 .box .box-header > .glyphicon,
1710 .box .box-header > .ion,
1711 .box .box-header .box-title {
1712   display: inline-block;
1713   padding: 10px 10px 10px 10px;
1714   margin: 0;
1715   font-size: 20px;
1716   font-weight: 400;
1717   float: left;
1718   cursor: default;
1719 }
1720 .box .box-header a {
1721   color: #444;
1722 }
1723 .box .box-header > .box-tools {
1724   padding: 5px 10px 5px 5px;
1725 }
1726 .box .box-body {
1727   padding: 10px;
1728   -webkit-border-top-left-radius: 0;
1729   -webkit-border-top-right-radius: 0;
1730   -webkit-border-bottom-right-radius: 3px;
1731   -webkit-border-bottom-left-radius: 3px;
1732   -moz-border-radius-topleft: 0;
1733   -moz-border-radius-topright: 0;
1734   -moz-border-radius-bottomright: 3px;
1735   -moz-border-radius-bottomleft: 3px;
1736   border-top-left-radius: 0;
1737   border-top-right-radius: 0;
1738   border-bottom-right-radius: 3px;
1739   border-bottom-left-radius: 3px;
1740 }
1741 .box .box-body > table,
1742 .box .box-body > .table {
1743   margin-bottom: 0;
1744 }
1745 .box .box-body.chart-responsive {
1746   width: 100%;
1747   overflow: hidden;
1748 }
1749 .box .box-body > .chart {
1750   position: relative;
1751   overflow: hidden;
1752   width: 100%;
1753 }
1754 .box .box-body > .chart svg,
1755 .box .box-body > .chart canvas {
1756   width: 100%!important;
1757 }
1758 .box .box-body .fc {
1759   margin-top: 5px;
1760 }
1761 .box .box-body .fc-header-title h2 {
1762   font-size: 15px;
1763   line-height: 1.6em;
1764   color: #666;
1765   margin-left: 10px;
1766 }
1767 .box .box-body .fc-header-right {
1768   padding-right: 10px;
1769 }
1770 .box .box-body .fc-header-left {
1771   padding-left: 10px;
1772 }
1773 .box .box-body .fc-widget-header {
1774   background: #fafafa;
1775   box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.02);
1776 }
1777 .box .box-body .fc-grid {
1778   width: 100%;
1779   border: 0;
1780 }
1781 .box .box-body .fc-widget-header:first-of-type,
1782 .box .box-body .fc-widget-content:first-of-type {
1783   border-left: 0;
1784   border-right: 0;
1785 }
1786 .box .box-body .fc-widget-header:last-of-type,
1787 .box .box-body .fc-widget-content:last-of-type {
1788   border-right: 0;
1789 }
1790 .box .box-body .table {
1791   margin-bottom: 0;
1792 }
1793 .box .box-body .full-width-chart {
1794   margin: -19px;
1795 }
1796 .box .box-body.no-padding .full-width-chart {
1797   margin: -9px;
1798 }
1799 .box .box-footer {
1800   border-top: 1px solid #f4f4f4;
1801   -webkit-border-top-left-radius: 0;
1802   -webkit-border-top-right-radius: 0;
1803   -webkit-border-bottom-right-radius: 3px;
1804   -webkit-border-bottom-left-radius: 3px;
1805   -moz-border-radius-topleft: 0;
1806   -moz-border-radius-topright: 0;
1807   -moz-border-radius-bottomright: 3px;
1808   -moz-border-radius-bottomleft: 3px;
1809   border-top-left-radius: 0;
1810   border-top-right-radius: 0;
1811   border-bottom-right-radius: 3px;
1812   border-bottom-left-radius: 3px;
1813   padding: 10px;
1814   background-color: #ffffff;
1815 }
1816 .box.box-solid {
1817   border-top: 0px;
1818 }
1819 .box.box-solid > .box-header {
1820   padding-bottom: 0px!important;
1821 }
1822 .box.box-solid > .box-header .btn.btn-default {
1823   background: transparent;
1824 }
1825 .box.box-solid.box-primary > .box-header {
1826   color: #fff;
1827   background: #3c8dbc;
1828   background-color: #3c8dbc;
1829 }
1830 .box.box-solid.box-primary > .box-header a {
1831   color: #444;
1832 }
1833 .box.box-solid.box-info > .box-header {
1834   color: #fff;
1835   background: #00c0ef;
1836   background-color: #00c0ef;
1837 }
1838 .box.box-solid.box-info > .box-header a {
1839   color: #444;
1840 }
1841 .box.box-solid.box-danger > .box-header {
1842   color: #fff;
1843   background: #f56954;
1844   background-color: #f56954;
1845 }
1846 .box.box-solid.box-danger > .box-header a {
1847   color: #444;
1848 }
1849 .box.box-solid.box-warning > .box-header {
1850   color: #fff;
1851   background: #f39c12;
1852   background-color: #f39c12;
1853 }
1854 .box.box-solid.box-warning > .box-header a {
1855   color: #444;
1856 }
1857 .box.box-solid.box-success > .box-header {
1858   color: #fff;
1859   background: #00a65a;
1860   background-color: #00a65a;
1861 }
1862 .box.box-solid.box-success > .box-header a {
1863   color: #444;
1864 }
1865 .box.box-solid > .box-header > .box-tools .btn {
1866   border: 0;
1867   box-shadow: none;
1868 }
1869 .box.box-solid.collapsed-box .box-header {
1870   -webkit-border-radius: 3px;
1871   -moz-border-radius: 3px;
1872   border-radius: 3px;
1873 }
1874 .box.box-solid[class*='bg'] > .box-header {
1875   color: #fff;
1876 }
1877 .box .box-group > .box {
1878   margin-bottom: 5px;
1879 }
1880 .box .knob-label {
1881   text-align: center;
1882   color: #333;
1883   font-weight: 100;
1884   font-size: 12px;
1885   margin-bottom: 0.3em;
1886 }
1887 .box .todo-list {
1888   margin: 0;
1889   padding: 0px 0px;
1890   list-style: none;
1891 }
1892 .box .todo-list > li {
1893   -webkit-border-radius: 2px;
1894   -moz-border-radius: 2px;
1895   border-radius: 2px;
1896   padding: 10px;
1897   background: #f3f4f5;
1898   margin-bottom: 2px;
1899   border-left: 2px solid #e6e7e8;
1900   color: #444;
1901 }
1902 .box .todo-list > li:last-of-type {
1903   margin-bottom: 0;
1904 }
1905 .box .todo-list > li.danger {
1906   border-left-color: #f56954;
1907 }
1908 .box .todo-list > li.warning {
1909   border-left-color: #f39c12;
1910 }
1911 .box .todo-list > li.info {
1912   border-left-color: #00c0ef;
1913 }
1914 .box .todo-list > li.success {
1915   border-left-color: #00a65a;
1916 }
1917 .box .todo-list > li.primary {
1918   border-left-color: #3c8dbc;
1919 }
1920 .box .todo-list > li > input[type='checkbox'] {
1921   margin: 0 10px 0 5px;
1922 }
1923 .box .todo-list > li .text {
1924   display: inline-block;
1925   margin-left: 5px;
1926   font-weight: 600;
1927 }
1928 .box .todo-list > li .label {
1929   margin-left: 10px;
1930   font-size: 9px;
1931 }
1932 .box .todo-list > li .tools {
1933   display: none;
1934   float: right;
1935   color: #f56954;
1936 }
1937 .box .todo-list > li .tools > .fa,
1938 .box .todo-list > li .tools > .glyphicon,
1939 .box .todo-list > li .tools > .ion {
1940   margin-right: 5px;
1941   cursor: pointer;
1942 }
1943 .box .todo-list > li:hover .tools {
1944   display: inline-block;
1945 }
1946 .box .todo-list > li.done {
1947   color: #999;
1948 }
1949 .box .todo-list > li.done .text {
1950   text-decoration: line-through;
1951   font-weight: 500;
1952 }
1953 .box .todo-list > li.done .label {
1954   background: #eaeaec !important;
1955 }
1956 .box .todo-list .handle {
1957   display: inline-block;
1958   cursor: move;
1959   margin: 0 5px;
1960 }
1961 /*Timeline chat*/
1962
1963 .chat-form {
1964     margin-top: 25px;
1965     clear: both;
1966 }
1967
1968 .chat-form .input-cont {
1969     margin-bottom: 10px;
1970 }
1971
1972 .chat-form .input-cont input {
1973     margin-bottom: 0px;
1974 }
1975
1976 .chat-form .input-cont input{
1977     border: 1px solid #d3d3d3 !important;
1978     margin-top:0;
1979     min-height: 45px;
1980 }
1981
1982 .chat-form .input-cont input {
1983     background-color: #fff !important;
1984     margin-bottom: 5px;
1985     /* border-radius: 4px; */
1986 }
1987
1988 .chat-features a {
1989     margin-left: 10px;
1990 }
1991
1992 .chat-features a i{
1993     color: #d0d0d0;
1994 }
1995
1996
1997 .timeline-messages, .msg-time-chat , .timeline-messages .msg-in, .timeline-messages .msg-out {
1998     position: relative;
1999     border-radius: 2px;
2000 }
2001
2002 .timeline-heading {
2003   padding:8px 15px;
2004 }
2005 .timeline-messages .msg-in  .arrow {
2006     /*border-right: 8px solid #F4F4F4 !important;*/
2007 }
2008 .timeline-messages .msg-in .arrow {
2009     border-bottom: 8px solid transparent;
2010     border-top: 8px solid transparent;
2011     display: block;
2012     height: 0;
2013     left: -8px;
2014     position: absolute;
2015     top: 13px;
2016     width: 0;
2017 }
2018
2019 .timeline-messages .msg-out  .arrow {
2020     /*border-right: 8px solid #41cac0 !important;*/
2021 }
2022 .timeline-messages .msg-out .arrow {
2023     border-bottom: 8px solid transparent;
2024     border-top: 8px solid transparent;
2025     display: block;
2026     height: 0;
2027     left: -8px;
2028     position: absolute;
2029     top: 13px;
2030     width: 0;
2031 }
2032
2033 .msg-time-chat:first-child:before {
2034     margin-top: 16px;
2035 }
2036 .msg-time-chat:before {
2037     background:#CCCCCC;
2038     border: 2px solid #FAFAFA;
2039     border-radius: 100px;
2040     -moz-border-radius: 100px;
2041     -webkit-border-radius: 100px;
2042     height: 14px;
2043     margin: 23px 0 0 -6px;
2044     width: 14px;
2045 }
2046 .msg-time-chat:hover:before {
2047     background: #41cac0;
2048 }
2049 .msg-time-chat:first-child {
2050     padding-top: 0;
2051 }
2052 .message-img-in {
2053     float: left;
2054     margin-right: 10px;
2055     overflow: hidden;
2056 }
2057 .message-img-in img {
2058     display: block;
2059     height: 50px;
2060     width: 50px;
2061     border: 1px solid #eee;
2062 }
2063
2064 .message-img-out {
2065     float: right;
2066     margin-left: 10px;
2067     overflow: hidden;
2068 }
2069 .message-img-out img {
2070     display: block;
2071     height: 50px;
2072     width: 50px;
2073     border: 1px solid #eee;
2074 }
2075 .message-body-in {
2076     /*margin-left: 80px;*/
2077 }
2078 .msg-time-chat .msg-in .text {
2079     /* border: 1px solid #e3e6ed; */
2080     padding: 10px;
2081     border-radius: 4px;
2082     -webkit-border-radius: 4px;
2083     background-color: #F4f4f4;
2084     display: inline-block;
2085 }
2086
2087 .message-body-out {
2088     /*margin-right: 80px;*/
2089 }
2090
2091 .msg-time-chat .msg-out .text {
2092     /* border: 1px solid #e3e6ed; */
2093     padding: 10px;
2094     border-radius: 4px;
2095
2096     background-color: #F1F5FD;
2097 }
2098 .msg-time-chat p {
2099     margin: 0;
2100 }
2101 .msg-time-chat .attribution {
2102     font-size: 11px;
2103     margin: 0px 0 5px;
2104 }
2105 .msg-time-chat {
2106     overflow: hidden;
2107     padding:8px 0;
2108 }
2109
2110 .msg-in a, .msg-in a:hover{
2111     color: #acacac;
2112     text-decoration: none;
2113     border-radius: 4px;
2114     -webkit-border-radius: 4px;
2115     margin-right: 10px;
2116     font-weight: 400;
2117     font-size: 13px;
2118 }
2119 .msg-out a, .msg-out a:hover{
2120     color: #288f98;
2121     text-decoration: none;
2122     border-radius: 4px;
2123     -webkit-border-radius: 4px;
2124     margin-right: 10px;
2125     font-weight: 400;
2126     font-size: 13px;
2127 }
2128
2129
2130
2131
2132 /*.box .chat {
2133   padding: 5px 20px 5px 10px;
2134 }
2135 .box .chat .item {
2136   margin-bottom: 10px;
2137 }
2138 .box .chat .item:before,
2139 .box .chat .item:after {
2140   display: table;
2141   content: " ";
2142 }
2143 .box .chat .item:after {
2144   clear: both;
2145 }
2146 .box .chat .item > img {
2147   width: 40px;
2148   height: 40px;
2149   border: 2px solid transparent;
2150   -webkit-border-radius: 50% !important;
2151   -moz-border-radius: 50% !important;
2152   border-radius: 50% !important;
2153 }
2154 .box .chat .item > img.online {
2155   border: 2px solid #00a65a;
2156 }
2157 .box .chat .item > img.offline {
2158   border: 2px solid #f56954;
2159 }
2160 .box .chat .item > .message {
2161   margin-left: 55px;
2162   margin-top: -40px;
2163 }
2164 .box .chat .item > .message > .name {
2165   display: block;
2166   font-weight: 600;
2167 }
2168 .box .chat .item > .attachment {
2169   -webkit-border-radius: 3px;
2170   -moz-border-radius: 3px;
2171   border-radius: 3px;
2172   background: #f0f0f0;
2173   margin-left: 65px;
2174   margin-right: 15px;
2175   padding: 10px;
2176 }
2177 .box .chat .item > .attachment > h4 {
2178   margin: 0 0 5px 0;
2179   font-weight: 600;
2180   font-size: 14px;
2181 }
2182 .box .chat .item > .attachment > p,
2183 .box .chat .item > .attachment > .filename {
2184   font-weight: 600;
2185   font-size: 13px;
2186   font-style: italic;
2187   margin: 0;
2188 }
2189 .box .chat .item > .attachment:before,
2190 .box .chat .item > .attachment:after {
2191   display: table;
2192   content: " ";
2193 }
2194 .box .chat .item > .attachment:after {
2195   clear: both;
2196 }*/
2197 .box > .overlay,
2198 .box > .loading-img {
2199   position: absolute;
2200   top: 0;
2201   left: 0;
2202   width: 100%;
2203   height: 100%;
2204 }
2205 .box > .overlay {
2206   z-index: 1010;
2207   background: rgba(255, 255, 255, 0.7);
2208 }
2209 .box > .overlay.dark {
2210   background: rgba(0, 0, 0, 0.5);
2211 }
2212 .box > .loading-img {
2213   z-index: 1020;
2214   background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat;
2215 }
2216
2217 /*
2218     Component: Buttons
2219 -------------------------
2220 */
2221
2222
2223 .btn {
2224     font-weight: 500;
2225     -webkit-border-radius: 3px;
2226     -moz-border-radius: 3px;
2227     border-radius: 3px;
2228     border: 1px solid transparent;
2229 }
2230 .btn.btn-default {
2231     background-color: #fafafa;
2232     color: #666;
2233     border-color: #ddd;
2234     border-bottom-color: #ddd;
2235     -webkit-transition: all .3s ease;
2236     -moz-transition: all .3s ease;
2237     -ms-transition: all .3s ease;
2238     -o-transition: all .3s ease;
2239     transition: all .3s ease;
2240 }
2241 .btn.btn-default:hover,
2242 .btn.btn-default:active,
2243 .btn.btn-default.hover {
2244     background-color: #f4f4f4!important;
2245     -webkit-transition: all .3s ease;
2246     -moz-transition: all .3s ease;
2247     -ms-transition: all .3s ease;
2248     -o-transition: all .3s ease;
2249     transition: all .3s ease;
2250 }
2251 .btn.btn-default.btn-flat {
2252     border-bottom-color: #d9dadc;
2253     -webkit-transition: all .3s ease;
2254     -moz-transition: all .3s ease;
2255     -ms-transition: all .3s ease;
2256     -o-transition: all .3s ease;
2257     transition: all .3s ease;
2258 }
2259 .btn.btn-primary {
2260     background-color: #4697ce;
2261     border: none;
2262     -webkit-transition: all .3s ease;
2263     -moz-transition: all .3s ease;
2264     -ms-transition: all .3s ease;
2265     -o-transition: all .3s ease;
2266     transition: all .3s ease;
2267 }
2268 .btn.btn-primary:hover,
2269 .btn.btn-primary:active,
2270 .btn.btn-primary.hover {
2271     background-color: #2f7db2;
2272     border: none;
2273     -webkit-transition: all .3s ease;
2274     -moz-transition: all .3s ease;
2275     -ms-transition: all .3s ease;
2276     -o-transition: all .3s ease;
2277     transition: all .3s ease;
2278 }
2279 .btn.btn-success {
2280     background-color: #27c24c;
2281     border: none;
2282     -webkit-transition: all .3s ease;
2283     -moz-transition: all .3s ease;
2284     -ms-transition: all .3s ease;
2285     -o-transition: all .3s ease;
2286     transition: all .3s ease;
2287 }
2288 .btn.btn-success:hover,
2289 .btn.btn-success:active,
2290 .btn.btn-success.hover {
2291     background-color: #23ad44;
2292     border: none;
2293     -webkit-transition: all .3s ease;
2294     -moz-transition: all .3s ease;
2295     -ms-transition: all .3s ease;
2296     -o-transition: all .3s ease;
2297     transition: all .3s ease;
2298 }
2299 .btn.btn-info {
2300     background-color: #23b7e5;
2301     border: none;
2302     -webkit-transition: all .3s ease;
2303     -moz-transition: all .3s ease;
2304     -ms-transition: all .3s ease;
2305     -o-transition: all .3s ease;
2306     transition: all .3s ease;
2307 }
2308 .btn.btn-info:hover,
2309 .btn.btn-info:active,
2310 .btn.btn-info.hover {
2311     background-color: #19a9d5;
2312     border: none;
2313     -webkit-transition: all .3s ease;
2314     -moz-transition: all .3s ease;
2315     -ms-transition: all .3s ease;
2316     -o-transition: all .3s ease;
2317     transition: all .3s ease;
2318 }
2319 .btn.btn-danger {
2320     background-color: #f05050;
2321     border: none;
2322     -webkit-transition: all .3s ease;
2323     -moz-transition: all .3s ease;
2324     -ms-transition: all .3s ease;
2325     -o-transition: all .3s ease;
2326     transition: all .3s ease;
2327 }
2328 .btn.btn-danger:hover,
2329 .btn.btn-danger:active,
2330 .btn.btn-danger.hover {
2331     background-color: #ee3939;
2332     border: none;
2333     -webkit-transition: all .3s ease;
2334     -moz-transition: all .3s ease;
2335     -ms-transition: all .3s ease;
2336     -o-transition: all .3s ease;
2337     transition: all .3s ease;
2338 }
2339 .btn.btn-warning {
2340     background-color: #fad733;
2341     border: none;
2342     -webkit-transition: all .3s ease;
2343     -moz-transition: all .3s ease;
2344     -ms-transition: all .3s ease;
2345     -o-transition: all .3s ease;
2346     transition: all .3s ease;
2347 }
2348 .btn.btn-warning:hover,
2349 .btn.btn-warning:active,
2350 .btn.btn-warning.hover {
2351     background-color: #f9d21a;
2352     border: none;
2353     -webkit-transition: all .3s ease;
2354     -moz-transition: all .3s ease;
2355     -ms-transition: all .3s ease;
2356     -o-transition: all .3s ease;
2357     transition: all .3s ease;
2358 }
2359 .btn-round {
2360   border-radius: 30px;
2361   -webkit-border-radius: 30px;
2362   -moz-border-radius: 30px;
2363 }
2364 /*.btn-group .btn.btn-success { border: 1px solid #7ab03f }
2365 .btn-group .btn.btn-info { border: 1px solid #2fa084 }
2366 .btn-group .btn.btn-danger { border: 1px solid #d13a24 }
2367 .btn-group .btn.btn-warning { border: 1px solid #efa50b }
2368 .btn-group-vertical .btn.btn-success { border: 1px solid #7ab03f }
2369 .btn-group-vertical .btn.btn-info { border: 1px solid #2fa084 }
2370 .btn-group-vertical .btn.btn-danger { border: 1px solid #d13a24 }
2371 .btn-group-vertical .btn.btn-warning { border: 1px solid #efa50b }*/
2372 .open .dropdown-toggle.btn-warning {
2373     background-color: #f9d21a;
2374     border-color: #f9d21a;
2375 }
2376 .open .dropdown-toggle.btn-info {
2377     background-color: #37a3df;
2378     border-color: #37a3df;
2379 }
2380 .btn.btn-flat {
2381     -webkit-border-radius: 0;
2382     -moz-border-radius: 0;
2383     border-radius: 0;
2384     -webkit-box-shadow: none;
2385     -moz-box-shadow: none;
2386     box-shadow: none;
2387     border-width: 1px;
2388 }
2389 .btn:active {
2390     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2391     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2392     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2393 }
2394 .btn:focus { outline: none }
2395 .btn.btn-file {
2396     position: relative;
2397     width: 120px;
2398     height: 35px;
2399     overflow: hidden;
2400 }
2401 .btn.btn-file > input[type='file'] {
2402     display: block !important;
2403     width: 100% !important;
2404     height: 35px !important;
2405     opacity: 0 !important;
2406     position: absolute;
2407     top: -10px;
2408     cursor: pointer;
2409 }
2410 .btn.btn-app {
2411     position: relative;
2412     padding: 15px 5px;
2413     margin: 0 0 10px 10px;
2414     min-width: 80px;
2415     height: 60px;
2416     -webkit-box-shadow: none;
2417     -moz-box-shadow: none;
2418     box-shadow: none;
2419     -webkit-border-radius: 0;
2420     -moz-border-radius: 0;
2421     border-radius: 0;
2422     text-align: center;
2423     color: #666;
2424     border: 1px solid #ddd;
2425     background-color: #fafafa;
2426     font-size: 12px;
2427 }
2428 .btn.btn-app > .fa,
2429 .btn.btn-app > .glyphicon,
2430 .btn.btn-app > .ion {
2431     font-size: 20px;
2432     display: block;
2433 }
2434 .btn.btn-app:hover {
2435     background: #f4f4f4;
2436     color: #444;
2437     border-color: #aaa;
2438 }
2439 .btn.btn-app:active,
2440 .btn.btn-app:focus {
2441     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2442     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2443     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
2444 }
2445 .btn.btn-app > .badge {
2446     position: absolute;
2447     top: -3px;
2448     right: -10px;
2449     font-size: 10px;
2450     font-weight: 400;
2451 }
2452 .btn.btn-social-old {
2453     -webkit-box-shadow: none;
2454     -moz-box-shadow: none;
2455     box-shadow: none;
2456     opacity: 0.9;
2457     padding: 0;
2458 }
2459 .btn.btn-social-old > .fa {
2460     padding: 10px 0;
2461     width: 40px;
2462 }
2463 .btn.btn-social-old > .fa + span { border-left: 1px solid rgba(255, 255, 255, 0.3) }
2464 .btn.btn-social-old span { padding: 10px }
2465 .btn.btn-social-old:hover { opacity: 1 }
2466 .btn.btn-circle {
2467     width: 30px;
2468     height: 30px;
2469     line-height: 30px;
2470     padding: 0;
2471     -webkit-border-radius: 50%;
2472     -moz-border-radius: 50%;
2473     border-radius: 50%;
2474 }
2475 /* Background colors */
2476 /*.bg-red,
2477 .bg-yellow,
2478 .bg-aqua,
2479 .bg-blue,
2480 .bg-light-blue,
2481 .bg-green,
2482 .bg-navy,
2483 .bg-teal,
2484 .bg-olive,
2485 .bg-lime,
2486 .bg-orange,
2487 .bg-fuchsia,
2488 .bg-purple,
2489 .bg-maroon,
2490 .bg-black { color: #f9f9f9 !important }
2491 .bg-gray { background-color: #eaeaec !important }
2492 .bg-black { background-color: #222222 !important }
2493 .bg-red { background-color: #f56954 !important }
2494 .bg-yellow { background-color: #f39c12 !important }
2495 .bg-aqua { background-color: #00c0ef !important }
2496 .bg-blue { background-color: #0073b7 !important }
2497 .bg-light-blue { background-color: #3c8dbc !important }
2498 .bg-green { background-color: #00a65a !important }
2499 .bg-navy { background-color: #001f3f !important }
2500 .bg-teal { background-color: #39cccc !important }
2501 .bg-olive { background-color: #16a085 !important }
2502 .bg-lime { background-color: #01ff70 !important }
2503 .bg-orange { background-color: #f0934e !important }
2504 .bg-fuchsia { background-color: #f012be !important }
2505 .bg-purple { background-color: #932ab6 !important }
2506 .bg-maroon { background-color: #85144b !important }*/
2507 /*
2508     Component: callout
2509 ------------------------
2510 */
2511 .callout {
2512   margin: 0 0 20px 0;
2513   padding: 15px 30px 15px 15px;
2514   border-left: 5px solid #eee;
2515 }
2516 .callout h4 {
2517   margin-top: 0;
2518 }
2519 .callout p:last-child {
2520   margin-bottom: 0;
2521 }
2522 .callout code,
2523 .callout .highlight {
2524   background-color: #fff;
2525 }
2526 .callout.callout-danger {
2527   background-color: #fcf2f2;
2528   border-color: #dFb5b4;
2529 }
2530 .callout.callout-warning {
2531   background-color: #fefbed;
2532   border-color: #f1e7bc;
2533 }
2534 .callout.callout-info {
2535   background-color: #f0f7fd;
2536   border-color: #d0e3f0;
2537 }
2538 .callout.callout-danger h4 {
2539   color: #B94A48;
2540 }
2541 .callout.callout-warning h4 {
2542   color: #C09853;
2543 }
2544 .callout.callout-info h4 {
2545   color: #3A87AD;
2546 }
2547 /*
2548     Component: alert
2549 ------------------------
2550 */
2551 .alert {
2552   /*padding-left: 30px;
2553   margin-left: 15px;*/
2554   position: relative;
2555   border-radius: 2px;
2556   border:none;
2557 }
2558 .alert > .fa,
2559 .alert > .glyphicon {
2560   position: absolute;
2561   left: -15px;
2562   top: -15px;
2563   width: 35px;
2564   height: 35px;
2565   -webkit-border-radius: 50%;
2566   -moz-border-radius: 50%;
2567   border-radius: 50%;
2568   line-height: 35px;
2569   text-align: center;
2570   background: inherit;
2571   border: inherit;
2572 }
2573 /*
2574     Component: Navs
2575 */
2576 /* NAV PILLS */
2577 .nav.nav-pills > li > a {
2578   border-top: 3px solid transparent;
2579   -webkit-border-radius: 0;
2580   -moz-border-radius: 0;
2581   border-radius: 0;
2582   color: #444;
2583 }
2584 .nav.nav-pills > li > a > .fa,
2585 .nav.nav-pills > li > a > .glyphicon,
2586 .nav.nav-pills > li > a > .ion {
2587   margin-right: 5px;
2588 }
2589 .nav.nav-pills > li.active > a,
2590 .nav.nav-pills > li.active > a:hover {
2591   background-color: #f6f6f6;
2592   border-top-color: #3c8dbc;
2593   color: #444;
2594 }
2595 .nav.nav-pills > li.active > a {
2596   font-weight: 600;
2597 }
2598 .nav.nav-pills > li > a:hover {
2599   background-color: #f6f6f6;
2600 }
2601 .nav.nav-pills.nav-stacked > li > a {
2602   border-top: 0;
2603   border-left: 3px solid transparent;
2604   -webkit-border-radius: 0;
2605   -moz-border-radius: 0;
2606   border-radius: 0;
2607   color: #444;
2608 }
2609 .nav.nav-pills.nav-stacked > li > a:hover{
2610   background-color: #f6f6f6;
2611   border-left-color: #3c8dbc;
2612 }
2613 .nav.nav-pills.nav-stacked > li.active > a,
2614 .nav.nav-pills.nav-stacked > li.active > a:hover {
2615   background-color: #f6f6f6;
2616   border-left-color: #3c8dbc;
2617   color: #444;
2618 }
2619 .nav.nav-pills.nav-stacked > li.header {
2620   border-bottom: 1px solid #ddd;
2621   color: #777;
2622   margin-bottom: 10px;
2623   padding: 5px 10px;
2624   text-transform: uppercase;
2625 }
2626 /* NAV TABS */
2627 .nav-tabs-custom {
2628   margin-bottom: 20px;
2629   background: #fff;
2630   /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
2631 }
2632 .nav-tabs-custom > .nav-tabs {
2633   margin: 0;
2634   border-bottom-color: #f4f4f4;
2635 }
2636 .nav-tabs-custom > .nav-tabs > li {
2637   border-top: 3px solid transparent;
2638   margin-bottom: -2px;
2639   margin-right: 5px;
2640 }
2641 .nav-tabs-custom > .nav-tabs > li > a {
2642   -webkit-border-radius: 0 !important;
2643   -moz-border-radius: 0 !important;
2644   border-radius: 0 !important;
2645 }
2646 .nav-tabs-custom > .nav-tabs > li > a,
2647 .nav-tabs-custom > .nav-tabs > li > a:hover {
2648   background: transparent;
2649   margin: 0;
2650 }
2651 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
2652 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
2653 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
2654   border-color: transparent;
2655 }
2656 .nav-tabs-custom > .nav-tabs > li.active {
2657   border-top-color: #3c8dbc;
2658 }
2659 .nav-tabs-custom > .nav-tabs > li.active > a,
2660 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
2661   background-color: #fff;
2662 }
2663 .nav-tabs-custom > .nav-tabs > li.active > a {
2664   border-top: 0;
2665   border-left-color: #f4f4f4;
2666   border-right-color: #f4f4f4;
2667 }
2668 .nav-tabs-custom > .nav-tabs > li:first-of-type {
2669   margin-left: 0px;
2670 }
2671 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
2672   border-left-width: 0;
2673 }
2674 .nav-tabs-custom > .nav-tabs.pull-right {
2675   float: none!important;
2676 }
2677 .nav-tabs-custom > .nav-tabs.pull-right > li {
2678   float: right;
2679 }
2680 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
2681   margin-right: 0px;
2682 }
2683 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
2684   border-left-width: 1px;
2685   border-right-width: 0px;
2686 }
2687 .nav-tabs-custom > .nav-tabs > li.header {
2688   font-weight: 400;
2689   line-height: 35px;
2690   padding: 0 10px;
2691   font-size: 20px;
2692   color: #444;
2693   cursor: default;
2694 }
2695 .nav-tabs-custom > .nav-tabs > li.header > .fa,
2696 .nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
2697 .nav-tabs-custom > .nav-tabs > li.header > .ion {
2698   margin-right: 10px;
2699 }
2700 .nav-tabs-custom > .tab-content {
2701   background: #fff;
2702   padding: 10px;
2703 }
2704 /* Nav tabs bottom */
2705 .tabs-bottom.nav-3 li a {
2706   width: 3333.33333333% !important;
2707 }
2708 .tabs-bottom li a {
2709   border: 0;
2710 }
2711 /* PAGINATION */
2712 .pagination > li > a {
2713   background: #fafafa;
2714   color: #666;
2715   /*-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
2716   -moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
2717   box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);*/
2718 }
2719 .pagination > li:first-of-type a,
2720 .pagination > li:last-of-type a {
2721   -webkit-border-radius: 2px;
2722   -moz-border-radius: 2px;
2723   border-radius: 2px;
2724 }
2725 /*
2726     Component: Mailbox
2727 */
2728 .mail-box aside {
2729 display: table-cell;
2730 float: none;
2731 height: 100%;
2732 padding: 0;
2733 vertical-align: top;
2734 }
2735 .mailbox .table-mailbox {
2736   border-left: 1px solid #ddd;
2737   border-right: 1px solid #ddd;
2738   border-bottom: 1px solid #ddd;
2739 }
2740 .mailbox .table-mailbox tr.unread > td {
2741   background-color: rgba(0, 0, 0, 0.05);
2742   color: #000;
2743   font-weight: 600;
2744 }
2745 .mailbox .table-mailbox tr > td > .fa.fa-star,
2746 .mailbox .table-mailbox tr > td > .fa.fa-star-o,
2747 .mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star,
2748 .mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star-empty {
2749   color: #f39c12;
2750   cursor: pointer;
2751 }
2752 .mailbox .table-mailbox tr > td.small-col {
2753   width: 30px;
2754 }
2755 .mailbox .table-mailbox tr > td.name {
2756   width: 150px;
2757   font-weight: 600;
2758 }
2759 .mailbox .table-mailbox tr > td.time {
2760   text-align: right;
2761   width: 100px;
2762 }
2763 .mailbox .table-mailbox tr > td {
2764   white-space: nowrap;
2765 }
2766 .mailbox .table-mailbox tr > td > a {
2767   color: #444;
2768 }
2769 @media screen and (max-width: 767px) {
2770   .mailbox .nav-stacked > li:not(.header) {
2771     float: left;
2772     width: 50%;
2773   }
2774   .mailbox .nav-stacked > li:not(.header).header {
2775     border: 0!important;
2776   }
2777   .mailbox .search-form {
2778     margin-top: 10px;
2779   }
2780 }
2781
2782
2783
2784 /*
2785     Skins
2786     -----
2787 */
2788 /*
2789     Skin Blue
2790     ---------
2791 */
2792 /* skin-blue navbar */
2793 .skin-blue .navbar {
2794   background-color: #d3e7f0; /* #3c8dbc; */
2795 }
2796 .skin-blue .navbar .nav a {
2797   color: rgba(0, 0, 0, 0.8); /* rgba(255, 255, 255, 0.8); */
2798 }
2799 .skin-blue .navbar .nav > li > a:hover,
2800 .skin-blue .navbar .nav > li > a:active,
2801 .skin-blue .navbar .nav > li > a:focus,
2802 .skin-blue .navbar .nav .open > a,
2803 .skin-blue .navbar .nav .open > a:hover,
2804 .skin-blue .navbar .nav .open > a:focus {
2805   background: rgba(0, 0, 0, 0.1);
2806   color: #f6f6f6;
2807 }
2808 .skin-blue .navbar .navbar-right > .nav {
2809   margin-right: 10px;
2810 }
2811 .skin-blue .navbar .sidebar-toggle .icon-bar {
2812   background: rgba(255, 255, 255, 0.8);
2813 }
2814 .skin-blue .navbar .sidebar-toggle:hover .icon-bar {
2815   background: #f6f6f6 !important;
2816 }
2817 /* skin-blue logo */
2818 .skin-blue .logo {
2819   background-color: #367fa9;
2820   color: #f9f9f9;
2821 }
2822 .skin-blue .logo > a {
2823   color: #f9f9f9;
2824 }
2825 .skin-blue .logo:hover {
2826   background: #fff;
2827   color:#fff;
2828 }
2829 /* skin-blue content header */
2830 .skin-blue .right-side > .content-header {
2831   background: #fbfbfb;
2832   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
2833 }
2834 /* Skin-blue user panel */
2835 .skin-blue .user-panel > .image > img {
2836   border: 1px solid #dfdfdf;
2837 }
2838 .skin-blue .user-panel > .info,
2839 .skin-blue .user-panel > .info > a {
2840   color: #555555;
2841 }
2842 /* skin-blue sidebar */
2843 .skin-blue .sidebar {
2844 background: #d3e7f0;
2845   border-bottom: 1px solid #fff;
2846 }
2847 .skin-blue .sidebar > .sidebar-menu > li {
2848   border-top: 1px solid #fff;
2849   border-bottom: 1px solid #dbdbdb;
2850 }
2851 .skin-blue .sidebar > .sidebar-menu > li:first-of-type {
2852   border-top: 1px solid #dbdbdb;
2853 }
2854 .skin-blue .sidebar > .sidebar-menu > li:first-of-type > a {
2855   border-top: 1px solid #fff;
2856 }
2857 .skin-blue .sidebar > .sidebar-menu > li > a {
2858   margin-right: 1px;
2859 }
2860 .skin-blue .sidebar > .sidebar-menu > li > a:hover,
2861 .skin-blue .sidebar > .sidebar-menu > li.active > a {
2862   color: #222;
2863   background: #f9f9f9;
2864 }
2865 .skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
2866   margin: 0 1px;
2867   background: #f9f9f9;
2868 }
2869 .skin-blue .left-side {
2870   background: #d3e7f0; /* #f4f4f4; */
2871   min-height:100%;
2872   -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
2873   -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
2874   box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
2875 }
2876 .skin-blue .sidebar a {
2877   color: #555555;
2878 }
2879 .skin-blue .sidebar a:hover {
2880   text-decoration: none;
2881 }
2882 .skin-blue .treeview-menu > li > a {
2883   color: #777;
2884 }
2885 .skin-blue .treeview-menu > li.active > a,
2886 .skin-blue .treeview-menu > li > a:hover {
2887   color: #111;
2888 }
2889 .skin-blue .sidebar-form {
2890   -webkit-border-radius: 2px;
2891   -moz-border-radius: 2px;
2892   border-radius: 2px;
2893   border: 1px solid #dbdbdb;
2894   margin: 10px 10px;
2895 }
2896 .skin-blue .sidebar-form input[type="text"],
2897 .skin-blue .sidebar-form .btn {
2898   box-shadow: none;
2899   background-color: #fafafa;
2900   border: 1px solid #fafafa;
2901   height: 35px;
2902 }
2903 .skin-blue .sidebar-form input[type="text"] {
2904   color: #666;
2905   -webkit-border-top-left-radius: 2px !important;
2906   -webkit-border-top-right-radius: 0 !important;
2907   -webkit-border-bottom-right-radius: 0 !important;
2908   -webkit-border-bottom-left-radius: 2px !important;
2909   -moz-border-radius-topleft: 2px !important;
2910   -moz-border-radius-topright: 0 !important;
2911   -moz-border-radius-bottomright: 0 !important;
2912   -moz-border-radius-bottomleft: 2px !important;
2913   border-top-left-radius: 2px !important;
2914   border-top-right-radius: 0 !important;
2915   border-bottom-right-radius: 0 !important;
2916   border-bottom-left-radius: 2px !important;
2917 }
2918 .skin-blue .sidebar-form input[type="text"]:focus,
2919 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2920   background-color: #fff;
2921   color: #666;
2922 }
2923 .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
2924   border-left-color: #fff;
2925 }
2926 .skin-blue .sidebar-form .btn {
2927   color: #999;
2928   -webkit-border-top-left-radius: 0 !important;
2929   -webkit-border-top-right-radius: 2px !important;
2930   -webkit-border-bottom-right-radius: 2px !important;
2931   -webkit-border-bottom-left-radius: 0 !important;
2932   -moz-border-radius-topleft: 0 !important;
2933   -moz-border-radius-topright: 2px !important;
2934   -moz-border-radius-bottomright: 2px !important;
2935   -moz-border-radius-bottomleft: 0 !important;
2936   border-top-left-radius: 0 !important;
2937   border-top-right-radius: 2px !important;
2938   border-bottom-right-radius: 2px !important;
2939   border-bottom-left-radius: 0 !important;
2940 }
2941 /*
2942     Skin Black
2943     --------
2944 */
2945 /* skin-black navbar */
2946 .skin-black .navbar {
2947   background-color: #ffffff;
2948   border-bottom: 1px solid #eee;
2949 }
2950 .skin-black .navbar .nav a {
2951   color: #333333;
2952 }
2953 .skin-black .navbar .nav > li > a:hover,
2954 .skin-black .navbar .nav > li > a:active,
2955 .skin-black .navbar .nav > li > a:focus,
2956 .skin-black .navbar .nav .open > a,
2957 .skin-black .navbar .nav .open > a:hover,
2958 .skin-black .navbar .nav .open > a:focus {
2959   background: #39435C;
2960   color: #fff;
2961   padding-bottom: 14px;
2962 }
2963 .skin-black .navbar .navbar-right > .nav {
2964   margin-right: 10px;
2965 }
2966 .skin-black .navbar .sidebar-toggle .icon-bar {
2967   background: #333333;
2968 }
2969 .skin-black .navbar .sidebar-toggle:hover .icon-bar {
2970   background: #999999 !important;
2971 }
2972 /* skin-black logo */
2973 .skin-black .logo {
2974   background-color: #283744;
2975   color: #f9f9f9;
2976 }
2977 .skin-black .logo > a {
2978   color: #f9f9f9;
2979 }
2980 .skin-black .logo:hover {
2981   /*background: #303030;*/
2982   /*color: #fff;*/
2983 }
2984 /* skin-black content header */
2985 .skin-black .right-side > .content-header {
2986   background: #fff;
2987   box-shadow: none;
2988 }
2989 /* Skin-red user panel */
2990 .skin-black .user-panel > .image > img {
2991   border: 1px solid #444;
2992 }
2993 .skin-black .user-panel > .info,
2994 .skin-black .user-panel > .info > a {
2995   color: #eee;
2996 }
2997 /* skin-black sidebar */
2998 .skin-black .sidebar {
2999   border-bottom: 1px solid #39435C;
3000 }
3001 .skin-black .sidebar > .sidebar-menu > li {
3002   /*border-top: 1px solid #333;
3003   border-bottom: 0px solid #444;*/
3004 }
3005 .skin-black .sidebar > .sidebar-menu > li:first-of-type {
3006   border-top: 1px solid #444;
3007 }
3008 .skin-black .sidebar > .sidebar-menu > li:first-of-type > a {
3009   border-top: 0px solid #333;
3010 }
3011 .skin-black .sidebar > .sidebar-menu > li > a {
3012   margin-right: 1px;
3013 }
3014 .skin-black .sidebar > .sidebar-menu > li > a:hover,
3015 .skin-black .sidebar > .sidebar-menu > li.active > a {
3016   color: #f6f6f6;
3017   background: #425164;
3018 }
3019 .skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
3020   margin: 0 1px;
3021   background: #35404d;
3022 }
3023 .skin-black .left-side {
3024   background: #39435C;
3025 }
3026 .skin-black .sidebar a {
3027   color: #eee;
3028 }
3029 .skin-black .sidebar a:hover {
3030   text-decoration: none;
3031 }
3032 .skin-black .treeview-menu > li > a {
3033   color: #ccc;
3034 }
3035 .skin-black .treeview-menu > li.active,
3036 .skin-black .treeview-menu > li:hover {
3037   color: #fff;
3038   background-color: #404B5F;
3039 }
3040 .skin-black .sidebar-form {
3041   -webkit-border-radius: 2px;
3042   -moz-border-radius: 2px;
3043   border-radius: 2px;
3044   border: 0px solid #555;
3045   margin: 10px 10px;
3046 }
3047 .skin-black .sidebar-form input[type="text"],
3048 .skin-black .sidebar-form .btn {
3049   box-shadow: none;
3050   background-color: rgba(255, 255, 255, 0.1);
3051   border: 0 solid rgba(255, 255, 255, 0.1);
3052   height: 35px;
3053   outline: none;
3054 }
3055 .skin-black .sidebar-form input[type="text"] {
3056   color: #666;
3057   -webkit-border-top-left-radius: 2px !important;
3058   -webkit-border-top-right-radius: 0 !important;
3059   -webkit-border-bottom-right-radius: 0 !important;
3060   -webkit-border-bottom-left-radius: 2px !important;
3061   -moz-border-radius-topleft: 2px !important;
3062   -moz-border-radius-topright: 0 !important;
3063   -moz-border-radius-bottomright: 0 !important;
3064   -moz-border-radius-bottomleft: 2px !important;
3065   border-top-left-radius: 2px !important;
3066   border-top-right-radius: 0 !important;
3067   border-bottom-right-radius: 0 !important;
3068   border-bottom-left-radius: 2px !important;
3069 }
3070 .skin-black .sidebar-form input[type="text"]:focus,
3071 .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
3072   background-color: #444;
3073   border: 0;
3074 }
3075 .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
3076   border-left: 0;
3077 }
3078 .skin-black .sidebar-form .btn {
3079   color: #999;
3080   -webkit-border-top-left-radius: 0 !important;
3081   -webkit-border-top-right-radius: 2px !important;
3082   -webkit-border-bottom-right-radius: 2px !important;
3083   -webkit-border-bottom-left-radius: 0 !important;
3084   -moz-border-radius-topleft: 0 !important;
3085   -moz-border-radius-topright: 2px !important;
3086   -moz-border-radius-bottomright: 2px !important;
3087   -moz-border-radius-bottomleft: 0 !important;
3088   border-top-left-radius: 0 !important;
3089   border-top-right-radius: 2px !important;
3090   border-bottom-right-radius: 2px !important;
3091   border-bottom-left-radius: 0 !important;
3092   border-left: 0;
3093 }
3094 .skin-black .sidebar .sidebar-menu .treeview-menu > li:hover {
3095   background-color: #404B5F;
3096 }
3097 /*!
3098  * iCheck v1.0.1, http://git.io/arlzeA
3099  * =================================
3100  * Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization
3101  *
3102  * (c) 2013 Damir Sultanov, http://fronteed.com
3103  * MIT Licensed
3104  */
3105 /* iCheck plugin Minimal skin, black
3106 ----------------------------------- */
3107 .icheckbox_minimal,
3108 .iradio_minimal {
3109   display: inline-block;
3110   *display: inline;
3111   vertical-align: middle;
3112   margin: 0;
3113   padding: 0;
3114   width: 18px;
3115   height: 18px;
3116   background: rgba(255, 255, 255, 0.7) url(iCheck/minimal/minimal.png) no-repeat;
3117   border: none;
3118   cursor: pointer;
3119 }
3120 .icheckbox_minimal {
3121   background-position: 0 0;
3122 }
3123 .icheckbox_minimal.hover {
3124   background-position: -20px 0;
3125 }
3126 .icheckbox_minimal.checked {
3127   background-position: -40px 0;
3128 }
3129 .icheckbox_minimal.disabled {
3130   background-position: -60px 0;
3131   cursor: default;
3132 }
3133 .icheckbox_minimal.checked.disabled {
3134   background-position: -80px 0;
3135 }
3136 .iradio_minimal {
3137   background-position: -100px 0;
3138 }
3139 .iradio_minimal.hover {
3140   background-position: -120px 0;
3141 }
3142 .iradio_minimal.checked {
3143   background-position: -140px 0;
3144 }
3145 .iradio_minimal.disabled {
3146   background-position: -160px 0;
3147   cursor: default;
3148 }
3149 .iradio_minimal.checked.disabled {
3150   background-position: -180px 0;
3151 }
3152 /* Retina support */
3153 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
3154   .icheckbox_minimal,
3155   .iradio_minimal {
3156     background-image: url('iCheck/minimal/minimal@2x.png');
3157     -webkit-background-size: 200px 20px;
3158     background-size: 200px 20px;
3159   }
3160 }
3161 /*.pace .pace-progress {
3162   background: #00c0ef;
3163   position: fixed;
3164   z-index: 2000;
3165   top: 0;
3166   left: 0;
3167   height: 2px;
3168   -webkit-transition: width 1s;
3169   -moz-transition: width 1s;
3170   -o-transition: width 1s;
3171   transition: width 1s;
3172 }
3173 .pace-inactive {
3174   display: none;
3175 }*/
3176
3177 .pace {
3178   -webkit-pointer-events: none;
3179   pointer-events: none;
3180   -webkit-user-select: none;
3181   -moz-user-select: none;
3182   user-select: none;
3183 }
3184
3185 .pace-inactive {
3186   display: none;
3187 }
3188
3189 .pace .pace-progress {
3190   background-color: #29d;
3191   position: fixed;
3192   z-index: 2000;
3193   top: 0;
3194   left: 0;
3195   height: 3px;
3196   overflow: hidden;
3197
3198   -webkit-transition: width 1s;
3199   -moz-transition: width 1s;
3200   -o-transition: width 1s;
3201   transition: width 1s;
3202 }
3203
3204 .pace .pace-progress-inner {
3205   position: absolute;
3206   top: 0;
3207   left: 0;
3208   right: -32px;
3209   bottom: 0;
3210
3211   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
3212   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
3213   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
3214   background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
3215   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
3216   -webkit-background-size: 32px 32px;
3217   -moz-background-size: 32px 32px;
3218   -o-background-size: 32px 32px;
3219   background-size: 32px 32px;
3220
3221   -webkit-animation: pace-stripe-animation 500ms linear infinite;
3222   -moz-animation: pace-stripe-animation 500ms linear infinite;
3223   -ms-animation: pace-stripe-animation 500ms linear infinite;
3224   -o-animation: pace-stripe-animation 500ms linear infinite;
3225   animation: pace-stripe-animation 500ms linear infinite;
3226 }
3227
3228 @-webkit-keyframes pace-stripe-animation {
3229   0% { -webkit-transform: none; transform: none; }
3230   100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
3231 }
3232 @-moz-keyframes pace-stripe-animation {
3233   0% { -moz-transform: none; transform: none; }
3234   100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
3235 }
3236 @-o-keyframes pace-stripe-animation {
3237   0% { -o-transform: none; transform: none; }
3238   100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
3239 }
3240 @-ms-keyframes pace-stripe-animation {
3241   0% { -ms-transform: none; transform: none; }
3242   100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
3243 }
3244 @keyframes pace-stripe-animation {
3245   0% { transform: none; transform: none; }
3246   100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
3247 }
3248
3249 .btn-vk .badge {
3250   color: #587ea3;
3251   background-color: #ffffff;
3252 }
3253
3254 .tools a {
3255   color: #a7a7a7;
3256   margin-left: 10px;
3257 }
3258
3259 .panel {
3260   border:none;
3261   /*box-shadow: none;*/
3262   -webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.05);
3263   box-shadow: 0 1px 0px rgba(0,0,0,0.05);
3264 }
3265
3266 .panel-heading {
3267   border-bottom: 1px solid #eee;
3268   background-color: #FAFAFA;
3269 }
3270
3271 .msg-in {
3272   position: relative;
3273   background: #f4f4f4;
3274 }
3275 .msg-in:after {
3276   right: 100%;
3277   top: 30%;
3278   border: solid transparent;
3279   content: " ";
3280   height: 0;
3281   width: 0;
3282   position: absolute;
3283   pointer-events: none;
3284   border-color: rgba(136, 183, 213, 0);
3285   border-right-color: #f4f4f4;
3286   border-width: 6px;
3287   margin-top: -6px;
3288 }
3289
3290 /*.msg-out {
3291   position: relative;
3292   background: #F1F5FD;
3293 }
3294 .msg-out:after {
3295   right: 100%;
3296   top: 30%;
3297   border: solid transparent;
3298   content: " ";
3299   height: 0;
3300   width: 0;
3301   position: absolute;
3302   pointer-events: none;
3303   border-color: rgba(136, 183, 213, 0);
3304   border-right-color: #F1F5FD;
3305   border-width: 6px;
3306   margin-top: -6px;
3307 }*/
3308
3309 .msg-out {
3310   position: relative;
3311   background: #F1F5FD;
3312 }
3313 .msg-out:after {
3314   left: 100%;
3315   top: 30%;
3316   border: solid transparent;
3317   content: " ";
3318   height: 0;
3319   width: 0;
3320   position: absolute;
3321   pointer-events: none;
3322   border-color: rgba(136, 183, 213, 0);
3323   border-left-color: #F1F5FD;
3324   border-width: 6px;
3325   margin-top: -6px;
3326 }
3327
3328
3329 /*=Chat=*/
3330 ul.chat-list {
3331     list-style: none;
3332     padding-left: 0px;
3333 }
3334 .chat-list li {
3335     margin-bottom:24px;
3336 }
3337 .chat-list .chat-avatar {
3338     width:40px;
3339     display:inline-block;
3340     text-align:center;
3341     float:left;
3342 }
3343 .chat-list .chat-avatar i {
3344     font-size:12px;
3345     font-style:normal;
3346 }
3347 .chat-list .ctext-wrap i {
3348     display:block;
3349     font-style:normal;
3350     font-weight:bold;
3351     position:relative;
3352     font-size:12px;
3353     color:#2cb9b3;
3354 }
3355 .chat-list .conversation-text {
3356     display:inline-block;
3357     font-size:12px;
3358     float:left;
3359     margin-left:12px;
3360     width:70%;
3361 }
3362 .chat-list .ctext-wrap {
3363     padding:10px;
3364     /*background:#d5f2ef;*/
3365     -webkit-border-radius:3px;
3366     -moz-border-radius:3px;
3367     border-radius:3px;
3368     position:relative;
3369     display:inline-block;
3370 }
3371 .chat-list .ctext-wrap p {
3372     margin:0px;
3373     padding-top:0px;
3374 }
3375 .chat-list .ctext-wrap:after {
3376     right:100%;
3377     top:25%;
3378     border:solid transparent;
3379     content:" ";
3380     height:0;
3381     width:0;
3382     position:absolute;
3383     pointer-events:none;
3384     border-color:rgba(213,242,239,0);
3385     border-right-color:#d5f2ef;
3386     border-width:5px;
3387     margin-top:-5px;
3388 }
3389 .chat-list .odd .chat-avatar {
3390     float:right !important;
3391 }
3392 .chat-list .odd .conversation-text {
3393     width:70% !important;
3394     margin-right:12px;
3395     text-align: right;
3396     float:right !important;
3397 }
3398 .chat-list .odd .ctext-wrap {
3399     background:#eeeef2 !important;
3400 }
3401 .chat-list .odd .ctext-wrap i {
3402     color:#acacac;
3403 }
3404 .chat-list .odd .ctext-wrap:after {
3405     left:100% !important;
3406     top:25% !important;
3407     border-color:rgba(238,238,242,0)!important;
3408     border-left-color:#eeeef2!important;
3409 }
3410 .chat-send {
3411     padding-left:0px;
3412 }
3413 .chat-send button {
3414     width: 100%;
3415 }
3416 /*notification*/
3417 .alert-icon {
3418     width:40px;
3419     height:40px;
3420     display:inline-block;
3421     -webkit-border-radius:100%;
3422     -moz-border-radius:100%;
3423     border-radius:100%;
3424 }
3425 .alert-icon i {
3426     width:40px;
3427     height:40px;
3428     display:block;
3429     text-align:center;
3430     line-height:40px;
3431     font-size:20px;
3432     color:#fff;
3433 }
3434 .notification-info {
3435     margin-left:56px;
3436     margin-top:-40px;
3437 }
3438 ul.notification-meta {
3439   list-style: none;
3440   padding-left: 0px;
3441 }
3442 .notification-meta {
3443     margin-bottom:3px;
3444 }
3445 .notification-info p {
3446     margin:0px;
3447     color:#999;
3448     font-size:12px;
3449 }
3450 .alert-info .alert-icon {
3451     background-color:#99cce3;
3452 }
3453 .alert-danger .alert-icon {
3454     background-color:#fcb1ae;
3455 }
3456 .alert-success .alert-icon {
3457     background-color:#98d7ad;
3458 }
3459 .alert-warning .alert-icon {
3460     background-color:#ffe699;
3461 }
3462 .notification-sender {
3463     color:#414147;
3464 }
3465 .notification-time {
3466     font-style:italic;
3467     color:#999;
3468 }
3469 .alert-info .notification-info a {
3470     color:#45a2c9;
3471 }
3472 .alert-danger .notification-info a {
3473     color:#fb6f6b;
3474 }
3475 .alert-success .notification-info a {
3476     color:#42b663;
3477 }
3478 .alert-warning .notification-info a {
3479     color:#e6cb76;
3480 }
3481 .alert-info.bucket-notification {
3482     background-color:#eef7fd;
3483 }
3484 .alert-danger.bucket-notification {
3485     background-color:#fef3f2;
3486 }
3487 .alert-success.bucket-notification {
3488     background-color:#eef8f8;
3489 }
3490 .alert-warning.bucket-notification {
3491     background-color: #fff7e1;
3492 }
3493
3494 /*--------------Tasks Widget--------------*/
3495
3496 .task-content {
3497     margin-bottom: 30px;
3498 }
3499
3500 .tasks-widget .task-content:after {
3501   clear: both;
3502 }
3503
3504 .tasks-widget .task-footer  {
3505   margin-top: 5px;
3506 }
3507
3508 .tasks-widget .task-footer:after,
3509 .tasks-widget .task-footer:before {
3510   content: "";
3511   display: table;
3512   line-height: 0;
3513 }
3514
3515 .tasks-widget .task-footer:after {
3516   clear: both;
3517 }
3518
3519 .tasks-widget  .task-list {
3520   padding:0;
3521   margin:0;
3522 }
3523 ul.task-list {
3524   list-style: none;
3525 }
3526
3527 .tasks-widget .task-list > li {
3528   position:relative;
3529   padding:10px 5px;
3530   border-bottom:1px dashed #eaeaea;
3531 }
3532
3533 .tasks-widget .task-list  li.last-line {
3534   border-bottom:none;
3535 }
3536
3537 .tasks-widget .task-list  li > .task-bell  {
3538   margin-left:10px;
3539 }
3540
3541 .tasks-widget .task-list  li > .task-checkbox {
3542   float:left;
3543   width:30px;
3544 }
3545
3546 .tasks-widget .task-list  li > .task-title  {
3547   overflow:hidden;
3548   margin-right:10px;
3549 }
3550
3551 .tasks-widget .task-list  li > .task-config {
3552   position:absolute;
3553   top:10px;
3554   right:10px;
3555 }
3556
3557 .tasks-widget .task-list  li .task-title .task-title-sp  {
3558   margin-right:5px;
3559 }
3560
3561 .tasks-widget .task-list  li.task-done .task-title-sp  {
3562   text-decoration:line-through;
3563   color: #bbbbbb;
3564 }
3565
3566 .tasks-widget .task-list  li.task-done  {
3567   background:#f6f6f6;
3568 }
3569
3570 .tasks-widget .task-list  li.task-done:hover {
3571   background:#f4f4f4;
3572 }
3573
3574 .tasks-widget .task-list  li:hover  {
3575   background:#f9f9f9;
3576 }
3577
3578 .tasks-widget .task-list  li .task-config {
3579   display:none;
3580 }
3581
3582 .tasks-widget .task-list  li:hover > .task-config {
3583   display:block;
3584   margin-bottom:0 !important;
3585 }
3586
3587
3588 @media only screen and (max-width: 320px) {
3589
3590   .tasks-widget .task-config-btn {
3591     float:inherit;
3592     display:block;
3593   }
3594
3595   .tasks-widget .task-list-projects li > .label {
3596     margin-bottom:5px;
3597   }
3598
3599 }
3600
3601 /*calendar*/
3602 .fc-first.fc-last {
3603   background-color: #f0f3f4;
3604 }
3605 .external-event {
3606   font-weight: normal;
3607 }
3608 .fc-button.fc-state-default {
3609 border: 1px solid #d9dadc;
3610
3611 margin-left: 0px!important;
3612 background: #fafafa;
3613 color: #666;
3614 }
3615
3616 .fc-state-default {
3617   box-shadow: none;
3618 }
3619
3620 .weather-bg {
3621   background: #59ace2;
3622   border-radius: 4px;
3623   -webkit-border-radius: 4px;
3624   color: #fff;
3625   text-align: center;
3626   font-size: 16px;
3627   font-weight: 300;
3628   }
3629 .weather-bg i {
3630   font-size: 60px;
3631   display: block;
3632   }
3633 .weather-bg .degree {
3634   font-size: 60px;
3635   }
3636   .panel-item .degree {
3637   font-size: 60px;
3638   }
3639
3640
3641 .reg-earn-stat {
3642     text-align:center;
3643     color:#6d6d6d;
3644     text-transform:uppercase;
3645     padding:40px 30px;
3646     font-family:'Open Sans',sans-serif;
3647     font-weight:600;
3648 }
3649 .reg-earn-stat span {
3650     display:block;
3651     color:#b0c781;
3652     font-size:20px;
3653 }
3654 .loc-earn-stat {
3655     text-align:center;
3656     font-family:'Open Sans',sans-serif;
3657     font-weight:600;
3658     margin-bottom:30px;
3659 }
3660 .loc-earn-stat li {
3661     padding:0px 15px;
3662 }
3663 .loc-earn-stat li {
3664     display:inline-block;
3665     text-transform:uppercase;
3666     font-size:12px;
3667 }
3668 .loc-earn-stat li span {
3669     display:block;
3670     font-size:14px;
3671 }
3672 .stat-divider {
3673     border-right:#dadada 1px dashed;
3674 }
3675 .vector-stat {
3676     height:150px;
3677     margin-top:20px;
3678 }
3679 .online-users img {
3680   margin-right: 10px;
3681 }
3682 .online-users a {
3683   color: #000;
3684 }
3685 ul.online-users {
3686   background-color: #eee;
3687 }
3688 .online-users i.online {
3689   color: #A9D86E;
3690   /*margin: 5px 10px 5px 0px;
3691   padding: 5px 10px 5px 0px;*/
3692   margin-top: 20px;
3693   font-size: x-small;
3694 }
3695 .online-users i.offline {
3696   color: #eee;
3697   /*margin: 5px 10px 5px 0px;
3698   padding: 5px 10px 5px 0px;*/
3699   margin-top: 20px;
3700   font-size: x-small;
3701 }
3702 .panel>.online-users .list-group-item {
3703   border-width: 0px 0;
3704   padding: 0px 15px;
3705 }
3706 .online-users .list-group-item {
3707   /*margin-bottom: 2px;*/
3708   padding: 0px 15px;
3709 }
3710 .online-users .list-group-item:hover {
3711   /*margin-bottom: 2px;*/
3712   background-color: #fafafa;
3713 }
3714 .online-users .list-group-item:first-child {
3715   /*margin-bottom: 0;*/
3716    border-top-right-radius: 0px;
3717    border-top-left-radius: 0px;
3718 }
3719 .online-users .list-group-item:last-child {
3720   /*margin-bottom: 0;*/
3721    border-bottom-right-radius: 3px;
3722    border-bottom-left-radius: 3px;
3723 }
3724 .chat-footer {
3725   padding: 10px 0px;
3726   background-color: #fff;
3727 }
3728 .chat-primary {
3729   background: #4697ce;
3730   color: #fff;
3731 }
3732 .chat-list .chat-primary:after {
3733     right:100%;
3734     top:25%;
3735     border:solid transparent;
3736     content:" ";
3737     height:0;
3738     width:0;
3739     position:absolute;
3740     pointer-events:none;
3741     border-color:rgba(213,242,239,0);
3742     border-right-color:#4697ce;
3743     border-width:5px;
3744     margin-top:-5px;
3745 }
3746
3747 .chat-indigo {
3748   background: #9358ac;
3749   color: #fff;
3750 }
3751 .chat-list .chat-indigo:after {
3752     right:100%;
3753     top:25%;
3754     border:solid transparent;
3755     content:" ";
3756     height:0;
3757     width:0;
3758     position:absolute;
3759     pointer-events:none;
3760     border-color:rgba(213,242,239,0);
3761     border-right-color:#9358ac;
3762     border-width:5px;
3763     margin-top:-5px;
3764 }
3765 .chat-midnightblue {
3766   color: #fff;
3767   background-color: #2b3d51;
3768 }
3769 .chat-list .chat-midnightblue:after {
3770     right:100%;
3771     top:25%;
3772     border:solid transparent;
3773     content:" ";
3774     height:0;
3775     width:0;
3776     position:absolute;
3777     pointer-events:none;
3778     border-color:rgba(213,242,239,0);
3779     border-right-color:#2b3d51;
3780     border-width:5px;
3781     margin-top:-5px;
3782 }
3783
3784 .sm-st {
3785   background:#fff;
3786   padding:20px;
3787   -webkit-border-radius:3px;
3788   -moz-border-radius:3px;
3789   border-radius:3px;
3790   margin-bottom:20px;
3791   -webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.05);
3792   box-shadow: 0 1px 0px rgba(0,0,0,0.05);
3793 }
3794 .sm-st-icon {
3795   width:60px;
3796   height:60px;
3797   display:inline-block;
3798   line-height:60px;
3799   text-align:center;
3800   font-size:30px;
3801   background:#eee;
3802   -webkit-border-radius:5px;
3803   -moz-border-radius:5px;
3804   border-radius:5px;
3805   float:left;
3806   margin-right:10px;
3807   color:#fff;
3808 }
3809 .sm-st-info {
3810   font-size:12px;
3811   padding-top:2px;
3812 }
3813 .sm-st-info span {
3814   display:block;
3815   font-size:24px;
3816   font-weight:600;
3817 }
3818 .orange {
3819   background:#fa8564 !important;
3820 }
3821 .tar {
3822   background:#45cf95 !important;
3823 }
3824 .sm-st .green {
3825   background:#86ba41 !important;
3826 }
3827 .pink {
3828   background:#AC75F0 !important;
3829 }
3830 .yellow-b {
3831   background: #fdd752 !important;
3832 }
3833
3834 /*general page*/
3835 .progress-xs {
3836     height:10px;
3837 }
3838 .progress-sm {
3839     height:12px;
3840 }
3841 .panel-heading .nav {
3842     border:medium none;
3843     font-size:13px;
3844     margin:-10px -15px -15px;
3845 }
3846 .tab-bg-dark-navy-blue ul>li>a {
3847     display:block;
3848     padding:15px 15px !important;
3849 }
3850 .tab-bg-dark-navy-blue {
3851     background:#f0f3f4;
3852     border-radius:5px 5px 0 0;
3853     -webkit-border-radius:5px 5px 0 0;
3854     border-bottom:none;
3855 }
3856 .panel-heading .nav>li>a,.panel-heading .nav>li.active>a,.panel-heading .nav>li.active>a:hover,.panel-heading .nav>li.active>a:focus {
3857     border-width:0;
3858     border-radius:0;
3859 }
3860 .panel-heading .nav>li>a {
3861     color:#898989;
3862 }
3863 .panel-heading .nav>li.active>a,.panel-heading .nav>li>a:hover {
3864     color:#27c24c;
3865     background:#fff;
3866 }
3867 .panel-heading .nav>li:first-child.active>a,.panel-heading .nav>li:first-child>a:hover {
3868     border-radius:0px 0 0 0;
3869     -webkit-border-radius: 0px 0 0 0;
3870     /*border: 1px solid #eee;*/
3871 }
3872 .tab-right {
3873     height:48px;
3874 }
3875 .panel-heading.tab-right .nav>li:first-child.active>a,.tab-right.panel-heading .nav>li:first-child>a:hover {
3876     border-radius:0;
3877     -webkit-border-radius:0;
3878 }
3879 .panel-heading.tab-right .nav>li:last-child.active>a,.tab-right.panel-heading .nav>li:last-child>a:hover {
3880     border-radius:0 4px 0 0;
3881     -webkit-border-radius:0 4px 0 0;
3882 }
3883 .panel-heading.tab-right .nav-tabs>li>a {
3884     margin-left:1px;
3885     margin-right:0px;
3886 }
3887 .m-bot20 {
3888     margin-bottom:20px;
3889 }
3890 .m-bot-none {
3891     margin-bottom:0;
3892 }
3893 .wht-color {
3894     color:#fff;
3895 }
3896 .close-sm {
3897     font-size: 14px;
3898 }
3899 .general .panel-body {
3900   /*border: 1px solid #eee;*/
3901   margin-left: -1px;
3902 }
3903
3904 /*progress bar*/
3905
3906 .progress-bar {
3907     background-color: #428BCA;
3908 }
3909 .progress-bar-success {
3910     background-color: #27c24c;
3911 }
3912 .progress-bar-info {
3913     background-color: #23b7e5;
3914 }
3915 .progress-bar-warning {
3916     background-color: #fad733;
3917 }
3918 .progress-bar-danger {
3919     background-color: #f05050;
3920 }
3921 #accordion .panel {
3922     /*border: 1px solid #E4E4E4;*/
3923     border-radius: 0px;
3924     -webkit-border-radius: 0px;
3925     -moz-border-radius: 0px;
3926     margin-bottom: -4px;
3927 }
3928
3929 .table > thead > tr > th {
3930   vertical-align: bottom;
3931   border-bottom: 1px solid #dddddd;
3932 }
3933
3934 #summary a.list-group-item{
3935   padding: 12px;
3936   border:1px solid #f4f4f4;
3937 }
3938 #summary a.list-group-item:hover{
3939   background-color: #eee;
3940   color: #4f4f4f;
3941
3942 }
3943
3944 .panel-profile .profile {
3945   margin: 5px 15px 5px 5px;
3946   border-radius: 50%;
3947   -webkit-box-shadow: 0 0 0 5px #f7f7f7, 0 0 10px 0 rgba(0, 0, 0, 0.2);
3948   -moz-box-shadow: 0 0 0 5px #f7f7f7, 0 0 10px 0 rgba(0, 0, 0, 0.2);
3949   box-shadow: 0 0 0 5px #f7f7f7, 0 0 10px 0 rgba(0, 0, 0, 0.2);
3950 }
3951 .panel-profile li.list-group-item {
3952   border: 1px solid #efefef;
3953   line-height: 30px;
3954 }
3955 .panel-profile li.list-group-item:hover{
3956   background-color: #fafafa;
3957   color: #4f4f4f;
3958 }
3959 .panel-profile li i {
3960   margin-right: 5px;
3961 }
3962
3963 .color-wh {
3964   color: #f9f9f9;
3965 }
3966 .profile40 {
3967   width: 40px;
3968   height: 40px;
3969 }
3970 .profile70 {
3971   width: 70px;
3972   height: 70px;
3973 }
3974 .profile80 {
3975   width: 80px;
3976   height: 80px;
3977 }
3978 .profile90 {
3979   width: 90px;
3980   height: 90px;
3981 }
3982 .thumb-sm {
3983 width: 40px;
3984 display: inline-block;
3985 }
3986 .mess li {
3987   border: 1px solid #efefef;
3988 }
3989 .avatar {
3990 position: relative;
3991 display: block;
3992 border-radius: 500px;
3993 white-space: nowrap;
3994 }
3995 .panel .panel-heading {
3996 padding: 10px 15px;
3997 text-transform: uppercase;
3998 }
3999 .bg-info {
4000 background-color: #7acbee;
4001 color: white;
4002 }
4003
4004 .weather-category {
4005     padding:25px 0;
4006     color:#74829C;
4007 }
4008 .weather-category ul {
4009     padding:0;
4010     margin:0;
4011     display:inline-block;
4012     width:100%;
4013 }
4014 .weather-category ul li {
4015     display:inline-block;
4016     width:32%;
4017     text-align:center;
4018     border-right:1px solid #e6e6e6;
4019     display:inline-block;
4020 }
4021 .weather-category ul li h5 {
4022     margin:0 0 5px 0;
4023     text-transform:uppercase;
4024     font-weight:300;
4025 }
4026 .weather-category ul li a {
4027 }
4028 .weather-category ul li:last-child {
4029     border-right: none;
4030 }
4031
4032 /*.twt-category {
4033     display:inline-block;
4034     margin-bottom:11px;
4035     margin-top:10px;
4036     width:100%;
4037 }*/
4038 .twt-category ul li {
4039     color:#bdbdbd;
4040     font-size:13px;
4041 }
4042 .twt-category h5 {
4043     font-size:18px;
4044     font-weight:400 !important;
4045 }
4046 .block {
4047   display: block;
4048 }
4049 .m-t-10 {
4050   margin-top: 10px;
4051 }
4052 .m-r-15 {
4053   margin-right:15px;
4054 }
4055 .p-15 {
4056   padding: 15px;
4057 }
4058 .w-stat {
4059   margin-bottom: 10px;
4060 }
4061 .panel-box {
4062   display: table;
4063   table-layout: fixed;
4064   width: 100%;
4065   height: 100%;
4066   text-align: center;
4067   border: none;
4068 }
4069 .panel-box .panel-item {
4070   display: table-cell;
4071   padding: 30px;
4072   width: 1%;
4073   vertical-align: middle;
4074   border-radius: 0;
4075 }
4076 .panel-box .panel-left {
4077   -moz-border-radius-topleft: 4px;
4078   -webkit-border-top-left-radius: 4px;
4079   border-top-left-radius: 4px;
4080   -moz-border-radius-bottomleft: 4px;
4081   -webkit-border-bottom-left-radius: 4px;
4082   border-bottom-left-radius: 4px;
4083 }
4084 .panel-box .panel-right {
4085   -moz-border-radius-topright: 4px;
4086   -webkit-border-top-right-radius: 4px;
4087   border-top-right-radius: 4px;
4088   -moz-border-radius-bottomright: 4px;
4089   -webkit-border-bottom-right-radius: 4px;
4090   border-bottom-right-radius: 4px;
4091 }
4092 .fb-follower {
4093   background: #335397;
4094   color: #fff;
4095   text-align: center;
4096   border-radius: 4px 4px 0 0;
4097   -webkit-border-radius: 4px 4px 0 0;
4098 }
4099 .tw-follower {
4100   background: #00c7f7;
4101   color: #fff;
4102   text-align: center;
4103   border-radius: 4px 4px 0 0;
4104   -webkit-border-radius: 4px 4px 0 0;
4105 }
4106 .follower-foot {
4107 padding: 8px 5px 5px 5px;
4108 color: #757575;
4109 border-radius: 0 0 4px 4px;
4110 -webkit-border-radius: 0 0 4px 4px;
4111 font-weight: 300;
4112 }
4113 .follower-foot ul {
4114 padding: 0;
4115 margin: 0;
4116 }
4117 .follower-foot ul li {
4118 display: inline-block;
4119 text-align: center;
4120 width: 48%;
4121 padding: 10px;
4122 line-height: normal;
4123 }
4124
4125 .gauge-canvas {
4126 text-align: center;
4127 }
4128 .gauge-meta {
4129 margin: 0px;
4130 /*padding-top: 7px;*/
4131 padding-left: 0px;
4132 list-style: none;
4133 }
4134 .gauge-value {
4135   text-align: center;
4136 color: #5AA1D1;
4137 font-size: 16px;
4138 font-weight: bold;
4139 /*padding-left: 20px;*/
4140 }
4141 /*.gauge-title {
4142 color: #ccc;
4143 font-size: 14px;
4144 padding-right: 20px;
4145 }*/
4146
4147 /*chart*/
4148 .top-stats-panel .sm-pie {
4149 /*margin-top: 30px;*/
4150 /*padding: 10px;*/
4151 }
4152 .sm-pie {
4153 height: 100px;
4154 width: 100%;
4155 display: block;
4156 }
4157 /*mail inbox*/
4158
4159
4160
4161
4162 /*advance form*/
4163 /*colorpicker*/
4164 .input-group.color .add-on i, .input-prepend.color .add-on i {
4165   display: block;
4166   cursor: pointer;
4167   width: 16px;
4168   height: 16px;
4169 }
4170
4171
4172
4173
4174
4175 .dropdown-menu.dropdown-custom>li {
4176 padding: 8px 10px;
4177 font-size: 12px;
4178 }
4179 .dropdown-menu li:first-child.dropdown-header {
4180 border-top: 0;
4181 border-top-left-radius: 3px;
4182 border-top-right-radius: 3px;
4183 }
4184
4185 li.dropdown-header {
4186 padding: 5px 10px;
4187 color: #394263;
4188 background-color: #f9fafc;
4189 border-top: 1px solid #eaedf1;
4190 border-bottom: 1px solid #eaedf1;
4191 }
4192 .dropdown-menu .divider {
4193 margin: 2px 0;
4194 padding: 0!important;
4195 background-color: #f0f0f0;
4196 }
4197 .dropdown-menu.dropdown-custom>li>a {
4198 border-radius: 3px;
4199 }
4200 .dropdown-menu>li>a {
4201 padding: 6px 10px;
4202 }
4203 .dropdown-menu.dropdown-custom>li>a:hover {
4204   color: #fff;
4205 }
4206 .dropdown-menu.dropdown-custom {
4207   min-width: 200px;
4208 }
4209
4210 .horizontal .dropdown-menu>li>a {
4211   padding: 8px 15px;
4212 }
4213
4214 .horizontal .dropdown-menu>li>a:hover{
4215   background-color: #eee;
4216   /*color: #fff;*/
4217 }
4218
4219 .footer-main {
4220   background-color: #FFF;
4221   padding: 7px 13px;
4222   border-top: 1px solid #eee;
4223   text-align: center;
4224 }
4225
4226 .stat-elem {
4227
4228     background-color: #fff;
4229     padding: 18px;
4230     border-radius: 40px;
4231
4232 }
4233
4234 .stat-info {
4235   text-align: center;
4236   background-color:#fff;
4237   border-radius: 5px;
4238   margin-top: -5px;
4239   padding: 8px;
4240   -webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.05);
4241   box-shadow: 0 1px 0px rgba(0,0,0,0.05);
4242   font-style: italic;
4243 }
4244
4245 .stat-icon {
4246   text-align: center;
4247   margin-bottom: 5px;
4248 }
4249
4250 .st-red {
4251   background-color: #F05050;
4252 }
4253 .st-green {
4254   background-color: #27C24C;
4255 }
4256 .st-violet {
4257   background-color: #7266ba;
4258 }
4259 .st-blue {
4260   background-color: #23b7e5;
4261 }
4262 /*
4263 .modal.left .modal-dialog, .modal.right .modal-dialog {
4264         position: fixed;
4265         margin: auto;
4266         width: 100%; //
4267         height: 75%;
4268         -webkit-transform: translate3d(0%, 0, 0);
4269         -ms-transform: translate3d(0%, 0, 0);
4270         -o-transform: translate3d(0%, 0, 0);
4271         transform: translate3d(0%, 0, 0);
4272 }
4273
4274 .modal.left .modal-content, .modal.right .modal-content { //
4275         height: 75%;
4276         overflow-y: auto;
4277 }
4278
4279 .modal.left .modal-body, .modal.right .modal-body { //
4280         padding: 15px 15px 80px;
4281 }
4282
4283 Left
4284 .modal.left.fade .modal-dialog {
4285         left: -320px;
4286         -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
4287         -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
4288         -o-transition: opacity 0.3s linear, left 0.3s ease-out;
4289         transition: opacity 0.3s linear, left 0.3s ease-out;
4290 }
4291
4292 .modal.left.fade.in .modal-dialog {
4293         left: 0;
4294 }
4295
4296 .modal.right.fade .modal-dialog {
4297         right: -320px;
4298         -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
4299         -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
4300         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
4301         transition: opacity 0.3s linear, right 0.3s ease-out;
4302 }
4303
4304 .modal.right.fade.in .modal-dialog {
4305         right: 0;
4306 }
4307
4308 ----- MODAL STYLE -----
4309 .modal-content {
4310         border-radius: 0;
4311         border: none;
4312 }
4313
4314 .modal-header {
4315         border-bottom-color: #EEEEEE;
4316         background-color: #FAFAFA;
4317 }
4318
4319 .close {
4320         background-color: #999999;
4321         color: #000000;
4322         line-height: 35px;
4323         position: absolute;
4324         left: -5px;
4325         text-align: center;
4326         top: -15px;
4327         width: 35px;
4328         text-decoration: none;
4329         font-weight: bold;
4330         -webkit-border-radius: 12px;
4331         -moz-border-radius: 12px;
4332         border-radius: 12px;
4333         -moz-box-shadow: 1px 1px 3px #000;
4334         -webkit-box-shadow: 1px 1px 3px #000;
4335         box-shadow: 1px 1px 3px #000;
4336 }
4337  */