portal-common/src/main/webapp/framework/browser/css/open-ostyle.css

   1 /*\r
   2 \r
   3     Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   4 \r
   5     Licensed under the Apache License, Version 2.0 (the "License");\r
   6     you may not use this file except in compliance with the License.\r
   7     You may obtain a copy of the License at\r
   8 \r
   9             http://www.apache.org/licenses/LICENSE-2.0\r
  10 \r
  11     Unless required by applicable law or agreed to in writing, software\r
  12     distributed under the License is distributed on an "AS IS" BASIS,\r
  13     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  14     See the License for the specific language governing permissions and\r
  15     limitations under the License.\r
  16 \r
  17 */\r
  18 \r
  19 body {\r
  20     margin: 0;\r
  21     padding: 0;\r
  22     width: 100%;\r
  23     height: 100%;\r
  24     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
  25     font-size: 12px;\r
  26 }\r
  27 \r
  28 .container{\r
  29     background: #fafafa;\r
  30 }\r
  31 \r
  32 .accordion_parent {\r
  33     position: relative;\r
  34     width: 220px;\r
  35     background-color: #f5f5f5;\r
  36 }\r
  37 \r
  38 .openo-accordion-resizable-handle {\r
  39     z-index: 1 !important;\r
  40     cursor: e-resize;\r
  41     width: 7px;\r
  42     right: -5px;\r
  43     top: 0;\r
  44     height: 100%;\r
  45     position: absolute;\r
  46     font-size: .1px;\r
  47     display: block;\r
  48 }\r
  49 \r
  50 .openoAccordian_accordionmenu {\r
  51     width: 100%;\r
  52     margin: 0;\r
  53     padding: 0;\r
  54     list-style-type: none;\r
  55     line-height: 17px;\r
  56 }\r
  57 \r
  58 .openoAccordian_accordionmenu li {\r
  59     min-width: 75px;\r
  60     margin: 0;\r
  61     padding: 0;\r
  62     list-style-type: none;\r
  63     color: #000;\r
  64     clear: both;\r
  65 }\r
  66 \r
  67 .openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {\r
  68     display: block;\r
  69     float: left;\r
  70     margin-bottom: -1px;\r
  71     border-bottom: 1px solid #e5e5e5;\r
  72     cursor: pointer;\r
  73     width: 13px;\r
  74     padding-top: 26px;\r
  75 }\r
  76 \r
  77 .openo_accordion_ui-icon-expand {\r
  78     background: url(../thirdparty/images/collapse_arrow.png) right 20px no-repeat;\r
  79     margin-top: 8px;\r
  80 }\r
  81 \r
  82 .openo_accordion_ui-icon-expand.current {\r
  83     background: url(../thirdparty/images/expand_arrow.png) right 20px no-repeat;\r
  84 }\r
  85 \r
  86 .openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {\r
  87     display: block;\r
  88     position: absolute;\r
  89     right: 0;\r
  90     top: 4px;\r
  91     width: 18px;\r
  92     height: 41px;\r
  93     cursor: pointer;\r
  94     background-color: #f5f5f5;\r
  95 }\r
  96 \r
  97 .openoAccordian_showHideArrow_hide {\r
  98     background-image: url(../images/openo.png);\r
  99     background-position: -7px 0 !important;\r
 100     border-collapse: separate;\r
 101     /*box-shadow: inset -1px 0 0 #e5e5e5;*/\r
 102 }\r
 103 \r
 104 a.header.opened, a.header.closed {\r
 105     font-size: 16px;\r
 106     padding-top: 24px;\r
 107     padding-bottom: 25px;\r
 108     color: #999999;\r
 109 }\r
 110 \r
 111 .openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {\r
 112     padding-right: 10px;\r
 113     background-position: 98% 50%;\r
 114     background-repeat: no-repeat;\r
 115 }\r
 116 \r
 117 \r
 118 .openoAccordian_accordionmenu li a {\r
 119     padding: 11px 10px 12px;\r
 120     color: #333333;\r
 121     margin-top: -1px;\r
 122     text-align: left !important;\r
 123     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 124     font-size: 14px;\r
 125     text-overflow: ellipsis;\r
 126     white-space: nowrap;\r
 127     overflow: hidden;\r
 128     border-top: 1px solid #e5e5e5;\r
 129     border-bottom: 1px solid #e5e5e5;\r
 130     /*height: 19px;*/\r
 131 }\r
 132 \r
 133 .openoAccordian_accordionmenu ul {\r
 134     margin: 0;\r
 135     padding: 0;\r
 136     overflow: hidden;\r
 137 }\r
 138 \r
 139 .openoAccordian_accordionmenu a {\r
 140     display: block;\r
 141     text-decoration: none;\r
 142 }\r
 143 \r
 144 a {\r
 145     color: #428bca;\r
 146     text-decoration: none;\r
 147     background: 0 0;\r
 148 }\r
 149 \r
 150 .bar {\r
 151     height: 834px;\r
 152     width: 18px;\r
 153     background: #f8f8f8;\r
 154     display: none;\r
 155 }\r
 156 \r
 157 .bar span {\r
 158     width: 13px;\r
 159     height: 34px;\r
 160     background-image: url(../images/openo.png);\r
 161     background-position: -39px 0 !important;\r
 162     display: block;\r
 163     /*margin-top: -430px;*/\r
 164 }\r
 165 \r
 166 li {\r
 167     cursor: pointer;\r
 168 }\r
 169 \r
 170 #puer_base_openo {\r
 171     border: 1px solid #ddd;\r
 172 }\r
 173 \r
 174 .openo_accordion_selected {\r
 175     margin-left: 0;\r
 176     margin-right: 0;\r
 177     background: #fafafa;\r
 178     border-left: 3px solid #4ac9ff !important;\r
 179     box-shadow: none;\r
 180     position: relative;\r
 181 }\r
 182 \r
 183 a:hover {\r
 184     color: #4ac9ff;\r
 185 }\r
 186 \r
 187 .openoAccordian_accordionmenu li.openo_accordion_selected a {\r
 188     position: relative;\r
 189     left: -3px;\r
 190     color: #009ae7;\r
 191 }\r
 192 \r
 193 .openo-accordion-resizable-handle {\r
 194     z-index: 1 !important;\r
 195     cursor: e-resize;\r
 196     width: 7px;\r
 197     right: -5px;\r
 198     top: 0;\r
 199     height: 100%;\r
 200     position: absolute;\r
 201     font-size: .1px;\r
 202     display: block;\r
 203 }\r
 204 \r
 205 #iframeContainer iframe {\r
 206     width: 100%;\r
 207     height: 100%;\r
 208     border: 0;\r
 209 }\r
 210 \r
 211 #accordionContent, #iframeContainer {\r
 212     margin: 0;\r
 213     padding: 0;\r
 214     border: 0;\r
 215     width: 100%;\r
 216     height: 100%;\r
 217 }\r
 218 \r
 219 .openoAccordian_showHideArrow_show {\r
 220     background-image: url(../images/openo.png);\r
 221     background-position: -39px 0 !important;\r
 222     box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;\r
 223 }\r
 224 \r
 225 .homecontent {\r
 226     text-align: center;\r
 227     letter-spacing: 1.4px;\r
 228 }\r
 229 \r
 230 .homecontent h3, .homecontent h4, .homecontent h5{\r
 231     font-size: 24px;\r
 232     color: #333;\r
 233     text-transform: capitalize;\r
 234     border-top: 2px solid #f1f1f1;\r
 235     border-bottom: 2px solid #f1f1f1;\r
 236     padding: 13px 5px;\r
 237     display: inline-block;\r
 238     letter-spacing: 5px;\r
 239     -webkit-animation: textScroll 500ms linear;\r
 240     animation: textScroll 500ms linear;\r
 241 }\r
 242 .homecontent h4 {\r
 243     font-size: 28px;\r
 244     font-weight: bold;\r
 245 }\r
 246 .homecontent h5 {\r
 247     font-size: 16px;\r
 248     text-align: left;\r
 249     border: none;\r
 250 }\r
 251 @-webkit-keyframes textScroll {\r
 252      from {opacity: 0;}\r
 253      to {opacity: 1;}\r
 254  }\r
 255 \r
 256 @keyframes textScroll {\r
 257     from {opacity: 0;}\r
 258     to {opacity: 1;}\r
 259 }\r
 260 \r
 261 /*.modal-body span {\r
 262     font-size: 18px;\r
 263     color: #00f;\r
 264 }*/\r
 265 \r
 266 #msgModal .modal-body .container {\r
 267     width: 100%;\r
 268 }\r
 269 #msgModal .modal-body .icon {\r
 270     /*color: red;*/\r
 271     font-size: 37px;\r
 272 }\r
 273 #msgModal .modal-body .icon_error {\r
 274     color: red;\r
 275 }\r
 276 #msgModal .modal-body .icon_info {\r
 277     color: green;\r
 278 }\r
 279 #msgModal .modal-body .icon_warning{\r
 280     color: orange;\r
 281 }\r
 282 #msgModal .modal-body .icon_confirm {\r
 283     color: blue;\r
 284 }\r
 285 #msgModal .modal-body .msg {\r
 286     color: #333;\r
 287     padding-left: 30px;\r
 288 }\r
 289 /*#msgModal .modal-body .container .row {\r
 290 }*/\r
 291 #msgModal .modal-body .row {\r
 292     height: 100%;\r
 293     white-space: nowrap;\r
 294 }\r
 295 #msgModal .modal-body .row:before{\r
 296     content: "";\r
 297     display: inline-block;\r
 298     vertical-align: middle;\r
 299     width: 0;\r
 300     /* adjust for white space between pseudo element and next sibling */\r
 301     margin-right: -.25em;\r
 302     /* stretch line height */\r
 303     height: 100%;\r
 304 }\r
 305 \r
 306 #msgModal .modal-body .row .msg {\r
 307     /*display: inline-block;\r
 308     vertical-align: middle;\r
 309     white-space: normal;*/\r
 310     /* vertical-align: middle; */\r
 311     position: absolute;\r
 312     top: 50%;\r
 313     -webkit-transform: translateY(-50%);\r
 314     -ms-transform: translateY(-50%);\r
 315     transform: translateY(-50%);\r
 316     padding-left: 70px;\r
 317     white-space: normal;\r
 318 }\r
 319 \r
 320 /* Functional */\r
 321 \r
 322 #funModal .modal-content .modal-header{\r
 323     padding-bottom: 4px;\r
 324     border-radius: 5px 5px 0 0;\r
 325 }\r
 326 \r
 327 \r
 328 /* Buttons */\r
 329 .btnDefault {\r
 330     border-radius: 6px;\r
 331     /*height: 24px;*/\r
 332     font-size: 12px;\r
 333     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 334     line-height: 24px;\r
 335     color: #000;\r
 336     border: 1px solid #d3d3d3;\r
 337     text-align: center;\r
 338     box-shadow: 0 1px 1px rgba(0, 0, 0, .05);\r
 339     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);\r
 340     background: linear-gradient(to bottom, #fff, #fafafa);\r
 341     padding: 0 19px;\r
 342 }\r
 343 .btnDefault:hover {\r
 344     border-color: #4ac9ff;\r
 345     color: #009ae7;\r
 346 }\r
 347 #iconBtn {\r
 348     padding: 0 15px;\r
 349 }\r
 350 #iconBtn span {\r
 351     font-size: 12px;\r
 352     margin-top: 4px;\r
 353     width: 16px;\r
 354     height: 16px;\r
 355 }\r
 356 #iconBtn span.pull-left {\r
 357     margin-right: 5px;\r
 358 }\r
 359 #iconBtn span.pull-right {\r
 360     margin-left: 5px;\r
 361 }\r
 362 \r
 363 #buttonArea {\r
 364     text-align: left;\r
 365 }\r
 366 #buttonArea div {\r
 367     margin: 10px 0 20px;\r
 368 }\r
 369 \r
 370 #buttonArea div .btn-block{\r
 371     margin: 10px 0;\r
 372 }\r
 373 \r
 374 /* Dropdown*/\r
 375 \r
 376 #dropdown {\r
 377     text-align: left;\r
 378 }\r
 379 \r
 380 #dropdown div {\r
 381     margin: 10px 0 20px;\r
 382 }\r
 383 \r
 384 #dropdown .dropup .dropdown-menu {\r
 385     top: auto;\r
 386     bottom: 34% !important;\r
 387     margin-bottom: 1px;\r
 388 }\r
 389 #dropdown .dropdown-menu {\r
 390     top: auto;\r
 391     left: auto;\r
 392     margin-bottom: 1px;\r
 393 }\r
 394 \r
 395 #plainDropDown > .dropdownplain {\r
 396     position: relative;\r
 397     clear: both;\r
 398     float: left;\r
 399     width: 100%;\r
 400 }\r
 401 #plainDropDown > .dropdownplain > ul > li {\r
 402     border: 1px solid #c3c3c3;\r
 403     border-radius: 4px;\r
 404     min-width: 200px;\r
 405 }\r
 406 #plainDropDown ul li a {\r
 407     padding: 5px 10px;\r
 408     color: #333;\r
 409 }\r
 410 #plainDropDown > .dropdownplain > ul > li > a > span {\r
 411     top: 4px;\r
 412 }\r
 413 #plainDropDown ul li a:hover {\r
 414     color: #333;\r
 415 }\r
 416 #plainDropDown .dropdown-menu {\r
 417     width: 100%;\r
 418 }\r
 419 \r
 420 \r
 421 \r
 422 /* Credit to bootsnipp.com for the css for the color graph */\r
 423 .colorgraph {\r
 424     height: 5px;\r
 425     border-top: 0;\r
 426     background: #c4e17f;\r
 427     border-radius: 5px;\r
 428     background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
 429     background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
 430     background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
 431     background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
 432 }\r
 433 \r
 434 /* Radio  and CheckBoxes------------*/\r
 435 \r
 436 \r
 437 .funkyradio div {\r
 438     clear: both;\r
 439     overflow: hidden;\r
 440 }\r
 441 \r
 442 .funkyradio label {\r
 443     width: 100%;\r
 444     border-radius: 3px;\r
 445     border: 1px solid #D1D3D4;\r
 446     font-weight: normal;\r
 447 }\r
 448 \r
 449 .funkyradio input[type="radio"]:empty,\r
 450 .funkyradio input[type="checkbox"]:empty {\r
 451     display: none;\r
 452 }\r
 453 \r
 454 .funkyradio input[type="radio"]:empty ~ label,\r
 455 .funkyradio input[type="checkbox"]:empty ~ label {\r
 456     position: relative;\r
 457     line-height: 2.5em;\r
 458     text-indent: 3.25em;\r
 459     margin-top: 2em;\r
 460     cursor: pointer;\r
 461     -webkit-user-select: none;\r
 462     -moz-user-select: none;\r
 463     -ms-user-select: none;\r
 464     user-select: none;\r
 465 }\r
 466 \r
 467 .funkyradio input[type="radio"]:empty ~ label:before,\r
 468 .funkyradio input[type="checkbox"]:empty ~ label:before {\r
 469     position: absolute;\r
 470     display: block;\r
 471     top: 0;\r
 472     bottom: 0;\r
 473     left: 0;\r
 474     content: '';\r
 475     width: 2.5em;\r
 476     background: #D1D3D4;\r
 477     border-radius: 3px 0 0 3px;\r
 478 }\r
 479 \r
 480 .funkyradio input[type="radio"]:hover:not(:checked) ~ label,\r
 481 .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {\r
 482     color: #888;\r
 483 }\r
 484 \r
 485 .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,\r
 486 .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {\r
 487     content: '\2714';\r
 488     text-indent: .9em;\r
 489     color: #C2C2C2;\r
 490 }\r
 491 \r
 492 .funkyradio input[type="radio"]:checked ~ label,\r
 493 .funkyradio input[type="checkbox"]:checked ~ label {\r
 494     color: #777;\r
 495 }\r
 496 \r
 497 .funkyradio input[type="radio"]:checked ~ label:before,\r
 498 .funkyradio input[type="checkbox"]:checked ~ label:before {\r
 499     content: '\2714';\r
 500     text-indent: .9em;\r
 501     color: #333;\r
 502     background-color: #ccc;\r
 503 }\r
 504 \r
 505 .funkyradio input[type="radio"]:focus ~ label:before,\r
 506 .funkyradio input[type="checkbox"]:focus ~ label:before {\r
 507     box-shadow: 0 0 0 3px #999;\r
 508 }\r
 509 \r
 510 .funkyradio-default input[type="radio"]:checked ~ label:before,\r
 511 .funkyradio-default input[type="checkbox"]:checked ~ label:before {\r
 512     color: #333;\r
 513     background-color: #ccc;\r
 514 }\r
 515 \r
 516 .funkyradio-primary input[type="radio"]:checked ~ label:before,\r
 517 .funkyradio-primary input[type="checkbox"]:checked ~ label:before {\r
 518     color: #fff;\r
 519     background-color: #337ab7;\r
 520 }\r
 521 \r
 522 .funkyradio-success input[type="radio"]:checked ~ label:before,\r
 523 .funkyradio-success input[type="checkbox"]:checked ~ label:before {\r
 524     color: #fff;\r
 525     background-color: #5cb85c;\r
 526 }\r
 527 \r
 528 .funkyradio-danger input[type="radio"]:checked ~ label:before,\r
 529 .funkyradio-danger input[type="checkbox"]:checked ~ label:before {\r
 530     color: #fff;\r
 531     background-color: #d9534f;\r
 532 }\r
 533 \r
 534 .funkyradio-warning input[type="radio"]:checked ~ label:before,\r
 535 .funkyradio-warning input[type="checkbox"]:checked ~ label:before {\r
 536     color: #fff;\r
 537     background-color: #f0ad4e;\r
 538 }\r
 539 \r
 540 .funkyradio-info input[type="radio"]:checked ~ label:before,\r
 541 .funkyradio-info input[type="checkbox"]:checked ~ label:before {\r
 542     color: #fff;\r
 543     background-color: #5bc0de;\r
 544 }\r
 545 \r
 546 .btn-primary {\r
 547   color: #fff;\r
 548   background-color: #428bca;\r
 549   border-color: #357ebd;\r
 550   min-width:70px\r
 551 }\r
 552 \r
 553 .btn.outline {\r
 554     background: none;\r
 555     \r
 556 }\r
 557 .btn-primary.outline {\r
 558     border: 2px solid #0099cc;\r
 559     color: #0099cc;\r
 560 }\r
 561 .modal-header {\r
 562         /*background-color: #cccccc;*/\r
 563     background: linear-gradient(to bottom, #fbfbfb 0, #f6f6f6 70%, #f0f0f0 100%);\r
 564 }\r
 565 \r
 566 /* Tree */\r
 567 \r
 568 #tree1 ul li {\r
 569     list-style: none;\r
 570     text-align: left;\r
 571     margin-top: 7px;\r
 572 }\r
 573 \r
 574 /* Accordian Area */\r
 575 #accordionArea .panel-group .panel-title a:before {\r
 576     font-family: "Glyphicons Halflings";\r
 577     content:"\e259";/*\e094*/\r
 578     /*position: absolute;\r
 579     right: 20px;*/\r
 580     font-size: 20px;\r
 581     margin-right: 20px;\r
 582     text-decoration: none !important;\r
 583 }\r
 584 #accordionArea .panel-group .panel-title a.collapsed:before {\r
 585     content:"\e258";/*\e092*/\r
 586 }\r
 587 \r
 588 #accordionArea h3 {\r
 589     width: 100%;\r
 590     text-align: left;\r
 591     background-color: #eaeaea;\r
 592     border: none;\r
 593     padding: 8px;\r
 594     font-size: 20px;\r
 595 }\r
 596 #accordionArea h3 a {\r
 597     text-decoration: none;\r
 598 }\r
 599 #accordionArea .panel-group .panel {\r
 600     border: none;\r
 601     box-shadow: none;\r
 602     -webkit-box-shadow: none;\r
 603 }\r
 604  div.panel-body {\r
 605     text-align: justify;\r
 606 }\r
 607 \r
 608 /* Tab */\r
 609 #tabArea .tab-content div p {\r
 610     text-align: justify;\r
 611 }\r
 612 \r
 613 /*Table*/\r
 614 #tableArea h3 {\r
 615     text-align: left;\r
 616     border: none;\r
 617     padding-top: 5px;\r
 618 }\r
 619 \r
 620 #tableArea h3 span {\r
 621     font-size: 12px;\r
 622 }\r
 623 \r
 624 /* Vertical Tab */\r
 625 .nav-stacked {\r
 626     margin-top: 20px;\r
 627     text-align: left;\r
 628     border:none;\r
 629 }\r
 630 \r
 631 .nav-tabs>li.active>a {\r
 632     border-top: 3px solid #4ac9ff;\r
 633 }\r
 634 .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {\r
 635     border-top: 3px solid #4ac9ff;\r
 636 }\r
 637 .nav-tabs>li>a:hover {\r
 638     border-color: transparent;\r
 639     background-color: transparent;\r
 640 }\r
 641 .nav-stacked>li.active>a {\r
 642     background-color: #ccc;\r
 643     border: none;\r
 644     border-radius: 4px;\r
 645 }\r
 646 \r
 647 #vtabArea .tab-content .tab-pane {\r
 648     text-align: left;\r
 649 }\r
 650 #vtabArea .tab-content .tab-pane p {\r
 651     text-align: justify;\r
 652 }\r
 653 \r
 654 .link_active {\r
 655     /*background-color: lightslategrey;*/\r
 656     font-style: italic;\r
 657     color: #4ac9ff !important;\r
 658     background:#fafafa;\r
 659     border-left: 3px solid #4ac9ff;\r
 660 \r
 661 \r
 662 }\r
 663 \r
 664 /*input.ng-invalid {\r
 665     background-color:yellow;\r
 666 }*/\r
 667 \r
 668 /* Functional & Notification*/\r
 669 \r
 670 #myModal .modal-header, #msgModal .modal-header, #funModal .modal-header {\r
 671     padding: 9px 15px;\r
 672     border-radius: 5px 5px 0 0;\r
 673     color: #666;\r
 674 }\r
 675 \r
 676 #msgModal .modal-content {\r
 677     width: 70%;\r
 678     position: absolute;\r
 679     left: 15%;\r
 680     box-shadow: 0 6px 10px rgba(0,0,0,.3);\r
 681     -webkit-box-shadow: 0 6px 10px rgba(0,0,0,.3);\r
 682 }\r
 683 #msgModal .modal-footer, #funModal .modal-footer {\r
 684     border: none;\r
 685     margin: 0 auto;\r
 686     width: 100%;\r
 687     text-align: center;\r
 688 }\r
 689 \r
 690 \r
 691 #myInput {\r
 692     background-image: url('../thirdparty/images/searchicon.png'); /* Add a search icon to input */\r
 693     background-position: 10px 9px; /* Position the search icon */\r
 694     background-repeat: no-repeat; /* Do not repeat the icon image */\r
 695     width: 100%; /* Full-width */\r
 696     font-size: 16px; /* Increase font-size */\r
 697     padding: 5px 20px 5px 40px; /* Add some padding */\r
 698     border: 1px solid #ddd; /* Add a grey border */\r
 699     margin-bottom: 12px; /* Add some space below the input */\r
 700 }\r
 701 \r
 702 #myTable_search {\r
 703     border-collapse: collapse; /* Collapse borders */\r
 704     width: 100%; /* Full-width */\r
 705     border: 1px solid #ddd; /* Add a grey border */\r
 706     font-size: 18px; /* Increase font-size */\r
 707 }\r
 708 \r
 709 #myTable_search th, #myTable td {\r
 710     text-align: left; /* Left-align text */\r
 711     padding: 12px; /* Add padding */\r
 712 }\r
 713 \r
 714 #myTable_search tr {\r
 715     /* Add a bottom border to all table rows */\r
 716     border-bottom: 1px solid #ddd;\r
 717 }\r
 718 \r
 719 #myTable_search tr.header, #myTable tr:hover {\r
 720     /* Add a grey background color to the table header and on hover */\r
 721     background-color: #f1f1f1;\r
 722 }\r
 723 \r
 724 /* List */\r
 725 #listArea {\r
 726     margin-top: 25px;\r
 727 }\r
 728 #listArea .list {\r
 729     /*border: 1px solid #333;*/\r
 730     padding: 5px;\r
 731 }\r
 732 #listArea .list div {\r
 733     margin: 5px 0;\r
 734 }\r
 735 \r
 736 #menu_accordion {\r
 737     margin-top: 20px;\r
 738 }\r
 739 \r
 740 #menu_accordion li a{\r
 741     padding-left: 42px;\r
 742 }\r
 743 #menu_accordion li a:hover {\r
 744     color: #4ac9ff;\r
 745 }\r
 746 \r
 747 #rightContainer {\r
 748     margin-top:20px;\r
 749 }\r
 750 \r
 751 #panel1 li:first-child{\r
 752     margin-top:1px;\r
 753 }\r
 754 \r
 755 #menu_accordion #container, #menu_accordion #widgets, #menu_accordion #notifications, #menu_accordion #functional{\r
 756     margin-bottom : 0px;\r
 757     text-align : left;\r
 758     background-color: #F5F5F5;\r
 759 }\r
 760 \r
 761 #menu_accordion h5{\r
 762     margin-bottom : 0px;\r
 763     text-align : left;\r
 764     padding-left : 10px;\r
 765     cursor: pointer;\r
 766     letter-spacing: 3px;\r
 767     width:100%;\r
 768 }\r
 769 \r
 770 .tableAlign{\r
 771     text-align:left;\r
 772 }\r
 773 \r
 774 .chkboxAlign{\r
 775     text-align:center;\r
 776 }\r
 777 \r
 778 #provinceAction {\r
 779     text-align: left;\r
 780 }\r
 781 #provinceTable th {\r
 782     background-color: #e3e3e3;\r
 783 }\r
 784 \r
 785 #provinceTable.table-striped>tbody>tr:nth-child(even)>td {\r
 786     background-color:#fafafa;\r
 787 }\r
 788 \r
 789 #provinceTable.table-striped>tbody>tr:nth-child(odd)>td {\r
 790     background-color:#f7f7f7\r
 791 }\r
 792 #provinceTable.table-striped>tbody>tr:hover {\r
 793     background-color: red;\r
 794 }\r
 795 \r
 796 .prvdel{\r
 797     margin-left:20px;\r
 798 }\r
 799 \r
 800 .shortnoteHeader{\r
 801     margin-top:50px;\r
 802     text-align:left;\r
 803     font-weight: bold;\r
 804     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 805 }\r
 806 .shortnoteText{\r
 807     margin-top:20px;\r
 808     text-align:left;\r
 809     font-size:10px;\r
 810     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 811 \r
 812 }\r
 813 \r
 814 .ztree *{\r
 815     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 816 }\r
 817 \r
 818 .noChild_link_active {\r
 819     /*background-color: lightslategrey;*/\r
 820     font-style: italic;\r
 821     color: #4ac9ff !important;\r
 822     background:#fafafa;\r
 823 }\r
 824 \r
 825 .rmpadding{\r
 826     padding-left:0px !important;\r
 827     padding-right:0px !important;\r
 828 }\r
 829 \r
 830 #menu_accordion .collapsed span {\r
 831     background: url(../thirdparty/images/expand_arrow.png) 1px 3px no-repeat;\r
 832     display: block;\r
 833     float: left;\r
 834     margin-bottom: -1px;\r
 835     cursor: pointer;\r
 836     width: 100%;\r
 837     padding-left: 20px;\r
 838 }\r
 839 #menu_accordion span {\r
 840     background: url(../thirdparty/images/collapse_arrow.png) 1px 3px no-repeat;\r
 841     display: block;\r
 842     float: left;\r
 843     margin-bottom: -1px;\r
 844     cursor: pointer;\r
 845     width: 100%;\r
 846     padding-left: 20px;\r
 847 }\r
 848 \r
 849 .magic-radio + label{\r
 850     font-size:14px;\r
 851 }\r
 852 \r
 853 .panelbr{\r
 854     border-left:0px;\r
 855     border-right:0px;\r
 856 }\r
 857 \r
 858 .popover-title {\r
 859     margin: 0;\r
 860     padding: 8px 14px;\r
 861     font-size: 14px;\r
 862     font-weight: normal;\r
 863     line-height: 18px;}\r
 864 \r
 865 .customPopover{\r
 866     padding:10px 20px;\r
 867 }\r
 868 \r
 869 \r
 870 .css-form input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {\r
 871     background-color: #FA787E;\r
 872 }\r
 873 \r
 874 .css-form input.ng-valid.ng-touched, textarea.ng-valid.ng-touched {\r
 875     background-color: white;\r
 876 }\r
 877 \r
 878 .errMsg{\r
 879 \r
 880     color:red;\r
 881     float: left;\r
 882 }\r
 883 \r
 884 .customtable thead{\r
 885     background: #ECECEC;\r
 886 }\r
 887 \r
 888 .customtable th,.table td{\r
 889     /* padding-top: 3px!important; */\r
 890     padding-bottom: 3px!important;\r
 891 }\r
 892 \r
 893 .customtable tr,.customtable td, .customtable th{\r
 894     text-align:left;\r
 895 \r
 896 }\r
 897 \r
 898 .ng-table th.sortable .sort-indicator {\r
 899     width:100%;\r
 900     float:right;\r
 901 }\r
 902 \r
 903 .btn-group>.btn.active{\r
 904     z-index: 2;\r
 905     color: #fff;\r
 906     background-color: #428bca;\r
 907     border-color: #428bca;\r
 908     cursor: default;\r
 909 }\r
 910 \r
 911 .customtable tbody tr:hover td{\r
 912     background-color: #e6fbe0 !important;\r
 913 }\r
 914 \r
 915 .shortnote{\r
 916     width:100%;\r
 917     float:left;\r
 918 }\r
 919 \r
 920 .pagination{\r
 921     float:left;\r
 922 }\r
 923 \r
 924 .btnmrg{\r
 925     margin:0 5px 0 5px;\r
 926 }\r
 927 \r
 928 .labelstyle{\r
 929     text-align:left;\r
 930     font-size:12px;\r
 931     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 932 }\r
 933 \r
 934 .titlestyle{\r
 935     font-size:14px !important;\r
 936     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
 937 }