/* ACCOUNT PAGE */
:root {
	--black0:#000;
	--gray11:#111;
	--gray22:#222;
	--gray33:#333;
	--gray44:#444;
	--gray55:#555;
	--gray66:#666;
	--gray77:#777;
	--gray88:#888;
	--gray99:#999;
	--graycc:#ccc;
	--graydd:#ddd;
	--grayee:#eee;
	--whiteF:#fff;
	--orange:#EE613D;
	--bluess:#348CCB;
	--bluhov:#2F7EB7;
	--greens:#008000;
	--bggray:#f9f9f9;
	--bgreds:#fff8f8;
	--shadow1:0px 3px 15px 0px rgba(0,0,0,0.1);
	--shadow2:0px 3px 15px 0px rgba(0,0,0,0.2);
	--fonts:'Roboto', sans-serif;;
}

#bgaccountpage {width:100%;margin:0 auto;padding:50px 0;}
#boaccountpage {width:1200px;margin:0 auto;padding:0;}

#accountpagelog {width:100%;margin:0;padding:0;display:flex;align-items:center;background:var(--whiteF);box-shadow:0 3px 15px 0 rgba(0,0,0,0.1);}

/* LEFT COL */
#accountpagelogleft {width:35%;margin:0;padding:20px 0 20px 20px;}

/* FORM */
#bgboxforms {width:100%;margin:0 auto;}
#boboxforms {margin:0 auto;padding:0;}
#boxformstop {margin:0 auto;padding:0;}
#boxformsfot {margin:10px auto 0;padding:10px 0 0;text-align:center;border-top:1px solid var(--graydd);;}
/* GOOGLE LOGIN */
.boxformsfottop {font-weight:400;font-size:16px;font-family:var(--fonts);text-align:center;}
.boxformsfotbot {font-weight:400;font-size:30px;font-family:var(--fonts);text-align:center;}

/* HEAD */
#boxformshead {margin:0 auto;padding:0;font-family:var(--fonts);text-align:center;}
.boxformsheadtit {margin:0;padding:0;}
.boxformsheadtit h1 {font-weight:700;font-size:20px;}
.boxformsheaddes {margin:0;padding:0;}
.boxformsheaddes h2 {font-weight:400;font-size:16px;color:var(--gray22);}
/* BODI */
#boxformsbodi {margin:20px 0;padding:0;}
#boxformsrow {margin:0 auto 10px;padding:0;}
#boxformsinput {width:100%;margin:0;padding:0;background:var(--whiteF);}
.loginform {width:100%;margin:0;padding:2%;border:1px solid #ccc;font-weight:400;font-size:16px;font-family:var(--fonts);text-align:left;background:var(--whiteF);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:3px;color:var(--gray66);}
.loginform:focus {border-color:rgba(82, 168, 236, 0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);outline:0 none;}
/* FOOTER */
#boxformsfoot {width:100%;margin:0;padding:0;display:flex;}
#boxformsfoot a {font-weight:700;color:var(--orange);}
#boxformsfoot a:hover {color:var(--bluess);}
#boxformsfootleft {width:50%;margin:0;padding:0;font-weight:400;font-size:16px;font-family:var(--fonts);}
#boxformsfootrite {width:50%;margin:0;padding:0;font-weight:400;font-size:16px;font-family:var(--fonts);text-align:right;}
#boxformsfootfull {width:100%;margin:0;padding:0;font-weight:400;font-size:16px;font-family:var(--fonts);text-align:center;}

/* VALIDASI PASSWORD */
.error-msg {color:var(--orange);font-size:12px;display:none;margin-top:4px;}
.loginform.input-error {border:1.5px solid var(--orange)!important;background-color:var(--bgreds);}
.pwd-requirements {list-style:none;padding:0;margin-top:10px;color:var(--gray77);font-size:14px;}
.pwd-requirements li::before {content:"✔";display:inline-block;width:20px;color:var(--graycc);}
.pwd-requirements li.valid {color:var(--bluess);}
.pwd-requirements li.valid::before {color:var(--bluess);}
.submitbutton:disabled {background-color:var(--graycc)!important;cursor:not-allowed;opacity:0.7;}

/* CONFIRM PAGE */
#bgconfirmpage {margin:0 auto;padding:0;text-align:center;}
#confirmpagehead {margin:0 auto;padding:0;}
.confirmimg {width:80px;height:80px;overflow:hidden;margin:0 auto;padding:0;}
.confirmimg img {width:80px;height:80px;}
#confirmpagebodi {margin:0 auto;padding:0;}
.confirmtite {margin:10px auto;padding:0;font-weight:700;font-size:18px;text-transform:uppercase;color:var(--orange);}
.confirmtits {margin:10px auto;padding:0;font-weight:700;font-size:18px;text-transform:uppercase;color:var(--greens);}
.confirmdes {margin:0 auto 20px;padding:0;font-weight:400;font-size:16px;}
#confirmpagefoot {margin:0 auto;padding:0;display:flex;}
.confirmbtnleft {width:50%;margin:0 auto;padding:0 1%;}
.confirmbtnrite {width:50%;margin:0 auto;padding:0 1%;}
.confirmbtnfull {width:100%;margin:0 auto;padding:0;}

/* RIGHT COL IMAGE */
#accountpagelogrite {width:65%;margin:0;padding:20px;}
.accountpagelogimg {width:100%;height:auto;overflow:hidden;line-height:0;}
.accountpagelogimg img {width:100%;height:auto;line-height:0;}
@media screen and (max-width:980px)
{
	
}
/* ==================================================================================================== */







/* PANEL AKUN */
#bgpanel {width:auto;margin:0 auto;padding:20px 0;}
#bopanel {width:1200px;margin:0 auto;padding:0;}
#paneltitle {margin:0 auto 10px;padding:8px 11px;font-weight:700;font-size:16px;background:var(--bluess);color:var(--whiteF);text-transform:uppercase;border-radius:2px;}
/* LEFT */
#panelleft {width:28%;float:left;margin:0 2% 0 0;padding:1%;background:#fff;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.1);position:sticky;top:130px;}
#bgaccmenu {margin:0 auto;padding:0;}
#bgaccmenu ul {list-style:none;margin:0 auto;padding:0;}
#bgaccmenu ul li {margin:0 auto;padding:5px;border-bottom:1px solid #ddd;}
#bgaccmenu ul li a {color:#333;}
#bgaccmenu ul li a:hover {color:var(--orange);}
/* RIGHT */
#panelrite {width:70%;float:left;margin:0 auto;padding:1%;background:#fff;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.1);}
#bgpanelpage {margin:0 auto;padding:0;}
#panelpagebox {width:49%;float:left;margin:0.5%;padding:0;box-sizing:border-box;}
.panelpagetext {margin:0 auto 5px;padding:5px 8px;background:#f9f9f9;color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
.panelpagebutt {margin:0 auto;padding:0;border-top:1px solid var(--grayee);}
@media screen and (max-width:980px)
{
	#bgpanel {width:auto;margin:0 auto;padding:20px 0;background:#f8f8f8;}
	#bopanel {width:100%;margin:0 auto;padding:0;}
	#paneltitle {margin:0 auto 10px;padding:8px 11px;font-weight:700;font-size:16px;background:var(--orange);color:#fff;text-transform:uppercase;border-radius:2px;}
	/* LEFT */
	#panelleft {width:80%;float:none;margin:0 auto 5%;padding:5%;background:#fff;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.1);}
	#bgaccmenu {margin:0 auto;padding:0;}
	#bgaccmenu ul {list-style:none;margin:0 auto;padding:0;}
	#bgaccmenu ul li {margin:0 auto;padding:5px 8px;border-bottom:1px solid #ddd;}
	#bgaccmenu ul li a {color:#333;}
	#bgaccmenu ul li a:hover {color:var(--orange);}
	/* RIGHT */
	#panelrite {width:80%;float:none;margin:0 auto;padding:5%;background:#fff;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.1);}
	#bgpanelpage {margin:0 auto;padding:0;}
	#panelpagebox {width:100%;float:left;margin:0 auto 5%;padding:0;box-sizing:border-box;}
	.panelpagetext {margin:0 auto 5px;padding:5px 8px;background:#f9f9f9;color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
	.panelpagebutton {margin:10px auto 0;padding:10px 0 0;border-top:1px solid #eee;}
}
/* ==================================================================================================== */


/* FORM DASHBOARD */
#gformcontain {width:100%;margin:0;padding:0;}
#gformrow {margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #eee;}

#gformlabeli {width:30%;float:left;padding:0 10px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;box-sizing:border-box;}
#gformlabele {width:30%;float:left;padding:0 10px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;box-sizing:border-box;}
#gforminput {width:70%;float:right;padding:5px 8px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;background:#f9f9f9;}
#gformedit {width:70%;float:right;}

#gformedit .gform {width:100%;padding:8.3px 8px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
#gformedit .gform:focus {border:1px solid #F89921;outline:none;}

#gformedit select {width:100%;padding:8.3px 5px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
#gformedit select:focus {border:1px solid #F89921;outline:none;}

#gformedit .gformauto {width:auto;padding:5px 8px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
#gformedit .gformauto:focus {border:1px solid #F89921;outline:none;}

#gformedit img {width:20%;height:auto;}
@media screen and (max-width: 980px)
{
	#gformcontain {width:100%;margin:0;padding:0;}
	#gformrow {margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #eee;}

	#gformlabeli {width:100%;float:left;padding:0;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;box-sizing:border-box;}
	#gformlabele {width:100%;float:left;padding:0;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;box-sizing:border-box;}
	#gforminput {width:100%;float:right;padding:5px 8px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;background:#f9f9f9;}
	#gformedit {width:100%;float:right;}

	#gformedit .gform {width:100%;padding:8px 10px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
	#gformedit .gform:focus {border:1px solid #F89921;outline:none;}

	#gformedit select {width:100%;padding:8px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
	#gformedit select:focus {border:1px solid #F89921;outline:none;}

	#gformedit .gformauto {width:auto;padding:8px 10px;text-align:left;font-weight:400;font-size:16px;font-family:var(--fonts);color:#231F20;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;}
	#gformedit .gformauto:focus {border:1px solid #F89921;outline:none;}

	#gformedit img {width:20%;height:auto;}
}
/* ==================================================================================================== */

#bgprofilepage {width:100%;margin:0 auto;padding:0;}
#boprofilepage {width:100%;margin:0 auto;padding:0;}

#bgfavoritepage {width:100%;margin:0 auto;padding:0;}
#bofavoritepage {width:100%;margin:0 auto;padding:0;}
#favoritepagetitle {font-weight:400;font-size:20px;font-family:va(--fonts);padding:0 0 2%;text-align:left;color:#F89921;}

#favoritepage {margin:0 auto;padding:10px 0;border-bottom:1px solid #ddd;display:flex;}
.favoritenam {width:90%;margin:0;padding:0;font-size:16px;}
.favoritenam a {color:var(--orange);}
.favoritenam a:hover {color:var(--bluess);}
.favoriteact {width:10%;margin:0;text-align:center}
#favoritenone {margin:0 auto;padding:50px 0;}
.favoriteico {margin:0;text-align:center;font-size:30px;}
.favoritetex {margin:0;text-align:center;font-size:16px;}

#bgsubscribepage {width:100%;margin:0 auto;padding:0;}
#bosubscribepage {width:100%;margin:0 auto;padding:0;}

#subscribepage {margin:0 auto;padding:50px 0;text-align:center;border:1px solid #ddd;display:flex;flex-direction:column;}
.subscribetit {margin:0;padding:0;font-size:16px;}
.subscribesub {margin:0;padding:0;font-weight:700;font-size:20px;}
.subscribebut {margin:0;padding:0;}
#subscribelist {margin:0 auto;padding:20px;border:1px solid #ddd;display:flex;flex-direction:column;}
#subscribelisttop {margin:0;padding:0;font-weight:700;font-size:18px;font-family:'Roboto', sans-serif;}
#subscribelistbot {margin:0;padding:0;}



#packagepage {margin:0 auto;padding:2% 0 0;border:1px solid #ddd;display:flex;flex-wrap:wrap;}
#packagepagebox {width:31.33%;margin:0 1% 2%;padding:50px 0;border:1px solid #ddd;text-align:center;}
.packagepagetit {margin:0;padding:0;font-weight:700;font-size:20px;}
.packagepagebut {margin:0;padding:0;font-weight:700;font-size:14px;}
.packagepagebut a {color:var(--orange);}

#packagedetails {margin:0 auto;padding:0;display:flex;flex-wrap:wrap;}
#packagedetailsbox {width:100%;margin:0 auto 2%;padding:0;border:1px solid #eee;display:flex;}
#packagedetailsleft {width:30%;margin:0;padding:50px;background:var(--bgreds);text-align:center;}
.packagedetailstit {margin:0;padding:0;font-weight:700;font-size:25px;}
.packagedetailstit span {margin:0;padding:0;font-weight:400;font-size:16px;letter-spacing:2px;}
#packagedetailsmidd {width:45%;margin:0;padding:50px;text-align:center;}
.packagedetailspri {margin:0;padding:0;font-weight:700;font-size:25px;}
.packagedetailspri span {margin:0;padding:0;font-weight:400;font-size:16px;}
#packagedetailsrite {width:25%;margin:0;padding:50px 20px;}
.packagedetailsbut {margin:0;padding:0;font-weight:700;font-size:14px;}
.packagedetailsbut a {color:var(--orange);}

#packagecheckout {margin:0 auto;padding:0;display:flex;flex-wrap:wrap;}
#packagecheckoutbox {width:100%;margin:0 auto 2%;padding:0;border:1px solid var(--grayee);display:flex;flex-wrap:wrap;}
#packagecheckouttop {width:100%;margin:0;padding:50px;background:var(--bgreds);text-align:center;}
.packagecheckouttit {margin:0;padding:0;font-weight:700;font-size:25px;}
.packagecheckouttit span {margin:0;padding:0;font-weight:400;font-size:16px;letter-spacing:2px;}

#packagecheckoutmid {width:100%;margin:0;padding:50px;}
#packagecheckoutmidrows {width:100%;margin:0 auto 10px;padding:0;display:flex;}
.packagecheckoutprileft {width:50%;margin:0;padding:0;font-weight:400;font-size:16px;}
.packagecheckoutpririte {width:50%;margin:0;padding:0;font-weight:400;font-size:16px;text-align:right;}

#packagecheckoutbot {width:100%;margin:0;padding:50px;border-top:1px solid var(--grayee);}
.packagecheckoutmettop {margin:0;padding:0;font-weight:700;font-size:18px;}
.packagecheckoutmetbot {margin:0;padding:0;font-weight:400;font-size:16px;}

#packagecheckoutfot {width:100%;margin:0;padding:50px 20px;background:var(--bgreds);text-align:center;}
.packagecheckoutbut {margin:0;padding:0;font-weight:700;font-size:14px;}
.packagecheckoutbut a {color:var(--orange);}

.horizontalline1 {width:100%;margin:5px auto 10px;padding:0;border:1px solid var(--grayee);}
.horizontalline2 {width:100%;margin:20px auto;padding:0;border:1px solid var(--grayee);}


/* SUBMIT BUTTON */
.submitbutton {width:100%;background:var(--bluess);border-radius:3px;border:none;display:inline-block;cursor:pointer;color:var(--whiteF);font-weight:700;font-size:16px;font-family:var(--fonts);padding:10px 0;text-align:center;text-decoration:none;margin:5% auto 0;} 
.submitbutton:hover {background:var(--bluhov);}
.submitbutton:active {position:relative;top:1px;}
/* ACTION BUTTON */
.actionbutton {width:auto;background:var(--bluess);border-radius:3px;border:none;display:inline-block;cursor:pointer;color:var(--whiteF);font-weight:700;font-size:14px;font-family:var(--fonts);padding:8px 25px;text-align:center;text-decoration:none;margin:5% auto 0;} 
.actionbutton:hover {background:var(--bluhov);}
.actionbutton:active {position:relative;top:1px;}
/* CANCEL BUTTON */
.cancelbutton {width:auto;background:var(--gray99);border-radius:3px;border:none;display:inline-block;cursor:pointer;color:var(--whiteF);font-weight:700;font-size:14px;font-family:var(--fonts);padding:8px 25px;text-align:center;text-decoration:none;margin:5% auto 0;} 
.cancelbutton:hover {background:var(--gray88);}
.cancelbutton:active {position:relative;top:1px;}
/* SELECT BUTTON */
.selectbutton {width:100%;background:var(--orange);border-radius:3px;border:none;display:inline-block;cursor:pointer;color:var(--whiteF);font-weight:700;font-size:14px;font-family:var(--fonts);padding:8px 0;text-align:center;text-decoration:none;margin:0 auto;} 
.selectbutton:hover {background:var(--bluhov);}
.selectbutton:active {position:relative;top:1px;}
.selectedbutton {width:100%;background:var(--gray99);border-radius:3px;border:none;display:inline-block;cursor:pointer;color:var(--whiteF);font-weight:700;font-size:14px;font-family:var(--fonts);padding:8px 0;text-align:center;text-decoration:none;margin:0 auto;} 


/* ALERT */
#alertbox {margin:0 auto;padding:0;}
#alertboxleft {width:2%;float:left;}
.alertimg {width:100%;height:auto;overflow:hidden;}
.alertimg img {width:100%;height:auto;}
#alertboxrite {width:97%;float:left;margin-left:0.5%;}
.alert1 {padding:8px 10px 5px;background-color:#FBD7DA;color:#761E23;border:1px solid #FDBEC3;margin-bottom:15px;}
.alert2 {padding:8px 10px 5px;background-color:#FBD7DA;color:#761E23;border:1px solid #FDBEC3;margin-bottom:15px;}
.closebtn {margin-left:15px;color:white;font-weight:normal;float:right;font-size:22px;line-height:20px;cursor:pointer;transition:0.3s;color:inherit;}
.closebtn:hover {color:black;} 
.alerttit {font-weight:700;font-size:18px;line-height:1;}
.alertdes {font-weight:400;font-size:16px;}
@media screen and (max-width:1004px)
{
	
}
/* ==================================================================================================== */