/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Small Desktop ---------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- Animations ------------------------------- II. Regions -------------------------------------- 01. Container -------------------------------- 02. Content ---------------------------------- 03. Footer ----------------------------------- Small Desktop ---------------------------- 04. Header ----------------------------------- Small Desktop ---------------------------- 05. Header-guideline ------------------------- 06. Main ------------------------------------- Small Desktop ---------------------------- 07. Shell ------------------------------------ 08. Sidebar ---------------------------------- 09. Wrapper ---------------------------------- III. Modules -------------------------------------- 01. Article ---------------------------------- Small Desktop ---------------------------- 02. Article-primary -------------------------- Article-primary-alt ---------------------- 03. Article-secondary ------------------------ 04. Article-with-panels ---------------------- 05. Button ----------------------------------- Button Block ----------------------------- 06. Btn-menu --------------------------------- 07. Btn-back --------------------------------- 08. Btn-primary ------------------------------ 09. Btn-round -------------------------------- 10. Btn-bordered ----------------------------- Small Desktop ---------------------------- 11. Btn-animate ------------------------------ Small Desktop ---------------------------- 12. Btn-alt ---------------------------------- 13. Btn-grey --------------------------------- 14. Btn-upload ------------------------------- 15. Btn-add-device --------------------------- 16. Btn-guideline ---------------------------- 17. Card ------------------------------------- Small Desktop ---------------------------- 18. Card secondary --------------------------- 19. Card-active ------------------------------ 20. Card-expert ------------------------------ 21. Card-guideline --------------------------- 22. Conenction ------------------------------- Small Desktop ---------------------------- 23. Connection-secondary --------------------- Small Desktop ---------------------------- 24. Network ---------------------------------- Small Desktop ---------------------------- 25. Form Elements ---------------------------- 26. Form-control ----------------------------- 27. Checkbox --------------------------------- 28. Checkbox-large --------------------------- 29. Checkbox-small --------------------------- 30. Radio ------------------------------------ 31. Select ----------------------------------- Select-alt ------------------------------- Small Desktop ---------------------------- Select-large------------------------------//francis 20181031 add 32. File upload ------------------------------ 33. Form-hint -------------------------------- 34. Form-login ------------------------------- Small Desktop ---------------------------- 35. Form-wifi -------------------------------- Small Desktop ---------------------------- 36. Form-add-url ----------------------------- 37. Form-settings ---------------------------- Form-entry ------------------------------- Form-entry ------------------------------- 38. Ico -------------------------------------- 39. Ico-arrow-left --------------------------- 40. ico-globe -------------------------------- Small Desktop ---------------------------- 41. Intro ------------------------------------ 42. List ------------------------------------- List-modes ------------------------------- 43. List-dots -------------------------------- Small Desktop ---------------------------- 44. List-componenets ------------------------- Small Desktop ---------------------------- 45. List-popup-actions ----------------------- 46. List-popup-actions-alt ------------------- Small Desktop ---------------------------- 47. List-popup-actions-secondary ------------- Small Desktop ---------------------------- 48. List-modal-actions ----------------------- Small Desktop ---------------------------- 49. List-schedule-dates ---------------------- Small Desktop ---------------------------- 50. List-weather-states ---------------------- Small Desktop ---------------------------- 51. list-network-actions --------------------- Small Desktop ---------------------------- 52. List Network actions --------------------- Small Desktop ---------------------------- 53. List-banned ------------------------------ 54. List-services ---------------------------- 55. List-details ----------------------------- Small Desktop ---------------------------- 56. Logo ------------------------------------- Small Desktop ---------------------------- 57. Modal ------------------------------------ Small Desktop ---------------------------- 58. Modal-content-secondary ------------------ 59. Modal-wifi ------------------------------- Small Desktop ---------------------------- 60. Modal-content-schedule ------------------- Small Desktop ---------------------------- 61. Modal-network ---------------------------- 62. Modal-parent-control --------------------- Small Desktop ---------------------------- 63. Modal-services --------------------------- 64. Modal-wps -------------------------------- 65. Nav-show --------------------------------- Small Desktop ---------------------------- 66. Nav-secondary-show ----------------------- 67. Nav -------------------------------------- 68. Navbar-nav ------------------------------- 69. Nav-secondary ---------------------------- Small Desktop ---------------------------- 70. Nav-tertiary ----------------------------- Small Desktop ---------------------------- 71. Nav-tabs --------------------------------- Small Desktop ---------------------------- 72. Nav-tabs-alt ----------------------------- Small Desktop ---------------------------- 73. Network-item ----------------------------- Small Desktop ---------------------------- 74. Network-item-secondary ------------------- 75. Network-item-secondary-alt --------------- 76. Network ---------------------------------- Small Desktop ---------------------------- 77. Network-speed ---------------------------- Small Desktop ---------------------------- 78. Network-secondary ------------------------ Small Desktop ---------------------------- 79. Network-detail --------------------------- 80. Network-detail-progress ------------------ Small Desktop ---------------------------- 81. Panel ------------------------------------ Small Desktop ---------------------------- 82. Panel-default ---------------------------- 83. Panel-nested ----------------------------- 84. Popup ------------------------------------ 85. Popup-nested-secondary ------------------- Small Desktop ---------------------------- 86. Schedule --------------------------------- Small Desktop ---------------------------- 87. Schedule-secondary ----------------------- 88. Section ---------------------------------- 89. Section-settings ------------------------- Small Desktop ---------------------------- 90. Section-panels --------------------------- 91. Section-welcome -------------------------- Small Desktop ---------------------------- 92. Section-login ---------------------------- Small Desktop ---------------------------- 93. Section-install -------------------------- Small Desktop ---------------------------- 94. Section-guideline ------------------------ Small Desktop ---------------------------- 95. Setting ---------------------------------- 96. Slider ----------------------------------- 97. Status-item ------------------------------ 98. Step ------------------------------------- 99. Step-alt --------------------------------- 100. Slide-in -------------------------------- 101. Switch ---------------------------------- 102. Tab ------------------------------------- Small Desktop ---------------------------- 103. Tab-pane -------------------------------- Small Desktop ---------------------------- 104. Tab-pane-secondary ---------------------- Small Desktop ---------------------------- 105. Table ----------------------------------- Small Desktop ---------------------------- 106. Table-schedule-time --------------------- Small Desktop ---------------------------- 107. Table-details --------------------------- 108. Widget ---------------------------------- IV. Themes --------------------------------------- 01. Custom Scrollbar ------------------------- 02. IE Fixes --------------------------------- IE10 ------------------------------------- IE11 ------------------------------------- Edge ------------------------------------- 03. No-Touch --------------------------------- Navigation ------------------------------- List-modes ------------------------------- Form-settings ---------------------------- Form-entry ------------------------------- Checkboxes ------------------------------- Radios ----------------------------------- Switch ----------------------------------- Schedule --------------------------------- */ .ico-arrow-left-red { background-image: url(images/sprite.png); background-position: 0% 0%; background-size: 100% 100%; width: 18px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow-left-red { background-image: url(images/sprite.@2x.png); background-position: 0% 0%; background-size: 100% 100%; width: 18px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; }} .header .header-inner:after, .form-settings .network-items:after, .list-modes:after, .list-components:after, .list-popup-actions-alt li:after, .list-popup-actions-secondary li:after, .list-banned li:after, .network-item-secondary-alt:after, .schedule:after, .schedule-secondary .schedule-inner:after, .no-touch .form-settings .network-items:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, a label, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], /*francis 20190410 add*/ i.icon-edit, i.icon-delete, i.fa-minus-circle, i.fa-pencil-square-o, /*end*/ label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: not-allowed/*default*/; }/*francis 20181031 add*/ select[disabled] + i{ background-color: #eee;} button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; resize: none; width:100%;} button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #e5e5e5; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.3; color: #4c4c4c; } a { color: inherit; } a:hover, a:focus { text-decoration: none; color: inherit; outline: 0; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.65em; } h1 { font-size: ; } h2 { font-size: 29px; } h3 { font-size: 23px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.3em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } @media (min-width: 768px) { h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 26px; } h5 { font-size: 22px; } h6 { font-size: 20px; } } /* Small Desktop */ @media (min-width: 1200px) { h2 { font-size: 29px; } h3 { font-size: 23px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'HelveticaNeue'; src: url('fonts/helveticaneue-light-webfont.eot'); src: url('fonts/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneue-light-webfont.woff2') format('woff2'), url('fonts/helveticaneue-light-webfont.woff') format('woff'), url('fonts/helveticaneue-light-webfont.ttf') format('truetype'), url('fonts/helveticaneue-light-webfont.svg#helvetica_neuelight') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeue.eot'); src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'), url('fonts/HelveticaNeue.woff') format('woff'), url('fonts/HelveticaNeue.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'HelveticaNeue'; src: url('fonts/helveticaneue-medium-webfont.eot'); src: url('fonts/helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneue-medium-webfont.woff2') format('woff2'), url('fonts/helveticaneue-medium-webfont.woff') format('woff'), url('fonts/helveticaneue-medium-webfont.ttf') format('truetype'), url('fonts/helveticaneue-medium-webfont.svg#helvetica_neuemedium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'HelveticaNeue'; src: url('fonts/helveticaneue-bold-webfont.eot'); src: url('fonts/helveticaneue-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneue-bold-webfont.woff2') format('woff2'), url('fonts/helveticaneue-bold-webfont.woff') format('woff'), url('fonts/helveticaneue-bold-webfont.ttf') format('truetype'), url('fonts/helveticaneue-bold-webfont.svg#helvetica_neuebold') format('svg'); font-weight: 700; font-style: normal; } /*francis 20181031 add for restruct style*/ .color-red{ color: #291782!important; } .color-lightgrey{ color: #b2b2b2!important; } .color-background{ color: #e5e5e5!important; } .backcolor-background{ background-color: #e5e5e5!important; } /*francis end*/ /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* ellips */ /*francis 20181031 add*/ @media (min-width: 768px) { .elli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: not-allowed/*default*/; }/*francis 20181031 add*/ /*francis 20180926 add*/ .list-radios .radio-alt input[type="radio"]:disabled + label:after { background-color: #bfbfbf; border: 0; } .list-radios .radio-alt input[type="radio"]:disabled + label { cursor: not-allowed; } /*francis end*/ /* Grid */ [class^="col-"] { padding: 0 4px; } .row { margin: 0 -4px; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 768px) { .hidden-desktop { display: inline-block; } .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 769px) and (max-width: 992px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 993px) and (max-width: 1024px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1025px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } @media (min-width: 769px) { .no-touch .hidden-desktop { display: none !important; } } @media (min-width: 1201px) { .hidden-desktop { display: none !important; } } /*Animations */ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes rotate-ie { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-ie { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 187; } 50% {stroke-dashoffset: 46.75; -webkit-transform:rotate(135deg); transform:rotate(135deg); } 100% {stroke-dashoffset: 187; -webkit-transform:rotate(450deg); transform:rotate(450deg); } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% {stroke-dashoffset: 46.75; -webkit-transform:rotate(135deg); transform:rotate(135deg); } 100% {stroke-dashoffset: 187; -webkit-transform:rotate(450deg); transform:rotate(450deg); } } @-webkit-keyframes colors { 0% { stroke: #9acef4; } 50% { stroke: #3fa8f4; } 100% { stroke: #9acef4; } } @keyframes colors { 0% { stroke: #9acef4; } 50% { stroke: #3fa8f4; } 100% { stroke: #9acef4; } } @-webkit-keyframes progress { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes progress { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { padding: 0 4px; } @media (min-width: 768px) { .container { padding: 0 15px; } } @media (min-width: 1024px) { .container { padding: 0 4px; } } /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 6px 0; text-align: center; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.29); font-size: 0; z-index: 4; } .footer .btn { margin: 0 6px; } .footer .container-fluid { padding: 0 4px; } .footer + .nav-tertiary { bottom: 72px; } @media (min-width: 768px) { .footer { padding: 18px 0; } .footer .btn { margin: 0 29px; } .footer + .nav-tertiary { bottom: 102px; } } /* Small Desktop */ @media (min-width: 1200px) { .footer { padding: 16px 0; } .footer .btn { margin: 0 15px; } .footer .container-fluid { max-width: 1200px; margin: 0; } .footer .footer-inner { text-align: right; padding-right: 148px; } .footer + .nav-tertiary { bottom: 84px; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { background: #fff; position: fixed; top: 0; left: 0; width: 100%; padding: 11px 0; z-index: 5; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.29);} .header .header-inner { position: relative; z-index: 1; } .header .header-inner:after { } .header .nav-show { position: absolute; top: 50%; left: 3px; margin-top: -6px; } .header .header-content { float: right; } .header .header-content .nav-secondary-show { padding-right: 0px; } .header .navbar-nav { margin-right: 63px; } .header h6 { color: #1E114B; position: absolute; top: 0; left: 50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); margin: 0; width: 100%; text-align: center; } @media (min-width: 768px) { .header { padding: 21px 0 19px;} .header .nav-show { left: 11px; } .header .header-content { margin-right: 3px; } .header .header-content .nav-secondary-show { padding-right: 11px; } .header h6 { margin-top: -3px; } } @media (min-width: 1024px) { .header .navbar-nav { margin-right: 139px; } } /* Small Desktop */ @media (min-width: 1200px) { .header .container-fluid { max-width: 1200px; margin: 0; } .header h6 { font-size: 20px; font-weight: 400; } } /* ------------------------------------------------------------ *\ Header-guideline \* ------------------------------------------------------------ */ .header-guideline h6 { color: #4c4c4c; } @media (min-width: 768px) { .header-guideline { padding: 22px 0 20px; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main-alt { padding: 40px 0; } @media (min-width: 768px) { .main-alt { padding: 60px 0 82px; } } /* Small Desktop */ @media (min-width: 1200px) { .main-alt { padding:60px 0 62px 256px; } .main .container { width: auto; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1220px; padding-left: 10px; padding-right: 10px; margin: auto; } .shell-fluid { max-width: none; } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar { width: 240px; position: fixed; top: 0; left: 0; bottom: 0; background: #fff; padding: 16px 0; z-index: 10; overflow-y: auto; -webkit-transform:translate(-240px); -ms-transform:translate(-240px); transform:translate(-240px); transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;} .sidebar.active { -webkit-transform:translate(0); -ms-transform:translate(0); transform:translate(0);} .sidebar .list-modes { margin-bottom: 20px; padding: 0 16px; } @media (min-width: 768px) { .sidebar { width: 300px; -webkit-transform: translate(-300px); -ms-transform: translate(-300px); transform: translate(-300px); } .sidebar .list-modes { padding: 0 24px; margin-bottom: 33px; } } @media (min-width: 1200px) { .sidebar { padding-top: 60px; width: 256px;} .sidebar .list-modes { margin-bottom: 24px; } .sidebar { -webkit-transform:translate(0); -ms-transform:translate(0); transform:translate(0); } } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; position: relative; } .wrapper .expert-visible { display: none; } .wrapper.expert-toggle .card-expert { display: inline-block; opacity: 1; visibility: visible; } .wrapper.expert-toggle .expert-visible { display: block; } .wrapper.expert-toggle .nav-tabs .expert-visible { display: inline-block; } .wrapper.expert-toggle .list-expert { display: inline-block; opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ List about all menu \* ------------------------------------------------------------ */ .list-expert { opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;} /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { background: #fff; border-radius: 4px; overflow: hidden; } .article a {box-shadow:inset 0 -3px #0ff; } .article a:hover { box-shadow:none; background: #0ff; } .article img { width: 100%; height: auto; } .article [class^="col-"] { margin-bottom: 28px; } .article h1 {font-size: 30px; margin: 0; color: #291782; } .article h2 { font-size: 16px; font-weight: 400; line-height: 1.38; margin-top: 23px; } .article h2 span { display: block; margin-bottom: 6px; } .article h3 { font-size: 14px; font-weight: 700; margin:18px 0 15px; } .article ol, .article ul { list-style: none; font-size: 14px; } .article ol > li {margin: 0 0 2px; text-indent: -8px; padding-left: 18px; list-style-type: none; counter-increment: item; } .article ol > li:before {display: inline-block; font-weight: bold; text-align: right; content: counter(item) "."; } .article ul > li { margin-bottom: 2px; } .article ul > li strong { width: 150px; display: inline-block; } .article ul > li:before { content: ''; display: inline-block; vertical-align: middle; width: 4px; height: 4px; background: #4c4c4c; border-radius: 50%; margin-top: -2px; margin-right: 10px; } .article .article-body { padding: 0 12px; font-size: 12px; line-height: 1.5; } .article .article-body-offset { padding-bottom: 42px; } .article .article-foot { padding: 17px 48px 16px; background: #4d4d4d; color: #fff; text-align: right; display: none; } .article .article-foot a { box-shadow:none; text-align: right; font-size: 18px; } .article .article-foot a:hover { background-color: transparent; color: #291782; } .article .article-foot a i { font-size: 32px; vertical-align: bottom; position: relative; bottom: -4px; right: -2px; } .article .article-foot a span { display: inline-block; vertical-align: bottom; margin-right: 10px; } .article .article-foot a small { display: block; font-size: 14px; font-weight: 300; } .article .title-offset { padding-top: 16px; } @media (min-width: 768px) { .article h1 { font-size: 40px; font-weight: 400; } .article h2 { font-size: 18px; margin-bottom: 19px; } .article h3 { margin: 22px 0 18px; } .article ol, .article ul { font-size: 16px; } .article .article-body { padding: 0 48px; font-size: 14px; line-height: 1.29;} .article .article-body-offset { padding-bottom: 42px; } .article .article-body > h2 + p { margin-top: -4px; } .article [class^="col-"] { padding: 0 16px; font-size: 12px; line-height: 1.5; margin-bottom: 42px; } .article .row { margin: 0 -12px; } } @media (min-width: 992px) { .article .article-body { padding: 0 72px; } .article .article-body-offset { padding-bottom: 42px; } .article [class^="col-"] { padding: 0 18px; } .article .row { margin: 0 -18px; } .article .article-foot { padding: 17px 72px 16px;} } /* Small Desktop */ @media (min-width: 1200px) { .article .article-foot { display: block; } } /* ------------------------------------------------------------ *\ Article-primary \* ------------------------------------------------------------ */ .article-primary h1 { font-weight: 300; color: #fff; } .article-primary .article-head { background: #291782; padding: 43px 12px 24px; margin-bottom: 29px; } @media (min-width: 768px) { .article-primary h1 { font-size: 50px; } .article-primary .article-head { padding: 94px 47px 36px;} .article-primary .article-inner { padding-top: 1px; } .article-primary .article-inner > h2 { margin-top: 18px; } } @media (min-width: 992px) { .article-primary .article-head { padding: 92px 72px 38px;} } /* Article-primary-alt */ .article-primary-alt .article-body { padding-bottom: 44px; } .article-primary-alt .article-inner img { margin: 22px 0; } /* ------------------------------------------------------------ *\ Article-secondary \* ------------------------------------------------------------ */ .article-secondary .article-head { padding: 42px 12px 30px; } .article-secondary .article-inner { padding-top: 18px; } .article-secondary .article-inner > h2 { margin-top: 0; } @media (min-width: 768px) { .article-secondary .article-head { padding: 104px 47px 10px; } .article-secondary .article-inner { padding-top: 23px; } .article-secondary .article-inner + .article-inner { padding-top: 0; } } @media (min-width: 992px) { .article-secondary .article-head { padding: 104px 72px 10px; } } /* ------------------------------------------------------------ *\ Article-with-panels \* ------------------------------------------------------------ */ .article-with-panels .panel-nested .panel-head { margin: 0 -14px; } .article-with-panels .panel-nested .panel-head a {box-shadow:none; } .article-with-panels .panel-nested .panel-head a:hover { background: #f2f2f2; } @media (min-width: 768px) { .article-with-panels .panel-nested .panel-head { margin: 0 -50px; } .article-with-panels .row { margin: 0 -16px; } } @media (min-width: 992px) { .article-with-panels .panel-nested .panel-head { margin: 0 -74px; } .article-with-panels .row { margin: 0 -18px; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; font-size: 18px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } @media (min-width: 768px) { .btn { font-size: 20px; } } @media (min-width: 1200px) { .btn { font-size: 18px; } } /* ------------------------------------------------------------ *\ Btn-menu \* ------------------------------------------------------------ */ .btn-menu { display: inline-block; } .btn-menu .btn-inner { display: inline-block; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); font-size: 30px; text-align: center; line-height: 48px; position: relative; z-index: 20; color: #291782; } .btn-menu .btn-inner:hover { color: #1E114B; } .btn-menu i { -webkit-transform: none; -ms-transform: none; transform: none; transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; } .btn-menu.active i { -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); margin-left: -1px; } .btn-menu:after { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: ''; opacity:0; visibility: hidden; transition: opacity .5s ease-in-out, visibility .5s ease-in-out; z-index: 10; } .btn-menu.active:after { opacity:1; visibility: visible; } @media (min-width: 768px) { .btn-menu .btn-inner { width: 56px; height: 56px; line-height: 56px; font-size: 36px; padding-top: 2px; } } /* ------------------------------------------------------------ *\ Btn-back \* ------------------------------------------------------------ */ .btn-back .btn-inner { font-size: 22px; } /* ------------------------------------------------------------ *\ Btn-primary \* ------------------------------------------------------------ */ .btn-primary { background: #291782; border: none; border-radius: 2px; box-shadow: none; padding-bottom: 4px; } .btn-primary:hover { background: #1E114B; } .btn-primary:focus, .btn-primary:active, .btn-primary:active:hover { color: #ffffff; background-color: #1E114B; } @media (min-width: 768px) { .btn-primary { padding-bottom: 9px; } } @media (min-width: 1200px) { .btn-primary { padding:5px 0; } } /* ------------------------------------------------------------ *\ Btn-round \* ------------------------------------------------------------ */ .btn-round { display: inline-block; vertical-align: middle; font-size: 22px; color: #fff; width: 40px; height: 40px; border-radius: 50%; background: #291782; transition: all .3s; line-height: 38px; } .btn-round:hover { background: #4d4d4d; color: #fff; } @media (min-width: 768px) { .btn-round { font-size: 20px; } } /* ------------------------------------------------------------ *\ Btn-bordered \* ------------------------------------------------------------ */ .btn-bordered { border: 2px solid #ccc; font-size: 10px; padding:5px 8px 2px; } .btn-bordered span { display: block; } .btn-bordered i { color: #291782; font-size: 25px; margin-bottom: 1px; } @media (min-width: 768px) { .btn-bordered { font-size: 13px; padding:5px 9px 2px; } .btn-bordered i { font-size: 30px; margin-bottom: 4px; } } /* Small Desktop */ @media (min-width: 1200px) { .btn-bordered { font-size: 10px; padding:5px 8px 2px; } .btn-bordered i { font-size: 25px; margin-bottom: 0px; } } /* ------------------------------------------------------------ *\ Btn-animate \* ------------------------------------------------------------ */ .btn-animate { overflow: hidden; background: #bfbfbf; border-radius: 2px; max-width: 240px; color: #fff; margin: 0 auto; font-size: 18px; position: relative; padding: 5px 12px; border: none; } .btn-animate:hover { color: #fff; } .btn-animate span { position: relative; z-index: 1; } .btn-animate:before { content: ''; background: #291782; position: absolute; top: 0; left: 0; bottom: 0; width: 0; } @media (min-width: 768px) { .btn-animate { font-size: 20px; max-width: 304px; padding: 8px 12px 9px;} } /* Small Desktop */ @media (min-width: 1200px) { .btn-animate { font-size: 18px; max-width: 240px; padding: 5px 12px;} } /* ------------------------------------------------------------ *\ Btn-alt \* ------------------------------------------------------------ */ .btn-alt { display: inline-block; border-radius: 4px; font-size: 18px; width: 134px; color: #fff; background: #291782; padding: 4px 12px; } .btn-alt:focus, .btn-alt:hover { color: #fff; background: #1E114B; } @media (min-width: 768px) { .btn-alt { width: 200px; font-size: 20px; padding: 6px 12px 8px; } } @media (min-width: 1200px) { .btn-alt { width: 145px; font-size: 14px; padding: 5px 12px; border-radius: 2px; border: none; } } /* ------------------------------------------------------------ *\ Btn-grey \* ------------------------------------------------------------ */ .btn-grey { background: #ccc; color: #fff; transition: background .3s;} .btn-grey:hover { color: #fff; background: #1E114B; } /* ------------------------------------------------------------ *\ Btn-upload \* ------------------------------------------------------------ */ .btn-upload { font-size: 16px; font-weight: 400; } @media (min-width: 768px) { .btn-upload { font-size: 14px; padding: 3px 18px; } } /* ------------------------------------------------------------ *\ Btn-add-device \* ------------------------------------------------------------ */ .btn-add-device { border: 1px solid #f8f8f8; font-size: 22px; text-align: center; padding: 2px 0 3px; } .btn-add-device span { display: block; font-size: 10px; text-transform: none; } /* ------------------------------------------------------------ *\ Btn-guideline \* ------------------------------------------------------------ */ .btn-guideline .btn-inner { color: #291782; } /* ------------------------------------------------------------ *\ Card \* ------------------------------------------------------------ */ .cards { list-style: none; font-size: 0; margin: 4px -2px 0; } .card { display: inline-block; width: 100%; max-width: calc(50% - 4px); height: 120px; vertical-align: middle; background: #fff; margin: 0 2px 4px; border-radius: 1px; padding: 22px 0 0; position: relative; text-align: center; color: #291782; } .card > a { display: block; width: 100%; height: 100%; font-size: 12px; line-height: 1; } .card p { margin-bottom: 0; color: #1E114B; } .card p + p { margin-top: 5px; } .card .card-schedule { position: absolute; top: 3px; left: 3px; font-size: 11px; color: #C6C6C6; } .card .status { font-weight: 700; color: #9C80FF; } .card .card-icon { font-size: 50px; height: 55px; } .card .card-icon-large { font-size: 54px; } .card .card-icon-small { font-size: 44px; } .card .card-icon-xlarge { font-size: 60px; position: relative; top: -5px; } .card-content { display: table; width: 100%; height: 40px; } .card-content-inner { display: table-cell; vertical-align: middle; } .card .status-countdown .countdown-value { display: none; } .card.counting { background: #4d4d4d; color: #fff; } .card.counting .status, .card.counting p { color: #fff; } .card.counting .ico-recycle path { fill: #ffffff; } .card.counting .status-countdown strong { display: none; } .card.counting .status-countdown .countdown-value { display: block; } @media (min-width: 768px) { .cards { max-width: 720px; text-align: left; } .card { max-width: 200px; height: 156px; padding-top: 30px; margin: 20px 19px; } .card > a { font-size: 16px; } .card .card-icon { font-size: 68px; height: 73px; } .card .card-icon-small { font-size: 56px; } .card-content { height: 50px; } .card .card-schedule { font-size: 11px; left: 4px; top: 4px; } } @media (min-width: 1024px) { .cards { max-width: 960px; } } /* Small Desktop */ @media (min-width: 1200px) { .cards { padding-left: 20px; margin: 20px auto 0 0; text-align: left; } .card { max-width: 154px; height: 120px; padding-top: 22px; } .card > a { font-size: 12px; } .card .card-icon { font-size: 50px; height: 55px; } .card .card-icon-small { font-size: 44px; } .card-content { height: 40px; } .card .card-schedule { left: 3px; top: 4px; font-size: 10px;} } /* ------------------------------------------------------------ *\ Card secondary \* ------------------------------------------------------------ */ .card-secondary { color: #C6C6C6; } .card-secondary p { color: #1E114B; } .card-secondary .status { font-weight: 400; color: #FF5F00; } .card-secondary.active, .card-secondary.active p, .card-secondary.active .status { color: #fff; } /* ------------------------------------------------------------ *\ Card-active \* ------------------------------------------------------------ */ .card.active { background: #1E114B; color: #fff; } .card.active .ico-recycle path { fill: #ffffff; } .card.active .ico-mesh path { fill: #ffffff; } .card.active .ico-device path { fill: #ffffff; } .card.active .card-schedule { color: #ffffff; } .card.active p { color: #ffffff; } /* ------------------------------------------------------------ *\ Card-expert \* ------------------------------------------------------------ */ .card-expert { opacity: 0; display: none; transition: opacity .5s, visibility .5s; } /* ------------------------------------------------------------ *\ Card-guideline \* ------------------------------------------------------------ */ .card-guideline .card-icon { color: #291782; } .card-guideline .card-icon-black { color: #4d4d4d; } .card-guideline.active .card-icon { color: #fff; } /* ------------------------------------------------------------ *\ Conenction \* ------------------------------------------------------------ */ .connections { list-style: none; font-size: 0; margin: -25px -6px 0; position: relative; } .connections:before { content: ''; width: 50%; height: 1px; background: #1E114B; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .connections .connection { display: inline-block; vertical-align: top; width:calc( 25% - 12px); margin: 0 6px; } .connection { font-size: 10px; } .connection .connection-icon { margin-top: 0px; font-size: 22px; } .connection .connection-icon p { font-size: 10px; margin-bottom: -7px; min-height: 26px; } .connection .connection-icon a i { color: #291782; min-height: 26px; margin-top: 6px; } .connection .connection-notice { color: #b2b2b2; display: block; border-top: 2px solid #ccc; } .connection-actions { margin-top: 15px; } .connection-actions a { display: block; border: 2px solid #ccc; font-size: 10px; padding:7px 8px 3px; border-radius: 4px; text-align: center; } .connection-actions a i { font-size: 25px; display: block; } @media (min-width: 768px) { .connections { margin: -32px -9px 0; } .connections .connection { width:calc( 25% - 18px); margin: 0 9px; } .connection { font-size: 13px; } .connection .connection-notice { font-size: 18px; } .connection .connection-icon { font-size: 28px; margin-top: 0px; } .connection .connection-icon p { font-size: 13px; min-height: 32px;} .connection-actions { margin-top: 21px; } .connection-actions a { font-size: 13px; padding: 9px 8px 6px; } .connection-actions a span { display: block; margin-top: 4px; } .connection-actions a i { font-size: 30px; } } /* Small Desktop */ @media (min-width: 1200px) { .connections { margin: -25px -6px 0; } .connections .connection { width:calc( 25% - 12px); margin: 0 6px; } .connection { font-size: 10px; } .connection .connection-icon { font-size: 22px; margin-top: 0px; } .connection .connection-icon p { font-size: 10px; min-height: 26px;} .connection-actions { margin-top: 15px; } .connection-actions a { font-size: 10px; padding: 7px 8px 3px; } .connection-actions a span { display: block; margin-top: 0px; } .connection-actions a i { font-size: 25px; } .connection .connection-notice { font-size: 14px; padding-top: 2px; } } /* ------------------------------------------------------------ *\ Connection-secondary \* ------------------------------------------------------------ */ .connection-secondary .connection-icon { margin-top: 7px; } .connection-secondary .connection-icon a { border: 2px solid #ccc; display: block; border-radius: 4px; padding: 2px 2px 9px; } .connection-secondary .connection-icon a i { margin-top: 13px; } .connection-secondary .connection-icon a p { margin-top: 0px; margin-bottom: -13px; } .connection-secondary .connection-actions { margin-top: 11px; position: relative; } .connection-secondary .connection-actions:before { content: ''; width: 2px; height: 11px; position: absolute; bottom: 100%; left: 50%; margin-left: -1px; background: #ccc; } @media (min-width: 768px) { .connections-secondary { margin: -44px -23px 0; } .connections .connection-secondary { width: calc( 25% - 46px); margin: 0 23px; } .connection-secondary .connection-icon { margin-top: 43px; font-size: 38px; } .connection-secondary .connection-icon p { font-size: 18px; min-height: 46px;} .connection-secondary .connection-icon a { padding: 4px 2px 15px; } .connection-secondary .connection-actions { margin-top: 40px; } .connection-secondary .connection-actions:before { height: 40px; } .connection-secondary .connection-actions a { font-size: 18px; padding-top: 12px; } .connection-secondary .connection-actions a i { font-size: 40px; } } /* Small Desktop */ @media (min-width: 1200px) { .connections-secondary { margin: -34px -39px 0; } .connections .connection-secondary { width: calc( 25% - 78px); margin: 0 39px; } .connection-secondary .connection-icon { margin-top: 26px; font-size: 28px; } .connection-secondary .connection-icon p { font-size: 14px; } .connection-secondary .connection-icon a { padding: 4px 2px 3px; } .connection-secondary .connection-icon a i { margin-top: 13px; } .connection-secondary .connection-icon a p { margin-top: 0px; margin-bottom: -13px; } .connection-secondary .connection-actions { margin-top: 32px; } .connection-secondary .connection-actions:before { height: 32px; } .connection-secondary .connection-actions a { font-size: 14px; padding-top: 10px; } .connection-secondary .connection-actions a i { font-size: 34px; } .connection-secondary .connection-actions a span { margin-top: 3px; } } /* ------------------------------------------------------------ *\ Network \* ------------------------------------------------------------ */ .countdown { position: relative; background: #fff; text-align: center; color: #c6c6c6; transition: background .5s; padding: 44px 0; } .countdown h4 { margin: 0; } .countdown .countdown-value { display: none; font-size: 20px; font-weight: 700; } .countdown .countdown-svg { margin-left: -15px; } .countdown .countdown-icon { margin-bottom: 23px; } .countdown .countdown-icon .ico-recycle svg { width: 91px; height: 91px; } .countdown .countdown-content { position: absolute; top: 50%; left: 0; bottom: 0; right: 0; margin-top: -43px; } .countdown.counting { background: #1E114B; color: #fff; } .countdown.counting h4 { display: none; } .countdown.counting .countdown-value { display: block; } .countdown.counting .ico-recycle svg path { fill: #fff; } @media (min-width: 768px) { .countdown { position: absolute; top: 41px; left: 0; bottom: 0; right: 0; } .countdown .countdown-content { bottom: auto; margin-top: -65px; } .countdown.counting h4, .countdown.counting .countdown-value { font-size: 25px; } } /* Small Desktop */ @media (min-width: 1200px) { .countdown { padding-top: 44px; top: 46px; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; background-color: transparent; -webkit-box-shadow: 0 0 0 1000px transparent inset; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s;} input::-webkit-credentials-auto-fill-button {/*francis 20190117 add for fix safari UI ugly*/ visibility: hidden; } /* ------------------------------------------------------------ *\ Form-control \* ------------------------------------------------------------ */ .form-control { border: 0; border-radius: 0; box-shadow:none; text-align: center; color: #1E114B; background-color: transparent; line-height: 34px; } .form-control::-webkit-input-placeholder { color: #c6c6c6; } .form-control::-moz-placeholder { color: #c6c6c6; } .form-control:-ms-input-placeholder { color: #c6c6c6; } .form-control::placeholder { color: #c6c6c6; } .form-control:focus { box-shadow:none; outline: 0; } .form-control-red { color: #1E114B; } .form-control-blue { color: #6233FF; } @media (min-width: 768px) { .form-control { font-size: 18px; padding: 9px 12px 8px; height: 43px; line-height: 43px; } } @media (min-width: 1200px) { .form-control { font-size: 14px; padding: 6px 12px; height: 34px; line-height: 1; } } /*francis 20181031 add for adjust style*/ .popup-section-row .form-settings textarea.form-control, .form-settings .form-row textarea.form-control { max-width: none; line-height: 1.5; background-color: white; font-family: monospace; } /*francis end*/ /* ------------------------------------------------------------ *\ Checkbox \* ------------------------------------------------------------ */ .checkbox { margin: 0; text-align: left; } .checkbox input { display: none; } .checkbox label { padding-left: 40px; min-height:0; position: relative; } .checkbox label:before { content: ''; font-family: FontAwesome; display: block; width: 28px; height: 28px; border: 1px solid #bbb; border-radius: 2px; line-height: 26px; text-align: center; font-size: 22px; position: absolute; top: 3px; left: 0; } .checkbox label small { font-size: 10px; line-height: 1.33; display: block; margin-top: 4px; } .checkbox input:checked + label:before { content: '\f00c'; color: #291782; } .checkbox input:disabled + label:before { cursor: not-allowed; background-color: #eee; } /* francis 20181031 add */ @media (min-width: 768px) { .checkbox label { font-size: 18px; padding-left: 52px; } .checkbox label:before { width: 37px; height: 37px; font-size: 30px; line-height: 35px; } .checkbox label small { font-size: 12px; margin-top: 6px; } } @media (min-width: 1200px) { .checkbox label { padding-left: 41px; font-size: 14px; } .checkbox label:before { width: 28px; height: 28px; font-size: 22px; line-height: 26px; } .checkbox label small { font-size: 10px; margin-top: 6px; } } /* ------------------------------------------------------------ *\ Checkbox-large \* ------------------------------------------------------------ */ .checkbox-large label { padding:14px 0 0 57px; } .checkbox-large label:before { width: 41px; height: 41px; font-size: 36px; line-height: 41px; } @media (min-width: 768px) { .checkbox-large label { padding:14px 0 0 67px; } .checkbox-large label br { display: none; } .checkbox-large label:before { width: 45px; height: 45px; font-size: 36px; line-height: 45px;} } @media (min-width: 1200px) { .checkbox-large label { padding: 8px 0 0 39px; color: #291782; } .checkbox-large label br { display: none; } .checkbox-large label:before { width: 28px; height: 28px; font-size: 22px; line-height: 26px;} } /* ------------------------------------------------------------ *\ Checkbox-small \* ------------------------------------------------------------ */ .checkbox-small label { padding-left: 34px; line-height: 23px; } .checkbox-small label:before { width: 22px; height: 22px; border-radius: 4px; font-size: 20px; border-width: 2px; line-height: 20px; top: 0; } /* ------------------------------------------------------------ *\ Radio \* ------------------------------------------------------------ */ .list-radios { margin-bottom: 0; } .list-radios li { display: inline-block; vertical-align: middle;} .list-radios li + li { margin-left: 13px; } .radio input[type="radio"] {margin-left: 0; position: static; display: none; } .radio label {position: relative; padding:4px 0 0 40px; display: inline-block; min-height: 0; } .radio label:before {content: ''; width: 24px; height: 24px; border: 1px solid #7a7a7a; border-radius: 50%; display: inline-block; background: #eee; vertical-align: middle; position: absolute; top: 0; left: 2px; } .radio label:after {content: ''; width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: #7a7a7a; vertical-align: middle; position: absolute; top: 5px; left: 7px; opacity: 0; visibility: hidden; } .radio input:checked + label:after {opacity: 1; visibility: visible; } .radio-alt input:checked + label { color: #291782; } .radio-alt input:checked + label:after { background: #291782; } .radio-alt input:disabled + label:before { cursor: not-allowed;} /*francis 20181031 add*/ .radio-alt input:disabled + label span{ cursor: not-allowed;}/*francis 20181031 add*/ .radio-alt input:disabled + label:after {cursor: not-allowed; background: #4c4c4c;} /*francis 20181031 add*/ @media (min-width: 768px) { .radio { margin: 8px 0 3px; } .radio label { padding:5px 0 0 50px;} .radio label:before { width: 32px; height: 32px; } .radio label:after { width: 18px; height: 18px; left: 9px; top: 7px; } } @media (min-width: 1200px) { .radio { margin: 8px 0 3px; } .list-radios li + li { margin-left: 20px; } .radio label { padding:0 0 0 35px;} .radio label:before { width: 22px; height: 22px; top: -3px;} .radio label:after { width: 12px; height: 12px; left: 7px; top: 2px; } } /* ------------------------------------------------------------ *\ Select \* ------------------------------------------------------------ */ .select { width: 146px; position: relative; } .select i { font-size: 12px; position: absolute; top: 50%; right: 3px; /*padding: 6px 2px 4px 5px;francis change*/padding: 6px 5px 4px 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; background:#FFFFFF} .select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #291782; } /*francis 20181031 add*/ .select select::-ms-expand{ display:none; } /*end*/ /* Select-alt */ .select-alt { width: 172px; } .select-alt select { color: #4c4c4c; } @media (min-width: 768px) { .select { width: 176px; } } /* Small Desktop */ @media (min-width: 1200px) { .select { width: 200px; } .select i { color: #291782; } } /*select-large*//*francis 20181031 add*/ .no-touch .form-settings .select-alt.select-large{ max-width: 240px; } .select.select-large{ width:215px; } .select-alt.select-large{ width:240px; } .form-settings .select-large .form-control { max-width: 240px; } @media (min-width: 768px) { .select.select-large { width: 240px; } } @media (min-width: 1200px) { .select.select-large { width: 215px; } } /* ------------------------------------------------------------ *\ File upload \* ------------------------------------------------------------ */ .field-file { width: 1px; height: 1px; opacity: 0; } /* ------------------------------------------------------------ *\ Form-hint \* ------------------------------------------------------------ */ .form-hint { position: relative; z-index: 2; } .form-hint .form-hint-text { display: block; position: absolute; bottom: 100%; left: 50%; width: 178px; padding: 10px; background: #fff; border-radius: 4px; font-size: 14px; color: #4c4c4c; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.19); margin-bottom: 28px; margin: 0 0 22px -139px; z-index: 2; line-height: 1.3; opacity: 0; visibility: hidden; } .form-hint > i:after { content: ''; border: 9px solid transparent; border-color: transparent transparent #fff #fff; position: absolute; left: 50%; bottom: 100%; margin-bottom: 5px; box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.19); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg) translate(-9px, -9px); -ms-transform: rotate(-45deg) translate(-9px, -9px); transform: rotate(-45deg) translate(-9px, -9px); z-index: 3; opacity: 0; visibility: hidden; } .form-hint.visible { cursor: default;} .form-hint.visible:before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .form-hint.visible .form-hint-text, .form-hint.visible > i:after { opacity: 1; visibility: visible; } @media (min-width: 477px) { .form-hint .form-hint-text { font-size: 16px; width: 278px; padding:18px 24px; } } @media (min-width: 1200px) { .form-hint .form-hint-text { font-size: 14px; width: 278px; padding:18px 24px; } } /* ------------------------------------------------------------ *\ Form-login \* ------------------------------------------------------------ */ .form-login .form-body { border: 1px solid #291782; border-radius: 2px; } .form-login .form-group { margin-bottom: 0; position: relative; } .form-login .form-group + .form-group { border-top: 1px solid #291782; } .form-login .form-icon { position: absolute; top: 4px; right: 7px; color: #291782; opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out;} .form-login .form-icon i { font-size: 24px; } .form-login .form-btn { border: none; border-radius: 0; background: none; position: absolute; top: 4px; right: 7px; color: #c6c6c6; } .form-login .form-btn i { font-size: 24px; } .form-login .success .form-icon { opacity: 1; } .form-login .success .form-btn { color: #291782; } .form-login .success .form-btn:hover { color: #1E114B; } .form-login .form-hint { font-size: 10px; margin: 6px 0 31px; padding: 0 2px; position: relative; } @media (min-width: 768px) { /*.form-login .form-icon, .form-login .form-btn { top: 6px; } .form-login .form-icon i, .form-login .form-btn i { font-size: 30px; } .form-login .form-btn { width: 26px; } .form-login .form-hint { font-size: 12px; margin: 8px 0 43px; padding: 0 10px; }*/ .form-login .form-icon, .form-login .form-btn { top: 4px; } .form-login .form-icon i, .form-login .form-btn i { font-size: 24px; } .form-login .form-btn { width: auto; } .form-login .form-hint { font-size: 10px; margin: 6px 0 31px; padding: 0 2px; } .form-login .form-control { padding: 8px 12px 9px; height: auto; line-height: 1; font-size: 14px; } .form-login .checkbox label { padding-left: 41px; font-size: 14px; } .form-login .checkbox label:before { width: 28px; height: 28px; font-size: 22px; line-height: 26px; } .form-login .checkbox label small { font-size: 10px; margin-top: 6px; } } /* Small Desktop */ @media (min-width: 1200px) { .form-login .form-icon, .form-login .form-btn { top: 4px; } .form-login .form-icon i, .form-login .form-btn i { font-size: 24px; } .form-login .form-btn { width: auto; } .form-login .form-hint { font-size: 10px; margin: 6px 0 31px; padding: 0 2px; } } /* ------------------------------------------------------------ *\ Form-wifi \* ------------------------------------------------------------ */ .form-wifi { max-width: 240px; margin: 0 auto; color: #291782; } .form-wifi .form-body { border: 2px solid #1E114B; border-radius: 2px; } .form-wifi .form-group { margin-bottom: 0; } .form-wifi .form-group + .form-group { border-top: 1px solid #1E114B; } .form-wifi .form-control { font-size: 14px; color: #291782; line-height: 1; height: auto; padding: 8px 12px; } .form-wifi label { font-size: 10px; color: #291782; letter-spacing: 0.03em; text-align: center; display: block; margin: 2px 0; font-weight: 400; } @media (min-width: 768px) { .form-wifi { max-width: 304px;} .form-wifi label { font-size: 13px; } .form-wifi .form-body { margin-bottom: 5px; } .form-wifi .form-control { font-size: 18px; padding: 10px 12px; } } /* Small Desktop */ @media (min-width: 1200px) { .form-wifi { max-width: 240px;} .form-wifi label { font-size: 10px; } .form-wifi .form-control { font-size: 14px; padding: 8px 12px; } .form-wifi .form-body { margin-bottom: 2px; } } /* ------------------------------------------------------------ *\ Form-add-url \* ------------------------------------------------------------ */ .form-add-url { padding:24px 23px; background: #fff; } .form-add-url form { position: relative; margin-bottom: 10px; } .form-add-url .form-group { border: 1px solid #b2b2b2; text-align: left; width: calc(100% - 35px); margin-bottom: 0; } .form-add-url .form-control { text-align: left; font-size: 16px; padding: 6px 8px; line-height: 1; height: auto; } .form-add-url .form-control::-webkit-input-placeholder { color: #b2b2b2; } .form-add-url .form-control::-moz-placeholder { color: #b2b2b2; } .form-add-url .form-control:-ms-input-placeholder { color: #b2b2b2; } .form-add-url .form-control::placeholder { color: #b2b2b2; } .form-add-url .form-btn { border: 0; border-radius: 0; background: none; position: absolute; top: 2px; right: 0; font-size: 24px; color: #b2b2b2; pointer-events:none;} .form-add-url.focused .form-btn { color: #291782; pointer-events:auto;} @media (min-width: 768px) { .form-add-url form { margin-bottom: 12px; } .form-add-url .form-control { font-size: 21px; padding: 8px 10px 7px; } .form-add-url .form-group { width: calc(100% - 51px); } .form-add-url .form-btn { font-size: 30px; top: 3px; } } @media (min-width: 1200px) { .form-add-url form { margin-bottom: 10px; } .form-add-url .form-control { font-size: 16px; padding: 6px 8px 6px; } .form-add-url .form-group { width: calc(100% - 35px); } .form-add-url .form-btn { font-size: 24px; top: 3px; } } /* ------------------------------------------------------------ *\ Form-settings \* ------------------------------------------------------------ */ .form-settings p { margin-bottom: 9px; } .form-settings .btn-upload { margin-right: 10px; } .form-settings .form-label { font-weight: 400; margin-bottom: 8px; } .form-settings .form-control { display: inline-block; border: 2px solid #d0d0d0; border-radius: 4px; max-width: 172px; font-size: 16px; text-align: left; line-height: 1; height: auto; padding: 10px 7px 9px; } .form-settings .form-control_min { max-width: 62px; } /*francis 20181031 add*/ .form-settings .select .form-control { padding: 12px 7px 10px; } .form-settings .select-size-2 { width: 205px; } .form-settings .select-size-2 .form-control { max-width: 205px; } .form-settings .form-hint { color: #808080; font-size: 18px; display: inline-block; vertical-align: middle; margin-left: 19px; } .form-settings .form-section { padding: 22px 12px 16px; background: #fff; border-radius: 2px; } .form-settings .form-section + .form-section { margin-top: 2px; } .form-settings .form-section-secondary { padding-top: 8px; } .form-settings .form-section-secondary .form-row:last-child { margin-top: 10px; } .form-settings .form-section-tertiary { padding: 0 12px; background-color: transparent; } .form-settings .form-group { margin-bottom: 0; } .form-settings .form-group .btn { border: none; font-size: 16px; padding: 11px 14px 9px; vertical-align: top; margin-left: 10px; min-width: 74px;} .form-settings .form-group .btn-primary { margin-left: 0; } .form-settings .form-section-group { margin-top: 2px; } .form-settings .form-row + .form-row { margin-top: 20px; } .form-settings .form-row + .form-row-alt { margin-top: 10px; } .form-settings .divider + .form-control { margin-top: 8px; } .form-settings .list-radios { display: inline-block; vertical-align: middle; margin-left: -2px; } .form-settings .form-group-inner { margin-bottom: 8px; } .form-settings .form-group-inner .form-hint { margin-top: 3px; } .form-settings .form-group-inner .form-label { margin-top: 10px; display: block; width: auto; } .form-settings .form-header { background: #f2f2f2; border-radius: 4px; padding: 8px 13px; margin-bottom: 2px; } .form-settings .form-title { font-size: 14px; color: #4c4c4c; font-weight: 400; } .form-settings .form-title > a { display: block; } .form-settings .form-title i { font-size: 10px; margin-right: 13px; line-height: 0.8; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .form-settings .form-title .collapsed > i { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } .form-settings .form-title .form-hint { line-height: 0.8; } .form-settings .form-title .form-hint i { font-size: 18px; } .form-settings .checkbox { display: inline-block; vertical-align: middle; } .form-settings .divider { display: inline-block; width: 9px; height: 1px; vertical-align: middle; background: #4c4c4c; margin: -2px 6px 0 6px; } .form-settings .select { display: inline-block; vertical-align: middle; } .form-settings .form-row-secondary p { margin-bottom: 15px; } .form-settings .form-row-secondary .select { margin-top: 12px; } .form-settings .checkbox-password { display: inline-block; margin-left: 6px; margin-top: -1px; } .form-settings .form-btn-holder { margin-top: 10px; } .form-settings .form-btn-holder .btn { margin-left: 0; } .form-settings .form-btn-holder .form-hint { margin-left: 22px; margin-top: 11px; } .form-settings .form-inner { margin-top: 20px; } .form-settings .desktop-visible { display: none; } .form-settings .network-items { margin: 0 -12px; } .form-settings .network-item h6 { font-weight: 400; margin-bottom: 3px; } .form-settings .network-item p { margin-bottom: 0; } .form-settings .schedule { margin: 0 -12px; } .form-settings .form-text { margin-bottom: 0; } /* form-entry */ .form-settings .form-entry { padding: 15px 12px 12px; background: #fff; border-radius: 4px; margin-bottom: 2px; } .form-settings .form-entry .form-label { margin-bottom: 0; } .form-settings .form-entry .switch { float: right; } .form-settings .form-entry .form-hint { margin: 0 15px 0 5px; } .form-settings .form-entry-status > strong { color: #bfbfbf; } .form-settings .form-entry-status .active-text { display: none; } .form-settings .form-entry.active .form-entry-status > strong { display: none; } .form-settings .form-entry.active .active-text { display: inline; } .form-settings .form-entry.active .active-text strong { color: #291782; } .form-settings .form-entry-secondary .tablet-visible { display: none; } .form-settings .active + .form-section .schedule .schedule-date input { pointer-events:auto; } .form-settings .active + .form-section .schedule .schedule-date input:checked + label { background: #291782; } .form-settings .form-entry-secondary .form-hint-text { bottom: 50%; left: 100%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); margin: 0 0 0 20px; } .form-settings .form-entry-secondary .form-hint i:after { left: auto; left: 100%; top: 50%; -webkit-transform: rotate(45deg) translate(7px, -22px); -ms-transform: rotate(45deg) translate(7px, -22px); transform: rotate(45deg) translate(7px, -22px);} /*francis 20181031 add*/ .popup-nested .form-entry { padding:0px; min-height: 32px; background: #fff; border-radius: 4px; margin-bottom: 10px; } .popup-nested .form-entry .form-label { margin-bottom: 0; } .popup-nested .form-entry .switch { margin-left: 5px;top: 2px; margin-top: 7px;} .popup-nested .form-entry .form-hint { margin: 0 15px 0 5px; } .popup-nested .form-entry-status > strong { color: #bfbfbf; } .popup-nested .form-entry-status .active-text { display: none; } .popup-nested .form-entry.active .form-entry-status > strong { display: none; } .popup-nested .form-entry.active .active-text { display: inline; } .popup-nested .form-entry.active .active-text strong { color: #291782; } @media(max-width:768px){ .popup-nested .form-entry .switch { margin-right: 252px; margin-top: 15px; margin-bottom: 15px; } } /*francis end*/ /* form-progressbar*/ .form-progressbar { max-width: 172px; margin-top: 3px; } .form-progressbar p { font-size: 14px; color: #bfbfbf; text-align: center; letter-spacing: 0.04em; } .form-progressbar .progress { width: 100%; height: 4px; background: #b2b2b2; display: block; border-radius: 2px; margin-bottom: 4px; } .form-progressbar .pwdstrength-weak { width: 100%; height: 4px; background: #FFB78C; display: block; border-radius: 2px; margin-bottom: 4px; } .form-progressbar .pwdstrength-middle { width: 100%; height: 4px; background: #FFEC8B; display: block; border-radius: 2px; margin-bottom: 4px; } .form-progressbar .pwdstrength-strong { width: 100%; height: 4px; background: #C3FF88; display: block; border-radius: 2px; margin-bottom: 4px; } /*francis 20181031 add*/ .form-settings input:checked {color: #6233FF;} .form-settings input:checked + label {color: #6233FF;} .form-settings input:checked + label:after { background: #6233FF; } /*end*/ /* .form-settings .edited input { color: #291782; } .form-settings .edited label { color: #291782; } .form-settings .edited label:after { background: #291782; } */ @media (min-width: 768px) { .form-settings p { margin-bottom: 25px; padding-top: 11px; } .form-settings .form-label { display: inline-block; vertical-align: top; width: 235px; padding-top: 14px; } .form-settings .form-label-alt { width: 187px; margin-top: 7px;} .form-settings .form-hint { font-size: 24px; } .form-settings .form-row + .form-row { margin-top: 15px; } .form-settings .form-group { display: inline-block; vertical-align: bottom; } .form-settings .form-group .btn { margin-left: 19px; font-size: 18px; padding: 11px 16px 9px;} .form-settings .form-group > span { display: inline-block; vertical-align: middle; padding: 12px 0 0 12px; margin-bottom: 8px; } .form-settings .form-group > .divider { padding: 0; margin-bottom: 0; } .form-settings .form-control { font-size: 18px; padding: 12px 11px 8px;} .form-settings .form-section { padding: 24px 48px 23px; } .form-settings .form-title { font-size: 18px; } .form-settings .form-title i { position: relative; top: -3px; margin-right: 24px; } .form-settings .form-title .form-hint { margin-left: 22px; } .form-settings .form-title .form-hint i { font-size: 24px; line-height: 0.9; top: 0; } .form-settings .form-header { padding: 11px 10px 10px; } .form-settings .form-group-inner { margin-bottom: 23px; } .form-settings .form-group-inner-alt { margin-bottom: 0; } .form-settings .form-group-inner .form-label { padding: 10px 0 0 12px; margin: 0 0 4px; } .form-settings .form-group-inner .form-btn-holder .btn { margin-left: 0; } .form-settings .form-section-group:first-child { margin-top: 0; } .form-settings .form-section-group .form-section { padding: 32px 48px 33px; } .form-settings .form-section-group .form-section-alt { padding: 23px 48px 23px; } .form-settings .form-section-group .form-section-tertiary { padding: 0; } .form-settings .checkbox-large + .form-hint { margin-top: 10px; } .form-settings .checkbox-large .form-label { width: auto; } .form-settings .table-details p { margin-bottom: 8px; } .form-settings .form-section-secondary .form-row:last-child { margin-top: 7px; } .form-settings .form-row-secondary .select { margin: 8px 0 0 28px; } .form-settings .form-btn-holder { display: inline-block; margin: 0; vertical-align: top; } .form-settings .schedule { margin: 0; } .form-settings .network-items { margin: 0 auto; max-width: 440px;} .form-settings .network-item { margin-top: 3px; } .form-settings .network-item p { padding-top: 2px; } .form-settings .form-text { padding-top: 13px; } .form-settings .form-row + .form-row-text { margin-top: 0; } .form-settings .form-row-text:last-child { margin-bottom: 10px; } .form-settings .form-row-text .form-label { margin-bottom: 3px; } /* Form-entry */ /* .form-settings .form-entry { padding: 20px 48px 13px; } *//*francis 20181031 add*/ .form-settings .form-entry .form-label { padding-top: 0; } .form-settings .form-entry .switch { float: none; } .form-settings .form-entry .form-hint { margin: -2px 9px 0 5px; } .form-settings .form-entry-secondary { padding: 15px 10px 13px; } .form-settings .form-entry-secondary .form-label { vertical-align: middle; } .form-settings .form-entry-secondary .tablet-visible { display: inline; } .form-settings .form-entry-secondary .switch { position: relative; top: 4px; } .form-settings .form-progressbar p { padding-top: 0; margin-bottom: 28px; } .form-settings .select-size-2 { width: 300px; } .form-settings .select-size-2 .form-control { max-width: 300px; } .form-settings .form-row-alt .form-label { padding-top: 0; } .form-settings .form-row-alt .form-label-file { width: 375px; } .form-settings .form-row + .form-row-text-alt { margin-top: 18px; } .form-settings .btn-upload { margin-right: 16px; } .form-settings .form-group .btn-primary { margin-left: 0; } } @media (min-width: 1200px) { .form-settings p { margin-bottom: 25px; padding-top: 10px; } .form-settings .form-label { display: inline-block; width: 185px; padding-top: 7px; margin-bottom: 0; } .form-settings .form-label-alt { width: 207px; margin-top: 0;} .form-settings .form-hint { font-size: 18px; margin-left: 10px; } .form-settings .form-row + .form-row { margin-top: 19px; } .form-settings .form-group { display: inline-block; vertical-align: middle; } .form-settings .form-group .btn { margin-left: 11px; font-size: 14px; padding: 6px 13px 4px;} .form-settings .form-control { font-size: 14px; padding: 5px 7px 4px; max-width: 156px;} .form-settings .form-control_min { max-width: 46px; } /*francis 20181031 add*/ .form-settings .form-section { padding: 24px 72px 23px; } .form-settings .form-title { font-size: 14px; } .form-settings .form-title i { position: relative; top: -1px; margin-right: 43px; } .form-settings .form-title .form-hint { margin-left: 8px; } .form-settings .form-title .form-hint i { font-size: 18px; line-height: 0.8; top: 0; } .form-settings .form-header { padding: 11px 16px 10px; } .form-settings .form-group-inner { margin-bottom: 19px; } .form-settings .form-group-inner-alt { margin-bottom: 0; } .form-settings .form-section-group .form-section { padding: 19px 72px 23px; } .form-settings .form-section-group .form-section-alt { padding: 23px 72px 23px; } .form-settings .form-section-group .form-section-tertiary { padding: 0; } .form-settings .checkbox-large + .form-hint { margin-top: 10px; } .form-settings .checkbox-large .form-label { width: auto; } .form-settings .table-details p { padding-top: 5px; margin-bottom: 5px; } .form-settings .form-section-secondary .form-row:last-child { margin-top: 14px; } .form-settings .form-row-secondary .select { margin: 8px 0 0 11px; } .form-settings .divider { margin: 0 1px; width: 7px; } .form-settings .divider + .form-control { margin-top: 0; } .form-settings .select .form-control { padding: 6px 7px 5px; max-width: 100%;} .form-settings .select-alt { max-width: 156px; } .form-settings .select-size-1 { max-width: 207px; width: 207px; } .form-settings .checkbox-password { display: inline-block; margin-left: 6px; margin-top: -1px; } .form-settings .desktop-visible { display: inline-block; } .form-settings .form-inner { margin-top: 35px; } .form-settings .form-btn-holder { margin-top: 0px; vertical-align: middle; } .form-settings .form-btn-holder .form-hint { margin: 3px 0 0 10px; } .form-settings .form-group-inner .form-label { padding: 8px 0 0 8px; margin-bottom: 7px; } .form-settings .form-group > span { padding: 6px 0 0 8px; margin-bottom: 4px; } .form-settings .form-group > .divider { padding: 0; margin-bottom: 0; } .form-settings .network-items { max-width: 100%; } .form-settings .network-items:after { } .form-settings .network-items .network-item { width: calc(50% - 2px); float: left; margin-right: 4px; border-radius: 4px; } .form-settings .network-items .network-item:nth-child(2n) { margin-right: 0; } .form-settings .network-item > a { padding: 9px 17px 4px; } .form-settings .network-item h6 { font-size: 14px; } .form-settings .form-text { padding-top: 7px; } .form-settings .form-text span { margin-left: 19px; } .form-settings .form-row + .form-row-text { margin-top: 4px; } .form-settings .form-row-text:last-child { margin-bottom: 0; } .form-settings .form-progressbar { max-width: 156px;} .form-settings .form-progressbar p { margin-bottom: 2px; font-size: 12px; } .form-settings .form-row + .form-row-text-alt { margin-top: 18px; } /* Form-entry */ /* .form-settings .form-entry { padding: 14px 72px 10px; } */ .form-settings .form-entry .form-label { padding-top: 0; } .form-settings .form-entry .switch { float: none; } .form-settings .form-entry .form-hint { margin: -2px 24px 0 5px; font-size: 24px; } .form-settings .form-entry-secondary { padding: 11px 20px 8px; } .form-settings .form-entry-secondary .form-label { vertical-align: middle; } .form-settings .form-entry-secondary .tablet-visible { display: inline; } .form-settings .form-entry-secondary .switch { position: relative; top: 4px; } .form-settings .form-group .btn-primary { border-radius: 4px; padding: 4px 31px; margin-left: 0; position: relative; right: -8px; } .form-settings .btn-upload { margin-right: 6px; } .form-settings .form-row-alt .form-label-file { width: 385px; } } /* ------------------------------------------------------------ *\ Ico \* ------------------------------------------------------------ */ .ico-recycle { /*display: inline-block; vertical-align: middle; background: url(images/ico-recycle-grey.png) no-repeat 0 0; width: 45px; height: 45px; background-size:cover;*/ } .ico-recycle svg { width: 45px; height: 45px; } .ico-recycle svg path { fill: #C6C6C6; } @media (min-width: 768px) { .ico-recycle svg { width: 59px; height: 58px; } } @media (min-width: 1200px) { .ico-recycle svg { width: 45px; height: 45px; } } .ico-mesh { /*display: inline-block; vertical-align: middle; background: url(images/ico-recycle-grey.png) no-repeat 0 0; width: 45px; height: 45px; background-size:cover;*/ } .ico-mesh svg { width: 120px; height: 60px; } .ico-mesh svg path { fill: #b2b2b2; } @media (min-width: 768px) { .ico-mesh svg { width: 120px; height: 60px; } } @media (min-width: 1200px) { .ico-mesh svg { width: 120px; height: 60px; } } .ico-device { /*display: inline-block; vertical-align: middle; background: url(images/ico-recycle-grey.png) no-repeat 0 0; width: 45px; height: 45px; background-size:cover;*/ } .ico-device svg { width: 120px; height: 50px; } .ico-device svg path { fill: #291782; } @media (min-width: 768px) { .ico-device svg { width: 120px; height: 50px; } } @media (min-width: 1200px) { .ico-device svg { width: 120px; height: 50px; } } /* ------------------------------------------------------------ *\ Ico-arrow-left \* ------------------------------------------------------------ */ .ico-arrow-left svg { width: 20px; height: 17px; } /* ------------------------------------------------------------ *\ ico-globe \* ------------------------------------------------------------ */ .ico-globe svg { width: 41px; height: 41px; } @media (min-width: 768px) { .ico-globe svg { width: 53px; height: 53px; } } /* Small Desktop */ @media (min-width: 1200px) { .ico-globe svg { width: 41px; height: 41px; } } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro-splash { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #e2231b; overflow: hidden; z-index: 2; opacity: 1; transition: opacity 0.5s ease-in-out; border-radius: 4px; } .intro-splash .row { position: absolute; top: 50%; left: 50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin: 0; display: block; } .intro-splash.fade-out { opacity: 0; pointer-events:none;} @media (min-width: 768px) { /*.intro-splash { max-width: 600px; height: 600px; top: 50%; left: 50%; margin: -310px 0 0 -300px ; }*/ .intro-splash { max-width: 475px; height: 475px; margin: -237px 0 0 -237px ; top: 50%; left: 50%; } } @media (min-width: 1200px) { .intro-splash { max-width: 475px; height: 475px; margin: -237px 0 0 -237px ; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* List-modes */ .list-modes { font-weight: 700; margin: 0; } .list-modes:after { } .list-modes li { float: left; width: 50%; text-align: center; border: 1px solid #e5e5e5; border-right: 0; border-radius: 2px 0 0 2px; color: #b2b2b2; } .list-modes li + li { border-left: 0; border-right: 1px solid #e5e5e5; border-radius: 0 2px 2px 0; } .list-modes li a { display: block; font-size: 14px; line-height: 1; padding: 9px 0 8px; text-decoration: none; } .list-modes .current { background: #291782; color: #fff; border-color: #291782; } .list-modes .current a:hover { color: #fff; } @media (min-width: 768px) { .list-modes li { border-radius: 3px 0 0 3px; } .list-modes li + li { border-radius: 0 3px 3px 0; } .list-modes li a { font-size: 18px; padding: 11px 0 10px; } } @media (min-width: 1200px) { .list-modes li { border-radius: 3px 0 0 3px; } .list-modes li + li { border-radius: 0 3px 3px 0; } .list-modes li a { font-size: 14px; padding: 9px 0 8px; } } /* ------------------------------------------------------------ *\ List-dots \* ------------------------------------------------------------ */ .list-dots { text-align: center; font-size: 0; } .list-dots li { display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #291782; margin: 0 2px; } .list-dots .current { background: #291782; } @media (min-width: 768px) { /*.list-dots li { width: 10px; height: 10px; margin: 0 2px 0 3px; }*/ } /* Small Desktop */ @media (min-width: 1200px) { .list-dots li { width: 7px; height: 7px; margin: 0 2px; } } /* ------------------------------------------------------------ *\ List-componenets \* ------------------------------------------------------------ */ .list-components { padding: 0 20px; } .list-components:after { } .list-components img { margin-bottom: 8px; width: 100%; height: auto; } .list-components li { float: left; font-size: 10px; font-weight: 500; padding: 10px 2px 0 0; width: 43%; } .list-components li + li { margin-bottom: 22px; } .list-components li:first-child { float: left; padding-top: 0; margin:0 17px 0 15px; width: 38.5%; } .list-components li:first-child img { margin-bottom: 10px; } .list-components li:last-child { margin-bottom: 0; } @media (min-width: 768px) { /*.list-components img { margin-bottom: 11px; } .list-components li { font-size: 13px; padding-top: 11px; } .list-components li:first-child { width: 37.5%; margin:0 22px 0 22px; } .list-components li:first-child img { margin-bottom: 13px; }*/ } /* Small Desktop */ @media (min-width: 1200px) { .list-components img { margin-bottom: 11px; } .list-components li + li { margin-bottom: 16px; } .list-components li { font-size: 10px;padding: 10px 2px 0 0; } .list-components li:first-child { width: 38.5%; margin:0 15px 0 17px; } .list-components li:first-child img { margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ List-popup-actions \* ------------------------------------------------------------ */ .list-popup-actions { list-style: none; } .list-popup-actions > li { padding: 14px 0; border-top: 2px solid #e5e5e5; } .list-popup-actions > li:last-child { border-bottom: 2px solid #e5e5e5; } .list-popup-actions a { color: #291782; display: block; } .list-popup-actions a:hover { color: #9C80FF; } .list-popup-actions .link-external { color: #29abe2; text-decoration: underline; } .list-popup-actions .link-external:hover { text-decoration: none; } @media (min-width: 768px) { .list-popup-actions > li { padding: 19px 0; } } @media (min-width: 1200px) { .list-popup-actions > li { padding: 14px 0; } } /* ------------------------------------------------------------ *\ List-popup-actions-alt \* ------------------------------------------------------------ */ .list-popup-actions-alt > li { padding: 14px 16px 14px 18px; } .list-popup-actions-alt li:after { } .list-popup-actions-alt p { float: left; margin: 0; } .list-popup-actions-alt p + p { float: right; } .list-popup-actions-alt .switch { float: right; } .list-popup-actions-alt p span { color: #291782; } .list-popup-actions-alt i { font-size: 22px; display: block; text-align: center; margin-bottom: 3px; } .list-popup-actions-alt .list-element-alt { padding: 3px 0 5px; font-size: 10px; text-transform: uppercase; } @media (min-width: 768px) { .list-popup-actions-alt > li { padding: 19px 26px 17px 25px; } .list-popup-actions-alt i { font-size: 30px; } .list-popup-actions-alt .list-element-alt { font-size: 13px; padding: 5px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-popup-actions-alt > li { padding: 14px 16px 14px 18px; } .list-popup-actions-alt i { font-size: 22px; } .list-popup-actions-alt .list-element-alt { font-size: 10px; padding:3px 0 5px; } } /* ------------------------------------------------------------ *\ List-popup-actions-secondary \* ------------------------------------------------------------ */ .list-popup-actions-secondary > li { padding: 14px 16px 14px 16px; } .list-popup-actions-secondary li:after { } .list-popup-actions-secondary i { font-size: 22px; display: block; text-align: center; margin-bottom: 5px; } .list-popup-actions-secondary p { float: left; margin: 0; } .list-popup-actions-secondary p + p { float: right; } .list-popup-actions-secondary p span { color: #bfbfbf; font-weight: 700; } .list-popup-actions-secondary .switch { float: right; } .list-popup-actions-secondary .list-element-alt { padding: 4px 0 3px; font-size: 10px; text-transform: uppercase; } .list-popup-actions-secondary .switch { float: right; position: relative; } .list-popup-actions-secondary .active-text { display: none; color: #291782; } .list-popup-actions-secondary .active span { display: none; } .list-popup-actions-secondary .active .active-text { display: inline; } @media (min-width: 768px) { .list-popup-actions-secondary > li { padding: 18px 20px 18px 20px; } .list-popup-actions-secondary i { font-size: 30px; } .list-popup-actions-secondary .list-element-alt { font-size: 13px; padding: 5px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-popup-actions-secondary > li { padding: 18px 20px 18px 20px; } .list-popup-actions-secondary i { font-size: 22px; } .list-popup-actions-secondary .list-element-alt { font-size: 10px; padding:3px 0 3px; } } /* ------------------------------------------------------------ *\ List-modal-actions \* ------------------------------------------------------------ */ .list-modal-actions { font-size: 0; text-align: center; } .list-modal-actions li {display: inline-block; width: 33.33%; font-size: 10px; text-transform: none; text-align: center; } .list-modal-actions a { color: #291782; } .list-modal-actions a:hover { color: #9C80FF; } .list-modal-actions i { font-size: 22px; } .list-modal-actions a span { display: block; text-align: center; margin-top: 3px; } .list-modal-actions .btn-save.saving { color: #291782; } .list-modal-actions .btn-save.saved, .list-modal-actions .btn-save.saved:hover { color: #4c4c4c; } @media (min-width: 768px) { .list-modal-actions li { font-size: 13px; } .list-modal-actions i { font-size: 30px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-modal-actions li { font-size: 10px; } .list-modal-actions i { font-size: 22px; } } /* ------------------------------------------------------------ *\ List-schedule-dates \* ------------------------------------------------------------ */ .list-schedule-dates { font-size: 18px; } .list-schedule-dates li { margin-bottom: 8px; } @media (min-width: 768px) { .list-schedule-dates { font-size: 17px; } .list-schedule-dates li { margin-bottom: 9px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-schedule-dates { font-size: 10px; } .list-schedule-dates li { margin-bottom: 8px; } } /* ------------------------------------------------------------ *\ List-weather-states \* ------------------------------------------------------------ */ .list-weather-states li + li { margin-top: 59px; } /* Small Desktop */ @media (min-width: 1200px) { .list-weather-states li + li { margin-top: 48px; } } /* ------------------------------------------------------------ *\ list-network-actions \* ------------------------------------------------------------ */ .list-network-actions li + li { margin-top: 94px; text-transform: uppercase; } @media (min-width: 768px) { .list-network-actions li + li { margin-top: 121px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-network-actions li + li { margin-top: 94px; } } /* ------------------------------------------------------------ *\ List Network actions \* ------------------------------------------------------------ */ .list-network-actions-secondary a { display: block; border: 1px solid #1E114B; border-radius: 4px; padding: 18px 12px 16px; } /*.list-network-actions-secondary li + li { margin-top: 32px; }*/ .list-network-actions-secondary li + li { margin-top: 30px; } @media (min-width: 768px) { .list-network-actions-secondary a { padding: 8px 35px 6px; } /*.list-network-actions-secondary li + li { margin-top: 141px; }*/ .list-network-actions-secondary li + li { margin-top: 80px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-network-actions-secondary a { padding: 7px 28px 4px; } /*.list-network-actions-secondary li + li { margin-top: 111px; }*/ .list-network-actions-secondary li + li { margin-top: 60px; } } /* ------------------------------------------------------------ *\ List-banned \* ------------------------------------------------------------ */ .list-banned { font-size: 16px; } .list-banned li:after { } .list-banned li { border-bottom: 1px solid #e8e8e8; padding: 7px 0 8px 9px; } .list-banned a { font-size: 24px; float: right; line-height: 1; } .list-banned span { display: inline-block; vertical-align: middle; } @media (min-width: 768px) { .list-banned { font-size: 20px; } .list-banned a { font-size: 30px; } .list-banned li { padding: 9px 0 12px 13px; } } @media (min-width: 1200px) { .list-banned { font-size: 16px; } .list-banned a { font-size: 24px; } .list-banned li { padding: 7px 0 8px 9px; } } /* ------------------------------------------------------------ *\ List-services \* ------------------------------------------------------------ */ .list-services .switch { float: right; } .list-services li { margin-top: 2px; background: #fff; font-size: 16px; color: #4c4c4c; padding:13px 16px 12px; } .list-services li a { color: #808080; display: inline-block; vertical-align: middle; font-size: 18px; margin-right: 15px; } .list-services li span { display: inline-block; vertical-align: middle; } @media (min-width: 768px) { .list-services li { font-size: 20px; padding:14px 24px 15px; } .list-services li a { font-size: 24px; margin-right: 18px; } } @media (min-width: 1200px) { .list-services li { font-size: 16px; padding:13px 24px 12px; margin-top: 0; margin-bottom: 2px; } .list-services li a { font-size: 18px; margin-right: 15px; } } /* ------------------------------------------------------------ *\ List-details \* ------------------------------------------------------------ */ .list-details { font-size: 13px; text-align: left; } .list-details li + li { margin-top: 1px; } .list-details li span { display: inline-block; vertical-align: middle; width: 104px; color: #1E114B; } .list-details li strong { display: inline-block; vertical-align: middle; color: #1E114B; } @media (min-width: 768px) { .list-details { font-size: 16px; } .list-details li span { width: 133px; } } /* Small Desktop */ @media (min-width: 1200px) { .list-details { font-size: 14px; } .list-details li span { width: 127px; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo-intro { display: block; background: url("images/ic_logo_blue.png") no-repeat 0 0; width: 212px; height: 23px; background-size:cover;} .logo-welcome { display: inline-block; background: url("images/ic_logo_blue.png") no-repeat 0 0; width: 208px; height: 35px; background-size:cover;} /*$breakpoint-mobile { .logo-intro { height: 39px; width: 234px; } .logo-welcome { height: 44px; width: 262px; } }*/ /* Small Desktop */ @media (min-width: 1200px) { .logo-intro { width: 212px; height: 35px; } .logo-welcome { width: 212px; height: 35px; } } /* ------------------------------------------------------------ *\ Modal \* ------------------------------------------------------------ */ .modal-body { padding: 0; position: static; } .modal-default .modal-dialog { margin: 0 auto; padding: 4px 4px 0; } .modal-default .modal-dialog2 { margin: 0 auto; padding: 4px 4px 0; } .modal-default .modal-content { box-shadow:none; border: none; border-radius: 0; height: 100%; position: static; border-radius: 2px; min-height: calc( 100vh - 8px); background: #e5e5e5; padding-bottom: 52px; } .modal-default .close { opacity: 1; float: none; position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #291782; margin-top: 1px; fill: #291782; } .modal-default .modal-title { text-align: center; font-size: 16px; color: #1E114B; font-weight: 400; } .modal-default .modal-header { padding: 6px 15px; border: none; position: relative; background: #fff; border-bottom: 2px solid #e5e5e5; border-radius: 2px 2px 0 0; } .modal-default .modal-actions { position: fixed; bottom: 0px; left: 4px; right: 4px; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.29); padding: 6px 0; background: #fff; border-radius: 0 0 4px 4px; border-bottom: 4px solid rgba(0, 0, 0, 0.5); z-index: 1; } .modal-default .modal-entry .switch { float: right; } .modal-default .modal-entry { font-size: 16px; border-top: 2px solid #e5e5e5; border-bottom: 2px solid #e5e5e5; padding: 15px 14px 13px 17px; background: #fff; } .modal-default .modal-entry-status { color: #9C80FF; } .modal-default .modal-entry-status > strong { color: #bfbfbf; } .modal-default .modal-entry-status .active-text { display: none; } .modal.fade .modal-dialog { -webkit-transform:none; -ms-transform:none; transform:none; } .modal.in .modal-dialog { -webkit-transform: none; -ms-transform: none; transform: none; } .modal.fade .modal-dialog2 { -webkit-transform:none; -ms-transform:none; transform:none; } .modal.in .modal-dialog2 { -webkit-transform: none; -ms-transform: none; transform: none; } .modal-default .modal-foot.active .modal-entry-status > strong { display: none; } .modal-default .modal-foot.active .active-text { display: inline; } .modal-default .modal-foot.active .active-text strong { color: #291782; } @media (min-width: 768px) { .modal-default .modal-dialog { min-height: 0; height: 600px; width: 440px; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -220px; border-radius: 5px; background: #fff; padding: 0; } .modal-default .modal-dialog2 { min-height: 0; height: 600px; width: 440px; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -220px; border-radius: 5px; background: #fff; padding: 0; } .modal-default .modal-content { border-radius: 4px; min-height: 0; padding-bottom: 0; } .modal-default .modal-title { font-size: 20px; font-weight: 400; } .modal-default .modal-header { padding: 6px 15px 5px; border-radius: 4px 4px 0 0; } .modal-default .modal-actions { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0 4px; border-top-color: transparent; border-bottom: none; } .modal-default .close { left: 24px; } .modal-default .modal-entry { font-size: 20px; padding: 17px 23px 17px 24px; } .modal-default .switch { margin-top: 3px; } } @media (min-width: 1024px) { .modal-default .modal-dialog { width: 440px; height: 600px; margin: -300px 0 0 -220px; border-radius: 2px; } .modal-default .modal-dialog2 { width: 440px; height: 600px; margin: -300px 0 0 -220px; border-radius: 2px; } } /* Small Desktop */ @media (min-width: 1200px) { .modal-default .modal-dialog { width: 348px; height: 480px; margin: -240px 0 0 -174px; } .modal-default .modal-dialog2 { width: 440px; height: 600px; margin: -240px 0 0 -174px; } .modal-default .modal-title { font-size: 16px; } .modal-default .modal-header { padding: 11px 15px; } .modal-default .modal-entry { font-size: 16px; padding: 17px 25px 13px 25px; } .modal-default .switch { margin-top: 0; } } /* ------------------------------------------------------------ *\ Modal-content-secondary \* ------------------------------------------------------------ */ .modal-default .modal-content-secondary { position: absolute; top: 4px; left: 4px; bottom: 4px; right: 4px; z-index: 5; border-radius: 3px; background: #fff; height: auto; opacity: 0; visibility: hidden; pointer-events:none; transition: opacity .5s, visibility .5s;} .modal-default .modal-content-secondary.active { opacity: 1; visibility: visible; pointer-events:auto;} .modal-default .modal-content-secondary.active .btn-animate:before { width: 100%; -webkit-animation: progress 5s forwards; animation: progress 5s forwards; } .modal-default .modal-content-secondary .modal-actions { } @media (min-width: 768px) { .modal-default .modal-content-secondary { top: 0; left: 0; bottom: 0; right: 0; } } /* ------------------------------------------------------------ *\ Modal-wifi \* ------------------------------------------------------------ */ .modal-wifi .form-wifi { padding: 15px 0 16px; } .modal-wifi .modal-body { padding: 0; background: #fff; } .modal-wifi .network-items-outer { opacity: 0; visibility: hidden; transition: opacity .5s;} .modal-wifi .modal-foot.active .network-items-outer { opacity: 1; visibility: visible; } .modal-wifi .modal-foot.active .active-for-today { display: none; } .modal-wifi .active-today.active .active-for-today { display: inline; } .modal-wifi .link-schedule { color: #b2b2b2; } .modal-wifi .link-schedule.current { color: #291782; } @media (min-width: 768px) { .modal-wifi .modal-body { position: static; margin: 0; border-radius: 0; } .modal-wifi .close { left: 25px; } .modal-wifi .form-wifi { padding: 23px 0 21px; } } /* Small Desktop */ @media (min-width: 1200px) { .modal-wifi .form-wifi { padding: 15px 0; } } /* ------------------------------------------------------------ *\ Modal-content-schedule \* ------------------------------------------------------------ */ .modal-wifi .modal-content-schedule .modal-header { border-radius: 2px; } .modal-content-schedule .modal-foot { background: #fff; } .modal-content-schedule .modal-foot-inner { padding: 0 16px; } .modal-content-schedule .modal-entry { padding-top: 13px; } .modal-content-schedule .modal-foot.active .schedule-date input { pointer-events:auto; } .modal-content-schedule .modal-foot.active .schedule-date input:checked + label { background: #291782; } @media (min-width: 768px) { .modal-content-schedule .modal-entry { padding-top: 16px; } .modal-content-schedule .modal-foot { padding-bottom: 8px; } .modal-wifi .modal-content-schedule .modal-actions { padding-bottom: 9px; } } /* Small Desktop */ @media (min-width: 1200px) { .modal-content-schedule .modal-entry { padding-top: 15px; border-top: 1px; } .modal-wifi .modal-content-schedule .modal-actions { padding-bottom: 5px; } } /* ------------------------------------------------------------ *\ Modal-network \* ------------------------------------------------------------ */ .modal-network .modal-content { background: #fff; } @media (min-width: 768px) { .modal-network .modal-actions { border-top-color: #e5e5e5; padding-bottom: 7px; } } /* ------------------------------------------------------------ *\ Modal-parent-control \* ------------------------------------------------------------ */ @media (min-width: 768px) { .modal-parent-control .modal-actions { padding-bottom: 7px; } } /* Small Desktop */ @media (min-width: 1200px) { .modal-parent-control .modal-actions { padding-bottom: 5px; } } /* ------------------------------------------------------------ *\ Modal-services \* ------------------------------------------------------------ */ @media (min-width: 768px) { .modal-services .list-services .switch { margin-top: 6px; } } @media (min-width: 768px) { .modal-services .list-services .switch { margin-top: 3px; } } /* ------------------------------------------------------------ *\ Modal-wps \* ------------------------------------------------------------ */ .modal-wps .modal-content { background: #fff; } .modal-wps .countdown { position: absolute; top: 40px; left: 4px; right: 4px; bottom: 0; } .modal-wps .countdown > a { position: absolute; top: 50%; left: 0; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); right: 0; margin-top: -5px; } @media (min-width: 768px) { .modal-wps .countdown { left: 0; right: 0; } .modal-wps .countdown > a { } } /* ------------------------------------------------------------ *\ Nav-show \* ------------------------------------------------------------ */ .nav-show { position: relative; display: inline-block; width: 20px; height: 12px; } .nav-show span { position: absolute; display: block; height: 2px; width: 100%; background: #291782; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s, -webkit-transform .2s 0s; } .nav-show span:nth-child(1) { top: 0; } .nav-show span:nth-child(2) { top: 5px; } .nav-show span:nth-child(3) { top: 10px; } .nav-show:after { position: fixed; top: 0; bottom: 0; right: 0; left: 0px; background: rgba(0, 0, 0, 0.5); content: ''; opacity:0; visibility: hidden; transition: opacity .5s ease-in-out, visibility .5s ease-in-out; z-index: 1; } .nav-show.active:after { opacity: 1; visibility: visible; } /* Small Desktop */ @media (min-width: 1200px) { .nav-show { display: none; } } /* ------------------------------------------------------------ *\ Nav-secondary-show \* ------------------------------------------------------------ */ .nav-secondary-show { position: relative; display: inline-block; width: 20px; height: 12px; } .nav-secondary-show span { position: absolute; display: block; height: 4px; width: 4px; background: #291782; border-radius: 50%; margin-left: 8px; } .nav-secondary-show span:nth-child(1) { top: 0; } .nav-secondary-show span:nth-child(2) { top: 5px; } .nav-secondary-show span:nth-child(3) { top: 10px; } .nav-secondary-show:after { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: ''; opacity:0; visibility: hidden; transition: opacity .5s ease-in-out, visibility .5s ease-in-out; z-index: 100; } .nav-secondary-show.active:after { opacity:1; visibility: visible; } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { font-size: 14px; } .nav a { color: #291782; text-decoration: none; display: block; position: relative; } .nav a:hover { color: #9C80FF; } .nav a span { display: inline-block; vertical-align: middle; } .nav a i { position: absolute; top: 50%; left: 15px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); font-size: 20px; } .nav a .fa-cog, .nav a .fa-user-md{ font-size: 22px; } .nav a .fa-lock { font-size: 24px; } .nav a .fa-plus-circle { font-size: 24px; } .nav > ul > li a { padding: 10px 16px 10px 55px; } .nav > ul > li > a { font-weight: 700; padding: 15px 16px 15px 55px; } .nav .current > a { color: #6233FF; font-weight: 700; } .nav .expert-mode { display: none; } .nav .has-dropdown > a { color: #4c4c4c; } .nav .has-dropdown.current > a { color: #291782; } .nav .has-dropdown > a:hover { color: #291782; } .nav .has-dropdown > ul { max-height: 0; overflow: hidden; transition: max-height .5s ease; } .nav .has-dropdown > ul li:first-child { padding-top: 6px; } .nav .has-dropdown > ul li:last-child { padding-bottom: 6px; } .nav .has-dropdown.expand > ul { max-height: 500px; } .nav .has-dropdown > a { overflow: hidden; position: relative; } .nav .has-dropdown > a:before { content:''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 0; height: 0; background: #e5e5e5; border-radius: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all .5s ease-in-out; will-change: transform;} .nav .has-dropdown.expand a:before { width: 104%; height: 240px; } .nav-expert .expert-mode { display: block; } @media (min-width: 768px) { .nav { font-size: 18px; } .nav > ul > li a { padding: 14px 16px 14px 64px; } .nav > ul > li > a {padding: 18px 16px 18px 64px; } .nav .has-dropdown > ul li:first-child { padding-top: 5px; } .nav .has-dropdown > ul li:last-child { padding-bottom: 5px; } .nav a i { left: 23px; } } @media (min-width: 1200px) { .nav { font-size: 14px; } .nav > ul > li a { padding: 7px 16px 7px 64px; } .nav > ul > li > a {padding: 11px 16px 11px 64px; } .nav .has-dropdown > ul li:first-child { padding-top: 4px; } .nav .has-dropdown > ul li:last-child { padding-bottom: 4px; } .nav a i { left: 27px; } } /* ------------------------------------------------------------ *\ Navbar-nav \* ------------------------------------------------------------ */ .navbar-nav { list-style: none; font-size: 16px; display: none; width: 100px; text-align: right; } .navbar-nav >li { float: none; } .navbar-nav .caret { border-right-width: 5px; border-left-width: 5px; border-top-width: 5px; } /*.navbar-nav .dropdown-menu { min-width: 100px; display: none; }*/ .navbar-nav .dropdown-menu { min-width: 100px;} .navbar-nav>li>.dropdown-menu { border-radius: 5px; } @media (min-width: 768px) { .navbar-nav { display: inline-block; } } /* ------------------------------------------------------------ *\ Nav-secondary \* ------------------------------------------------------------ */ .nav-secondary { position: fixed; top: 0; right: 0; width: 240px; font-size: 14px; font-weight: 700; background: #fff; z-index: 200; padding: 8px 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;} .nav-secondary.active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .nav-secondary i { font-size: 24px; vertical-align: middle; } .nav-secondary a { color: #291782; display: block; padding: 12px 16px; } .nav-secondary a:hover { color: #9C80FF; } .nav-secondary a span { display: inline-block; vertical-align: middle; margin-left: 16px; } .nav-secondary li { padding-bottom: 3px; position: relative; } .nav-secondary li:before { content: ''; width: 208px; height: 1px; background: #e5e5e5; position: absolute; bottom: 0; left: 50%; margin-left: -104px; } .nav-secondary li + li { margin-top: 2px; } .nav-secondary li:last-child:before { content: none; } @media (min-width: 768px) { .nav-secondary { font-size: 18px; width: 256px; } .nav-secondary a { padding: 18px 27px; } .nav-secondary a span { margin-left: 13px; } } @media (min-width: 1024px) { .nav-secondary { font-size: 14px; } .nav-secondary a { padding: 11px 27px 10px; } } /* Small Desktop */ @media (min-width: 1200px) { .nav-secondary { position: absolute; top: -21px; } } /* ------------------------------------------------------------ *\ Nav-tertiary \* ------------------------------------------------------------ */ .nav-tertiary { position: fixed; bottom: 24px; right: 0; left: 0; text-align: right; padding-right: 23px; z-index: 1; pointer-events: none; } .nav-tertiary .btn-menu { pointer-events: auto; } .nav-tertiary ul { position: absolute; bottom: 100%; right: 0; left: 0; padding-right: 23px; z-index: 15; pointer-events: none; } .nav-tertiary li { display: block; margin-bottom: 20px; opacity: 0; visibility: hidden; transition: all .5s ease-in-out;} .nav-tertiary li:first-child { -webkit-transform: translateY(185px); -ms-transform: translateY(185px); transform: translateY(185px); } .nav-tertiary li:nth-child(2) { -webkit-transform: translateY(125px); -ms-transform: translateY(125px); transform: translateY(125px); } .nav-tertiary li:nth-child(3) { -webkit-transform: translateY(65px); -ms-transform: translateY(65px); transform: translateY(65px); } .nav-tertiary .icon { display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); text-align: center; font-size: 20px; line-height: 42px; margin: 0 5px; color: #4f4f4f; transition: background .3s ease-in-out, color .3s ease-in-out;} .nav-tertiary li .fa-th-large { position: relative; } .nav-tertiary li .fa-th-large:after { content:''; display: inline-block; background: #fff; width: 11px; height: 11px; position: absolute; bottom: 0px; right: -1px; transition: background .3s ease-in-out;} .nav-tertiary li span { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; } .nav-tertiary .active { pointer-events: auto; } .nav-tertiary .active li { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1; visibility: visible; } .nav-tertiary a:hover .icon { background: #e2231b; color: #fff; } .nav-tertiary a:hover .fa-th-large:after { background: #e2231b; } @media (min-width: 768px) { .nav-tertiary .icon { width: 47px; height: 47px; line-height: 48px; font-size: 23px; margin: 0 6px; } .nav-tertiary li { margin-bottom: 22px; } .nav-tertiary li span { font-size: 16px; } } /* Small Desktop */ @media (min-width: 1200px) { .nav-tertiary { max-width: 1200px; } } /* ------------------------------------------------------------ *\ Nav-tabs \* ------------------------------------------------------------ */ .nav-tabs { display: none; width: 100%; background: #f2f2f2; margin: 0; font-size: 12px; text-transform: uppercase; color: #4c4c4c; border-bottom: 0; margin-bottom: 4px; } .nav-tabs li { display:inline-block; float: none; text-align: center; color: #1E114B; } .nav-tabs > li > a { display: block; border: none; border-bottom: 4px solid transparent; padding: 18px 18px 9px; margin-right: 0; transition: border .3s ease-in-out;} .nav-tabs > li > a:hover { border-bottom-color: #6233FF; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border: 0; border-bottom:4px solid #6233FF; background: none; color: #6233FF; } /* Small Desktop */ @media (min-width: 1200px) { .nav-tabs { display: table; } } /* ------------------------------------------------------------ *\ Nav-tabs-alt \* ------------------------------------------------------------ */ .nav-tabs-alt { font-size: 0; border-bottom: 1px solid #b8b8b8; background: #e5e5e5; color: #1E114B; } .nav-tabs-alt ul { display: table; width: 100%; table-layout: fixed; } .nav-tabs-alt li { display: table-cell; font-size: 10px; text-align: center; border-bottom: 4px solid transparent; font-weight: 700; text-transform: uppercase; } .nav-tabs-alt li a { display: block; padding: 21px 0 8px; } .nav-tabs-alt .active { color: #6233FF; border-bottom-color: #6233FF; } @media (min-width: 768px) { .nav-tabs-alt li { font-size: 13px; border-bottom-width: 6px; } .nav-tabs-alt li a { padding: 28px 0 10px; } } /* Small Desktop */ @media (min-width: 1200px) { .nav-tabs-alt li { font-size: 10px; border-bottom-width: 4px; } .nav-tabs-alt li a { padding: 21px 0 8px; } } /* ------------------------------------------------------------ *\ Network-item \* ------------------------------------------------------------ */ .network-items-outer { overflow-y: auto; background: #fff; } .network-items { list-style: none; } .network-item { background: #fff; } .network-item > a { display: block; padding: 10px 16px 5px; border-bottom: 1px solid #eaeaea; position: relative;} .network-item h6 { margin: 0; margin-bottom: 5px; } .network-item .network-item-icon { font-size: 22px; color: #291782; display: inline-block; vertical-align: middle; width: 37px; } .network-item .network-item-content { display: inline-block; vertical-align: middle; color: #291782; } .network-item .network-item-content p { color: #c6c6c6; font-size: 11px; letter-spacing: 0.03em; padding-left: 1px; } .network-item .network-item-content span + span:before { content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 2px; height: 2px; border-radius: 50%; background: #bfbfbf; } .network-item .network-status { font-size: 10px; position: absolute; top: 4px; right: 16px; color: #291782; } /* .network-item span.network-status { color: #291782; } */ .network-item .network-status-secondary { font-size: 14px; top: 7px; } .network-item .network-item-actions { padding: 6px 0 4px; display: none; } .network-item .network-item-actions.visible { display: block; } .network-item .network-schedule { display: none; } .network-item .network-schedule.active { display: block; } .network-items-tertiary .network-item { margin-bottom: 3px; } @media (min-width: 768px) { .network-items-outer { height: 260px; } .network-item > a { padding: 12px 26px 5px; } .network-item .network-item-icon { font-size: 28px; width: 50px; } .network-item .network-item-content p { font-size: 14px; } .network-item .network-status { font-size: 12px; right: 24px; } .network-item .network-item-actions { padding: 9px 0 7px; } .network-item .network-item-actions .list-modal-actions i { font-size: 24px; } .network-item .network-item-actions .list-modal-actions span { margin-top: 6px; } .network-item .network-status-secondary { font-size: 20px; top: 11px; } } /* Small Desktop */ @media (min-width: 1200px) { .network-items-outer { height: 198px; padding-top: 2px; } .network-item > a { padding: 8px 23px 5px; } .network-item .network-item-icon { font-size: 22px; width: 37px; } .network-item .network-item-content p { font-size: 11px; } .network-item .network-status { font-size: 12px; right: 24px; } .network-item .network-status-secondary { font-size: 14px; top: 8px; right: 73px; } .network-schedule .schedule-secondary .schedule-inner { padding: 6px 76px 0 105px; } } /* ------------------------------------------------------------ *\ Network-item-secondary \* ------------------------------------------------------------ */ .network-item-secondary > a { padding: 9px 16px 4px; } .network-item-secondary .network-item-icon { width: 31px; } .network-item-secondary .network-status { font-size: 14px; top: 8px; right: 14px; } .network-item-secondary .network-content h6 { margin-bottom: 4px; } @media (min-width: 768px) { .network-item-secondary .network-item-icon { width: 50px; } .network-item-secondary > a { padding: 11px 26px 5px; } .network-item-secondary .network-status { top: 3px; right: 27px; font-size: 18px; } } @media (min-width: 1200px) { .network-item-secondary .network-item-icon { width: 35px; } .network-item-secondary > a { padding: 9px 24px 4px; } .network-item-secondary .network-status { top: 9px; right: 24px; font-size: 14px; } } /* ------------------------------------------------------------ *\ Network-item-secondary-alt \* ------------------------------------------------------------ */ @media (min-width: 768px) { .network-item-secondary-alt .network-item-actions { float: right; width: 100%; max-width: 240px; margin-right: 10px; display: block; } .network-item-secondary-alt > a { display: inline-block; width: 100%; max-width: 430px; padding-right: 5px; border: 0; } .network-item-secondary-alt .network-status { right: 33px; top: 13px; } } @media (min-width: 1200px) { .network-item-secondary-alt:after { } .network-item-secondary-alt .network-item-actions { float: right; width: 100%; max-width: 180px; margin-right: 14px; display: block; padding: 3px 0; } .network-item-secondary-alt > a { display: inline-block; width: 100%; max-width: 340px; padding: 11px 16px 4px; border: 0; } .network-item-secondary-alt .network-item-content { padding-left: 2px; } .network-item-secondary-alt .network-status { right: 25px; top: 10px; } .network-item-secondary-alt .list-modal-actions li { width: auto; } .network-item-secondary-alt .list-modal-actions li + li { margin-left: 14px; } .network-item-secondary-alt .network-item-actions .list-modal-actions span { margin-top: 3px; } } /* ------------------------------------------------------------ *\ Network \* ------------------------------------------------------------ */ .network { max-width: 300px; margin: 0 auto; font-size: 10px; text-align: center; position: relative; padding: 13px 0; color: #1E114B; } .network .btn-speed-test { position: absolute; top: 70px; right: 18px; } /*.network .network-aside { position: absolute; top: 11px; left: 9px; z-index: 1; }*/ .network .network-aside { position: absolute; top: 80px; left: 5px; z-index: 1; } .network p { margin: 0; } .network-head-icon { font-size: 46px; margin-top: -4px; position: relative; z-index: 1; color: #291782; fill: #291782; } .network-head-icon .ico-globe { position: relative; bottom: -3px; } .network-icon { font-size: 22px; color: #838383; height: 50px; } .network-icon .fa-frown-o { color: #FF5F00; } .network-icon .fa-smile-o { color: #9C80FF; } .network-icon:before { content: ''; width: 1px; height: 50px; display: block; margin: 0 auto -4px; background: #1E114B; } .network-head { margin-bottom: 23px; position: relative; pointer-events:none;} .network-head .network-icon { margin-top: -15px; } .network .network-image { max-width: 30px; margin: 0 auto; position: relative; z-index: 1; } .network .network-image img { width: 100%; height: auto; margin-bottom: 6px; } @media (min-width: 768px) { .network { max-width: 394px; font-size: 13px; padding: 23px 0; } /*.network .network-aside { left: 15px; top: 22px; }*/ .network .network-aside { left: 10px; top: 115px; } .network .network-image { max-width: 40px;} .network-head { margin-bottom: 23px; } .network-head-icon { font-size: 60px; margin-top: -8px; } .network-icon { font-size: 30px; } .network-icon:before { height: 50px; margin-bottom: -8px; } .network .btn-speed-test { top: 95px; right: 0px; } } /* Small Desktop */ @media (min-width: 1200px) { .network { max-width: 300px; font-size: 10px; padding: 12px 0; } /*.network .network-aside { left: 9px; top: 11px; }*/ .network .network-aside { left: 5px; top: 80px; } .network .network-image { max-width: 30px;} .network-head { margin-bottom: 23px; } .network-head-icon { font-size: 46px; margin-top: -4px; } .network-icon { font-size: 22px; } .network-icon:before { height: 50px; margin-bottom: -4px; } .network .btn-speed-test { top: 70px; right: 18px; } } /* ------------------------------------------------------------ *\ Network-speed \* ------------------------------------------------------------ */ .network-speed .network-aside { top: 20px; } .network-speed .network-aside li + li { margin-top: 115px; } .network-speed .network-content { text-align: left; padding-top: 6px; margin-bottom: 20px; } @media (min-width: 768px) { .network-speed { padding-top: 21px; } .network-speed .network-content { padding-top: 0; margin-bottom: 24px; } } /* Small Desktop */ @media (min-width: 1200px) { .network-speed { padding-top: 20px; } .network-speed .network-content { padding-top: 0; margin-bottom: 25px; } } /* ------------------------------------------------------------ *\ Network-secondary \* ------------------------------------------------------------ */ .network-secondary { padding-top: 4px; } /*.network-secondary .network-aside { top: 6px; left: 0; }*/ .network-secondary .network-aside { top: 40px; left: 0; } .network-secondary .btn-speed-test { top: 61px; right: 16px; } @media (min-width: 768px) { .network-secondary { max-width: 590px; font-size: 18px; padding: 38px 0; } .network-secondary .btn-bordered { font-size: 18px; padding: 9px 11px 3px; right: 67px; top: 136px; } .network-secondary .btn-bordered i { font-size: 42px; } /*.network-secondary .network-aside { top: 38px; }*/ .network-secondary .network-aside { top: 110px; } .network-secondary .network-head { margin-bottom: 50px; } .network-secondary .network-head .network-icon { margin-top: -24px; } .network-secondary .network-icon { font-size: 40px; } .network-secondary .network-icon:before { height: 50px; } .network-secondary .network-image { max-width: 52px; } .network-secondary .network-image img { margin-bottom: 11px; } } /* Small Desktop */ @media (min-width: 1200px) { .network-secondary { font-size: 14px; padding: 30px 0; } .network-secondary .btn-bordered { font-size: 14px; padding: 5px 10px 3px; right: 110px; top: 108px; } .network-secondary .btn-bordered i { font-size: 34px; margin-bottom: 3px; } /*.network-secondary .network-aside { top: 32px; }*/ .network-secondary .network-aside { top: 85px; } .network-secondary .network-head { margin-bottom: 30px; } .network-secondary .network-head .network-icon { margin-top: -21px; } .network-secondary .network-icon { font-size: 32px; } .network-secondary .network-icon:before { height: 50px; margin-bottom: -6px; } .network-secondary .network-image { max-width: 42px; } .network-secondary .network-image img { margin-bottom: 7px; } } /* ------------------------------------------------------------ *\ Network-detail \* ------------------------------------------------------------ */ .network-details { list-style: none; font-size: 0; } .network-detail { position: relative; } .network-detail + .network-detail { margin-top: 84px; } .network-detail + .network-detail:last-child { margin-top: 108px; } .network-detail .network-detail-icon img { max-width: 30px; } .network-detail > p, .network-detail .network-detail-icon, .network-detail .network-detail-content { display: inline-block; vertical-align: middle; font-size: 12px; } .network-detail .network-detail-icon { font-size: 46px; width: 62px; text-align: center; line-height: 1; } .network-detail .network-detail-icon .ico-globe { position: relative; bottom: -4px; } .network-detail .network-detail-icon .fa-wifi { font-size: 22px; line-height: 1; position: absolute; bottom:100%; margin: -12px 0 0 2px; } .network-detail > p { width: 120px; text-align: right; } .network-detail .network-detail-content { position: absolute; top: 17px; right: 0; width: 114px; } .network-detail .network-detail-content p { margin-bottom: 4px; } .network-detail .network-detail-content p span { color: #291782; } .network-detail .network-detail-content p .network-value { font-weight: 700; font-size: 14px; } .network-detail .network-detail-content .network-detail-text { margin-bottom: 13px; } .network-detail .network-detail-content-secondary { top: 54px; } .network-detail .tablet-visible { display: none; } .network-detail .desktop-visible { display: none; } @media (min-width: 768px) { .network-detail + .network-detail { margin-top: 108px; } .network-detail + .network-detail:last-child { margin-top: 132px; } .network-detail > p { width: 158px; } .network-detail > p, .network-detail .network-detail-icon, .network-detail .network-detail-content { font-size: 16px; } .network-detail .network-detail-icon { font-size: 60px; width: 79px; } .network-detail .network-detail-icon img { max-width: 40px; margin-bottom: 3px; } .network-detail .network-detail-icon .fa-wifi { font-size: 28px; margin: 0 0 -6px -14px; left: 50%; } .network-detail .network-detail-icon .fa-tablet { font-size: 80px; } .network-detail .network-detail-content { width: 153px; top: 21px; } .network-detail .network-detail-content p { margin-bottom: 5px; } .network-detail .network-detail-content p .network-value { font-size: 18px; } .network-detail .network-detail-content .network-detail-text { margin-bottom: 16px; } .network-detail .network-detail-content-secondary { top: 67px; } .network-detail .tablet-visible { display: block; } .network-detail .tablet-hidden { display: none; } } @media (min-width: 1200px) { .network-detail + .network-detail { margin-top: 84px; } .network-detail + .network-detail:last-child { margin-top: 103px; } .network-detail > p { width: 120px; } .network-detail > p, .network-detail .network-detail-icon, .network-detail .network-detail-content { font-size: 12px; } .network-detail .network-detail-icon { font-size: 46px; width: 62px; } .network-detail .network-detail-icon img { max-width: 30px; margin-bottom: 3px; } .network-detail .network-detail-icon .fa-wifi { font-size: 22px; margin: 0 0 -7px -12px; } .network-detail .network-detail-icon .fa-laptop { font-size: 52px; } .network-detail .network-detail-content { width: 114px; top: 17px; } .network-detail .network-detail-content p { margin-bottom: 4px; } .network-detail .network-detail-content p .network-value { font-size: 14px; } .network-detail .network-detail-content .network-detail-text { margin-bottom: 13px; } .network-detail .network-detail-content-secondary { top: 52px; } .network-detail .tablet-visible { display: none; } .network-detail .desktop-visible { display: block; } } /* ------------------------------------------------------------ *\ Network-detail-progress \* ------------------------------------------------------------ */ .network-detail-progress { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; } .network-detail-progress span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #4d4d4d; display: block; margin: 4px auto; } .network-detail-progress .progress-dot-red { background: #291782; } .network-detail-progress .progress-dot-medium { width: 6px; height: 6px; margin: 2px auto;} .network-detail-progress .progress-dot-large { width: 8px; height: 8px; margin: 2px auto;} @media (min-width: 768px) { .network-detail-progress { margin-top: -5px; } .network-detail-progress span { width: 5px; height: 5px; background: #808080; margin: 5px auto 6px; } .network-detail-progress .progress-dot-medium { width: 7px; height: 7px; margin: 3px auto;} .network-detail-progress .progress-dot-large { width: 9px; height: 9px; margin: 3px auto; } } /* Small Desktop */ @media (min-width: 1200px) { .network-detail-progress { margin-top: -1px; } .network-detail-progress span { width: 4px; height: 4px; background: #4d4d4d; margin: 4px auto; } .network-detail-progress .progress-dot-medium { width: 6px; height: 6px; margin: 2px auto;} .network-detail-progress .progress-dot-large { width: 8px; height: 8px; margin: 2px auto; } } /* ------------------------------------------------------------ *\ Panel \* ------------------------------------------------------------ */ .panel-group { margin-bottom: 10px; } .panel-heading { padding: 0; position: relative; } .panel-heading a { display: block; padding: 10px 38px 8px; position: relative; border-radius: 3px; } .panel-heading a i { position: absolute; top: 12px; left: 12px; font-size: 10px; line-height: 1; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;} /*.panel-body { min-height: 238px; padding: 0 0 15px; }*/ .panel-body { padding: 0 0 0px; } .panel-body-empty { background: #fff; } .panel-default>.panel-heading { border: 0; box-shadow:none; background: none; } .panel-default>.panel-body { border: 0; } .panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group { border: none; } .panel-group .panel { border-radius: 2px; } .panel-group .panel + .panel { margin-top: 4px; } @media (min-width: 768px) { .panel-heading a { padding: 17px 47px 15px; } .panel-group .panel + .panel { margin-top: 4px; } } /* Small Desktop */ @media (min-width: 1200px) { .panel-heading { display: none; } .panel-collapse.collapse { display: block; height: auto !important; } .panel-group .panel { border-radius: 0px; } } /* ------------------------------------------------------------ *\ Panel-default \* ------------------------------------------------------------ */ .panel-default { border: 0; border-radius: 0; box-shadow:none; background: none; } .panel-default .panel-heading h6 { font-size: 16px; font-weight: 700; } .panel-default .panel-heading a { background: #291782; color: #fff; } .panel-default .panel-heading .collapsed { background: #f2f2f2; color: #4c4c4c; } .panel-default .panel-heading a i { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } .panel-default .panel-heading .collapsed i { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); top: 10px; } .panel-default .panel-body { margin-top: 2px; } @media (min-width: 768px) { .panel-default .panel-heading h6 { font-size: 16px; font-weight: 700; } .panel-default .panel-heading a i { left: 10px; top: 20px; } .panel-default .panel-heading .collapsed i { top: 20px; } } /* ------------------------------------------------------------ *\ Panel-nested \* ------------------------------------------------------------ */ .panel-nested .panel-body { min-height: 0; border-radius: 4px; padding-top: 20px; } .panel-nested .panel-head { font-size: 12px;line-height: 1.1; border: 2px solid #e5e5e5; } .panel-nested .panel-head > a { padding: 8px 13px; background: #f2f2f2; display: block; } .panel-nested .panel-head > a i { font-size: 10px; margin-right: 13px; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; position: relative; top: -1px; } .panel-nested .panel-head .collapsed i {-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg); } @media (min-width: 768px) { .panel-nested .panel-head { font-size: 14px; } .panel-nested .panel-head > a { padding: 11px 16px 10px; } .panel-nested .panel-head > a i { margin-right: 18px; } } @media (min-width: 992px) { .panel-nested .panel-head > a i { margin-right: 43px; } } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup-nested { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; z-index: -1; } .popup-nested .popup-content { background: #fff; border-radius: 4px; position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); max-width: 320px; margin-left: -144px; text-align: center; } .popup-nested .popup-head { padding: 16px 0; } .popup-nested .popup-head-alt { padding-bottom: 11px; } .popup-nested .popup-head-secondary { padding: 18px 0 14px; } .popup-nested .popup-title { color: #1E114B; margin: 0; line-height: 1.25; font-weight: 400; } .popup-nested .popup-title span { font-size: 16px; color: #1E114B; } .popup-nested .btn { border: 0; border-radius: 0; background: none; font-size: 14px; color: #1E114B; display: block; text-align: center; width: 100%; padding: 14px 0; text-transform: none; } .popup-nested .btn.uploadbtn { border-radius:4px; padding: 5px 16px 4px 16px; background-color: #291782; color: #ffffff; font-size:16px; text-transform: none; width:96px; } .popup-nested .uploadinput { border-radius:4px; padding: 6px 13px 4px 13px; background-color: #cccccc; color: #ffffff; font-size:16px; text-transform: none; width:96px; } .popup-nested .uploadinput:hover { background: #1E114B; } .popup-nested .list-details { margin: -2px; } .popup-nested.active { opacity: 1; visibility: visible; z-index: 10; } @media (min-width: 768px) { .popup-nested { font-size: 18px; } .popup-nested .popup-content { max-width: 370px; margin-left: -180px; border-radius: 4px; } .popup-nested .popup-head { padding: 20px 0 19px; } .popup-nested .btn { font-size: 18px; padding: 17px 0; } .popup-nested .popup-title { font-size: 20px; } .popup-nested .popup-title span { font-size: 20px; display: block; margin-top: -2px; } .popup-nested .list-details { margin: -2.4px 0px -4.8px 0px; } } @media (min-width: 1200px) { .popup-nested { font-size: 14px; } .popup-nested .popup-head { padding: 16px 0; } .popup-nested .popup-content { max-width: 320px; margin-left: -168px; } .popup-nested .btn { font-size: 15px; padding: 14px 0; } .popup-nested .popup-title { font-size: 18px; } .popup-nested .popup-title span { font-size: 16px; margin-bottom: -2px; } .popup-nested .list-details { margin: -2.1px 0px -2.1px 0px; } } /* ------------------------------------------------------------ *\ Popup for form - bigger size -- Add by Austin \* ------------------------------------------------------------ */ .popup-nested .popup-content2 { background: #fff; margin: 0 auto; overflow-y: auto; width: 100%; max-width: 75%; max-height: 75%} .popup-nested .popup-content2-header { max-height: none; margin: 10% auto 0;} .popup-nested .popup-forform .popup-head { padding: 16px 0; text-align: center;} .popup-nested .popup-forform .popup-title span { color: #291782; } .popup-nested .popup-forform .popup-section { padding: 20px 24px 12px; border-top:1px solid #c7c7c7;} .popup-nested .popup-forform .popup-section-row {} .popup-nested .popup-forform .popup-section .section-lable { display: inline-block; width: 185px; padding-top: 7px; margin-bottom: 0;vertical-align: top; font-weight: 400; text-align: left;} .popup-nested .popup-forform .popup-section .form-group { display: inline-block; vertical-align: middle; } .popup-forform .popup-footer {border-top:1px solid #c7c7c7;} .popup-forform .popup-footer > div {display: inline-block;text-align: center;} .popup-close {float:right;padding-right: 5px;} @media (min-width: 768px) { .popup-nested .popup-content2 { margin: 0 auto ; max-width: 488px; font-size: 16px;} .popup-nested .popup-content2-header { max-height: none; margin: 5% auto 0;} } @media (min-width: 1200px) { .popup-nested .popup-content2 { margin: 0 auto;} .popup-nested .popup-content2-header { max-height: none; margin: 4% auto 0;} .popup-nested .popup-forform .btn { font-size: 18px; padding: 14px 0; } .popup-nested .btn.uploadbtn { font-size: 16px; padding: 4px 16px 4px 16px; } } .popup-nested .popup-content2-footer { max-height: none; margin-top: 0;} /* ------------------------------------------------------------ *\ Popup-nested-secondary \* ------------------------------------------------------------ */ .popup-nested-secondary .popup-head { padding: 17px 0 14px; } @media (min-width: 768px) { .popup-nested-secondary .popup-head { padding: 19px 0 14px; } } /* Small Desktop */ @media (min-width: 1200px) { .popup-nested-secondary .popup-content { max-width: 350px;} .popup-nested-secondary .popup-head { padding: 13px 0 11px; } } /* ------------------------------------------------------------ *\ Schedule \* ------------------------------------------------------------ */ .schedule:after { } .schedule .schedule-aside { float: left; width: 28px; margin-top: 50px; } .schedule .schedule-content { float: left; width: calc(100% - 28px); padding-top: 4px; -ms-touch-action: none; touch-action: none; } .schedule .schedule-aside-right { float: right; width: 35px; display: none; text-align: center; } .schedule-date { height: 15px; position: relative; } .schedule-date input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; pointer-events: none;} .schedule-date label { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0; pointer-events: none; } .schedule-date input:checked + label { background: #e5e5e5; } .schedule .schedule-head { padding: 15px 12px 8px; background: #fff; border: 1px solid #eaeaea; border-left: 0; border-right: 0; border-bottom-width: 2px; border-radius: 4px; margin-bottom: 2px; } .schedule .schedule-head .form-label { margin-bottom: 0; } .schedule .schedule-head .switch { float: right; } .schedule .schedule-head .form-hint { margin: 0 15px 0 5px; } .schedule .schedule-head-status > strong { color: #bfbfbf; } .schedule .schedule-head-status .active-text { display: none; } .schedule .schedule-head.active .schedule-head-status > strong { display: none; } .schedule .schedule-head.active .active-text { display: inline; } .schedule .schedule-head.active .active-text strong { color: #291782; } .schedule .schedule-head.active + .schedule-inner .schedule-date input { pointer-events:auto; } .schedule .schedule-head.active + .schedule-inner .schedule-date input:checked + label { background: #291782; } @media (min-width: 768px) { .schedule .schedule-aside { width: 44px; padding-left: 8px; margin-top: 29px; } .schedule .schedule-content { padding-top: 9px; width: calc( 100% - 84px); } .schedule .schedule-aside-right { display: block; width: 36px; font-size: 16px; } .schedule-date { height: 15px; } .schedule .schedule-head { padding: 14px 48px 13px; } .schedule .schedule-head .head-label { padding-top: 0; min-width: 240px;} .schedule .schedule-head .switch { float: none; position: relative; top: 5px; min-width: 0;} } /* Small Desktop */ @media (min-width: 1200px) { .schedule-date { height: 11px; } .schedule .schedule-aside { width: 32px; padding-left: 8px; margin-top: 21px; } .schedule .schedule-content { padding-top: 6px; width: calc( 100% - 64px); } .schedule .schedule-aside-right { display: block; width: 25px; font-size: 12px; text-align: left; padding-left: 5px; } .schedule .schedule-head { padding: 13px 58px 8px; } .schedule .schedule-head .head-label { min-width: 190px; } .schedule .schedule-head .switch { position: relative; top: 5px; } } /* ------------------------------------------------------------ *\ Schedule-secondary \* ------------------------------------------------------------ */ .schedule-secondary .schedule-inner { margin-bottom: 2px; background: #fff; padding: 0 15px 7px; border-radius: 4px; } .schedule-secondary .schedule-inner:after { } .schedule-secondary .schedule-actions { background: #fff; padding: 5px 0; border-radius: 4px; } .schedule-secondary .schedule-actions-bordered { border-top: 2px solid #eaeaea; border-top: 2px solid #eaeaea; } @media (min-width: 768px) { .schedule-secondary .schedule-inner { padding: 23px 106px 29px 100px; } .schedule-secondary .schedule-aside { padding-left: 0; margin-top: 36px; } .schedule-secondary .schedule-aside-right { font-size: 18px; } .schedule-secondary .schedule-content { width: calc( 100% - 89px) } .schedule-secondary .table-schedule { margin-bottom: 5px; } .schedule-secondary .table-schedule th { font-size: 20px; padding-bottom: 5px; } .schedule-secondary .table-schedule-time table { font-size: 19px; } .schedule-secondary .table-schedule-time p { font-size: 16px; padding-top: 0; } .schedule-secondary .list-schedule-dates { font-size: 16px; } .schedule-secondary .list-schedule-dates li { margin-bottom: 12px; } .schedule-secondary .list-weather-states li + li { margin-top: 73px; } .schedule-secondary .schedule-date { height: 32px; } .schedule-secondary .list-modal-actions li { width: auto; margin: 0 15px; } } @media (min-width: 1200px) { .schedule-secondary .schedule-inner { padding: 23px 151px 16px 176px; } .schedule-secondary .schedule-aside { padding-left: 0; margin-top: 25px; } .schedule-secondary .schedule-aside-right { font-size: 18px; margin-right: 14px; } .schedule-secondary .schedule-content { width: calc( 100% - 89px) } .schedule-secondary .table-schedule { margin-bottom: 17px; } .schedule-secondary .table-schedule th { font-size: 14px; padding-bottom: 7px; } .schedule-secondary .table-schedule-time { position: relative; } .schedule-secondary .table-schedule-time table { font-size: 14px; } .schedule-secondary .table-schedule-time p { font-size: 14px; padding-top: 0; position: absolute; bottom: 3px; right: 100%; width: 83px; } .schedule-secondary .list-schedule-dates { font-size: 14px; } .schedule-secondary .list-schedule-dates li { margin-bottom: 5px; } .schedule-secondary .list-weather-states li + li { margin-top: 45px; } .schedule-secondary .schedule-date { height: 22px; } .schedule-secondary .list-modal-actions li { width: auto; margin: 0 12px; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { position: relative; min-height: 100vh; margin: 0 -4px; text-align: center; background: #fff; } .section-wan-down { position: relative; min-height: 100vh; margin: 0 -4px; text-align: center; background: #fff; } @media (min-width: 768px) { .section { max-width: 475px; min-height: 0; height: 475px; margin: -237px 0 0 -237px; position: absolute; top: 50%; left: 50%; width: 100%; border-radius: 4px; } .section-wan-down { max-width: 600px; min-height: 0; height: 640px; margin: -350px 0 0 -310px; position: absolute; top: 50%; left: 50%; width: 100%; border-radius: 4px; } } @media (min-width: 1200px) { .section { max-width: 475px; min-height: 0; height: 475px; margin: -237px 0 0 -237px; text-align: center; } .section-wan-down { max-width: 600px; min-height: 0; height: 640px; margin: -350px 0 0 -310px; text-align: center; } } /* ------------------------------------------------------------ *\ Section-settings \* ------------------------------------------------------------ */ .section-settings { margin: 4px 0; font-size: 16px; padding-bottom: 50px; color: #1E114B; } .section-settings h6 { font-weight: 400; margin: 0; } .section-settings .section-head { padding: 12px 12px 16px; } .section-settings .section-content { background: #fff; min-height: 388px;} .section-settings .network-item h6 { font-weight: 400; margin-bottom: 4px; } .section-settings .section-entry { padding: 15px 12px 8px; background: #fff; border: 1px solid #eaeaea; border-left: 0; border-right: 0; border-bottom-width: 2px; border-radius: 4px; margin-bottom: 2px; } .section-settings .section-entry label { margin-bottom: 0; font-weight: 400; } .section-settings .section-entry .switch { float: right; } .section-settings .section-entry .form-hint { margin: 0 15px 0 5px; } .section-settings .section-entry-status > strong { color: #bfbfbf; } .section-settings .section-entry-status .active-text { display: none; } .section-settings .section-entry.active .section-entry-status > strong { display: none; } .section-settings .section-entry.active .active-text { display: inline; } .section-settings .section-entry.active .active-text strong { color: #291782; } @media (min-width: 768px) { .section-settings { max-width: 684px; margin: 44px auto 0; font-size: 18px; } .section-settings .section-head { padding: 15px 0 19px; } .section-settings .section-entry { padding: 20px 49px 17px; } .section-settings .section-entry .label { min-width: 240px; } .section-settings .section-entry label { vertical-align: middle;} .section-settings .section-entry .switch { float: none; } .section-settings .section-entry .entry-label { min-width: 240px; } .section-settings .nav-tabs-alt li { font-size: 16px; } .section-settings .nav-tabs-alt li a { padding: 30px 0 3px; } } /* Small Desktop */ @media (min-width: 1200px) { .section-settings { margin: 40px 0 0 36px; max-width: 736px; font-size: 14px; } .section-settings .section-content { border-radius: 4px; } .section-settings .section-head { padding: 13px 0 17px; } .section-settings .section-head h6 { font-size: 20px; } .section-settings .nav-tabs-alt { background: #f2f2f2; border-bottom: none; } .section-settings .nav-tabs-alt li { font-size: 12px; display: inline-block; padding: 0 18px; } .section-settings .nav-tabs-alt li a { padding: 21px 0 8px; } .section-settings .section-entry { padding: 15px 74px 14px; } .section-settings .section-entry .entry-label { min-width: 185px; } } /* ------------------------------------------------------------ *\ Section-panels \* ------------------------------------------------------------ */ .section-panels { margin-top: 4px; } /* ------------------------------------------------------------ *\ Section-welcome \* ------------------------------------------------------------ */ .section-welcome { padding-top: 173px; overflow-y: auto; } .section-welcome:before { position: absolute; top: -30px; left: 50%; width: 100%; height: 197px; margin-left: -50%; background: url(images/ornament.png) center top no-repeat; background-size: auto 197px; content: ''; } .section-welcome h3 { color: #291782; margin: 7px 0 44px; font-weight: 300; } .section-welcome h2 { margin: 0 0 63px; font-weight: 300; } .section-welcome .section-actions .btn { margin-bottom: 25px; } .section-welcome .section-actions a:not(.btn) { font-size: 14px; text-decoration: underline; } .section-welcome .section-actions a:not(.btn):hover { text-decoration: none; } .section-welcome .section-inner { max-width: 248px; margin: 0 auto; max-height: 620px;} @media (min-width: 768px) { /*.section-welcome { padding-top: 217px; } .section-welcome:before { height: 245px; background-size: auto 245px; } .section-welcome .section-inner { max-width: 310px;} .section-welcome h3 { margin: 13px 0 54px; } .section-welcome h2 { margin-bottom: 79px; } .section-welcome .section-actions a:not(.btn) { font-size: 18px; } .section-welcome .section-actions .btn { margin-bottom: 35px; }*/ .section-welcome { padding-top: 173px; max-width: 475px; min-height: 0; height: 475px; margin: -237px 0 0 -237px; } .section-welcome:before { height: 203px; background-size: auto 203px; } .section-welcome h3 { margin: 7px 0 44px; font-size: 23px; } .section-welcome h2 { margin-bottom: 63px; font-size: 29px; } .section-welcome .section-inner { max-width: 248px;} .section-welcome .section-actions a:not(.btn) { font-size: 14px; } .section-welcome .section-actions .btn { margin-bottom: 26px; padding: 6px 0; font-size: 18px; } } /* Small Desktop */ @media (min-width: 1200px) { .section-welcome { padding-top: 173px; } .section-welcome:before { height: 203px; background-size: auto 203px; } .section-welcome h3 { margin: 7px 0 44px; } .section-welcome h2 { margin-bottom: 63px; } .section-welcome .section-inner { max-width: 248px;} .section-welcome .section-actions a:not(.btn) { font-size: 14px; } .section-welcome .section-actions .btn { margin-bottom: 26px; } } /* ------------------------------------------------------------ *\ Section-login \* ------------------------------------------------------------ */ .section-login { padding: 83px 0 0; text-align: left; } .section-login-wan-down { padding: 13px 0 0 ; text-align: center; } .section-login h4 { margin: 36px 0 0; font-weight: 400; color: #6233FF; } .section-login p { margin-bottom: 9px; } .section-login a { text-decoration: underline; } .section-login-wan-down p { margin-bottom: 9px; } .section-login-wan-down a { text-decoration: underline; } .section-login a:hover { text-decoration: none; } .section-login-wan-down { text-decoration: none; } .section-login .section-inner { max-width: 248px; margin: 0 auto; } .section-login .section-head { text-align: center; margin-bottom: 38px; } .section-login .section-body { margin-bottom: 27px; } /* .section-login .section-body .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #C6C6C6; opacity: 1; /* Firefox */ } .section-login .section-body .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #C6C6C6; } .section-login .section-body .form-control::-ms-input-placeholder { /* Microsoft Edge */ color: #C6C6C6; } */ .section-login .section-actions { text-align: center; } .section-login .status-items { margin-bottom: 26px; } @media (min-width: 768px) { /*.section-login { padding-top: 68px; font-size: 18px; } .section-login h4 { margin-top: 45px; } .section-login p { margin-bottom: 12px; } .section-login .section-inner { max-width: 310px;} .section-login .section-head { margin-bottom: 48px; } .section-login .section-body { margin-bottom: 33px; } .section-login .status-items { margin-bottom: 33px; }*/ .section-login { padding-top: 83px; font-size: 14px; } .section-login-wan-down { padding-top: 56px; font-size: 14px; } .section-login h4 { margin-top: 36px; font-size: 20px; } .section-login p { margin-bottom: 9px; } .section-login-wan-down p { margin-bottom: 9px; } .section-login .section-inner { max-width: 248px;} .section-login .section-head { margin-bottom: 38px; } .section-login .section-body { margin-bottom: 24px; } .section-login .status-items { margin-bottom: 26px; } } /* Small Desktop */ @media (min-width: 1200px) { .section-login { padding-top: 83px; font-size: 14px; } .section-login-wan-down { padding-top: 56px; font-size: 14px; } .section-login h4 { margin-top: 36px; } .section-login p { margin-bottom: 9px; } .section-login-wan-down p { margin-bottom: 9px; } .section-login .section-inner { max-width: 248px;} .section-login .section-head { margin-bottom: 38px; } .section-login .section-body { margin-bottom: 24px; } .section-login .status-items { margin-bottom: 26px; } } /* ------------------------------------------------------------ *\ Section-install \* ------------------------------------------------------------ */ .section-install { padding: 0 4px; } .section-install .section-body { position: relative; } .section-install .section-foot { position: absolute; bottom: 42px; left: 0; width: 100%; text-align: center; z-index: 5; } @media (min-width: 768px) { /*.section-install .section-foot { bottom: 54px; }*/ .section-install .section-foot { bottom: 42px; } } /* Small Desktop */ @media (min-width: 1200px) { .section-install .section-foot { bottom: 42px; } } /* ------------------------------------------------------------ *\ Section-guideline \* ------------------------------------------------------------ */ .section-guideline .section-head h6 { color: #291782; font-weight: 700; } /* Small Desktop */ @media (min-width: 1024px) { .section-guideline { max-width: 736px; margin-top: 24px; } } /* ------------------------------------------------------------ *\ Setting \* ------------------------------------------------------------ */ .settings { list-style: none; margin: 0 16px; border-top: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7; } .setting { text-align: left; padding: 12px 0 10px; position: relative; } .setting + .setting { border-top: 1px solid #c7c7c7; } .setting h6 { font-weight: 500; margin: 0 0 5px; } .setting .setting-icon { font-size: 22px; display: inline-block; vertical-align: top; } .setting .setting-content { display: inline-block; vertical-align: top; max-width: 168px; font-size: 12px; margin-left: 15px; } .setting .switch { position: absolute; top: 50%; right: 0; margin-top: -8px; } @media (min-width: 768px) { .setting h6 { font-size: 16px; } .settings { margin: 0 18px; } .setting { padding: 12px 0 10px; } .setting .setting-icon { font-size: 22px; margin-top: -1px; } .setting .setting-content { font-size: 12px; max-width: 168px; margin-left: 15px; } .setting .switch { margin-top: -10px; } .setting .switch { width: 50px; height: 18px; } .setting .switch .switch-slider:before { width: 28px; height: 28px; top: -6px; } .setting .switch input:checked + .switch-slider:before {-webkit-transform: translateX(23px);-ms-transform: translateX(23px);transform: translateX(23px); } } @media (min-width: 1200px) { .settings { margin: 0 18px; } .setting { padding: 12px 0 10px; } .setting .setting-icon { font-size: 22px; margin-top: -1px; } .setting .setting-content { font-size: 12px; max-width: 168px; margin-left: 15px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider {} .slider .slides { list-style: none outside none; } /* ------------------------------------------------------------ *\ Status-item \* ------------------------------------------------------------ */ .status-items { list-style: none; font-size: 0; } .status-item { padding: 4px 0; position: relative; } .status-item + .status-item { border-top: 2px solid #ebebeb; } .status-item .status-item-icon { display: inline-block; vertical-align: middle; font-size: 20px; width: 40px; margin-top: -1px; } .status-item .status-item-icon .ico-globe { margin-top: 1px; } .status-item .status-item-icon svg { width: 20px; height: 20px; } .status-item .status-indicator { position: absolute; top: 2px; right: 2px; } .status-item .status-indicator:after { display: block; content: '\f118'; font-family: FontAwesome; font-size: 22px; } .status-item .status-indicator-fail { position: absolute; top: 2px; right: 2px; } .status-item .status-indicator-fail:after { display: block; content: '\f119'; font-family: FontAwesome; font-size: 22px; } .status-item span { display: inline-block; vertical-align: middle; font-size: 14px; } @media (min-width: 768px) { /*.status-item { padding: 5px 0; } .status-item span { font-size: 18px; } .status-item .status-item-icon { font-size: 26px; width: 51px; } .status-item .status-item-icon svg { width: 26px; height: 26px; } .status-item .status-indicator { top: 0; right: 0; } .status-item .status-indicator:after { font-size: 36px; }*/ .status-item { padding: 4px 0; } .status-item span { font-size: 14px; } .status-item .status-item-icon { font-size: 20px; width: 40px; } .status-item .status-item-icon svg { width: 20px; height: 20px; } .status-item .status-indicator { top: 2px; right: 2px; } .status-item .status-indicator:after { font-size: 26px; } .status-item .status-indicator-fail { top: 2px; right: 2px; } .status-item .status-indicator-fail:after { font-size: 26px; } } @media (min-width: 1200px) { .status-item { padding: 4px 0; } .status-item span { font-size: 14px; } .status-item .status-item-icon { font-size: 20px; width: 40px; } .status-item .status-item-icon svg { width: 20px; height: 20px; } .status-item .status-indicator { top: 2px; right: 2px; } .status-item .status-indicator:after { font-size: 26px; } .status-item .status-indicator-fail { top: 2px; right: 2px; } .status-item .status-indicator-fail:after { font-size: 26px; } } /* ------------------------------------------------------------ *\ Step \* ------------------------------------------------------------ */ .steps { list-style: none; margin: 0; position: relative; overflow: hidden; min-height: 475px; } .step { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform .5s; transition: transform .5s ; transition: transform .5s, -webkit-transform .5s; background: #fff; will-change: transform; } .step .step-inner { padding-bottom: 15px; min-height: 475px; max-width: 320px; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; overflow-y: auto; overflow-x: hidden;} .step [class^="col-"] { position: static; } .step .step-head { padding: 25px 16px; margin-bottom: 13px; min-height: 120px;} .step .step-head h5 { font-weight: 500; color: #291782; margin: 0 0 15px; position: relative; } .step .step-head h5 a { position: absolute; top: 0; left: 0; } .step .form-login { max-width: 240px; margin: 40px auto 0; } .step .list-components { margin-bottom: 17px; } .step .step-actions a:not(.btn-forward) { text-decoration: underline; } .step .step-actions a:not(.btn-forward):hover { text-decoration: none; } .step .step-actions-primary { position: absolute; bottom: 15px; left: 0; width: 100%; } .step .step-actions-primary a { text-decoration: underline; } .step .step-actions-primary a:hover { text-decoration: none; } .step .step-image { position: relative; } .step .spinner { -webkit-animation: rotate 1.4s linear infinite; animation: rotate 1.4s linear infinite; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; } .step .path { stroke: #3fa4ec; stroke-dasharray: 187; stroke-dashoffset: -50; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; } @media (min-width: 768px) { /*.steps { min-height: 600px;} .step .step-inner { max-width: 400px; min-height: 600px;} .step .step-head { padding: 28px 16px; margin-bottom: 21px; } .step .step-head h5 { margin-bottom: 20px; } .step .step-head h5 a { left: 4px; } .step .step-head p { font-size: 18px; } .step .form-login { max-width: 304px; font-size: 16px; margin-top: 60px; } .step .form-login .form-control { font-size: 16px; } .step .step-actions { font-size: 18px; } .step .step-actions-primary { bottom: 17px; } .step .list-components { margin-bottom: 20px; } .step .step-image img { height: 232px; width: auto; }*/ .steps { min-height: 475px;} .step .step-inner { max-width: 320px; min-height: 475px;} .step .step-head {padding: 23px 16px; margin-bottom: 11px; } .step .step-head h5 { margin: 0 0 15px; font-size: 18px; } .step .step-head h5 a { left: 4px; } .step .step-head p { font-size: 14px; } .step .form-login .form-control { font-size: 14px; } .step .step-actions { font-size: 14px; } .step .step-actions-primary { bottom: 12px; } .step .list-components { margin-bottom: 18px; } .step .step-image img { height: 185px; width: auto; } } @media (min-width: 1200px) { .steps { min-height: 475px;} .step .step-inner { max-width: 320px; min-height: 475px;} .step .step-head {padding: 23px 16px; margin-bottom: 11px; } .step .step-head h5 { margin: 0 0 15px;} .step .step-head h5 a { left: 4px; } .step .step-head p { font-size: 14px; } .step .form-login { max-width: 240px; font-size: 14px; margin-top: 40px; } .step .form-login .form-control { font-size: 14px; } .step .step-actions { font-size: 14px; } .step .step-actions-primary { bottom: 12px; } .step .list-components { margin-bottom: 18px; } .step .step-image img { height: 185px; width: auto; } } /* ------------------------------------------------------------ *\ Step-alt \* ------------------------------------------------------------ */ .step-alt h5, .step-alt .step-head h5 { font-weight: 300; color: #4c4c4c; margin-bottom: 0; } .step-alt .step-head { padding: 32px 16px 33px; min-height:0;} .step-alt .step-body h5 { font-style: italic; margin: 0 0 17px; } .step-alt .step-image { margin-bottom: 22px; } .step-alt .link-skip { position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; } .step-alt .settings { margin-bottom: 33px; } @media (min-width: 768px) { .step-alt .step-head { padding: 35px 16px 38px; } .step-alt .step-body h5 { /*margin-bottom: 19px;*/ font-size: 18px; } } @media (min-width: 1200px) { .step-alt .step-image { margin-bottom: 20px; } .step-alt .step-body h5 { margin-bottom: 19px; } } /* ------------------------------------------------------------ *\ Slide-in \* ------------------------------------------------------------ */ .step.active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .step.slide-out { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); transition: -webkit-transform 1s; transition: transform 1s ; transition: transform 1s, -webkit-transform 1s; } /* ------------------------------------------------------------ *\ Switch \* ------------------------------------------------------------ */ .switch {position: relative; display: inline-block; width: 50px; height: 18px; margin-bottom: 0; } .switch input {display:none;} .switch .switch-slider {position: absolute; cursor: pointer; top: 0; left: 0px; right: 1px; bottom: 0px; background-color: #bfbfbf; transition: .4s; border-radius: 10px; border: 1px solid #acacac; } .switch .switch-slider:before {position: absolute; content: ""; height: 28px; width: 28px; top: -6px; left: -2px; border: 1px solid #b1b1b1; background-color: white; transition: .4s; border-radius: 50%; z-index: 1; box-shadow: 0 0 3px rgba(0,0,0, .4);} .switch .switch-slider:after { content: ''; position: absolute; top: -1px; left: 0px; bottom: -1px; width: 24px; background-color: #6233FF; border-radius: 10px; transition: width .4s;} .switch input:checked + .switch-slider:before {-webkit-transform: translateX(23px);-ms-transform: translateX(23px);transform: translateX(23px); } .switch input:checked + .switch-slider:after { width: 100%; } /*francis 20181031 add*/ .switch input:disabled + .switch-slider:after { background-color: grey } .switch input:disabled + .switch-slider:before { background-color: lightgrey } .switch input:disabled + .switch-slider {cursor: not-allowed;background-color: grey} /*francis end*/ @media (min-width: 768px) { .switch { width: 64px; height: 22px; } .switch .switch-slider:before { width: 34px; height: 34px; top: -7px; } .switch input:checked + .switch-slider:before {-webkit-transform: translateX(33px);-ms-transform: translateX(33px);transform: translateX(33px); } } @media (min-width: 1200px) { .switch { width: 50px; height: 18px; } .switch .switch-slider:before { width: 28px; height: 28px; top: -6px; } .switch input:checked + .switch-slider:before {-webkit-transform: translateX(23px);-ms-transform: translateX(23px);transform: translateX(23px); } } /* ------------------------------------------------------------ *\ Tab \* ------------------------------------------------------------ */ .tab-content-alt>.tab-pane { display: block; } .tab-content-alt>.fade { opacity: 1; } /* Small Desktop */ @media (min-width: 1200px) { .tab-content-alt>.tab-pane { display: none; } .tab-content-alt>.tab-pane.active { display: block; } .tab-content-alt>.fade { opacity: 0; } .tab-content-alt>.fade.in { opacity: 1; } } /* ------------------------------------------------------------ *\ Tab-pane \* ------------------------------------------------------------ */ .tab-pane-inner { overflow-y: auto; } .tab-pane-inner2 { overflow-y: auto; } .tab-pane-inner3 { overflow-y: auto; } .tab-pane-head { padding: 15px 16px; color: #1E114B; } caption.tab-pane-head { font-weight: bold; font-size: 16px; border-color: #4c4c4c; } .tab-pane-head h6 { margin: 0; color: #808080; font-weight: 400; } @media (min-width: 768px) { .tab-pane-inner { height: 440px; } .tab-pane-inner2 { height: 550px; } .tab-pane-inner3 { height: 490px; } .tab-pane-head { padding: 19px 26px 18px; } } /* Small Desktop */ @media (min-width: 1200px) { .tab-pane-inner { height: 340px; } .tab-pane-inner2 { height: 550px; } .tab-pane-inner3 { height: 380px; } .tab-pane-head { padding: 15px 25px 16px; } } /* ------------------------------------------------------------ *\ Tab-pane-secondary \* ------------------------------------------------------------ */ @media (min-width: 768px) { .tab-pane-secondary .tab-pane-head { padding: 19px 47px 16px; } .tab-pane-secondary .tab-pane-head h6 { font-size: 18px; } } /* Small Desktop */ @media (min-width: 1200px) { .tab-pane-secondary .tab-pane-head { padding: 23px 73px 16px; } .tab-pane-secondary .tab-pane-head h6 { font-size: 14px; } .tab-pane-secondary .tab-pane-body { padding: 0 73px; } .tab-pane-secondary .network-item h6 { font-size: 14px; } .tab-pane-secondary .tab-pane-actions { padding: 0 73px; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table-schedule { margin-bottom: 5px; } .table-schedule table { table-layout: fixed; color: #4c4c4c; border: none; font-size: 14px; text-transform: uppercase; } .table-schedule .current { color: #000; } .table-schedule table>thead>tr>th, .table-schedule table>thead>tr>td { border: none; border-bottom-color: #b2b2b2; border-bottom-width: 1px; font-weight: 400; padding: 0 0 2px; text-align: center; } .table-schedule table>tbody>tr>th, .table-schedule table>tfoot>tr>th, .table-schedule table>tbody>tr>td, .table-schedule table>tfoot>tr>td { border-color: #b2b2b2; padding: 0; border-radius: 0; } @media (min-width: 768px) { .table-schedule { margin-bottom: 8px; } .table-schedule table { font-size: 18px; } } /* Small Desktop */ @media (min-width: 1200px) { .table-schedule { margin-bottom: 4px; } .table-schedule table { font-size: 14px; } } /* ------------------------------------------------------------ *\ Table-schedule-time \* ------------------------------------------------------------ */ .table-schedule-time table { font-size: 12px; text-align: center; color: #b2b2b2; } .table-schedule-time p { margin-bottom: 1px; font-size: 10px; padding-left: 2px; } .table-schedule-time table>tbody> tr> td{ padding-top: 4px; } @media (min-width: 768px) { .table-schedule-time table { font-size: 16px; } .table-schedule-time p { font-size: 13px; } } /* Small Desktop */ @media (min-width: 1200px) { .table-schedule-time table { font-size: 12px; } .table-schedule-time p { font-size: 10px; } } /* ------------------------------------------------------------ *\ Table-details \* ------------------------------------------------------------ */ .table-details { margin: 0 -12px; } .table-details p { padding-left: 12px; } .table-details td:before { content: attr(data-text); color: #4c4c4c; display: inline-block; vertical-align: middle; font-weight: 700; font-size: 18px; margin-bottom: 5px; width: 150px; } .table-details thead { display: none; } .table-details tbody { display: block; width: 100%; } .table-details table { display: block; width: 100%; } .table-details table tr { display: block; border-bottom: 2px solid #9a9a9a; padding: 6px 12px 2px; position: relative; } .table-details table tr:last-child { border-top: none; padding: 16px 12px; } .table-details td { display: block; width: 100%; padding: 3px 0 6px; } .table-details strong { font-weight: 400; } .table-details td > i { font-size: 24px; margin-right: 5px; } .table-details td a { font-size: 24px; } .table-details td:last-child { display: none; } .table-details td.link-holder { position: absolute; top: 0; right: 9px; display: inline-block; width: auto;} .table-details td.link-holder i { color: #291782;} .table-details td.link-holder i:hover { color: #1E114B;} .table-details td.link-holder-button { top: 70px; right: 9px; display: inline-block; width: auto; border-radius: 4px; } .table-details .form-control { max-width: 146px; } .table-details .form-control_max { max-width: 200px; } .table-details .form-control.tableselect { max-width: 172px; } @media (min-width: 768px) { .table-details { margin: 0; } .table-details p { padding-left: 0; } .table-details td:before { content:none; } .table-details thead { display: table-header-group; } .table-details th { padding-bottom: 5px; padding-left: 16px; } .table-details table { display: table; } .table-details table tr { display: table-row; } .table-details tbody { display: table-row-group; } .table-details td { display: table-cell; padding: 7px 25px 7px 16px; height: 60px; /*font-size: 16px; francis 20180911 16>14*/font-size: 14px; } .table-details td:nth-child(1) { width: 203px; } .table-details td:nth-child(2) { width: 184px; } .table-details .table-cell-alt { padding-left: 0; } .table-details .form-control { max-width:100%; width: 157px; } .table-details .form-control_max { max-width:100%; width: 250px; } .table-details td > i { font-size: 19px; vertical-align: middle; } .table-details .select .form-control { width: 100%; } .table-details td:last-child, .table-details td:last-child { padding: 0; display: table-cell; } .table-details td.link-holder { position: static; } .table-details td.link-holder-button { position: static; } } @media (min-width: 1200px) { .table-details { margin: 0; } .table-details th { padding-bottom: 1px; padding-left: 6px; } .table-details strong { font-weight: 700; } .table-details tbody { display: table-row-group; } .table-details td { display: table-cell; padding: 5px 11px 5px 6px; height: 39px; /*font-size: 16px; francis 20180911 16>14*/font-size: 14px; } .table-details td:nth-child(1) { width: 203px; } .table-details td:nth-child(2) { width: 184px; } .table-details .table-cell-alt { padding-left: 0; } .table-details .form-control { max-width:100%; width: 157px; } .table-details .form-control_max { max-width:100%; width: 300px; } .table-details td > i { font-size: 19px; vertical-align: middle; } .table-details .select .form-control { width: 100%; } .table-details td:last-child, .table-details td:last-child { padding: 0; display: table-cell; } .table-details td.link-holder { position: static; } .table-details td.link-holder-button { position: static; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ IV. Themes \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Custom Scrollbar \* ------------------------------------------------------------ */ .custom-scroll .mCSB_inside > .mCSB_container { margin-right: 0; } .custom-scroll .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } /* ------------------------------------------------------------ *\ IE Fixes \* ------------------------------------------------------------ */ /* IE10 */ _:-ms-lang(x), .step .spinner {animation: rotate-ie 1.4s linear infinite; } /* IE11 */ @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .step .spinner {animation: rotate-ie 1.4s linear infinite; } } /* Edge */ @supports (-ms-ime-align:auto) { .step .spinner {-webkit-animation: rotate-ie 1.4s linear infinite;animation: rotate-ie 1.4s linear infinite; } } /* ------------------------------------------------------------ *\ No-Touch \* ------------------------------------------------------------ */ @media (min-width: 768px) { .no-touch .container { padding: 0 7px; } .no-touch .cards-holder { width: 100%; max-width: 820px; padding: 0; overflow: hidden; } .no-touch .cards { margin: 20px auto 0 ; max-width: 800px; text-align: left; } .no-touch .card { max-width: 154px; height: 120px; padding-top: 22px; } .no-touch .card > a { font-size: 12px; } .no-touch .card .card-icon { font-size: 50px; height: 55px; } .no-touch .card .card-icon-small { font-size: 44px; } .no-touch .card-content { height: 40px; } .no-touch .ico-recycle svg { width: 45px; height: 45px; } .no-touch .ico-mesh svg { width: 120px; height: 60px; } .no-touch .ico-device svg { width: 120px; height: 50px; } .no-touch .card .card-schedule { left: 3px; top: 4px; font-size: 11px;} /*tabs*/ .no-touch .tab-content-alt>.tab-pane { display: none; } .no-touch .tab-content-alt>.tab-pane.active { display: block; } .no-touch .tab-content-alt>.fade { opacity: 0; } .no-touch .tab-content-alt>.fade.in { opacity: 1; } .no-touch .panel-heading { display: none; } .no-touch .panel-collapse.collapse { display: block; height: auto !important; } .no-touch .panel-group .panel { border-radius: 0px; } .no-touch .nav-tabs { display: table; } .no-touch .article .article-foot { display: block; } .no-touch .sidebar { padding-top: 60px; width: 256px;} .no-touch .sidebar .list-modes { margin-bottom: 24px; } /* Navigation*/ .no-touch .nav { font-size: 14px; } .no-touch .nav > ul > li a { padding: 7px 16px 7px 64px; } .no-touch .nav > ul > li > a {padding: 11px 16px 11px 64px; } .no-touch .nav .has-dropdown > ul li:first-child { padding-top: 4px; } .no-touch .nav .has-dropdown > ul li:last-child { padding-bottom: 4px; } .no-touch .nav a i { left: 27px; } /*List-modes */ .no-touch .list-modes li { border-radius: 3px 0 0 3px; } .no-touch .list-modes li + li { border-radius: 0 3px 3px 0; } .no-touch .list-modes li a { font-size: 14px; padding: 9px 0 8px; } /* section-settings */ .no-touch .section-settings { max-width: 736px; font-size: 14px; } .no-touch .section-settings .section-content { border-radius: 4px; } .no-touch .section-settings .section-head { padding: 13px 0 17px; } .no-touch .section-settings .section-head h6 { font-size: 20px; } .no-touch .section-settings .nav-tabs-alt { background: #f2f2f2; border-bottom: none; } .no-touch .section-settings .nav-tabs-alt li { font-size: 12px; display: inline-block; padding: 0 18px; } .no-touch .section-settings .nav-tabs-alt li a { padding: 21px 0 8px; } .no-touch .section-settings .section-entry { padding: 15px 74px 14px; } .no-touch .section-settings .section-entry .entry-label { min-width: 185px; } /* Form-settings */ .no-touch .form-settings p { margin-bottom: 25px; padding-top: 10px; } .no-touch .form-settings .form-label { display: inline-block; width: 185px; padding-top: 7px; margin-bottom: 0; } .no-touch .form-settings .form-label-alt { width: 207px; margin-top: 0;} .no-touch .form-settings .form-hint { font-size: 18px; margin-left: 10px; } .no-touch .form-settings .form-row + .form-row { margin-top: 19px; } .no-touch .form-settings .form-group { display: inline-block; vertical-align: bottom; } .no-touch .form-settings .form-group .btn { margin-left: 11px; font-size: 14px; padding: 6px 13px 4px;} .no-touch .form-settings .form-control { font-size: 14px; padding: 5px 7px 4px; max-width: 156px;} .no-touch .form-settings .form-control_min { max-width: 46px; } /*francis 20181031 add*/ .no-touch .form-settings .form-section { padding: 24px 72px 23px; } .no-touch .form-settings .form-title { font-size: 14px; } .no-touch .form-settings .form-title i { position: relative; top: -1px; margin-right: 43px; } .no-touch .form-settings .form-title .form-hint { margin-left: 8px; } .no-touch .form-settings .form-title .form-hint i { font-size: 18px; line-height: 0.8; top: 0; } .no-touch .form-settings .form-header { padding: 11px 16px 10px; } .no-touch .form-settings .form-group-inner { margin-bottom: 19px; } .no-touch .form-settings .form-group-inner-alt { margin-bottom: 0; } .no-touch .form-settings .form-section-group .form-section { padding: 19px 72px 23px; } .no-touch .form-settings .form-section-group .form-section-alt { padding: 23px 72px 23px; } .no-touch .form-settings .form-section-group .form-section-tertiary { padding: 0; } .no-touch .form-settings .checkbox-large + .form-hint { margin-top: 10px; } .no-touch .form-settings .checkbox-large .form-label { width: auto; } .no-touch .form-settings .table-details p { padding-top: 5px; margin-bottom: 5px; } .no-touch .form-settings .form-section-secondary .form-row:last-child { margin-top: 14px; } .no-touch .form-settings .form-row-secondary .select { margin: 8px 0 0 11px; } .no-touch .form-settings .divider { margin: 0 1px; width: 7px; } .no-touch .form-settings .divider + .form-control { margin-top: 0; } .no-touch .form-settings .select .form-control { padding: 6px 20px/*francis 20180907 add 20px*/ 7px 5px; max-width: 100%;} .no-touch .form-settings .select-alt { max-width: 156px; } .no-touch .form-settings .select-size-1 { max-width: 207px; width: 207px; } /* francis 20181031 add */ .no-touch .form-settings .select-size-2 { max-width: 255px; } .no-touch .form-settings .select-size-2 .form-control { max-width: 255px; } /* end */ .no-touch .form-settings .checkbox-password { display: inline-block; margin-left: 6px; margin-top: -1px; } .no-touch .form-settings .desktop-visible { display: inline-block; } .no-touch .form-settings .form-inner { margin-top: 35px; } .no-touch .form-settings .form-btn-holder { margin-top: 0px; } .no-touch .form-settings .form-btn-holder .form-hint { margin: 3px 0 0 10px; } .no-touch .form-settings .form-btn-holder .btn { margin-left: 0; } .no-touch .form-settings .form-group-inner .form-label { padding: 8px 0 0 8px; margin-bottom: 7px; display: block; } .no-touch .form-settings .form-group > span { padding: 6px 0 0 8px; margin-bottom: 4px; } .no-touch .form-settings .form-group > .divider { padding: 0; margin-bottom: 0; } .no-touch .form-settings .network-items { max-width: 100%; } .no-touch .form-settings .network-items:after { } .no-touch .form-settings .network-items .network-item { width: calc(50% - 2px); float: left; margin-right: 4px; border-radius: 4px; } .no-touch .form-settings .network-items .network-item:nth-child(2n) { margin-right: 0; } .no-touch .form-settings .network-item > a { padding: 9px 17px 4px; } .no-touch .form-settings .network-item h6 { font-size: 14px; } .no-touch .form-settings .network-item p { margin-bottom: 0; } .no-touch .form-settings .form-text { padding-top: 7px; margin-bottom: 0; } .no-touch .form-settings .form-text span { margin-left: 19px; } .no-touch .form-settings .form-row + .form-row-text { margin-top: 4px; } .no-touch .form-settings .form-row-text:last-child { margin-bottom: 0; } .no-touch .form-settings .form-progressbar { max-width: 156px;} .no-touch .form-settings .form-progressbar p { margin-bottom: 2px; font-size: 12px; } .no-touch .form-settings .form-row + .form-row-text-alt { margin-top: 18px; } /* Form-entry */ /* .no-touch .form-settings .form-entry { padding: 14px 72px 10px; } */ .no-touch .form-settings .form-entry .form-label { padding-top: 0; } .no-touch .form-settings .form-entry .switch { float: none; } .no-touch .form-settings .form-entry .form-hint { margin: -2px 24px 0 5px; font-size: 24px; } .no-touch .form-settings .form-entry-secondary { padding: 11px 20px 8px; } .no-touch .form-settings .form-entry-secondary .form-label { vertical-align: middle; } .no-touch .form-settings .form-entry-secondary .tablet-visible { display: inline; } .no-touch .form-settings .form-entry-secondary .switch { position: relative; top: 4px; } .no-touch .form-settings .form-group .btn-primary { border-radius: 4px; padding: 4px 31px; margin-left: 0; position: relative; right: -8px; } .no-touch .form-settings .form-group .btn-primary.btn-content { border-radius: 4px; padding: 4px 31px; margin-left: 0; position: relative; right: 0px; } .no-touch .form-settings .btn-upload { margin-right: 6px; } .no-touch .form-settings .form-row-alt .form-label-file { width: 385px; padding-top: 0; } /* Checkboxes */ .no-touch .checkbox label { padding-left: 41px; font-size: 14px; } .no-touch .checkbox label:before { width: 28px; height: 28px; font-size: 22px; line-height: 26px; } .no-touch .checkbox label small { font-size: 10px; margin-top: 6px; } .no-touch .checkbox-large label { padding: 8px 0 0 39px; color: #291782; } .no-touch .checkbox-large label br { display: none; } .no-touch .checkbox-large label:before { width: 28px; height: 28px; font-size: 22px; line-height: 26px; } .no-touch .checkbox-small label { padding-left: 34px; line-height: 23px; } .no-touch .checkbox-small label:before { width: 22px; height: 22px; border-radius: 4px; font-size: 20px; border-width: 2px; line-height: 20px; top: 0; } /*Radios */ .no-touch .radio { margin: 8px 0 3px; } .no-touch .list-radios li + li { margin-left: 20px; } .no-touch .radio label { padding:0 0 0 35px;} .no-touch .radio label:before { width: 22px; height: 22px; top: -3px;} .no-touch .radio label:after { width: 12px; height: 12px; left: 7px; top: 2px; } /* Switch */ .no-touch .switch { width: 50px; height: 18px; } .no-touch .switch .switch-slider:before { width: 28px; height: 28px; top: -6px; } .no-touch .switch input:checked + .switch-slider:before {-webkit-transform: translateX(23px);-ms-transform: translateX(23px);transform: translateX(23px); } /* Schedule */ .no-touch .schedule-secondary .schedule-inner { padding: 23px 151px 16px 176px; } .no-touch .schedule-secondary .schedule-aside { padding-left: 0; margin-top: 65px;/*francis 20181031 modify, 55px;*/ } .no-touch .schedule-secondary .schedule-aside-right { font-size: 18px; margin-right: 14px; width: 25px; margin-top: 55px; } /*sarah add margin-top */ .no-touch .schedule-secondary .schedule-content { width: calc( 100% - 89px) } .no-touch .schedule-secondary .table-schedule { margin-bottom: 17px; } .no-touch .schedule-secondary .table-schedule th { font-size: 14px; padding-bottom: 7px; } .no-touch .schedule-secondary .table-schedule-time { position: relative; } .no-touch .schedule-secondary .table-schedule-time table { font-size: 14px; } .no-touch .schedule-secondary .table-schedule-time p { font-size: 14px; padding-top: 0; position: absolute; bottom: 3px; right: 100%; width: 83px; margin-bottom: 0; } .no-touch .schedule-secondary .list-schedule-dates { font-size: 20px; } .no-touch .schedule-secondary .list-schedule-dates li { margin-bottom: 5px; } .no-touch .schedule-secondary .list-weather-states li + li { margin-top: 45px; } .no-touch .schedule-secondary .schedule-date { height: 15px; } .no-touch .schedule-secondary .list-modal-actions li { width: auto; margin: 0 12px; font-size: 10px; } .no-touch .schedule-secondary .list-modal-actions li i { font-size: 22px; } .no-touch .schedule-date-TimeString label { top: 5px; } } @media (min-width: 1200px) { .no-touch .cards-holder { max-width: 1200px; margin: 0; } .no-touch .cards { margin: 20px auto 0 0; } .no-touch .network-schedule .schedule-secondary .schedule-inner { padding: 6px 76px 0 105px; } } /*tooltip style*/ .tooltip { overflow:visible; position: absolute; display: none; z-index: 12; outline: none; opacity: 1; padding: 5px; border-width: 1px; border-style: solid; border-radius: 5px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } .tooltip-content { font-size: 12px; } .tooltip-arrow-outer, .tooltip-arrow { display:inline-block;position: absolute; width: 0; height: 0; line-height: 0; font-size: 0; border-style: solid; border-width: 6px; border-color: transparent; _border-color: tomato; _filter: chroma(color=tomato); } .tooltip-right .tooltip-arrow-outer { left: 0; top: 50%; margin: -6px 0 0 -13px; } .tooltip-right .tooltip-arrow { left: 0; top: 50%; margin: -6px 0 0 -12px; } .tooltip-left .tooltip-arrow-outer { right: 0; top: 50%; margin: -6px -13px 0 0; } .tooltip-left .tooltip-arrow { right: 0; top: 50%; margin: -6px -12px 0 0; } .tooltip-top .tooltip-arrow-outer { bottom: 0; left: 50%; margin: 0 0 -13px -6px; } .tooltip-top .tooltip-arrow { bottom: 0; left: 50%; margin: 0 0 -12px -6px; } .tooltip-bottom .tooltip-arrow-outer { top: 0; left: 50%; margin: -13px 0 0 -6px; } .tooltip-bottom .tooltip-arrow { top: 0; left: 50%; margin: -12px 0 0 -6px; } .tooltip { background-color: #fff; border-color: #ddd; color: #444; } .tooltip-right .tooltip-arrow-outer { border-right-color: #ddd; } .tooltip-right .tooltip-arrow { border-right-color: #fff; } .tooltip-left .tooltip-arrow-outer { border-left-color: #ddd; } .tooltip-left .tooltip-arrow { border-left-color: #fff; } .tooltip-top .tooltip-arrow-outer { border-top-color: #ddd; } .tooltip-top .tooltip-arrow { border-top-color: #fff; } .tooltip-bottom .tooltip-arrow-outer { border-bottom-color: #ddd; } .tooltip-bottom .tooltip-arrow { border-bottom-color: #fff; } /*loading style start*/ #customBarWrapper { display: none; /* ajaxModal z-index is 1050 */ z-index: 1051; height: 100vh; position: fixed; top: 0; width: 100%; padding-top: 10%; background:rgba(101,101,101,0.5);/*francis 20181031 add*/ /* background: #656565; */ /* opacity: 0.5; */ } #customBar { z-index: 10; width: 60%; /* background-color: #333333; */ background-color:rgba(51,51,51,0.5);/*francis 20181031 add*/ height: 30px; position: absolute; bottom: 15%; left: 20%; border-radius:30px; } #customBar-value { position: relative; top: 10px; width: 0%; height: 10px; background-color: #9C80FF; text-align: right; line-height: 10px; color: white; } .sk-fading-circle { margin: 100px auto; width: 100px; height: 100px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } /*loading style end*/ /* Add by jackie : for parental control schedule times string */ .time-string label { font-size: 16px; font-weight: 400; } .schedule-date-TimeString label { top: 5px; } /* for table pc layout */ @media only screen and (min-width: 768px) { /* for parental-control */ .schedule-secondary-table_PC .schedule-aside-table_PC { padding-left: 0; margin-top: 70px; } .schedule-secondary-table_PC .schedule-aside-right-table_PC { margin-top: 73px; } .schedule-secondary-table_PC .list-schedule-dates-table_PC li { margin-bottom: 45px; } .schedule-secondary-table_PC .list-weather-states-table_PC li + li { margin-top: 123px; } .schedule-date-TimeString-table_PC label { top: 22px; } } /*end for table pc layout */ .bgcolorgray{ color:#291782; } .edit_bg{ background-color: #e6e6e6; } /* 清除IE10下input的叉叉（X）和密码输入框的眼睛图标*/ input::-ms-clear{display: none;} input::-ms-reveal{display: none;} /* Remove Select arrow on IE*/ select::-ms-expand {display: none;} /* For 顯示多個空白 style */ .space-pre-style { white-space: pre-wrap; }