openo-portal/portal-common/src/main/webapp/common/css/plugins.css

   1 /**
   2  * Copyright 2016, CMCC Technologies Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *         http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 /**************************
  17  PLUGIN CSS CUSTOMIZATIONS
  18 **************************/
  19
  20 /***
  21 Calendar with full calendar
  22 ***/
  23 .external-event {
  24   display: inline-block ;
  25   cursor:move;
  26   margin-bottom: 5px ;
  27   margin-left: 5px ;
  28 }
  29
  30 .portlet .event-form-title {
  31   font-size: 14px;
  32   margin-top: 4px;
  33   font-weight: 400;
  34   margin-bottom: 10px;
  35 }
  36
  37 .portlet.calendar .fc-button {
  38   -webkit-box-shadow: none ;
  39      -moz-box-shadow: none ;
  40           box-shadow: none ;
  41   text-shadow: none;
  42   border: 0 ;
  43   padding: 6px 8px 30px 8px ;
  44   margin-left:2px;
  45   border-top-style: none;
  46   border-bottom-style: none;
  47   border-right-style: solid;
  48   border-left-style: solid;
  49   border-color: #ddd;
  50   background: transparent;
  51   color: #fff;
  52   top: -46px;
  53 }
  54
  55 .portlet.calendar .fc-header {
  56   margin-bottom:-21px;
  57 }
  58
  59 .portlet.calendar .fc-button-prev {
  60   padding-right: 10px;
  61   padding-left: 8px;
  62 }
  63
  64 .portlet.calendar .fc-button-next {
  65   padding-right: 8px;
  66   padding-left: 10px;
  67 }
  68
  69 .portlet.calendar .fc-button.fc-state-active,
  70 .portlet.calendar .fc-button.fc-state-hover {
  71   color: #666 ;
  72   background-color: #F9F9F9 ;
  73 }
  74
  75 .portlet.calendar .fc-button.fc-state-disabled {
  76   color: #ddd ;
  77 }
  78
  79 .portlet.calendar .fc-text-arrow {
  80   font-size: 22px;
  81   font-family: "Courier New", Courier, monospace;
  82   vertical-align: baseline;
  83 }
  84
  85 /* begin: event element */
  86 .portlet.calendar .fc-event {
  87   border: 0px;
  88   background-color: #69a4e0;
  89   color: #fff;
  90 }
  91
  92 .portlet.calendar .fc-event-inner {
  93   border: 0px;
  94 }
  95
  96 .portlet.calendar .fc-event-time {
  97   float: left;
  98   text-align: left;
  99   color: #fff;
 100   font-size: 13px;
 101   font-weight: 300;
 102 }
 103
 104 .portlet.calendar .fc-event-title {
 105   text-align: left;
 106   float: left;
 107   color: #fff;
 108   font-size: 13px;
 109   font-weight: 300;
 110 }
 111 /* end: event element */
 112
 113 .portlet.calendar .fc-header-title h2 {
 114   font-size: 14px ;
 115   line-height: 20px;
 116   font-weight: 400;
 117   color: #111;
 118 }
 119
 120 .portlet.calendar .fc-widget-header {
 121   background-image: none ;
 122   filter:none;
 123   background-color: #eee ;
 124   text-transform: uppercase;
 125   font-weight: 300;
 126 }
 127
 128 .portlet.calendar .mobile .fc-button {
 129   margin-left: 2px ;
 130 }
 131
 132 .portlet.calendar .mobile .fc-button {
 133     padding: 0px 6px 20px 6px ;
 134     margin-left:2px ;
 135     border: 0;
 136     background-color: #ddd ;
 137       background-image: none;
 138       -webkit-box-shadow: none ;
 139          -moz-box-shadow: none ;
 140               box-shadow: none ;
 141       -webkit-border-radius: 0 ;
 142          -moz-border-radius: 0 ;
 143               border-radius: 0 ;
 144       color: #000;
 145       text-shadow: none ;
 146       text-align: center;
 147 }
 148
 149 .portlet.calendar .mobile .fc-state-hover,
 150 .portlet.calendar .mobile .fc-state-active {
 151   background-color: #eee ;
 152 }
 153
 154 .portlet.calendar .mobile .fc-button-prev {
 155   margin-right: 5px;
 156   margin-top: -2px;
 157 }
 158
 159 .portlet.calendar .mobile .fc-button-next {
 160   margin-right: -0px;
 161   margin-top: -2px;
 162 }
 163
 164 .portlet.calendar .mobile .fc-header-space {
 165   margin: 0px ;
 166   padding: 0px ;
 167   width: 0px ;
 168 }
 169
 170   .portlet.calendar .mobile .fc-state-disabled {
 171       color: #bbb ;
 172   }
 173
 174   .portlet.calendar .mobile .fc-header-left {
 175     position: absolute;
 176     z-index: 10;
 177   }
 178
 179   .portlet.calendar .mobile .fc-header-right {
 180     position: absolute;
 181      z-index: 9;
 182   }
 183
 184   .portlet.calendar .mobile .fc-header-left .fc-button {
 185     top: -2px ;
 186   }
 187
 188   .portlet.calendar .mobile .fc-header-right {
 189     position: relative;
 190     right:0;
 191   }
 192
 193   .portlet.calendar .mobile .fc-header-right .fc-button {
 194     top: 35px ;
 195   }
 196
 197   .portlet.calendar .mobile .fc-content {
 198     margin-top: 53px;
 199   }
 200
 201
 202 /***
 203 Form wizard
 204 ***/
 205
 206 .form-wizard .progress {
 207   margin-bottom: 30px;
 208 }
 209
 210 .form-wizard .steps {
 211   //padding: 10px 0;
 212   //margin-bottom: 15px;
 213 }
 214
 215 .form-wizard .steps {
 216   background-color: #fff ;
 217   background-image: none ;
 218   filter:none ;
 219   border: 0px;
 220   box-shadow: none ;
 221 }
 222
 223 .form-wizard .steps li a {
 224   background-color: #fff ;
 225   background-image: none ;
 226   filter:none;
 227   border: 0px;
 228   box-shadow: none ;
 229 }
 230
 231 .form-wizard .steps li a:hover {
 232   background: none;
 233 }
 234
 235 .form-wizard .step:hover {
 236   text-decoration: none;
 237 }
 238
 239 .form-wizard .step .number {
 240   background-color: #eee;
 241   display: inline-block;
 242   text-align: center !important;
 243   font-size: 16px;
 244   font-weight: 300;
 245   padding: 11px 15px 13px 15px;
 246   margin-right: 10px;
 247   height: 45px;
 248   width: 45px;
 249   -webkit-border-radius: 50% !important;
 250      -moz-border-radius: 50% !important;
 251           border-radius: 50% !important;
 252 }
 253
 254 .form-wizard .step .desc {
 255   display: inline-block;
 256   font-size: 16px;
 257   font-weight: 300;
 258 }
 259
 260 .form-wizard .active .step .number {
 261   background-color: #35aa47;
 262   color: #fff;
 263 }
 264
 265 .form-wizard .active .step .desc {
 266   color: #333;
 267   font-weight: 400;
 268 }
 269
 270 .form-wizard .step i {
 271   display: none;
 272 }
 273
 274 .form-wizard .done .step .number {
 275   background-color: #f2ae43;
 276   color: #fff;
 277 }
 278
 279 .form-wizard .done .step .desc {
 280   font-weight: 400;
 281 }
 282
 283 .form-wizard .done .step i {
 284   font-size: 12px;
 285   font-weight: normal;
 286   color: #999;
 287   display: inline-block;
 288 }
 289
 290
 291 @media (min-width: 600px) and (max-width: 1280px) {
 292   .form-wizard .step .desc {
 293     margin-top: 10px;
 294     display: block;
 295   }
 296 }
 297
 298 @media (max-width: 600px) {
 299   .form-wizard .steps > li > a {
 300     text-align: left;
 301   }
 302 }
 303
 304 @media (min-width: 600px){
 305   .nav-justified>li{
 306       display:table-cell;
 307           width:1%;
 308   }
 309 }
 310
 311 /***
 312 Google Maps
 313 ***/
 314 .gmaps {
 315   height: 300px;
 316   width: 100%;
 317 }
 318
 319 /* important!  bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
 320 .gmaps img {
 321   max-width: none;
 322 }
 323
 324 #gmap_static div{
 325   background-repeat: no-repeat ;
 326   background-position: 50% 50% ;
 327   height:100%;
 328   display:block;
 329   height: 300px;
 330 }
 331
 332 #gmap_routes_instructions {
 333   margin-top: 10px;
 334   margin-bottom: 0px;
 335 }
 336
 337 /***
 338 SlimScrollBar plugins css changes
 339 ***/
 340 .scroller {
 341   padding: 0px ;
 342   margin: 0px ;
 343   padding-right: 12px ;
 344   overflow: hidden;
 345 }
 346
 347 .scroller-footer {
 348   margin-top: 10px;
 349 }
 350
 351 .scroller-footer:after,
 352 .scroller-footer:before {
 353   content: "";
 354   display: table;
 355   line-height: 0;
 356 }
 357
 358 .scroller-footer:after {
 359   clear: both;
 360 }
 361
 362 .portlet-body .slimScrollBar {
 363   margin-right: 0px ;
 364 }
 365
 366 /***
 367 jqvmap changes
 368 ***/
 369 .jqvmap-zoomin {
 370   height: 16px;
 371   width: 16px;
 372   background-color: #666 ;
 373 }
 374
 375 .jqvmap-zoomout {
 376   height: 16px;
 377   width: 16px;
 378  background-color: #666 ;
 379 }
 380
 381 .vmaps {
 382   position: relative;
 383   overflow: hidden;
 384   height: 300px;
 385 }
 386
 387
 388 /***
 389 Error state for WYSIWYG Editors
 390 ***/
 391 .has-error .md-editor,
 392 .has-error .wysihtml5-sandbox,
 393 .has-error .cke {
 394   border: 1px solid #B94A48 !important;
 395 }
 396
 397 .has-success .md-editor,
 398 .has-success .wysihtml5-sandbox,
 399 .has-success .cke {
 400   border: 1px solid #468847 !important;
 401 }
 402
 403 /***
 404 Select2 plugin css changes
 405 ***/
 406
 407 /* enable form validation classes for select2 dropdowns */
 408 .has-error .select2-container .select2-choice {
 409   border-color: #B94A48;
 410 }
 411
 412 .has-error .select2-container.select2-dropdown-open .select2-choice {
 413   border-color: #e5e5e5;
 414 }
 415
 416 .has-error .select2-container.select2-dropdown-open .select2-choice > span {
 417   color: #999999;
 418 }
 419
 420 .has-success .select2-container .select2-choice {
 421   border-color: #468847;
 422 }
 423
 424 .has-success .select2-container.select2-dropdown-open .select2-choice {
 425   border-color: #e5e5e5;
 426 }
 427
 428 .has-success .select2-container.select2-dropdown-open .select2-choice > span {
 429   color: #999999;
 430 }
 431
 432
 433 /***
 434 Jansy File Input plugin css changes
 435 ***/
 436 .fileinput {
 437   margin-bottom: 0;
 438 }
 439
 440
 441 /***
 442 WYSIWYG
 443 ***/
 444 .wysihtml5-toolbar li {
 445   margin: 0px;
 446   height: 29px;
 447 }
 448
 449 .wysihtml5-toolbar li .dropdown-menu {
 450   margin-top: 5px;
 451 }
 452
 453 /***
 454 CKEditor css changes
 455 ***/
 456 .cke_bottom,
 457 .cke_inner,
 458 .cke_top,
 459 .cke_reset,
 460 .cke_dialog_title,
 461 .cke_dialog_footer,
 462 .cke_dialog {
 463   background-image: none !important;
 464   filter:none ;
 465   border-top: 0 ;
 466   border-bottom: 0 ;
 467    -webkit-box-shadow: none !important;
 468       -moz-box-shadow: none !important;
 469            box-shadow: none !important;
 470   text-shadow:none ;
 471 }
 472
 473 .cke_dialog_ui_button,
 474 .cke_dialog_tab {
 475   background-image: none !important;
 476   filter:none ;
 477   -webkit-box-shadow: none !important;
 478   -moz-box-shadow: none !important;
 479   box-shadow: none !important;
 480   text-shadow:none !important;
 481 }
 482
 483 .cke_dialog_ui_button:hover,
 484 .cke_dialog_tab:hover {
 485   text-decoration: none;
 486   text-shadow:none ;
 487 }
 488
 489 .cke_dialog_ui_input_text {
 490   background-image: none !important;
 491   filter:none ;
 492   -webkit-box-shadow: none !important;
 493   -moz-box-shadow: none !important;
 494   box-shadow: none !important;
 495 }
 496
 497 .cke_combo_button,
 498 .cke_button,
 499 .cke_toolbar,
 500 .cke_toolgroup {
 501   background-image: none !important;
 502   filter:none !important;
 503   border: 0 ;
 504    -webkit-box-shadow: none !important;
 505   -moz-box-shadow: none !important;
 506   box-shadow: none !important;
 507 }
 508
 509 .cke_button,
 510 .cke_combo_button,
 511 .cke_panel_grouptitle,
 512 .cke_hc.cke_panel_listItem a {
 513   background-image: none !important;
 514   filter:none ;
 515   text-shadow:none ;
 516   -webkit-border-radius: 0px !important;
 517   -moz-border-radius: 0px !important;
 518   -ms-border-radius: 0px !important;
 519   -o-border-radius: 0px !important;
 520 }
 521
 522 .cke_button:hover,
 523 .cke_combo_button:hover {
 524   background-color: #ddd;
 525 }
 526
 527 .cke_toolbar_break {
 528   background-image: none !important;
 529   filter:none !important;
 530   border: 0 ;
 531   box-shadow: none !important;
 532   -webkit-box-shadow : none !important;
 533   -moz-box-shadow: none !important;
 534   -ms-box-shadow: none !important;
 535   -o-box-shadow: none !important;
 536 }
 537
 538 /***
 539 Modify tags input plugin css
 540 ***/
 541 div.tagsinput {
 542   min-height: 35px;
 543   height: auto !important;
 544   margin: 0;
 545   padding: 5px 5px 0px 5px;
 546   overflow: auto;
 547 }
 548
 549 div.tagsinput span.tag {
 550   background: #aaa ;
 551   color: #fff ;
 552   border: 0 ;
 553   padding: 3px 6px;
 554   margin-top: 0;
 555   margin-bottom: 5px;
 556 }
 557
 558 div.tagsinput input {
 559   padding: 3px 6px ;
 560   width: 75px !important;
 561 }
 562
 563 div.tagsinput span.tag a {
 564   color: #fff ;
 565 }
 566
 567 div.tagsinput .not_valid {
 568   color: #fff ;
 569   padding: 3px 6px ;
 570   background-color: #e02222 ;
 571 }
 572
 573 /***
 574 Gritter notification modify
 575 ***/
 576
 577 #gritter-notice-wrapper {
 578   right:1px !important;
 579 }
 580
 581 .gritter-close {
 582   left:auto !important;
 583   right: 3px !important;
 584 }
 585
 586 .gritter-title {
 587   font-family:  'Open Sans' ;
 588   font-size: 18px ;
 589   font-weight: 300 ;
 590 }
 591
 592 /***
 593 jQuery UI Sliders(new in v1.1.1)
 594 ***/
 595 .slider {
 596   border: 0;
 597   padding: 0;
 598   display: block;
 599   margin: 12px 5px;
 600   min-height: 11px;
 601 }
 602
 603 .ui-slider-vertical {
 604   width: 11px;
 605 }
 606
 607 .ui-slider-horizontal .ui-slider-handle {
 608   top: -3px;
 609 }
 610
 611 .ui-slider-vertical .ui-slider-handle {
 612   left: -3px;
 613 }
 614
 615 .ui-slider-vertical,
 616 .ui-slider-handle {
 617   filter: none !important;
 618   background-image: none !important;
 619 }
 620
 621 /***
 622 Dropzone css changes(new in v1.1.1)
 623 ***/
 624 .dropzone {
 625   -webkit-border-radius: 0px ;
 626     -moz-border-radius: 0px ;
 627          border-radius: 0px ;
 628 }
 629
 630
 631 /***
 632 Dashboard Charts(new in v1.2.1)
 633 ***/
 634 .easy-pie-chart,
 635 .sparkline-chart {
 636    text-align: center;
 637 }
 638
 639 .sparkline-chart {
 640   margin-top: 15px;
 641   position:relative ;
 642 }
 643
 644 .easy-pie-chart .number {
 645     font-size: 16px;
 646     font-weight: 300;
 647     width: 85px;
 648     margin: 0 auto;
 649 }
 650
 651 .sparkline-chart .number {
 652     width: 100px;
 653     margin: 0 auto;
 654     margin-bottom: 10px;
 655 }
 656
 657 .sparkline-chart .title,
 658 .easy-pie-chart .title {
 659     display: block;
 660     text-align: center;
 661     color: #333;
 662     font-weight: 300;
 663     font-size: 16px;
 664     margin-top: 5px;
 665     margin-bottom: 10px;
 666 }
 667
 668 .sparkline-chart .title:hover,
 669 .easy-pie-chart .title:hover {
 670   color: #666;
 671   text-decoration: none;
 672 }
 673
 674 .sparkline-chart .title > i,
 675 .easy-pie-chart .title > i {
 676   margin-top: 5px;
 677 }
 678
 679 /***
 680 Fancy box fix overlay fix(in v1.2.4)
 681 ***/
 682 .fancybox-overlay {
 683   z-index: 10000 ;
 684 }
 685
 686 /***
 687 Datatables Plugin(in v1.3)
 688 ***/
 689 .dataTable {
 690   width: 100% !important;
 691   clear: both;
 692   /*margin-top: 5px;*/
 693 }
 694
 695 .dataTables_filter label {
 696   line-height: 32px ;
 697 }
 698
 699 .dataTable .row-details {
 700   margin-top: 3px;
 701   display: inline-block;
 702   cursor: pointer;
 703   width: 14px;
 704   height: 14px;
 705 }
 706
 707 .dataTable .row-details.row-details-close {
 708   background: url("../image/datatable-row-openclose.png") no-repeat 0 0;
 709 }
 710
 711 .dataTable .row-details.row-details-open {
 712   background: url("../image/datatable-row-openclose.png") no-repeat 0 -23px ;
 713 }
 714
 715 .dataTable .details {
 716   background-color: #eee ;
 717 }
 718
 719 .dataTable .details td,
 720 .dataTable .details th {
 721   padding: 4px;
 722   background: none ;
 723   border: 0;
 724 }
 725
 726 .dataTable .details tr:hover td,
 727 .dataTable .details tr:hover th {
 728   background: none ;
 729 }
 730
 731 .dataTable .details tr:nth-child(odd) td,
 732 .dataTable .details tr:nth-child(odd) th {
 733   background-color: #fff ;
 734 }
 735
 736 .dataTable .details tr:nth-child(even) td,
 737 .dataTable .details tr:nth-child(even) th {
 738   background-color: #eee ;
 739 }
 740
 741 .dataTable > thead > tr > th.sorting,
 742 .dataTable > thead > tr > th.sorting_asc,
 743 .dataTable > thead > tr > th.sorting_desc {
 744    padding-right: 18px;
 745 }
 746
 747 .dataTable .table-checkbox {
 748   width: 8px !important;
 749 }
 750
 751 @media (max-width: 768px) {
 752   .dataTables_wrapper .dataTables_length .form-control,
 753   .dataTables_wrapper .dataTables_filter .form-control {
 754     display: inline-block;
 755   }
 756
 757  /* .dataTables_wrapper .dataTables_info {
 758     top: 17px;
 759   }*/
 760
 761 /*  .dataTables_wrapper .dataTables_paginate {
 762     margin-top: -15px;
 763   }*/
 764 }
 765
 766 @media (max-width: 480px) {
 767   .dataTables_wrapper .dataTables_filter .form-control {
 768     width: 175px !important;
 769   }
 770
 771   .dataTables_wrapper .dataTables_paginate {
 772     float: left;
 773     margin-top: 20px;
 774   }
 775 }
 776
 777 .dataTables_processing {
 778   position: fixed;
 779   top: 50%;
 780   left: 50%;
 781   min-width: 125px;
 782   margin-left: 0;
 783   padding: 7px;
 784   text-align: center;
 785   color: #333;
 786   font-size: 13px;
 787   border: 1px solid #ddd;
 788   background-color: #eee;
 789   vertical-align: middle;
 790   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 791      -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 792           box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 793 }
 794
 795 .dataTables_processing span {
 796   line-height:15px;
 797   vertical-align: middle;
 798 }
 799
 800 .dataTables_empty {
 801   text-align: center;
 802 }
 803
 804 /***
 805 Extended Datatable
 806 ***/
 807 .dataTables_extended_wrapper {
 808         position: relative !important;
 809         clear: both !important;
 810 }
 811 .dataTables_extended_wrapper .seperator {
 812   padding: 0 2px;
 813 }
 814
 815 .dataTables_extended_wrapper .dataTables_paginate,
 816 .dataTables_extended_wrapper .dataTables_length,
 817 .dataTables_extended_wrapper .dataTables_info {
 818   display: inline-block;
 819   float: none !important;
 820   padding: 0 !important;
 821   margin: 0 !important;
 822   position: static !important;
 823   font-size: 13px;
 824 }
 825
 826 @media (max-width: 480px) {
 827
 828   .dataTables_extended_wrapper .dataTables_paginate,
 829   .dataTables_extended_wrapper .dataTables_length,
 830   .dataTables_extended_wrapper .dataTables_info {
 831     display: block;
 832     margin-bottom: 10px !important;
 833   }
 834
 835   .dataTables_extended_wrapper .seperator {
 836     display: none;
 837   }
 838 }
 839
 840 .dataTables_extended_wrapper .dataTables_length label {
 841   margin: 0 !important;
 842   padding: 0 !important;
 843   font-size: 13px;
 844   float: none !important;
 845   display: inline-block !important;
 846 }
 847
 848 .table-container .table-actions-wrapper {
 849   display: none;
 850 }
 851
 852 /***
 853 Password Strength(in v1.4)
 854 ***/
 855 .password-strength .password-verdict {
 856   display: inline-block;
 857   margin-top: 6px;
 858   margin-left: 5px;
 859 }
 860
 861 .password-strength .progress {
 862   margin-top: 5px;
 863   margin-bottom: 0;
 864 }
 865
 866 .password-strength .progress-bar {
 867   padding: 2px;
 868 }
 869
 870 /***
 871 Uniform disabled checkbox, radio button fix(in v1.4)
 872 ***/
 873
 874 .table .uniform-inline {
 875   padding: 0;
 876   margin: 0;
 877 }
 878
 879 .checker {
 880   margin-top: -2px !important;
 881   margin-right: 2px !important;
 882   display:inline;
 883 }
 884
 885 .checker input,
 886 .radio input {
 887   outline: none !important;
 888 }
 889
 890 div.checker.disabled span,
 891 div.checker.disabled.active span{
 892     background-position: -152px -260px;
 893 }
 894
 895 div.checker.disabled:hover,
 896 div.radio.disabled:hover {
 897     cursor: not-allowed;
 898 }
 899
 900 div.radio,
 901 div.checker {
 902  margin-right: 0;
 903  margin-left: 3px;
 904 }
 905
 906 /***
 907 jQuery Sparkline
 908 ***/
 909 .jqstooltip {
 910   width: auto !important;
 911   height: auto !important;
 912 }
 913
 914
 915 /***
 916 jQuery Multi Select
 917 ***/
 918
 919 .ms-container .ms-list {
 920   border: 1px solid #e5e5e5;
 921   -webkit-box-shadow: none;
 922      -moz-box-shadow: none;
 923           box-shadow: none;
 924
 925 }
 926
 927 .ms-container .ms-optgroup-label{
 928   font-size: 14px;
 929 }
 930
 931 .ms-container .ms-selectable li.ms-elem-selectable,
 932 .ms-container .ms-selection li.ms-elem-selection{
 933   font-size: 13px;
 934 }
 935
 936 .ms-container .ms-list.ms-focus {
 937   border-color: #999999;
 938   -webkit-box-shadow: none;
 939      -moz-box-shadow: none;
 940           box-shadow: none;
 941 }
 942
 943 .ms-container .ms-selectable li.ms-hover,
 944 .ms-container .ms-selection li.ms-hover{
 945   color: #333;
 946   background-color: #eee;
 947 }
 948
 949 .ms-container .form-control {
 950   margin-bottom: 5px;
 951 }
 952
 953 /***
 954 Bootstrap Colorpicker
 955 ***/
 956 .input-group.color .input-group-btn i {
 957   position: absolute;
 958   display: block;
 959   cursor: pointer;
 960   width: 20px;
 961   height: 20px;
 962   right: 6px;
 963 }
 964
 965 .colorpicker.dropdown-menu {
 966   padding: 5px;
 967 }
 968
 969 /* change z-index when opened in modal */
 970 .modal-open .colorpicker {
 971   z-index: 10055 !important;
 972 }
 973
 974 /***
 975 Bootstrap  Datetimepicker
 976 ***/
 977
 978 .datetimepicker table td {
 979   font-weight: 300  !important;
 980   font-family: 'Open Sans' !important;
 981 }
 982
 983 .datetimepicker table th {
 984   font-family: 'Open Sans' !important;
 985   font-weight: 400  !important;
 986 }
 987
 988 .datetimepicker.dropdown-menu {
 989   padding: 5px;
 990 }
 991
 992 .datetimepicker .active {
 993   background-color:#4b8df8 !important;
 994   background-image: none !important;
 995   filter: none !important;
 996 }
 997
 998 .datetimepicker .active:hover {
 999   background-color: #2678FC !important;
1000   background-image: none !important;
1001   filter: none !important;
1002
1003 }
1004
1005 /* change z-index when opened in modal */
1006 .modal-open .datetimepicker {
1007   z-index: 10055 !important;
1008 }
1009
1010 /***
1011 Bootstrap Time Picker
1012 ***/
1013 .bootstrap-timepicker-widget table td a  {
1014   padding: 4px 0;
1015 }
1016
1017 .bootstrap-timepicker-widget input,
1018 .bootstrap-timepicker-widget input:focus {
1019   outline: none !important;
1020   border: 0;
1021 }
1022
1023 .modal-open  .bootstrap-timepicker-widget {
1024   z-index: 10055 !important;
1025 }
1026
1027 .bootstrap-timepicker-widget.timepicker-orient-bottom:before,
1028 .bootstrap-timepicker-widget.timepicker-orient-bottom:after {
1029   top: auto;
1030 }
1031
1032 /***
1033 Bootstrap Datepicker
1034 ***/
1035
1036 .datepicker.dropdown-menu {
1037   padding: 5px;
1038 }
1039
1040 .datepicker .selected {
1041   background-color:#909090 !important;
1042   background-image: none !important;
1043   filter: none !important;
1044 }
1045
1046 .datepicker .active {
1047   background-color:#4b8df8 !important;
1048   background-image: none !important;
1049   filter: none !important;
1050 }
1051
1052 .datepicker .active:hover {
1053   background-color: #2678FC !important;
1054   background-image: none !important;
1055   filter: none !important;
1056 }
1057
1058 .datepicker .input-daterange input {
1059   text-align: left;
1060 }
1061
1062 /* change z-index when opened in modal */
1063 .modal-open .datepicker {
1064   z-index: 10055 !important;
1065 }
1066
1067 .datepicker table td {
1068   font-weight: 300  !important;
1069   font-family: 'Open Sans' !important;
1070 }
1071
1072 .datepicker table th {
1073   font-family: 'Open Sans' !important;
1074   font-weight: 400  !important;
1075 }
1076
1077
1078 /***
1079 Clockface
1080 ***/
1081
1082 .modal-open .clockface {
1083   z-index: 10055 !important;
1084 }
1085
1086 .clockface .cell .inner.active,
1087 .clockface .cell .outer.active {
1088   background-color:#4b8df8 !important;
1089   background-image: none ;
1090   filter:none ;
1091 }
1092
1093
1094 /***
1095 Bootstrap Daterangepicker
1096 ***/
1097
1098 .modal-open .daterangepicker {
1099   z-index: 10055 !important;
1100 }
1101
1102 .daterangepicker td {
1103   text-shadow: none ;
1104 }
1105
1106 .daterangepicker td.active {
1107   background-color: #4b8df8 ;
1108   background-image: none ;
1109   filter:none ;
1110 }
1111
1112 .daterangepicker th {
1113   font-weight: 400;
1114   font-size: 14px;
1115 }
1116
1117 .daterangepicker .ranges input[type="text"]  {
1118   width: 70px !important;
1119   font-size: 11px;
1120   vertical-align: middle;
1121 }
1122
1123 .daterangepicker .ranges label {
1124   font-weight: 300;
1125   display: block;
1126 }
1127
1128 .daterangepicker .ranges .btn {
1129   margin-top: 10px;
1130 }
1131
1132 .daterangepicker.dropdown-menu {
1133   padding: 5px;
1134 }
1135
1136 .daterangepicker .ranges li {
1137   color: #333;
1138 }
1139
1140 .daterangepicker .ranges li.active,
1141 .daterangepicker .ranges li:hover {
1142   background: #4b8df8 !important;
1143   border: 1px solid #4b8df8 !important;
1144   color: #fff;
1145 }
1146
1147 .daterangepicker .range_inputs input {
1148   margin-bottom: 0 !important;
1149 }
1150
1151 /***
1152 Bootstrap Editable
1153 ***/
1154
1155 .editable-input table,
1156 .editable-input table th,
1157 .editable-input table td,
1158 .editable-input table tr {
1159   border: 0 !important;
1160 }
1161
1162 .editable-input .combodate select {
1163   margin-bottom: 5px;
1164 }
1165
1166 /***
1167 FuelUX Spinners
1168 ***/
1169
1170 .spinner-buttons.btn-group-vertical .btn {
1171   text-align: center;
1172   margin: 0;
1173   height: 17px;
1174   width: 22px;
1175   padding-left: 6px;
1176   padding-right: 6px;
1177   padding-top: 0px;
1178 }
1179
1180
1181 /***
1182 NoUI Range Sliders
1183 ***/
1184 .noUi-handle {
1185   height: 20px;
1186   width: 20px;
1187   margin: -3px 0 0 -20px;
1188 }
1189
1190 .noUi-base {
1191   height: 16px;
1192 }
1193
1194 .noUi-connect {
1195   background: #ffb848;
1196 }
1197
1198 /***
1199 Toastr Notifications
1200 ***/
1201 .toast {
1202     -webkit-box-shadow: none !important;
1203      -moz-box-shadow: none !important;
1204           box-shadow: none !important;
1205 }
1206
1207 .toast {
1208   background-color: #030303;
1209 }
1210 .toast-success {
1211   background-color: #51a351;
1212 }
1213 .toast-error {
1214   background-color: #bd362f;
1215 }
1216 .toast-info {
1217   background-color: #2f96b4;
1218 }
1219 .toast-warning {
1220   background-color: #f89406;
1221 }
1222
1223 .toast .toast-close-button {
1224   display: inline-block;
1225   margin-top: 0px;
1226   margin-right: 0px;
1227   text-indent: -100000px;
1228   width: 11px;
1229   height: 16px;
1230   background-repeat: no-repeat !important;
1231   background-image: url("../image/portlet-remove-icon-white.png") !important;
1232 }
1233
1234 .toast-top-center {
1235   top: 12px;
1236   margin: 0 auto;
1237   left: 50%;
1238   margin-left: -150px;
1239 }
1240
1241 .toast-bottom-center {
1242   bottom: 12px;
1243   margin: 0 auto;
1244   left: 50%;
1245   margin-left: -150px;
1246 }
1247
1248 /***
1249 Google reCaptcha
1250 ***/
1251 .form-recaptcha-img {
1252   margin-bottom: 10px;
1253   clear: both;
1254   border: 1px solid #e5e5e5;
1255   padding: 5px;
1256 }
1257
1258 iframe[src="about:blank"] {
1259   display:none;
1260 }
1261
1262 /***
1263 Bootstrap Markdown
1264 ***/
1265 .md-input {
1266   padding: 5px !important;
1267   border-bottom: 0 !important;
1268 }
1269
1270 .md-editor .btn-toolbar {
1271   margin-left: 0px;
1272 }
1273
1274 .md-editor.active {
1275   border: 1px solid #999999;
1276   -webkit-box-shadow: none !important;
1277      -moz-box-shadow: none !important;
1278           box-shadow: none !important;
1279 }
1280
1281 /***
1282 Bootstrap Datepaginator
1283 ***/
1284 .datepaginator a {
1285   font-family: 'Open Sans';
1286   font-size: 13px;
1287   font-weight: 300;
1288 }
1289
1290 .datepicker .today {
1291   background-image: none !important;
1292   filter: none !important;
1293 }
1294
1295 #dp-calendar {
1296   right: 4px !important;
1297 }
1298
1299 /***
1300 Font Awesome 4.0 Demo
1301 ***/
1302 .fa-item {
1303   font-size: 14px;
1304   padding: 10px 10px 10px 20px;
1305 }
1306
1307 .fa-item i {
1308   font-size: 16px;
1309   display: inline-block;
1310   width: 20px;
1311 }
1312
1313 .fa-item:hover {
1314   cursor: pointer;
1315   background: #eee;
1316 }
1317
1318 /***
1319 Bootstrap Modal
1320 ***/
1321 /* fix: content shifting to the right on modal open */
1322 .modal-open.page-overflow .page-container,
1323 .modal-open.page-overflow .page-container .navbar-fixed-top,
1324 .modal-open.page-overflow .page-container .navbar-fixed-bottom,
1325 .modal-open.page-overflow .modal-scrollable {
1326   overflow-y: auto !important;
1327 }
1328
1329 .modal-scrollable {
1330   overflow: hidden !important;
1331 }
1332
1333
1334 /***
1335 jQuery Notific8 Plugin
1336 ***/
1337
1338 .jquery-notific8-message {
1339   font-size: 13px;
1340 }
1341
1342 [class*="jquery-notific8"],
1343 [class*="jquery-notific8"]:after,
1344 [class*="jquery-notific8"]:before {
1345    -webkit-box-sizing: content-box;
1346       -moz-box-sizing: content-box;
1347            box-sizing: content-box;
1348 }
1349
1350 .right .jquery-notific8-close-sticky span,
1351 .left .jquery-notific8-close-sticky span {
1352     font-size: 10px;
1353 }
1354
1355 .jquery-notific8-heading {
1356   font-weight: 300;
1357   font-size: 16px;
1358 }
1359
1360 /***
1361 jQuery File Upload
1362 ***/
1363
1364 .blueimp-gallery .close {
1365   background-image: url("../image/portlet-remove-icon-white.png") !important;
1366   margin-top: -2px;
1367 }
1368
1369 .blueimp-gallery .prev,
1370 .blueimp-gallery .next {
1371   border-radius: 23px !important;
1372 }
1373
1374 /***
1375 Bootstrap Switch
1376 ***/
1377
1378 .has-switch {
1379   border-color: #e5e5e5;
1380 }
1381
1382 .has-switch:focus {
1383   -webkit-box-shadow: none;
1384           box-shadow: none;
1385 }
1386
1387 /***
1388 Jstree
1389 ***/
1390
1391 .jstree-default .jstree-clicked {
1392   border: 0;
1393   background-color: #e1e1e1;
1394   box-shadow:none;
1395 }
1396
1397 .jstree-default .jstree-hovered {
1398   border: 0;
1399   background-color: #eee;
1400   box-shadow:none;
1401 }
1402
1403 .jstree-default .jstree-wholerow-clicked,
1404 .jstree-wholerow .jstree-wholerow-clicked {
1405   background: none;
1406   border: 0;
1407   background-color: #e1e1e1;
1408   box-shadow:none;
1409 }
1410
1411 .jstree-default .jstree-wholerow-hovered,
1412 .jstree-wholerow .jstree-wholerow-hovered {
1413   border: 0;
1414   background-color: #eee;
1415   box-shadow:none;
1416 }
1417
1418 .jstree-icon.icon-lg {
1419   margin-top: 1px;
1420 }
1421
1422 .jstree-open > .jstree-anchor > .fa-folder:before {
1423   margin-left: 2px;
1424   content: "\f07c";
1425 }
1426
1427 .jstree-default.jstree-rtl .jstree-last {
1428   background: transparent;
1429   background-repeat: no-repeat;
1430 }
1431
1432 .vakata-context,
1433 .vakata-context ul {
1434   padding: 0;
1435   min-width: 125px;
1436   background-color: #ffffff;
1437   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1438   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1439   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
1440   font-size: 14px;
1441   font-family: "Segoe UI",Helvetica, Arial, sans-serif;
1442   border: 1px solid #ddd;
1443 }
1444
1445 .vakata-context li a {
1446   padding: 0 10px;
1447 }
1448
1449 .vakata-context .vakata-context-hover > a,
1450 .vakata-context li a:hover {
1451   background-color: #eee;
1452   color: #333;
1453   box-shadow: none;
1454 }
1455
1456 .vakata-context li a span,
1457 .vakata-context li a ins {
1458   display: none;
1459 }
1460
1461 .vakata-context .vakata-context-separator a,
1462 .vakata-context-rtl .vakata-context-separator a {
1463   margin: 0;
1464 }
1465
1466 .jstree-rename-input {
1467   background-color: #ffffff !important;
1468   border: 1px solid #e5e5e5 !important;
1469   outline: none !important;
1470   padding: 2px 6px !important;
1471   margin-right: -4px !important;
1472 }
1473
1474 /***
1475 Bootstrap Select
1476 ***/
1477
1478 .bootstrap-select .btn {
1479   border-color: #e5e5e5;
1480 }
1481
1482 .bootstrap-select.open .btn1 {
1483   border-color: #999999;
1484 }
1485
1486 .bootstrap-select.open.dropup .btn1 {
1487   border-color: #999999;
1488 }
1489
1490 .bootstrap-select .btn:focus {
1491     outline: none !important;
1492     outline-offset: 0;
1493 }
1494
1495 .bootstrap-select.btn-group .dropdown-menu {
1496   margin-top: 1px;
1497 }
1498
1499 .bootstrap-select.btn-group .dropdown-menu > li > dt > .text {
1500   font-weight: 600;
1501   font-family: 'Open Sans';
1502   font-size: 14px;
1503 }
1504
1505 .bootstrap-select.btn-group .dropdown-menu .text-muted {
1506   color: #999 !important;
1507 }
1508
1509 .bootstrap-select .caret {
1510   border: 0;
1511   width: auto;
1512   height: auto;
1513   margin-top: -10px !important;
1514 }
1515
1516 .bootstrap-select .caret:before {
1517     content: "\f107";
1518     display: inline-block;
1519     border: 0;
1520     font-family: FontAwesome;
1521     font-style: normal;
1522     font-weight: normal;
1523 }
1524
1525 .bootstrap-select .selected i {
1526   color: #aaa;
1527 }
1528
1529 /***
1530 Pace - Page Progress
1531 ***/
1532
1533 .pace .pace-progress {
1534   z-index: 10000;
1535   top: 40px;
1536   height: 2px;
1537 }
1538
1539 .pace .pace-progress-inner {
1540   box-shadow: none;
1541 }
1542
1543 .pace .pace-activity {
1544   top: 44px;
1545   right: 22px;
1546   border-radius: 10px !important;
1547 }
1548
1549
1550 @media (max-width: 480px) {
1551
1552   .page-header-fixed .pace .pace-progress {
1553     top: 82px;
1554   }
1555
1556   .page-header-fixed .pace .pace-activity {
1557     top: 88px;
1558     right: 15px;
1559   }
1560
1561 }