@charset "UTF-8";


html {
	height: 100%;
}
body { margin-top:0px; margin-left: 0px; margin-right: 0px;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	  font-size:16px; color:#737373; background-color:#fff; height: 100%;}

.Contentscontainer {display:inline;}

.UserName {display:inline; float:left; width:100%; text-align:center; margin-top:100px; color:#737373; font-size:28px; margin-bottom:25px;}

.LineBottom {display:inline; float:left; width:calc(100% - 30px); height:30px; border-bottom:1px solid #ccc; margin-left:15px; }
.CenteringDiv {display:inline; float:left; width:20%; margin-left:40%; }
.Circle {display:inline; float:left; width:36px; height:36px; border:1px solid #CCC; margin-top:9px; border-radius:18px; background:#FFF; margin-left:calc(50% - 19px);}
.ArrowBottom {display:inline; float:left; width: 14px; height: 14px; margin-left:10px; margin-top:7px; -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -o-transform: skew(10deg); border-bottom:2px solid #ccc; border-left:2px solid #ccc;  -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg); /* Standard syntax */}

/*selection slider on options*/
.OptionsContainer {display:inline; float:left; width:70%; height:300px; margin-left:15%; margin-top:100px;  }
.ExplainationText {display:inline; float:left; width:50%; height:30px; text-indent:20px; font-size:24px; color:#737373; margin-top:10px; }
.RemoveCriteria {display:inline; float:left; width:85%; height:40px; font-size:17px; color:#737373; margin-top:30px; margin-left:20px; line-height:40px;  }
/*slider*/
.CleanEmailSlider {display:inline; float:right; height:25px; width:50px; border-radius:15px;background-color:#fff; border:1px solid #CCC; cursor:pointer; margin-top:6px;  }
.CircleSlider {display:inline; float:left; width:26px; height:26px; margin-top:-2px; margin-left:-1px; background-color:#fff; border:1px solid #ccc; border-radius:15px; box-shadow: 0px 2px 1px -1.5px rgba(204,204,204,1); cursor:pointer;  }
#OneUnSubscribe {background-color:#3394cc; border:1px solid #3394cc; box-shadow:inset 0px 0px 12px -4px #4d4d4d; margin-left:-1px;}
.ConsumerSlider {margin-left:25px;}

.ConfirmButton {display:inline; float:left; width:150px; height:45px; background:#3394cc; color:#FFF; font-size:21px; border-radius:5px; line-height:45px;margin-left:calc(50% - 75px); margin-top:80px; text-align:center; cursor:pointer;}

/* Unsubscribed Only */
.ShowUnsubscribeWindow {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:1;}

/*Quarantine list tick confirmation*/
.QuartantineListSuccess {display:none; float:left; width:200px; height: 80%; margin-left: calc(50% - 100px); margin-top: 100px;}
#UnsubscribeSuccess {position:absolute; width: 500px; margin:0; left:calc(50% - 250px); top:calc(50% - 140px);   }
.SuccessText, .SuccessfullyUnsubscribedText {display:inline; float:left; width:100%; height:50px; color:#737373; font-size:36px; text-align:center; margin-top:35%;  }
.SuccessfullyUnsubscribedText {margin-top:0px; font-size:28px;}
.SuccessCircle {display:inline; float:left; height:200px; width:200px; border-radius:200px; background-color:#3394cc; overflow:hidden;  }
.UnsubscribeCircle {margin-left:150px;}

.BoxHidingTick {display:inline; float:left; width:150px; height:150px; background-color:#3394cc; transform: rotate(315deg) scale(0.957)  translate(0px); -webkit-transform: rotate(315deg) translate(0px); -moz-transform: rotate(315deg)  translate(0px); -o-transform: rotate(315deg)  translate(0px); -ms-transform: rotate(315deg) translate(0px); margin-top:-80px; margin-left:68px;    }


.Tick {display:inline; float:left; width:120px; height:50px; background:#3394cc; transform: rotate(315deg) scale(0.957)  translate(0px); -webkit-transform: rotate(315deg) translate(0px); -moz-transform: rotate(315deg)  translate(0px); -o-transform: rotate(315deg)  translate(0px); -ms-transform: rotate(315deg) translate(0px); margin-top:60px; margin-left:40px; border-left:10px solid #FFF; border-bottom:10px solid #FFF;}


/* content for spam report page */
.SourceContainer {display:inline; float:left; width:90%;  margin-left:5%; margin-top:40px;  font-size:18px; text-align:center; color:#737373; line-height:24px;}

/* Summary Results Button */
.SummaryButtonContainer { display:inline; float:left; width:1052px; margin-left:calc(50% - 525px); margin-top:40px; padding:10px;  }
.SummaryButton { display:inline; float:left; width:485px; height:70px; margin-left:20px; margin-bottom:20px; border:1px solid #ccc; border-radius:5px; cursor:pointer;}
.SummaryButtonHover, .SummaryButtonResult.Selected { background-color:#3394cc; }


.SummaryButtonResult { display:inline; float:left; margin-left:12px; width:35px; height:35px; background-color:#e4e4e4; border-radius:20px; margin-top:18px;  }
.SummaryButtonTitle { display:inline; float:left; width:400px; font-size:17px; margin-left:13px; line-height:70px; color:#737373; border-left:1px solid #ccc; padding-left:13px; background-color:#fff;}
.ResultHover { border:1px solid #666;}

/*text for comments section */
.CommentsTitle {display:none; float:left; color:#737373; font-size:28px; margin-left:15%; margin-top:30px;}
.Comments {display:none; float:left; color:#737373; border:1px solid #CCC; width:973px; height:200px; margin-top:30px; margin-left:calc(50% - 496px); border-radius:5px; outline: none; font-size:16px; padding:10px; resize: none; font-family:Arial, Helvetica, sans-serif;}

.ReportButton, .ProceedBtn {display:inline; float:left; width:150px; height:45px; background:#3394cc; color:#FFF; font-size:21px; border-radius:5px; line-height:45px; margin-left:calc(50% - 75px); margin-top:30px; text-align:center; cursor:pointer;}
.BottomSpacing {display:inline; float:left; width:100%; height:20px;}
.ProceedBtn {margin-left:0; width:180px; margin-top:0;}
#ReportEmail { float:right;}
.ProceedContainer {display:inline; float:left; width:390px; margin-bottom:30px; margin-top:30px; margin-left:calc(50% - 195px);}

.StageTwo, .UnsubStageTwo {display:none;}

/* Why Did I Get This > Unsub 2 Stage */
.UnsubStageTwo > .SummaryButton { margin-left: calc(50% - 252px); }
.UnsubStageTwo > .ProceedBtn { margin-left: calc(50% - 90px); margin-top: 25px; }
.SummaryButton.Error, .SummaryButton.Error .SummaryButtonTitle { border-color: #f26b6a;}

@media only screen and (max-width: 1020px) {
	.SummaryButtonContainer {width:950px; margin-left:calc(50% - 478px);}
	.SummaryButton {width:435px;}
	.Comments {width:873px; margin-left:calc(50% - 446px);}
	.ResultHover { width:434px;}
	.SummaryButtonTitle {width:359px; font-size:16px;}
	.SuccessfullyUnsubscribedText {font-size:26px;}
}

@media only screen and (max-width: 900px) {
	.UserName {margin-top:70px;}
	.SummaryButtonContainer {width:100%; margin-left:0; padding:0; margin-top:20px;}
	.SummaryButton, .Comments {width:calc(94% - 2px); margin-left:3%; margin-bottom:10px;}
	.Comments {width:calc(94% - 22px);}
	.SummaryButtonTitle {width:calc(100% - 80px); height:100%; font-size:15px; line-height:normal; overflow:hidden; display:table;}
	.SummaryButtonTitle span {vertical-align:middle; display: table-cell; word-break: nowrap;}
	.SuccessfullyUnsubscribedText {font-size:26px;}
}

@media only screen and (max-width: 600px) {
	.SourceContainer {margin-top:30px; width:96%; margin-left:2%;}
  .ProceedContainer {width:180px; margin-top:10px; margin-left:calc(50% - 90px); }
	.ProceedBtn {margin-top:20px; }
}