#form { width: 100% } #form img { border: 0px; } #form #faq ul { padding: 0px; margin: 0px; margin-left: 20px; } .clear { clear: both } #blackoverlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black; z-index: 1000; opacity: 0.7; display: none; } #form .poplink { color: #a1a1a1; text-decoration: underline } /*account overview*/ #settingProfilePic { height: 145px; width: 145px; float: left; margin-right: 24px; position: relative; } #settingProfilePic>img { border-radius: 75px; border: 1px solid rgba(255, 255, 255, 0.2); } #settingProfilePic #cover-change { width: 40px; height: 40px; } #form #account_overview>div { border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 40px 0; color: #ffffff; } #form #account_overview>div:first-child { border-top: none; } #form #account_overview .overviewrow { width: 210px; float: left; margin-right: 41px; margin-bottom: 30px; color: white; margin-top: 0px } #form #account_overview .overviewrow2 { width: 800px; margin-right: 50px; margin-bottom: 30px; color: white; display: none } #form #account_overview .overviewstatus { color: #a1a1a1; font-size: 14px; margin-bottom: 12px; } #form #account_overview .overviewstatusdetail { color: white; font-size: 15px; margin-bottom: 35px; min-height: 34px; } #form #account_overview input[type=button] { min-width: 160px; padding: 0 10px 0 10px; height: 28px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; font-size: 14px; } #form #account_overview input[type=button]:hover { background-color: #27bb9d } #form #account_overview #paymentthodgrid { display: block } #form #account_overview #userdevicegrid { display: block } #form #account_overview #toFAQ { color: #a1a1a1; } #form #account_overview #toFAQ a { color: #39d1b3; text-decoration: underline } /*for video quality */ #form #account_overview .videoqty { padding: 40px 0px; background-color: black; color: white } #form #account_overview .videoqtyTitle { margin-bottom: 14px } #form #account_overview .videoqtyLabel { margin: 0px 38px 0 0; display: inline-block; cursor: pointer } #form #account_overview .videoqtyRadio { display: none } #form #account_overview .videoqtyRadioInput { background-color: #000; border: 2px solid rgba(161, 161, 161, 1); border-radius: 100%; display: inline-block; height: 20px; margin-right: 10px; margin-top: -1px; vertical-align: bottom; width: 20px; line-height: 1; } #form #account_overview .videoqtyRadio:checked+.videoqtyRadioInput:after { background-color: rgba(57, 209, 179, 1); border: none); border-radius: 100%; content: ""; display: inline-block; height: 10px; width: 10px; margin: 3px; cursor: pointer } #form #account_overview .videoqtyRadio:checked+.videoqtyRadioInput { border: 2px solid rgba(57, 209, 179, 1); } #form #account_overview .H16 { font-size: 16px; } #form #account_overview .H18 { font-size: 18px; } #buttonchangePersonalInfo { height: 28px; min-width: 160px; padding: 0px 10px 0px 10px; border-radius: 3px; border: 1px solid white; background: rgba(255, 255, 255, 0); color: white; font-size: 14px; } #buttonchangePersonalInfo:hover { border: 1px solid #39D1B3; color: #39D1B3 } #dialogbox { width: 300px; position: absolute; padding: 24px; margin: auto; background: white; border-radius: 3px; border: 1px solid #A5A5A5; font-size: 12px; display: none } #dialogboxMsg { margin-bottom: 12px; } #butLeaveCancel { float: left; width: 120px; height: 28px; background: white; border-radius: 3px; border: 1px solid #A5A5A5; } #butLeaveConfirm { float: right; width: 120px; height: 28px; background: white; border-radius: 3px; border: 1px solid #A5A5A5; } .leftsub { height: 38px } /*account overview end*/ /*deviceMapping*/ #form #devicemapping { color: white; width: 680px; font-weight:200; letter-spacing:0.6px; } #form #devicemapping > div:last-child { color:#a1a1a1; font-size:14px; } #form #devicemapping #content1a { margin: 20px 0px; } #form #devicemapping #content1a .deviceframe { background-color: #2E2E2E; color: white; width: 680px; border-radius: 3px; margin-bottom: 2px; padding: 15px 20px; display:flex; justify-content:space-between; color:#a1a1a1; font-size:16px; } #form #devicemapping .deviceframe > div > div{ padding:5px 0; } #form #devicemapping .deviceframe > div > div:first-child{ color:#ffffff; } #form #devicemapping .deviceframe .watchCount{ font-size:16px; color:#39D1B3; position:relative; cursor:pointer; } #form #devicemapping .deviceframe .watchCount:after{ content:''; border:solid #39D1B3; position:absolute; border-width:0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); margin:4px; } #form #devicemapping #content1a .deviceframe button { align-self:center; height: 26px; width: 100px; font-size: 16px; color: #ff3535; border-radius: 3px; border: 1px solid #ff3535; opacity:0.9; transition: opacity .25s linear; } #form #devicemapping #content1a .deviceframe button:hover { opacity:1; } #form #devicemapping .but_terminate { float: right; margin: 24px 24px 0 0; height: 28px; width: 140px; font-size: 14px; background-color: #000000; color: white; border-radius: 3px; border: 1px solid white; cursor: pointer } #form #devicemapping .but_terminate:hover { border: 1px solid #39D1B3; color: #39D1B3 } #frameLayer.watchList{ background-color:#ffffff; color:#555555; padding:24px; font-size:16px; font-weight:200; letter-spacing:0.6px; } #frameLayer.watchList > .flex{ margin:20px 0; } #frameLayer.watchList > .flex > div{ flex: 0 0 50%; } #frameLayer.watchList span.C1{ margin-bottom:5px; } #frameLayer.watchList .title{ font-size:24px; margin-bottom:40px; } #frameLayer.watchList span{ display:block; } #frameLayer.watchList .list{ margin-top:10px; } #frameLayer.watchList .list .C3{ margin-bottom:8px; } #frameLayer.watchList .list > div{ padding:14px; background-color:rgba(161,161,161,0.1); margin-bottom:5px; justify-content: space-between; } #frameLayer.watchList .list > div > div{ align-self:center } #frameLayer.watchList .list .C5{ width:100px; padding:5px 0; text-align:center; background-color:#39D1B3; border-radius:3px; cursor:pointer } #frameLayer.watchList .list .C5:hover{ background-color: #27bb9d; } /*deviceMapping end*/ /*viewPlan*/ #form #viewplan { background-color: #000000; width: 680px; color: white; font-size: 12px; } #form #viewplan > div { display: none; margin-bottom: 36px; } #form #viewplan > #NewPlanframe { display: none; margin-bottom: 36px; } #form #viewplan > #NewPlanframe .flex.space-between > div > p { color: #FFFFFF; font-size: 16px; line-height: 18px; margin-bottom:12px; } #form #viewplan > #NewPlanframe .flex.space-between > div > span { color: #A1A1A1; font-size: 14px; line-height: 16px; } #form #viewplan > #NewPlanframe .flex.space-between > .vertical-center button#popupnewplandetail{ height: 28px; width: 100px; border-radius: 3px; background-color: #39D1B3; color: #FFFFFF; font-family: Roboto; font-size: 16px; line-height: 19px; text-align: center; } .vertical-center{ align-items: center; display: flex; } #form #viewplan .row button { float: right; cursor: pointer; width: 100px; margin-top: -26px; border-radius:3px; background-color:#39D1B3; padding:4px 0; font-size:16px; /* For IE8 and earlier */ } #form #viewplan .title2 { padding-bottom: 12px; font-size: 16px; color: #a1a1a1; display: flex; justify-content: space-between; } #form #viewplan .title2 button { color: #39D1B3; } #form #viewplan .row { background-color: #262626; color: white; width: 680px; padding: 18px 24px 16px 24px; margin-bottom: 5px; font-size: 14px; line-height: 1.8em } #form #viewplan .but_upgrade { float: right; margin-top: -8px; padding: 0px 10px 0px 10px; height: 28px; width: 120px; font-size: 14px; background-color: #39D1B3; color: white; font-weight: bold; border-radius: 3px; border: none; cursor: pointer; display: none; } #form #viewplan .but_upgrade:hover { background-color: #27bb9d; } #form #viewplan .but_terminate { float: right; margin-top: -8px; padding: 0px 10px 0px 10px; height: 28px; min-width: 120px; font-size: 14px; background-color: #000000; color: white; font-weight: bold; border-radius: 3px; border: 1px solid white; cursor: pointer; ; display: none; } #form #viewplan .but_terminate:hover { border: 1px solid #39D1B3; color: #39D1B3 } #form #viewplan .but_moreplan { float: right; margin-top: -8px; margin-right: 20px; padding: 0px 10px 0px 10px; height: 28px; min-width: 120px; font-size: 14px; background-color: #39D1B3; color: white; font-weight: bold; border-radius: 3px; cursor: pointer; display: block; } #form #viewplan .rightinfo, #frameLayer.viewplandetail .rightinfo { float: right } #form #viewplan .gery{ color: #B3B3B3; font-size: 14px } #form #viewplan .creditcardNodisp { display: none } #form #viewplan .info3a { color: white; font-size: 16px; } #form #viewplan .info3 > div{ padding-bottom:12px; } #form #viewplan .spacing3 { padding-top: 3px } /*this part is popup*/ #form #frameLayer.viewplandetail { display: none; } #frameLayer.viewplandetail { background-color: white; border: 1px solid #878787; font-size: 14px; } #frameLayer.viewplandetail .content { padding: 24px; height:100%; overflow:scroll; } #frameLayer.viewplandetail .content .row { padding: 10px 16px; background-color:rgba(161,161,161,.1); font-size:16px; color:#555555; line-height:1.8em; margin-bottom:5px; } #frameLayer.viewplandetail .gery{ color: #a1a1a1; font-size: 14px } #frameLayer.viewplandetail .content { padding: 24px; } #frameLayer.viewplandetail .content { padding: 24px; } #frameLayer.viewplandetail .content { padding: 24px; } #frameLayer.viewplandetail .row2gridleft { float: left; width: 60%; } #frameLayer.viewplandetail .row2gridright { float: left; width: 40%; } #frameLayer.viewplandetail .title { font-size: 24px; color: #39D1B3; } #frameLayer.viewplandetail .viewplandetailtitle { color: #7C7C7C; } #frameLayer.viewplandetail .viewplandetaildetail { color: #323232; padding: 5px 15px 0 0; } #frameLayer.viewplandetail .pt2title { color: #39D1B3; padding-bottom: 15px; font-size: 18px; } #frameLayer.viewplandetail input { float: right; height: 28px; width: 160px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; } #frameLayer.viewplandetail .spacing18 { margin-bottom: 18px } #frameLayer.viewplandetail .spacing24 { margin-bottom: 24px } #frameLayer.viewplandetail .spacing36 { margin-bottom: 36px } #terminateService1 { width: 520px; height: 600px; position: fixed; background-color: #fff; display: none; } #terminateService1 #termServ1title { font-size: 24px; color: #39D1B3; padding-left: 24px; margin: 21px 0px 21px 0px } #termServ1title_closeBtn{ cursor: pointer; float:right; padding-right: 24px; } #terminateService1 img { width: auto; border: none; } #terminateService1 .termimage { position: relative; background: url(../images/terminateService1.jpg) no-repeat } #terminateService1 #termServ1note { position: absolute; top: 355px; left: 25px; font-size: 24px; color: white } #terminateService1 input { margin: 24px 44px 24px 44px; width: 432px; height: 28px; font-size: 14px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; cursor: pointer; } #terminateService1 input:hover { background-color: #27bb9d; } /*viewPlan end*/ /*termination2 */ #form #terminateService2 { width: 590px; } #form #terminateService2 .lineheight30 { line-height: 30px; } #form #terminateService2 .pad24 { padding-bottom: 24px } #form #terminateService2 .pad14 { padding-bottom: 14px } #form #terminateService2 .emailto { background: url(../images/icon_email.png) no-repeat left top; padding-left: 20px; } #form #terminateService2 .facebookto { background: url(../images/icon_facebook.png) no-repeat left top; padding-left: 20px; } #form #terminateService2 #formTermserv2continous { background-color: #39D1b3; height: 28px; width: 160px; color: white; border-radius: 3px; margin-left: 355px; } #form #terminateService2 #formTermserv2continous:hover { background-color: #27bb9d; } #form #terminateService2 .underline { text-decoration: underline } /*termination2 end*/ /*termination3 */ #form #terminateService3 { color: #B3B3B3; font-size: 14px; width: 680px; } #form #terminateService3 .heading { font-size: 20px; } #form #terminateService3 .green { color: #39D1B3 } #form #terminateService3 .white { color: white } #form #terminateService3 .parts { display: inline-block; width: 100px; } #form #terminateService3 input[type=checkbox] { margin-left: 10px; } #form #terminateService3 .col1 { width: 100px; margin-top: 10px; float: left } #form #terminateService3 .col2 { width: 330px; margin-top: 10px; float: left } #form #terminateService3 .col3 { width: 60px; float: left; margin-top: 10px; text-align: center } #form #terminateService3 .col3 img { width: 32px; margin-top: -10px; cursor: pointer } #form #terminateService3 .col4 { width: 50px; float: left; margin-top: 10px; text-align: center } #form #terminateService3 img { max-width: 100% } #form #terminateService3 .buttongoSubmit { width: 333px; height: 28px; background-color: black; border: 1px solid white; color: white; border-radius: 3px; margin-right: 8px } #form #terminateService3 .buttongoSubmit:hover { border: 1px solid #39D1B3; color: #39D1B3 } #form #terminateService3 .buttongoCancel { width: 333px; height: 28px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; } #form #terminateService3 .buttongoCancel:hover { background-color: #27bb9d; } #form #terminateService3 .bottomtext { font-size: 21px; color: #39D1B3; text-align: center; margin-bottom: 36px; line-height: 1.5em } #form #terminateService3 .hiddenbox { float: left; display: none; width: 100%; color: white; background-color: #333; padding: 10px 100px 10px 100px } #form #terminateService3 .heightpad1 { margin-bottom: 12px } #form #terminateService3 .heightpad2 { margin-bottom: 24px } /*termination3 end*/ /*termination4*/ #form #terminateService4 { color: white; font-size: 14px } #form #terminateService4 .but_terminate { margin-top: 12px; height: 28px; width: 219px; font-size: 14px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; cursor: pointer; } #form #terminateService4 .but_stay { margin: 12px 8px 0px 0px; height: 28px; width: 219px; font-size: 14px; background-color: #262626; color: white; border: none; border-radius: 3px; cursor: pointer } #form #terminateService4 .password { height: 28px; width: 450px; background-color: #262626; padding: 0px 20px 0px 20px; color: white } #form #terminateService4 .password:focus { outline: 0; background-color: #313131; } #form #terminateService4 ul { margin: 0px; padding-top: 0px; } /* #form #terminateService4 ul li:first-child { list-style: none; margin: 0px; } */ #form #terminateService4 ul li { list-style: square; margin-bottom: 12px; line-height: 1.8em; margin-left: 20px; } #form #terminateService4 #errorMsg { margin-top: 5px; color: red; } #form #terminateService4 #formTermserv4EnterPassword { font-size: 24px; margin-bottom: 12px; } #form #terminateService4 .nonCommittedUser { display: none } #form #terminateService4 .committedUser { display: none } /*termination4 end*/ /*terminationSuccess*/ #terminateService5 { color: white } #formTermserv5Msg3 { line-height: 1.5em; } /*terminationSuccess end*/ /*changePersonalInfo*/ #form #personalinfo { width:698px; font-size: 14px; color: #a1a1a1; } #form #personalinfo form > .row { margin-bottom: 36px; display: flex; } #form #personalinfo select { border-radius: 3px; } #dobDate, #dobMonth{ display:inline-block; } #dobDate{ margin-left:7px; } #form #personalinfo span{ position:relative; } #form #personalinfo .dropdown:after { content: ''; position: absolute; right: 7px; top: 5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #ffffff; } #form #personalinfo .white { color: white; font-size: 14px; } #form #personalinfo #profileImg #cover-o { position: relative; } #form #personalinfo #profileImg .desc { align-self: flex-end; } #form #personalinfo #profileImg .desc.onErr { color: #ff3535; } #form #personalinfo #profileImg.onErr img { border: 1px solid #ff0000; } #form #personalinfo #profileImg img { border-radius: 50%; width: 80px; height: 80px; } #cover-change { cursor: pointer; border-radius: 50%; position: absolute; width: 34px; height: 34px; background-color: #39D1B3; background-image: url(/images/btn_general_camera_white.png); right: 0; bottom: 0; background-position: center center; background-repeat: no-repeat; } #cover-change:hover { background-color: #27bb9d; } #form #personalinfo input { height: 28px; width: 322px; color: white; font-size: 14px; padding: 0px 10px 0px 10px; background-color: #262626; border-radius: 3px; } #form #personalinfo input[type=file] { display: none; } #form #personalinfo input:focus { outline: 0; border: 1px solid white; background-color: #313131; } #form #personalinfo .inputdate { height: 28px; width: 97px; color: white; padding: 0px 10px 0px 10px; outline: 0; background-color: #262626; outline: 0; margin-left: 8px; } #form #personalinfo .inputdate:focus { outline: 0; background-color: #313131; } #form #personalinfo .inputyear { height: 28px; width: 97px; color: white; padding: 0px 10px 0px 10px; background-color: #262626; outline: 0; margin-left: 8px; } #form #personalinfo textarea{ color: white; padding: 5px 10px 5px 10px; outline: 0; background-color: #262626; border-radius: 3px; } #form #personalinfo textarea:focus { background-color: #313131; outline: 1px solid #fff; } .address-soft-warn{ height: 61px; width: 323px; border: 1px solid #74D0BF; background-color: rgba(57,209,179,0.35); margin-bottom: 5px; color:#0ABD9A; padding: 5px 10px; } #form #personalinfo .inputyear:focus { outline: 0; background-color: #313131; } #form #personalinfo .row .title { font-size: 14px; padding-bottom: 12px; margin: 0; float: none; } #form #personalinfo .row>div { padding: 0 13px; position:relative; } #form #personalinfo .errorEmptyMsg { margin-top: 5px; display: none; color: #ff3535; font-size: 12px; } #form #personalinfo .errorMsg { margin-top: 5px; display: none; color: #ff3535; font-size: 12px; } #form #personalinfo .gen { height: 28px; width: 322px; color: white; padding: 0px 10px 0px 10px; background-color: #262626; -webkit-appearance: none; -moz-appearance: none; } #form #personalinfo #editProfileMsg { width: 80%; float: left; font-size: 12px; color: #a1a1a1; line-height: 1.5em; } #form #personalinfo #changePassword { font-size: 12px; } #form #personalinfo #changePwWarnMsg { font-size: 12px; } #form #personalinfo #button_Confirm { float: right; height: 28px; width: 116px; font-size: 14px; background-color: #39D1B3; color: white; border-radius: 3px; border: none; cursor: pointer } #form #personalinfo #button_Confirm:hover { background-color: #27bb9d } #form #personalinfo #button_Change { background-color: black; color: white; border: 1px solid white; height: 28px; width: 116px; font-size: 14px; border-radius: 3px; border: 1px solid white; cursor: pointer; bottom:0; position:absolute; } #form #personalinfo #button_Change:hover { border: 1px solid #39D1B3; color: #39D1B3 } #changepwgrid { display: none; } #resultCodedisplay { height: 40px; background-color: #333333; display: none; color: #39D0B2; padding: 15px 0px 0px 20px; margin-bottom: 15px } /*changePersonalInfo end*/