@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}
textarea {
  resize: none;
}
#grouplisting::-webkit-scrollbar:vertical,
#tempfields::-webkit-scrollbar:vertical,
#div-target::-webkit-scrollbar:vertical,
#withoutEdit::-webkit-scrollbar:vertical {
    width: 10px;
}
#grouplisting > .scroll-pane,
#tempfields > .scroll-pane,
#div-target > .scroll-pane,
#withoutEdit > .scroll-pane {
	-fx-vbar-policy:always; /* Control the vertical ScrollBar (always,needed,never) */
}


}
#grouplisting::-webkit-scrollbar-thumb,
#tempfields::-webkit-scrollbar-thumb,
#div-target::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.tmpLst::-webkit-scrollbar {
    -webkit-appearance: none;
}
.tmpLst::-webkit-scrollbar:vertical,
#div-target::-webkit-scrollbar:vertical,
#withoutEdit::-webkit-scrollbar:vertical {

    width: 10px;
}
.tmpLst::-webkit-scrollbar:horizontal,
#div-target::-webkit-scrollbar:horizontal,
#withoutEdit::-webkit-scrollbar:horizontal  {
    display:none;
}
.tmpLst::-webkit-scrollbar-thumb,
#div-target::-webkit-scrollbar-thumb,
#withoutEdit::-webkit-scrollbar-thumb   {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}


body {width:100%; height:auto; margin:0 auto; padding:0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background:#eeeff3;}

img {border:thin none #0066FF;}

p, h1, h2, h3, h4, h5, h6, ul, li {
	margin:0px;
	padding:0px;
	list-style-type:none;
}

.darkhide {
	display:none;
}
.lighthide {
	display:block;
}
a {text-decoration:none}

button:focus {outline:0;}

button.active.focus,
button.active:focus,
button.focus,
button.focus:active,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-offset: 0  !important;
  background-image: none  !important;
  -webkit-box-shadow: none !important;
  box-shadow: none  !important;
}
.light-mode {
	width:16px;
	height:16px;
	border-radius:10px;
	background:#f8f9fc;
    margin-left: 34px !important;
    position: relative;
    margin-right: -28px;
	margin-top: 1px;
	float:right;
}
.dark-mode {
	width:16px;
	height:16px;
	border-radius:10px;
	background:#7a8095;
    display: inline-block;
    margin-left: 34px !important;
    position: relative;
    margin-right: -28px;
	float:right;
	display:none;
	margin-top: 1px;

}
.layergradient {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(0,0,0,0.4));
    position: absolute;
    border-right: 1px solid rgba(255,255,255,0.7);
    border-left: 1px solid rgba(255,255,255,0.7);
    top: 0;
    border-top: 1px solid rgba(255,255,255,0.7);
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0.5;
    text-indent: -9999px;
    font-size: 0px;
    text-transform: capitalize;
}
.layergradient:hover {
	cursor:pointer;
}
.magic {clear:both; padding:0px; margin:0px;  height:0px; width:0px;}
.prcpg { background:#eeeff3;;}
.pagep {min-width:1200px; height:auto; margin:0 auto;}
.inrbdr {padding:35px 0px 0px 0px; }

.clmA {width:36%; float:left;  padding:0 1% 0 2.5%;}
.clmB {width:57%; float:left; padding:0 2.5% 0 1%;}
.clmA, .clmB { margin:0 0 14px 0; }

.whtBx { border:1px solid #dadbdc; background:#f9fafc; border-radius:8px; padding:30px; margin-bottom:2vh; min-height:303px;height:36vh;}
.whtBx2 { border:1px solid #dadbdc; background:#f9fafc; border-radius:8px; padding:30px; margin-bottom:0px; min-height:243px !important;height:29.5vh }

.hdlneBx {padding:0 0 21px 0; }
.hdlneBx h1 {color:#000000; font-weight:normal; font-size:18px; float:left;font-family: 'Montserrat', sans-serif;}

.rghtHd {color:#767676; font-size:14px; float:right; line-height:19px;}

.brdr {border:1px solid #e3e3e3; border-radius:6px;}

.srcin {border:0; outline:0; padding:0px 17px; border-bottom:1px solid #e3e3e3; height:48px; line-height:38px; box-sizing:border-box; background:#fff; width:100%; font-size:18px;-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}

.tmpLst {
  background:#FFFFFF;
  min-height:177px;
  height:21vh;
  overflow-x:hidden;
  overflow-y:scroll;
  padding:10px 5px 10px 5px;
  -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}


.pstCode::-webkit-scrollbar {
    -webkit-appearance: none;
}
.pstCode::-webkit-scrollbar:vertical {
    width: 11px;
}
.pstCode::-webkit-scrollbar:horizontal {
    display:none;
}
.pstCode::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}
.pstCode::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
}

.tmpUl {}
.tmpUl li {padding:8px 10px;}

.tmpUl li h5 {line-height:21px; float:left; padding: 2px 0 00 0;margin:-2px 0px -3px 0px;}
span.grnRnd {display:inline-block;  height:14px; width:14px; border-radius:50%;vertical-align:top;     margin: 0 6px 0 0;}
.rghtHd span.grnRnd {margin:0 0 0 4px;}
.tmpUl li h5 a {color:#3e82fe; font-size:18px; font-weight:normal;vertical-align:top; display:inline-block}
.tmpUl li h5 a:hover {color:#0d56da;}

.edit { float:right; position:relative; }
  .edtMnu { position:fixed; z-index:999; visibility: hidden;opacity:999;width:170px;
  transform: scale(0);
  -webkit-box-shadow: 0px 0px 0px 3px rgba(222,222,222,1);

-moz-box-shadow: 0px 0px 0px 3px rgba(222,222,222,1);
box-shadow: 0px 0px 0px 3px rgba(222,222,222,1);border-radius:8px;margin-top:-35px;margin-left:-10px;
    /*-webkit-transition: all 0.28s ease-in-out 0s;
  transition: all 0.28s ease-in-out 0s;*/
  }
/*.edit:hover .edtMnu {visibility:visible;  opacity:1;}*/
  ul.edtLst {background:#fff; border-radius:6px;  padding:0 0 12px 0;}
.edit:hover ul.edtLst {       }
  ul.edtLst li {border-bottom:1px solid #eeeeee; padding:0;}
ul.edtLst li:nth-child(even) {background:#fff;}

  ul.edtLst li a {color:#009cff; font-size:18px; padding:9px 10px; display:inline-block; display:inline-block; box-sizing:border-box; width:100%}
  ul.edtLst li a:hover {background:#eeeeee; }

  ul.edtLst h4 {font-size: 18px;
    color: #aaaaaa;
    font-weight: normal;
    padding: 15px 10px;}
  ul.edtLst h4 img { margin: 0 6px 0 0;   width: 14px;
    position: relative;
    top: 1px;}
  .grpM {}
  .grpM h6 {padding:9px 10px; font-weight:normal; font-size:18px;color:#009cff; float:left;}

.rghtHd { width:auto; width:60%;  }
.rghtHd .nameSelectedTemp { width:auto; max-width:80%;
    white-space: nowrap;     display: inline-block;
    overflow: hidden; float:right;
    text-overflow: ellipsis;
    text-align:right;}
.maskX {     display: none;   position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;}

.clrBtnA {background:#f4f4f5; float:right; border-radius:6px;margin:5px 10px 0 0;}
span.clrBxA {    display: inline-block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    vertical-align: top;    margin: 6px 10px 0;
}
.rgtIcn {border-left:1px solid #b6b6b6; float:right; height:26px; padding:0 10px; cursor:pointer; }
.rgtIcn img {position:relative; top:8px;}


.edBtn {font-size:18px;color:rgba(118, 118, 118, 0.5); cursor:pointer;    line-height: 18px;}
.edBtn:hover {color:rgba(118, 118, 118, 0.7);}
.edBtn img {    vertical-align: top;    opacity: 0.17;    width: 14px;    position: relative;    top: 2px;margin-right:6px;}
.edBtn:hover img {opacity:0.25;}

.quea {display:inline-block;    top: 2px;
    position: relative;    margin: 0 0 0 3px;}
.quea img {    width: 14px;
    opacity: 0.27;
}
.quea:hover img {     opacity: 0.57;}

.shdw {    box-shadow: 2px 2px 0px #e3e3e3;}

.frmBxA {}

.infld {width:100%; border:1px solid #e3e3e3; line-height:34px; font-size:18px; padding:6px 17px 5px 16px; box-sizing:border-box;
    border-radius:8px; color:#767676; outline:none;font-family:Helvetica;}
.clmXa > .infld {height:47px;}

.templateFieldsInput .infld {
	width:99.6% !important;
}

.infld2 {width:100%; border:1px solid #e3e3e3; line-height:45px; font-size:18px;  box-sizing:border-box;
    border-radius:8px; color:#767676; padding:0 0 0 14px; cursor:pointer;background: #fff;}
.drpIcn {
  border-left:1px solid #CCCCCC;
  display:inline-block;
  float:right;
  height:46px;
  text-align:center;
  width:46px;
}
.drpIcn img {width:12px;    position: relative;
    top: 44%;}
.clmXa {width:50%; float:left; box-sizing:border-box; padding:0 6px 0 0; margin:0px !important;  }

.clmXb {width:50%; float:left; box-sizing:border-box; padding:0 0 0 6px; margin:0px !important; }
.clmXbIn {position:relative;}
.grupBox {
	position: absolute;
	background: #fff;
	border-left: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
	box-sizing: border-box;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	padding-bottom:20px;
}
.grupBox2 {
	position: absolute;
	background: #fff;
	border-top: 1px solid #e3e3e3;
	border-left: 1px solid #e3e3e3;
	box-sizing: border-box;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	padding-bottom:20px;
	margin-left:-1px !important;
}
#edit_groups {
	background:url(../images/light-edit.jpg) !important;
	background-repeat:repeat;
}

  .pbxA {padding:7px 12px; border-bottom:1px solid #e3e3e3; max-height:240px;overflow:auto; }
  .pbxB {padding:18px 14px 14px 21px;}

.pbxA {}
ul.lstGrpA {font-size:0;}
ul.lstGrpA li {display:inline-block; width:100%; padding:5px 0;}

ul.lstGrpA li h4 {color:#3e82fe; font-size: 18px;
    font-weight: normal;
    vertical-align: top;
    display: inline-block;cursor: pointer;}
ul.lstGrpA li h4 span {    display: inline-block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    vertical-align: top;
    margin:3px 4px 0 0;
    }

.action {color:#cfcfcf; font-size:18px; float:right;}
.action a {color:#cfcfcf; margin:0 0 0 8px;}
.action a:hover {color:#767676;}

.grpRw {width:100%; display:inline-block;}

.gpClmA {width:60%; float:left; box-sizing:border-box; padding:0 6px 0 0;}
.gpClmB {width:40%; float:right; box-sizing:border-box; padding:0 0 0 6px;}

.grpRw label {padding:0 0 10px 00; display:inline-block; color:#000; font-weight:600;}

.clrBxOpn {width:100%; border:1px solid #e3e3e3; line-height:34px; font-size:18px; padding:0 10px; box-sizing:border-box;
    border-radius:3px; color:#767676; outline:none; cursor:pointer;}
.clrBxOpn span {display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin: 0px 4px 0 0;
    position: relative;
    top: 1px;}
.gBtnRw {width:100%; display:inline-block; padding:12px 0 0 0;}
.gBtnRw .bluBtn {float:left;}
.gBtnRw .redBtn {float:left;}



.clmXc {padding:12px 0 0 0;}
.clmXc .infld {min-height:153px;}

.clmXd {padding:12px 0 0 0;}
.clmXd input[type=radio] {position:absolute; opacity:0;}
.clmXd input[type=radio] + label {
  font-style: normal;
  color:rgba(118, 118, 118, 0.7); font-size:18px;
}
.clmXd input[type=radio]:checked + label { color:rgba(118, 118, 118, 1);}

.clmXd input[type=radio] + label span {display:inline-block; width:14px; height:14px; box-sizing:border-box; border:1px solid #bec2c4; position:relative; background:#FFF;
  top: 4px;
    border-radius: 50%;
    margin: 0 2px 0 0;
    vertical-align: top;}
.clmXd input[type=radio]:checked + label span {border:4px solid #518cf1;}

.rdo {float:left;    padding: 7px 0;}
.bluBtn {
  background:#009CFF;
  border:0;
  border-radius:8px;
  color:#FFFFFF;
  float:right;
  font-size:18px;
  height:36px;
  line-height:36px;
  outline:0;
  padding:0 14px;
  width:26%;
  overflow:hidden;
}
.genarateTemplate {
  width:50% !important;
}
.showEmailcontent .shdw {
  overflow-y: scroll;
}
.bluBtn:hover {opacity:0.8; cursor:pointer;}

.redBtn {background:#da1b1b; color:#fff; font-size:18px; border:0; outline:0; float:right; height:34px; line-height:30px; border-radius:4px; padding:0 24px;}
.redBtn:hover {background:#b11b1b; cursor:pointer;}

.rghtHd .grnRnd {    position: relative;  float:right;  top: 2px;margin-right:6px !important;}

.clmXe {margin:0 0 12px 0;}
.clmXf {margin:0 0 12px 0;}
.clmXg {display:inline-block; width:100%;}
.infldb {
  background:#FFFFFF;
  border-radius:8px;
  height:50px;
  padding:6px 17px 5px 16px !important;
}
.templateFields select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  padding:6px 17px 5px 16px !important;
  background:url(../images/drpdn.jpg) #FFF;
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.clmXg .bluBtn {float:left;}


.tmptShow {
  background:#FFFFFF;
  border:1px solid #E3E3E3;
  color:#767676;
  min-height:188px !important;
  height:23vh;
  padding:16px 16px 16px 19px;
  font-size:18px;
  overflow:hidden;
  border-radius:8px;
  line-height:24px;
}
#withoutEdit {
	line-height:24px;
	padding-top: 13px;
    padding-left: 20px;
    padding-bottom:15px;
    min-height:153px;
    height:18.6vh;
}

/*---------------*/
.overlYa {position: fixed;
    z-index: 9999999;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background:#2f3e55;
    opacity: 0.7;
    will-change: opacity;
    display:none;
  }
.popUp {
  	max-width:846px;
  	height:686px;
    background-color: #fafafa;
    border-radius: 6px;
    box-shadow:0px 2px 8px 1px rgba(0,0,0,0.22);
    z-index: 99999999;
    display: none;
    /*
    top:5%;
    position: fixed;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    will-change: top, opacity;
    */
    top: 48%;
    left: 50%;
    margin-left:-423px;
    margin-top:-343px;
    position:absolute;
}
.open { opacity: 1; transform: scaleX(1);top:20px;}

.clsBtn {float: right; font-size: 24px !important; margin-bottom: -25px; z-index: 10001; cursor: pointer; font-weight: bold !important; position: relative; top: 21px; left: -21px; opacity: 0.3;}
.clsBtn:hover {opacity:1;}
.clsBtn:hover, .clsBtn:focus {background-color:transparent;}


.popCntn {padding:33px 40px 37px 40px;}
.popCntn h1 {font-size:18px;}

.clmPa {width:60%; float:left; box-sizing:border-box; padding:0 8px 0 0;margin-right:12px;}
.clmPb {width:37%; float:right; box-sizing:border-box; padding:0 0 0 8px;}

.smlTxt {
  color:#767676;
  font-size:18px;
  line-height:27px;
  margin-bottom:16px;
  padding:10px 0 14px;
}

.codBx {}
.pstCode {
	min-height:468px;
	height:468px;
	overflow:auto;
	width: 100%;
    border: 1px solid #e3e3e3;
    line-height:24px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #000; outline:none;
    padding: 18px 20px 18px 20px;
    background:#FFF;
    cursor: pointer;}

.fldXa, .fldXb {padding:12px 0 18px;}
.fldXb {width:276px;}
.fldXa .infld { text-align:center;}

.rdBx {    width: 100%;
    border: 1px solid #e3e3e3;
    line-height: 34px;
    font-size: 18px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 8px; margin:10px 0 18px;
    background:#FFF;}
.rdBx .rdo {width:100%; float:none; padding:0;}
.rdBx .clmXd input[type=radio] + label {display:inline-block; vertical-align:top; font-size:18px;}
.rdBx .clmXd {padding:6px 2px;}
.rdBx .clmXd input[type=radio] + label span {vertical-align: middle;
    top: -1px;
    position: relative;
}

.minHtBx {min-height:223px;}
.fldXa {}
.btnxA {}

.gryBtn {width:100%;  text-align:center;  background: #b7b7b7;
    color: #fff;box-sizing:border-box;
    font-size: 18px;
    border: 0;
    outline: 0;
    display:inline-block;
    height: 38px;
    line-height: 38px;
    border-radius: 8px;
    padding: 0 24px;
}
.gryBtn:hover {
	opacity:0.8;
}
.btnxB {padding:12px 0 0 0;}
.svBtn {
	box-sizing:border-box;
	display:inline-block;
	background: #009cff;
    color: #fff;text-align:center;
    font-size: 18px;
    border: 0;
    outline: 0;
    height: 38px;
    line-height: 38px;
    border-radius: 8px;
    padding: 0 24px;
	width:100%;
}
.svBtn:hover {
	opacity:0.8;
}
.selectedGroup span{
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: top;
    margin: 16px 8px 0 3px !important;
}
.grp0pn,
.selectedGroup,
.drpIcn img {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.Clabel {


border-radius: 4px; text-shadow: none; font-size: 12px; padding: 3px 5px 3px 5px; background-color: #eeeff3!important; text-transform: uppercase; font-weight: 700; line-height: 15px !important; color: #a8b3c4; margin-right: 5px; height: 14px !important; display: inline-block; position: relative; top: -2px; margin-left: 3px;

/* border-radius: 4px; text-shadow: none; font-size: 12px; font-weight: normal; padding: 4px 6px 3px; background-color: #eeeff3!important; text-orientation: upright; text-transform: uppercase; font-weight: 700; color: #a8b3c4; margin-right:6px;
*/


}

.selectTemplate {
  display:inline-block;
}
.cNotify {
  background:#c2c2c2;
  border-radius:8px 0;
  display:none;
  font-size:12px !important;
  font-weight:bold;
  height:30px !important;
  left:0;
  line-height:1px;
  margin-left:10px;
  margin-top:-34px;
  padding:0 15px 4px;
  position:relative;
  text-transform:uppercase;
  width:200px;
}
.addOption {
  float:left;
  height:29px;
  margin-bottom:5px;
  margin-right:13px;
  padding-left:1px;
  color:#009cff;
}
.addOption img {
  position:relative;
  top:1px;
}
.removeOption {
  float:left;
  height:29px;
  margin-bottom:5px;
  padding-left:1px;
  color:#009cff;
}
.removeOption img {
  position:relative;
  top:1px;
}
/* Color picker changes */

.sp-replacer {
  background:#FFFFFF !important;
  border:1px solid #E3E3E3 !important;
  border-radius:8px !important;
  color:#333333 !important;
  cursor:pointer !important;
  display:inline-block  !important;
  margin:0 !important;
  overflow:hidden !important;
  padding:11px !important;
  vertical-align:middle !important;
  box-shadow:#E3E3E3 2px 2px 0 !important;
  height:23px !important;
}
.sp-preview {
  border:0 !important;
  border-radius:22px !important;
  float:left !important;
  height:15px !important;
  margin-bottom:8px !important;
  margin-right:8px !important;
  overflow:hidden !important;
  padding-bottom:0 !important;
  position:relative !important;
  top:4px !important;
  width:15px !important;
  z-index:0 !important;
}
.sp-dd {
  background:url("../images/drop.png") no-repeat !important;
  float:left !important;
  font-size:10px !important;
  line-height:12px !important;
  margin-left:11px !important;
  margin-right:5px !important;
  margin-top:8px !important;
  padding:2px 0 !important;
  text-indent:-9999px !important;
  width:13px !important;
}


a.selectTemplate{
  width:260px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

a.selectTemplate:hover{
}
select:required:invalid {
  color: #767676 !important;
}
option[value=""][disabled] {
  display: none !important;
}
option {
  color: black !important;
}
.sp-container {
  background:#FFF !important;
  border:1px solid #E3E3E3;
  -webkit-border-radius: 8px !important;
	-webkit-border-top-left-radius: 8px  !important;
	-moz-border-radius: 8px !important;
	-moz-border-radius-topleft: 8px  !important;
	border-radius: 8px !important;
	border-top-left-radius: 8px  !important;
	box-shadow:#E3E3E3 2px 2px 0;
}
.sp-replacer:hover,
.sp-replacer:active,
.sp-replacer {
  border:1px solid #E3E3E3 !important;
}
.createGroup {
  width:166px !important;
}

.sp-container button {
  background:#009CFF !important;
  border:0 !important;
  border-radius:8px !important;
  color:#FFFFFF !important;
  font-size:18px !important;
  height:36px !important;
  line-height:30px !important;
  margin-right:12px !important;
  margin-top:15px !important;
  outline:0 !important;
  padding:0 14px !important;
  width:135px !important;
  text-transform:capitalize !important;
  text-shadow:none !important;
  font-family:Helvetica !important;
  font-size:18px !important;
 }
.sp-container button:hover,
.sp-container button:active {
  background:#048de4 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  border:none !important;
}
.sp-picker-container, .sp-palette-container {
  padding:15px 15px 313px 15px !important;
}
.sp-choose {
  float:left;
}
.sp-cancel {
  font-family:Helvetica;
  color:#3e82fe !important;
  font-size:18px !important;
  position:absolute !important;
  margin-top:54px !important;
    text-decoration:none !important;
}
.sp-cancel:hover,
.sp-cancel:active {
  color:#0d56da !important;
}
.sp-sat, .sp-val {
  border-radius:8px;
}
.sp-palette-button-container, .sp-button-container {
  float:left !important;
}
.sp-color,
.sp-hue {
  border-radius:8px;
}
.sp-thumb-el,
.sp-thumb-inner {
  border-radius:15px;
}
.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el:active {
  border:solid 1px #d0d0d0 !important;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
  border:solid 1px #d0d0d0 !important;
  border-color:#d0d0d0 !important;
}
.templateFieldsInput {
  min-height:139px;
  height:17vh;
  margin-bottom:15px;
  overflow-x: hidden;
  overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

.templateFields::-webkit-scrollbar {
    -webkit-appearance: none;
}
.templateFields::-webkit-scrollbar:vertical {
    width: 11px;
}

.templateFields::-webkit-scrollbar:horizontal {
    display:none;
}

.templateFields::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #F9FAFC; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, 0.5);
}

.templateFields::-webkit-scrollbar-track {
    background-color: #F9FAFC;
    border-radius: 8px;
}
.sp-palette-row-selection {
	display:none;
}
/* End color picker */

.editGroup {
	width:166px;
}
.editCancelGroup {
	border-radius:8px !important;
	height:36px !important;

}

/* NEW CSS CODES */
.dialog div { float:left; width:100%; }
.dialog a { color:#509CFF; }

.header, .mobileheader { background:#434459; padding:20px 2.5%; width:95%; }
.mobileheader { display:none; }
.header a, .mobileheader a { color:#ccc; }


a {  cursor:pointer; }
.header .right { width:60%; float: right; }
.header .right a { float: right; margin-left:35px; }
.headerlogo {     width: 29px;height: 32px; }

.dialog {  top:48%; height:auto; width:540px; overflow:hidden; left:50%; background:#fff; border-radius:8px;  z-index:101; transform: translate(-50%, -50%);}

.film {  top:0; left:0; width:100%; height:100%; background:#2f3e55;opacity: 0.7; z-index:99; }
#restrictivefilm { z-index:100 !important; display:block !important;  }

#changeplandialog { width:900px;}
#planchangeddialog, #changeplandialog, #myprofiledialog, #billingerrordialog { padding-bottom:40px; }
#myprofiledialog, #billingerrordialog { width:700px;}

.iconwrapper { width:100%; float:left;  }
.material-icons.closey { float: right; font-size: 24px; margin-bottom: -25px; z-index: 10001; cursor: pointer; font-weight: bold; position: relative; top: 32px; left: -33px; opacity: 0.3; }
.material-icons.closey:hover,
.material-icons.clsbtn:hover {
	opacity:1;
}

.planbox { width:31.0% !important; border:2px solid #eee; margin-left:-2px; margin-right:2%; padding:30px 0; padding-bottom:40px; border-radius:12px; margin-top:20px; margin-bottom:0px; }
.activeplanbox { border: 2px solid #509CFF !important; }
.planbox img { width:45px; height:50px;  }
.logo { width:75px; height:80px; }
.planbox h2 { width:100%; float: left; text-align:center; font-weight:100; font-size:36px; padding-bottom:10px;font-weight:normal !important; }
.planbox h3 { width:100%; float:left; text-align:center; margin-bottom:20px; font-family: 'Montserrat';-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-weight:normal !important;}
.planbox p { text-align:center; width:100%; background:#fafafa; border-top:1px solid #e2e2e2; color:#92979e !important;padding:15px 0 !important; }
.planbox p b {color:#000 !important;font-weight:normal;}
.planbox button { border-radius:12px; background:#66CA00; color:white; cursor:pointer; border:none; padding:15px 0; font-size:18px; font-weight:600; width:80%; }
.proceedbtn { padding:15px 30px; color:#fff; font-size:22px;cursor:pointer; border-radius:12px; background:#509CFF; border:none; }

.fullsection, .halfsection { background:#FAFAFA; padding:20px 0; }
.fullsection { padding:25px  5%; width:90% !important; margin-top:20px; }
.halfsection { width:40% !important; height:106px; padding:25px 5%; }
.fullsection label, .halfsection label { float: left; margin-bottom:15px; font-size:20px; font-weight:400; }
.fullsection input { border-radius:10px; border: 1px solid #ccc; width:35%; padding:10px 5%; font-size:16px; }
.fullsection button, .halfsection button { border:none; background:#999999; color:#fff; padding:14px 35px; font-size:18px; border-radius:12px;  }

.dialog h1 { width:100%; font-family: 'Montserrat', sans-serif;float:left; text-align:center; font-size:30px; letter-spacing:1px; padding:30px 0; padding-bottom:10px; font-weight:normal !important;}
.dialog h2 { text-align: center; width: 100%; float: left; margin: 1px 2px 0px 0px; font-family: 'Montserrat';font-weight:normal !important; }
.dialog p { float:left; width:100%; text-align:center; padding:5px 0; color:#aaa;line-height:25px; }

.dialog, .film  { display:none; }

.dialog, .film { position:fixed; }

.gobackbtn { position:relative;top:20px; margin-left:20px; float:left;background:url(../images/backglyph.png);background-size:100%;width:20px;height:20px;opacity:0.6;font-size:0px;text-indent:-999px;text-transform:capitalize;font-color:#FFF;}
.gobackbtn:hover {opacity:1;}

.dialog form label { float: left; width:21.5%; margin-left:7.5%; padding:10px 0; font-weight:600; }
.dialog form input { float: left; width:51.5%; margin: 0 5%; background:#fff; padding:10px 3%; border-radius:5px; border: 1px solid #ccc;font-size:16px;  }
.dialog form button { background:#509CFF; color:#fff; padding:15px 25px;cursor:pointer; font-size:18px; border-radius:10px;border:none;  }
.dialog form button:hover {opacity:0.8;}

.dialog .bottombar { background:#F2F4F8; padding:40px 0;border-top:1px solid #e6e6e6;margin-top:13px;}
.dialog .bottombar p { color:#2e2e2e; }

.currentplanbtn { background:#efefef !important; color:#2e2e2e !important; }
.material-icons.checkcircle { font-size:80px; color:#4DD335; }
/* utility classes */
.margintopsm { margin-top:15px; }
.margintopmed { padding-top:25px; }
.maketextred { color:red; }
.makeblue { color:lightblue !important; }

@media screen and (max-width:900px) {
	#headerupgradebtn { display:none; }
	.header .right { width:70%; }
}
.confirmdelete {
	background:#fffbe7; border:1px solid #f5dbb7; border-radius:7px; padding:15px !important; margin-top:10px; color:#795e3a !important; line-height:25px; width:91% !important;
}
.planimg {
	width:48px;height:52px;
}
.loginlogo {
	width:77px;height:83px;
}
#customtooltip {
	border:1px solid #ead292 !important;
	border-radius:7px !important;
	padding:20px !important;
	line-height:20px !important;
	width:240px !important;
	background:#fff5ce !important;
	font-family:Helvetica !important;
	font-size:14px !important;
}
.addtemplate-radios {
	float:left !important;position:static !important;opacity:1 !important;margin-right:7px !important;position:relative !important;top:-1px !important;
}
#card-errors {
	text-align:center;
	color:red;
	margin-top:9px;
}
.gradient-container {
  overflow: hidden;
  width:100%;
}
.gradient {
  background: url("../images/gradient.jpg");
  background-repeat:no-repeat;
  height: 4px;
  width:100%;
  background-size: cover;
}
#edit_groups {
	background:#fffcf0;
    padding-bottom: 34px;
    margin-bottom: -20px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#editback {
	display: inline-block;
	float: left;
	position: relative;
	top: 1px;
	left: -20px;
	margin-right: -6px;
}
.fluid-width-video-wrapper {
	border-radius:16px;
	overflow:hidden;
}
.edittemplate {
	border-bottom:1px solid #eee;
}
.tmpUl > div > .edittemplate {
	border-bottom:0px;
}
/*
.gradient {
  background: url("../images/gradient2.jpg");
  background-repeat:repeat-x repeat-y;
  height: 4px;
  width: 5832px;
  animation: slide 10s linear infinite;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-2916px, 0, 0);
  }
}
/*