public/assets/css/global/custom.css

   1 /* here you can put your own css to customize and override the theme */
   2 /*.text_filter {
   3 letter-spacing:2px;
   4 font-style:italic;
   5 color:#999;
   6 }*/
   7
   8 /*.toolbar {
   9 float: right;
  10 }*/
  11
  12 /***
  13 Rounded Portlets
  14 ***/
  15 /*
  16 .portlet {
  17 border-radius: 4px !important;
  18 }
  19
  20 .portlet .portlet-title {
  21 border-radius: 4px 4px 0px 0px !important;
  22 }
  23
  24 .portlet .portlet-body,
  25 .portlet .portlet-body .form-actions  {
  26 border-radius: 0px 0px 4px 4px !important;
  27 }
  28 */
  29
  30 /*
  31 Change Quick Sidebar Width
  32 */
  33
  34 /*
  35 .page-quick-sidebar-wrapper {
  36 right: -370px;
  37 width: 370px;
  38 }
  39
  40 .page-quick-sidebar-open.page-quick-sidebar-push-content .page-sidebar-wrapper {
  41 margin-left: -370px;
  42 }
  43
  44 .page-quick-sidebar-open.page-quick-sidebar-push-content .page-footer {
  45 margin-right: 370px;
  46 margin-left: -370px;
  47 }
  48
  49 .page-sidebar-reversed.page-quick-sidebar-open.page-quick-sidebar-push-content .page-sidebar-wrapper {
  50 margin-right: 370px;
  51 }
  52
  53 .page-quick-sidebar-open.page-quick-sidebar-push-content.page-quick-sidebar-full-height .page-header {
  54 margin-left: -370px;
  55 }
  56
  57 .page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-list {
  58 width: 370px !important;
  59 }
  60
  61 .page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-item {
  62 width: 370px !important;
  63 margin-left: 370px;
  64 }
  65
  66 .page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-content-item-shown .page-quick-sidebar-list {
  67 margin-left: -370px;
  68 }
  69 */
  70
  71 .file-upload {
  72   position: relative;
  73   overflow: hidden;
  74   background: #00FF33;
  75   border: none;
  76   margin: 1px;
  77   height: 26px;
  78   width: 26px;
  79 }
  80
  81 .file-upload:hover {
  82   background-color: #00CC33;
  83 }
  84
  85 .file-upload input.file-input {
  86   position: absolute;
  87   top: 0;
  88   right: 0;
  89   margin: 0;
  90   padding: 0;
  91   font-size: 20px;
  92   cursor: pointer;
  93   opacity: 0;
  94   filter: alpha(opacity=0);
  95 }
  96
  97 .ta-editor.form-control.myform2-height, .ta-scroll-window.form-control.myform2-height  {
  98   height: 400px;
  99   min-height: 400px;
 100   overflow: auto;
 101   font-family: inherit;
 102   font-size: 100%;
 103 }
 104
 105 .ta-editor.form-control.myform2-height::-webkit-scrollbar {
 106   width: 7px;
 107 }
 108
 109 .form-control.myform2-height > .ta-bind {
 110   min-height: 400px;
 111   padding: 6px 12px;
 112 }
 113
 114 #chat-box {
 115   height: 350px;
 116   overflow : auto;
 117   padding-right: 10px;
 118 }
 119
 120 #chat-box::-webkit-scrollbar {
 121   width: 7px;
 122 }
 123
 124 #mail-box {
 125   height: 781px;
 126   overflow : auto;
 127   padding-right: 10px;
 128 }
 129
 130 #mail-box::-webkit-scrollbar {
 131   width: 7px;
 132 }
 133
 134 .motion-contact-uib-tab div.ng-binding, .motion-newContact-uib-tab div.ng-binding {
 135   border-top: 2px solid #8775a7 !important;
 136 }
 137
 138 .motion-chatRoom-uib-tab div.ng-binding {
 139   border-top: 2px solid #5bc0de !important;
 140 }
 141
 142 .motion-mailRoom-uib-tab div.ng-binding {
 143   border-top: 2px solid #5cb85c !important;
 144 }
 145
 146 .motion-faxRoom-uib-tab div.ng-binding {
 147   border-top: 2px solid #f0ad4e !important;
 148 }
 149
 150 .motion-smsRoom-uib-tab div.ng-binding {
 151   border-top: 2px solid #d9534f !important;
 152 }
 153
 154 .motion-jscripty-uib-tab div.ng-binding {
 155   border-top: 2px solid #002C4C !important;
 156 }
 157
 158 .motion-tdDisposal-uib-tab div.ng-binding {
 159   border-top: 2px solid #b6af04 !important;
 160 }
 161
 162 .motion-openchannelRoom-uib-tab div.ng-binding {
 163   border-top: 2px solid #50937f !important;
 164 }
 165
 166 .pretty-avatar {
 167   padding-top: 4px;
 168 }
 169
 170 .pretty-avatar-v {
 171   padding: 2px;
 172 }
 173
 174 .small-pretty-avatar {
 175   height: 27px;
 176   width: 27px;
 177   -webkit-border-radius: 50% !important;
 178   -moz-border-radius: 50% !important;
 179   border-radius: 50% !important;
 180   padding: 2px;
 181   border: 2px solid #3399CC;
 182   border-radius: 100%;
 183   box-shadow: 0 0 4px RGBA(51, 153, 204, 0.4);
 184 }
 185
 186 .small-pretty-avatar-v {
 187   height: 27px;
 188   width: 27px;
 189   -webkit-border-radius: 50% !important;
 190   -moz-border-radius: 50% !important;
 191   border-radius: 50% !important;
 192   padding: 2px;
 193   border: 2px solid #EA4C61;
 194   border-radius: 100%;
 195   box-shadow: 0 0 4px RGBA(51, 153, 204, 0.4);
 196 }
 197
 198 .message-body {
 199   word-wrap: break-word;
 200   white-space: pre-wrap
 201 }
 202
 203 .inactive-link {
 204   pointer-events: none;
 205   cursor: default;
 206 }
 207
 208 .ui-grid-vcenter div {
 209   /*background-color: yellow !important;*/
 210   /*text-align:center;*/
 211   position: relative;
 212   top: 50%;
 213   vertical-align: middle;
 214   text-align:center;
 215   /*padding-left: 10px;*/
 216   -webkit-transform: translateY(-50%);
 217   -ms-transform: translateY(-50%);
 218   transform: translateY(-50%);
 219   /*word-wrap: break-word;*/
 220   white-space: nowrap;
 221   text-overflow: ellipsis;
 222   overflow: hidden !important;
 223 }
 224
 225 .demo {
 226   background-image:url('../../images/demo.png');
 227 }
 228
 229 .float-right{
 230   float: right;
 231 }
 232
 233 .float-left{
 234   float: left !important;
 235 }
 236
 237 .checker {
 238   width: 19px;
 239   height: 19px;
 240 }
 241
 242 .collapse.am-collapse {
 243   animation-duration: .3s;
 244   animation-timing-function: ease;
 245   animation-fill-mode: backwards;
 246   overflow: hidden;
 247   &.in-remove {
 248     animation-name: collapse;
 249     display: block;
 250   }
 251   &.in-add {
 252     animation-name: expand;
 253   }
 254 }
 255
 256 .message-info {
 257   float: right;
 258   color: lightgrey;
 259   margin-right: 5px;
 260 }
 261
 262 .centered-td {
 263   text-align: center;
 264 }
 265
 266 [ui-view].ng-enter{
 267   -webkit-animation: fadeInUpm .5s;
 268   animation: fadeInUpm .5s;
 269 }
 270
 271 .steps-indicator, .steps{
 272   padding-bottom: 20px !important;
 273 }
 274
 275 .ui-sortable-handle,.ui-sortable{
 276   cursor: move;
 277 }
 278
 279 .step .btn:not(.ui-select-toggle,.remove-condition){
 280   margin-bottom: 10px;
 281 }
 282
 283 .mbottom20{
 284   margin-bottom: 20px;
 285 }
 286
 287 .pbottom20{
 288   padding-bottom: 20px;
 289 }
 290
 291 .break-overflow{
 292   overflow-wrap: break-word;
 293 }
 294
 295 button.close {
 296   padding: 0;
 297   cursor: pointer;
 298   background: 0 0;
 299   border: 0;
 300   -webkit-appearance: none;
 301 }
 302 .close {
 303   float: right;
 304   font-size: 21px;
 305   font-weight: 700;
 306   line-height: 1;
 307   color: #000;
 308   text-shadow: 0 1px 0 #fff;
 309   opacity: .2;
 310   filter: alpha(opacity=20);
 311 }
 312
 313 .alert {
 314   padding: 15px !important;
 315   margin-bottom: 20px !important;
 316   border: 1px solid transparent !important;
 317   border-radius: 4px !important;
 318 }
 319 .alert h4 {
 320   margin-top: 0 !important;
 321   color: inherit !important;
 322 }
 323 .alert .alert-link {
 324   font-weight: bold !important;
 325 }
 326 .alert > p,
 327 .alert > ul {
 328   margin-bottom: 0 !important;
 329 }
 330 .alert > p + p {
 331   margin-top: 5px !important;
 332 }
 333 .alert-dismissable,
 334 .alert-dismissible {
 335   padding-right: 35px !important;
 336 }
 337 .alert-dismissable .close,
 338 .alert-dismissible .close {
 339   position: relative !important;
 340   top: -2px !important;
 341   right: -21px !important;
 342   color: inherit !important;
 343 }
 344 .alert-success {
 345   background-color: #dff0d8 !important;
 346   border-color: #d6e9c6 !important;
 347   color: #3c763d !important;
 348 }
 349 .alert-success hr {
 350   border-top-color: #c9e2b3 !important;
 351 }
 352 .alert-success .alert-link {
 353   color: #2b542c !important;
 354 }
 355 .alert-info {
 356   background-color: #d9edf7 !important;
 357   border-color: #bce8f1 !important;
 358   color: #31708f !important;
 359 }
 360 .alert-info hr {
 361   border-top-color: #a6e1ec !important;
 362 }
 363 .alert-info .alert-link {
 364   color: #245269 !important;
 365 }
 366 .alert-warning {
 367   background-color: #fcf8e3 !important;
 368   border-color: #faebcc !important;
 369   color: #8a6d3b !important;
 370 }
 371 .alert-warning hr {
 372   border-top-color: #f7e1b5 !important;
 373 }
 374 .alert-warning .alert-link {
 375   color: #66512c !important;
 376 }
 377 .alert-danger {
 378   background-color: #f2dede !important;
 379   border-color: #ebccd1 !important;
 380   color: #a94442 !important;
 381 }
 382 .alert-danger hr {
 383   border-top-color: #e4b9c0 !important;
 384 }
 385 .alert-danger .alert-link {
 386   color: #843534 !important;
 387 }
 388
 389 .alert .close{
 390   text-indent: inherit !important;
 391   background-image: none !important;
 392   width: auto !important;
 393 }
 394
 395 .page-404 {
 396   text-align: center;
 397 }
 398
 399 .page-404 .number {
 400   position: relative;
 401   top: 35px;
 402   display: inline-block;
 403   letter-spacing: -10px;
 404   margin-top: 0px;
 405   margin-bottom: 10px;
 406   line-height: 128px;
 407   font-size: 128px;
 408   font-weight: 300;
 409   color: #7bbbd6;
 410   text-align: right;
 411 }
 412
 413 .page-404 .details {
 414   margin-left: 40px;
 415   display: inline-block;
 416   padding-top: 0px;
 417   text-align: left;
 418 }
 419
 420 .sounds-title-icon{
 421   font-size: 17px;
 422 }
 423
 424 /*.ui-select-multiple input.ui-select-search {
 425 width: 100% !important;
 426 }*/
 427
 428 .over-topbar, .modal.fade {
 429   z-index: 9996 !important;
 430 }
 431
 432 .list-group-item-custom {
 433   border: none;
 434 }
 435
 436 .pointer-cursor{
 437   cursor: pointer !important;
 438 }
 439
 440 .select-group-father{
 441   font-weight:bold !important;
 442 }
 443
 444 .select-group-son{
 445   font-style: italic !important;
 446 }
 447
 448 @media (max-height: 908px) {
 449   .modal-body-scroll{
 450     max-height: 325px;
 451     overflow-y: scroll;
 452   }
 453 }
 454
 455 .widget .dashboard-stat{
 456   margin-bottom:0px !important;
 457 }
 458
 459 .widget .panel-body{
 460   padding: 0px;
 461 }
 462
 463 .left-margin{
 464   margin-left: 20px;
 465 }
 466
 467 .left-margin-40{
 468   margin-left: 40px;
 469 }
 470
 471 .contact-portlet{
 472   /*overflow-x:hidden;
 473   overflow-y:auto;*/
 474   /*height: 337px;*/
 475 }
 476
 477 .contact-tab{
 478   background: #F1F3FA;
 479   padding-top:20px;
 480 }
 481
 482 .contact-tab-container{
 483   padding-left:20px;
 484   padding-right:20px;
 485 }
 486
 487 .col-fixed, .tree-row {
 488   float: left;
 489 }
 490
 491 .col-fixed {
 492   width: 277px;
 493   margin-right: 15px;
 494 }
 495
 496 .tree-row {
 497   width:calc(100% - 277px + 15px);
 498 }
 499
 500 .tree-search{
 501   float: left;
 502   display: inline-block;
 503   line-height: 18px;
 504   font-weight: 300;
 505   padding: 10px 0;
 506 }
 507
 508 .report-field-handle{
 509   width: 66px;
 510   height:66px;
 511   background-image: url('../../images/move.png');
 512   background-repeat:no-repeat;
 513   background-size:66px 66px;
 514 }
 515
 516 .ui-sortable-helper {
 517   display: table;
 518 }
 519
 520 .report-field-remove{
 521   width: 66px;
 522   height:66px;
 523   text-align: center;
 524 }
 525
 526 .portlet.light .portlet-title {
 527   padding: 0;
 528   min-height: 48px;
 529 }
 530 .portlet .portlet-title {
 531   border-bottom: 1px solid #eee;
 532   padding: 0;
 533   margin-bottom: 10px;
 534   min-height: 41px;
 535   -webkit-border-radius: 4px 4px 0 0;
 536   -moz-border-radius: 4px 4px 0 0;
 537   -ms-border-radius: 4px 4px 0 0;
 538   -o-border-radius: 4px 4px 0 0;
 539   border-radius: 4px 4px 0 0;
 540 }
 541
 542 .ui-select-match-text{
 543   width: 100%;
 544   overflow: hidden;
 545   text-overflow: ellipsis;
 546   padding-right: 20px;
 547 }
 548
 549 .ui-select-choices-row-inner div{
 550   width: 100%;
 551   overflow: hidden;
 552   text-overflow: ellipsis;
 553 }
 554
 555 .ui-select-toggle > .btn.btn-link {
 556   margin-right: 10px;
 557   top: 6px;
 558   position: absolute;
 559   right: 10px;
 560 }
 561
 562 .extract-grid{
 563   min-height: 600px;
 564 }
 565
 566 body > [uib-modal-window]:not([modal-render]) {
 567   display: none;
 568 }
 569
 570 .watermark {
 571   /*border: 1px blue solid;*/
 572   position: absolute;
 573   top: 50%;
 574   transform: translateY(-50%);
 575   opacity: 0.7;
 576   width: 100%;
 577   text-align: center;
 578   z-index: 1000;
 579   font-size: 25px;
 580 }
 581
 582 .centered-uigrid-td {
 583   text-align: center;
 584   margin:4px;
 585 }
 586
 587 .condition{
 588   margin-top: 8px;
 589   margin-bottom:8px;
 590 }
 591
 592 .ms-container .ms-list{
 593   height:430px !important;
 594 }
 595
 596 .ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{
 597   padding: 7px 12px !important;
 598 }
 599
 600 .ms-container{
 601   width:100% !important;
 602 }
 603
 604 .ms-optgroup-label{
 605   text-align: center;
 606   font-weight:bold;
 607   background-color: #F0F0F0;
 608 }
 609
 610 .ui-grid-cell div {
 611   /*word-wrap: break-word;
 612   white-space: nowrap;
 613   text-overflow: ellipsis;
 614   overflow: hidden !important;*/
 615 }
 616
 617 .pause-select{
 618   width:20px;
 619   /*border-color: #E3D9D9;*/
 620   color: #A29999;
 621   border:none;
 622 }
 623
 624 @keyframes blink {  0% {border-color: transparent;}
 625 25% { outline-color: #EACD9E; }
 626 50% { outline-color: #ECC077; }
 627 75% { outline-color: #ECB861; }
 628 100% { outline-color: #FFB848; }
 629 }
 630 .paused-agent{
 631   outline: 2px solid transparent;
 632   animation: blink .5s step-end infinite alternate;
 633   outline-offset:-2px;
 634   /*Reduce CPU load*/
 635   transform: translateZ(0);
 636   -webkit-transform: translateZ(0);
 637   -ms-transform: translateZ(0);
 638 }
 639
 640 .otherfields-col{
 641   min-height: 400px !important;
 642   max-width: 100%;
 643 }
 644
 645 .profile-content{
 646   min-height: 800px;
 647 }
 648
 649 .portfolio-stat p {
 650   color: #16a1f2;
 651   display: block;
 652   font-size: 22px;
 653   line-height: 28px;
 654   margin-top: 0px;
 655   font-weight: 200;
 656   width: 100%;
 657   text-transform: uppercase;
 658   overflow: hidden;
 659   text-overflow: ellipsis;
 660 }
 661
 662 .portfolio-stat{
 663   text-transform: uppercase;
 664   padding: 10px 25px;
 665 }
 666
 667 .scrollable-menu {
 668   height: auto;
 669   max-height: 380px;
 670   overflow-x: hidden;
 671 }
 672
 673 .daterangepicker_start_input,.daterangepicker_end_input{
 674   display:none !important;
 675 }
 676
 677 .margin-top20{
 678   margin-top:20px;
 679 }
 680
 681 .disabled-invisible{
 682   color:#EEEEEE !important;
 683 }
 684
 685 .display-none{
 686   display:none !important;
 687 }
 688
 689 .padding-side-7{
 690   padding-right:7px !important;
 691   padding-left:7px !important;
 692 }
 693
 694 .custom-header-a{
 695   padding:4px 6px 1px 8px !important;
 696 }
 697
 698 .custom-header-a div{
 699       color: #c6cfda;
 700       max-width: 150px;
 701       white-space: nowrap;
 702       text-overflow: ellipsis;
 703       overflow: hidden !important;
 704 }
 705
 706 .custom-header-a:hover{
 707   background-color:transparent !important;
 708 }
 709
 710 .page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle.custom-header-a{
 711   background-color:transparent !important;
 712 }
 713
 714 .header-bar-button{
 715   padding-bottom: 3px !important;
 716   padding-top: 4px !important;
 717   margin-top: 10px !important;
 718   border-radius: 20px !important;
 719 }
 720
 721 .header-bar-button-controls{
 722     border: 1px solid #79869a;
 723 }
 724
 725 .header-ul-with-separator{
 726   height: 46px;
 727   outline: 2px solid #79869a;
 728   outline-offset:-4px;
 729 }
 730
 731 .paused-header{
 732   outline: 2px solid transparent;
 733   animation: blink .5s step-end infinite alternate;
 734   outline-offset:-4px;
 735 }
 736
 737 .custom-date-filter-modal .modal-dialog.modal-md{
 738   width: 350px;
 739 }
 740
 741 .chat-canned-answer-div{
 742   margin-top:15px;
 743   padding-top: 15px;
 744   border-top: 1px solid #eee;
 745 }
 746
 747 rzslider .rz-pointer{
 748   border-radius: 16px !important;
 749 }
 750
 751 rzslider .rz-ticks .rz-tick{
 752   border-radius: 50% !important;
 753 }
 754
 755 .span-link{
 756   color: #337ab7;
 757   text-decoration: none;
 758   text-shadow: none;
 759 }
 760
 761 .span-link:hover{
 762   text-decoration: underline;
 763   cursor:pointer;
 764 }
 765
 766 .custom-logo{
 767   max-height: 23px;
 768 }
 769
 770 .custom-login-logo{
 771   max-height: 140px;
 772 }
 773
 774 .upborder{
 775   border-top: 1px solid #eee;
 776 }
 777
 778 .myCurtainClass{
 779   opacity: 0.2;
 780 }
 781
 782 .dot
 783 {
 784     display: inline-block;
 785     width: 500px;
 786     white-space: nowrap;
 787     overflow: hidden !important;
 788     text-overflow: ellipsis;
 789 }
 790
 791 .yellow-notes{
 792   background-color:#FFFFCC;
 793 }
 794
 795 .notes-textarea,.notes-textarea:focus, .notes-textarea:hover, .notes-textarea:active{
 796   background-color:#FFFFCC;
 797   width: calc(100%);
 798   height: 200px;
 799   resize: none;
 800   border: none;
 801   overflow: auto;
 802   outline: none;
 803   -webkit-box-shadow: none;
 804   -moz-box-shadow: none;
 805   box-shadow: none;
 806 }
 807
 808 .center-text{
 809   text-align:center;
 810 }
 811
 812 .no-border{
 813   border:none !important;
 814 }
 815
 816 .about-logo{
 817   max-width: 250px;
 818 }
 819
 820 .ui-select-multiple input.ui-select-search:not(.ng-touched) {
 821     width: 100% !important;
 822 }
 823
 824 .ui-select-choices-row disabled{
 825   color: #EEEEEE;
 826 }
 827
 828 .td-disposal-logo{
 829   max-height: 60px;
 830 }
 831
 832 .pricing.disabled-update .pricing-head h3 {
 833
 834     background: #BFBFBF !important;
 835     border-bottom: solid 1px #BFBFBF !important;
 836 }
 837
 838 .pricing.disabled-update:hover {
 839     border: 3px solid #BFBFBF !important;
 840 }
 841
 842 .pricing.disabled-update:hover h4 {
 843     color: #BFBFBF !important;
 844 }
 845
 846 .pricing.disabled-update .pricing-content li i {
 847     color: #BFBFBF ! important;
 848 }
 849
 850 .pricing.current-version .pricing-head h3 {
 851
 852     background: #8775a7 !important;
 853     border-bottom: solid 1px #8775a7 !important;
 854 }
 855
 856 .pricing.current-version:hover {
 857     border: 3px solid #8775a7 !important;
 858 }
 859
 860 .pricing.current-version:hover h4 {
 861     color: #8775a7 !important;
 862 }
 863
 864 .pricing.current-version .pricing-content li i {
 865     color: #8775a7 ! important;
 866 }