*/ /*highlight class means: ERROR*/ /* -------------------------- */ @media screen{ .cp input[type=submit]{ -webkit-appearance: none; } /* Override Autocomplete Background in Chrome*/ .cp input:-webkit-autofill, .cp input:-webkit-autofill:hover, .cp input:-webkit-autofill:focus, .cp textarea:-webkit-autofill, .cp textarea:-webkit-autofill:hover, .cp textarea:-webkit-autofill:focus, .cp select:-webkit-autofill, .cp select:-webkit-autofill:hover, .cp select:-webkit-autofill:focus { -webkit-text-fill-color: #005570; /* Non-Black Input */ -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } /* Input Fields */ .cp input[type=text], .cp input[type=email], .cp input[type=password], .cp input[type=date], .cp input[type=number], .cp input[type=datetime], .cp input[type=tel], .cp textarea, .cp select{ color: #005570; /* Non-Black Input */ font: normal 400 16px/1.2 Libre Franklin; height: 38px; /* for select */ border: 1px solid #998a8a; border-radius: 5px ; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; outline: none; padding: 5px 10px; width: 100%; /*needed for body.guest*/ max-width: 100%; /*needed for body.guest*/ background: none; } .cp select{ padding-right: 0px;} .cp textarea { width: 100%; resize: none; } .cp section:not(.highlight) input:not(.button):hover, .cp section:not(.highlight) textarea:hover{ border: 1px solid #006699; } .cp section:not(.highlight) input:not(.button):focus, .cp section:not(.highlight) input:not(.button):active, .cp section:not(.highlight) textarea:focus, .cp section:not(.highlight) textarea:active{ /*box-shadow: 0 0 3px #006699;*/ border: 1px solid #005570; -webkit-transition: none; -o-transition: none; transition: none; } .cp input::-ms-input-placeholder{ color: #666; } .cp input::-webkit-input-placeholder{ color: #666; } .cp input::-moz-placeholder{ color: #666; } .cp input:-ms-input-placeholder{ color: #666; } .cp input::placeholder{ color: #666; } .cp input::-webkit-input-placeholder{ color: #666; } .cp input::-ms-input-placeholder{ color: #666; } /* Red Validation Error Border and Text */ .cp section.highlight input:not(.ng-valid), .cp section.highlight select:not(.ng-valid), .cp section.highlight textarea:not(.ng-valid) { border-style: solid; border-color: #c70808; border-width: 1px 2px 2px 6px; } .cp section.highlight input[type=checkbox]:not(.ng-valid){ box-shadow: 1px 1px 0 #c70808, 1px -1px 0 #c70808, -1px -1px 0 #c70808, -1px 1px 0 #c70808; } .cp input::-webkit-outer-spin-button, .cp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cp select.placeholder, .cp input.placeholder, .cp textarea.placeholder { color: #aeaeae; } .cp select.placeholder option { color: #000; } .cp .combined-date-of-birth input.clean-input#dateOfBirth { text-align: center; width: 150px; } .cp input[type=radio] { float: left; } } @media only screen and (max-width:640px) { .cp input[type=radio] { margin: 0 3% 0 0; } .cp textarea/*#contact-mercury-message*/ { height: 100px; } } @media only screen and (min-width:641px) { .cp input[type=radio] { margin: 5px 3% 0 0; } .cp textarea/*#contact-mercury-message*/ { height: 80px; } } /* -------------------------- */ /* 7 END: Input Fields -- */ /* -------------------------- */ /* ------------------------------------ */ /* 8 START: checkbox & Radio Button -- */ /* ------------------------------------ */ /* Labels and Spacing */ .cp input[type=radio] + label.check-option, .cp input[type=checkbox] + label.check-option{ width: calc(100% - 38px); /* 38px width of checkbox */ margin-top: 3px; } .cp input[type=radio] + label { margin-bottom: 12px; } @media only screen and (max-width: 640px){ .cp label.check-option { font-size: 12.6px; } } .cp *:last-child > input[type=radio] + label:last-child, /* CWP */ body.cp input[type=radio] + label:last-child { /* CP, Guest, CAS*/ margin-bottom: 0; } @media screen{ .cp input[type=radio], .cp input[type=checkbox]{ margin: 0 13px 0 0; float: left; cursor: pointer; } /*Start Firefox*/ .cp input[type=radio], .cp input[type=checkbox]{ -moz-appearance: initial; border: none !important; height: 25px; width: 25px; min-width: 25px; } .cp input[type=radio]:checked, .cp input[type=checkbox]:checked{ background-position: 0 -25px; } .cp input[type=radio]:not(:checked), .cp input[type=checkbox]:not(:checked){ background-position: 0 0; } /* End Firefox */ .cp input[type=radio]:before, .cp input[type=radio]:after, .cp input[type="checkbox"]:before, .cp input[type="checkbox"]:after{ width: 25px; height: 25px; position: relative; display: block; content: ""; background: white; } .cp input[type=radio]:after, .cp input[type="checkbox"]:after{ top: -25px; } .cp input[type=radio]:disabled:after, .cp input[type="checkbox"]:disabled:after{ -webkit-filter: opacity(0.4); } .cp input[type=radio]:checked:after, .cp input[type="checkbox"]:checked:after{ background-position: 0 -25px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cp input[type=radio]:not(:checked):after, .cp input[type="checkbox"]:not(:checked):after{ background-position: 0 0; } .cp .card-checkbox .container.card-expandable > *:not(input){ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } } /* Original Checkbox */ /* @media screen{ input[type=checkbox]{ margin: 0 13px 0 0; float: left; cursor: pointer; } input[type=checkbox]{ -moz-appearance: initial; border: none; height: 21px; width: 21px; min-width: 21px; background-image: url(../images/csscheckbox.png); } input[type=checkbox]:checked{ background-position: 0 -21px; } input[type=checkbox]:not(:checked){ background-position: 0 0; } input[type="checkbox"]:before, input[type="checkbox"]:after{ width: 21px; height: 21px; position: relative; display: block; content: ""; background: white; } input[type="checkbox"]:after{ top: -21px; background-image: url(../images/csscheckbox.png); } input[type="checkbox"]:disabled:after{ -webkit-filter: opacity(0.4); } input[type="checkbox"]:checked:after{ background-position: 0 -21px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]:not(:checked):after{ background-position: 0 0; } } */ /* ------------------------------------ */ /* 8 END: checkbox & Radio Button -- */ /* ------------------------------------ */ /* -------------------- */ /* 9 START FOOTER -- */ /* -------------------- */ .cp footer nav { clear: both; overflow: auto; margin-left: auto; margin-right: auto; } .cp footer nav > *{ float: left; margin-top: 4px; margin-left: 0; margin-bottom: 4px; } .cp footer nav > *:not(:last-child){ margin-right: 22px; } .cp footer nav > *:last-child{ margin-right: 0; } @media only screen and (max-width:640px) { .cp footer nav{ padding: 25px 0; width: 86%; min-width: 300px; }; } @media only screen and (min-width:641px) { .cp footer nav{ padding: 45px 30px; max-width: 744px; }; } .cp footer a{ text-decoration: none; } /* -------------------- */ /* 9 END FOOTER -- */ /* -------------------- */ /* -------------------- */ /* 10 WARNINGS -- */ /* -------------------- */ /* -- #submit-errors class="plain errors error-inlaid error-grey-bg"-- */ /* -- .warning -- */ /* -- img -- */ /* -- p -- */ /* -- ----------------- */ @media screen{ .cp .warning { /*display: table;*/ display: -webkit-box; display: -ms-flexbox; display: flex; } .cp .warning > * { /*display: table-cell*/ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin-bottom: 0; } .cp .warning img { max-width: 100%; min-width: 51px; } .cp .warning p { padding: 0 0 0 15px; } .cp .plain.errors { background: #ddd !important; color: black; border-radius: 5px; padding: 5px !important; margin-bottom: 5px; } .cp .plain.errors .warning p { font-weight: normal; font-size: 14px; color: black; font-weight: bold; } .cp .plain.errors .warning img { height: 45px; width: 48px; min-width: 48px; max-width: inherit; vertical-align: baseline; text-align: center; display:table-cell; padding: 10px; } .cp .errors ul { margin: 0; } .cp section.input-row.clean-form-section label.error, .cp .card-error, .cp .errors label.error, .cp section.input-row.clean-form-section label.error *, .cp .card-error *, .cp .errors label.error * { color: #c70808; font-size: 12px; margin-top: 5px; clear: left; } } @media only screen and (max-width:640px) { .cp .errors label { float: left; width: 100%; margin: 0 0 6px 0; } } /* ------------------- */ /* 10 END WARNINGS -- */ /* ------------------- */ /* ------------------------------------------------------ */ /* 11 START Time-Out / Session Expire Message -- */ /* -- session-expired-dialog / time-out-warning-dialog -- */ /* ------------------------------------------------------ */ @media screen{ .cdk-overlay-pane.overlay-dialog-panel > .mat-dialog-container { background-color: #f1f1f1; -webkit-box-shadow: 0 0 25px #5A5A5A; box-shadow: 0 0 25px #5A5A5A; border-radius: 10px; overflow: hidden; padding: 3vw 3vw 2vw 3vw; /*spacing */ overflow: visible; border-radius: 10px; width: 100%; } .overlay-dialog-panel p { max-width: 300px; } .overlay-dialog-panel .overlay-dialog h4 { font-weight: bold; margin-bottom: 10px; /* spacing */ } .overlay-dialog-panel .overlay-dialog .overlay-dialog-content{ font-size: .9em; line-height: 1.4; margin-bottom: 10px; /* spacing */ } } /* ------------------------------------------------------ */ /* 11 END Time-Out / Session Expire Message -- */ /* ------------------------------------------------------ */ /* ---------------------------------------------- */ /* 12 START global password requirement styles -- */ /* ---------------------------------------------- */ @media screen{ .password-requirements, .password-requirements .rules { float: left; } .password-requirements p { margin: 0; font-style: italic; } .password-requirements p span { text-decoration: underline; } .password-requirements .rules { margin-top: 10px; } .password-requirements h4 { margin: 0; } .password-requirements h4.checkMark { /*background: url(../images/validation-check-icon.png) no-repeat;*/ } .password-requirements h4.errorMark { /*background: url(../images/validation-x-icon.png) no-repeat;*/ } .password-requirements ul li.checkMark { /*background: url(../images/checkmark2.png) 0 5px no-repeat;*/ padding-left: 16px; } .password-requirements ul { margin: 0; padding-left: 28px; font-weight: 400; } .password-requirements { padding-top: 30px; /* needed /customer/password on all resolutions */ } .passwordDoubleEye::-ms-reveal, .passwordDoubleEye::-ms-clear{ display: none !important; } } @media only screen and (max-width:640px) { /* password requirement styles */ .password-requirements ul { margin-top: -3px; font-size: .9em; line-height: 1.3; } .password-requirements ul li { background-position-y: 10px; } .password-requirements h4 { padding: 6px 0 1px 26px; } .password-requirements h4.checkMark, .password-requirements h4.errorMark { background-position: -1px 6px; } } @media only screen and (min-width:641px) { /* password requirement styles */ .password-requirements h4 { padding: 10px 0 0 26px; } .password-requirements h4.no-padding { padding: 10px 0 0 0px; } .password-requirements h4.checkMark, .password-requirements h4.errorMark { background-position: -1px 11px; } .password-requirements ul { font-size: 1em; } } /* ---------------------------------------------- */ /* 12 END global password requirement styles -- */ /* ---------------------------------------------- */ /* ---------------------------------- */ /* 13 START: Display media Queries -- */ /* ---------------------------------- */ @media screen{ .inline { display: inline; } .inline-block { display: inline-block; } } @media (max-width:640px){ body.cas .desktop{ display: none !important; } } @media (min-width:641px){ body.cas .mobile{ display: none !important; } } @media only screen and (max-width:767px) { .mobile { display: initial; } .mobile-inline { display: inline; } body:not(.cas) .desktop, .desktop-inline, .desktop-inline-block{ display: none !important; } .desktop-easy { display: none } .show { display: block; } .mobile-show { display: initial !important; } .mobile-hide { display: none !important; } } @media only screen and (min-width:768px) { body:not(.cas) .mobile, .mobile-inline{ display: none !important; } .desktop-inline { display: inline; } .desktop { display: initial; } .desktop-inline-block { display: inline-block; } } /* ---------------------------------- */ /* 13 END: Display media Queries -- */ /* ---------------------------------- */ /* ------------------ */ /* 14 START: lists -- */ /* ------------------ */ @media screen{ ul { margin: 10px 0 0 5%; font-size: .75em; } li { display: block; } } /* ------------------ */ /* 14 END: lists -- */ /* ------------------ */ /* ----------------- */ /* 15 START: icon -- */ /* ----------------- */ @media screen{ .open-icon { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .close-icon { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .documents-group-expand img{ width: 20px; margin: 13px 10px; } .documents-group-expand img.open-icon{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @media (max-width: 767px){ a > img[src$="navigation-arrow.svg"]{ min-width: 24px; padding: 10px 7px; } } @media (min-width: 768px){ a > img[src$="navigation-arrow.svg"] { min-width: 40px; padding: 15px; } } /* ----------------- */ /* 15 END: icon -- */ /* ----------------- */ /* -------------------------- */ /* 16 START: iphone adjust -- */ /* -------------------------- */ /* @media screen{ .iphone input, .iphone select, .iphone textarea { -webkit-text-size-adjust: 125%; } .iphone input[type=submit] { -webkit-text-size-adjust: none; } .iphone select { height: 35px; line-height: 120%; } } */ /* -------------------------- */ /* 16 END: iphone adjust -- */ /* -------------------------- */ /* ---------------------- */ /* 17 START: nucaptcha -- */ /* ---------------------- */ @media screen{ #directions-verbose-label { float: left !important; margin-left: -3px !important; padding-left: 0px !important; text-align: left !important; } #directions-label, #directions-verbose-label { font: Lato, Arial, Helvetica, sans-serif !important; } #directions-verbose-label span { display: none; } #media-container{ width: 88% !important; } #nucaptcha-media, img#nucaptcha-media{ max-width:88% !important; } #directions-verbose-label, #directions-label { margin: 0px; padding: 0px; border: none; outline: none; text-align: left; font-size: medium; font-family: Helvetica, Times New Roman, serif; position: relative; background: none; background-color: inherit; text-transform: none; text-decoration: none; float: none; width: 100%; font-style: normal; font-weight: normal; display: inline; text-align: right; white-space: nowrap; } a#new-challenge.cmd { background: url(https://s3.amazonaws.com/staticd.nucaptcha.com/33376/v6/skins/mercury/master.png) 0px -64px no-repeat scroll transparent; margin: 0px 0px 2px; border: none; outline: none; text-align: left; font-size: medium; font-family: Helvetica, "Times New Roman", serif; position: relative; text-transform: none; text-decoration: none; width: 30px; height: 29px; padding: 0px; display: block; text-indent: -10000px; z-index: 3; overflow: hidden; } a#player-mode.cmd.toggle { background: url(https://s3.amazonaws.com/staticd.nucaptcha.com/33376/v6/skins/mercury/master.png) 0px -192px no-repeat scroll transparent; margin: 0px 0px 2px; border: none; outline: none; text-align: left; font-size: medium; font-family: Helvetica, "Times New Roman", serif; position: relative; text-transform: none; text-decoration: none; width: 30px; height: 29px; padding: 0px; display: block; text-indent: -10000px; z-index: 3; overflow: hidden; } a#player-mode.cmd.toggle-checked { background: url(https://s3.amazonaws.com/staticd.nucaptcha.com/33376/v6/skins/mercury/master.png) -64px -256px no-repeat scroll transparent; margin: 0px 0px 2px; border: none; outline: none; text-align: left; font-size: medium; font-family: Helvetica, "Times New Roman", serif; position: relative; text-transform: none; text-decoration: none; width: 30px; height: 29px; padding: 0px; display: block; text-indent: -10000px; z-index: 3; overflow: hidden; } #media-container { width: 88%; background-color: white; border: double #ccc; text-align: center; height: 80px; position:relative; } #media-container #nucaptcha-media { background: url(https://s3.amazonaws.com/staticd.nucaptcha.com/33376/v6/skins/mercury/loading.gif) no-repeat center center; } a#audio-listen-again.cmd-audio, a#audio-download.cmd-audio { text-align: left; float: left; width: 88%; /*margin-left: 6px;*/ padding-top: 4px; } #my-nucaptcha-wrapper { display: table; width: 100%; } #my-nucaptcha-button-wrapper { width: 10%; float: right; } img#nucaptcha-media{ height: 74px; margin-right:13%; } audio#nucaptcha-media { min-width:85%; } #my-nucaptcha-answer-wrapper { height: 1em; float: none; text-align: right; width: 88%; } #nucaptcha-answer { width: 80px; float: right; background-color: white; border-color: #ccc; font-size: 1em; background: none; } } @media only screen and (max-width:640px) { #captcha { width: 100%; border-radius: 8px; } #nucaptcha-player { width: 99% !important; } #nucaptcha-answer { width: 80px !important; width: 80px; background: none; background-color: white; } #my-nucaptcha-answer-wrapper { line-height: 2em; } } @media only screen and (min-width:641px) and (max-width:768px) { #nucaptcha-player { width: 99% !important; } } @media only screen and (min-width:641px) { .captcha { float: left; width: 100%; height: 50px; max-width: 308px; margin: 5px 0; border-radius: 4px; border: solid 1px #4c4c4c; } #nucaptcha-player { width: 56% !important; } #nucaptcha-answer { width: 80px !important; } } /* ---------------------- */ /* 17 END: nucaptcha -- */ /* ---------------------- */ /* --------------------- */ /* 18 START: Other Stuff */ /* --------------------- */ .cp label { float: left; clear: right; width: 100%; margin: 0; padding: 0; font-weight: 400; } @media only screen and (min-width:641px) { .cp .container p { font-weight: 400; color: #000; } } /* --------------------- */ /* 18 END: Other Stuff */ /* --------------------- */ /* ------------------------------------------ */ /* 19 START profile-update-red/green/orange */ /* ------------------------------------------ */ .profile-update-red:not(.updated), .profile-update-green:not(.updated), .profile-update-orange:not(.updated){ display: none; /* hide alert if no .updated class */ } .profile-update-green *, .profile-update-red *, .profile-update-orange *{ color: white; } .container .content > .pol-status-wrapper > .row{ height: 30px; /*error message min-height*/ } .profile-update-green{ background: #666;/* #8ECA11; changed to Gray as Tim Requested 10/9/2020*/ } .profile-update-red{ background: #c70808; } .profile-update-orange{ background: #666; /* #f59e1d; changed to Gray as Tim Requested 10/9/2020*/ } .profile-update-green, .profile-update-red, .profile-update-orange { clear: both; display: block; padding-left: 6%; padding-right: 5%; letter-spacing: 0.3px; font-size: 13px; } .profile-update-green .valid-icon, .profile-update-red .valid-icon, .profile-update-orange .valid-icon { padding: 6px 0 6px 28px; } /* Old Look: background: url(assets/images/validation-check-icon.png) no-repeat left center; padding: 6px 0 6px 32px; filter: grayscale(100%) brightness(91%); -webkit-filter: grayscale(100%); */ /* Old Look: background: url(assets/images/validation-x-icon.png) no-repeat left center; padding: 6px 0 6px 32px; */ /* Old Look: background: url(assets/images/validation-info-icon.png) no-repeat left center; padding: 6px 0 6px 32px; filter: grayscale(100%) brightness(91%); -webkit-filter: grayscale(100%) ; */ /* ---------------------------------------- */ /* 19 END profile-update-red/green/orange */ /* ---------------------------------------- */ /* -------------------- */ /* 20 START HEADER -- */ /* -------------------- */ @media screen{ body.cas header, body.guest header{ background: white; position: relative; -webkit-box-shadow: 0 2px 4px #DADADA; box-shadow: 0 2px 4px #DADADA; } /* #header-wrapper styles that effect all CAS/GUEST/Dashboard/CWP */ .cp #header-wrapper { max-width: initial; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: auto; } /* START Menu Width is Tricky */ /* Reviewed with Tim/Simon Nov 3rd, 2020 this is what they want 1080px with menu ofset calc(50% - 540px)*/ /* IF YOU CHANGE: UPDATE: \CustomerPortalWeb01\CustomerPortalApp\src\app\components\fas\fas.component.css */ .cp #header-wrapper { max-width: 1080px } @media (min-width: 1080px){ #i-want-to-menu-overlay{ right: calc(50% - 540px) !important; } } /* END Menu width is Tricky */ @media (max-width: 1099px){ .cp #header-wrapper { padding: 0 1%; } } body.cas header #header-wrapper .logo a img, body.guest header #header-wrapper .logo a img{ width: 100%; } body.cas header #needHelpTab, body.guest header #needHelpTab{ cursor: pointer; } body.cas header #needHelpTab img, body.guest header #needHelpTab img{ width: 27px; height: 27px; margin-right: 10px; float: left; } body.cas header #needHelpTab div, body.guest header #needHelpTab div{ display: inline-block; padding-top: 2px; font-weight: bold; } body.cas header #needHelpWrapper, body.guest header #needHelpWrapper{ overflow: hidden; color: white; background-color: #006599; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } body.cas header #needHelpWrapper #contactInfo, body.guest header #needHelpWrapper #contactInfo{ position: relative; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; height: 0; width: 70%; } body.cas header #needHelpWrapper #contactInfo a, body.guest header #needHelpWrapper #contactInfo a{ color: white; } body.cas header #phoneIcon, body.guest header #phoneIcon{ position: relative; width: 30px; height: 30px; margin-right: 8px; float: left; margin-top: 1px; } body.cas header .tollFree, body.guest header .tollFree{ margin-top: 6px; margin-bottom: 6px; display: inline-block; color: white; } } @media only screen and (min-width: 641px){ body.cas header #header-wrapper .logo, body.guest header #header-wrapper .logo{ margin: 15px 0 27px; width: 200px; height: 40px; } body.cas header #header-wrapper > span, body.guest header #header-wrapper > span{ /*display: none; /* this span used to center logo on mobile using flex*/ } body.cas header #needHelpWrapper #contactInfo, body.guest header #needHelpWrapper #contactInfo{ min-width: 450px; max-width: 750px; } body.cas header #needHelpWrapper.show #contactInfo, body.guest header #needHelpWrapper.show #contactInfo{ height: 81px; max-height: 81px; } } @media only screen and (max-width: 640px){ body.cas header #header-wrapper .logo, body.guest header #header-wrapper .logo{ margin: 15px 0; width: 150px; height: 30px; } body.cas header #needHelpWrapper #contactInfo, body.guest header #needHelpWrapper #contactInfo{ min-width: 304px; font-size: 13px; } body.cas header #needHelpWrapper.show #contactInfo, body.guest header #needHelpWrapper.show #contactInfo{ height: 41px; max-height: 41px; } } @media only screen and (max-width: 640px) and (orientation: landscape){ body.cas header #header-wrapper .logo, body.guest header #header-wrapper .logo{ margin: 17px 0; width: 170px; height: 34px; } } /* -------------------- */ /* 20 END HEADER -- */ /* -------------------- */ /* ---------------------------------------------------------------- */ /* 21 START: CAS Login Page *Only* ... ... */ /* ---------------------------------------------------------------- */ /* h1 */ body.cas h1 { text-align: left; color: white; margin: 15px 0px 20px; display: inline-block; } @media (max-width: 500px){ body.cas h1{ font-size: 24px; white-space: nowrap;} } @media (max-width: 768px) and (min-width: 501px){ body.cas h1{ font-size: 37px;} } @media (max-width: 1096px) and (min-width: 769px){ body.cas h1{ font-size: 43px;} } @media (min-width: 1097px){ body.cas h1{ font-size: 56px;} } /* LOG IN ( > ) */ body.cas #submit-login > span{ display: none; } body.cas #remember-me + span{ color: #666; } /*input.maxlength{ margin: 10px 0; }*/ body.cas section > *:not(.errors){ margin: 10px 0; } body.cas section { float: left; } @media only screen and (min-width: 641px){ body.cas .align-center .form-view section { width: 50%; } } @media only screen and (max-width: 640px){ body.cas .align-center .form-view section { width: 100%; padding: 25px 4%; } } body.cas h3 { margin-top: 0px; } /* body.cas section > p, */ body.cas section > ul{ display: inline-block; } body.cas ul{ line-height: 24px; padding-left: 9px; } @media(min-width: 641px){ body.cas .form-view > .content-row > section:nth-child(1){ padding: 0 26px 0 0; border-right: 1px solid #ccc; } body.cas .form-view > .content-row + .content-row > section:nth-child(1){ padding: 20px 26px 0 0; border-right: 1px solid #ccc; } body.cas .form-view > .content-row > section:nth-child(2){ padding: 0 0 0 26px; border-left: 1px solid #ccc; margin-left: -1px; } body.cas .form-view > .content-row + .content-row > section:nth-child(2){ padding: 20px 0 0 26px; border-left: 1px solid #ccc; margin-left: -1px; } } @media(min-width: 768px){ body.cas .form-view > .content-row > section:nth-child(1){ padding-right: 60px !important; } body.cas .form-view > .content-row > section:nth-child(2){ padding-left: 60px !important; } } body.cas #overlays, body.cas #overlays section { display: none; } body.cas .show-overlay #overlays, body.cas #overlays section.show-overlay { display: block; } body.cas #content-container { padding: 0px 20px; margin: 50px auto 0px; } @media only screen and (min-width: 641px){ body.cas #content-container { max-width: 1024px; } } body.cas left-column.align-center { float: none; max-width: 1024px; margin: 0px auto 20px; width: 100% !important; } body.cas left-column.align-center { float: none; max-width: 1024px; margin: 0px auto 20px; width: 100% !important; } body.cas .content-row { display: table; width: 100%; } @media only screen and (min-width: 768px){ body.cas #content-container .left-column .left-container form { padding: 60px; } } @media only screen and (max-width: 767px){ body.cas #content-container .left-column .left-container form { padding: 26px; } } body.cas .left-container{ position: relative } body.cas .profile-update-red, body.cas .profile-update-green, body.cas .profile-update-orange{ position: absolute; padding-left: 6%; width: 100%; top: 0; left: 0; } body.cas #content-container .left-column .left-container { -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px; background: white; float: left; width: 100%; } body.cas .one-time-payment { text-transform: uppercase; margin: 0px; } body.cas .button .white-lock { float: left; margin-top: 2px; } body.cas .content-row .right ul { font-size: 14.4px; } body.cas .content-row .right li { margin-left: 2%; display: list-item; } body.cas table-cell.mobile > a, body.cas .form-view > .content-row + .content-row > section:nth-child(2) > a{ text-decoration: none; border-bottom: 1px dotted #267da8; color: rgb(0, 102, 153); } body.cas .content-row.links section { padding: 0px 4% 2%; } body.cas .content-row.links section.googleplay { margin-top: 20px; } body.cas .table-row{ margin-top: 20px; } body.cas label.error{ margin-top: -9px !important; } @media only screen and (max-width: 640px){ body.cas .align-center .table-cell { width: 49.5%; display: inline-block; vertical-align: middle; } body.cas .align-center .button { margin: 0px 0px 0px 3px; width: 87%; } body.cas .align-center .table-row { display: table; width: 100%; margin: 10px 0px; } } @media (max-width: 640px) and (min-width: 480px){ body.cas .align-center .table-cell:last-of-type { padding-left: 16px; } } @media (max-width: 767px){ body.cas .appButton { vertical-align: middle; display: block; margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 480px){ body.cas .align-center .table-cell:first-of-type { margin-bottom: 15px !important; } body.cas .align-center .button { width: 100%; } body.cas .align-center .table-cell { width: 100% !important; display: block !important; vertical-align: text-bottom !important; } } body.cas .section-cap { display: none; } /* ---------------------------------------------------------------- */ /* 21 END: CAS Login Page *Only* ... ... */ /* ---------------------------------------------------------------- */ /* ------------------------------------------- */ /* 22 START: Header Menu ( CWP / Dashboard ) */ /* ------------------------------------------- */ #i-want-to-mask { z-index: 200; /*background-color: #333;*/ /* Mask */ background: rgb(255,255,255); background: -o-linear-gradient(rgba(255,255,255,0) 7%, rgba(51,51,51,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(7%, rgba(255,255,255,0)), to(rgba(51,51,51,1))); background: linear-gradient(rgba(255,255,255,0) 7%, rgba(51,51,51,1) 100%); position: fixed; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.7; } #i-want-to-menu-overlay { max-width: 275px; width: 80%; overflow: visible; position: absolute; background-color: white; z-index: 300; right:0; border-top: solid 1px #E3E5E8; border-left: solid 1px #E3E5E8; border-bottom: solid 1px #9fa0a2; border-right: none; } #i-want-to-menu-overlay .button-container { float: left; width: 100%; padding: 0; vertical-align: middle; } #i-want-to-menu-overlay .overlay-button-grid a { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 57px; padding-left: 11%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: solid 2px #f1f3f6; background: white; } #i-want-to-menu-overlay .overlay-button-grid .cell{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 57px; padding-left: 11%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: solid 2px #f1f3f6; } #i-want-to-menu-overlay h3 { font-size: 14px; font-weight: 700; padding: 0 12px; } #i-want-to-menu-overlay .sign-out-button { display: inline-block; } #i-want-to-menu-overlay .button-container img.landscape { display: none; } #i-want-to-menu-overlay .sign-out-button .overlay-button-grid a { padding-left: calc( 11% + 45px ); } #i-want-to-menu-overlay img { max-width: 100%; width: 45px; } #i-want-to-menu-overlay .i-want-menu-item-title { display: inline; } #i-want-to-menu-overlay .triangle{ display:none; } /* --------- */ /* ANIMATION */ /* --------- */ /* Animation :: on Menu Item Hover */ #i-want-to-menu-overlay .overlay-button-grid a, #i-want-to-menu-overlay .overlay-button-grid a h3, #i-want-to-menu-overlay .overlay-button-grid a img{ -webkit-transition: .2s; -o-transition: .2s; transition: .2s; transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } #i-want-to-menu-overlay .overlay-button-grid a:hover{ /* border-color: #CCC; */ border-color: #e8b107; background: #f7f8fa; } #i-want-to-menu-overlay .overlay-button-grid a:hover h3{ /* color: #AAA; */ } #i-want-to-menu-overlay .overlay-button-grid a:hover img{ /* Gray * / filter: grayscale(100%); -webkit-filter: grayscale(100%); /**/ /* Dark Yellow */ filter: contrast(80%); -webkit-filter: contrast(80%); } /* Animation :: on Menu Button Click */ #i-want-to-menu-overlay { -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-animation: SLIID .4s; animation: SLIID .4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #i-want-to-mask{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-animation: FADE .4s; animation: FADE .4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Key Frames :: FADE */ @-webkit-keyframes FADE { from { opacity: 0; } to { opacity: .75; } } @keyframes FADE { from { opacity: 0; } to { opacity: .75; } } /* Key Frames :: SLIID */ @-webkit-keyframes SLIID { from { -webkit-transform: translate(80px,0); transform: translate(80px,0); opacity: .5; } to { opacity: 1; } } @keyframes SLIID { from { -webkit-transform: translate(80px,0); transform: translate(80px,0); opacity: .5; } to { opacity: 1; } } /* ------------------------------------------- */ /* 22 END: Header Menu ( CWP / Dashboard ) */ /* ------------------------------------------- */ /* -------------------------------- */ /* 23 Start: All Images from Assets */ /* -------------------------------- */ /*body.cas .one-time-payment { background: url(../images/black-lock.png) 0px 0px no-repeat; }*/ @media(min-width: 641px){ body.cas .form-view > .content-row + .content-row > section:nth-child(1){ background: url(../images/icon-lock-gray.svg) 6px 20px no-repeat; /* CAS ONLY */ } body.cas .one-time-payment { margin-left: 36px !important; } } @media(max-width: 640px){ body.cas .form-view > .content-row + .content-row > section:nth-child(1){ background: url(../images/icon-lock-gray.svg) 4% 0px no-repeat; /* CAS ONLY */ } body.cas .one-time-payment { margin-left: 29px !important; } } .profile-update-green .valid-icon { background: url(../images/tim_validation-check-icon_2x.png) no-repeat left center; background-size: 16px; } .profile-update-red .valid-icon { background: url(../images/tim_validation-x-icon_2x.png) no-repeat left center; background-size: 16px; } .profile-update-orange .valid-icon { background: url(../images/tim_validation-info-icon_2x.png) no-repeat left center; background-size: 16px; } .cp .password-requirements ul li { background: url(../images/list-hyphen.png) 3px 13px no-repeat; padding-left: 16px; } .cp .password-requirements ul li.checkMark { background: url(../images/list-hyphen.png) 3px 13px no-repeat; } .cp .password-requirements .rule { background: url(../images/list-hyphen.png) 9px 8px no-repeat; padding-left: 25px; background-size: 8px; } .cp .password-requirements .information-row.errorMark .rule { background: url(../images/red-x.svg) 0px 0px no-repeat; background-size: 20px; } .cp .password-requirements .information-row.checkMark .rule { background: url(../images/green-check.svg) 0px 0px no-repeat; background-size: 20px; } .cp input[type=checkbox]{ background-image: url(../images/TimCheckBox.png); } .cp input[type=checkbox]:after{ background-image: url(../images/TimCheckBox.png); } .cp input[type=radio]{ background-image: url(../images/TimRadioButton.png); } .cp input[type=radio]:after{ background-image: url(../images/TimRadioButton.png); } /* -------------------------------- */ /* 23 End: All Images from Assets */ /* -------------------------------- */ /* Mobile View hiding things */ body.mobileViewTrue .mobile-view-hidden { display: none !important; }