@import url('https://fonts.googleapis.com/css?family=Fjalla+One'); /* myINTEGER */ /* R E S E T ------------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; text-align: left; vertical-align: baseline; text-decoration: none; } html, body { height: 100%; } body { font-size: 20px; line-height: 20px; } img { margin: 0px; padding: 0px; border: none; } a img, :link img, :visited img { border: none; } p { margin: 0 0 20px 0; } ol, ul { list-style: none; } ul, ol { margin: 0; } ul { list-style: disc; } ol { list-style: decimal; } dl, dt { margin: 0 0 1.5em 0; font-size: 1.5em; font-weight: bold; } dd { margin: 0 0 0 2em;} table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; } /* I E F I X E S ------------------------------------------------------------------------------------------- */ body { text-align: center; } .container { text-align: left; } * html textarea { overflow: scroll; display: inline; } * html input { overflow: hidden; display: inline; } ol { margin-left: 2em; } legend { margin-bottom: 1.4em; } /* G L O B A L T Y P O G R A P H Y ------------------------------------------------------------------------------------------- */ body { font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #e4e5e6; } h1, h2, h3, h4 { font-family: 'Fjalla One', Myriad Pro, Helvetica, Arial, sans-serif; text-transform: uppercase!important; letter-spacing: -1px; } h1 { font-size: 60px; line-height: 60px; } h2 { font-size: 60px; line-height: 60px; } h3 { font-size: 40px; line-height: 40px; } h4 { font-size: 26px; line-height: 40px; } p { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul { float: left; width: 100%; margin: 0 0 20px 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li { float: left; width: 100%; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { color: #e4e5e6; } a:hover {} /* G L O B A L E L E M E N T S ------------------------------------------------------------------------------------------- */ body { background-color: #121315; background-image: url(images/background/bg.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; } .container-wrapper { width: 100%; height: 100%; min-height: 100%!important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { width: 100%; height: 100%; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-wrapper { float: left; width: 100%; height: auto; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-header-wrapper { float: left; width: 100%; padding: 50px 0 50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-header { width: 100%; max-width: 1000px; height: auto; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content { float: left; width: 100%; height: auto; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-wrapper { position: relative; float: left; width: 100%; height: auto; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-header, .item { width: 100%; max-width: 100%; height: auto; margin: 0 auto; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-inner { float: left; width: 100%; margin: 0; padding: 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-header-inner { float: left; width: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .text-box { float: left; width: 50%; height: auto; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .title { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .text { float: left; width: 100%; text-align: center; } .sub-text { float: left; width: 100%; text-align: center; } .button-group, .select-group, .form { float: left; width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .button-group { margin: 0 0 20px 0; border: 1px solid rgba(228,229,230,0.1); } .select-group { margin: 0; } .form {} .button { position: relative; float: left; width: 50%; margin: 0; padding: 10px 0 10px 0; color: #e4e5e6; text-align: center; text-transform: lowercase; background: rgba(18,19,21,0); transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .button span { float: left; width: 100%; min-height: 40px; padding: 10px 0 10px 0; text-align: center; text-transform: lowercase; border-right: 1px solid rgba(228,229,230,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .button:hover, .button.active { cursor: pointer; } .button.active { background: #e4e5e6; color: #1a1b1d!important; } .button:last-child span { border: none; } .one-button { width: 50%; margin-left: 25%; margin-right: 25%; } .one-button .button { width: 100%; } .three-buttons .button { width: 33.333333%; } .seven-buttons .button { width: 14.285714%; } .expand, .minus, .delete, .arrow, .tick, close { height: 40px; min-width: 40px; background-repeat: no-repeat; background-position: center; } .expand { background-image: url(images/plus-icon.png)!important; } .minus { background-image: url(images/minus-icon.png); } .delete { background-image: url(images/icons/delete-icon.png)!important; } .arrow { background-image: url(images/arrow-icon-dark.png); } .tick { background-image: url(images/arrow-icon.png); } .close { background-image: url(images/delete-bg.png); } .expand span, .minus span, .delete span, .arrow span, .tick span, .close span { display: none; } .save-cancel-wrapper { position: fixed; bottom: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .save-cancel-wrapper .button-group { float: none; max-width: 500px; height: auto; margin: 0 auto; } .save { background: #a2ca68!important; color: #fff!important; } .cancel { background: #ff685f!important; color: #fff!important; } input, textarea { float: left; width: 100%; height: 60px; margin: 0 0 20px 0; padding: 10px; font-size: 16px; line-height: 20px; font-family: Myriad Pro, Helvetica, Arial, sans-serif; text-align: center; color: #505456; background: rgba(18,19,21,0); border: 1px solid rgba(228,229,230,0.1); outline: none; -webkit-appearance: none; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } textarea { height: 180px; } input:hover, textarea:hover, input:focus, textarea:focus {} input:focus {} select { float: left; width: 100%; height: 60px; margin: 0 0 20px 0; padding: 9px; font-size: 16px; line-height: 20px; font-family: Myriad Pro, Helvetica, Arial, sans-serif; text-align: center; color: #505456; border: 0; border-radius: 0; border: 1px solid rgba(228,229,230,0.1); background: transparent url(images/arrow-icon-down.png) right 20px center no-repeat!important; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; -webkit-appearance: none; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .two-forms input { width: 50%; } .three-forms input { width: 33.333333%; } .four-forms { width: 50%; margin-left: 25%; } .four-forms input { width: 23%; margin-right: 2%!important; } .two-forms input:last-child { border-left: none; } .select { float: left; width: 100%; margin: 0 0 10px 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .select label, .select .text { float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .select .text span {} .select .select-group { width: 100%; background: url(images/drop-down-arrow.png) right no-repeat; overflow: hidden; } .select .select-group select {} select input { float: left; width: 100%!important; } .date-picker { position: relative; padding: 0 60px 0 60px; } .date-picker .button { width: 60px; height: 60px; border: 1px solid rgba(228,229,230,0.1); } .date-picker .button span { display: none; } .date-picker .button.last { position: absolute; left: 0; background-image: url(images/last.png); background-position: center; background-repeat: no-repeat; } .date-picker .button.next { position: absolute; right: 0; background-image: url(images/next.png); background-position: center; background-repeat: no-repeat; } .two-selects select { width: 50%; } .two-selects select:last-child { border-left: none; } .three-selects select { width: 33.333333%; } .three-selects select:nth-child(2) { border-left: none; } .three-selects select:last-child { border-left: none; } .switch-group { position: relative; float: left; width: 25%; margin: 40px 0 0 0; padding: 0; text-align: left; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .switch { position: relative; float: right; width: 80px; min-height: 40px; margin: 0; padding: 0; background: #393c3e; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .slider { position: absolute; top: 2px; left: 2px; width: 36px; height: 36px; background: #121315; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .switch-group .sub-text { display: inherit; width: auto; float: right; margin: 10px 20px 0 0; } .switch.active { background: #a2ca68!important; } .switch.deactive { background: #ff685f!important; } .switch.active .slider, .switch.deactive .slider { left: inherit; right: 2px; } .content-header .switch-group { margin: 20px 0 0 0; } .search-highlight { background: rgba(162,202,104,0.2); } .item-wrapper.force-close .switch-force .switch { background: #ff685f!important; } .suspended .switch-mobile .switch { background: #ff685f!important; } .item-wrapper.ofl .switch-ofl .switch { background: #ff685f!important; } .item-wrapper.ofl .switch-ofl .switch .slider { left: inherit; right: 2px; } .item-wrapper.temporary-change .switch-force .switch { background: #a2ca68!important; } .item-wrapper.temporary-change .switch-force .switch .slider { left: inherit; right: 2px; } @media only screen and (max-width: 600px) { .content-header { padding: 0 50px 0 50px; } .seven-buttons .button:nth-child(1), .seven-buttons .button:nth-child(2), .seven-buttons .button:nth-child(3) { width: 33.333333%; } .seven-buttons .button:nth-child(4), .seven-buttons .button:nth-child(5), .seven-buttons .button:nth-child(6), .seven-buttons .button:nth-child(7) { width: 25%; } } /* L I S T ------------------------------------------------------------------------------------------- */ .list { padding: 0 60px 0 60px; } .lisst:nth-of-type(even) { background-color: #1a1b1d; } .list.online { background-image: url(images/online-bg.png); background-position: 30px center; background-repeat: no-repeat; } .list.offline { background-image: url(images/offline-bg.png); background-position: 30px center; background-repeat: no-repeat; } .list .item-inner { min-height: 40px; margin: 10px 0 10px 0; padding: 10px; border-right: 1px solid rgba(228,229,230,0.1); } .list .item-inner:nth-of-type(1) { border-left: 1px solid rgba(228,229,230,0.1); } .list .item-inner .sub-text { display: none; } .list .item-header .item-inner:first-child { border-left: none; } .list .item-header .item-inner:last-child { border-right: none; } .list .item-header .sub-text { display: inherit; text-align: center; } .list .switch-group { float: none; width: 40px; margin: 0 auto; } .list .switch { width: 40px; min-height: 20px; } .list .slider { width: 16px; height: 16px; } .list .switch-group .sub-text { display: none; } .list .item .counter { float: none; position: absolute; top: 10px; left: 60px; width: auto; height: 100%; margin: 0; } .list .item .button { position: absolute; top: 0; right: 0; width: 60px; height: 100%; } .list .item .button:hover { background-color: rgba(18,19,21,5); background-repeat: no-repeat; background-position: center; } .list.active .item .button { background-color: #e4e5e6; background-image: url(images/icons/minus-icon-light.png)!important; background-repeat: no-repeat; background-position: center; } .payment-paypal .payment .sub-text, .payment-securetrading .payment .sub-text, .payment-sagepay .payment .sub-text, .payment-paypal .payment .text, .payment-securetrading .payment .text, .payment-sagepay .payment .text, .payment .text { display: none; } .payment { background: url(images/icons/no-payment.png) center no-repeat; } .payment-cash .payment { background: url(images/icons/cash.png) center no-repeat; } .payment-paypal .payment { background: url(images/icons/paypal.png) center no-repeat; } .payment-sagepay .payment { background: url(images/icons/sagepay.png) center no-repeat; } .payment-securetrading .payment { background: url(images/icons/securetrading.png) center no-repeat; } .payment-paypal-securetrading .payment { background: url(images/icons/paypalsecuretrading.png) center no-repeat; } .payment-paypal-sagepay .payment { background: url(images/icons/paypalsagepay.png) center no-repeat; } .device-tablet .device .sub-text, .device-desktop .device .sub-text, .device-mobile .device .sub-text, .device-app .device .sub-text, .device-tablet .device .text, .device-desktop .device .text, .device-mobile .device .text, .device-app .device .text { display: none; } .device-tablet .device { background: url(images/icons/tablet.png) center no-repeat; } .device-desktop .device { background: url(images/icons/desktop.png) center no-repeat; } .device-mobile .device { background: url(images/icons/mobile.png) center no-repeat; } .device-app .device { background: url(images/icons/app.png) center no-repeat; } .user-logged-in .user-login .sub-text, .user-google-logged-in .user-login .sub-text, .user-facebook-logged-in .user-login .sub-text, .user-not-logged-in .user-login .sub-text, .user-logged-in .user-login .text, .user-google-logged-in .user-login .text, .user-facebook-logged-in .user-login .text, .user-not-logged-in .user-login .text { display: none; } .user-logged-in .user-login { background: url(images/icons/user-logged-in-light.png) center no-repeat; } .user-not-logged-in .user-login { background: url(images/icons/user-not-logged-in-light.png) center no-repeat; } .user-google-logged-in .user-login { background: url(images/icons/user-google-logged-in-light.png) center no-repeat; } .user-facebook-logged-in .user-login { background: url(images/icons/user-facebook-logged-in-light.png) center no-repeat; } @media only screen and (max-width: 600px) { .list .itemunused { width: 100%; max-width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; -webkit-overflow-scrolling: touch; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; } .list .item { width: 100%; max-width: 100%; overflow-x: scroll; overflow-y: hidden; } .list .item-again { } .list .item-header { display: none; } .list .item-inner { min-height: 70px; } .list .switch-group { float: left!important; width: 100%!important; } .list .switch { position: inherit!important; float: none!important; display: block!important; width: 40px; min-height: 20px; margin: 0 auto!important; } .list .slider { width: 16px; height: 16px; } .list .switch-group .sub-text { float: left; width: 100%; display: none; } .list .item .counter { float: left!important; position:inherit !important; width: 100%; top: inherit!important; margin: 0; padding: 25px 0 25px 0; height: auto!important; text-align: center; } .list .item .sub-text { display: inherit!important; margin: 10px 0 0 0!important; } } /* C O L U M N ------------------------------------------------------------------------------------------- */ .column { float: none; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; } .column .item { float: left; width: 50%; margin: 0; padding: 50px; } .column .text { margin: 0 0 20px 0; } .column .title { margin: 0 0 30px 0; text-align: center; } .column p { text-align: center; } .column .total { padding: 20px 0 20px 0; border-top: 1px solid rgba(228,229,230,0.1); border-bottom: 1px solid rgba(228,229,230,0.1); } .column .total .sub-text { display: none; } .column .total .text { font-size: 30px; line-height: 30px; margin: 0; font-family: 'Fjalla One', Myriad Pro, Helvetica, Arial, sans-serif; text-transform: uppercase!important; letter-spacing: -1px; } .column .info { background: none!important; } .column .info p { text-align: center; } .column .info ul { margin: 0 0 30px 0; } .column .info li { padding: 60px 0 20px 0; color: #7b8082!important; text-align: center; border-bottom: 1px solid rgba(228,229,230,0.1); } .column .info li:last-child { border: none!important; } .column .info ul.regular-opening-times li { padding: 20px 0 20px 0; background: none!important; } .column .info ul.regular-opening-times li.active { font-weight: bold; } .left { width: 50%; float: left; } .left .title, .left p { text-align: left; } .center { width: 50%; clear: both; float: left; margin: 0 0 0 25%!important; background: inherit!important; border: none; } .center .title, .center p { text-align: center; } .right { width: 50%; float: right; } .right .title, .right p { text-align: right; } .save-cancel { clear: both; float: left; margin: 0 0 0 25%!important; padding: 0!important; background: inherit!important; border: none; } @media only screen and (max-width: 600px) { .column { padding: 0 25px 0 25px; } .column .item { width: 100%; padding: 25px; border: none; } .left { width: 100%; } .left .title, .left p { text-align: center; } .center { width: 100%; margin: 0!important; } .center .title, .center p { text-align: center; } .right { width: 100%; float: right; } .right .title, .right p { text-align: center; } .save-cancel { margin: 0!important; } .switch-group { width: 100%; margin: 40px 0 0 0; } .switch { position: inherit; display: block; float: none; width: 80px; min-height: 40px; margin: 0 auto; } .switch-group .sub-text { display: inherit; width: 100%; float: right; margin: 10px 0 0 0; } h1 { font-size: 40px; line-height: 40px; } } /* C O L O U R S ------------------------------------------------------------------------------------------- */ .content-wrapper:nth-of-type(2) { color: #e4e5e6; background-color: #121315; } .content-wrapper:nth-of-type(2) .column .item { background-color: #1a1b1d; } .content-wrapper:nth-of-type(2) .title { color: #e4e5e6; } .content-wrapper:nth-of-type(2) p, .content-wrapper:nth-of-type(2) .sub-text { color: #7b8082; } .content-wrapper:nth-of-type(2) .button.active { color: #e4e5e6; } .content-wrapper:nth-of-type(2) input, .content-wrapper:nth-of-type(2) textarea { color: #505456; background: rgba(18,19,21,0); border: 1px solid rgba(228,229,230,0.1); } .content-wrapper:nth-of-type(2) input:hover, .content-wrapper:nth-of-type(2) textarea:hover { background: #121315; } .content-wrapper:nth-of-type(2) input:focus, .content-wrapper:nth-of-type(2) textarea:focus { color: #e4e5e6; } .content-wrapper:nth-of-type(2) select { color: #505456; border: 1px solid rgba(228,229,230,0.1); background: transparent url(images/arrow-icon-down.png) right 20px center no-repeat!important; } .content-wrapper:nth-of-type(2) select:hover { background: #121315 right 20px center no-repeat!important; } .content-wrapper:nth-of-type(2) .column li { color: #505456; } .content-wrapper:nth-of-type(2) .item-wrapper:nth-of-type(4n+2) { background-color: #1a1b1d!important; } .content-wrapper:nth-of-type(2) .content-wrapper { background-color: #e4e5e6; color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper .list { background-color: #e4e5e6; } .content-wrapper:nth-of-type(2) .content-wrapper .item-wrapper:nth-of-type(4n+2) { background-color: #dadbdc!important; } .content-wrapper:nth-of-type(2) .content-wrapper .list .item-inner { border-right: 1px solid rgba(18,19,21,0.1); } .content-wrapper:nth-of-type(2) .content-wrapper .list .item-inner:nth-of-type(1) { border-left: 1px solid rgba(18,19,21,0.1); } .content-wrapper:nth-of-type(2) .content-wrapper .list .item-header .item-inner:first-child { border-left: none; } .content-wrapper:nth-of-type(2) .content-wrapper .list .item-header .item-inner:last-child { border-right: none; } .content-wrapper:nth-of-type(2) .content-wrapper .list .item .button { background-image: url(images/icons/plus-icon-light.png)!important; background-repeat: no-repeat; background-position: center; } .content-wrapper:nth-of-type(2) .content-wrapper .list .item .button:hover { background-colour: rgba(18,19,21,0.1)!important; background-image: url(images/icons/plus-icon-light.png)!important; background-repeat: no-repeat; background-position: center; } .content-wrapper:nth-of-type(2) .content-wrapper .list.active .item .button { background: #fff url(images/icons/minus-icon-light.png) no-repeat center; background-image: url(images/icons/minus-icon-light.png)!important; } .content-wrapper:nth-of-type(2) .content-wrapper .column .item { background-color: #dadbdc; } .content-wrapper:nth-of-type(2) .content-wrapper .column .item.one { border-right: 1px solid #e4e5e6!important; } .content-wrapper:nth-of-type(2) .content-wrapper .column .item.two { border-left: 1px solid #e4e5e6!important; } .content-wrapper:nth-of-type(2) .content-wrapper .title { color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper p, .light .sub-text { color: #7e8183; } .content-wrapper:nth-of-type(2) .content-wrapper .button-group { border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper .button { color: #7e8183; background-color: rgba(18,19,21,0); } .content-wrapper:nth-of-type(2) .content-wrapper .button span { border-right: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper .button:last-child span { border: none; } .content-wrapper:nth-of-type(2) .content-wrapper .button:hover, .light .button.active { background: #e4e5e6; } .content-wrapper:nth-of-type(2) .content-wrapper .button.active { color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper input, .light textarea { color: #7e8183; background: rgba(18,19,21,0); border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper input:hover, .light textarea:hover, .content-wrapper:nth-of-type(2) .content-wrapper input.active, light textarea.active { background: #e4e5e6; } .content-wrapper:nth-of-type(2) .content-wrapper input:focus, .light textarea:focus { color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper select { color: #7e8183; border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper select:hover { background: #e4e5e6 right 20px center no-repeat!important; } .content-wrapper:nth-of-type(2) .content-wrapper .switch { background: #b1b2b3; } .content-wrapper:nth-of-type(2) .content-wrapper .slider { background: #e4e5e6; } .content-wrapper:nth-of-type(2) .content-wrapper .column .total { border-top: 1px solid rgba(18,19,21,0.1); border-bottom: 1px solid rgba(18,19,21,0.1); } .content-wrapper:nth-of-type(2) .content-wrapper .column li { border-bottom: 1px solid rgba(18,19,21,0.2); color: #7e8183; background: url(images/icons/order-statistics.png) no-repeat center 20px; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-cash .payment { background: url(images/icons/cash-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-justeat-cash .payment { background: url(images/icons/justeat-payments-CASH.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-justeat-paid .payment { background: url(images/icons/justeat-payments-PAID.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-ubereats-cash .payment { background: url(images/icons/ubereats-payments-CASH.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-ubereats-paid .payment { background: url(images/icons/ubereats-payments-PAID.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-deliveroo-paid .payment { background: url(images/icons/deliveroo-payments-PAID.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-paypal .payment { background: url(images/icons/paypal-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-sagepay .payment { background: url(images/icons/sagepay-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .payment-securetrading .payment { background: url(images/icons/securetrading-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .device-tablet .device { background: url(images/icons/tablet-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .device-desktop .device { background: url(images/icons/desktop-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .device-mobile .device { background: url(images/icons/mobile-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .device-app .device { background: url(images/icons/app-light.png) center no-repeat; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper { background-color: #fff; color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper .column .item { background-color: #f1f2f2; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper .column .item.one { border-right: 1px solid #fff!important; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper .column .item.two { border-left: 1px solid #fff!important; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper input, .lightest textarea { color: #7e8183; background: rgba(18,19,21,0); border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper input:hover, .lightest textarea:hover, .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper input.active, lightest textarea.active { background: #fff; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper input:focus, .lightest textarea:focus { color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper select { color: #7e8183; border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper .content-wrapper select:hover { background: #fff right 20px center no-repeat!important; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) { background-color: #fff; color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) .column .item { background-color: #f1f2f2; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) input, .lightest textarea { color: #7e8183; background: rgba(18,19,21,0); border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) input:hover, .lightest textarea:hover, .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) input.active, lightest textarea.active { background: #fff; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) input:focus, .lightest textarea:focus { color: #212325; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) select { color: #7e8183; border: 1px solid rgba(18,19,21,0.2); } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) select:hover { background: #fff right 20px center no-repeat!important; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) .column .item.one { border-right: 1px solid #fff!important; } .content-wrapper:nth-of-type(2) .content-wrapper:nth-child(odd) .column .item.two { border-left: 1px solid #fff!important; } /* C O L O U R S ------------------------------------------------------------------------------------------- */ .dark2 { color: #e4e5e6; background-color: #121315; } .dark2 .column .item { background-color: #1a1b1d; } .dark2 .title { color: #e4e5e6; } .dark2 p, .dark .sub-text { color: #7b8082; } .dark2 .button { color: #505456; } .dark2 .button:hover, .dark .button.active { background: #121315; } .dark2 .button.active { color: #e4e5e6; } .dark2 input, .dark textarea { color: #505456; background: rgba(18,19,21,0); border: 1px solid rgba(228,229,230,0.1); } .dark2 input:hover, .dark textarea:hover { background: #121315; } .dark2 input:focus, .dark textarea:focus { color: #e4e5e6; } .dark2 select { color: #505456; border: 1px solid rgba(228,229,230,0.1); background: transparent url(images/arrow-icon-down.png) right 20px center no-repeat!important; } .dark2 select:hover { background: #121315 right 20px center no-repeat!important; } .dark2 .column li { color: #505456; } .light2 { background-color: #e4e5e6; color: #212325; } .light2 .list { background-color: #e4e5e6; } .light2 .list .item-inner { border-right: 1px solid rgba(18,19,21,0.1); } .light2 .list .item-inner:nth-of-type(1) { border-left: 1px solid rgba(18,19,21,0.1); } .light2 .list .item-header .item-inner:first-child { border-left: none; } .light2 .list .item-header .item-inner:last-child { border-right: none; } .light2 .list .item .button { background-image: url(images/icons/plus-icon-light.png)!important; background-repeat: no-repeat; background-position: center; } .light2 .list .item .button:hover { background-colour: rgba(18,19,21,0.1)!important; background-image: url(images/icons/plus-icon-light.png)!important; background-repeat: no-repeat; background-position: center; } .light2 .list.active .item .button { background: #fff url(images/icons/minus-icon-light.png) no-repeat center; background-image: url(images/icons/minus-icon-light.png)!important; } .light2 .list:nth-child(even) { background-color: #dadbdc; } .light2 .column .item { background-color: #dadbdc; } .light2 .title { color: #212325; } .light2 p, .light .sub-text { color: #7e8183; } .light2 .button-group { border: 1px solid rgba(18,19,21,0.2); } .light2 .button { color: #7e8183; background-color: rgba(18,19,21,0); } .light2 .button span { border-right: 1px solid rgba(18,19,21,0.2); } .light2 .button:last-child span { border: none; } .light2 .button:hover, .light .button.active { background: #e4e5e6; } .light2 .button.active { color: #212325; } .light2 input, .light textarea { color: #7e8183; background: rgba(18,19,21,0); border: 1px solid rgba(18,19,21,0.2); } .light2 input:hover, .light textarea:hover, .light2 input.active, light textarea.active { background: #e4e5e6; } .light2 input:focus, .light textarea:focus { color: #212325; } .light2 select { color: #7e8183; border: 1px solid rgba(18,19,21,0.2); } .light2 select:hover { background: #e4e5e6 right 20px center no-repeat!important; } .light2 .switch { background: #b1b2b3; } .light2 .slider { background: #e4e5e6; } .light2 .column .total { border-top: 1px solid rgba(18,19,21,0.1); border-bottom: 1px solid rgba(18,19,21,0.1); } .light2 .column li { border-bottom: 1px solid rgba(18,19,21,0.2); color: #7e8183; background: url(images/icons/order-statistics.png) no-repeat center 20px; } .light2 .payment-paypal .payment { background: url(images/icons/paypal-light.png) center no-repeat; } .light2 .payment-sagepay .payment { background: url(images/icons/sagepay-light.png) center no-repeat; } .light2 .payment-securetrading .payment { background: url(images/icons/securetrading-light.png) center no-repeat; } .light2 .device-tablet .device { background: url(images/icons/tablet-light.png) center no-repeat; } .light2 .device-desktop .device { background: url(images/icons/desktop-light.png) center no-repeat; } .light2 .device-mobile .device { background: url(images/icons/mobile-light.png) center no-repeat; } .light2 .device-app .device { background: url(images/icons/app-light.png) center no-repeat; } .light2 .user-logged-in .user-login { background: url(images/icons/user-light.png) center no-repeat; } .lightest3 { background-color: #fff; color: #212325; } .lightest3 .column .item { background-color: #f1f2f2; } .lightest3 input, .lightest textarea { color: #7e8183; background: rgba(18,19,21,0); border: 1px solid rgba(18,19,21,0.2); } .lightest3 input:hover, .lightest textarea:hover, .lightest3 input.active, lightest textarea.active { background: #fff; } .lightest3 input:focus, .lightest textarea:focus { color: #212325; } .lightest3 select { color: #7e8183; border: 1px solid rgba(18,19,21,0.2); } .lightest3 select:hover { background: #fff right 20px center no-repeat!important; } /* H E A D E R ------------------------------------------------------------------------------------------- */ header { z-index: 10; position: fixed; top: 0; width: 100%; height: auto; background: #e4e5e6; border-bottom: 1px solid rgba(18,19,21,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation { position: relative; float: none; width: 100%; max-width: 1500px; height: auto; margin: 0 auto; background: #e4e5e6; } header ul.navigation li { position: relative; float: left; width: 16.666665%; position: relative; } header ul.navigation li a { float: left; width: 100%; margin: 0; padding: 10px 0 10px 0; text-align: center; font-size: 16px; line-height: 20px; color: #393c3e; background: rgba(33,35,37,0); transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation li a span { float: left; width: 100%; min-height: 40px; padding: 10px 0 10px 0; text-align: center; text-transform: lowercase; border-right: 1px solid rgba(18,19,21,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation .page-navigation { display: none; } .page-navigation-fixed .page-navigation { display: block!important; position: absolute; width: 100%; margin: 0; } .page-navigation-fixed .page-navigation a { width: 50%; } .page-navigation-fixed li.logo ul.sub-navigation { display: none; } .page-navigation-fixed .page-navigation .button { color: #e4e5e6; background: none; } header ul.navigation li.close-shop { position: fixed!important; top: 0!important; float: none; right: 0; width: 60px; position: relative; } header ul.navigation li.close-shop a { background-color: #ff685f; color: #e4e5e6!important; padding: 0; } header ul.navigation li.close-shop a:hover { background-color: #ff685f; color: #e4e5e6!important; } header ul.navigation li.open-shop { position: fixed!important; top: 0!important; float: none; right: 0; width: 60px; position: relative; } header ul.navigation li.open-shop a { background-color: #a2ca68; color: #e4e5e6!important; padding: 0; } header ul.navigation li.open-shop a:hover { background-color: #a2ca68; color: #e4e5e6!important; } header ul.navigation li.logo { width: 33.33333%; } header ul.navigation li.logo a { height: 60px; background: url(images/logo.png) center no-repeat; } header ul.navigation li.mobile { display: none; } header ul.navigation li:hover > a { background: rgba(229,229,230,1); } header ul.navigation li.logo:hover > a { background: rgba(229,229,230,1) url(images/logo.png) center no-repeat; } header ul.navigation li:nth-last-child(-n+2) a span { border-right: none; } header ul.navigation ul.sub-navigation { position: absolute; top: 60px; width: 100%; background: #e4e5e6; overflow: hidden; opacity: 0; visibility: hidden; } header ul.navigation ul.sub-navigation li { width: 100%; } header ul.navigation ul.sub-navigation li a { float: left; width: 100%; margin: 0; padding: 0; text-align: center; font-size: 16px; line-height: 20px; color: #393c3e; background-color: rgba(18,19,21,0); background-repeat: no-repeat!important; background-position: center 20px!important; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation ul.sub-navigation li a span { float: left; width: 100%; min-height: 40px; padding: 60px 0 20px 0; text-align: center; border-bottom: 1px solid rgba(18,19,21,0.1); border-right: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation ul.sub-navigation li a.active span { background-image: url(images/integer-only.png)!important; background-position: 20px center; background-repeat: no-repeat; } header ul.navigation li.logo ul.sub-navigation li a { height: auto; } header ul.navigation ul.sub-navigation li:first-child a span { border-top: 1px solid rgba(18,19,21,0.1); } header ul.navigation ul.sub-navigation li:last-child a span { border-bottom: none; } header ul.navigation ul.sub-navigation li a:hover { background-color: rgba(229,229,230,1); } header ul.navigation li:hover ul.sub-navigation { overflow: visible; visibility: visible; opacity: 1; } header ul.navigation li:nth-child(1):hover > a { color: #6e1ab4; } header ul.navigation li:nth-child(1) ul.sub-navigation li a { background-color: rgba(110,26,180,0.2)!important; } header ul.navigation li:nth-child(2) a:hover { color: #ce4c24; } header ul.navigation li:nth-child(4) a:hover { color: #ce4c24; } header ul.navigation li:nth-child(5) a:hover { color: #ab3347; } .onlineorders a { background-image: url(images/nav/live-view.png)!important; } .liveshopstats a { background-image: url(images/nav/statistics.png)!important; } .uac a { background-image: url(images/nav/user.png)!important; } .uacdownload a { background-image: url(images/nav/download.png)!important; } .searchlogs a { background-image: url(images/nav/search.png)!important; } .registeredips a { background-image: url(images/nav/registered-ip.png)!important; } .drivertracking a { background-image: url(images/nav/driver-tracking.png)!important; } .newsite a { background-image: url(images/nav/hosted-site.png)!important; } .viewpromos a { background-image: url(images/nav/promo-codes.png)!important; } .addpromo a { background-image: url(images/nav/add-promo.png)!important; } .navshopsettings a { background-image: url(images/nav/shop-settings.png)!important; } .viewimages a { background-image: url(images/nav/images.png)!important; } .uploadimage a { background-image: url(images/nav/add-image.png)!important; } .navforceclose a { background-image: url(images/nav/force-close.png)!important; } .storelocator a { background-image: url(images/nav/store-locator.png)!important; } .logoff a { background-image: url(images/nav/download.png)!important; } .myintusers a { background-image: url(images/nav/myinteger-users.png)!important; } .addmyintusers a { background-image: url(images/nav/add-myinteger-users.png)!important; } .shopreport a { background-image: url(images/nav/shop-report.png)!important; } .mobile-navigation { display: none; } @media only screen and (max-width: 600px) { header ul.navigation li { display: none; } header ul.navigation li.logo { display: block; width: 80%; margin: 0; } header ul.navigation li.logo span { border-right: none; } header ul.navigation li.mobile { display: inherit!important; width: 20%; } header ul.navigation li.mobile a { float: left; width: 100%; margin: 0; padding: 10px 0 10px 0; text-align: center; font-size: 16px; line-height: 20px; color: #393c3e; background-image: url(images/mobile-bg.png); background-position: center; background-repeat: no-repeat; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header ul.navigation li.mobile a span { float: left; width: 100%; padding: 10px 0 10px 0; text-align: center; border-left: 1px solid rgba(228,229,230,0.2); } .mobile-navigation { position: fixed; top: 0; z-index: 100; width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 100px 20px 100px 20px; background: #e4e5e6; overflow-y: scroll; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: none; } .mobile-navigation ul { overflow-y: scroll; float: left; width: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile-navigation ul li { float: left; width: 100%; margin: 0; padding: 10px 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile-navigation ul li a { position: relative; float: left; width: 100%; text-align: center; margin: 0; padding: 0; color: #393c3e; border-bottom: 1px solid rgba(18,19,21,0.1); background-repeat: no-repeat!important; background-position: center 20px!important; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mobile-navigation ul li a span { float: left; width: 100%; min-height: 40px; padding: 60px 0 20px 0; text-align: center; border-right: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile-navigation ul li a:hover { color: #fff; } .mobile-navigation ul li:last-child a { border-bottom: none; } .mobile-navigation ul li.close a span { display: none; } .mobile-navigation ul li.close a { position: fixed; top: 20px; right: 20px; height: 60px; width: 60px; padding: 0; border: none; background: url(images/close-icon.png) center no-repeat #212325; } } .sub-header {z-index: 9; position: fixed; top: 60px; width: 100%; height: auto; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.header-page-navigation { position: relative; float: none; width: 100%; max-width: 500px; height: auto; margin: 0 auto; } ul.header-page-navigation li { float: left; width: 50%; position: relative; background: #000!important; } ul.header-page-navigation li a { float: left; width: 100%; margin: 0; padding: 10px 0 10px 0; text-align: center; font-size: 16px; line-height: 20px; color: #393c3e; background: ; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.header-page-navigation li a span { float: left; width: 100%; min-height: 40px; padding: 10px 0 10px 0; text-align: center; text-transform: lowercase; border-left: 1px solid rgba(18,19,21,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.header-page-navigation li input { margin: 0; border: none; } .header-page-navigation.four-buttons { max-width: 1000px; } .header-page-navigation.four-buttons li { width: 25%; } /* L O G I N ------------------------------------------------------------------------------------------- */ .page-login { } .content-wrapper.login { position: relative; min-height: 100%; height: 100%; background: url(images/background/bg-login.jpg) top no-repeat #cb5228; background-size: cover; } .content-login { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; min-height: 100%; height: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-login .text-box { width: 100%; max-width: 500px; height: auto; margin: 0!important; } .content-login .text-box h1 { height: 70px; margin: 0 0 50px 0; padding: 0; background: url(images/logo-intro.png) center no-repeat; text-align: center; color: #fff; } .content-login .text-box h1 span { display: none; } .content-login .button-group { border: none; } .content-login .button-group .button { background: rgba(228,229,230,0.1); } .content-login .button-group .button:hover { background: rgba(228,229,230,1); color: #212325; } .content-login .password .button { padding: 0; background: none; } .content-login .password .button:hover { background: none; color: #e4e5e6; } .content-login .password .button span { padding: 0; } .content-login input { margin: 0 0 50px 0; color: #e4e5e6; background: rgba(18,19,21,0); border: 1px solid rgba(228,229,230,0.5); } .content-login input:hover { background: rgba(228,229,230,0.1); } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @keyframes fadeOut { from { opacity:1; } to { opacity:0; } } .fade-in-slow { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; } .fade-in { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; } .fade-in.one { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } .fade-in.two { -webkit-animation-delay: 1.5s; -moz-animation-delay:1.5s; animation-delay: 1.5s; } .fade-in.three { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } .fade-in.four { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; animation-delay: 2.5s; } .fade-out { opacity:1; -webkit-animation:fadeOut ease-in 1; -moz-animation:fadeOut ease-in 1; animation:fadeOut ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; } .fade-out.five { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } .fade-out.six { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; } .fade-out.seven { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } .fade-out.eight { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; animation-delay: 2.5s; } /* P A G E H E A D E R ------------------------------------------------------------------------------------------- */ .content-wrapper.page-header { height: auto; padding: 160px 0 100px 0; } .content-page-header { float: none; max-width: 1000px; margin: 0 auto; } .content-page-header .item { width: 50%; margin: 0 25% 0 25%; } .content-page-header .title { margin: 0 0 50px 0; text-align: center; } .content-wrapper.page-header .text-box { position: relative; } .back-button { float: none; display: block; width: 60px; height: 60px; background-image: url(images/last.png); background-position: center; background-repeat: no-repeat; background-color: #121315; position: absolute; top: 20px; left: 0; } .back-button span { border: none; } .page-navigation { position: relative; z-index: 5; float: left; width: 50%; margin: 0 25% 0 25%; border: 1px solid rgba(228,229,230,0.2); background-color: #121315; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-navigation input { width: 50%!important; margin: 0; border: none; text-transform: lowercase; color: #e4e5e6; border-right: 1px solid rgba(228,229,230,0.2)!important; } .page-navigation .button { margin: 0; } .page-navigation .button:hover, .page-navigation input:hover { background: rgba(228,229,230,0.1); } .page.navigation .button:first-child span { border-left: 1px solid rgba(228,229,230,0.2)!important; } .page-navigation ::-webkit-input-placeholder { color:#e4e5e6; opacity: 1; } .page-navigation ::-moz-placeholder { color:#e4e5e6; opacity: 1; } .page-navigation :-ms-input-placeholder { color:#e4e5e6; opacity: 1; } .page-navigation input:-moz-placeholder { color:#e4e5e6; opacity: 1; } .page-navigation.one-button input { width: 100%!important; border-right: none!important; } .button span.delete { display: block; width: 40px; height: 40px; position: absolute!important; right: 0!important; top: 10px!important; } .header-summary { position: absolute; display: block; width: 100%; } .number-thing { width: 100%; text-align: center; color: red; font-family: 'Fjalla One', Myriad Pro, Helvetica, Arial, sans-serif; font-size: 400px; line-height: 400px; } .page-navigation-wrapper {} .page-navigation-inner {} .page-navigation {} .pag2e-navigation-fixed { z-index: 11!important; position: fixed; top: 0; left: 0; float: none; width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pag2e-navigation-fixed .page-navigation-inner { position: relative; float: none; width: 100%; max-width: 1500px; height: auto; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pag2e-navigation-fixed .page-navigation { width: 33.333333%; margin: 0 0 0 33.333333%; } .content-page-header ul.stats { float: none; width: 100%; max-width: 1040px; margin: 0 auto 0 auto; padding: 0 20px 0 20px; height: auto; } .content-page-header ul.stats li { position: relative; width: 25%; } .content-page-header ul.stats li .stats-item { float: left; width: 100%; padding: 10px 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-page-header ul.stats li span { font-size: 12px; float: left; width: 100%; text-transform: uppercase; text-align: center; color: #505456; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-page-header ul.stats li .figures { margin-bottom: 10px; font-family: 'Fjalla One', Myriad Pro, Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 32px; line-height: 40px; color: #fff; } .content-page-header ul.stats li:last-child .stats-item { border-right: none; } .stats-percentage { font-size: 14px!important; width: auto!important; position: absolute; top: 15px; right: 20px; text-align: right; } .up .stats-percentage { background: url(images/points-up.png) no-repeat center top; padding-top: 10px!important; color: #76ae24!important; } .down .stats-percentage { background: url(images/points-down.png) no-repeat center bottom; padding-bottom: 7px!important; color: #d96831!important; } @media only screen and (max-width: 600px) { .content-wrapper.page-header { height: auto; padding: 160px 50px 100px 50px; } .content-page-header .title { margin: 0 0 20px; } .page-navigation { width: 100%; margin: 0; } .content-page-header ul.stats li { width: 100%; } } /* S H O P S T A T S I S T I C S ------------------------------------------------------------------------------------------- */ .page-shop-stats {} .content-wrapper.shop-stats {} .content-shop-stats { max-width: 100%; } .item-shop-stats { padding-left: 160px; } .item-shop-stats .item {} .item-shop-stats .item-inner { width: 14.285714%; } .item-shop-stats .item-inner:nth-of-type(1) {} .item-shop-stats .red { background: #cdb230; } .item-shop-stats .yellow { background: #76ae24; } .item-shop-stats .green { background: #da324f; } .item-shop-stats .pink { background: #d96831; } .item-shop-stats .payment-breakdown { float: left; position: inherit; width: 100%; margin: 0; } .item-shop-stats .payment-breakdown li { position: relative; float: left; width: 100%!important; padding: 0!important; transition: all 0.2s ease-out; } .item-shop-stats .payment-breakdown li .text { float: left; z-index: 2; position: inherit; bottom: inherit; width: 100%; height: 20px; margin-left: inherit; margin-right: inherit; left: inherit; right: inherit; } .item-shop-stats .payment-breakdown li .text span { display: inherit; text-align: center; } .item-shop-stats .payment-breakdown li .sub-text { display: none; } .item-shop-stats .payment-breakdown li .graph { position: absolute; width: 100%!important; height: 40px; left: 0; bottom: -10px; margin: 0; background: #212325; transition: all 0.2s ease-out; } .item-shop-stats .payment-breakdown li .graph .percentage { float: none; position: absolute; bottom: 0; width: 100%; background: #39317c; transition: all 0.2s ease-out; } .item-shop-stats .payment-breakdown li .graph .percentage span { display: none!important; } .item-shop-stats .payment-breakdown li:nth-child(1) .text { background: none!important; } @media only screen and (max-width: 600px) { .item-shop-stats { padding: 0; } .item-shop-stats .item-inner { padding: 10px!important; margin: 0; min-height: inherit; height: inherit; width: 100%; } .item-shop-stats .item-inner:nth-of-type(5), .item-shop-stats .item-inner:nth-of-type(6), .item-shop-stats .item-inner:nth-of-type(7) { width: 33.333333%; } .item-shop-stats .payment-breakdown li .sub-text { display: block!important; position: relative; } } /* S H O P O R D E R S ------------------------------------------------------------------------------------------- */ .page-shop-order .page-header { background: url(images/background/bg-orders.jpg) top no-repeat; background-size: cover; } .page-shop-order .active { background: rgba(180,85,180,1); } .page-shop-order .content-wrapper:nth-of-type(2) .content-wrapper .button:hover { background-color: rgba(110,26,180,0.2); } .page-shop-order .content-wrapper:nth-of-type(2) .content-wrapper .button.active, .page-shop-order .content-wrapper:nth-of-type(2) .content-wrapper .button.active:hover { color: #e4e5e6; background-color: rgba(110,26,180,1); } .content-wrapper.shop-order {} .content-shop-order { max-width: 100%; } .item-shop-order:nth-of-type(even) { background-color: inherit; } .item-shop-order:nth-of-type(4n+2) { background-color: #1a1b1d!important; } .item-shop-order { padding-left: 160px; } .item-shop-order .item {} .item-shop-order .item-inner { width: 10%; } .item-shop-order .item-inner:nth-of-type(1) { width: 15%; } .item-shop-order .item-inner:nth-of-type(2) { width: 15%; } .item-shop-order .item-inner:nth-of-type(3) {} .item-shop-order .item-inner:nth-of-type(4) {} .item-shop-order .item-inner:nth-of-type(5) {} .item-shop-order .item-inner:nth-of-type(6) { position: relative; width: 20%; } .item-shop-order .item-inner:nth-of-type(7) { position: relative; width: 20%; } .payment-breakdown { position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0 20px 0 0; } .payment-breakdown li { position: relative; float: left; width: 33.333333%; padding: 0 2px 0 0; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .payment-breakdown li .text { z-index: 2; position: absolute; bottom: 10px; width: 30px; height: 20px; margin-left: auto; margin-right: auto; left: 0; right: 0; } .payment-breakdown li .text span { display: none; } .payment-breakdown li .sub-text { display: none; } .payment-breakdown li .graph { position: relative; float: left; width: 100%!important; height: 40px; margin: 0; background: #212325; transition: all 0.2s ease-out; } .payment-breakdown li .graph .percentage { float: none; position: absolute; bottom: 0; width: 100%; height: 50%; background: #39317c; transition: all 0.2s ease-out; } .payment-breakdown li .graph .percentage span { display: none!important; } .payment-breakdown li:nth-child(1) .text { background: url(images/icons/graph-card.png) no-repeat; } .payment-breakdown li:nth-child(2) .text { background: url(images/icons/graph-paypal.png) no-repeat; } .payment-breakdown li:nth-child(3) .text { background: url(images/icons/graph-cash.png) no-repeat; } .payment-breakdown li:nth-child(1) .graph .percentage { background: #5b2e6d; } .payment-breakdown li:nth-child(2) .graph .percentage { background: #522f71; } .payment-breakdown li:nth-child(3) .graph .percentage { background: #4a3074; } .item-shop-order.active .payment-breakdown li .graph { z-index: 5; height: 100px; } .item-shop-order.active .payment-breakdown li .text { z-index: 6; } .device-breakdown { position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0 20px 0 0; } .device-breakdown li { position: relative; float: left; width: 33.333333%; padding: 0 2px 0 0; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .device-breakdown li .text { z-index: 2; position: absolute; bottom: 10px; width: 30px; height: 20px; margin-left: auto; margin-right: auto; left: 0; right: 0; } .device-breakdown li .text span { display: none; } .device-breakdown li .sub-text { display: none; } .device-breakdown li .graph { position: relative; float: left; width: 100%!important; height: 40px; margin: 0; background: #212325; transition: all 0.2s ease-out; } .device-breakdown li .graph .percentage { float: none; position: absolute; bottom: 0; width: 100%; height: 50%; background: #39317c; transition: all 0.2s ease-out; } .device-breakdown li .graph .percentage span { display: none!important; } .device-breakdown li:nth-child(1) .text { background: url(images/icons/desktop.png) no-repeat; } .device-breakdown li:nth-child(2) .text { background: url(images/icons/mobile.png) no-repeat; } .device-breakdown li:nth-child(3) .text { background: url(images/icons/app.png) no-repeat; } .device-breakdown li:nth-child(1) .graph .percentage { background: #5b2e6d; } .device-breakdown li:nth-child(2) .graph .percentage { background: #522f71; } .device-breakdown li:nth-child(3) .graph .percentage { background: #4a3074; } .item-shop-order.active .device-breakdown li .graph { z-index: 5; height: 100px; } .item-shop-order.active .device-breakdown li .text { z-index: 6; } @media only screen and (max-width: 600px) { .item-shop-order { padding: 0; } .item-shop-order .item-again { max-width: 800%; width: 800%; } .item-shop-order .item .item-inner { width: 12.5%; } .item-shop-order .counter { width: 12.5%!important; } .item .payment-breakdown .sub-text { display: none!important; } .item .device-breakdown .sub-text { display: none!important; } .payment-breakdown li .text { height: 30px; } .payment-breakdown li .graph { height: 70px; } .device-breakdown li .text { height: 30px; } .device-breakdown li .graph { height: 70px; } } /* O R D E R S ------------------------------------------------------------------------------------------- */ .content-wrapper.order { background-image: url(images/order-bg.png); background-repeat: repeat-y; background-position: top left 20px; } .content-order {} .light .item-order:nth-of-type(even) { background-color: inherit; } .light .item-order:nth-of-type(4n+2) { background-color: #dadbdc; } .item-order { padding-left: 160px; background: url(images/order-item-bg.png) center left 20px no-repeat; } .item-order:nth-of-type(1) { background: url(images/order-bg.png); background-repeat: repeat-y; background-position: top left 20px; } .item-order .item {} .item-order .item-inner { width: 15%; } .item-order .item-inner:nth-of-type(1) { width: 8%; } .item-order .item-inner:nth-of-type(2) { width: 10%; } .item-order .item-inner:nth-of-type(3) { width: 6%; } .item-order .item-inner:nth-of-type(4) { width: 14%; } .item-order .item-inner:nth-of-type(5) { width: 8%; } .item-order .item-inner:nth-of-type(6) { width: 26%; } .item-order .item-inner:nth-of-type(7) { width: 12%; } .item-order .item-inner:nth-of-type(8) { width: 8%; } .item-order .item-inner:nth-of-type(9) { width: 8%; } .item-order .payment { background: url(images/icons/cash-light.png) center no-repeat; } .order-sent .title { color: #cdb230!important; } .order-received .title { color: #76ae24!important; } .order-accept .title span { background-color: #31ff4b!important; color:#ffffff!important;} .order-domed .title { color: #da324f!important; text-decoration:line-through; } .order-rejected .title { background-color: #ff002c!important; color: #ffffff!important; } .order-cancelled .title span { background-color: #ff00fe!important; color:#ffffff!important; text-decoration:line-through;} .order-lateCancel .title span { background-color: #d96831!important; color:#ffffff!important;} .ofl { background: url(images/icons/ofl-light.png) center left 20px no-repeat; } .item-search-order.ofl { background: url(images/icons/ofl.png) center left 20px no-repeat; } .points-up .points { background: url(images/points-up.png) no-repeat center right 10px; } .points-down .points { background: url(images/points-down.png) no-repeat center right 10px; } .points-up .points .text { color: #76ae24; } .points-down .points .text { color: #d96831; } ul.order-history { position: absolute; top: 50px; left: 60px; width: 80px; height: 10px; background: #222; z-index:100;} ul.order-history li { float: left; width: 25%; height: 10px; background: #fff!important; list-style-position:inside; border: 1px solid black; } ul.order-history li.order-sent { background: #cdb230; } ul.order-history li.order-recieved { background: #76ae24; } ul.order-history li.order-domed { background: #da324f; } ul.order-history li.order-rejected { background: #d96831; } @media only screen and (max-width: 600px) { .item-order { padding: 0; } .item-order .item-again { max-width: 800%; width: 800%; } .item-order .item .item-inner { width: 12.5%; } .item-order .counter { width: 12.5%!important; } .item-order .item-inner:nth-of-type(6) .sub-text, .item-order .item-inner:nth-of-type(7) .sub-text, .item-order .item-inner:nth-of-type(8) .sub-text { display: none!important; } .item-order .item-inner:nth-of-type(7), .item-order .item-inner:nth-of-type(8) { width: 5.5%; } } /* O R D E R D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.order-details {} .order-details {} .item-order-details {} .item-order-details .item {} .item-order-details .one { border-right: 1px solid #fff; } .item-order-details .two { margin: 50px 0 0 0; border-left: 1px solid #fff; } /* S E A R C H O R D E R S ------------------------------------------------------------------------------------------- */ .page-search-order {} .page-search-order .content-page-header { max-width: 1400px; } .page-search-order .content-page-header .page-navigation { margin-bottom: 60px; } .page-search-order .content-page-header ul.stats { max-width: 1600px; } .page-search-order .content-page-header ul.stats li { position: relative; width: 16.666666%; } .item-search-order.list:nth-of-type(even) { background-color: #1a1b1d!important; } .content-wrapper.search-order { background-image: url(images/order-bg.png); background-repeat: repeat-y; background-position: top left 20px; } .content-order {} .light .item-search-order:nth-of-type(even) { background-color: inherit; } .light .item-search-order:nth-of-type(4n+2) { background-color: #dadbdc; } .item-search-order { padding-left: 160px; background: url(images/order-item-bg.png) center left 20px no-repeat; } .item-search-order:nth-of-type(1) { background: url(images/order-bg.png); background-repeat: repeat-y; background-position: top left 20px; } .item-search-order .item {} .item-search-order .item-inner { width: 15%; } .item-search-order .item-inner:nth-of-type(1) { width: 8%; } .item-search-order .item-inner:nth-of-type(2) { width: 5%; } .item-search-order .item-inner:nth-of-type(3) { width: 14%; } .item-search-order .item-inner:nth-of-type(4) { width: 5%; } .item-search-order .item-inner:nth-of-type(5) { width: 5%; } .item-search-order .item-inner:nth-of-type(6) { width: 10%; } .item-search-order .item-inner:nth-of-type(7) { width: 5%; } .item-search-order .item-inner:nth-of-type(8) { width: 12%; } .item-search-order .item-inner:nth-of-type(9) { width: 15%; } .item-search-order .item-inner:nth-of-type(10) { width: 7%; } .item-search-order .item-inner:nth-of-type(11) { width: 7%; } .item-search-order .item-inner:nth-of-type(12) { width: 7%; } .item-search-order .payment { background: url(images/icons/cash.png) center no-repeat; } .item-search-order.payment { background: url(images/icons/no-payment.png) center no-repeat; } .item-search-order.payment-cash .payment { background: url(images/icons/cash.png) center no-repeat; } .item-search-order.payment-paypal .payment { background: url(images/icons/paypal.png) center no-repeat; } .item-search-order.payment-sagepay .payment { background: url(images/icons/sagepay.png) center no-repeat; } .item-search-order.payment-securetrading .payment { background: url(images/icons/securetrading.png) center no-repeat; } .item-search-order.payment-paypal-securetrading .payment { background: url(images/icons/paypalsecuretrading.png) center no-repeat; } .item-search-order.payment-paypal-sagepay .payment { background: url(images/icons/paypalsagepay.png) center no-repeat; } .item-search-order.device-tablet .device { background: url(images/icons/tablet.png) center no-repeat; } .item-search-order.device-desktop .device { background: url(images/icons/desktop.png) center no-repeat; } .item-search-order.device-mobile .device { background: url(images/icons/mobile.png) center no-repeat; } .item-search-order.device-app .device { background: url(images/icons/app.png) center no-repeat; } .item-search-order.user-logged-in .user-login { background: url(images/icons/user-logged-in.png) center no-repeat; } .item-search-order.user-not-logged-in .user-login { background: url(images/icons/user-not-logged-in.png) center no-repeat; } .item-search-order.user-google-logged-in .user-login { background: url(images/icons/user-google-logged-in.png) center no-repeat; } .item-search-order.user-facebook-logged-in .user-login { background: url(images/icons/user-facebook-logged-in.png) center no-repeat; } /* S E T T I N G S ------------------------------------------------------------------------------------------- */ .page-shop-settings .page-header { background: url(images/background/bg-settings.jpg) top no-repeat; background-size: cover; } .page-shop-settings .active { background: rgba(217,87,70,1); } .page-shop-settings .content-wrapper:nth-of-type(2) .content-wrapper .button:hover { background-color: rgba(171,51,71,0.2); } .page-shop-settings .content-wrapper:nth-of-type(2) .content-wrapper .button.active, .page-shop-settings .content-wrapper:nth-of-type(2) .content-wrapper .button.active:hover { color: #e4e5e6; background-color: rgba(171,51,71,1); } .content-wrapper.shop-settings {} .content-shop-settings {} .item-shop-settings { padding-left: 160px; padding-right: 160px; } .item-shop-settings .item {} .item-shop-settings .item-inner { width: 15%; } .item-shop-settings .item-inner:nth-of-type(1) { width: 15%; } .item-shop-settings .item-inner:nth-of-type(2) {} .item-shop-settings .item-inner:nth-of-type(3) { width: 15%; } .item-shop-settings .item-inner:nth-of-type(4) { width: 25%; } .item-shop-settings .item-inner:nth-of-type(5) { width: 10%; } .item-shop-settings .item-inner:nth-of-type(6) { width: 10%; } .item-shop-settings .item-inner:nth-of-type(7) { width: 10%; } .item-shop-settings .title { font-size: 26px!important; line-height: 40px; } @media only screen and (max-width: 600px) { .item-shop-settings { padding: 0; } .item-shop-settings .item-again { max-width: 600%; width: 600%; } .item-shop-settings .item .item-inner { width: 16.666666%; } .item-shop-settings .item-inner:nth-of-type(5) { width: 8.333333%; } .item-shop-settings .item-inner:nth-of-type(6) { width: 8.333333%; } .item-shop-settings .counter { width: 16.666666%!important; } .item-shop-settings .item-inner:nth-of-type(4) .sub-text { display: none!important; } } /* O N L I N E S E T T I N G S ------------------------------------------------------------------------------------------- */ .content-wrapper.online-settings {} .content-online-settings {} .item-online-settings {} .item-online-settings .item {} .item-online-settings .one { border-right: 1px solid #121315; } .item-online-settings .two { margin-top: 100px; border-left: 1px solid #121315; } /* U S E R S E T T I N G S ------------------------------------------------------------------------------------------- */ .content-wrapper.user-settings {} .content-user-settings {} .item-user-settings {} .item-user-settings .item {} .item-user-settings .one { float: right!important; } .item-user-settings .two { border-right: 1px solid #e4e5e6; margin-top: ; } .item-user-settings .three { clear: both; margin-top: 100px; } .item-user-settings .four { margin-top: -50px!important; border-left: 1px solid #e4e5e6!important; } /* P A Y M E N T S E T T I N G S ------------------------------------------------------------------------------------------- */ .content-wrapper.payment-settings {} .content-payment-settings {} .item-payment-settings {} .item-payment-settings .item {} .item-payment-settings .one { margin-top: -50px; border-right: 1px solid #fff; } .item-payment-settings .two { border-left: 1px solid #fff; margin-top: 50px; } .item-payment-settings .three { float: left; border-left: 1px solid #fff; margin-top: 50px; } .paypal-settings { background: url(images/paypal-payment.png) center 50px no-repeat; padding-top: 137px!important; } .sagepay-settings { background: url(images/sagepay-payment.png) center 50px no-repeat; padding-top: 131px!important; } .secure-trading-settings { background: url(images/secure-trading-payment.png) center 50px no-repeat; padding-top: 132px!important; } /* S H O P P R O M O C O D E ------------------------------------------------------------------------------------------- */ .page-shop-promo-code { background: url(images/background/bg-promos.jpg) top no-repeat; background-size: cover; } .page-shop-promo-code .content-wrapper:nth-of-type(2) .content-wrapper .button:hover { background-color: rgba(41,106,171,0.2); } .page-shop-promo-code .content-wrapper:nth-of-type(2) .content-wrapper .button.active, .page-shop-promo-code .content-wrapper:nth-of-type(2) .content-wrapper .button.active:hover { color: #e4e5e6; background-color: rgba(41,106,171,1); } .stared .stared { background: url(images/icons/stared-light.png) center left 20px no-repeat; } .content-wrapper.shop-promo-code {} .content-shop-promo-code {} .item-shop-promo-code .title { font-size: 26px!important; line-height: 40px; } .item-shop-promo-code {} .item-shop-promo-code .item { } .item-shop-promo-code .item-inner { width: 16.666666%; } .item-shop-promo-code .item-inner:nth-of-type(1) {} @media only screen and (max-width: 600px) { .item-shop-promo-code { padding: 0; } .item-shop-promo-code .item-again { max-width: 700%; width: 700%; } .item-shop-promo-code .item .item-inner { width: 14.285714%; } .item-shop-promo-code .counter { width: 14.285714%!important; } } /* P R O M O C O D E ------------------------------------------------------------------------------------------- */ .content-wrapper.promo-code {} .content-promo-code {} .item-promo-code {} .item-promo-code .item {} .item-promo-code .item-inner { width: 12%; } .item-promo-code .item-inner:nth-of-type(1) { width: 25%; } .item-promo-code .item-inner:nth-of-type(2) {} .item-promo-code .item-inner:nth-of-type(3) {} .item-promo-code .item-inner:nth-of-type(4) { width: 10%; } .item-promo-code .item-inner:nth-of-type(5) { width: 15%; } .item-promo-code .item-inner:nth-of-type(6) { width: 5%; } .item-promo-code .item-inner:nth-of-type(7) { width: 10%; } .item-promo-code .item-inner:nth-of-type(8) { width: 11%; } @media only screen and (max-width: 600px) { .item-promo-code { padding: 0; } .item-promo-code .item-again { max-width: 800%; width: 800%; } .item-promo-code .item .item-inner { width: 12.5%; } } /* S H O P U S E R S ------------------------------------------------------------------------------------------- */ .page-shop-users .page-header { background: url(images/background/bg-customers.jpg) top no-repeat; background-size: cover; } .page-shop-users .active { background: rgba(207,118,64,1); } .page-shop-users .content-wrapper:nth-of-type(2) .content-wrapper .button:hover { background-color: rgba(206,76,36,0.2); } .page-shop-users .content-wrapper:nth-of-type(2) .content-wrapper .button.active, .page-shop-users .content-wrapper:nth-of-type(2) .content-wrapper .button.active:hover { color: #e4e5e6; background-color: rgba(206,76,36,1); } .content-wrapper.shop-users {} .content-shop-users {} .item-shop-users {} .item-shop-users .item { } .item-shop-users .item-inner { width: 10%; } .item-shop-users .item-inner:nth-of-type(1) { width: 25%; } .item-shop-users .item-inner:nth-of-type(2) { width: 10%; } .item-shop-users .item-inner:nth-of-type(3) { width: 10%; } .item-shop-users .item-inner:nth-of-type(4) { width: 20%; } .item-shop-users .item-inner:nth-of-type(5) { } .item-shop-users .item-inner:nth-of-type(6) { } .item-shop-users .item-inner:nth-of-type(7) { width: 15%; } .item-shop-users .item-inner:nth-of-type(7) .switch { background: #a2ca68!important; } .item-shop-users .item-inner:nth-of-type(7) .switch .slider { left: inherit; right: 2px; } @media only screen and (max-width: 600px) { .item-shop-users { padding: 0; } .item-shop-users .item-again { max-width: 800%; width: 800%; } .item-shop-users .item .item-inner { width: 12.5%; } .item-shop-users .counter { width: 12.5%!important; } } /* U S E R S ------------------------------------------------------------------------------------------- */ .content-wrapper.users {} .content-users {} .item-users {} .item-users .item { } .item-users .item-inner { width: 15%; } .item-users .item-inner:nth-of-type(2) { width: 25%; } @media only screen and (max-width: 600px) { .item-users { padding: 0; } .item-users .item-again { max-width: 500%; width: 500%; } .item-users .item .item-inner { width: 20%; } } /* U S E R D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.user-details {} .content-user-details {} .item-user-details {} .item-user-details .item { } .item-user-details .one {} .item-user-details .two {} /* M Y I N T E G E R U S E R S ------------------------------------------------------------------------------------------- */ .page-my-integer-users {} .content-wrapper.my-integer-users {} .content-my-integer-users {} .item-my-integer-users {} .item-my-integer-users .item { } .item-my-integer-users .item-inner { width: 25%; } .item-my-integer-users .item-inner:nth-of-type(1) {} .item-my-integer-users .item-inner:nth-of-type(2) {} .item-my-integer-users .item-inner:nth-of-type(3) { width: 20%; } .item-my-integer-users .item-inner:nth-of-type(4) { width: 20%; } .item-my-integer-users .item-inner:nth-of-type(5) { width: 10%; } .item-my-integer-users.read-only .read-only .switch { background: #a2ca68!important; } .item-my-integer-users.read-only .read-only .switch .slider { left: inherit; right: 2px; } @media only screen and (max-width: 600px) { .item-my-integer-users { padding: 0; } .item-my-integer-users .item-again { max-width: 600%; width: 600%; } .item-my-integer-users .item .item-inner { width: 16.666666%; } .item-my-integer-users .counter { width: 16.666666%!important; } } /* M Y I N T E G E R S I N G L E U S E R D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.my-integer-single-user-details {} .content-my-integer-single-user-details {} .item-my-integer-single-user-details .one { border-right: 1px solid #121315; } .item-my-integer-single-user-details .two { border-left: 1px solid #121315; margin-top: 40px!important; } /* M Y I N T E G E R U S E R D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.my-integer-user-details {} .content-my-integer-user-details {} .item-my-integer-user-details .one {} /* A D D M Y I N T E G E R U S E R ------------------------------------------------------------------------------------------- */ .content-wrapper.add-my-integer-user {} .content-add-my-integer-user {} .item-add-my-integer-user {} .item-add-my-integer-user .item {} .item-add-my-integer-user .one { float: right!important; } .item-add-my-integer-user .two { float: left; border-right: 1px solid #121315; } .item-add-my-integer-user .three { float: right!important; border-left: 1px solid #121315; } /* B A N N E D U S E R S ------------------------------------------------------------------------------------------- */ .page-banned-users {} .content-wrapper.banned-users {} .content-banned-users {} .item-banned-users {} .item-banned-users .item { } .item-banned-users .item-inner { width: 50%; } .item-banned-users .item-inner:nth-of-type(1) {} .item-banned-users .item-inner:nth-of-type(2) {} @media only screen and (max-width: 600px) { .item-banned-users { padding: 0; } .item-banned-users .item-again { max-width: 300%; width: 300%; } .item-banned-users .item .item-inner { width: 33.333333%; } .item-banned-users .counter { width: 33.333333%!important; } } /* A D D B A N N E D U S E R S ------------------------------------------------------------------------------------------- */ .content-wrapper.add-banned-user {} .content-add-banned-user {} .item-add-banned-user .one { border-right: 1px solid #121315; } .item-add-banned-user .two { border-left: 1px solid #121315; margin-top: 40px!important; } /* S E N D R E P O R T ------------------------------------------------------------------------------------------- */ .content-wrapper.send-report {} .content-send-report {} .item-send-report {} .item-send-report .item {} .item-send-report .one { float: right!important; } .item-send-report .two { border-right: 1px solid #121315; } .item-send-report .three { border-left: 1px solid #121315; } /* I N T E G E R I P ------------------------------------------------------------------------------------------- */ .page-integerip {} .content-wrapper.integerip {} .content-integerip {} .item-integerip {} .item-integerip .item {} .item-integerip .item-inner { width: 33.333333%; } .item-integerip .item-inner:nth-of-type(1) {} @media only screen and (max-width: 600px) { .item-integerip { padding: 0; } .item-integerip .item-again { max-width: 300%; width: 300%; } .item-integerip .item .item-inner { width: 33.333333%; } } /* Q U E R E P O R T ------------------------------------------------------------------------------------------- */ .page-que-report {} .content-wrapper.que-report {} .content-que-report {} .item-que-report {} .item-que-report .item {} .item-que-report .item-inner { width: 33.333333%; } .item-que-report .item-inner:nth-of-type(1) {} @media only screen and (max-width: 600px) { .item-que-report { padding: 0; } .item-que-report .item-again { max-width: 300%; width: 300%; } .item-que-report .item .item-inner { width: 33.333333%; } } /* F E E D B A C K ------------------------------------------------------------------------------------------- */ .page-feedback {} .content-wrapper.feedback {} .content-feedback {} .item-feedback {} .item-feedback .item { } .item-feedback .item-inner { width: 25%; } .item-feedback .item-inner:nth-of-type(1) {} .item-feedback .item-inner:nth-of-type(2) {} .item-feedback .item-inner:nth-of-type(3) { width: 20%; } .item-feedback .item-inner:nth-of-type(4) { width: 20%; } .item-feedback .item-inner:nth-of-type(5) { width: 10%; } @media only screen and (max-width: 600px) { .item-feedback { padding: 0; } .item-feedback .item-again { max-width: 600%; width: 600%; } .item-feedback .item .item-inner { width: 16.666666%; } .item-feedback .counter { width: 16.666666%!important; } } /* F E E D B A C K D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.feedback-details {} .content-feedback-details {} .item-feedback-details .one {} .item-feedback-details .two .button { width: 100%; } /* D R I V E R S ------------------------------------------------------------------------------------------- */ .page-drivers .page-header { background: url(images/background/bg-settings.jpg) top no-repeat; background-size: cover; } .content-wrapper.drivers {} .content-drivers {} .item-drivers {} .item-drivers .item { } .item-drivers .item-inner { width: 33.333333%; } .item-drivers .item-inner:nth-of-type(1) {} @media only screen and (max-width: 600px) { .item-drivers { padding: 0; } .item-drivers .item-again { max-width: 400%; width: 400%; } .item-drivers .item .item-inner { width: 25%; } .item-drivers .counter { width: 25%!important; } } /* D R I V E R D E T A I L S ------------------------------------------------------------------------------------------- */ .content-wrapper.driver-details {} .content-driver-details {} .item-driver-details {} .item-driver-details .item {} .item-driver-details .item-inner { width: 20%; } .item-driver-details .item-inner:nth-of-type(1) {} .item-driver-details.driver-enabled .driver-enabled .switch { background: #a2ca68!important; } .item-driver-details.driver-enabled .driver-enabled .switch .slider { left: inherit; right: 2px; } @media only screen and (max-width: 600px) { .item-driver-details { padding: 0; } .item-driver-details .item-again { max-width: 500%; width: 500%; } .item-driver-details .item .item-inner { width: 20%; } } /* S E A R C H L O G S ------------------------------------------------------------------------------------------- */ .page-search-logs {} .content-wrapper.search-logs {} .content-search-logs {} .item-search-logs { padding-left: 200px; padding-right: 160px; } .item-search-logs .item {} .item-search-logs .item-inner { width: 15%; } .item-search-logs .item-inner:nth-of-type(1) { width: 15%; } .item-search-logs .item-inner:nth-of-type(2) { width: 8%; } .item-search-logs .item-inner:nth-of-type(3) { width: 8%; } .item-search-logs .item-inner:nth-of-type(4) { width: 12%; } .item-search-logs .item-inner:nth-of-type(5) { width: 12%; } .item-search-logs .item-inner:nth-of-type(6) { width: 22%; } .item-search-logs .item-inner:nth-of-type(7) { width: 23%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .item-search-logs .item-inner:nth-of-type(7) .text { } .item-search-logs .item-inner:nth-of-type(7) .text span { padding-right: 10px; } .item-search-logs .title { font-size: 26px!important; line-height: 40px; } ::-webkit-scrollbar { width: 0px; background: transparent!important; /* make scrollbar transparent */ } @media only screen and (max-width: 600px) { .item-search-logs { padding: 0; } .item-search-logs .item-again { max-width: 800%; width: 800%; } .item-search-logs .item .item-inner { width: 12.5%; } .item-search-logs .counter { width: 12.5%!important; } } /* S H O P I M A G E S ------------------------------------------------------------------------------------------- */ .page-shop-images .page-header { background: url(images/background/bg-settings.jpg) top no-repeat; background-size: cover; } .content-wrapper.shop-images {} .content-shop-images {} .item-shop-images {} .item-shop-images .item {} .item-shop-images .item-inner { width: 33.3333333%; } .item-shop-images .item-inner:nth-of-type(1) {} @media only screen and (max-width: 600px) { .item-shop-images { padding: 0; } .item-shop-images .item-again { max-width: 400%; width: 400%; } .item-shop-images .item .item-inner { width: 25%; } .item-shop-images .counter { width: 25%!important; } } /* I M A G E S ------------------------------------------------------------------------------------------- */ .content-wrapper.content-image {} .content-image {} .item-image { margin: 0; padding: 0; } .item-image .item { float: left; width: 16.666666%; max-width: 16.666666%; position: relative; } .item-image .item-inner { z-index: 1; position: absolute; float: none; padding: 0 40px 0 40px; top: 50%; margin-top: -30px; } .item-image .sub-text { display: inherit; color: #e4e5e6!important; margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid rgba(228,229,230,0.2); } .lightest .item-image .text { color: #e4e5e6!important; } .item-image .image-wrapper { position: relative; float: left; width: 100%; height: 0; padding-top: 100%; background-image: url(images/icons/no-image.png); background-position: center; background-repeat: no-repeat; background-color: #121315; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-image .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-image .image-wrapper .image img { float: left; width: auto; height: 100%; opacity: 0.5; transition: all 0.2s ease-out; } .item-image .image-wrapper:hover .image img { opacity: 1; } @media only screen and (max-width: 600px) { .item-image .item { width: 100%; max-width: 100%; } } /* P O S T C O D E Z O N E S ------------------------------------------------------------------------------------------- */ .content-wrapper.postcode-zones {} .content-postcode-zones {} .item-postcode-zones {} .item-postcode-zones .item {} .item-postcode-zones .one { float: right!important; } .item-postcode-zones .two { border-right: 1px solid #121315; margin-top: ; } .item-postcode-zones .three { clear: both; margin-top: 100px; border-right: 1px solid #121315; } .item-postcode-zones .four { margin-top: -50px!important; border-left: 1px solid #121315!important; } .item-postcode-zones .five { margin-top: 100px; border-left: 1px solid #121315!important; } .item-postcode-zones .six { margin-top: -200px!important; border-right: 1px solid #121315!important; } .item-postcode-zones .seven { margin-top: 100px; border-left: 1px solid #121315!important; } .item-postcode-zones .eight { margin-top: -200px; border-right: 1px solid #121315!important; } .item-postcode-zones .nine { margin-top: 100px; border-left: 1px solid #121315!important; } /* A D D I M A G E ------------------------------------------------------------------------------------------- */ .content-wrapper.add-image {} .content-add-image {} .item-add-image {} .item-add-image .item {} .upload-image { padding-top: 50px; width: 100%; background: url(images/icons/order-statistics.png) center 20px no-repeat;} /* E R R O R ------------------------------------------------------------------------------------------- */ .page-error {} .content-wrapper.error {} .content-error {} .item-error {} .item-error .item { margin-left: 25%; } @media only screen and (max-width: 600px) { .item-error .item { margin-left: 0; } } /* A D D P R O M O C O D E ------------------------------------------------------------------------------------------- */ .content-wrapper.add-promo-code {} .content-add-promo-code {} .item-add-promo-code {} .item-add-promo-code .item {} .item-add-promo-code .one { float: right!important; } .item-add-promo-code .two { border-right: 1px solid #121315; } .item-add-promo-code .three { margin-top: 100px; border-left: 1px solid #121315; } .free-item .button { width: 100%; border-right: none!important; border-bottom: 1px solid rgba(228,229,230,0.1); } .free-item .button span { border-right: none!important; } /* F O R C E C L O S E ------------------------------------------------------------------------------------------- */ .page-force-close .page-header { background: url(images/background/bg-settings.jpg) top no-repeat; background-size: cover; } .content-wrapper.force-close {} .content-force-close {} .item-force-close { padding-left: 160px; padding-right: 160px; } .item-force-close .item {} .item-force-close .item-inner { width: 16.666666%; } .item-force-close .title { font-size: 26px!important; line-height: 40px; } @media only screen and (max-width: 600px) { .item-force-close { padding: 0; } .item-force-close .item-again { max-width: 700%; width: 700%; } .item-force-close .item .item-inner { width: 14.285714%; } .item-force-close .counter { width: 14.285714%!important; } } /* F O R C E C L O S E S E T T I N G S ------------------------------------------------------------------------------------------- */ .content-wrapper.force-close-settings {} .content-force-close-settings {} .item-force-close-settings {} .item-force-close-settings .item {} .item-force-close-settings .one { float: right!important; } .item-force-close-settings .two { border-right: 1px solid #121315; } /* P O P U P ------------------------------------------------------------------------------------------- */ .pop-up { position: fixed; top: 0; left: 0; z-index: 10000; min-height: 100%; height: 100%; padding: 0!important; background: rgba(18,19,21,0.9); } .pop-up .content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; min-height: 100%; height: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pop-up .item { width: 75%; max-width: 500px; margin: 0 0 0 25%; padding: 50px; background: #1a1b1d; } .pop-up .item .title { text-align: center; } .pop-up .close { position: fixed; top: 20px; right: 20px; width: 60px; height: 60px; padding: 0; border: none; background: url(images/icons/delete-icon-light.png) center no-repeat #fff; } @media only screen and (max-width: 600px) { .pop-up .item { width: 100%; max-width: 500px; margin: 0%; padding: 25px; background: #1a1b1d; } } .loading-wrapper2 { z-index: 10000; position: relative; float: left; width: 100%; min-height: 200px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .loading-wrapper2 .loading-image { border-color: rgb(57, 60, 62); border-color: rgba(57, 60, 62, 0.8); } .loading-wrapper2 .title { margin: 20px 0 0 0; text-align: center; color: rgb(57, 60, 62); color: rgba(57, 60, 62, 0.8); } .loading-wrapper, .loading-wrapper-outer { z-index: 10000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(57, 60, 62); background: rgba(57, 60, 62, 0.9); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .loading-wrapper .loading-image, .loading-wrapper-outer .loading-image { border-color: rgb(228, 229, 230); border-color: rgba(228, 229, 230, 0.8); } .loading-wrapper .title, .loading-wrapper-outer .title { margin: 20px 0 0 0; text-align: center; color: rgb(228, 229, 230); color: rgba(228, 229, 230, 0.8); } .loading-wrapper.drop-down, .loading-wrapper-outer.drop-down { position: relative; height: auto; min-height: 400px; background: #e4e5e6; } .loading-wrapper.drop-down .loading-image, .loading-wrapper-outer.drop-down .loading-image { border-color: rgb(57, 60, 62); border-color: rgba(57, 60, 62, 0.8); } .loading-wrapper.drop-down .title, .loading-wrapper-outer.drop-down .title { color: rgb(57, 60, 62); color: rgba(57, 60, 62, 0.8); } .loading { position: absolute; top: 50%; margin: -45px 0 0 0; width: 100%; } .loading-image { margin: 0 auto; width: 50px; height: 50px; border: 2px solid; border-top-color: rgba(0,0,0,0)!important; border-left-color: rgba(0,0,0,0)!important; border-radius: 50px; -moz-animation: spin .5s infinite linear; -webkit-animation: spin .5s infinite linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .footer { width: 100%; height: auto; margin: 30px 0 0 0; color: #505456; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-shop {} .page-store-locator {} .page-promo-code {} .page-feedback {} .page-registered-ip {} .page-banned-user {} .page-system-settings {} .page-system-status {} .page-user {} .page-live-view {} .page-order-search {} .page-image {} .page-user-account {} .page-theme-design {} .page-theme {} .page-theme-settings {} .page-login {} .page-shop-statistics {} .page-pie { float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-pie .item { padding: 0; border: 0; background: none; } .page-pie .item-inner { width: 16.666666%; margin: 0 0 20px 0; padding: 0; border: none; } .page-pie .text { margin: 35px 0 0 0; } .page-pie .text, .page-pie .sub-text { position: relative; z-index: 100; font-size: 14px; line-height: 20px; color: #505456; text-align: center; } .page-pie .sub-text { padding: 0 20px 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-pie .pound { margin: 0 5px 0 0; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #505456; } .page-pie .large-num { font-size: 40px; line-height: 40px; color: #85b8bd; } /* O V E R V I E W ------------------------------------------------------------------------------------------- */ .page-home .page-header .title { width: 100%; text-align: center; } .page-home .page-header h4 { color: #b1b2b3; } .page-home .page-nav { float: right; width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-home .page-nav ul { float: left; width: 100%; margin: 0; padding: 0; } .page-home .page-nav ul li { float: left; width: 12.5%; } .page-home .page-nav ul li a { float: left; width: 100%; height: 80px; padding: 50px 10px 0 10px; text-align: center; color: #b1b2b3; background-color: #393c3e; background-position: center 15px; background-repeat: no-repeat; border-left: 1px solid #212325; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .page-home .page-nav ul li a:hover, .page-home .page-nav ul li a.active { background-color: #54989e; } @media only screen and (max-width: 600px) { .page-home .page-nav ul li { float: left; width: 25%; } } .overview { margin: 0 0 10px 0; } .content-overview {} .item-overview {} .item-overview .item { padding: 0; } .item-overview .item-inner { width: 33.333333%; margin: 20px 0 20px 0; padding: 10px; } .item-overview .text { color: #b1b2b3; } .item-overview .text, .item-overview .sub-text { text-align: center; } .item-overview .medium-num { line-height: 30px; } .item-overview .increase, .item-overview .decrease { position: absolute; margin: 0 0 0 10px; padding: 0 0 0 12px; font-size: 16px; } .item-overview .increase { color: #a2ca68; background: url(images/arrow-icon-increase.png) center left no-repeat; } .item-overview .decrease { color: #ff685f; background: url(images/arrow-icon-decrease.png) center left no-repeat; } .overview-breakdown { position: relative; width: 100%; margin: 0 auto; padding: 20px 0 0 0; } .overview-breakdown li { float: left; width: 33.333333%; padding: 20px 0 0 0; } .overview-breakdown li:nth-child(1) { width: 200px; float: none; position: relative; margin: 0 auto; padding: 0; } .overview-breakdown li .graph { position: relative; float: left; width: 5px; height: 20px; margin: 0 5px 0 0; background: #212325; } .overview-breakdown li .graph .percentage { z-index: 100; position: absolute; bottom: 0; left: 0; width: 100%; background: #85b8bd; } .overview-breakdown li .graph .percentage span { display: none!important; } /* G R A P H O V E R V I E W ------------------------------------------------------------------------------------------- */ .graph-overview { margin: 0 0 10px 0; } .content-graph-overview {} .item-graph-overview { width: 50%; } .item-graph-overview:nth-child(1) { padding-right: 5px; } .item-graph-overview:nth-child(2) { padding-left: 5px; } .item-graph-overview .item { padding: 0 10px 0 10px; } .item-graph-overview .item-header-inner { padding: 20px 10px 10px 10px; border-bottom: 1px solid #393c3e; } .item-graph-overview .item-header-inner .title { font-size: 20px; text-align: center; } .item-graph-overview .item-inner { width: 33.333333%; margin: 20px 0 20px 0; padding: 10px; border: none; } .item-graph-overview .text { margin: 40px 0 0 0; } .item-graph-overview .text, .item-graph-overview .sub-text { position: relative; z-index: 100; font-size: 14px; line-height: 20px; color: #b1b2b3; text-align: center; } .item-graph-overview .medium-num { font-size: 24px; line-height: 30px; font-family: 'Pathway Gothic One', sans-serif; color: #e4e5e6; } .item-graph-overview .pie { position: relative; font-size: 130px; width: 1em; height: 1em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; margin: 0; background-color: #212325; } .item-graph-overview .pie:after { position: absolute; top: 5px; left: 5px; display: block; content: " "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: #505456; width: 120px; height: 120px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } /* S H O P O V E R V I E W ------------------------------------------------------------------------------------------- */ .shop-overview { margin: 0 0 10px 0; } .content-shop-overview {} .item-shop-overview {} .item-shop-overview .item { padding: 0 10px 0 10px; } .item-shop-overview .item-header-inner { padding: 20px 10px 10px 10px; border-bottom: 1px solid #393c3e; } .item-shop-overview .item-header-inner .title { font-size: 20px; text-align: center; } .item-shop-overview .item-inner { width: 33.333333%; margin: 20px 0 20px 0; padding: 10px; } .item-shop-overview .item-inner:nth-child(2) { border: none; } .item-shop-overview .text { color: #b1b2b3; } .item-shop-overview .text, .item-shop-overview .sub-text { text-align: center; } .item-shop-overview .medium-num { line-height: 30px; } .item-shop-overview .shop-breakdown {} .item-shop-overview .shop-breakdown li { position: relative; float: left; width: 100%; padding: 0; } /* T O P F I V E ------------------------------------------------------------------------------------------- */ .top-five { margin: 0 0 10px 0; } .content-top-five {} .item-top-five {} .item-top-five .item { padding: 0 10px 0 10px; } .item-top-five .item-header-inner { padding: 20px 10px 10px 10px; border-bottom: 1px solid #393c3e; } .item-top-five .item-header-inner .title { font-size: 20px; text-align: center; } .item-top-five .item-inner { position: relative; width: 20%; margin: 20px 0 20px 0; padding: 10px; } .item-top-five .item-inner:nth-child(2) { border: none; } .item-top-five .text { color: #b1b2b3; } .item-top-five .text, .item-top-five .sub-text { position: relative; z-index: 100; text-align: center; } .item-top-five .medium-num { z-index: 100; line-height: 30px; } .item-top-five .sub-sub-text { z-index: 2; position: absolute; top: -20px; right: 0; width: 100%; text-align: center; color: #393c3e; font-size: 110px; line-height: 110px; font-family: 'Pathway Gothic One', sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* U S E R O V E R V I E W ------------------------------------------------------------------------------------------- */ .user-overview { margin: 0 0 10px 0; } .content-user-overview {} .item-user-overview {} .item-user-overview .item { padding: 0 10px 0 10px; } .item-user-overview .item-header-inner { padding: 20px 10px 10px 10px; border-bottom: 1px solid #393c3e; } .item-user-overview .item-header-inner .title { font-size: 20px; text-align: center; } .item-user-overview .item-inner { width: 20%; margin: 20px 0 20px 0; padding: 10px; } .item-user-overview .item-inner:nth-child(2) { border: none; } .item-user-overview .text { color: #b1b2b3; } .item-user-overview .text, .item-user-overview .sub-text { text-align: center; } .item-user-overview .medium-num { line-height: 30px; } /* S T A T U S O V E R V I E W ------------------------------------------------------------------------------------------- */ .status-overview { margin: 0 0 10px 0; } .content-status-overview {} .item-status-overview {} .item-status-overview .item { padding: 0 10px 0 10px; } .item-status-overview .item-header-inner { padding: 20px 10px 10px 10px; border-bottom: 1px solid #393c3e; } .item-status-overview .item-header-inner .title { font-size: 20px; text-align: center; } .item-status-overview .item-inner { width: 20%; margin: 20px 0 20px 0; padding: 10px; } .item-status-overview .item-inner:nth-child(2) { border: none; } .item-status-overview .text { color: #b1b2b3; } .item-status-overview .text, .item-status-overview .sub-text { text-align: center; } .item-status-overview .medium-num { line-height: 30px; } /* T V ------------------------------------------------------------------------------------------- */ .page-tv .container { padding: 40px 40px 10px 40px; } .page-tv .content { width: 100%; max-width: 100%; height: auto; margin: 0 auto; padding: 0; } .page-tv .item-graph-overview { width: 33.333333%; } .page-tv .item-graph-overview:nth-child(1) { padding-right: 5px; } .page-tv .item-graph-overview:nth-child(2) { padding-right: 5px; padding-left: 5px; } .page-tv .item-graph-overview:nth-child(3) { padding-left: 5px; } .page-tv .user-overview, .page-tv .status-overview { float: left; width: 50%!important; } .page-tv .user-overview { padding-right: 5px; } .page-tv .status-overview { padding-left: 5px; } /* ------------------------------------------------------------------------------------------- S T A T I S T I C S ------------------------------------------------------------------------------------------- */ /* S H O P S T A T I S T I C S ------------------------------------------------------------------------------------------- */ .shop-statistics {} .content-shop-statistics-view {} .item-shop-statistics-view {} .item-shop-statistics .item { padding: 0; } .item-shop-statistics .item-inner { width: 9%; } .item-shop-statistics .item-inner:nth-child(1) { width: 20%; } .item-shop-statistics .item-inner:nth-child(5) { position: relative; width: 53%; padding: 0 0 0 10px; } .item-shop-statistics .item-inner:nth-child(1) .text { width: 50%; padding: 0 10px 0 0; color: #e4e5e6; } .item-shop-statistics .item-inner:nth-child(1) .sub-text { width: 50%; color: #b1b2b3; } .item-shop-statistics .text { color: #b1b2b3; } .shop-breakdown { float: left; width: 100%; margin: 0; } .shop-breakdown li { position: relative; float: left; width: 33.333333%; padding: 0 10px 0 0; } .shop-breakdown li .text { width: auto; margin: 0 10px 0 0; color: #e4e5e6; } .shop-breakdown li .sub-text { width: auto; color: #b1b2b3; } .shop-breakdown li .graph { position: relative; float: left; width: 100%; height: 5px; margin: 5px 0 10px 0; background: #212325; } .shop-breakdown li .graph .percentage { z-index: 100; position: absolute; bottom: 0; left: 0; height: 100%; background: #85b8bd; } .shop-breakdown li .graph .percentage span { display: none!important; } @media only screen and (max-width: 600px) { .item-shop-statistics .item { padding: 0 10px 0 10px; } .shop-statistics .item-inner:nth-child(5) { padding: 0 0 10px 0; border: none; } .shop-breakdown li .text { width: auto!important; } .shop-breakdown li .sub-text { width: auto!important; margin: 0: } .shop-breakdown li { padding: 0; } .shop-breakdown li .graph { height: 2px; margin: 0 0 10px 0; } } /* P I E ------------------------------------------------------------------------------------------- */ .rect-auto, .pie.p51 .slice, .pie.p52 .slice, .pie.p53 .slice, .pie.p54 .slice, .pie.p55 .slice, .pie.p56 .slice, .pie.p57 .slice, .pie.p58 .slice, .pie.p59 .slice, .pie.p60 .slice, .pie.p61 .slice, .pie.p62 .slice, .pie.p63 .slice, .pie.p64 .slice, .pie.p65 .slice, .pie.p66 .slice, .pie.p67 .slice, .pie.p68 .slice, .pie.p69 .slice, .pie.p70 .slice, .pie.p71 .slice, .pie.p72 .slice, .pie.p73 .slice, .pie.p74 .slice, .pie.p75 .slice, .pie.p76 .slice, .pie.p77 .slice, .pie.p78 .slice, .pie.p79 .slice, .pie.p80 .slice, .pie.p81 .slice, .pie.p82 .slice, .pie.p83 .slice, .pie.p84 .slice, .pie.p85 .slice, .pie.p86 .slice, .pie.p87 .slice, .pie.p88 .slice, .pie.p89 .slice, .pie.p90 .slice, .pie.p91 .slice, .pie.p92 .slice, .pie.p93 .slice, .pie.p94 .slice, .pie.p95 .slice, .pie.p96 .slice, .pie.p97 .slice, .pie.p98 .slice, .pie.p99 .slice, .pie.p100 .slice { clip: rect(auto, auto, auto, auto); } .pie .bar, .pie.p51 .fill, .pie.p52 .fill, .pie.p53 .fill, .pie.p54 .fill, .pie.p55 .fill, .pie.p56 .fill, .pie.p57 .fill, .pie.p58 .fill, .pie.p59 .fill, .pie.p60 .fill, .pie.p61 .fill, .pie.p62 .fill, .pie.p63 .fill, .pie.p64 .fill, .pie.p65 .fill, .pie.p66 .fill, .pie.p67 .fill, .pie.p68 .fill, .pie.p69 .fill, .pie.p70 .fill, .pie.p71 .fill, .pie.p72 .fill, .pie.p73 .fill, .pie.p74 .fill, .pie.p75 .fill, .pie.p76 .fill, .pie.p77 .fill, .pie.p78 .fill, .pie.p79 .fill, .pie.p80 .fill, .pie.p81 .fill, .pie.p82 .fill, .pie.p83 .fill, .pie.p84 .fill, .pie.p85 .fill, .pie.p86 .fill, .pie.p87 .fill, .pie.p88 .fill, .pie.p89 .fill, .pie.p90 .fill, .pie.p91 .fill, .pie.p92 .fill, .pie.p93 .fill, .pie.p94 .fill, .pie.p95 .fill, .pie.p96 .fill, .pie.p97 .fill, .pie.p98 .fill, .pie.p99 .fill, .pie.p100 .fill { position: absolute; border: 0.08em solid #85b8bd; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .pie.p51 .bar:after, .pie.p51 .fill, .pie.p52 .bar:after, .pie.p52 .fill, .pie.p53 .bar:after, .pie.p53 .fill, .pie.p54 .bar:after, .pie.p54 .fill, .pie.p55 .bar:after, .pie.p55 .fill, .pie.p56 .bar:after, .pie.p56 .fill, .pie.p57 .bar:after, .pie.p57 .fill, .pie.p58 .bar:after, .pie.p58 .fill, .pie.p59 .bar:after, .pie.p59 .fill, .pie.p60 .bar:after, .pie.p60 .fill, .pie.p61 .bar:after, .pie.p61 .fill, .pie.p62 .bar:after, .pie.p62 .fill, .pie.p63 .bar:after, .pie.p63 .fill, .pie.p64 .bar:after, .pie.p64 .fill, .pie.p65 .bar:after, .pie.p65 .fill, .pie.p66 .bar:after, .pie.p66 .fill, .pie.p67 .bar:after, .pie.p67 .fill, .pie.p68 .bar:after, .pie.p68 .fill, .pie.p69 .bar:after, .pie.p69 .fill, .pie.p70 .bar:after, .pie.p70 .fill, .pie.p71 .bar:after, .pie.p71 .fill, .pie.p72 .bar:after, .pie.p72 .fill, .pie.p73 .bar:after, .pie.p73 .fill, .pie.p74 .bar:after, .pie.p74 .fill, .pie.p75 .bar:after, .pie.p75 .fill, .pie.p76 .bar:after, .pie.p76 .fill, .pie.p77 .bar:after, .pie.p77 .fill, .pie.p78 .bar:after, .pie.p78 .fill, .pie.p79 .bar:after, .pie.p79 .fill, .pie.p80 .bar:after, .pie.p80 .fill, .pie.p81 .bar:after, .pie.p81 .fill, .pie.p82 .bar:after, .pie.p82 .fill, .pie.p83 .bar:after, .pie.p83 .fill, .pie.p84 .bar:after, .pie.p84 .fill, .pie.p85 .bar:after, .pie.p85 .fill, .pie.p86 .bar:after, .pie.p86 .fill, .pie.p87 .bar:after, .pie.p87 .fill, .pie.p88 .bar:after, .pie.p88 .fill, .pie.p89 .bar:after, .pie.p89 .fill, .pie.p90 .bar:after, .pie.p90 .fill, .pie.p91 .bar:after, .pie.p91 .fill, .pie.p92 .bar:after, .pie.p92 .fill, .pie.p93 .bar:after, .pie.p93 .fill, .pie.p94 .bar:after, .pie.p94 .fill, .pie.p95 .bar:after, .pie.p95 .fill, .pie.p96 .bar:after, .pie.p96 .fill, .pie.p97 .bar:after, .pie.p97 .fill, .pie.p98 .bar:after, .pie.p98 .fill, .pie.p99 .bar:after, .pie.p99 .fill, .pie.p100 .bar:after, .pie.p100 .fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie { position: relative; font-size: 150px; width: 1em; height: 1em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; margin: 0 10px 0 10px; background-color: #393c3e; } .pie *, .pie *:before, .pie *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .pie:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: #212325; width: 0.84em; height: 0.84em; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .pie .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .pie.p1 .bar { -webkit-transform: rotate(3.6deg); -moz-transform: rotate(3.6deg); -ms-transform: rotate(3.6deg); -o-transform: rotate(3.6deg); transform: rotate(3.6deg); } .pie.p2 .bar { -webkit-transform: rotate(7.2deg); -moz-transform: rotate(7.2deg); -ms-transform: rotate(7.2deg); -o-transform: rotate(7.2deg); transform: rotate(7.2deg); } .pie.p3 .bar { -webkit-transform: rotate(10.8deg); -moz-transform: rotate(10.8deg); -ms-transform: rotate(10.8deg); -o-transform: rotate(10.8deg); transform: rotate(10.8deg); } .pie.p4 .bar { -webkit-transform: rotate(14.4deg); -moz-transform: rotate(14.4deg); -ms-transform: rotate(14.4deg); -o-transform: rotate(14.4deg); transform: rotate(14.4deg); } .pie.p5 .bar { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); } .pie.p6 .bar { -webkit-transform: rotate(21.6deg); -moz-transform: rotate(21.6deg); -ms-transform: rotate(21.6deg); -o-transform: rotate(21.6deg); transform: rotate(21.6deg); } .pie.p7 .bar { -webkit-transform: rotate(25.2deg); -moz-transform: rotate(25.2deg); -ms-transform: rotate(25.2deg); -o-transform: rotate(25.2deg); transform: rotate(25.2deg); } .pie.p8 .bar { -webkit-transform: rotate(28.8deg); -moz-transform: rotate(28.8deg); -ms-transform: rotate(28.8deg); -o-transform: rotate(28.8deg); transform: rotate(28.8deg); } .pie.p9 .bar { -webkit-transform: rotate(32.4deg); -moz-transform: rotate(32.4deg); -ms-transform: rotate(32.4deg); -o-transform: rotate(32.4deg); transform: rotate(32.4deg); } .pie.p10 .bar { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } .pie.p11 .bar { -webkit-transform: rotate(39.6deg); -moz-transform: rotate(39.6deg); -ms-transform: rotate(39.6deg); -o-transform: rotate(39.6deg); transform: rotate(39.6deg); } .pie.p12 .bar { -webkit-transform: rotate(43.2deg); -moz-transform: rotate(43.2deg); -ms-transform: rotate(43.2deg); -o-transform: rotate(43.2deg); transform: rotate(43.2deg); } .pie.p13 .bar { -webkit-transform: rotate(46.8deg); -moz-transform: rotate(46.8deg); -ms-transform: rotate(46.8deg); -o-transform: rotate(46.8deg); transform: rotate(46.8deg); } .pie.p14 .bar { -webkit-transform: rotate(50.4deg); -moz-transform: rotate(50.4deg); -ms-transform: rotate(50.4deg); -o-transform: rotate(50.4deg); transform: rotate(50.4deg); } .pie.p15 .bar { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); } .pie.p16 .bar { -webkit-transform: rotate(57.6deg); -moz-transform: rotate(57.6deg); -ms-transform: rotate(57.6deg); -o-transform: rotate(57.6deg); transform: rotate(57.6deg); } .pie.p17 .bar { -webkit-transform: rotate(61.2deg); -moz-transform: rotate(61.2deg); -ms-transform: rotate(61.2deg); -o-transform: rotate(61.2deg); transform: rotate(61.2deg); } .pie.p18 .bar { -webkit-transform: rotate(64.8deg); -moz-transform: rotate(64.8deg); -ms-transform: rotate(64.8deg); -o-transform: rotate(64.8deg); transform: rotate(64.8deg); } .pie.p19 .bar { -webkit-transform: rotate(68.4deg); -moz-transform: rotate(68.4deg); -ms-transform: rotate(68.4deg); -o-transform: rotate(68.4deg); transform: rotate(68.4deg); } .pie.p20 .bar { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } .pie.p21 .bar { -webkit-transform: rotate(75.6deg); -moz-transform: rotate(75.6deg); -ms-transform: rotate(75.6deg); -o-transform: rotate(75.6deg); transform: rotate(75.6deg); } .pie.p22 .bar { -webkit-transform: rotate(79.2deg); -moz-transform: rotate(79.2deg); -ms-transform: rotate(79.2deg); -o-transform: rotate(79.2deg); transform: rotate(79.2deg); } .pie.p23 .bar { -webkit-transform: rotate(82.8deg); -moz-transform: rotate(82.8deg); -ms-transform: rotate(82.8deg); -o-transform: rotate(82.8deg); transform: rotate(82.8deg); } .pie.p24 .bar { -webkit-transform: rotate(86.4deg); -moz-transform: rotate(86.4deg); -ms-transform: rotate(86.4deg); -o-transform: rotate(86.4deg); transform: rotate(86.4deg); } .pie.p25 .bar { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .pie.p26 .bar { -webkit-transform: rotate(93.6deg); -moz-transform: rotate(93.6deg); -ms-transform: rotate(93.6deg); -o-transform: rotate(93.6deg); transform: rotate(93.6deg); } .pie.p27 .bar { -webkit-transform: rotate(97.2deg); -moz-transform: rotate(97.2deg); -ms-transform: rotate(97.2deg); -o-transform: rotate(97.2deg); transform: rotate(97.2deg); } .pie.p28 .bar { -webkit-transform: rotate(100.8deg); -moz-transform: rotate(100.8deg); -ms-transform: rotate(100.8deg); -o-transform: rotate(100.8deg); transform: rotate(100.8deg); } .pie.p29 .bar { -webkit-transform: rotate(104.4deg); -moz-transform: rotate(104.4deg); -ms-transform: rotate(104.4deg); -o-transform: rotate(104.4deg); transform: rotate(104.4deg); } .pie.p30 .bar { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .pie.p31 .bar { -webkit-transform: rotate(111.6deg); -moz-transform: rotate(111.6deg); -ms-transform: rotate(111.6deg); -o-transform: rotate(111.6deg); transform: rotate(111.6deg); } .pie.p32 .bar { -webkit-transform: rotate(115.2deg); -moz-transform: rotate(115.2deg); -ms-transform: rotate(115.2deg); -o-transform: rotate(115.2deg); transform: rotate(115.2deg); } .pie.p33 .bar { -webkit-transform: rotate(118.8deg); -moz-transform: rotate(118.8deg); -ms-transform: rotate(118.8deg); -o-transform: rotate(118.8deg); transform: rotate(118.8deg); } .pie.p34 .bar { -webkit-transform: rotate(122.4deg); -moz-transform: rotate(122.4deg); -ms-transform: rotate(122.4deg); -o-transform: rotate(122.4deg); transform: rotate(122.4deg); } .pie.p35 .bar { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -ms-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); } .pie.p36 .bar { -webkit-transform: rotate(129.6deg); -moz-transform: rotate(129.6deg); -ms-transform: rotate(129.6deg); -o-transform: rotate(129.6deg); transform: rotate(129.6deg); } .pie.p37 .bar { -webkit-transform: rotate(133.2deg); -moz-transform: rotate(133.2deg); -ms-transform: rotate(133.2deg); -o-transform: rotate(133.2deg); transform: rotate(133.2deg); } .pie.p38 .bar { -webkit-transform: rotate(136.8deg); -moz-transform: rotate(136.8deg); -ms-transform: rotate(136.8deg); -o-transform: rotate(136.8deg); transform: rotate(136.8deg); } .pie.p39 .bar { -webkit-transform: rotate(140.4deg); -moz-transform: rotate(140.4deg); -ms-transform: rotate(140.4deg); -o-transform: rotate(140.4deg); transform: rotate(140.4deg); } .pie.p40 .bar { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); } .pie.p41 .bar { -webkit-transform: rotate(147.6deg); -moz-transform: rotate(147.6deg); -ms-transform: rotate(147.6deg); -o-transform: rotate(147.6deg); transform: rotate(147.6deg); } .pie.p42 .bar { -webkit-transform: rotate(151.2deg); -moz-transform: rotate(151.2deg); -ms-transform: rotate(151.2deg); -o-transform: rotate(151.2deg); transform: rotate(151.2deg); } .pie.p43 .bar { -webkit-transform: rotate(154.8deg); -moz-transform: rotate(154.8deg); -ms-transform: rotate(154.8deg); -o-transform: rotate(154.8deg); transform: rotate(154.8deg); } .pie.p44 .bar { -webkit-transform: rotate(158.4deg); -moz-transform: rotate(158.4deg); -ms-transform: rotate(158.4deg); -o-transform: rotate(158.4deg); transform: rotate(158.4deg); } .pie.p45 .bar { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .pie.p46 .bar { -webkit-transform: rotate(165.6deg); -moz-transform: rotate(165.6deg); -ms-transform: rotate(165.6deg); -o-transform: rotate(165.6deg); transform: rotate(165.6deg); } .pie.p47 .bar { -webkit-transform: rotate(169.2deg); -moz-transform: rotate(169.2deg); -ms-transform: rotate(169.2deg); -o-transform: rotate(169.2deg); transform: rotate(169.2deg); } .pie.p48 .bar { -webkit-transform: rotate(172.8deg); -moz-transform: rotate(172.8deg); -ms-transform: rotate(172.8deg); -o-transform: rotate(172.8deg); transform: rotate(172.8deg); } .pie.p49 .bar { -webkit-transform: rotate(176.4deg); -moz-transform: rotate(176.4deg); -ms-transform: rotate(176.4deg); -o-transform: rotate(176.4deg); transform: rotate(176.4deg); } .pie.p50 .bar { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie.p51 .bar { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg); } .pie.p52 .bar { -webkit-transform: rotate(187.2deg); -moz-transform: rotate(187.2deg); -ms-transform: rotate(187.2deg); -o-transform: rotate(187.2deg); transform: rotate(187.2deg); } .pie.p53 .bar { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg); } .pie.p54 .bar { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg); } .pie.p55 .bar { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); } .pie.p56 .bar { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg); } .pie.p57 .bar { -webkit-transform: rotate(205.2deg); -moz-transform: rotate(205.2deg); -ms-transform: rotate(205.2deg); -o-transform: rotate(205.2deg); transform: rotate(205.2deg); } .pie.p58 .bar { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg); } .pie.p59 .bar { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg); } .pie.p60 .bar { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .pie.p61 .bar { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg); } .pie.p62 .bar { -webkit-transform: rotate(223.2deg); -moz-transform: rotate(223.2deg); -ms-transform: rotate(223.2deg); -o-transform: rotate(223.2deg); transform: rotate(223.2deg); } .pie.p63 .bar { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg); } .pie.p64 .bar { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg); } .pie.p65 .bar { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); } .pie.p66 .bar { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg); } .pie.p67 .bar { -webkit-transform: rotate(241.2deg); -moz-transform: rotate(241.2deg); -ms-transform: rotate(241.2deg); -o-transform: rotate(241.2deg); transform: rotate(241.2deg); } .pie.p68 .bar { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg); } .pie.p69 .bar { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg); } .pie.p70 .bar { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); } .pie.p71 .bar { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg); } .pie.p72 .bar { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg); } .pie.p73 .bar { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg); } .pie.p74 .bar { -webkit-transform: rotate(266.4deg); -moz-transform: rotate(266.4deg); -ms-transform: rotate(266.4deg); -o-transform: rotate(266.4deg); transform: rotate(266.4deg); } .pie.p75 .bar { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .pie.p76 .bar { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg); } .pie.p77 .bar { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg); } .pie.p78 .bar { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg); } .pie.p79 .bar { -webkit-transform: rotate(284.4deg); -moz-transform: rotate(284.4deg); -ms-transform: rotate(284.4deg); -o-transform: rotate(284.4deg); transform: rotate(284.4deg); } .pie.p80 .bar { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); } .pie.p81 .bar { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg); } .pie.p82 .bar { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg); } .pie.p83 .bar { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg); } .pie.p84 .bar { -webkit-transform: rotate(302.4deg); -moz-transform: rotate(302.4deg); -ms-transform: rotate(302.4deg); -o-transform: rotate(302.4deg); transform: rotate(302.4deg); } .pie.p85 .bar { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); } .pie.p86 .bar { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg); } .pie.p87 .bar { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg); } .pie.p88 .bar { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg); } .pie.p89 .bar { -webkit-transform: rotate(320.4deg); -moz-transform: rotate(320.4deg); -ms-transform: rotate(320.4deg); -o-transform: rotate(320.4deg); transform: rotate(320.4deg); } .pie.p90 .bar { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .pie.p91 .bar { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg); } .pie.p92 .bar { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg); } .pie.p93 .bar { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg); } .pie.p94 .bar { -webkit-transform: rotate(338.4deg); -moz-transform: rotate(338.4deg); -ms-transform: rotate(338.4deg); -o-transform: rotate(338.4deg); transform: rotate(338.4deg); } .pie.p95 .bar { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); } .pie.p96 .bar { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg); } .pie.p97 .bar { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg); } .pie.p98 .bar { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg); } .pie.p99 .bar { -webkit-transform: rotate(356.4deg); -moz-transform: rotate(356.4deg); -ms-transform: rotate(356.4deg); -o-transform: rotate(356.4deg); transform: rotate(356.4deg); } .pie.p100 .bar { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } /* C L E A R ------------------------------------------------------------------------------------------- */ .clear { clear: both; } .container-clear { clear: both; } .header-clear {} .content-clear {} .footer-clear {}