openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css

   1 /**\r
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *         http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 /***\r
  17 Responsive Theme. \r
  18 Based on http://getbootstrap.com/css/#responsive-utilities-classes\r
  19 ***/\r
  20 \r
  21 /***\r
  22 Fixed Footer\r
  23 ***/\r
  24 \r
  25 .page-footer-fixed.page-footer-fixed-mobile .footer {\r
  26   position: fixed;\r
  27   left: 0;\r
  28   right: 0;\r
  29   z-index: 10000;\r
  30   bottom: 0;\r
  31 }\r
  32 \r
  33 .page-footer-fixed.page-footer-fixed-mobile .page-container {\r
  34   margin-bottom: 20px !important;\r
  35 }\r
  36 \r
  37 .page-footer-fixed.page-footer-fixed-mobile.page-sidebar-fixed .footer {\r
  38   margin-left: 0 !important;\r
  39 }\r
  40 \r
  41 /***\r
  42 Form Medium Devices Up To Large Devices\r
  43 ***/\r
  44 \r
  45 @media (min-width: 992px) and (max-width: 1200px) {  \r
  46 \r
  47         .page-boxed .header.navbar .dropdown .username {\r
  48                 display: none;\r
  49         }       \r
  50 \r
  51 }\r
  52 \r
  53 @media (max-width: 1024px) {\r
  54         .hidden-1024 {\r
  55                 display: none;\r
  56         }\r
  57 } \r
  58 \r
  59 /***\r
  60 From Medium Devices Up To Larger Devices\r
  61 ***/\r
  62 \r
  63 @media (min-width: 992px) { \r
  64 \r
  65         /***\r
  66         Page sidebar\r
  67         ***/\r
  68         .page-sidebar {\r
  69                 width: 225px;\r
  70                 float: left;\r
  71                 position: relative;\r
  72                 margin-right: -100%;\r
  73         }\r
  74 \r
  75         .page-sidebar.navbar-collapse {\r
  76                 max-height: none !important;\r
  77         }\r
  78 \r
  79         /***\r
  80         Page content\r
  81         ***/\r
  82         .page-content-wrapper {\r
  83                 float: left;\r
  84                 width: 100%;\r
  85         }\r
  86 \r
  87         .page-content { \r
  88                 margin-left: 0px; \r
  89                 margin-top: 0px;\r
  90                 min-height: 500px; \r
  91                 padding: 20px 20px 0px 20px;\r
  92         }\r
  93 \r
  94         .page-content.no-min-height {\r
  95                 min-height: auto;\r
  96         }\r
  97 \r
  98         /***\r
  99         Footer\r
 100         ***/\r
 101         .footer {\r
 102                 clear: left;\r
 103         }\r
 104 \r
 105         /***\r
 106         Fixed Sidebar\r
 107         ***/\r
 108         .page-sidebar-fixed .page-content {\r
 109                 min-height: 500px; \r
 110         }\r
 111 \r
 112         .page-sidebar-fixed .page-sidebar {\r
 113                 position: fixed !important;\r
 114                 margin-left: 0;\r
 115                 top: 41px;\r
 116         }\r
 117 \r
 118         .page-sidebar-fixed ul.page-sidebar-menu > li.last {\r
 119                 margin-bottom: 15px !important;\r
 120         }\r
 121 \r
 122         .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar {\r
 123                 z-index: 10000;         \r
 124                 width: 35px;            \r
 125         }\r
 126 \r
 127         .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar .selected {\r
 128                 display: none;\r
 129         }\r
 130 \r
 131         .page-sidebar-fixed.page-sidebar-hover-on .page-content {\r
 132                 margin-left: 35px;\r
 133         }\r
 134 \r
 135         .page-sidebar-fixed.page-sidebar-hover-on .footer {\r
 136                 margin-left: 35px;\r
 137         }\r
 138 \r
 139         .page-sidebar-fixed .page-sidebar-closed .page-sidebar .sidebar-search .submit,\r
 140         .page-sidebar-fixed .page-sidebar .sidebar-toggler {\r
 141                 -webkit-transition: all  0.3s ease;\r
 142                -moz-transition: all  0.3s ease;\r
 143                  -o-transition: all  0.3s ease;\r
 144                     transition: all  0.3s ease;\r
 145         }\r
 146 \r
 147         .page-sidebar-fixed.page-sidebar-reversed .page-sidebar-closed .page-sidebar .sidebar-search .submit,\r
 148         .page-sidebar-fixed.page-sidebar-reversed .page-sidebar .sidebar-toggler {\r
 149                 -webkit-transition: none;\r
 150                -moz-transition: none;\r
 151                  -o-transition: none;\r
 152                     transition: none;\r
 153         }\r
 154 \r
 155         .page-sidebar-hovering {\r
 156                 overflow: hidden !important;\r
 157         }\r
 158 \r
 159         .page-sidebar-hovering .sub-menu,\r
 160         .page-sidebar-hovering span.title,\r
 161         .page-sidebar-hovering span.arrow {               \r
 162                 display: none !important;\r
 163         }\r
 164 \r
 165         .page-sidebar-hovering .submit {\r
 166                 opacity: 0;\r
 167                 width: 0 !important;\r
 168                 height: 0 !important;\r
 169         }\r
 170         \r
 171         /***\r
 172         Fixed Sidebar\r
 173         ***/\r
 174 \r
 175         .page-sidebar-fixed .footer {\r
 176           margin-left: 225px;\r
 177           background-color: #fff;\r
 178           padding: 8px 20px 5px 20px;\r
 179         }\r
 180 \r
 181         .page-sidebar-fixed .footer .footer-inner {\r
 182           color: #333;\r
 183         }\r
 184 \r
 185         .page-sidebar-fixed.page-sidebar-closed .footer {\r
 186           margin-left: 35px;\r
 187         }\r
 188 \r
 189         .page-sidebar-fixed .footer .footer-tools .go-top { \r
 190           background-color: #666;\r
 191         }\r
 192 \r
 193         .page-sidebar-fixed .footer .footer-tools .go-top i {\r
 194           color: #ddd;\r
 195         }\r
 196 \r
 197         /***\r
 198         Boxed Layout\r
 199         ***/\r
 200 \r
 201         .page-boxed     .header.navbar .navbar-brand {\r
 202                 margin-left: 0px !important;\r
 203                 width: 226px;\r
 204         }\r
 205 \r
 206         .page-boxed .header.navbar .navbar-brand img {\r
 207                 margin-left: 10px;\r
 208         }\r
 209 \r
 210         .page-boxed .header.navbar .navbar-nav {\r
 211           margin-right: 0px;\r
 212         }\r
 213 \r
 214         .page-boxed .footer {\r
 215                 padding: 8px 0 5px 0; \r
 216         }\r
 217 \r
 218         .page-boxed.page-sidebar-fixed .footer {\r
 219                 padding-right: 20px;\r
 220                 padding-left: 20px;\r
 221         }\r
 222         \r
 223         /***\r
 224         Sidebar Reversed\r
 225         ***/\r
 226 \r
 227         .page-sidebar-reversed .page-sidebar {\r
 228                 float: right;\r
 229                 margin-right: 0;\r
 230                 margin-left: -100%;\r
 231         }\r
 232 \r
 233         .page-sidebar-reversed.page-sidebar-fixed .page-sidebar {\r
 234                 margin-left: -225px;\r
 235         }\r
 236 \r
 237         .page-sidebar-reversed .page-content {\r
 238                 margin-left: 0;\r
 239                 margin-right: 225px;\r
 240         }\r
 241 \r
 242         .page-sidebar-reversed.page-sidebar-fixed .page-sidebar-wrapper {\r
 243                 position: relative;\r
 244                 float: right;\r
 245         }\r
 246 \r
 247         .page-sidebar-reversed.page-sidebar-fixed .footer {\r
 248                 margin-left: 0;\r
 249                 margin-right: 225px;\r
 250                 padding: 8px 20px 5px 20px; \r
 251         }\r
 252 \r
 253         .page-sidebar-reversed.page-sidebar-fixed.page-footer-fixed .footer {\r
 254                 margin-left: 0;\r
 255                 margin-right: 0; \r
 256         }\r
 257 \r
 258         .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .page-content {\r
 259                 margin-left: 0;\r
 260                 margin-right: 35px;\r
 261         }\r
 262 \r
 263         .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .footer {\r
 264                 margin-right: 35px;\r
 265         }\r
 266 \r
 267         /***\r
 268         Sidebar Closed\r
 269         ***/\r
 270 \r
 271         .page-sidebar-closed .page-sidebar .sidebar-toggler {  \r
 272                 margin-left: 3px;\r
 273         }\r
 274 \r
 275         .page-sidebar-closed .page-sidebar .sidebar-search .form-container {  \r
 276           width: 29px;\r
 277           margin-left: 3px; \r
 278         }\r
 279 \r
 280         .page-sidebar-closed .page-sidebar .sidebar-search .form-container .input-box {  \r
 281           border-bottom: 0 !important;\r
 282         }\r
 283 \r
 284         .page-sidebar-closed .page-sidebar .sidebar-search .form-container input[type="text"] {\r
 285           display: none;\r
 286         }\r
 287 \r
 288         .page-sidebar-closed .page-sidebar .sidebar-search .form-container .submit { \r
 289           margin-top: 5px !important;\r
 290           margin-left: 7px !important;\r
 291           margin-right: 7px !important;\r
 292           display: block !important;\r
 293         }\r
 294 \r
 295         .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {\r
 296           width: 255px;\r
 297           position: relative;\r
 298           z-index: 1;\r
 299           padding-top: 0px;\r
 300         }\r
 301 \r
 302         .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container input[type="text"] {  \r
 303           margin-top: 7px;\r
 304           margin-left: 8px;\r
 305           padding-left: 10px;\r
 306           padding-bottom: 2px;\r
 307           width: 185px;\r
 308           display: inline-block !important;\r
 309         }\r
 310 \r
 311         .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit {\r
 312           display: inline-block;\r
 313           width: 13px;\r
 314           height: 13px;\r
 315           margin: 11px 8px 9px 6px !important;\r
 316         }\r
 317 \r
 318         .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {\r
 319           background-repeat: no-repeat;\r
 320           width: 11px;\r
 321           height: 11px;\r
 322           margin: 12px 8px 9px 8px !important;\r
 323           display: inline-block !important;\r
 324           float: left !important;\r
 325         }\r
 326 \r
 327         .page-sidebar-closed .page-sidebar-menu > li > a .selected {\r
 328           right: -3px !important;\r
 329         }\r
 330 \r
 331         .page-sidebar-closed .page-sidebar-menu > li > a > .title,\r
 332         .page-sidebar-closed .page-sidebar-menu > li > a > .arrow {\r
 333           display: none !important;\r
 334         }\r
 335 \r
 336         .page-sidebar-closed .page-sidebar .sidebar-toggler {\r
 337           margin-right: 3px;\r
 338         }\r
 339 \r
 340         .page-sidebar-closed .page-sidebar .sidebar-search {\r
 341           margin-top: 6px;\r
 342           margin-bottom: 6px;\r
 343         }\r
 344 \r
 345         .page-sidebar-closed .page-sidebar-menu {\r
 346           width: 35px !important;\r
 347         }\r
 348 \r
 349         .page-sidebar-closed .page-sidebar-menu > li > a {\r
 350           padding-left: 7px;\r
 351         }\r
 352 \r
 353         .page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a {\r
 354           -webkit-transition: all 0.2s ease;\r
 355              -moz-transition: all 0.2s ease;\r
 356                -o-transition: all 0.2s ease;\r
 357                   transition: all 0.2s ease;\r
 358         }\r
 359 \r
 360         .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a {\r
 361             -webkit-transition: none;\r
 362                 -moz-transition: none;\r
 363                   -o-transition: none;\r
 364                      transition: none;\r
 365         }\r
 366 \r
 367         .page-sidebar-closed .page-sidebar-menu > li:hover {\r
 368           width: 236px !important;\r
 369           position: relative !important;\r
 370           z-index: 2000;\r
 371           display: block !important;\r
 372         }\r
 373 \r
 374         .page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover,\r
 375         .page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {\r
 376           width: 35px !important;\r
 377         }\r
 378 \r
 379         .page-sidebar-closed .page-sidebar-menu > li:hover .selected {\r
 380           display: none;\r
 381         }\r
 382 \r
 383         .page-sidebar-closed .page-sidebar-menu > li:hover > a > i {\r
 384           margin-right: 10px;\r
 385         }\r
 386 \r
 387         .page-sidebar-closed .page-sidebar-menu > li:hover .title {\r
 388           display: inline !important;\r
 389         }\r
 390 \r
 391         .page-sidebar-closed .page-sidebar-menu > li > .sub-menu {\r
 392           display: none !important;\r
 393         }\r
 394 \r
 395         .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {  \r
 396           width: 200px;\r
 397           position: absolute;\r
 398           z-index: 2000;\r
 399           left: 36px;\r
 400           margin-top: 0;\r
 401           top: 100%;\r
 402           display: block !important;\r
 403         }\r
 404 \r
 405         .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu,\r
 406         .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu > li > .sub-menu {\r
 407           width: 200px;\r
 408         }\r
 409 \r
 410         /* 2rd level sub menu*/\r
 411         .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > a {\r
 412           padding-left: 15px !important;\r
 413         }\r
 414 \r
 415         /* 3rd level sub menu*/\r
 416         .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > a {  \r
 417           padding-left: 30px !important;\r
 418         }\r
 419 \r
 420         /* 4rd level sub menu*/\r
 421         .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > .sub-menu > li > a {  \r
 422           padding-left: 45px !important;\r
 423         }\r
 424 \r
 425         /* sidebar container */\r
 426          \r
 427         .page-sidebar-closed  .page-sidebar {\r
 428           width: 35px;\r
 429         }\r
 430 \r
 431         .page-sidebar-closed  .page-content {\r
 432           margin-left: 35px;\r
 433         }\r
 434 \r
 435         /*** \r
 436         Sidebar Reversed & Sidebar Closed\r
 437         ***/\r
 438 \r
 439         .page-sidebar-reversed.page-sidebar-closed  .page-sidebar {\r
 440           margin-left: -35px;\r
 441           width: 35px;\r
 442         }\r
 443 \r
 444         .page-sidebar-reversed.page-sidebar-closed  .page-content {\r
 445           margin-left: 0 !important;\r
 446           margin-right: 35px !important;\r
 447         }\r
 448 \r
 449         .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover {\r
 450           margin-left: -201px;\r
 451         }\r
 452 \r
 453         .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover,\r
 454         .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {\r
 455           margin-left: 0;\r
 456         }\r
 457 \r
 458         .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {\r
 459           margin-left: -225px;\r
 460         }\r
 461 \r
 462         .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit {\r
 463           margin: 11px 8px 9px 12px !important;\r
 464           float: left !important;\r
 465         }\r
 466 \r
 467         .page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {\r
 468           margin: 12px 6px 9px 8px !important;\r
 469           float: right !important;\r
 470         }\r
 471 \r
 472         .page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {  \r
 473           left:auto;\r
 474           right: 36px;\r
 475         }\r
 476 \r
 477         .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .footer {\r
 478                 margin-right: 35px;\r
 479         }\r
 480 \r
 481         /***\r
 482         Fixed Footer\r
 483         ***/\r
 484 \r
 485         .page-footer-fixed .footer {\r
 486           position: fixed;\r
 487           left: 0;\r
 488           right: 0;\r
 489           z-index: 10000;\r
 490           bottom: 0;\r
 491         }\r
 492 \r
 493         .page-footer-fixed .page-container {\r
 494           margin-bottom: 20px !important;\r
 495         }\r
 496 \r
 497         .page-footer-fixed.page-sidebar-fixed .footer {\r
 498           margin-left: 0 !important;\r
 499         }\r
 500 \r
 501 }\r
 502 \r
 503 /***\r
 504 Up To Medium Devices\r
 505 ***/\r
 506 \r
 507 @media (max-width:991px) { \r
 508         \r
 509         /***\r
 510         Page header\r
 511         ***/\r
 512         .header.navbar {\r
 513                 padding: 0 20px 0 20px;\r
 514                 position: relative;\r
 515                 clear: both;\r
 516         }\r
 517 \r
 518         .page-header-fixed.page-header-fixed-mobile .navbar-fixed-top {\r
 519                 position: fixed;\r
 520         }\r
 521 \r
 522         .header.navbar .navbar-toggle {\r
 523                 display: inline-block;\r
 524         }\r
 525 \r
 526         .page-sidebar.navbar-collapse {\r
 527                 max-height: none; /* set some max height to have a scrollable menu on mobile devices */\r
 528         }\r
 529 \r
 530         .page-sidebar.navbar-collapse.collapse {\r
 531             display: none !important;\r
 532         }\r
 533 \r
 534         .page-sidebar.navbar-collapse.in {              \r
 535                 overflow: hidden !important;\r
 536                 overflow-y: auto !important;\r
 537                 display: block !important;\r
 538         }\r
 539 \r
 540         .page-full-width .page-sidebar-menu {\r
 541                 display: block;\r
 542         }\r
 543 \r
 544         .page-sidebar.navbar-collapse.navbar-no-scroll {\r
 545                 max-height: none !important;\r
 546         }\r
 547 \r
 548         .header.navbar .nav li.dropdown i {\r
 549                 display: inline-block;\r
 550                 position: relative;\r
 551                 top:1px;\r
 552                 right:0px;\r
 553         }\r
 554 \r
 555         .header.navbar .navbar-nav {\r
 556                 display: block;\r
 557                 margin-bottom: 0px !important;\r
 558         }\r
 559 \r
 560         .header.navbar .navbar-nav .open .dropdown-menu  {\r
 561                 position: absolute;\r
 562         }\r
 563 \r
 564         .header.navbar .navbar-nav {\r
 565                 display: inline-block;\r
 566         margin: 0 10px 0 0;\r
 567         }\r
 568   \r
 569         .header.navbar .navbar-nav > li {\r
 570         float: left;\r
 571         }\r
 572 \r
 573         .header.navbar .navbar-brand {\r
 574                 margin-left: 0px !important;\r
 575                 padding-left: 0px !important; \r
 576         }\r
 577 \r
 578         .header.navbar .navbar-brand img {\r
 579                 margin-left: 4px !important;\r
 580         }\r
 581 \r
 582 \r
 583         /***\r
 584         Header Search Box \r
 585         ***/\r
 586         \r
 587         .header.navbar .search-form {\r
 588                 display: none;\r
 589         }\r
 590 \r
 591         .page-sidebar .header.navbar-responsive-search {\r
 592                 display: block;\r
 593         }\r
 594 \r
 595         /***\r
 596         Page container\r
 597         ***/\r
 598         .page-container {\r
 599                 margin: 0 !important;\r
 600                 padding: 0 !important;\r
 601         }\r
 602 \r
 603         .page-header-fixed.page-header-fixed-mobile .page-container {\r
 604                 margin-top: 42px !important;\r
 605         }\r
 606 \r
 607         /***\r
 608         Page content\r
 609         ***/\r
 610         .page-content {\r
 611                 margin: 0px !important;\r
 612                 padding: 20px 20px 20px 20px !important;                \r
 613                 min-height: 280px; \r
 614         }\r
 615 \r
 616         /***\r
 617         Page sidebar\r
 618         ***/\r
 619         .page-sidebar {\r
 620                 border-top: 0 !important;\r
 621                 margin: 20px;\r
 622         }\r
 623 \r
 624         .page-sidebar.in {\r
 625                 border-top: 0 !important;\r
 626                 margin: 20px;\r
 627                 position: relative;\r
 628                 z-index: 5;\r
 629         }\r
 630 \r
 631         .header.navbar .sidebar-toggler,\r
 632         .page-sidebar .sidebar-toggler {\r
 633                 display: none;\r
 634         }\r
 635 \r
 636         .page-sidebar ul {\r
 637                 margin-top:0px;\r
 638                 width:100%;\r
 639         }\r
 640 \r
 641         .page-sidebar .selected {\r
 642                 display: none !important;\r
 643         }\r
 644 \r
 645         .page-sidebar .sidebar-search .input-box {\r
 646           width: 220px;\r
 647         }\r
 648 \r
 649         /***\r
 650         Styler panel\r
 651         ***/\r
 652         .styler-panel {\r
 653                 top:55px;\r
 654                 right:20px;\r
 655         }\r
 656 \r
 657         /***\r
 658         Boxed Layout\r
 659         ***/\r
 660         .page-boxed .header.navbar > .container,\r
 661         .page-boxed .footer > .container,\r
 662         .page-boxed > .container {\r
 663                 max-width: none !important;\r
 664                 margin: 0 !important;\r
 665                 padding: 0 !important;\r
 666         }\r
 667 \r
 668 }\r
 669 \r
 670 /***\r
 671 From Small Devices Up To Medium Devices\r
 672 ***/\r
 673  \r
 674 @media (min-width: 768px) and (max-width: 991px) { \r
 675 \r
 676         /***\r
 677         Body\r
 678         ***/\r
 679         body {\r
 680                 padding-top: 0px;\r
 681         }\r
 682 \r
 683         /***\r
 684         Page sidebar\r
 685         ***/\r
 686         .page-sidebar .btn-navbar.collapsed .arrow { \r
 687                 display: none;\r
 688         }       \r
 689 \r
 690         .page-sidebar .btn-navbar .arrow {\r
 691           position: absolute;\r
 692           right: 25px;\r
 693           width: 0; \r
 694           height: 0;\r
 695           top:50px;\r
 696           border-bottom: 15px solid #5f646b;\r
 697           border-left: 15px solid transparent; \r
 698           border-right: 15px solid transparent; \r
 699         }\r
 700 \r
 701         /***\r
 702         Boxed Layout\r
 703         ***/\r
 704         .page-boxed .header.navbar > .container,\r
 705         .page-boxed > .container {\r
 706                 margin: auto !important;\r
 707         }\r
 708 \r
 709         .page-boxed .header.navbar  {\r
 710                 margin: auto !important;\r
 711                 padding: 0;\r
 712         }\r
 713 \r
 714         .page-boxed .footer {\r
 715                 padding-left: 0;\r
 716                 padding-right: 0;\r
 717         }\r
 718 \r
 719 } \r
 720  \r
 721 /***\r
 722 Extra Small Devices Only\r
 723 ***/\r
 724 \r
 725 @media (max-width: 767px) { \r
 726         \r
 727         /***\r
 728         Page header\r
 729         ***/\r
 730         \r
 731         .header.navbar {\r
 732                 padding: 0 10px 0 10px;\r
 733         }\r
 734 \r
 735         .header.navbar .top-nav .nav{  \r
 736                 margin-top: 0px;\r
 737                 margin-right: 5px;\r
 738         }\r
 739 \r
 740         .header.navbar .nav > li > .dropdown-menu.notification:after, \r
 741         .header.navbar .nav > li > .dropdown-menu.notification:before {\r
 742                 margin-right: 160px;\r
 743         }\r
 744 \r
 745         .header.navbar .nav > li > .dropdown-menu.notification {\r
 746                 margin-right: -160px;\r
 747         }\r
 748 \r
 749         .header.navbar .nav > li > .dropdown-menu.inbox:after, \r
 750         .header.navbar .nav > li > .dropdown-menu.inbox:before {\r
 751                 margin-right: 110px;\r
 752         }\r
 753 \r
 754         .header.navbar .nav > li > .dropdown-menu.inbox {\r
 755                 margin-right: -110px;\r
 756         }\r
 757 \r
 758         .header.navbar .nav > li > .dropdown-menu.tasks:after, \r
 759         .header.navbar .nav > li > .dropdown-menu.tasks:before {\r
 760                 margin-right: 60px;\r
 761         }\r
 762 \r
 763         .header.navbar .nav > li > .dropdown-menu.tasks {\r
 764                 margin-right: -60px;\r
 765         }\r
 766 \r
 767         /* Header logo */\r
 768         .header.navbar .navbar-brand {\r
 769                 margin-left: 0px !important;\r
 770                 width: 110px;\r
 771         }\r
 772 \r
 773         /***\r
 774         Page content\r
 775         ***/\r
 776         .page-content {\r
 777                 padding: 20px 10px 10px 10px !important;\r
 778                 overflow: hidden;\r
 779         }\r
 780 \r
 781         /***\r
 782         Page title\r
 783         ***/\r
 784         .page-title {\r
 785                 margin-bottom: 20px;\r
 786                 font-size: 18px;\r
 787         }\r
 788 \r
 789         .page-title small {\r
 790                 font-size: 13px;\r
 791                 padding-top: 3px;\r
 792         }\r
 793         \r
 794         /***\r
 795         Styler pagel\r
 796         ***/\r
 797         .styler-panel {\r
 798                 top:58px;\r
 799                 right:12px;\r
 800         }       \r
 801 \r
 802         /***\r
 803         Page breadcrumb\r
 804         ***/\r
 805         .breadcrumb {\r
 806                 padding-left: 10px;\r
 807                 padding-right: 10px;\r
 808         }\r
 809 \r
 810         /***\r
 811         Portlet form action\r
 812         ***/\r
 813         .portlet-body.form .form-actions{\r
 814           padding-left: 15px;   \r
 815         } \r
 816 \r
 817 \r
 818         /***\r
 819         Form input validation states\r
 820         ***/\r
 821         .input-icon .input-error, \r
 822         .input-icon .input-warning, \r
 823         .input-icon .input-success { \r
 824                 top:-27px;\r
 825                 float: right;\r
 826                 right:10px !important;\r
 827         }       \r
 828 \r
 829         /***\r
 830         Advance tables\r
 831         ***/\r
 832         .table-advance tr td.highlight:first-child a {\r
 833                 margin-left: 8px;\r
 834         }\r
 835 \r
 836         /***\r
 837         Footer  \r
 838         ***/    \r
 839         .footer {\r
 840                 padding-left: 10px;\r
 841                 padding-right: 10px;            \r
 842         }       \r
 843         \r
 844         .footer .go-top {  \r
 845                 float: right;\r
 846                 display: block;\r
 847                 margin-right: 0px;\r
 848         }\r
 849 \r
 850         /***\r
 851         Vertical inline menu\r
 852         ***/\r
 853         .ver-inline-menu li.active:after {\r
 854                 display: none;\r
 855         }\r
 856 \r
 857         /***\r
 858         Form controls\r
 859         ***/\r
 860         .form-horizontal .form-actions {\r
 861                 padding-left: 180px;    \r
 862         }\r
 863 \r
 864         .portlet .form-horizontal .form-actions {\r
 865                 padding-left: 190px;    \r
 866         }\r
 867 }\r
 868 \r
 869 /***\r
 870 The Most Extra Small Devices Landscape Mode Only\r
 871 ***/\r
 872 \r
 873 @media (max-width: 580px) {\r
 874 \r
 875         .header.navbar .username {\r
 876                 display: none;\r
 877         }\r
 878 \r
 879 }\r
 880 \r
 881 @media (max-width: 480px) {\r
 882 \r
 883         /***\r
 884         Header navbar\r
 885         ***/\r
 886         .page-header-fixed.page-header-fixed-mobile .header.navbar {\r
 887                 height: 84px;\r
 888         }\r
 889 \r
 890         .page-header-fixed.page-header-fixed-mobile .page-container {\r
 891                 margin-top: 84px !important;\r
 892         }\r
 893 \r
 894         .header.navbar .navbar-nav {\r
 895                 display: block;\r
 896                 clear: both;\r
 897                 margin-top: 2px;\r
 898                 margin-right: 0;\r
 899         }\r
 900 \r
 901         .header.navbar .navbar-nav > li.dropdown .dropdown-toggle {\r
 902                 margin-top:-1px;\r
 903                 padding-left: 9px;\r
 904                 padding-right: 9px;\r
 905         }\r
 906 \r
 907         .header.navbar .navbar-nav > li.dropdown.language .dropdown-toggle,\r
 908         .header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle {\r
 909                 padding-left: 4px;\r
 910                 padding-right: 15px;\r
 911         }\r
 912 \r
 913         .header.navbar .navbar-nav li.dropdown .dropdown-toggle .badge {\r
 914                 top: 8px;\r
 915         }\r
 916 \r
 917         /***\r
 918         Page sidebar\r
 919         ***/\r
 920         .page-sidebar,\r
 921         .page-sidebar.in {\r
 922                 margin: 0 10px 10px 10px;\r
 923         }\r
 924 \r
 925         .page-header-fixed.page-header-fixed-mobile .page-sidebar,\r
 926         .page-header-fixed.page-header-fixed-mobile .page-sidebar.in {\r
 927                 margin-top: 10px;\r
 928         }\r
 929 \r
 930         /***\r
 931         Page title\r
 932         ***/\r
 933         .page-title small {\r
 934                 display: block;\r
 935                 clear: both;\r
 936         }\r
 937 \r
 938         /***\r
 939         Forms\r
 940         ***/\r
 941         .portlet .form-horizontal .form-actions {\r
 942                 padding-left: 10px;     \r
 943         }\r
 944 \r
 945         /***\r
 946         Dashboard date range panel\r
 947         ***/\r
 948         .page-content .breadcrumb .dashboard-date-range  {\r
 949                 padding-bottom: 8px;\r
 950         } \r
 951 \r
 952         .page-content .breadcrumb .dashboard-date-range span {\r
 953                 display: none;\r
 954         }       \r
 955 \r
 956         .page-content .breadcrumb > .btn-group span {\r
 957                 display: none;\r
 958         }\r
 959 \r
 960         .page-content .breadcrumb > .btn-group > .btn {\r
 961                 padding-left: 7px;\r
 962                 padding-right: 7px;\r
 963         }\r
 964 \r
 965         /***\r
 966         Hidden phone\r
 967         ***/\r
 968         .hidden-480 {\r
 969                 display: none !important;\r
 970         }\r
 971 }\r
 972 \r
 973 /***\r
 974 The Most Extra Small Devices Portrait Mode Only\r
 975 ***/\r
 976 \r
 977 @media (max-width: 320px) {\r
 978 \r
 979         /***\r
 980         Hidden phone\r
 981         ***/\r
 982         .hidden-320 {\r
 983                 display: none;\r
 984         }\r
 985 \r
 986         .header.navbar .navbar-brand {\r
 987                 width: 100px;\r
 988         }       \r
 989 }