css/civicrm.css

   1 /**
   2  * @file: CiviCRM Stylesheet
   3  *
   4  * NOTE: The main civicrm container has both class and id of crm-container
   5  * Other civi blocks outside the main container also have the class crm-container (but not the id)
   6  * All styles should start with .crm-container unless they are specific to the main div only
   7  */
   8
   9 /* Use this class to hide text that should only be there for screen readers */
  10 .sr-only {
  11    border: 0;
  12    clip: rect(1px, 1px, 1px, 1px);
  13    clip-path: inset(50%);
  14    height: 1px;
  15    width: 1px;
  16    margin: -1px;
  17    overflow: hidden;
  18    padding: 0;
  19    position: absolute;
  20 }
  21
  22 .crm-container .crm-flex-box {
  23   display: flex;
  24   flex-wrap: wrap;
  25   box-sizing: border-box;
  26 }
  27 .crm-flex-box > * {
  28   flex: 1;
  29   box-sizing: border-box;
  30   min-width: 0; /* prevents getting squashed by whitespace:nowrap content */
  31 }
  32 .crm-container .crm-flex-1 {
  33   flex: 1;
  34 }
  35 .crm-container .crm-flex-2 {
  36   flex: 2;
  37 }
  38 .crm-container .crm-flex-3 {
  39   flex: 3;
  40 }
  41 .crm-container .crm-flex-4 {
  42   flex: 4;
  43 }
  44 .crm-container .crm-flex-5 {
  45   flex: 5;
  46 }
  47
  48 .crm-container .crm-draggable {
  49   cursor: move;
  50 }
  51
  52 .crm-container input {
  53   box-sizing: content-box;
  54 }
  55
  56 .crm-container .crm-inline-block {
  57   display: inline-block;
  58 }
  59
  60 div.crm-container label {
  61   font-weight: normal;
  62   display: inline;
  63 }
  64
  65 div.crm-container fieldset label{
  66   float: none;
  67 }
  68
  69 input.crm-form-radio + label, input.crm-form-checkbox + label{
  70   margin-left: 7px;
  71 }
  72
  73 .crm-container .crm-quickSearchField {
  74   font-weight: normal;
  75 }
  76
  77 #crm-container .hiddenElement,
  78 .crm-container .hiddenElement {
  79   display: none;
  80 }
  81
  82 #crm-container .clear,
  83 .crm-container .clear {
  84   clear: both;
  85 }
  86
  87 .crm-container a,
  88 .crm-container a:link,
  89 .crm-container a:visited {
  90   color: #2786c2;
  91   text-decoration: none;
  92 }
  93
  94 #crm-container .crm-content-block {
  95   padding: 0;
  96 }
  97
  98 /* TABLE STYLING */
  99
 100 .crm-container table {
 101   margin: 0 0 1em;
 102   border-collapse: collapse;
 103   width: 100%;
 104   font-size: 13px;
 105 }
 106
 107 .crm-container tr {
 108   background: none transparent;
 109 }
 110
 111 .crm-container th,
 112 .crm-container table.display thead th,
 113 .crm-container table thead.sticky th,
 114 .crm-container table.caseSelector tr.columnheader th {
 115   background-color: #FFFFFF;
 116   border-color: #FFFFFF #FFFFFF #CFCEC3;
 117   border-style: solid;
 118   border-width: 1px 1px 2px;
 119   color: #A7A7A7;
 120   font-size: 13px;
 121   font-weight: bold;
 122   padding: 4px;
 123   text-align: left;
 124   vertical-align: top;
 125 }
 126 /* Styles for Sticky Header */
 127 .crm-container table thead.sticky {
 128   background-color: #FFF;
 129 }
 130
 131 .crm-container thead div.sticky-header {
 132   height: 15px;
 133   border-bottom: 2px solid #CFCEC3;
 134   background-color: #FFF;
 135   z-index: 10;
 136 }
 137
 138 /* Styles for Sorting Header */
 139 .crm-container table thead th.sorting_asc,
 140 .crm-container table thead th.sorting_desc,
 141 .crm-container table .sticky th a.sort-ascending,
 142 .crm-container table .sticky th a.sort-descending,
 143 .crm-container table.caseSelector tr.columnheader th a.sort-ascending,
 144 .crm-container table.caseSelector tr.columnheader th a.sort-descending {
 145   color: #3e3e3e;
 146   background-color: #FFF;
 147 }
 148
 149 /* Set background back to normal gray for form labels which use <th>. Temporary fix until we standardize form layout markup. */
 150 .crm-container table.form-layout-compressed tbody th.label {
 151   background-color: #F7F7F7;
 152 }
 153
 154 .crm-container tbody {
 155   border-top: none;
 156 }
 157
 158 .crm-container td {
 159   padding: 4px;
 160   vertical-align: top;
 161 }
 162
 163 .crm-container .crm-row-child {
 164   margin: 0;
 165   padding: 3px 0 3px 0;
 166   clear: none;
 167   background-color: #F1F8EB;
 168 }
 169
 170 /*
 171 ** Size input fields in crm-container by class. Classes are assigned by the
 172 ** module in relation to the data object max size.
 173 */
 174 .crm-container .crm-select2 {
 175   width: 15em;
 176 }
 177 .crm-container .two {
 178   width: 2em;
 179 }
 180 .crm-container .four {
 181   width: 4em;
 182 }
 183 .crm-container .six {
 184   width: 6em;
 185 }
 186 .crm-container .eight {
 187   width: 8em;
 188 }
 189 .crm-container .twelve {
 190   width: 12em;
 191 }
 192 .crm-container .twenty {
 193   width: 20em;
 194 }
 195 .crm-container .medium {
 196   width: 12em;
 197 }
 198 .crm-container .big {
 199   width: 15em;
 200 }
 201 .crm-container .huge,
 202 input.crm-form-entityref {
 203   width: 25em;
 204 }
 205 .crm-container .huge40 {
 206   width: 40em;
 207 }
 208 .crm-container textarea.big {
 209   width: 35em;
 210   height: 4em;
 211 }
 212 .crm-container textarea.huge {
 213   width: 45em;
 214   height: 16em;
 215 }
 216 .crm-container textarea.huge12 {
 217   width: 40em;
 218   height: 12em;
 219 }
 220 .crm-container textarea.huge40 {
 221   width: 40em;
 222   height: 16em;
 223 }
 224 .crm-container textarea.nowrap {
 225   width: 45em;
 226   height: 4.5em;
 227   white-space: nowrap;
 228   overflow: auto;
 229 }
 230 .crm-container .bigSelect {
 231   width: 15em;
 232   height: 12em;
 233 }
 234
 235 /* Override line-height from style.css */
 236 #crm-container,
 237 .crm-container {
 238   line-height: 135%;
 239 }
 240
 241 /* Base crm-container styles */
 242 .crm-container hr {
 243   background-color: #B0B0B0;
 244 }
 245
 246 .crm-container .crm-form-block {
 247   padding: 4px;
 248   margin-bottom: 4px;
 249   font-size: 13px;
 250   background-color: #efefe5;
 251   color: #3E3E3E;
 252 }
 253
 254 .crm-container .no-border {
 255   border-style: none;
 256 }
 257
 258 /*
 259 ** Class for giving solid line at the bottom of the <div>(block level element)
 260 ** Currently it is used on the dashboard pages - CiviContribute, CiviMember...
 261 */
 262 .crm-container div.solid-border-bottom {
 263   border-bottom: 2px solid #777;
 264 }
 265
 266 .crm-container .solid-border-top {
 267   margin-top: 15px;
 268   border-top: 1px solid #696969;
 269 }
 270
 271 /* Size the verticle heights in crm-containers by class. */
 272 .crm-container .ht-one {
 273   height: 1em;
 274 }
 275
 276 .crm-container .add-remove-link {
 277   font-size: .9em;
 278 }
 279
 280 /* Ensures max-width is reset to css default for the images in the maps */
 281 #Map img {
 282   max-width: none;
 283 }
 284
 285 .crm-container .required {
 286   color: inherit;
 287 }
 288
 289 /* CRM form layout classes (from www.realworldstyle.com) */
 290 .crm-container .spacer {
 291   clear: left;
 292   height: 5px;
 293 }
 294
 295 .crm-container td.compressed select,
 296 .crm-container td.compressed input {
 297   font-size: 0.90em;
 298   font-weight: bold;
 299 }
 300
 301 .crm-container td.Int input {
 302   width: 6em;
 303 }
 304
 305 .crm-container input.crm-form-text.ng-invalid.ng-dirty {
 306     border: 1px solid #FF0000;
 307 }
 308 .crm-container input.crm-form-text,
 309 .crm-container .crm-icon-picker-button,
 310 .crm-container input.dateplugin,
 311 .crm-container input.crm-form-password {
 312   border: 1px solid #999;
 313   vertical-align: middle;
 314   padding: 1px 2px;
 315   height: 1.8em;
 316   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
 317   background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
 318   background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
 319   background-image: linear-gradient(top, #eee 1%, #fff 15%);
 320 }
 321
 322 .crm-container input.crm-form-text[disabled],
 323 .crm-container input.dateplugin[disabled],
 324 .crm-container select.crm-form-select[disabled],
 325 .crm-container input.crm-form-text[readonly],
 326 .crm-container input.crm-form-password[disabled],
 327 .crm-container input.crm-form-password[readonly] {
 328   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #ddd), color-stop(15%, #f2f2f2));
 329   background-image: -webkit-linear-gradient(top, #ddd 1%, #f2f2f2 15%);
 330   background-image: -moz-linear-gradient(top, #ddd 1%, #f2f2f2 15%);
 331   background-image: linear-gradient(top, #ddd 1%, #f2f2f2 15%);
 332 }
 333
 334 .crm-container input.crm-form-text[disabled],
 335 .crm-container input.dateplugin[disabled],
 336 .crm-container select.crm-form-select[disabled],
 337 .crm-container input.crm-form-password[disabled] {
 338   color: #a9a9a9;
 339 }
 340
 341 .crm-container .crm-form-time {
 342   width: 5em;
 343   margin-left: 1em;
 344 }
 345
 346 .crm-container .crm-form-submit {
 347   margin: .25em 0.5em 0.25em 0;
 348 }
 349
 350 .crm-container div.crm-inline-button {
 351   padding-left: 6px;
 352   padding-top: 6px;
 353   margin-bottom: 28px;
 354 }
 355
 356 .crm-container fieldset {
 357   background: none;
 358   padding: 4px 0;
 359   margin: 10px 0;
 360   border: none;
 361   border-top: 1px solid #CFCEC3;
 362 }
 363
 364 .crm-container fieldset.no-border {
 365   border-top: none;
 366 }
 367
 368 .crm-container fieldset legend {
 369   display: block;
 370   font-size: 14px;
 371   font-weight: bold;
 372   padding: 4px;
 373   background: none;
 374   border: medium none;
 375   background-color: transparent;
 376   color: #3E3E3E;
 377   position: relative;
 378   text-indent: 0;
 379   width: auto;
 380 }
 381
 382 .crm-container fieldset.form-layout {
 383   margin: .25em 0 .5em 0;
 384   padding: 1px 10px 1px 10px;
 385 }
 386
 387 .crm-container fieldset.collapsible {
 388   border: 0;
 389 }
 390
 391 .crm-container div.form-item {
 392   border-top-style: none;
 393   margin: 0;
 394   padding: 3px 0 5px 0;
 395   clear: none;
 396   height: 100%;
 397 }
 398
 399 .crm-container div.form-item dl,
 400 .crm-container .section-hidden dl,
 401 .crm-container .crm-form-block dl {
 402   margin: 0;
 403 }
 404
 405 /* contribution page styles */
 406 .crm-container #Main fieldset table td {
 407   background-color: transparent;
 408   border: none;
 409 }
 410
 411 .crm-container .crm-section,
 412 .crm-container div.crm-field-wrapper {
 413   margin-bottom: 1em;
 414 }
 415
 416 .crm-container .crm-section .label {
 417   float: left;
 418   width: 17%;
 419   text-align: right;
 420 }
 421
 422 .crm-container .crm-section .label label{
 423   white-space: normal;
 424 }
 425
 426 .crm-container .label-left .label {
 427   text-align: left;
 428 }
 429
 430 .crm-container .crm-section .content {
 431   margin-left: 19%;
 432 }
 433
 434 .crm-container .no-label .content {
 435   margin-left: 0;
 436 }
 437
 438 #crm-container #cvv2 {
 439   vertical-align: top;
 440 }
 441
 442 /* Use definition lists for simple 2 col forms - <dt> for labels, <dd> for fields */
 443 .crm-container div.form-item dt,
 444 .crm-container .crm-form-block dt {
 445   float: left;
 446   clear: left;
 447   width: 150px;
 448   text-align: right;
 449   vertical-align: top;
 450   padding: 5px 15px 5px 0;
 451   font-size: .95em;
 452   white-space: normal;
 453 }
 454
 455 .crm-container .section-hidden dt {
 456   float: left;
 457   clear: left;
 458   width: 150px;
 459   text-align: left;
 460   font-weight: bold;
 461   white-space: nowrap;
 462   padding: 5px 15px 5px 0;
 463 }
 464
 465 .crm-container div.form-item dd,
 466 .crm-container .crm-form-block dd,
 467 .crm-container .section-hidden dd {
 468   padding: 3px;
 469   margin-left: 160px;
 470 }
 471
 472 .crm-container div.form-item dd.html-adjust,
 473 .crm-container div.form-item dl.html-adjust dd,
 474 .crm-container div.crm-form-block dl.html-adjust dd,
 475 .crm-container div.crm-form-block dd.html-adjust {
 476   width: 57%;
 477 }
 478
 479 .crm-container div.form-item dd.description,
 480 .crm-container div.crm-form-block dd.description {
 481   padding: 0 0 5px;
 482   white-space: normal;
 483 }
 484
 485 .crm-container div.form-item span.labels,
 486 .crm-container div.crm-form-block span.labels {
 487   float: left;
 488   width: 15%;
 489   text-align: right;
 490 }
 491
 492 .crm-container div.form-item span.fields,
 493 .crm-container div.crm-form-block span.fields {
 494   width: 84%;
 495   text-align: left;
 496   margin-left: 16%;
 497   display: block;
 498 }
 499
 500 .crm-container table.form-layout,
 501 .crm-container table.no-border {
 502   margin: 0;
 503   border-collapse: collapse;
 504   border: 0 none;
 505 }
 506
 507 .crm-container table.form-layout-compressed {
 508   margin: 0 0 .5em;
 509   width: auto;
 510   border-collapse: collapse;
 511   border: 1px none;
 512 }
 513
 514 .crm-container table.crm-profile-tagsandgroups>tbody>tr>td {
 515   padding: 0;
 516 }
 517
 518 .crm-container table.crm-profile-tagsandgroups,
 519 .crm-container table.crm-profile-tagsandgroups table {
 520   margin: 0;
 521 }
 522
 523 .crm-container table.advmultiselect {
 524   margin: 0;
 525   width: auto;
 526   border-collapse: collapse;
 527   border: 1px solid #696969;
 528 }
 529
 530 .crm-container table.advmultiselect td {
 531   padding: 10px;
 532 }
 533
 534 .crm-container table.advmultiselect td select {
 535   width: 150px;
 536 }
 537
 538 .crm-container .form-layout td {
 539   vertical-align: top;
 540   padding: 5px;
 541   white-space: normal;
 542   border: none;
 543 }
 544
 545 .crm-container .form-layout td.report,
 546 .crm-container .form-layout td.description,
 547 .crm-container .form-layout-compressed td.description {
 548   white-space: normal;
 549 }
 550
 551 .crm-container .form-layout-compressed td,
 552 .crm-container .form-layout-compressed th {
 553   vertical-align: text-top;
 554   padding: 2px 5px;
 555   border: none;
 556 }
 557
 558 .crm-container .form-layout td.label,
 559 .crm-container .form-layout-compressed td.label,
 560 .crm-container .selector td.label,
 561 .crm-container .form-layout-compressed th.label {
 562   text-align: right;
 563   padding: 4px 4px 4px 6px;
 564   border: 0 none;
 565   vertical-align: top;
 566 }
 567
 568 .crm-container .form-layout td.label-left,
 569 .crm-container .form-layout-compressed td.label-left {
 570   text-align: left;
 571   padding: 4px 4px 4px 6px;
 572   border: 0 none;
 573   vertical-align: top;
 574 }
 575
 576 .crm-container .form-layout td.view-value,
 577 .crm-container .form-layout-compressed td.view-value {
 578   text-align: left;
 579   padding: 4px;
 580   border: 0 none;
 581   vertical-align: top;
 582 }
 583
 584 #crm-submit-buttons {
 585   width: 100%;
 586   /* fix ie7/ie8 bug where page goes bananas */
 587 }
 588
 589 .crm-container .form-layout .buttons,
 590 .crm-container .form-layout-compressed .buttons {
 591   padding-top: 10px;
 592 }
 593
 594 .crm-container .form-layout-compressed td.describe-image {
 595   vertical-align: top;
 596   padding: 0.5em 0 0 0;
 597   font-size: .9em;
 598 }
 599
 600 .crm-container .right {
 601   text-align: right;
 602 }
 603
 604 .crm-container .form-layout-compressed td.option-label {
 605   vertical-align: top;
 606   text-align: right;
 607   padding: 0.75em 0.5em 0 0.75em;
 608   color: #7a7a60;
 609 }
 610
 611 .crm-container td.price_set_option-label {
 612   padding-left: 3em;
 613 }
 614
 615 /* messages and status */
 616 .crm-container .messages {
 617   margin: 1em 0 1em;
 618   border: none;
 619   font-weight: normal;
 620 }
 621
 622 .crm-container .messages .msg-title {
 623   font-weight: bold;
 624 }
 625
 626 .crm-container .messages table {
 627   width: auto;
 628 }
 629
 630 .crm-container .messages table td {
 631   background-color: #F7F7F7;
 632   border-bottom: 1px solid #DDDDDD;
 633 }
 634
 635 .crm-container .status {
 636   background-color: #FFFFCC;
 637   background-image: none;
 638   border: 1px solid #FFFF66;
 639   margin: 0.5em 0;
 640   padding: 0.25em 0.5em;
 641   color: #3e3e3e;
 642   font-weight: normal;
 643 }
 644
 645 .crm-container .status dl {
 646   margin: 2px 5px;
 647 }
 648
 649 .crm-container div.status dt {
 650   clear: none;
 651   float: left;
 652   width: 20px;
 653 }
 654
 655 .crm-container div.status dd {
 656   margin-left: 0;
 657 }
 658
 659 .crm-container div.status ul {
 660   margin: 0 0 1em 16px;
 661 }
 662
 663 .crm-container .status-pending {
 664   color: green;
 665 }
 666
 667 .crm-container .status-completed {
 668   color: #000080;
 669 }
 670
 671 .crm-container .crm-marker{
 672   color: #8A1F11;
 673   font-weight: bold;
 674   margin-right: 5px;
 675 }
 676
 677 .crm-container .crm-error,
 678 .crm-container .crm-inline-error {
 679   background: #FBE3E4 none repeat scroll 0 0;
 680   border: none;
 681   color: #8A1F11;
 682 }
 683 .crm-container .crm-error {
 684   padding: 4px;
 685 }
 686
 687 .crm-container .status.crm-ok {
 688   border-color: #B0D730;
 689   background-color: #F1F8EB;
 690   color: #3E3E3E;
 691 }
 692
 693 .crm-container .crm-footer {
 694   font-size: 0.8em;
 695 }
 696
 697 #civicrm-footer {
 698   margin-top: 2em;
 699   border-top: 1px solid #ddd;
 700   padding: 0.8em;
 701   text-align: center;
 702 }
 703
 704 .crm-container #civicrm-footer.crm-public-footer {
 705   vertical-align: middle;
 706   text-align: right;
 707   font-size: 16px;
 708   padding: 0.8em 0;
 709 }
 710
 711 .crm-container a.empowered-by-link {
 712   display: inline-block;
 713   height: 34px;
 714   position: relative;
 715   width: 99px;
 716 }
 717
 718 .crm-container div.empowered-by-logo {
 719   background: url('../i/civi99.png') no-repeat;
 720   display: block;
 721   line-height: 34px;
 722   position: absolute;
 723   top: 9px;
 724   width: 99px;
 725 }
 726
 727 .crm-container div.empowered-by-logo span {
 728   visibility: hidden;
 729 }
 730
 731 .crm-container #access {
 732   padding: 0.8em 0.8em 0 0;
 733   text-align: right;
 734 }
 735
 736 .crm-container .header-dark {
 737   margin: 0.5em 0 0.5em;
 738   padding: 0.5em;
 739   background-color: #999999;
 740   font-weight: bold;
 741   color: #FAFAFA;
 742   border-radius: 2px;
 743 }
 744
 745 .crm-container div.display-block {
 746   font-weight: normal;
 747   margin: 1em 2em 1em 2em;
 748 }
 749
 750 /* Data display layouts */
 751 .crm-container h3 {
 752   /* h3 used as table header for civicrm */
 753   background-color: #CDE8FE;
 754   font-size: 15px;
 755   font-weight: bold;
 756   color: #121A2D;
 757   padding: 4px 6px;
 758   margin: 0 0 0.3em;
 759 }
 760
 761 .crm-container h3.nobackground,
 762 .crm-container .crm-form-block h3 {
 763   background-color: transparent;
 764 }
 765
 766 #crm-container .col1 {
 767   float: left;
 768   vertical-align: top;
 769   width: 40%;
 770   text-align: left;
 771   margin: 0 25px 0 25px;
 772 }
 773
 774 #crm-container .col2 {
 775   float: right;
 776   vertical-align: top;
 777   width: 50%;
 778   text-align: left;
 779   margin: 0;
 780 }
 781
 782 #crm-container ul.indented {
 783   padding-left: 3em;
 784 }
 785
 786 #crm-container tr.subevent td.event-title,
 787 #crm-container tr.subevent td.event-info {
 788   padding-left: 3em;
 789 }
 790
 791 #crm-container span.child-indent {
 792   padding-left: 1em;
 793 }
 794
 795 /* Remove any weird list styles from the cms */
 796 .crm-container ul li {
 797   background-image: none;
 798 }
 799
 800 .crm-container .crm-form-block .crm-loading-element {
 801   background-image: url("../i/loading-E6E6DC.gif");
 802 }
 803
 804 .crm-container .crm-loading-element {
 805   padding-left: 30px;
 806   height: 30px;
 807   background: transparent url("../i/loading.gif") no-repeat 0 0;
 808 }
 809
 810 .crm-container div div.crm-msg-loading div.icon {
 811   background: transparent url("../i/loading-2f2f2e.gif") no-repeat 0 0;
 812 }
 813
 814 /*
 815  * Styles for formatting text
 816  */
 817
 818 /* Inline form field 'post-help' and radio-button unselect */
 819 .crm-container .description {
 820   font-size: 0.9em;
 821   font-weight: normal;
 822   white-space: normal;
 823   width: auto;
 824   color: #696969;
 825   line-height: inherit;
 826   padding: 0;
 827   margin: 0;
 828 }
 829
 830 .crm-container .form-layout-compressed td.description,
 831 .crm-container .form-layout td.description {
 832   padding: 0 5px 5px 5px;
 833   font-size: 1em;
 834 }
 835
 836 /* Page and form-level 'help' */
 837 .crm-container .help,
 838 .crm-container #help {
 839   background-color: #F1F8EB;
 840   border: 1px solid #B0D730;
 841   color: #3E3E3E;
 842   font-size: 13px;
 843   margin: 0 0 8px;
 844   padding: 4px;
 845 }
 846
 847 .crm-container .help p {
 848   margin: 4px;
 849 }
 850
 851 .crm-container .font-light {
 852   font-weight: lighter;
 853 }
 854
 855 .crm-container .bold {
 856   font-weight: bold;
 857 }
 858
 859 .crm-container .font-italic {
 860   font-style: italic;
 861 }
 862
 863 .crm-container .font-size11pt {
 864   font-size: 1.1em;
 865 }
 866
 867 .crm-container .font-size12pt {
 868   font-size: 1.2em;
 869 }
 870
 871 .crm-container .qill {
 872   font-weight: normal;
 873   line-height: 1.1em;
 874 }
 875
 876 /* Styles for record browser and report tables, and pager bar */
 877 #crm-container #map-field table,
 878 #crm-container table.report,
 879 #crm-container table.chart {
 880   width: auto;
 881 }
 882
 883 #crm-container .crm-flashchart {
 884   overflow: auto;
 885 }
 886
 887 #crm-container td.enclosingNested {
 888   padding: 0;
 889 }
 890
 891 #crm-container .nowrap {
 892   white-space: nowrap;
 893 }
 894
 895 #crm-container tr.columnheader {
 896   background-color: #E6E6E6;
 897   color: #000000;
 898   border: 1px solid #DDD;
 899 }
 900
 901 #crm-container tr.columnheader a {
 902   color: #000;
 903   text-decoration: none;
 904   vertical-align: top;
 905 }
 906
 907 #crm-container tr.columnheader-dark th {
 908   background-color: #999999;
 909   color: #FAFAFA;
 910   border: 1px solid #696969;
 911 }
 912
 913 #crm-container tr.columnheader-dark td,
 914 #crm-container tr.columnheader-dark th,
 915 #crm-container tr.columnheader td,
 916 #crm-container tr.columnfooter td {
 917   font-size: 1.1em;
 918   font-weight: bold;
 919 }
 920
 921 /* dev/core#1039 Make contact details in popup on merge screen non bold */
 922 #crm-container tr.columnheader td [class*="crm-summary-col-"] {
 923   font-size: 13px;
 924   font-weight: normal;
 925 }
 926
 927 #crm-container tr.columnheader-dark th span.extra {
 928   font-size: .95em;
 929   font-weight: normal;
 930 }
 931
 932 #crm-container tr.columnfooter {
 933   border-top: 2px solid #999999;
 934   font-size: 1.1em;
 935 }
 936
 937 #crm-container #map-field th {
 938   border-right: 1px solid #999999;
 939 }
 940
 941 #crm-container #map-field td,
 942 #crm-container .report td,
 943 #crm-container .chart td {
 944   padding: 10px 10px 4px 10px;
 945 }
 946
 947 #crm-container .report td {
 948   border: 1px solid #999999;
 949   background-color: #F6F6F6;
 950 }
 951
 952 /* double line right border for last cell in a horizontal grouping */
 953 #crm-container table.report td.splitter {
 954   border-right: 5px double #999999;
 955 }
 956
 957 #crm-container .report td.separator {
 958   padding-top: 1em;
 959   background-color: #FFFFFF;
 960   border-left-color: #FFFFFF;
 961   border-right-color: #FFFFFF;
 962 }
 963
 964 #crm-container .chart td {
 965   border: 2px solid #999999;
 966 }
 967
 968 #crm-container .float-left {
 969   float: left;
 970   padding: 4px 0;
 971   clear: none;
 972 }
 973
 974 #crm-container .float-left + .float-left {
 975   margin-left: 1em;
 976 }
 977
 978 #crm-container .float-right {
 979   float: right;
 980   width: auto;
 981   padding: 4px 0;
 982   clear: none;
 983 }
 984
 985 #crm-container .align-right {
 986   display: block;
 987   margin-right: 20px;
 988   text-align: right;
 989 }
 990
 991 #crm-container .element-right {
 992   float: right;
 993   margin-right: 35px;
 994 }
 995
 996 /* search page styles */
 997 .crm-container .crm-search-tasks,
 998 .crm-container .crm-tasks {
 999   margin-bottom: 4px;
1000   padding: 4px;
1001 }
1002
1003 .crm-container .crm-search-results {
1004   margin-bottom: 4px;
1005   padding: 0;
1006 }
1007
1008 .crm-container #search-status {
1009   border: none;
1010   font-size: 13px;
1011   font-weight: normal;
1012 }
1013
1014 .crm-container .crm-pager {
1015   border: none;
1016   background-color: #F5F6F1;
1017   position: relative;
1018   height: 35px;
1019   padding-top: 5px;
1020   margin-bottom: 4px;
1021 }
1022
1023 .crm-container #search-status ul {
1024   margin: 0;
1025 }
1026
1027 .crm-container #search-status ul li,
1028 #crm-container ul.left-alignment li {
1029   display: list-item;
1030   margin-left: 2em;
1031   list-style-position: inside;
1032 }
1033
1034 .crm-container .crm-pager input {
1035   text-align: center;
1036 }
1037
1038 .crm-container .crm-pager-nav {
1039   display: block;
1040   margin-top: 7px;
1041   padding-left: 5px;
1042 }
1043
1044 #crm-container .section-hidden {
1045   display: block;
1046   margin: 0;
1047   padding: 5px;
1048   font-size: 0.95em;
1049 }
1050 #crm-container form .section-hidden-border {
1051   background-color: #5c5c59;
1052   border: medium none;
1053   color: #FFFFFF;
1054   margin-left: 5px;
1055   font-size: 13px;
1056   font-family: Verdana;
1057   padding: 2px 0 0 0;
1058 }
1059
1060 #crm-container .section-shown {
1061   padding: 0 5px;
1062 }
1063 #crm-container .data-group-first {
1064   margin: 10px 5px 5px 5px;
1065   padding: 5px;
1066   border-top: 2px solid #999999;
1067   clear: none;
1068 }
1069
1070 /* Styles for Wizard Progress Bars */
1071 #crm-container ul.wizard-bar {
1072   border-collapse: collapse;
1073   padding: 0 0 0 1em;
1074   white-space: nowrap;
1075   list-style: none;
1076   margin: 10px 0 20px;
1077   height: auto;
1078   width: auto;
1079   line-height: normal;
1080   border-top: 3px solid #bbb;
1081   text-align: center;
1082 }
1083
1084 #crm-container ul.wizard-bar li {
1085   display: inline;
1086   background-color: #FAFAFA;
1087   border: 1px solid #999999;
1088   height: auto;
1089   margin: -2px;
1090   padding: .5em 1em .5em;
1091   text-decoration: none;
1092   font-size: .95em;
1093   background-image: none;
1094 }
1095
1096 #crm-container ul.wizard-bar li.current-step {
1097   background-color: #4A89DC;
1098   border-color: #4A89DC;
1099   color: #ffffff;
1100   font-weight: bold;
1101 }
1102
1103 #crm-container ul.wizard-bar li.past-step {
1104   background-color: #F5F5F5;
1105   color: #666;
1106 }
1107
1108 #crm-container ul.wizard-bar li:first-child {
1109   border-radius: 8px 0 0 8px;
1110 }
1111
1112 #crm-container ul.wizard-bar li:last-child {
1113   border-radius: 0 8px 8px 0;
1114 }
1115
1116 /* Recently Viewed bar */
1117 #crm-recently-viewed ul {
1118   list-style-image: none;
1119   font-size: .9em;
1120   padding: 0;
1121 }
1122
1123 #crm-recently-viewed li.crm-recently-viewed {
1124   margin: 1px;
1125   padding: 1px 1px 4px 3px;
1126   border: 1px solid #D7D7D0;
1127   background-color: #fff;
1128   white-space: nowrap;
1129   list-style-type: none;
1130   position: relative;
1131   border-radius: 4px;
1132 }
1133
1134 #crm-recently-viewed ul li.crm-recently-viewed:hover,
1135 #crm-recently-viewed .crm-recentview-wrapper {
1136   background-color: #FFFFCC;
1137   border: 1px solid #FFFF66;
1138   border-radius: 4px;
1139 }
1140
1141 #crm-recently-viewed a {
1142   font-weight: normal;
1143   color: #4A88DF;
1144   text-decoration: none;
1145   font-size: .95em;
1146 }
1147
1148 #crm-recently-viewed .crm-recentview-wrapper {
1149   display: none;
1150   position: absolute;
1151   z-index: 99;
1152   width: 10em;
1153   overflow: hidden;
1154   top: 0;
1155   text-align: center;
1156   padding-top: 1em;
1157 }
1158
1159 #crm-recently-viewed.left .crm-recentview-wrapper {
1160   border-left: none;
1161   right: -10em;
1162 }
1163
1164 #crm-recently-viewed.right .crm-recentview-wrapper {
1165   border-right: none;
1166   left: -10em;
1167 }
1168
1169 #crm-recently-viewed li.crm-recently-viewed:hover .crm-recentview-wrapper {
1170   display: block;
1171 }
1172
1173 .crm-recentview-item {
1174   overflow: hidden;
1175   text-overflow: ellipsis;
1176 }
1177
1178 #crm-recently-viewed .crm-recentview-wrapper a:hover {
1179   color: #494949;
1180 }
1181
1182 /* Boxes of checkbox elements (e.g. Advanced Search page) */
1183 .crm-container .listing-box,
1184 .crm-container .listing-box-tall {
1185   width: auto;
1186   max-width: 30em;
1187   height: 7.25em;
1188   overflow: auto;
1189   border: 1px solid #999999;
1190 }
1191
1192 .crm-container .listing-box div {
1193   color: black;
1194 }
1195
1196 /* To allow for taller boxes of groups/tags. */
1197 .crm-container .listing-box-tall {
1198   margin: .25em 2em .5em 0;
1199   height: 15em;
1200 }
1201
1202 /* Image Styles */
1203 .crm-container .action-icon {
1204   vertical-align: middle;
1205   padding: 2px 2px 2px 3px;
1206   margin: 2px 2px 3px 2px;
1207   cursor: pointer;
1208 }
1209
1210 #crm-container button.submit-link {
1211   color: #285286;
1212   background: none transparent;
1213   border: none;
1214   cursor: pointer;
1215   margin: 0 -0.5em 0 -0.5em;
1216   text-shadow: none;
1217 }
1218
1219 .crm-container .underline-effect {
1220   color: #285286;
1221 }
1222
1223 .crm-container .underline-effect:hover {
1224   text-decoration: underline;
1225 }
1226
1227 .crm-container .underline-effect:before {
1228   content: "\00BB";
1229 }
1230
1231 #crm-container.clear,
1232 .crm-container .crm-group-summary .clear {
1233   /* generic container (i.e. div) for floating buttons */
1234   overflow: hidden;
1235   width: 100%;
1236 }
1237
1238 #location .form-layout table,
1239 #location .form-layout td,
1240 #crm-container div#location table.form-layout table.inner-table td {
1241   border: 0;
1242   vertical-align: top;
1243   margin-bottom: -5px;
1244   width: auto;
1245 }
1246
1247 /* class for personal campaign info page */
1248 #crm-container table.campaign th,
1249 .crm-container table.campaign td,
1250 #crm-container table.campaign,
1251 #crm-container table.campaign table.form-layout td {
1252   font-size: 9pt;
1253   border: 0;
1254   width: auto;
1255   vertical-align: top;
1256 }
1257
1258 #crm-container table.campaign table {
1259   background: #F7F7F7;
1260 }
1261
1262 #crm-container div.remaining {
1263   background: url("../i/contribute/pcp_remain.gif");
1264 }
1265
1266 #crm-container div.achieved {
1267   background: url("../i/contribute/pcp_achieve.gif");
1268 }
1269
1270 #crm-container .honor_roll {
1271   margin: 1em 20px 0 0;
1272   padding: 10px;
1273   width: 120px;
1274   background-color: #fafafa;
1275   border: 1px solid #9d9fca;
1276   height: 220px;
1277   overflow: hidden;
1278 }
1279
1280 #crm-container .thermometer-wrapper,
1281 #crm-container .honor-roll-wrapper {
1282   float: left;
1283   width: 150px;
1284   margin-left: 1em;
1285 }
1286
1287 #crm-container .thermometer-fill-wrapper {
1288   background: transparent url("../i/contribute/pcp_remain.gif") repeat-y scroll left bottom;
1289   height: 220px;
1290   position: relative;
1291   margin: 1em 0 1.5em 0;
1292 }
1293
1294 #crm-container .thermometer-fill {
1295   background: transparent url(../i/contribute/pcp_achieve.gif) repeat-y scroll 0 bottom;
1296   bottom: 0;
1297   left: 0;
1298   position: absolute;
1299   width: 130px;
1300 }
1301
1302 #crm-container .thermometer-pointer {
1303   padding-left: 45px;
1304   /* width of thermometer + a little actual padding */
1305   position: absolute;
1306   top: -10px;
1307   /* vertically center text on percentage raised */
1308   line-height: 1em;
1309 }
1310
1311 #crm-container .pcp-intro-text {
1312   padding-bottom: 1em;
1313 }
1314
1315 #crm-container .pcp-image {
1316   float: left;
1317   margin: 0 1em 1em 0;
1318 }
1319
1320 #crm-container .pcp-image img {
1321   max-width: 360px;
1322 }
1323
1324 #crm-container .pcp-widgets {
1325   border: 1px solid #CCCCCC;
1326   float: right;
1327   margin: 0 0 1em 1em;
1328   padding: 0.5em;
1329 }
1330
1331 #crm-container .pcp_honor_roll_entry {
1332   margin-bottom: 1em;
1333 }
1334
1335 #crm-container .pcp-honor_roll-nickname {
1336   font-weight: bold;
1337 }
1338
1339 #crm-container .pcp-donate {
1340   height: 24px;
1341 }
1342 #crm-container a.pcp-contribute-button {
1343   font-weight: bold;
1344 }
1345
1346 #crm-container .pcp-create-your-own {
1347   clear: left;
1348   margin: 1em 0;
1349 }
1350
1351 #crm-container .pcp-page-text {
1352   margin-bottom: 1em;
1353 }
1354
1355 #crm-container table.nestedSelector {
1356   margin: 0;
1357   width: 100%;
1358   border-bottom: 0;
1359 }
1360
1361 #crm-container table.nestedSelector tr.columnheader th {
1362   border: 0;
1363 }
1364
1365 #crm-container table.caseSelector {
1366   vertical-align: top;
1367   border: 0;
1368   margin: 0.5em 0.1em;
1369 }
1370
1371 #crm-container table.caseSelector tr {
1372   border-bottom: 1px solid #999999;
1373 }
1374
1375 #crm-container table.caseSelector td {
1376   border-right: 0;
1377   padding: 4px;
1378 }
1379
1380 #crm-container table.nestedActivitySelector {
1381   margin: 0;
1382   width: 100%;
1383   border: 0;
1384   color: #333333;
1385 }
1386
1387 #crm-container table.nestedActivitySelector tr.columnheader th {
1388   color: #000000;
1389   background-color: #CFCEC3;
1390   border-top-color: #FFF;
1391   border-left-color: #FFFFFF;
1392   border-right-color: #FFFFFF;
1393   border-bottom-color: #999999;
1394 }
1395
1396 #crm-container table#activities-selector.nestedActivitySelector,
1397 #crm-container table#activities-selector.nestedActivitySelector td {
1398   border: 0;
1399 }
1400
1401 #crm-container table.nestedActivitySelector td {
1402   border-right: 0;
1403 }
1404
1405 #crm-container table#activities-selector.nestedActivitySelector tr.status-overdue {
1406
1407 }
1408
1409 #crm-container table.nestedActivitySelector tr.priority-urgent,
1410 #crm-container table.nestedActivitySelector tr a.priority-urgent {
1411   background-color: #FFDDDD;
1412 }
1413
1414 #crm-container table.nestedActivitySelector tr.priority-low,
1415 #crm-container table.nestedActivitySelector tr a.priority-low {
1416   background-color: #DDFFDD;
1417 }
1418
1419 #crm-container table.nestedActivitySelector tr.status-scheduled,
1420 #crm-container table.nestedActivitySelector tr a.status-scheduled {
1421   color: #006633;
1422 }
1423
1424 #crm-container table.nestedActivitySelector tr.status-completed,
1425 #crm-container table.nestedActivitySelector tr a.status-completed {
1426   color: #333333;
1427 }
1428
1429 #crm-container table.nestedActivitySelector tr.status-overdue,
1430 #crm-container table.nestedActivitySelector tr a.status-overdue {
1431   color: #FF0000;
1432 }
1433
1434 #crm-container table.nestedActivitySelector tr a.crm-activity-status {
1435   cursor: pointer;
1436 }
1437
1438 #crm-container #activities-selector tr:hover td,
1439 #crm-container #activities-selector tr:hover td.sorted,
1440 #crm-container #activities-selector tr.trOver td.sorted,
1441 #crm-container #activities-selector tr.trOver td {
1442   background: transparent;
1443 }
1444
1445 /* Styles for Actions Ribbon */
1446 #crm-container .crm-actions-ribbon {
1447   margin: 0 0 8px 0;
1448 }
1449
1450 #crm-container .crm-actions-ribbon ul {
1451   margin: 0;
1452   padding: 0;
1453 }
1454
1455 #crm-container .crm-actions-ribbon li {
1456   float: left;
1457   margin: 0 8px 0 0;
1458   padding: 0;
1459   list-style: none;
1460 }
1461
1462 #crm-container .crm-actions-ribbon li.crm-delete-action {
1463   margin-left: 30px;
1464 }
1465
1466 #crm-container .crm-actions-ribbon li.crm-previous-action,
1467 #crm-container .crm-actions-ribbon li.crm-next-action {
1468   float: right;
1469   margin: 0 0 0 8px;
1470 }
1471
1472 #crm-container .ac_results li {
1473   float: none;
1474   padding: 4px;
1475   margin: 0;
1476   line-height: 15px;
1477   white-space: initial;
1478 }
1479
1480 .crm-container .action-item-wrap {
1481   padding: 0 5px;
1482   border-left: 1px solid #CCC;
1483   white-space: normal;
1484 }
1485
1486 /* Hover-buttons */
1487 .crm-container span.crm-hover-button,
1488 .crm-container a.crm-hover-button {
1489   display: inline-block;
1490   white-space: nowrap;
1491   border: 1px solid transparent;
1492   border-radius: 4px;
1493   text-decoration: none;
1494   font-size: .9em;
1495   color: #000;
1496   padding: 1px 3px;
1497   opacity: .7;
1498   cursor: pointer;
1499 }
1500 .crm-container a.crm-hover-button.action-item,
1501 .crm-container .crm-hover-button.btn-slide {
1502   font-size: .95em;
1503   padding: 3px 5px;
1504   opacity: 1;
1505   color: #2786c2;
1506 }
1507 .crm-container .btn-slide .action-item {
1508   white-space: normal;
1509 }
1510 .crm-container .crm-accordion-header .crm-hover-button {
1511   opacity: 1;
1512   position: relative;
1513   top: -2px;
1514   color: inherit;
1515 }
1516 .crm-container .crm-hover-button:hover,
1517 .crm-container a.crm-hover-button:hover,
1518 .crm-container a.crm-hover-button:active {
1519   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #ccc));
1520   background-image: -webkit-linear-gradient(center bottom, #eee 0%, #ccc 100%);
1521   background-image: -moz-linear-gradient(center bottom, #eee 0%, #ccc 100%);
1522   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
1523   background-image: linear-gradient(top, #eee 0%, #ccc 100%);
1524   border: 1px solid #AAAAAA;
1525   opacity: 1;
1526   color: #2786C2;
1527 }
1528 .crm-container .crm-hover-button .icon {
1529   cursor: pointer;
1530   margin-left: 3px;
1531   position: relative;
1532   top: 2px;
1533 }
1534 .crm-container .crm-hover-button:hover .icon,
1535 .crm-container .crm-hover-button:active .icon {
1536   background-image: url("../i/icons/jquery-ui-2786C2.png");
1537 }
1538 .crm-container a.action-item {
1539   display: inline;
1540 }
1541
1542 /* theming for panel and context menus */
1543 .crm-container td ul.panel li {
1544   background-color: #2F2F2E;
1545 }
1546
1547 .crm-container .btn-slide .panel li a:hover,
1548 .crm-container .crm-participant-list-inner li a:hover,
1549 .crm-container .crm-event-links-list-inner li a:hover,
1550 .crm-container .crm-contribpage-links-list-inner li a:hover {
1551   color: #3e3e3e;
1552   background-color: #F5F6F1;
1553   text-decoration: none;
1554 }
1555
1556 .crm-container ul.panel {
1557   display: none;
1558   z-index: 9999;
1559   position: absolute;
1560   border-bottom: 0;
1561   background: transparent url(../i/dropdown-pointer.gif) no-repeat scroll 150px 1px;
1562   text-align: left;
1563   padding-top: 5px;
1564   margin: 0;
1565   width: 180px;
1566 }
1567
1568 .crm-container td ul.panel {
1569   top: 15px;
1570   right: 0;
1571 }
1572
1573 .crm-container td ul.panel li {
1574   margin: 0;
1575   padding: 2px;
1576   list-style: none;
1577   background-image: none;
1578   width: auto;
1579 }
1580
1581 .crm-container span.btn-slide {
1582   text-align: left;
1583   cursor: pointer;
1584   position: relative;
1585   white-space: nowrap;
1586   display: inline;
1587 }
1588 .crm-container .btn-slide:after {
1589   font-family: "FontAwesome";
1590   content: "\f0da";
1591   padding-left: .5ex;
1592 }
1593
1594 .crm-container .btn-slide-active .panel {
1595   z-index: 10;
1596 }
1597
1598 .crm-container .crm-event-participants,
1599 .crm-container .crm-event-links,
1600 .crm-container .crm-event-more {
1601   min-width: 85px;
1602   z-index: 1;
1603 }
1604
1605 .crm-container .btn-slide .panel li a {
1606   text-decoration: none;
1607   padding: 4px;
1608   display: block;
1609   cursor: pointer;
1610   color: #DFDFDF;
1611 }
1612
1613 /*class for CMS user name check used in profile*/
1614 .crm-container .cmsmessagebox {
1615   position: absolute;
1616   width: auto;
1617   margin-left: 10px;
1618   padding: 3px;
1619 }
1620
1621 .crm-container ul li.crm-tab-button {
1622   border-bottom: 0 none;
1623   float: left;
1624   margin: 0 0.2em 1px 0;
1625   padding: 0 0 1px;
1626   position: relative;
1627   top: 1px;
1628   white-space: nowrap;
1629 }
1630
1631 .crm-container .ui-tabs .ui-tabs-nav {
1632   padding: 4px;
1633 }
1634
1635 .crm-container .crm-tab-button a,
1636 .crm-container .ui-tabs .ui-tabs-nav li a,
1637 .crm-container .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a,
1638 .crm-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
1639   font-size: 0.9em;
1640 }
1641
1642 .crm-container li.crm-tab-button {
1643   margin: 0 2px 2px 0;
1644 }
1645
1646 .crm-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
1647   padding-bottom: 0;
1648   border: none;
1649 }
1650
1651 .crm-container .crm-tab-button a,
1652 .crm-container .ui-tabs .ui-tabs-nav li a {
1653   padding: 5px !important;
1654 }
1655
1656 .crm-container .crm-tab-button a em {
1657   color: #555555;
1658   font-style: normal;
1659 }
1660
1661 #crm-container div.ui-accordion-content {
1662   padding: .5em 1em !important;
1663 }
1664
1665 #crm-container .ui-tabs-panel {
1666   padding: 4px;
1667   min-height: 12em;
1668 }
1669
1670 #crm-container div.contact_details {
1671   padding: 4px;
1672   line-height: 1.4em;
1673   clear: both;
1674 }
1675
1676 .crm-container .crm-clearfix:after {
1677   clear: both;
1678   content: ".";
1679   display: block;
1680   height: 0;
1681   visibility: hidden;
1682 }
1683
1684 .crm-container div.crm-clear {
1685   clear: both;
1686   margin-bottom: 1px;
1687   background-color: #FAFAFA;
1688   font-size: 11px;
1689 }
1690
1691 /* reports */
1692
1693 #crm-container div.buttons {
1694   text-align: right;
1695   margin: 8px 0 0;
1696   padding: 4px 4px 2px 0;
1697   background-color: #fff;
1698   border: none;
1699 }
1700
1701 #crm-container div.buttons input,
1702 #crm-container div.buttons select {
1703   font-size: 0.9em;
1704   vertical-align: top !important;
1705 }
1706
1707 #crm-container div.buttons #actions {
1708   text-align: left;
1709   float: left;
1710 }
1711 #crm-container div.buttons ul#actions {
1712   list-style-type: none;
1713   padding-left: 0;
1714 }
1715 #crm-container div.buttons #actions li {
1716   float: left;
1717   padding: 0;
1718   margin: 0 5px 0 0;
1719 }
1720
1721 #crm-container div.crm-case-dashboard-buttons {
1722   height: 33px;
1723 }
1724
1725 #crm-container div.crm-case-dashboard-switch-view-buttons {
1726   float: right;
1727 }
1728
1729 .crm-container a.crm-event-feed-link {
1730   margin: 0 1ex;
1731   color: #52534D;
1732   display: inline-block;
1733   font-size: 10px;
1734   padding: 2px 2px 0;
1735   vertical-align: bottom;
1736 }
1737
1738 .crm-container a.crm-event-feed-link:hover {
1739   color: #2786c2;
1740 }
1741
1742 .crm-container table.criteria-group {
1743   margin-bottom: .1em;
1744 }
1745
1746 #crm-container .separator {
1747   border-bottom: solid 2px #ccc;
1748 }
1749
1750 #crm-container .report-layout {
1751   border: none;
1752 }
1753
1754 #crm-container .reports-header-right {
1755   text-align: right;
1756 }
1757
1758 #crm-container .report-contents {
1759   background-color: #F5F5F5;
1760   border: 1px solid #CDCDC3;
1761   padding: 4px;
1762   width: 20%;
1763   white-space: normal;
1764   font-size: 0.95em;
1765 }
1766
1767 #crm-container .report-contents-right {
1768   border: 1px solid #CDCDC3;
1769   padding: 4px;
1770   font-size: 0.95em;
1771   text-align: right;
1772 }
1773
1774 #crm-container table.report-layout td {
1775   padding: 4px;
1776   border-bottom: 1px solid #CDCDC3;
1777   vertical-align: top;
1778 }
1779
1780 #crm-container table.report-layout tr {
1781   font-size: 0.95em;
1782 }
1783
1784 #crm-container .report-label {
1785   text-align: right;
1786   font-weight: bold;
1787 }
1788
1789 #crm-container table.report-layout th.report-contents {
1790   background-color: #F5F5F5;
1791
1792 }
1793
1794 #crm-container table.report-layout th.statistics {
1795   width: 5%;
1796   white-space: nowrap;
1797 }
1798
1799 /*override default pager for report*/
1800 .crm-container .report-pager .crm-pager-nav a {
1801   color: #000000;
1802 }
1803
1804 #crm-container table.view-layout {
1805   margin: 0;
1806   border-collapse: collapse;
1807   border: 0 none;
1808 }
1809
1810 #crm-container table.view-layout .label {
1811   color: DimGray;
1812   font-size: 0.95em;
1813   vertical-align: top;
1814   font-weight: bold;
1815   margin-right: 10px;
1816   background-color: #EEEEEE;
1817   width: 20%;
1818 }
1819
1820 #crm-container th.contriTotalRight {
1821   border-right: 1px solid #999999;
1822 }
1823
1824 #crm-container th.contriTotalLeft {
1825   border-left: 1px solid #999999;
1826 }
1827
1828 /* TimeEntry styles */
1829 .crm-container .timeEntry_control {
1830   vertical-align: middle;
1831   margin-left: 2px;
1832 }
1833 * html .timeEntry_control {
1834   /* IE only */
1835   margin-top: -4px;
1836 }
1837
1838 .crm-container .ui-datepicker {
1839   width: 17em;
1840   padding: .2em .2em 0;
1841   z-index: 9999 !important;
1842 }
1843
1844 /* Set/alter ICONS */
1845
1846 #crm-container .order-icon {
1847   height: 15px;
1848   width: 10px;
1849   padding-top: 4px;
1850   padding-right: 4px;
1851 }
1852
1853 /* crm button style */
1854
1855 .crm-container .crm-submit-buttons,
1856 .crm-container .action-link {
1857   height: 27px;
1858   margin: 4px 0 4px 2px;
1859 }
1860
1861 .crm-container .register_link-top {
1862   float: right;
1863   margin-left: 8px;
1864 }
1865
1866 .crm-container .crm-clear-link {
1867   margin-left: .5em;
1868 }
1869
1870 .crm-container .crm-button-type-cancel,
1871 .crm-container .crm-button-type-back {
1872   margin-left: 20px;
1873 }
1874
1875 /* Reset WP backend min-height for buttons */
1876
1877 .wp-core-ui .crm-container .button {
1878   min-height: 0;
1879 }
1880
1881 .crm-container a.button,
1882 .crm-container a.button:link,
1883 .crm-container a.button:visited,
1884 .crm-container .ui-dialog-buttonset .ui-button,
1885 .crm-container .crm-button {
1886   text-shadow: 0 1px 0 black;
1887   background: #696969;
1888   color: #FFF;
1889   font-size: 13px;
1890   font-weight: normal;
1891   margin: 0 6px 0 0;
1892   padding: 2px 6px;
1893   text-decoration: none;
1894   cursor: pointer;
1895   border: 1px solid #3e3e3e;
1896   display: block;
1897   float: left;
1898   overflow: hidden;
1899   line-height: 135%;
1900   border-radius: 3px;
1901 }
1902
1903 .crm-container .crm-button:hover,
1904 .crm-container .crm-button:focus,
1905 .crm-container .ui-dialog-buttonset .ui-button:hover,
1906 .crm-container .ui-dialog-buttonset .ui-button:focus,
1907 .crm-container a.button:hover,
1908 .crm-container a.button:focus {
1909   background: #3e3e3e;
1910 }
1911
1912 .crm-container .crm-button-disabled,
1913 .crm-container .crm-button.crm-button-disabled,
1914 .crm-container .ui-dialog-buttonset .ui-button[disabled],
1915 .crm-container .crm-button[disabled] {
1916   opacity: .6;
1917   cursor: default;
1918 }
1919
1920 .crm-container .ui-dialog-buttonpane {
1921   background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 35%);
1922 }
1923
1924 .crm-container .ui-dialog-buttonset .ui-button .ui-icon {
1925   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
1926 }
1927
1928 /* Override of a line in crm-i.css that may not be important anymore */
1929 .crm-container .ui-dialog-buttonset .ui-button .ui-icon[class*=" fa-"] {
1930   margin-top: 0;
1931 }
1932
1933 /* No crm-button styling for PayPal Express buttons */
1934 .crm-container input#_qf_Register_upload_express,
1935 .crm-container input#_qf_Payment_upload_express,
1936 .crm-container input#_qf_Main_upload_express {
1937   background: none;
1938   margin: 0;
1939   padding: 0;
1940   border: none;
1941 }
1942
1943 /* create new XXX style (drupal block) */
1944
1945 #crm-participant-wrapper,
1946 #crm-event-links-wrapper,
1947 #crm-contribpage-links-wrapper,
1948 #crm-create-new-wrapper {
1949   position: relative;
1950   float: left;
1951 }
1952
1953 #crm-event-links-list,
1954 #crm-contribpage-links-list,
1955 #crm-create-new-list,
1956 #crm-contact-actions-list,
1957 #crm-participant-list {
1958   position: absolute;
1959   display: none;
1960   top: 24px;
1961   width: 220px;
1962   left: 0;
1963   z-index: 15;
1964 }
1965
1966 #crm-create-new-list {
1967   width: 160px;
1968 }
1969
1970 #crm-event-links-list .crm-event-info ul,
1971 #crm-event-links-list .crm-event-test ul,
1972 #crm-event-links-list .crm-event-live ul,
1973 #crm-contribpage-links-list .crm-contribpage-contribution ul,
1974 #crm-contribpage-links-list .crm-contribpage-test ul,
1975 #crm-contribpage-links-list .crm-contribpage-live ul,
1976 #crm-participant-list .crm-participant-counted ul,
1977 #crm-participant-list .crm-participant-not-counted ul,
1978 #crm-participant-list .crm-participant-listing ul,
1979 #crm-create-new-list ul {
1980   width: auto;
1981   margin: 0;
1982   padding: 0;
1983 }
1984
1985 /* setup for icons */
1986
1987 .ac_results ul li {
1988   background-image: url('');
1989 }
1990
1991 .crm-container .ui-icon,
1992 .crm-container .icon {
1993   background-image: url("../i/icons/jquery-ui-52534D.png")
1994 }
1995
1996 .crm-container .icon {
1997   height: 16px;
1998   width: 16px;
1999   float: left;
2000   text-indent: -10000px;
2001 }
2002
2003 .crm-container span.icon,
2004 .crm-container a.ui-icon {
2005   float: none;
2006   display: inline-block;
2007 }
2008
2009 .crm-container .button .icon,
2010 .crm-container a.invoiceButton .icon,
2011 .crm-container .crm-button .icon,
2012 .crm-accordion-header .icon {
2013   position: relative;
2014   top: -2px;
2015   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
2016 }
2017
2018 .crm-container span.crm-button .icon {
2019   margin-top: 3px;
2020 }
2021
2022 .crm-container .button .icon {
2023   float: left;
2024   display: block;
2025   margin-right: 3px;
2026   top: -1px;
2027 }
2028
2029 .crm-container .button .icon.css_right {
2030   float: right;
2031   margin-right: 0;
2032   margin-left: 3px;
2033 }
2034
2035 .crm-container .delete-icon {
2036   background-position: -176px -96px;
2037 }
2038 .crm-container .red-icon,
2039 .crm-container a:hover .icon.delete-icon,
2040 .crm-container .crm-button:hover .icon.ui-icon-trash,
2041 .crm-container .crm-hover-button:hover .icon.ui-icon-trash,
2042 .crm-container span:hover > .icon.delete-icon {
2043   background-image: url("../i/icons/jquery-ui-8A1F11.png");
2044 }
2045
2046 /* Font Awesome */
2047
2048 .crm-container a .crm-i,
2049 .crm-container a:link .crm-i,
2050 .crm-container a:visited .crm-i,
2051 .crm-container a:active .crm-i,
2052 .crm-container a:hover .crm-i,
2053 .crm-container a .ui-icon[class*=" fa-"],
2054 .crm-container a:link .ui-icon[class*=" fa-"],
2055 .crm-container a:visited .ui-icon[class*=" fa-"],
2056 .crm-container a:active .ui-icon[class*=" fa-"],
2057 .crm-container a:hover .ui-icon[class*=" fa-"] {
2058   color: inherit;
2059 }
2060
2061 a.crm-i:hover {
2062   text-decoration: none;
2063 }
2064
2065 .crm-container a:hover .crm-i.fa-trash,
2066 .crm-container .crm-button:hover .crm-i.fa-trash,
2067 .crm-container .crm-hover-button:hover .crm-i.fa-trash,
2068 .crm-container span:hover > .crm-i.fa-trash,
2069 .crm-i.crm-i-red {
2070   color: #8A1F11;
2071 }
2072
2073 .crm-i.crm-i-blue {
2074   color: #6177D5;
2075 }
2076
2077 .crm-i.crm-i-green {
2078   color: #86c661;
2079 }
2080
2081 .crm-container a.helpicon {
2082   opacity: .8;
2083 }
2084
2085 .crm-container  a.helpicon:hover,
2086 .crm-container  a.helpicon:focus {
2087   opacity: 1;
2088 }
2089
2090 /* Same as fa-question-circle */
2091 .crm-container a.helpicon:before {
2092   content: "\f059";
2093 }
2094
2095 div.crm-accordion-header a.helpicon {
2096   color: inherit;
2097 }
2098 div.crm-master-accordion-header a.helpicon {
2099   color: #2786c2;
2100 }
2101
2102 /* These .crm-icon classes use item_sprites.png */
2103
2104 .crm-container .crm-icon {
2105   background-image: url('../i/item_sprites.png');
2106   margin: 2px 4px 0 0;
2107   text-indent: -10000px;
2108   /* for accessibility reason, put the name of the type/subtype in the icon div (it will be hidden and replaced by the icon) */
2109 }
2110
2111 .select2-results .select2-highlighted .Individual-icon,
2112 .crm-container .Individual-icon {
2113   background-position: 0 0;
2114 }
2115 .select2-results .select2-highlighted .Organization-icon,
2116 .crm-container .Organization-icon {
2117   background-position: -48px 0;
2118 }
2119 .select2-results .select2-highlighted .Household-icon,
2120 .crm-container .Household-icon {
2121   background-position: -32px 0;
2122 }
2123 .crm-container .Group-icon {
2124   background-position: -16px 0;
2125 }
2126 .select2-results .Individual-icon,
2127 .crm-container .Individual-subtype-icon {
2128   background-position: 0 -48px;
2129 }
2130 .select2-results .Household-icon,
2131 .crm-container .Household-subtype-icon {
2132   background-position: -32px -48px;
2133 }
2134 .select2-results .Organization-icon,
2135 .crm-container .Organization-subtype-icon {
2136   background-position: -48px -48px;
2137 }
2138
2139 .crm-container .Activity-icon {
2140   background-position: -64px 0;
2141 }
2142 .crm-container .Case-icon {
2143   background-position: -80px 0;
2144 }
2145 .crm-container .Grant-icon {
2146   background-position: 0 -16px;
2147 }
2148 .crm-container .Contribution-icon {
2149   background-position: -16px -16px;
2150 }
2151 .crm-container .Pledge-icon {
2152   background-position: -16px -16px;
2153 }
2154 .crm-container .Membership-icon {
2155   background-position: -32px -16px;
2156 }
2157 .crm-container .Participant-icon {
2158   background-position: 0 -32px;
2159 }
2160 .crm-container .Note-icon {
2161   background-position: -16px -32px;
2162 }
2163 .crm-container .Relationship-icon {
2164   background-position: -32px -32px;
2165 }
2166
2167 /* accordion styles */
2168
2169 .crm-container .crm-accordion-header,
2170 .crm-container .crm-collapsible .collapsible-title,
2171 .crm-container span.collapsed,
2172 .crm-container a.collapsed,
2173 .crm-container .crm-expand-row {
2174   cursor: pointer;
2175 }
2176
2177 .crm-container .crm-accordion-wrapper {
2178   margin-bottom: 4px;
2179 }
2180
2181 /* Specific types of headers */
2182
2183 #crm-container .widget-content .crm-accordion-header {
2184   background-color: #EFEFE5;
2185   color: #080808;
2186 }
2187
2188 .crm-container a.crm-expand-row:before,
2189 .crm-container a.crm-expand-row:link::before,
2190 .crm-container a.crm-expand-row:visited::before {
2191   color: #3E3E3E;
2192 }
2193
2194 .crm-container .crm-accordion-header {
2195   color: #F5F6F1;
2196   font-weight: normal;
2197   padding: 4px 8px;
2198   background-color: #5D677B;
2199   border-radius: 4px 4px 0 0;
2200 }
2201
2202 .crm-container .collapsed .crm-accordion-header {
2203   border-radius: 4px;
2204 }
2205
2206 .crm-container .crm-accordion-header.active {
2207   font-weight: bold;
2208   background-color: #3E3E3E;
2209 }
2210
2211 .crm-container .crm-accordion-header:hover {
2212   background-color: #2F2F2E;
2213 }
2214
2215 #crm-container .widget-content .crm-accordion-header:hover {
2216   background-color: #e8e8de;
2217 }
2218
2219 .crm-container .crm-accordion-wrapper .crm-master-accordion-header {
2220   background-color: transparent;
2221   color: #3E3E3E;
2222 }
2223
2224 .crm-container .crm-accordion-wrapper .crm-master-accordion-header {
2225   font-size: 16px;
2226 }
2227
2228 .crm-container .crm-master-accordion-header.crm-accordion-header:hover,
2229 .crm-container .crm-collapsible .collapsible-title:hover {
2230   color: #121A2D;
2231 }
2232
2233 .crm-container .collapsed .crm-accordion-body,
2234 .crm-container .crm-collapsible.collapsed .collapsible-title + * {
2235   display: none;
2236 }
2237
2238 /* Collapse icon */
2239
2240 /* General icon settings for all collapsible things */
2241 .crm-container .crm-accordion-header:before,
2242 .crm-container .crm-collapsible .collapsible-title:before,
2243 .crm-container span.collapsed:before,
2244 .crm-container a.collapsed:before,
2245 .crm-container .crm-expand-row:before {
2246   font-family: "FontAwesome";
2247   display: inline-block;
2248   width: 1em;
2249   content: "\f0da";
2250   font-size: 13px;
2251 }
2252
2253 /* Collapsed icon */
2254 .crm-container .collapsed .crm-accordion-header:before,
2255 .crm-container .crm-collapsible.collapsed .collapsible-title:before,
2256 .crm-container span.collapsed:before,
2257 .crm-container a.collapsed:before,
2258 .crm-container .crm-expand-row:before {
2259   content: "\f0da";
2260 }
2261
2262 /* Expanded icon */
2263 .crm-container .crm-accordion-header:before,
2264 .crm-container .crm-collapsible .collapsible-title:before,
2265 .crm-container span.expanded:before,
2266 .crm-container a.expanded:before,
2267 .crm-container .crm-expand-row.expanded:before {
2268   font-family: "FontAwesome";
2269   content: "\f0d7";
2270 }
2271
2272 /* Accordion bodies */
2273
2274 .crm-container .crm-accordion-body {
2275   border-radius: 0 0 4px 4px;
2276   border: 1px solid #70716B;
2277   border-top: 0;
2278   padding: 4px 0;
2279 }
2280
2281 #crm-container .widget-content .crm-accordion-body {
2282   border-color: #e8e8de;
2283 }
2284
2285 .crm-container .crm-master-accordion-header+.crm-accordion-body {
2286   border: none;
2287   padding: 0;
2288 }
2289
2290 #crm-container .widget-content .crm-accordion-body,
2291 .crm-container .crm-accordion-body.padded {
2292   padding-left: .5em;
2293   padding-right: .5em;
2294 }
2295
2296 .crm-container .crm-child-row > td {
2297   padding-left: 1.8em;
2298 }
2299
2300 /* Status message box */
2301 .crm-status-box-outer {
2302   position: fixed;
2303   z-index: 99999;
2304   right: 0;
2305   top: 0;
2306 }
2307
2308 .crm-status-box-outer.status-start {
2309   background: #F8FF03 url("../i/animated-overlay.gif");
2310 }
2311
2312 .crm-status-box-outer .crm-status-box-inner {
2313   padding: 3px 14px;
2314   font-size: 13px !important;
2315   color: #eee;
2316   font-weight: bold;
2317   text-align: center;
2318   background: rgba(94, 91, 31, 0.9);
2319 }
2320
2321 .crm-status-box-outer.status-success .crm-status-box-inner {
2322   background: rgba(30, 143, 36, 0.7);
2323 }
2324
2325 .crm-status-box-outer.status-error .crm-status-box-inner {
2326   background: rgba(255, 7, 0, 0.7);
2327 }
2328
2329 .crm-container .crm-summary-link {
2330   position: relative;
2331   z-index: 16;
2332 }
2333
2334 .crm-container .crm-tooltip-wrapper {
2335   position: absolute;
2336   bottom: 0;
2337   left: -36px;
2338   overflow: hidden;
2339   z-index: 1000;
2340   padding-bottom: 10px;
2341   background: transparent url('../i/overlay-pointer.png') no-repeat bottom left;
2342   font-size: 13px;
2343   display: none;
2344 }
2345
2346 .crm-container .crm-tooltip-down .crm-tooltip-wrapper {
2347   top: 20px;
2348   padding-top: 10px;
2349   background: transparent url('../i/overlay-pointer.png') no-repeat top left;
2350   overflow: visible;
2351 }
2352
2353 .crm-container .crm-tooltip-active {
2354   z-index: 20;
2355 }
2356
2357 .crm-container .crm-tooltip-active .crm-tooltip-wrapper {
2358   display: block;
2359 }
2360
2361 .crm-container .crm-tooltip {
2362   padding: 4px;
2363   background-color: #2f2f2e;
2364   color: #FFF;
2365   margin-left: 11px;
2366   min-width: 20px;
2367   min-height: 20px;
2368 }
2369 #crm-container .crm-tooltip table,
2370 #crm-container .crm-tooltip table tr td {
2371   background-color: #2f2f2e;
2372   border: none;
2373   color: #FFF;
2374   word-wrap: break-word;
2375 }
2376 .crm-container .crm-tooltip .crm-summary-group {
2377   width: 700px;
2378   margin-bottom: 0;
2379 }
2380
2381 .crm-container .crm-tooltip .crm-report-overlay {
2382   width: 500px;
2383   margin-bottom: 0;
2384 }
2385
2386 .crm-container .crm-tooltip .crm-report-overlay thead td {
2387   font-weight: bold;
2388 }
2389
2390 .crm-container .crm-summary-group h2 {
2391   padding: 2px 4px 0 4px;
2392   font-size: 14px;
2393   color: #FFF;
2394   margin-bottom: 0;
2395 }
2396
2397 /* crm-summary-group appears outside crm-container for contact summary icon overlay */
2398 .crm-container .crm-summary-group .crm-section .label {
2399   text-align: left;
2400   width: 40%;
2401   font-size: 11px;
2402   color: #A7A7A7;
2403   background-color: transparent;
2404 }
2405
2406 .crm-container .crm-summary-group .crm-section .content {
2407   margin-left: 41%;
2408 }
2409
2410 .crm-container .crm-tooltip table .crm-summary-col-1 {
2411   width: 350px;
2412 }
2413
2414 .crm-container .crm-tooltip table .crm-summary-col-1 div {
2415   width: auto;
2416 }
2417
2418 /* Class for tokens and helpicon */
2419 .crm-container .helpIcon {
2420   float: right;
2421   position: relative;
2422   z-index: 1;
2423   margin-right: 45px;
2424 }
2425
2426 #crm-container ul li {
2427   list-style-image: none;
2428 }
2429
2430 /* privacy icons */
2431 #crm-container div span.privacy-flag {
2432   float: right;
2433   font-size: 80%;
2434 }
2435
2436 /* specific, targeted fixes */
2437 #crm-container .dashboard-elements,
2438 #crm-container #membership-listings,
2439 #crm-container #premiums-listings,
2440 #crm-container #searchForm table {
2441   margin: 0;
2442   border-collapse: collapse;
2443   border: 0 none;
2444 }
2445
2446 /* ID selector is needed to override Drupal 2em margin-bottom on forms (we don't want to give up that space) */
2447 div#crm-container form,
2448 div.crm-container form {
2449   margin-bottom: 0;
2450 }
2451
2452 /** DATATABLES **/
2453 /*
2454  * jQuery UI specific styling
2455  */
2456
2457 .crm-container .paging_two_button .ui-button {
2458   float: left;
2459   cursor: pointer;
2460 }
2461
2462 .crm-container .paging_full_numbers .ui-button {
2463   padding: 2px 6px;
2464   margin: 0;
2465   cursor: pointer;
2466 }
2467
2468 .crm-container .dataTables_paginate .ui-button {
2469   margin-right: -0.1em !important;
2470 }
2471
2472 .crm-container .paging_full_numbers {
2473   width: 350px !important;
2474 }
2475
2476 .crm-container .dataTables_wrapper .ui-toolbar {
2477   padding: 5px;
2478 }
2479
2480 .crm-container .dataTables_paginate {
2481   width: auto;
2482 }
2483
2484 .crm-container .dataTables_info {
2485   padding-top: 3px;
2486 }
2487
2488 .crm-container div.dataTables_wrapper .ui-widget-header {
2489   font-weight: normal;
2490 }
2491
2492
2493 /*
2494  * Sort arrow icon positioning
2495  */
2496 .crm-container table.display thead th div.DataTables_sort_wrapper {
2497   position: relative;
2498   padding-right: 20px;
2499 }
2500
2501 .crm-container table.display thead th div.DataTables_sort_wrapper span {
2502   position: absolute;
2503   top: 50%;
2504   margin-top: -8px;
2505   right: 0;
2506 }
2507
2508 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2509  * DataTables features
2510  */
2511
2512 .crm-container .dataTables_wrapper {
2513   position: relative;
2514   clear: both;
2515   zoom: 1; /* Feeling sorry for IE */
2516 }
2517
2518 .crm-container .dataTables_processing {
2519   position: absolute;
2520   top: 0;
2521   left: 0;
2522   width: 100%;
2523   height: 100%;
2524   margin: 0;
2525   padding: 0;
2526   background: url("../i/loading-overlay.gif") center center no-repeat white;
2527   opacity: 0.6;
2528   cursor: wait;
2529 }
2530
2531 .crm-container .dataTables_length {
2532   width: 40%;
2533   float: none;
2534   padding-bottom: 5px;
2535 }
2536
2537 .crm-container .dataTables_filter {
2538   width: 50%;
2539   float: right;
2540   text-align: right;
2541 }
2542
2543 .crm-container .dataTables_info {
2544   width: 60%;
2545   float: left;
2546 }
2547
2548 .crm-container .dataTables_paginate {
2549   float: right;
2550   text-align: right;
2551 }
2552
2553
2554 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2555  * DataTables display
2556  */
2557 .crm-container table.display {
2558   margin: 0 auto;
2559   clear: both;
2560   width: 100%;
2561 }
2562
2563 .crm-container table.display thead th {
2564   padding: 3px 18px 3px 10px;
2565   border-bottom: 1px solid black;
2566   font-weight: bold;
2567   cursor: pointer;
2568 }
2569
2570 .crm-container table.display thead th.sorting_disabled {
2571   cursor: default;
2572 }
2573
2574 .crm-container table.display tfoot th {
2575   padding: 3px 18px 3px 10px;
2576   border-top: 1px solid black;
2577   font-weight: bold;
2578 }
2579
2580 .crm-container table.display tr.heading2 td {
2581   border-bottom: 1px solid #aaa;
2582 }
2583
2584 .crm-container table.display td {
2585   padding: 3px 10px;
2586 }
2587
2588 .crm-container table td.center {
2589   text-align: center;
2590 }
2591 /* Fix weird color added to some datatables' sort column */
2592 .crm-container table.dataTable.display tbody tr > td.sorting_1 {
2593   background-color: transparent;
2594 }
2595
2596 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2597  * Datatables misc
2598  */
2599 .crm-container .dataTables_scroll {
2600   clear: both;
2601 }
2602
2603 .crm-container .dataTables_scrollBody {
2604   *margin-top: -1px;
2605   -webkit-overflow-scrolling: touch;
2606 }
2607
2608 .crm-container .top .dataTables_info {
2609   float: none;
2610 }
2611
2612 .crm-container .dataTables_empty {
2613   text-align: center;
2614 }
2615
2616 .crm-container tfoot input {
2617   margin: 0.5em 0;
2618   width: 100%;
2619   color: #444;
2620 }
2621
2622 /*  DataTables fixes */
2623 .crm-container .crm-datatable-pager-top {
2624   padding-top: 5px;
2625   padding-bottom: 25px;
2626 }
2627 .crm-container .crm-datatable-pager-bottom {
2628   padding-top: 10px;
2629   padding-bottom: 25px;
2630 }
2631 .crm-container .crm-datatable-pager-top .dataTables_length {
2632   float: left;
2633 }
2634 .crm-container .css_right {
2635   float: right;
2636 }
2637
2638 /* Date plugin */
2639 .crm-container input.dateplugin,
2640 .crm-container input.crm-form-date {
2641   width: 9em;
2642 }
2643
2644 .crm-container input.crm-placeholder-icon::placeholder {
2645   font-family: "FontAwesome";
2646   text-align: right;
2647 }
2648 .crm-container input.crm-placeholder-icon::-ms-input-placeholder {
2649   font-family: "FontAwesome";
2650   text-align: right;
2651 }
2652 .crm-container input.crm-placeholder-icon:-ms-input-placeholder {
2653   font-family: "FontAwesome";
2654   text-align: right;
2655 }
2656
2657 .crm-container div.batch-update {
2658   overflow: visible;
2659 }
2660
2661 /*chart */
2662 #chartData {
2663   overflow: auto;
2664 }
2665
2666 #crm-container .signature {
2667   width: 495px;
2668 }
2669
2670 /* editor skin tweaks */
2671
2672 #crm-container span.cke_skin_kama {
2673   border: none;
2674 }
2675 #crm-container .cke_skin_kama .cke_wrapper {
2676   background-image: none;
2677 }
2678
2679 /* skin */
2680
2681 #crm-container .crm-title {
2682   line-height: 1.1;
2683   margin-bottom: 8px;
2684 }
2685
2686 /* tables */
2687 .crm-container table {
2688   border: 1px solid #efefef;
2689 }
2690
2691 .crm-container .crm-form-block table {
2692   border: none;
2693 }
2694 .crm-container tr.even,
2695 .crm-container tr.odd,
2696 .crm-container tbody th {
2697   border-color: #FFF #FFF #efefef #FFF;
2698 }
2699
2700 .crm-container tr.even-row td,
2701 .crm-container tr.odd-row td,
2702 .crm-container table.display td,
2703 .crm-container table.pagerDisplay td {
2704   border-color: #efefef;
2705   border-right: 1px solid #efefef;
2706   border-collapse: collapse;
2707 }
2708 .crm-container .odd-row,
2709 .crm-container .odd,
2710 tbody.scrollContent {
2711   background-color: #FAFAFA;
2712 }
2713 .crm-container .even-row,
2714 .crm-container .even,
2715 tbody.scrollContent tr.alternateRow {
2716   background-color: #EFEFEF;
2717 }
2718
2719 .crm-container td.checkbox {
2720   vertical-align: middle;
2721   text-align: center;
2722 }
2723 .crm-container tr.columnheader a.sorting {
2724   color: #a7a7a7;
2725 }
2726
2727 .crm-container a.sorting,
2728 .crm-container a.sorting_desc,
2729 .crm-container a.sorting_asc {
2730   color: #A7A7A7;
2731   background: url("../bower_components/datatables/media/images/sort_both.png") no-repeat left center;
2732   padding-left: 20px;
2733 }
2734 .crm-container a.sorting_desc,
2735 .crm-container a.sorting_asc {
2736   color: #000;
2737 }
2738
2739 .crm-container tr a.sorting,
2740 .crm-container tr a.sorting_asc,
2741 .crm-container tr a.sorting_desc {
2742   color: #52534D;
2743 }
2744
2745 .crm-container table thead a.sorting_asc {
2746   background: url("../bower_components/datatables/media/images/sort_asc.png") no-repeat left center;
2747 }
2748 .crm-container table thead a.sorting_desc {
2749   background: url("../bower_components/datatables/media/images/sort_desc.png") no-repeat left center;
2750 }
2751 .crm-container table thead a.sorting_asc_disabled {
2752   background: url("../bower_components/datatables/media/images/sort_asc_disabled.png") no-repeat left center;
2753 }
2754 .crm-container table thead a.sorting_desc_disabled {
2755   background: url("../bower_components/datatables/media/images/sort_desc_disabled.png") no-repeat left center;
2756 }
2757
2758 /* Otherwise for some reason we have 2 sort icons */
2759 .crm-container th.sorting .DataTables_sort_icon {
2760   display: none;
2761 }
2762
2763
2764 /*contact summary page */
2765 #crm-container div.contact_details {
2766   background-color: transparent;
2767 }
2768
2769 .crm-container table.crm-info-panel td {
2770   border-bottom: 1px solid #FFF;
2771 }
2772
2773 .crm-container table.crm-info-panel .label {
2774   color: #2f2f2f;
2775   font-weight: normal;
2776 }
2777
2778 .crm-container .disabled,
2779 .crm-container .disabled td,
2780 .crm-container .cancelled,
2781 .crm-container .cancelled td,
2782 .crm-container li.disabled a.ui-tabs-anchor,
2783 .crm-container li.crm-count-0 a.ui-tabs-anchor,
2784 .crm-container li.crm-count-0 a.ui-tabs-anchor em {
2785   color: #999999 !important;
2786 }
2787
2788 #crm-container tr.crm-job {
2789   text-decoration: none !important;
2790 }
2791
2792 .crm-container table.selector td {
2793   border-right: 1px dotted #DDDDDD;
2794 }
2795
2796 .crm-container div.contact_panel td,
2797 .crm-container table.crm-info-panel td {
2798   background-color: #f4f4ed;
2799 }
2800
2801 .crm-container div.contact_panel td.label,
2802 .crm-container #customFields div.contact_panel td.label,
2803 .crm-container table.crm-info-panel td.label {
2804   background-color: #fafafa;
2805   width: 120px;
2806   text-align: left;
2807   color: #7a7a60;
2808 }
2809 .crm-container table.crm-info-panel td.label {
2810   width: 150px;
2811 }
2812
2813 .crm-container .form-layout td.label,
2814 .crm-container .form-layout-compressed td.label {
2815   width: 150px;
2816   text-align: right;
2817   color: #7a7a60;
2818 }
2819
2820 .crm-container .form-layout td.label,
2821 .crm-container form table.report .label,
2822 .crm-container form table label,
2823 .crm-container form table.report label {
2824   color: #3e3e3e;
2825 }
2826
2827 .crm-container a.crm-icon-picker-button {
2828   min-width: 10em;
2829   text-align: inherit;
2830   color: #3e3e3e;
2831 }
2832
2833 .crm-container a.crm-icon-picker-button .ui-button-icon {
2834   margin: 5px 0 5px 5px;
2835 }
2836
2837 .crm-container a.crm-icon-picker-button .ui-button-text {
2838   color: #9f9f9f;
2839 }
2840
2841 .crm-container a.crm-icon-picker-button.ui-button-text-only .ui-button-text {
2842   padding: .4em .2em;
2843 }
2844
2845 /* search results */
2846 .crm-container .crm-search-tasks,
2847 .crm-container .crm-tasks {
2848   background-color: #F0F0E8;
2849   color: #52534D;
2850 }
2851
2852 #crm-container .crm-tasks table {
2853   margin: 0;
2854 }
2855
2856 .crm-container .crm-results-block {
2857   position: relative;
2858 }
2859
2860 /* warning labels and messages */
2861 .crm-container del,
2862 .crm-container .crm-is_deleted,
2863 .crm-container table.caseSelector td.status-urgent,
2864 .crm-container .font-red,
2865 .crm-container .status-removed,
2866 .crm-container .status-overdue,
2867 .crm-container .status-fatal,
2868 .crm-container .status-hold,
2869 .crm-container .status-past,
2870 .crm-contact-deceased,
2871 .crm-container .status-warning {
2872   color: #E43D2B !important;
2873 }
2874
2875 /* rounded corners */
2876 .crm-container div.status,
2877 .crm-container #help,
2878 .crm-container .help,
2879 .crm-container .ui-tabs-panel,
2880 .crm-container .crm-content-block,
2881 #full-screen-header,
2882 .crm-container .crm-pager,
2883 .crm-container form .section-hidden-border,
2884 .crm-container #search-status,
2885 .crm-container .crm-form-block,
2886 .crm-container .crm-search-tasks,
2887 .crm-container .crm-tasks,
2888 .crm-container div.form-item,
2889 .crm-container div.messages {
2890   border-radius: 4px;
2891 }
2892
2893 /* deprecated autocomplete styles */
2894
2895 .ac_results {
2896   background: transparent url(../i/dropdown-pointer.gif) no-repeat 25px 1px;
2897   padding-top: 5px;
2898   border: none;
2899   text-align: left;
2900 }
2901
2902 .ac_results-inner,
2903 .crm-participant-list-inner,
2904 .crm-event-links-list-inner,
2905 .crm-contribpage-links-list-inner,
2906 .crm-contact-actions-list-inner {
2907   background-color: #2f2f2e;
2908   padding: 4px;
2909 }
2910
2911 .crm-create-new-list-inner, .crm-create-new-list-inner ul {
2912   width: 160px!important;
2913 }
2914
2915 .ac_results li a {
2916   display: block;
2917 }
2918
2919 .crm-container .ac_results li,
2920 .crm-container .ac_results li a,
2921 .crm-container .ac_results li a:visited {
2922   color: #DFDFDF;
2923   text-decoration: none;
2924 }
2925
2926 .ac_results li strong {
2927   color: #FFF;
2928   font-weight: normal;
2929 }
2930
2931 .crm-container .ac_results li .icon,
2932 .crm-container .ac_results li a .icon,
2933 .crm-container .ac_results li a:visited .icon {
2934   background-image: url(../i/icons/jquery-ui-FFFFFF.png);
2935 }
2936
2937 .crm-container .ac_results li a:hover .icon {
2938   background-image: url(../i/icons/jquery-ui-3E3E3E.png);
2939 }
2940
2941 .ac_results li:hover,
2942 .ac_results li:hover a,
2943 .ac_results li a:hover {
2944   background-color: #F5F6F1;
2945   color: #666;
2946 }
2947 .crm-container .ac_results li:hover strong {
2948   color: #000;
2949 }
2950
2951 /* loader autocomplete */
2952
2953 .crm-container .ui-autocomplete-loading {
2954   background: white url('../i/loading.gif') no-repeat right center;
2955 }
2956
2957 /* select2 */
2958 .crm-container div.select2-container {
2959   min-width: 6em;
2960   font-size: 11px;
2961 }
2962 /* Add arrow icon to multi-selects */
2963 .crm-container .select2-container-multi .select2-choices:before {
2964   background: url("../bower_components/select2/select2.png") no-repeat scroll 0 -4px;
2965   content: "";
2966   display: block;
2967   height: 15px;
2968   position: absolute;
2969   right: 0;
2970   top: 5px;
2971   width: 20px;
2972 }
2973 /* Add search icon to ajax multi-selects and opened multi-selects */
2974 .crm-container .select2-container-multi.select2-container-active .select2-choices:before,
2975 .crm-container .select2-container-multi.crm-ajax-select .select2-choices:before {
2976   background-position: right -26px;
2977 }
2978 .crm-container .select2-container.select2-container-disabled .select2-choice .select2-arrow b {
2979   visibility: hidden;
2980 }
2981 .crm-container .select2-container-multi.loading .select2-choices:before,
2982 .crm-container .select2-container.loading .select2-choice .select2-arrow b {
2983   background: url('../i/loading.gif') no-repeat center center !important;
2984   visibility: visible;
2985 }
2986 /* Reduce select2 size to match other inputs */
2987 .crm-container .select2-container-multi .select2-choices {
2988   min-height: 25px;
2989 }
2990 .crm-container .select2-container-multi .select2-choices .select2-search-choice {
2991   padding: 2px 5px 2px 18px;
2992 }
2993 .crm-container .select2-container-multi .select2-choices .select2-search-field input {
2994   padding: 4px;
2995   min-height: unset;  /* Overide style imposed by WordPress 5.3 - see https://lab.civicrm.org/dev/wordpress/issues/46 */
2996 }
2997 .crm-container .select2-search-choice-close {
2998   top: 2px;
2999 }
3000 .crm-container .select2-container .select2-choice abbr {
3001   top: 6px;
3002 }
3003 .crm-container .select2-container .select2-choice > .select2-chosen {
3004   font-size: 1.1em;
3005 }
3006 /* Add search icon to ajax single-selects */
3007 .crm-container .crm-ajax-select .select2-arrow b {
3008   background-position: -39px -22px;
3009 }
3010 /* Restore normal icon when searchable field is open */
3011 .crm-container .select2-dropdown-open .select2-choice .select2-arrow b {
3012   background-position: -18px 1px;
3013 }
3014 .select2-drop .crm-entityref-links {
3015   border-top: 1px solid #d3d3d3;
3016   margin-top: 9px;
3017 }
3018 .select2-drop .crm-entityref-filters {
3019   margin-top: 4px;
3020 }
3021 .select2-drop .crm-entityref-filters select,
3022 .select2-drop .crm-entityref-filters input {
3023   border-radius: 3px;
3024   border: 1px solid #f2f2f2;
3025   background-color: #f6f6f6;
3026   color: #494949;
3027   font-size: 11px;
3028   max-width: 60%;
3029 }
3030 .select2-drop .crm-entityref-filters select:hover,
3031 .select2-drop .crm-entityref-filters select:focus,
3032 .select2-drop .crm-entityref-filters select.active,
3033 .select2-drop .crm-entityref-filters input {
3034   border: 1px solid #808080;
3035 }
3036 .select2-drop .crm-entityref-filter-value {
3037   margin-left: 1em;
3038 }
3039 .select2-drop .crm-entityref-filters input {
3040   padding-left: .5em;
3041   background-color: #fefefe;
3042 }
3043 /* Style autocomplete results */
3044 .crm-container .select2-results {
3045   font-size: 12px;
3046   padding: 0;
3047   text-align: left;
3048 }
3049 .crm-container .select2-results li,
3050 .crm-container .select2-results .crm-select2-row,
3051 .crm-container .select2-results .crm-select2-row-description p {
3052   padding: 0;
3053   margin: 0;
3054 }
3055 .crm-container .select2-results .crm-select2-row .crm-select2-row-label {
3056   font-size: 1.1em;
3057 }
3058 .crm-container .select2-results .crm-select2-row-description p {
3059   font-size: 0.8em;
3060   line-height: 1.5em;
3061   color: #696969;
3062   width: 100%;
3063   white-space: nowrap;
3064   overflow: hidden;
3065   text-overflow: ellipsis;
3066   font-weight: normal;
3067 }
3068 .crm-container .select2-results .select2-highlighted > .select2-result-label .crm-select2-row-description p {
3069   color: #f0f0f0;
3070 }
3071 .select2-container .crm-select2-row-description {
3072   display: none;
3073 }
3074 .crm-container .select2-results .crm-select2-icon {
3075   width: 20px;
3076   height: 100%;
3077   float: left;
3078 }
3079 .crm-container .select2-results .crm-select2-icon .crm-icon {
3080   width: 16px;
3081   height: 16px;
3082   margin: 0;
3083 }
3084 .crm-container .select2-results li.select2-no-results {
3085   padding-left: 4px;
3086   padding-top: 4px;
3087   margin-left: 4px;
3088 }
3089 .crm-container .select2-results li {
3090   margin: 0;
3091   padding: 0;
3092 }
3093 .crm-container .crm-action-menu .select2-default span.select2-chosen {
3094   color: #2786C2;
3095 }
3096 .crm-container .select2-container[class*=" fa-"]:before {
3097   display: none;
3098 }
3099 .crm-container .select2-results .select2-result.select2-disabled > .select2-result-label {
3100   opacity: .6;
3101   cursor: default;
3102 }
3103
3104 /* Restore this property otherwise our css overrides it */
3105 .select2-search input {
3106   box-sizing: border-box;
3107 }
3108
3109 span.crm-select-item-color {
3110   display: inline-block;
3111   width: .8em;
3112   height: .7em;
3113   border-radius: 2px;
3114   border: 1px solid grey;
3115 }
3116
3117 /* jQuery UI styles */
3118 .crm-container .ui-progressbar-value {
3119   background-image: url("../packages/jquery/css/images/pbar-ani.gif");
3120 }
3121
3122 .crm-container.ui-dialog {
3123   box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
3124 }
3125 .crm-container.ui-dialog.ui-resizable:before {
3126   display:block;
3127   content: " ";
3128   width: 16px;
3129   height: 16px;
3130   background: url("../i/icons/jquery-ui-52534D.png") no-repeat -80px -224px;
3131   position: absolute;
3132   bottom: 0;
3133   right: 0;
3134 }
3135 .crm-container .ui-dialog-titlebar.ui-widget-header {
3136   background: #5D677B;
3137   color: #F5F6F1;
3138 }
3139 .crm-container .ui-dialog-title {
3140   background: url("../i/item_sprites.png") no-repeat scroll -79px -47px;
3141   margin-left: -5px;
3142   padding-left: 25px;
3143 }
3144 .crm-container .ui-dialog-titlebar .ui-button {
3145   background-color: transparent;
3146   background-image: none;
3147   border: 1px none;
3148   color: inherit;
3149 }
3150 .crm-container .ui-dialog-titlebar .ui-button:hover {
3151   background-color: #cdcdcd;
3152   color: #555;
3153 }
3154
3155 /* unset the styling for the li in jstree */
3156 #tagtree ul {
3157   list-style: none;
3158   margin: 0px;
3159   padding: 0px;
3160 }
3161
3162 /* table row highlightng */
3163 .crm-container .crm-row-ok {
3164   background-color: #EFFFE7;
3165   border-bottom: 1px solid #ccc;
3166 }
3167 .crm-container .crm-row-error {
3168   background-color: #FFECEC;
3169   border-bottom: 1px solid #ccc;
3170 }
3171 .crm-container table.row-highlight tr:hover,
3172 .crm-container .crm-row-selected {
3173   background-color: #FFFFCC;
3174 }
3175 .crm-container table.row-highlight tr.even-row:hover,
3176 .crm-container table.row-highlight tr.even:hover,
3177 .crm-container .even-row.crm-row-selected,
3178 .crm-container .even.crm-row-selected {
3179   background-color: #fffdb2;
3180 }
3181
3182 #crm-container .crm-socialnetwork {
3183   margin-top: 1em;
3184 }
3185
3186 #crm-container .crm-fb-tweet-buttons {
3187   width: 93%;
3188 }
3189
3190 /* Checkbox gropus */
3191 .crm-container ul.crm-checkbox-list {
3192   list-style: none;
3193   margin: 0;
3194   padding: 0;
3195   background-color: white;
3196   border: 1px solid #a5a5a5;
3197   width: 300px;
3198   max-width: 100%;
3199   max-height: 300px;
3200   overflow-y: auto;
3201 }
3202 .crm-container ul.crm-checkbox-list li {
3203   position: relative;
3204   margin: 0;
3205   padding: 0;
3206 }
3207 .crm-container ul.crm-checkbox-list li input {
3208   position: absolute;
3209   left: 5px;
3210   top: 4px;
3211 }
3212 .crm-container ul.crm-checkbox-list li label {
3213   display: block;
3214   padding: 2px 0 2px 22px;
3215   margin: 0;
3216   word-break: break-all;
3217 }
3218 .crm-container ul.crm-checkbox-list li:nth-child(even) label {
3219   background-color: #FAFAFA;
3220 }
3221 .crm-container ul.crm-checkbox-list li input:checked + label {
3222   background-color: #FFFFCC;
3223 }
3224 .crm-container ul.crm-checkbox-list li:nth-child(even) input:checked + label {
3225   background-color: #fffdb2
3226 }
3227
3228 .crm-container ul.crm-sortable-list li label {
3229   padding-left: 40px;
3230   cursor: move;
3231 }
3232 .crm-container ul.crm-sortable-list li label:after {
3233   display: block;
3234   font-family: "FontAwesome";
3235   content: "\f047";
3236   position: absolute;
3237   left: 4px;
3238   top: 2px;
3239   font-size: 10px;
3240   color: grey;
3241 }
3242 .crm-container ul.crm-sortable-list li:hover label:after {
3243   color: inherit;
3244 }
3245 .crm-container ul.crm-checkbox-list.crm-sortable-list li input {
3246   left: 23px;
3247 }
3248
3249 /* classes related to batch entry operation */
3250 .crm-container span.batch-edit,
3251 .crm-container span.batch-valid,
3252 .crm-container span.batch-invalid {
3253   padding: 2px 9px 2px 3px;
3254   margin: 2px 2px 3px 2px;
3255   cursor: pointer;
3256   background-position: -66px -114px;
3257   background-image: url("../i/icons/jquery-ui-3E3E3E.gif");
3258 }
3259
3260 .crm-container span.batch-valid {
3261   background-position: -322px -143px;
3262 }
3263
3264 .crm-container span.batch-invalid {
3265   background-position: -258px -143px;
3266 }
3267
3268 .crm-container #Entry ul#errorList {
3269   display: none;
3270 }
3271
3272 .crm-container table.batch-totals {
3273   border: 1px solid #7A7A60 !important;
3274   margin-top: 10px !important;
3275 }
3276
3277 /* grid div as table */
3278 .crm-container .crm-grid-table {
3279   display: table;
3280   border-collapse: collapse;
3281   border: 1px solid #7A7A60;
3282   background-color: #FFFFFF;
3283   margin: 10px 3px 10px !important;
3284 }
3285
3286 .crm-container .crm-batch-entry-table {
3287   border-right: 2px solid #7A7A60 !important;
3288 }
3289
3290 .crm-container .crm-grid-row,
3291 .crm-container .crm-grid-header {
3292   display: table-row;
3293 }
3294
3295 .crm-container .crm-grid-header {
3296   white-space: nowrap;
3297 }
3298
3299 .crm-container .crm-grid-cell {
3300   display: table-cell;
3301   border-right: 1px solid #EFEFEF;
3302   padding: 2px;
3303   vertical-align: top;
3304 }
3305
3306 /* editable placeholder containers - share some styles with crm-editable below */
3307 .crm-container .replace-plain,
3308 .crm-container textarea,
3309 .crm-container select.crm-form-multiselect {
3310   border: 1px solid #999;
3311 }
3312
3313 .crm-container .replace-plain {
3314   cursor: pointer;
3315   background: rgba(255,255,255,0.6);
3316   min-height: 1.4em;
3317   position: relative;
3318   padding: .4em 1.5em .3em .4em;
3319 }
3320
3321 .crm-container .replace-plain p {
3322   padding: .2em 0;
3323   margin: 0;
3324 }
3325
3326 .crm-container .replace-plain:focus,
3327 .crm-container .replace-plain:hover {
3328   box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
3329   background: rgba(255,255,255,0.8);
3330 }
3331
3332 .crm-container .replace-plain:before {
3333   content: "\f040";
3334   position: absolute;
3335   top: .4em;
3336   right: .5em;
3337   opacity: .5;
3338 }
3339
3340 /* in place edit  */
3341 .crm-container .crm-editable-enabled {
3342   padding-left: 2px;
3343   border: 2px dashed transparent;
3344 }
3345 .crm-container .crm-editable-textarea-enabled {
3346   white-space: normal;
3347 }
3348
3349 .crm-container .crm-editable-enabled:hover {
3350   border: 2px dashed #d1d1d1;
3351   cursor: pointer;
3352 }
3353
3354 .crm-container .crm-editable-enabled.crm-editable-editing:hover {
3355   border: 2px dashed transparent;
3356   cursor: auto;
3357 }
3358
3359 .crm-container span.crm-editable-textarea-enabled {
3360   width: 96%;
3361 }
3362 .crm-container span.crm-editable-enabled {
3363   display: inline-block !important;
3364   padding-right: 2px;
3365   min-height: 1em;
3366   min-width: 3em;
3367 }
3368
3369 .crm-container .crm-editable-enabled .crm-i {
3370   opacity: .5;
3371 }
3372
3373 .crm-container .replace-plain a:active:before,
3374 .crm-container .replace-plain:focus:before,
3375 .crm-container .replace-plain:hover:before,
3376 .crm-container .crm-editable-enabled:hover .crm-i {
3377   opacity: 1;
3378 }
3379
3380 .crm-container .crm-editable-saving {
3381   background: #FFFFCC!important;
3382   opacity: 0.8;
3383 }
3384
3385 .crm-container h2.crm-editable-enabled input {
3386   min-height: 1.4em;
3387 }
3388 .crm-container .crm-editable-textarea-enabled textarea {
3389   min-height: 5em;
3390 }
3391
3392 .crm-editable-form {
3393   margin: 0 !important;
3394   padding: 0 !important;
3395   width: auto !important;
3396   position: relative;
3397   overflow: visible;
3398 }
3399
3400 .crm-editable-form input,
3401 .crm-editable-form textarea {
3402   margin-bottom: 0;
3403   padding-bottom: 0;
3404 }
3405
3406 .crm-editable-form button {
3407   position: absolute;
3408   bottom: -22px;
3409   left: 0;
3410   text-align: center;
3411   height: 23px;
3412   width: 32px;
3413   z-index: 1;
3414 }
3415
3416 .crm-editable-form button[type=cancel] {
3417   left: 32px;
3418 }
3419
3420 /*crm-10345*/
3421 .crm-container .field-action {
3422   word-wrap: normal;
3423 }
3424
3425 .crm-container .field-action span.btn-slide {
3426   padding-left: 0;
3427   padding-right: 11px;
3428 }
3429 /*end crm-10345*/
3430
3431 /* alter display of parent and child groups in Manage Groups selector */
3432 #crm-container .crm-group-parent td.crm-group-name {
3433   padding-left: 20px;
3434   text-indent: -20px;
3435 }
3436
3437 #crm-container .crm-group-child td.crm-group-name.level_2 {
3438   padding-left: 40px;
3439   text-indent: -20px;
3440 }
3441 #crm-container .crm-group-child td.crm-group-name.level_3 {
3442   padding-left: 60px;
3443   text-indent: -20px;
3444 }
3445 #crm-container .crm-group-name span.crm-editable-enabled {
3446   text-indent: 0;
3447 }
3448
3449 #crm-container div.crm-row-parent-name {
3450   padding: 3px 0 0 .5em;
3451   opacity: 0.75;
3452 }
3453 #crm-container td span.show-children,
3454 #crm-container td span.crm-no-children {
3455   padding-left: 20px;
3456 }
3457
3458 /* Notifications */
3459 #crm-notification-container {
3460   width: 350px;
3461   position: fixed;
3462   top: 45px;
3463   right: 15px;
3464   z-index: 999999;
3465 }
3466 #crm-notification-container div.ui-notify-message {
3467   padding: 10px;
3468   margin-bottom: 15px;
3469   color: #fff;
3470   border-radius: 8px;
3471   max-height: 600px;
3472   overflow: auto;
3473 }
3474 #crm-notification-container div.ui-notify-message h1 {
3475   font-size: 14px;
3476   margin: 0;
3477   padding: 4px;
3478   font-weight: bold;
3479   color: #fff;
3480 }
3481 #crm-notification-container div.ui-notify-message p {
3482   margin: 3px 0;
3483   padding: 0;
3484   line-height: 18px;
3485 }
3486 #crm-notification-container div.ui-notify-message:last-child {
3487   margin-bottom: 0;
3488 }
3489 #crm-notification-container div.ui-notify-message-style {
3490   background: rgba(0,0,0,0.8);
3491   box-shadow: 0 0 6px #000;
3492 }
3493 .crm-container div.ui-notify-message-style a,
3494 .crm-container div.ui-notify-message-style a:link {
3495   color: #CCD0FF;
3496   text-decoration: underline;
3497 }
3498 .crm-container div.ui-notify-message-style a:hover,
3499 .crm-container div.ui-notify-message-style a:focus {
3500   color: #B2B8FF;
3501 }
3502 .crm-container div.ui-notify-message-style .ui-button .ui-button-text {
3503   color: #2F2F2F;
3504   text-decoration: none;
3505 }
3506 #crm-notification-container .ui-notify-message .ui-notify-close {
3507   cursor: pointer;
3508 }
3509 #crm-notification-container .ui-notify-message a.ui-notify-cross {
3510   margin-top: -4px;
3511   float: right;
3512   text-decoration: none;
3513   font-size: 13px;
3514   font-weight: bold;
3515   text-shadow: 0 1px 1px #fff;
3516   padding: 2px;
3517   color: #FDFDFD;
3518 }
3519 #crm-notification-container .ui-notify-message .ui-notify-cross:hover,
3520 #crm-notification-container .ui-notify-message .ui-notify-cross:focus {
3521   color: #ffffab;
3522 }
3523 .crm-container div.ui-notify-message table,
3524 .crm-container div.ui-notify-message tbody,
3525 .crm-container div.ui-notify-message tr {
3526   border: 0 none;
3527   font-size: 11px;
3528 }
3529 .crm-container div.ui-notify-message table {
3530   margin: 10px 0;
3531 }
3532 .crm-container div.ui-notify-message td {
3533   background: rgba(255,255,255,0.1);
3534   border: 1px solid #111;
3535   font-size: 11px;
3536   color: #fff;
3537 }
3538 .crm-container div.ui-notify-message th {
3539   background: rgba(200,200,200,0.2);
3540   border: 1px solid #111;
3541   color: #eee;
3542   font-size: 11px;
3543 }
3544 .crm-container div.ui-notify-message table a.action-item {
3545   margin-right: 5px;
3546 }
3547 .crm-container div.ui-notify-message ul,
3548 .crm-container div.ui-notify-message ol {
3549   margin: 0.5em 0 1em;
3550   padding: 0 0 0 0.5em;
3551 }
3552
3553 .crm-container div.ui-notify-message div.icon,
3554 .crm-status-icon {
3555   background: transparent url("../i/message-icons.png") no-repeat 0 0;
3556   width: 24px;
3557   height: 24px;
3558   margin-right: 6px;
3559 }
3560 .crm-container div.ui-notify-message.success div.icon,
3561 .crm-status-icon.success {
3562   background-position: -24px 0;
3563 }
3564 .crm-container div.ui-notify-message.info div.icon,
3565 .crm-status-icon.info {
3566   background-position: -48px 0;
3567 }
3568 .crm-container div.ui-notify-message.error div.icon,
3569 .crm-status-icon.error {
3570   background-position: -72px 0;
3571 }
3572 .crm-container div.ui-notify-message.none div.icon {
3573   display: none;
3574 }
3575
3576 span.crm-status-icon {
3577   display: inline-block;
3578 }
3579
3580 /* Public Pages */
3581
3582 #crm-container.crm-public input[type="text"],
3583 #crm-container.crm-public input[type="password"],
3584 #crm-container.crm-public input[type="email"],
3585 #crm-container.crm-public select {
3586   font-size: 15px;
3587   padding: 5px;
3588   border-radius: 3px;
3589   vertical-align: middle;
3590   max-width: 100%;
3591 }
3592
3593 #crm-container.crm-public .label,
3594 #crm-container.crm-public .price-field-amount {
3595   padding-top: 6px;
3596   font-size: 15px;
3597 }
3598
3599 .crm-container.crm-public .select2-container,
3600 .crm-container.crm-public .select2-results {
3601   font-size: 14px;
3602 }
3603 .crm-container.crm-public .select2-container * {
3604   box-sizing: content-box;
3605 }
3606 .crm-container.crm-public .select2-container .select2-choice {
3607   padding: 5px 5px 5px 8px;
3608 }
3609 .crm-container.crm-public .select2-container-multi .select2-choices {
3610   padding: 4px;
3611 }
3612 .crm-public .select2-container .select2-choice .select2-arrow {
3613   width: 20px;
3614 }
3615 .crm-public .select2-container .select2-choice .select2-arrow b {
3616   position: relative;
3617   top: 2px;
3618   left: 2px;
3619 }
3620 .crm-container.crm-public .select2-container-multi .select2-choices .select2-search-choice {
3621   padding: 3px 3px 3px 20px;
3622 }
3623 .crm-container.crm-public .select2-container-multi .select2-choices:before {
3624   top: 9px;
3625 }
3626
3627 .crm-public .crm-profile-view .content {
3628   padding-top: 6px;
3629 }
3630
3631 #crm-container.crm-public .calc-value,
3632 #crm-container.crm-public .content {
3633   padding-top: 6px;
3634   font-size: 15px;
3635 }
3636
3637 #crm-container.crm-public .crm-section,
3638 .crm-section {
3639   margin-bottom: 0;
3640 }
3641
3642 #crm-container.crm-public #crm-submit-buttons {
3643   margin-top: 30px;
3644 }
3645
3646 #crm-container.crm-public #premiums-listings {
3647   margin-top: 10px;
3648   min-width: 450px;
3649   width: 60%;
3650 }
3651
3652 #crm-container.crm-public #premiums-listings .premium {
3653   margin: 5px 0;
3654 }
3655
3656 #crm-container.crm-public #premiums-listings .premium .premium-short {
3657   padding: 10px;
3658   border: 2px solid #ffffff;
3659   background-color: #f0f0f0;
3660   cursor: pointer;
3661 }
3662
3663 #crm-container.crm-public #premiums-listings .premium .premium-short:hover {
3664   border: 2px solid #b0b0b0;
3665 }
3666
3667 #crm-container.crm-public #premiums-listings .premium .premium-short-thumbnail {
3668   float: left;
3669   width: 50px;
3670 }
3671
3672 #crm-container.crm-public #premiums-listings .premium .premium-short-thumbnail img {
3673   width: 50px;
3674 }
3675
3676 #crm-container.crm-public #premiums-listings .premium .premium-short-content {
3677   text-align: center;
3678   font-size: 20px;
3679   font-weight: bold;
3680   padding: 20px;
3681 }
3682
3683 #crm-container.crm-public #premiums-listings .premium .premium-full {
3684   display: none;
3685   padding: 5px;
3686   border: 2px solid #cfcfcf;
3687   background-color: #ffffff;
3688 }
3689
3690 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-image {
3691   float: left;
3692   width: 200px;
3693   padding: 10px;
3694 }
3695
3696 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-image img {
3697   width: 200px;
3698 }
3699
3700 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-title {
3701   text-align: center;
3702   font-size: 1.5em;
3703   font-weight: bold;
3704   padding: 20px;
3705 }
3706
3707 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-min {
3708   font-size: .9em;
3709   font-style: italic;
3710 }
3711
3712 #crm-container.crm-public #premiums-listings .premium.premium-no_thanks .premium-short {
3713   text-align: center;
3714   font-size: 1.3em;
3715   padding: 10px;
3716 }
3717
3718 #crm-container.crm-public #premiums-listings .premium.premium-no_thanks .premium-full {
3719   text-align: center;
3720   font-size: 1.3em;
3721   font-weight: bold;
3722   padding: 10px;
3723 }
3724
3725 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-short,
3726 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-image,
3727 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-title,
3728 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-description,
3729 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-options,
3730 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-min {
3731   opacity: 0.5;
3732 }
3733 #crm-container.crm-public #premiums-listings .premium .premium-full-disabled {
3734   display: none;
3735 }
3736 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full-disabled {
3737   display: block;
3738   color: #ff0000;
3739   text-align: center;
3740   font-weight: bold;
3741   margin-bottom: .5em;
3742 }
3743
3744 #crm-container.crm-public .price-set-row {
3745   font-size: 15px;
3746   margin-bottom: 5px;
3747 }
3748
3749 #crm-container.crm-public .price-set-row input,
3750 #crm-container.crm-public .price-set-row label {
3751   vertical-align: middle;
3752   cursor: pointer;
3753 }
3754
3755 #crm-container.crm-public .price-set-row .crm-price-amount-amount {
3756   min-width: 2em;
3757   color: #333333;
3758 }
3759
3760 #crm-container.crm-public .price-set-row .crm-price-amount-label {
3761   color: #444444;
3762   font-weight: bold;
3763 }
3764
3765 #crm-container.crm-public .price-set-row .highlight label {
3766   color: #000000;
3767   font-weight: bold;
3768 }
3769
3770 #crm-container.crm-public .price-set-row .highlight .crm-price-amount-label {
3771   color: #222222;
3772 }
3773
3774 #crm-container.crm-public .price-set-option-content > tt {
3775   display: none;
3776 }
3777
3778 #crm-container .sold-out-option,
3779 #crm-container .price-set-row span.sold-out-option .crm-price-amount-label,
3780 #crm-container .price-set-row span.sold-out-option .crm-price-amount-amount {
3781   font-style: italic !important;
3782   font-weight: normal !important;
3783   font-size: 15px;
3784   color: #666 !important;
3785 }
3786
3787 /* Styles for credit card payment logos */
3788 .crm-container .credit_card_type-section .crm-credit_card_type-icons a {
3789   display: block;
3790   float: left;
3791   width: 50px;
3792   height: 30px;
3793   background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
3794   text-indent: -20000px;
3795   margin-right: 10px;
3796   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
3797   border-radius: 3px;
3798   border: 1px solid #FFFFFF;
3799 }
3800
3801 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
3802   background-position: -50px 0;
3803 }
3804
3805 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
3806   background-position: -100px 0;
3807 }
3808
3809 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
3810   background-position: -150px 0;
3811 }
3812
3813 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
3814   background-position: -200px 0;
3815 }
3816
3817 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
3818   background-position: -250px 0;
3819 }
3820
3821 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
3822   background-position: -300px 0;
3823 }
3824
3825 .crm-container .cvv2-icon {
3826   display: inline-block;
3827   width: 50px;
3828   height: 30px;
3829   background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
3830 }
3831
3832 /* Avoid weird border around the images (some themes will add a border around images) */
3833 #crm-container .credit_card_type-section .crm-credit_card_type-icons a,
3834 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:link,
3835 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:hover,
3836 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:focus,
3837 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:active {
3838   color: #fff;
3839 }
3840
3841 .crm-container .strikethrough {
3842   text-decoration: line-through;
3843 }
3844
3845 .crm-container input.ng-invalid.ng-dirty,
3846 .crm-container select.ng-invalid.ng-dirty,
3847 .crm-container textarea.ng-invalid.ng-dirty {
3848     border: 1px solid red;
3849 }
3850 .crm-container input.ng-valid,
3851 .crm-container input.ng-pristine,
3852 .crm-container textarea.ng-valid,
3853 .crm-container textarea.ng-pristine,
3854 .crm-container select.ng-valid,
3855 .crm-container select.ng-pristine{
3856     border: 1px solid #666;
3857 }
3858
3859 /* block-ui */
3860 .crm-container .blockUI.blockOverlay {
3861   background: url("../i/loading-overlay.gif") center center no-repeat white !important;
3862 }
3863
3864 .crm-container table.mergecontact thead th {
3865   width:30%;
3866 }
3867 .crm-container .crm-ui-datetime.ng-dirty input.incomplete {
3868   border: 1px solid red;
3869 }
3870
3871 .crm-container .crm-grip {
3872   cursor: move;
3873 }
3874
3875 .crm-tag-item {
3876   display: inline-block;
3877   padding: 1px 5px;
3878   border-radius: 3px;
3879   border: 1px solid grey;
3880 }