/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

iframe#paymentFrame {
  padding: 0;
  width: 750px;
  height: 1110px;
  border: none;
}

div.paymentFrame {
  position: relative;
}

div.paymentFrame div {
  position: absolute;
  top: 110px;
  left: 240px;
}

/* ==========================================================================
   Author's custom styles
   fonts: http://fonts.sonymobile.com/
   ========================================================================== */
@font-face {
  font-family: 'SSTProRoman';
  src: url('/fonts/sst-roman.eot'); /* IE9 Compat Modes */
  src: url('/fonts/sst-roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/fonts/sst-roman.woff') format('woff'), /* Pretty Modern Browsers */
  url('/fonts/sst-roman.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'SSTProLight';
  src: url('/fonts/sst-light.eot'); /* IE9 Compat Modes */
  src: url('/fonts/sst-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/fonts/sst-light.woff') format('woff'), /* Pretty Modern Browsers */
  url('/fonts/sst-light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.fa {
  outline: none;
}
a {
  text-decoration: underline;
  color: rgb(51, 51, 51);
  cursor: pointer;
}
a.action {
  color: #3498db;
}
body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  font-size:16px;
  margin:0;
}
.container, .mainContainer {
  max-width: 1104px;
  padding: 0 20px;
  margin: 0 auto;
  font-family: "SSTProRoman"  
}
.userMenu .container {
  margin: 0 0 30px;
}
.authenticated .mainContainer {
  margin: 0 auto 30px;
}
.profile .container {
  margin: 0 auto 30px 0;
  padding: 0;
}
h1, h2, h3 {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 46px;
}
h2 {
  font-size: 26px;
  font-weight: normal;
  margin-bottom: 20px;
}
h3 {
  font-size: 16px;
  margin-bottom: 4px;
  color:#000;
  margin-bottom: 10px;
  text-transform: uppercase;
}
h3 span {
  font-weight: normal;
}
h3.info {
  background-color: #296b73;
  color: white;
  padding: 20px 30px;
  font-weight: normal;
  font-size:22px;
  margin-bottom:30px;
}
h4 {
  text-transform: uppercase;
  border-bottom: 1px solid rgb(131,131,143);
  color: rgb(131,131,143);
  padding-bottom: 4px;
  text-align: left;
}
.membership, .requirements {
  color: #7f7f7f;
}
.membership p {
  font-size: 20px;
  margin-right: 100px;
}
.membership h2, .membership h4, .requirements h2 {
  color: #f05a23;
  border-bottom: none;
  text-transform: none;
}
header {
  background-color: #000;
  line-height: 68px;
}
.sonyIntro {
  width: 100%;
  font-size: 18px;
  max-width: none;
  background: #000 url(/images/psp-banner-2021-lg.jpg) top right no-repeat;
  background-size: contain;
  color: white;
  padding: 100px 0;
}
header.authenticated .mainContainer {
  margin: 0;
}
section {
  padding: 50px 0 70px;  
}
.sonyIntro h3 {
  font-size: 24px;
  font-family: "SSTProLight";
  font-weight: normal;
  color:#fff;
}
.mainWindow {
  position: relative;
}
.menu.ng-enter {
  background-color: red;
  transition: 2s linear all;
  opacity: 0;
}
.menu, .mainContent {
  display: inline;
}
.menu {
  width: 250px;
  float: left;
  height: 100%;
}
.mainContent {
  width: 100%;
  left: 0;
  position: absolute;
  z-index: 5;
  background-color: white;
}
.userMenu .mainBody {
  margin-left: 290px;
  margin-top: 55px;
  min-height: 500px;
}
.terms h3 {
  color: #1f2024;
  margin: 10px 0 0;
}
.schedule {
  margin-top:40px;
}
.terms table p, .terms ol p, .schedule p {
  margin: 0;
}
.terms ol, .terms ol > li {
  margin-bottom: 10px;
}
.terms .container > ol > li::marker {
  font-weight: bold; 
  font-size: 16px
}
.terms ol ol {
  list-style-type: lower-alpha;
}
.terms ol ol ol {
  list-style-type: decimal;
}
  .terms ol ol ol ol {
    list-style-type: lower-roman;
  }

/***
  NAV
***/
.proSupport {
  display: none;
}
.menu.loading, .loading nav  {
  display: none;
}
nav .fa-bars {
  display: none;
}
.titleBar, .userInfo {
  display: none;
}
.userMenu .titleBar {
  display: block;
  text-align: right;
  background-color: black;
  color: white;
  border-bottom: 1px solid #000;
}
.titleBar .button {
  margin-left: 15px;
}
.user {
  display: none;
}
.userMenu .user {
  display: block;
}
.userMenu .public {
  display: none;
}
.userMenu .logout {
  display: none;
}
.userMenu nav {
  color: rgb(138,138,138);
  background-color: transparent;
  height:auto;
}
.userMenu nav .menuContainer {
  position:absolute;
  width: 250px;
  margin-top:60px;
  padding-left: 20px;
  border-right: 1px solid #4f4f4f;
}
.userMenu nav ul {
  padding: 0 20px;
  margin: 0;
  list-style: none;
  height: auto;
}
.userMenu nav ul li {
  padding: 0 20px 10px;
  height: auto;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  float: none;
  width: 220px;
  text-transform: uppercase;
}
.userMenu nav ul li .fa {
  padding: 0 10px;
  display: inline-block;
}
.userMenu nav ul li.active, .userMenu nav ul li:hover:not(.title) {
  color: #000;
}
.contact p .fa, .contact strong {
  margin-right: 20px;
}
.contact h4 {
  border-bottom: none;
}
.sonyscene a.button {
  margin-right: 20px;
}
.user.title, .statusButton {
  background-color: rgb(102,102,102);
  color: white;
}
nav, .nav {
  background-color: #3b3b3b;
  color: #bababa;
  height: 95px;
}
nav ul, .menubar ul {
  padding: 0;
  margin: 0;
  height: 95px;
  list-style: none;
  /*border-left: 2px solid #545454;*/
}
nav ul li {
  float: left;
  width: 138px;
  padding-top: 25px;
  height: 70px;
  border-right: 2px solid #545454;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.userMenu nav ul li {
  text-align: left;
  border-right: none;
}
nav ul li .fa {
  display: block;
  margin-bottom: 10px;
}
nav ul li.active, nav ul li:hover, .menubar ul li.active, .menubar ul li:hover {
  background-color: white;
  color: #f05a23
}
.userMenu nav ul li.active, .userMenu nav ul li:hover {
  background-color: transparent;
}
nav .fa-bars, .mobile {
  display: none;
}
/***
 END NAV
***/

.slides {
  width:100%;
}
.slideContainer {
  width: 100%;
  white-space: nowrap;
}
.slide {
  width: 33.333%;
  display: inline-block
}
.slide img {
  width: 100%;
}
.light {
  background-color: #f1f5f9;
  padding: 50px 0 70px;
}
.resp {
  width: 100%;
}
.col-4 {
  float: left;
  width: 21%;
  margin-left: 2%;
  padding-left:2%;
  min-height: 530px;
}
.membership .col-4 {
  border-left: 1px solid #f05a23;
}
.requirements .col-4 {
  padding-left: 0;
  margin-left: 4%;
}
.col-4:first-of-type {
  margin-left: 0;
}
.membership .col-4:first-of-type {
  border: none;
  padding-left: 0;
}
.col-4 > img {
  max-width: 100%;
}
.col-3 {
  float: left;
  width: 31%;
  margin-left: 2%;
}
.col-3:first-of-type {
  margin-right: 2%;
  margin-left: 0;
}
.col-3 > img {
  max-width: 100%;
}
.col-2 {
  float: left;
  width: 46%;
  margin-left: 8%;
}
.col-2.col-right {
  float: right;
}
.col-2:first-of-type, .col-2.aboutProSupport {
  margin-left: 0;
}
.col-2 .orangeBox, .col-2 .greyBox {
  margin-left: 2%;
}
.aboutProSupport h2 {
  text-align: left;
  margin-top: 44px;
}
.button {
  text-align: center;
  color: white;
  display: inline-block;
  background-color: #f05a23;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.notice .button {
  margin-left: 50px;
  background-color: white;
  color: #f05a23;
}
.notice p {
  float: left;
}
.orangeBox, .notice {
  background-color: #f05a23;
  padding: 44px 48px 32px;
  color: white;
}
.notice {
  margin-bottom: 0;
  padding-left: 290px;
}
  .notice.maintenance {
    padding:10px 100px 10px 290px;
  }
  .notice.maintenance p {
    max-width: 800px;
    float: none;
  }
.orangeBox h2 {
  border-bottom: 1px solid white;
  color: white;
  padding-bottom: 4px;
  text-align: left;
}
.orangeBox input {
  color: #1f2024;
}
.orangeBox a {
  color: white;
}
.fullwidth.button {
  width: 100%;
  padding-left:0;
  padding-right: 0;
  margin-bottom: 5px;
}
.greyBox {
  background-color: #dedede;
  padding: 20px 40px;
}
.greyBox h2 {
  border-bottom: 1px solid #000;
  padding: 24px 0 4px;
  text-align: left;
}
.apply {
  border: 1px solid #f05a23;
  height: 280px;
  min-height: 280px;
}
.apply .step {
  font-size: 14px;
}
.step1 {
  background: url(/images/step1.png) no-repeat center 20px;
}
.step2 {
  background: url(/images/benefits/Picture1.png) no-repeat center 20px;
  background-size:165px 165px;
}
.step3 {
  background: url(/images/step3.png) no-repeat center 20px;
}
.step4 {
  background: url(/images/step4.png) no-repeat center 20px;
}
.apply span {
  font-size: 20px;
  line-height: 50px;
  float: left;
  height: 180px;
  width: 100%;
  color: #f05a23;
  margin: 15px 0 0 15px;
  display: block;
}
.apply p {
  padding: 0;
  margin: 0;
  text-align: center;
}
#footer-lg {
        background-color: #1f2024;
        color: #e8edf3;
        font-size: 13px;
        line-height: 20px;
        padding: 40px 0 20px 0;
    }
    
    #footer-lg .container .row > div {
        padding: 0;
    }
    
    #footer-lg .main-links {
        padding-bottom: 74px;
    }
    
    #footer-lg h4 {
        color: #83838f;
        padding: 10px 0 3px 0;
        border-top: none;
        font-size:18px;
    }
    
    #footer-lg a {
        color: #e8edf3;
        text-decoration: none;
    }
    
    #footer-lg a.soc-icon {
        display: inline-block;
        background-color: #3c3c42;
    }
    
    #footer-lg ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #footer-lg a:hover {
        color: #83838f;
        -webkit-transition: background-color 0.25s linear, border-color 0.25s linear, opacity 0.25s linear, color 0.25s linear, fill 0.25s linear;
        transition: background-color 0.25s linear, border-color 0.25s linear, opacity 0.25s linear, color 0.25s linear, fill 0.25s linear;
    }
    
    #footer-lg .row {
        margin: 0 auto;
    }
    
    #footer-lg .footer-caret {
        display: none;
    }
    
    #footer-lg .other-links ul {
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 5px;
    }
    
    #footer-lg .other-links ul li {
        display: inline-block;
    }
    #footer-lg .other-links {
      text-align: right;
      margin-bottom: 20px;
    }
    #footer-lg .other-links .contact-links li {
        padding: 0 5px;
    }
    
    a#fb-icon:hover {
        background-color: #3b5b99;
        transition: background 300ms;
        -moz-transition: background 300ms;
        -webkit-transition: background 300ms;
        -o-transition: background 300ms;
    }
    
    a#yt-icon:hover {
        background-color: #e64a41;
        transition: background 300ms;
        -moz-transition: background 300ms;
        -webkit-transition: background 300ms;
        -o-transition: background 300ms;
    }
    
    a#ig-icon:hover {
        background-color: #1b5980;
        transition: background 300ms;
        -moz-transition: background 300ms;
        -webkit-transition: background 300ms;
        -o-transition: background 300ms;
    }
    /* footer */
    
    .footer {
        margin-top: 0.9375em;
        padding-top: 1.75em;
        border-top: solid 1px #3c3c42;
        padding-bottom: 28px;
    }
    
    .footer {
        background-color: #1f2024;
        color: #e4e7eb;
        margin-top: 0;
        min-height: 80px;
        height: auto;
        clear: both;
        z-index: 10;
    }
    
    .footer p {
        margin: 0;
        padding: 0;
        font-size: 0.625em;
        color: #83838f;
        clear: left;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    
    .footer .links ul {
        margin: 0 0 5px;
        float: left;
        padding-left: 0;
    }
    
    .footer .links ul li {
        display: inline;
        float: left;
        margin: 0 8px 3px 0;
        text-transform: uppercase;
        color: #e4e7eb;
        font-size: 0.625em;
    }
    
    .footer .links ul li a {
        color: #B7B7B7;
        display: block;
        font-size: 11px;
        line-height: 10px;
    }
.field {
  margin-bottom: 25px;
  clear: right;
  height: 36px
}
.subform .field {
  margin-bottom: 0;
}
.formly-field-multiSelect .field {
  height: auto;
}
.formly-field-product .field input {
  width: 75%
}
.formly-field-recaptcha {
  height:78px;
  margin-bottom: 20px;
}
.formly-field-address .field {
  height: auto;
}
.contactform {
  background-color: red;
}
.contactform .formly-field {
  float: left;
}
.formly-field-contact-select {
  width: 29%;
}
.formly-field-contact-input {
  width: 70%;
}
.field .formly-field-contact-select select, .field .formly-field-contact-input input {
  width: 96%;
}
.formly-field-nolabel-checkbox {
  margin-bottom: 10px;
}
.field label {
  display: inline-block;
  margin-top: 5px;
  color: rgb(131,131,143);
  font-size: 16px;
  font-weight: bold;
  max-width: 27%;
}
.orangeBox .field label {
  color:white;
}
.field .sublabel {
  display: block;
  font-size: 12px;
}
.fieldContainer {
  width: 70%;
  margin: 0 0 3px;
  float: right;
}
.textContainer {
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(131,131,143);
  clear: right;
}
.checklabel, .checklabel a, .field label.checklabel {
  color: rgb(131,131,143);
  max-width: none;
}
.field input, .field select, textarea {
  border: 1px solid rgb(238,238,238);
  border-radius:2px;
  outline-color:rgb(215,217,220);
}
.field input:focus, .field select:focus, textarea:focus {
  outline:none !important;
  border:1px solid rgb(215,217,220);
}
.field input {
  padding: 8px 1% 8px 3%;
  width: 96%;
}
textarea {
  padding: 8px 1% 8px 3%;
  display: block;
  width: 96%;
  height: 120px;
}
.field select {
  padding: 8px 1% 8px 3%;
  width: 65%;
}
.title .field select{
  width: 25%;
}
.field input[type="checkbox"] {
  width: auto;
} 
.full .field, .nomargin .field {
  margin: 0;
}
.full .field input {
  width: 96%;
  margin: 0;
}
.city, .postcode {
  float: left;
  width: 48%;
}
.postcode {
  margin-left: 1%;
  width: 25%;
}
.city input, .postcode input, .postcode select {
  width: 96%;
}
.ngErrors {
  font-size: 12px;
  clear: right;
  color: #f05a23;
  margin-bottom: 10px;
}
.orangeBox .ngErrors {
  color: white;
}
.subform {
  display: block;
}
.subform .field {
  height: auto;
}
.subform label {
  display: none;
}
.subform .fieldContainer {
  width: 100%;
}
.smallText {
  font-size: 12px;
}
.newLine:after {
  content: "\A";
  white-space: pre;
}
.product {
  width: 30%;
  margin-left: 5%;
  margin-bottom:20px;
  float:left;
}
.productImage {
  position: relative;
  width: 100%;
  overflow:hidden;
}
.productImage > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top:25%;
  color: #FFF;
  display: block;
  background: rgba(0, 0, 0, .6);
  text-align:center;
  text-transform:uppercase;
  font-size:24px;
}
.productImage > div.inMaintenance {
  padding-top: 17%;
}
.product img {
  width: 100%;
  height: 133px;
}
.product:nth-child(3n+1) {
  margin-left:0;
}
.product p {
  margin:0 0 8px;
}
.product .serialNumber {
  font-size: 14px;
}
.product button {
  float: none;
  width: 100%;
  margin-bottom: 10px;
}
.products {
  margin-bottom: 30px;
  max-width: 660px;
}
.products .register h3, .dropform h3 {
  background-color: #f05a23;
  color: white;
  padding: 15px 25px;
  margin: 0;
}
.products .register h3 .fa, .dropform h3 .fa {
  float: right;
  font-size: 24px;
}
  .products .register h3:focus, .dropform h3:focus {
    outline:none;
  }
.productform {
  background-color: rgb(228, 232, 237);
  padding: 15px 30px;
  display: block;
  margin-bottom: 10px;
  color: rgb(131,131,143);
}
button {
  float: right;
  clear: right;
  background-color: #5787f4;
  color: white;
  padding: 9px 27px;
  border: none;
  cursor: pointer;
}
.orangeBox button[type="submit"], .centerButton {
  float: none;
  display: block;
  margin: 0 auto;
}
.orangeBox p {
  text-align: center;
}
.register h1 {
  text-align: center;
  margin-bottom:30px;
  max-width: 750px;
  padding: 0 10%;
}
.registerBox {
  background-color: rgb(241, 245, 249);
  padding: 60px 10% 100px;
  max-width: 750px;
}
.products .registerBox, .dropform .registerBox {
  max-width: none;
}
.registerBox .fa {
  font-size: 60px;
  text-align: center;
}
.registerBox.content {
  padding: 60px 30% 100px;
}
.registerBox h2 {
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
  text-align: left;
}
.registerBox.content h2 {
  border: none;
  text-align: center;
}
.registerStep {
  text-align:center;
  margin-bottom:30px;
  max-width: 750px;
  padding: 0 10%;
}
.registerStep img {
  max-width: 100%;
}
sony-button button {
  float: right;
  clear: right;
  color: white;
  border: none;
  background-color: rgb(237,142,69);
  padding: 0 0 0 20px;
  text-transform: uppercase;
  font-size: 24px;
}
sony-button.goBack button {
  float: left;
  padding: 0 20px 0 0;
}

sony-button button:hover {
  background-color:  #f05a23;
}
.registerBox sony-button .fa {
  background-color: #f05a23;
  font-size: 24px;
  padding: 10px;
  margin-left: 20px;
}
.registerBox sony-button.goBack .fa {
  margin: 0 20px 0 0;
}
.registerBox .fa-question-circle, .registerBox .fa-calendar {
  font-size: 32px;
  margin-left: 20px;
  position: relative;
  top: 7px;
  cursor: pointer;
  color:rgb(131,131,143);
}
.helpBox {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
}
.helpBox .container {
  background-color: white;
  position: fixed; 
  width: 80%;
  max-width: 600px;
  padding: 30px 20px;
  top: 40%;
  left: 20%;
}
.person {
  color: #4f4f4f;
  margin: 0 20px 20px 20px;
  padding-bottom: 20px;
  position: relative;
  display: none;
}
.userMenu .person {
  display: block;
}
.personIcon {
  color: rgb(171,171,171);
  background-color: rgb(235,235,235);
  width:92px;
  height: 92px;
  border-radius: 46px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  font-size: 65px;
  z-index: 1;
  cursor: pointer;
}
.photoIcon {
  width:92px;
  height: 92px;
  border-radius: 46px;
  background-repeat: no-repeat;
  background-size: cover;
}
.person h2, .summary h2 {
  color: #000;
  text-align: left;
  margin-bottom: 0;
  font-size:18px;
}
.person p {
  margin: 0;
  font-size:14px
}
.editProfile {
  max-width: 600px;
}
.profile {
  padding-top: 0;
}
.profile > div.container
{
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgb(235,235,235);
}
.profile.dashboard .fa {
  margin-right: 10px;
}
.profile, .profile a {
  color: #000;
}
.profile h2, .contactInfo h2 {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
}
.greyButton {
  float: none;
  background-color: rgb(235,235,235);
  color: #83838f;
  padding: 5px 15px;
  margin: 25px 20px 25px 0;
  text-transform: uppercase;
  font-size: 18px;
}
.greyButton .fa {
  font-size:18px;
}
.profile.dashboard span[role=button] {
  font-weight: normal;
  cursor: pointer;
  background-color: rgb(235,235,235);
  display: inline-block;
  color: #83838f;
  padding: 5px 15px;
  margin: 5px 20px 0 0;
  text-transform: uppercase;
}
.profile span a {
  color: #83838f;
  text-decoration: none;
}
.profile p {
  padding: 0;
  margin: 0;
}
.summary {
  height: 80px;
  padding: 20px 0 40px;
}
.summary > div {
  width: 180px;
  height: 60px;
  padding: 10px 20px;
  float: left;
  text-align: center;
  color: white;
  cursor: pointer;
}
.summary .registered {
  background-color: rgb(15,45,64);
}
.summary .repairs {
  background-color: rgb(25,71,89);
}
.summary .cleans {
  background-color: rgb(41,107,115);
}
.summary .edit {
  background-color: rgb(62,140,132);
  display: none;
}
.summary i {
  display: block;
  font-size: 46px;
  margin-top: 10px;
  float: left;
}
.summary span {
  font-size: 24px;
}
.summary p {
  margin: 0;
}
.slide-toggle {
  overflow: hidden;
  transition: all .5s; 
}
table { 
  width: 100%; 
  border-collapse: collapse; 
  margin-bottom: 30px;
}
thead tr {
  background-color: rgb(240,240,240);
  font-weight: bold;
}
tr:nth-of-type(even) { 
  background: rgb(249,249,249); 
}
td, th { 
  padding: 6px; 
  border: 1px solid #fff; 
  text-align: left; 
  color: black;
}
#overlay, #yesnooverlay {
    position: fixed;
    left: 25%;
    top: 15%;
    padding: 25px;
    border: 2px solid black;
    background-color: #ffffff;
    width: 50%;
    max-height: 65%;
    z-index: 100;
    overflow-y:scroll;
}
#overlay img {
  max-width:100%;
}
#overlay button {
  margin-top: 20px;
}
#overlay.jobDetails div:first-child {
  font-weight: bold;
}
#overlay.jobDetails label{
  font-weight: normal;
}
#overlay.jobDetails .sel-thumb {
  float: none;
  border: none;
}
#yesnooverlay {
  text-align: center;
}
#yesnooverlay button {
  float: none;
  width: 95px;
  margin: 0 10px;
}
#yesnooverlay button.cancel {
  background-color: rgb(166,167,167)
}
#fade {
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: black;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 90;
}

#custom-modal.ng-enter {
  transition: opacity .5s ease-out;
  opacity: 0;
}
#custom-modal.ng-enter.ng-enter-active {
  opacity: 1;
}
#custom-modal.ng-leave {
  transition: opacity .5s ease-out;
  opacity: 1;
}
#custom-modal.ng-leave.ng-leave-active {
  opacity: 0;
}
.field input.ng-datepicker-input {
  width:50%;
}
.ng-datepicker {
	position: absolute;
	z-index: 9999;
	width: 250px;
	background: #fff;
	font-size: 12px;
	color: #565a5c;
	display: inline-block;
	border: 1px solid #c4c4c4;
	border-radius: 2px;
	margin: 0;
	padding: 0;
}

.ng-datepicker > .controls {
	width: 250px;
	display: inline-block;
	padding: 5px 0 0 0;
}

.ng-datepicker > .controls i {
	font-size: 25px;
	cursor: pointer;
}

.ng-datepicker > .controls > .left {
	width: 35px;
	display: inline-block;
	float: left;
	margin: 5px 0 0 3px;
}

.ng-datepicker > .controls > .left > i.prev-year-btn {
	float: left;
	display: block;
	font-size: 14px;
	opacity: 0.4;
}

.ng-datepicker > .controls > .left > i.prev-month-btn {
	float: left;
	margin: -5px 0 0 9px;
	display: block;
}

.ng-datepicker > .controls > span.date {
	width: 170px;
	text-align: center;
	font-size: 14px;
	color: #565a5c;
	font-weight: bold;
	float: left;
	padding: 3px 0 0 0;
}

.ng-datepicker > .controls > .right {
	width: 35px;
	display: inline-block;
	float: right;
	margin: 5px 0 0 0;
}

.ng-datepicker > .controls > .right > i.next-year-btn {
	float: left;
	display: block;
	font-size: 14px;
	opacity: 0.4;
}

.ng-datepicker > .controls > .right > i.next-month-btn {
	float: left;
	margin: -6px 9px 0 0;
}

.ng-datepicker > .day-names {
	width: 250px;
	border-bottom: 1px solid #c4c4c4;
	display: inline-block;
}

.ng-datepicker > .day-names > span {
	width: 35.7px;
	text-align: center;
	color: #82888a;
	float: left;
	display: block;
}

.ng-datepicker > .calendar {
	width: 255px;
	display: inline-block;
	margin: -3px 0 -4px -1px;
	padding: 0;
}

.ng-datepicker > .calendar > span > span.day {
	width: 35px;
	height: 35px;
	border-left: 1px solid #c4c4c4;
	border-bottom: 1px solid #c4c4c4;
	float: left;
	display: block;
	color: #565a5c;
	text-align: center;
	font-weight: bold;
	line-height: 35px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	cursor: pointer;
}

.ng-datepicker > .calendar > span:last-child > span.day {
	border-right: 1px solid #c4c4c4;
}

.ng-datepicker > .calendar > span > span.day.blank {
	border-left: 1px solid transparent;
}
.ng-datepicker > .calendar > span > span.day.disabled {
	cursor: default;
	pointer-events: none;
  color: rgba(86,90,92, 0.6)
}

.ng-datepicker > .calendar > span > span.day:hover {
	background: #ff5c5b;
	color: #fff;
}
.drop-box {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  text-align: center;
  padding: 5px;
  margin: 4px 0px;
  display: inline-block;
  width: 100px;
}
.drop-box:focus {
  outline: none;
}
.progress {
  line-height: 15px;
  display: inline-block;
  width: 100px;
  border: 3px groove #CCC;
}
.progress div {
  font-size: smaller;
  background: orange;
  width: 0;
}
.findmore {
  display: none;
}
#benefits ul {
  padding-left: 20px;
}
.helptext, .helptext .fa, .helptext a {
  font-size: 12px;
  font-style: italic;
  color: rgb(131,131,143);
}
.helpText, .helpText .fa, .helpText a {
  font-size: 14px;
  color: rgb(52,152,219);
}
.sel-thumb {
  float: left;
  background: #F8F8F8;
  border: 5px dashed #DDD;
  height: 80px;
  min-width: 50px;
  width: auto;
  text-align: center;
  padding: 0px;
  margin: 0px 20px 0px 20px;
}

.sel-file {
  list-style: none;
  font-size: 14px;
  color: #777;
}
/* ==========================================================================
   application styles
   ========================================================================== */
/* ==========================================================================
   COLOURS
   user name: 147,147,147
   text: 217,217,217
   user icon background: 235,235,235
   user icon, registered products back 171,171,171
   repairs pending back: 199,199,199
   free cleans back: 222,222,222,
   Your profile: 139,139,150
   profile text: 134,134,146
   button back: 205,205,204
   blue button back:52,152,219 
   button text: 138,138,138
   logout: 2322,117,51
   ========================================================================== */
/* adapted from https://github.com/lifelynl/angular-carousel  */
.carousel-arrow button {
  background-color: transparent;
  color: white;
  border: none;
  font-size: 46px;
  top:-22px;
  position: relative;
}
.ng-carousel {
  display: block;
  width: 100%;
  /*height: 300px;*/
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.ng-carousel slidecontainer {
  display: block;
  /*position: absolute;
  top: 0;
  width: 100%;
  height: 100%;*/
  z-index: 1;
  font-size: 0;
}
.ng-carousel slidecontainer.carousel-ignore-first-slide {
  -webkit-transform: translate(-33.33%, 0);
  -moz-transform: translate(-33.33%, 0);
  -o-transform: translate(-33.33%, 0);
  -ms-transform: translate(-33.33%, 0);
  transform: translate(-33.33%, 0);
}
.ng-carousel slidecontainer.carousel-animate {
  -webkit-transition: -webkit-transform 0.5s ease-out 0s;
  -moz-transition: -moz-transform 0.5s ease-out 0s;
  -ms-transition: -ms-transform 0.5s ease-out 0s;
  -o-transition: -o-transform 0.5s ease-out 0s;
  transition: transform 0.5s ease-out 0s;
}
.ng-carousel slide {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  width: 33.33%;
}
.ng-carousel slide img {
  width: 100%;
}
.ng-carousel .carousel-arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 100px;
  text-align: center;
}
.ng-carousel .carousel-arrow.carousel-arrow-left {
  left: 0;
}
.ng-carousel .carousel-arrow.carousel-arrow-right {
  right: 0;
}

 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
 [type="checkbox"]:not(:checked) + label,
 [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  text-align: left;
}
.formly-field-nolabel-checkbox {
  height:50px
}
.formly-field-nolabel-checkbox [type="checkbox"]:not(:checked) + label,
.formly-field-nolabel-checkbox [type="checkbox"]:checked + label {
  float: left;
}

/* checkbox aspect */
 [type="checkbox"]:not(:checked) + label:before,
 [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 3px;
  border:2px solid rgb(205,204,204);
}
/* checked mark aspect */
 [type="checkbox"]:not(:checked) + label:after,
 [type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: -10px; left: 4px;
  font-size: 24px;
  color: rgb(205,204,204);
  transition: all .2s;
}
/* checked mark aspect changes */
 [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
 [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
 [type="checkbox"]:disabled:not(:checked) + label:before,
 [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
 [type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
 [type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
 [type="checkbox"]:checked:focus + label:before,
 [type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted rgb(205,204,204);
}
/* Loading Animation */

#loading {
  top: 50%;
  left: 50%;
  position: fixed;
  z-index: 100000;
}

#loading:before {
  position: fixed;
  z-index: 100001;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";
  filter: alpha(opacity=0.2);
  opacity: 0.2;
  background-color: #000000;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 1200px) {
  .sonyIntro {
    background-size:cover;
  }
}
@media only screen and (max-width: 750px) {
  .sonyIntro {
    background: #ccc url(/images/psp-banner-2021-sm.jpg) top right no-repeat;
    background-size: cover;
    padding: 70px 0 30px;
    min-height: 100px;
    display: none;
  }
  sony-header {
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0;
  }
  sony-nav, .userMenu .menu, .public .menu  {
    position: fixed;
    width: 100%;
    top: 68px;
    background-color: #fff;
    z-index:10;
  }
  .userMenu .menu {
    background-color: transparent;
    width: 250px;
  }
  .notice, .notice.maintenance {
    padding-left: 48px;
    text-align: center;
  }
  aside.fixNav {
    width: 250px;
  }
  .mainWindow {
    margin-top: 118px;
  }
  .userMenu nav {
    height: 50px;
  }
  .userMenu nav .menuContainer {
    display:none;
  }
  section {
    padding: 0
  }
  .register .container {
    padding: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .registerBox {
    padding: 60px 3% 100px;
  }
  .registerBox input {
    width: 96%;
  }
  .registerBox.content {
    padding: 60px 4% 100px;
  }
  .registerBox select {
    width: 60%;
    margin-bottom: 4px;
  }
  .registerBox .cameras input {
    width: 76%;
  }
  .container, .mainContainer {
    padding: 0 2%;
    width: 96%;
    margin-bottom: 0;
  }
  .light {
    padding: 0;
  }
  .light p, .light h2, #benefits h4 {
    padding: 0 20px;
  }
  .findmore {
    display: block;
    background-color: white;
  }
  .findmore a {
    display: block;
    text-align: center;
    color:#f05a23;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;
  }
  .findmore a .fa {
    float: right;
    margin-right: 20px;
  }
  #benefits ul {
    margin-left:20px;
    margin-right:20px;
  }
  .light .container, .fullwidth .container {
    padding: 0;
    width: 100%;
  }
  .helpBox .container {
    width: 84%;
    left: 5%;
    padding: 20px 3%;
  }

  .sonyIntro.showIntro {
    display: block;
  }
  .sonyIntro h1, .sonyIntro h3, .sonyIntro p {
    display: none;
  }
  .sonyIntro img {
    display:none;
  }
  .menu {
    background-color: #3b3b3b;
    height: 100vh;
  }
  aside {
    color: rgb(186,186,186);
  }
  .userMenu aside {
    color: rgb(138,138,138);   
  }
  aside ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  aside ul li {
    padding: 15px 0 0 30px;
    height: 35px;
    border-bottom: 1px solid rgb(209,209,209);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    text-transform: uppercase
  }
  aside ul li .fa {
    padding: 0 10px;
    display: inline-block;
  }
  aside ul li.active, aside ul li:hover {
    color: #000;
  }
  .userMenu .logout {
    background-color: #000;
    color: white;
    display: block;
    text-transform: none;
  }
  .userMenu .mainBody {
    margin-left: 0;
    margin-top: 0;
  }
  .proSupport {
    color: white;
    font-size: 20px;
    display: block;
    float: right;
  }
  nav {
    width:100%;
    background-color: rgba(0, 0, 0, 0.6);
    height: auto;
    position: absolute;
    top: 0;
  }
  .userMenu nav {
    position: relative;
  }
  .userMenu nav {
    background-color: transparent;
  }
  .userMenu nav .fa-bars {
    color: #f05a23;
  }
  nav ul, .userMenu .titleBar, .contactInfo {
    display: none;
  }
  nav .fa-bars {
    display: block;
    padding: 15px 0 0 30px;
    height: 35px;
    font-size: 26px;
    color:#fff;
    font-weight: bold;
    cursor: pointer;
    outline: none;
  }
  .userMenu .fa-bars {
    border-bottom: 1px solid rgb(209,209,209);    
  }
  
  .userMenu .userInfo {
    color: rgb(217,217,217);
    margin: 2px 80px 0 0px;
    float: right;
    text-align: right;
    display: block;
  }
  .userInfo h2 {
    color: rgb(147,147,147);
    margin-bottom: 0;
    text-align: right;    
    font-size: 22px;
  }
  .userInfo p {
    margin: 0;
    font-size: 12px;
  }
  .userInfo:after {
    content: "\f007"; 
    font-family: FontAwesome;
    position: absolute;
    color: rgb(171,171,171);
    background-color: rgb(235,235,235);
    right: 10px;
    top: 5px;
    width:40px;
    height: 40px;
    border-radius: 20px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-align: center;
    font-size: 25px;
    z-index: 1;
  }
  .introPhotos {
    display: none;
  }
  .sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index:10;
  }
  .dropform h3 .fa {
    margin-right: 40px;
  }
  .col-2, .col-2:first-child, .col-3, .col-3:first-child, .col-4, .col-4:first-child {
    float: none;
    border: none;
    width: 100%;
    margin: 0;
    padding:0;
  }
  .col-2 .orangeBox, .col-2 .greyBox {
    margin: 0;
  }
  .col-3 > img, .col-4 > img {
    width: 100%;
  }
  .field {
    height: auto;
    margin-bottom: 10px;
  }
  .field label {
    margin: 7px 0 5px 10px;
    max-width: none;
  }
  .formly-field-multiSelect .field label, .formly-field-checkbox .field label {
    display: block;
  }
  .showlabel .field label {
    display: inline-block;
  }
  .showlabel .field .fieldContainer label {
    display:none;
  }
  .fieldContainer {
    width: 100%;
    float: none;
  }
  .productform {
    padding: 15px 5px 100px;
  }
  .person, .profile.dashboard {
    display: none;
  }
  .editProfile {
    display: block;
  }
  .summary {
    padding: 0;
    margin: 0;
    height: auto;
  }
  .summary div {
    float: none;
    width: 77%;
    padding-right: 20%;
    padding-left: 3%;
    height: 55px;
  }
  .summary div i {
    float: left;
    margin: 5px 0 0 20px;
  }
  .summary .edit {
    display: block;
  }
  .product {
    width: 100%;
    margin: 0 0 20px;
  }
  .productImage {
    width: 40%;
    margin: -30px 0 0 5;
    float:left;
  }
  .productImage > div {
    font-size: 18px;
  }
  .product h3, .product p, .product button {
    margin-left: 50%;
  }
  .newLine:after {
    content: ": ";
  }
  .product button {
    width: 100px;
    display: block;
  }
  table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Date"; }
	td:nth-of-type(2):before { content: "Job Number"; }
	td:nth-of-type(3):before { content: "Model"; }
	td:nth-of-type(4):before { content: "Status"; }
	td:nth-of-type(5):before { content: "Details"; }
}

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* ==========================================================================
  Print styles
  ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}