@font-face {
	font-family: 'opp-icons';
	src:url('../fonts/opp-iconsf7de.eot?8ccx8w');
	src:url('../fonts/opp-iconsf7de.eot?8ccx8w#iefix') format('embedded-opentype'),
		url('../fonts/opp-iconsf7de.html?8ccx8w') format('truetype'),
		url('../fonts/opp-iconsf7de.woff?8ccx8w') format('woff'),
		url('../fonts/opp-iconsf7de.svg?8ccx8w#opp-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*cp tabs*/
.cp-tabs .nav-tabs{
	display: block;
    list-style: none;
    /*margin-bottom: 12px;*/
}
.nav-tabs{
	padding-left: 0;
	display: block;
	height: auto;
	min-height: 32px;
	/*margin-bottom: 12px;*/
}

.nav-tabs{border-bottom: none!important;}

.customButton {  /*.customiseButton*/
	float:right;
	z-index: 8;
	max-width:170px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 32px;
    height: 32px;
    margin-right: 8px;
	color: #ffffff;
	background-color: #0a85c9;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;

  	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	cursor:pointer;
}
.nav-tabs li {
	padding-left: 8px;
	padding-right: 8px;
	line-height: 32px;
    float: left;
    height: 32px;
    margin-right: 8px;
    background-color: #FFFFFF;
    position: relative;
    /*margin-bottom: 12px;*/
    cursor: pointer;
    /*border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;*/
  	border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border: 1px solid #CCCCCC;
    border-bottom: none;
}
.nav-tabs li:hover,  .nav-tabs>li.active:hover{
    /*background-color: #c6c6c6;
    background-color: #bcefdb;*/
	color: #000000;
	cursor: pointer;
}
.nav-tabs li.playGPlayGTab{ /*.cnpPlaygroundPlaygroundTab*/
	color: #ffffff;
	background-color: #0a85c9;
}
.nav-tabs li.playGPlayGTab::after{
	height: 0px;
	left: 50%;
	margin-left: -6px;
	margin-bottom: -6px;
	position: absolute;
	bottom: 0;
	width: 0px;
	/*border-color: #0a85c9 transparent transparent;*/
	border-color: transparent transparent transparent;
	border-style: solid;
	border-width: 6px 6px 0px;
	content: "";
	display: none;
	-webkit-transition: .2s; /* Safari */
    transition: .2s;
}
.nav-tabs li.active{
    /*background-color: #918f8a;
    background-color: #3498DB;
    background-color: #67c39e;*/
    color: #ffffff;
    z-index: 1;
}
.nav-tabs>li:hover::after{
	display: block;
	/*border-color: #c6c6c6 transparent transparent;
	border-color: #bcefdb transparent transparent;*/
	border-color: transparent transparent transparent;
}
 .nav-tabs li.playGPlayGTab:hover::after{
 	display: block;
	/*border-color: #3D94A6 transparent transparent;*/
	border-color: transparent transparent transparent;
 }
.nav-tabs>li::after{
	height: 0px;
	left: 50%;
	margin-left: -6px;
	/*margin-bottom: -6px;*/
	margin-bottom: -10px;
	position: absolute;
	bottom: 0;
	width: 0px;
	/*border-color: #67c39e transparent transparent;*/
	border-color: transparent transparent transparent;
	border-style: solid;
	border-width: 6px 6px 0px;
	content: "";
	display: none;
	-webkit-transition: .2s; /* Safari */
    transition: .2s;
}
.nav-tabs>li.active::after, .nav-tabs li.playGPlayGTab.active::after{
	display: block;
}


.playGBackofficePaymentId{ /*.playgroundBackofficePaymentId*/
	margin-top: 12px;
}
pre, .playGBackofficePaymentId, .PlayGPlayGTxt { /*.cnpPlaygroundPlaygroundTextarea*/
	display: block;
	position: relative;
	max-width: calc(100% - 28px);
	min-width: calc(100% - 28px);
	overflow: auto;
	padding-top: 18px;
	padding-left: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	margin-bottom: 12px;
	background-color: #f5f5f5;
	border: 2px solid #ebebeb;
	/*color: #007500;*/
	color: #3942B9;

	border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
}
pre.preFlow { /*.overflowPre*/
	overflow-y:auto;
	max-height:400px;
}
.PlayGPlayGTxt {
	min-height:300px;
}
/*code{

	background-color: #f5f5f5;
}

.mobileCodeLanguage{
	display: none;
}*/
 

/* styling */
 .selectedStylePt{ /*.parentstyledSelect*/
 	position: relative;
 	margin-bottom: 15px;

 }
 .selectedStyle{ /*.styledSelect*/
 position: relative;
 }
 .selectedStyle::after{
	font-family: 'opp-icons';
	content: "\e800";
	display: block;
	position: absolute;
	left: 325px;
	top: 1px;
	height: 38px;
	width: 24px;
	overflow: visible;
  	line-height: 40px;
 	font-size: 20px;
  	text-align: center;
  	z-index: 1;
  	pointer-events:none;
	clear: both;
	/*background-color: #E9E9E9;*/
	background-color: #ffffff;
	border-radius: 5px;
}

.selectedStyle select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	 border:none;
	font-size: 15px;
	border-radius: 0;
	cursor: pointer;
	width:200px;
	height: 40px;
	border: 1px solid #bbb;
	padding-left: 5px;
	/*background-color: #E9E9E9;*/
	position: relative;
	border-radius: 5px;
    background-color: #ffffff;
 }

.labelSelected, .selectedStyle span { /*.selectedStyle span language auch*/ /*.selectLabel,*/
	width: 150px; /*50*/
 	display: block;
	line-height: 40px;
	font-weight: bold;
	float: left;
	z-index: 100;
}
 
.awesomeButton{ /*.interactiveButton*/
	height: 32px;
	background-color: #0a85c9;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 14;
	line-height: 32px;
	text-align: center;
   	width: 250px;
   	margin-top: 12px;
   	/*float: left;*/
    cursor: pointer;
 	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	margin-bottom: 15px;
}
.awesomeButton a, ul.menu li a {
	width: 100%;
	height: 100%;
	display: block;
	font-weight: bold;
}
#BrandsPlayG{ /*#cnpPlaygroundBrands*/
	display: none;
}
#FrameClickPay{ /*#copyandpay2Iframe*/
	height: 0;
}
.resultSnipDiv { /*.snippetResultDiv*/
	display: none;
}

.preNoShowMobile{ /*.mobileHidePre*/
	display: none;
}
.sidebarLeftAnimate{ /*.sidebar-slideLeft*/
	display: none;
	position: fixed;
 	top: 8px;		
	color: #0a85c9;
	cursor: pointer;
    -webkit-transition: .5s; /* Safari */
	transition: .5s;
	z-index:100;
}
.sidebarLeftAnimate::before{
	font-family: 'opp-icons';
	display: block;		 
	top:0;
	left: 0;		 
	text-align: center;
	color: #0a85c9;
	}


/*Table*/
table{
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
th{
	/*background-color: #68c39f;*/
	color: #fff;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	border: none;
 }

tr{
}

tr:nth-child(odd){ 
	background: #F9F9F9;
}
tr:nth-child(even){
	background: #ffffff;
}
td{
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 1px solid #b3b3b3;
	vertical-align: top;
}
.onlyForMobile{ /*.mobOnly*/
	display: none;
}

/*References*/

ul.bs-glyphicons-list{
	padding:0;
	width: 100%;
	list-style: none;
}

.bs-glyphicons-list>li{
	width: calc(25% - 20px);
	/*height: 190px;*/
	height: auto;
	display: block;
	float: left;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
    -webkit-transition: .2s; /* Safari */
    transition: .2s;

 	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);

	cursor:pointer;
}
.bs-glyphicons-list>li:hover{
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
}

.bs-glyphicons-list>li>img{
	width: 100%;
 }
/*brandRefLayout*/
body.noscroll {
	overflow:hidden;
}
.brandRefLayout, .brandRefSection { /*.brandRefOverlay, .brandRefBox*/
	display:none;
}
.brandRefLayout.popupLt, #LoaderForIframe, #accordion{ /*.popupList, #iframe-loader*/
	display: block;
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.8);
	z-index: 101; 
}
#IframeForAccordion, #accordion { /*#accordionIframe*/
	display:none;
}
.closeBox::after{ /*.boxclose*/
	display: none;
	font-family: 'opp-icons';
	content: "\e902";
	position: fixed;
	right: calc(10vw - 0px);
	top: calc(10vh - 0px);
	height: 40px;
	width: 40px;
	overflow: visible;
	background-color: rgba(255,255,255, 0.8);
 	line-height: 40px;
 	font-size: 26px;
  	text-align: center;
  	z-index: 99999;
  	pointer-events:none;
  	color: #000;
	pointer-events: inherit;
}
.popupLt .closeBox::after, #LoaderForIframe .closeBox::after, #accordion .closeBox::after {
	display: block;
	cursor:pointer;
}

.brandRefLayout h1, .brandRefLayout img{
	margin-top: 0;
}
.brandRefLayout h2{
	margin-top: 10px;
}
.brandRefLayout img{
	max-width: 150px;
}

.brandRefSection.popupLt, #LoaderForIframe>iframe, #accordion div{
	position: fixed;
	top: calc(10vh - 30px);
	left: calc(10vw - 30px);
	width: 80vw;
	height: 80vh;
	z-index: 102; 
	background-color: #fff;
	overflow: auto;
	padding: 30px;

 	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
body.administratorRights .brandRefSection.popupLt, body.supportRights .brandRefSection.popupLt, /*.role-administrator, .role-support*/
body.administratorRights #LoaderForIframe>iframe, body.supportRights #LoaderForIframe>iframe,
body.administratorRights #accordion div, body.supportRights #accordion div {
	top: 75px;
}
body.administratorRights .popupLt .closeBox::after, body.supportRights .popupLt .closeBox::after,
body.administratorRights #LoaderForIframe .closeBox::after, body.supportRights #LoaderForIframe .closeBox::after,
body.administratorRights #accordion .closeBox::after, body.supportRights #accordion .closeBox::after {
	top: 95px;
}
#loaderForIframeImageSection { /*#iframe-loader-image-div*/
	position:absolute;
	z-index:104;
	top:calc(50% - 33px);
	left:calc(50% - 33px);
}
#LoaderForIframe>iframe {
	max-width: 80vw;
	max-height: 80vh;
}
.heading1-applepay { /*.applepayH1*/
	max-width: calc(100% - 120px);
	float: left;
}
.logoMain-applepay { /*.applepaylogo*/
	padding-top: 10px;
    width: 120px;
    float: right;
}
.ElementForInputPre { /*.inputPreElem*/
	/*min-width: 275px;*/
	background-color: #fff;
}




/*Mobile Landscape*/
@media (max-width: 640px) {


 	/*Pre*/
 	.cp-tabs, .resultSnipDiv, .onlyForMobile {
		display: none;
 	}
 
 	.isPreActive .cp-tabs, .isPreActive .resultSnipDiv, .isPreActive .onlyForMobile { /*.preActive*/
 		display: block;
 	}
	.selectedStylePt{
		width: 100%;
		display: none;
	}
	.isPreActive .selectedStylePt{
		display: block;
	}

	.selectedStyle select {
		width:190px;
	 }

	.labelSelected, .selectedStyle span { /*.selectedStyle span language auch*/
		width: 140px; /*50*/
	}
 /*mobileHidePre
	.selectedStyle::after{
		left: 305px;
		left: 160px;
    	top: 41px;
	}*/
 	.preNoShowMobile{
		position: relative;
 	    height: 32px;
	    background-color: #666;
	    color: #FFF;
	    text-align: center;
 	    margin-top: 12px;
	    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
 	    float: left;
	    display: block;
 	    margin-right: 10px;
	    width: calc(50% - 5px);
	    cursor: pointer;
 	    line-height: 32px;
 
     	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	}

 	.preNoShowMobile::after{
   		content: 'Show code';
  		text-align: center;
 	    line-height: 32px;
 	}

 	.preNoShowMobile::before{
  		font-family: 'opp-icons';
  		content: '\e806';
 		position: absolute;
 		font-size: 30px;
 		display: block;
 		left: 10%;
 	}
	.isPreActive .preNoShowMobile{
		background-color: #999;
	}
 	.isPreActive .preNoShowMobile::after{
   		content: 'Hide code'; 
 	}

	/*.isPreActive .preNoShowMobileArrow::before{ 
		height: 0px;
		left: 50%;
		margin-left: -12px;
		margin-top: -12px;
		position: absolute;
		top: 0;
		width: 0px;
		border-color: #68c39f transparent transparent;
		border-style: solid;
		border-width: 12px 12px 0px;
		content: "";

		transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}

	.isPreActive .preNoShowMobileArrow::before:hover{
		
		height: 0px;
		left: 50%;
		margin-left: -12px;
		margin-top: -12px;
		position: absolute;
		top: 0;
		width: 0px;
		border-color: #53a585 transparent transparent;
		border-style: solid;
		border-width: 12px 12px 0px;
		content: "";

		transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}*/

 	.preNoShowMobile + .awesomeButton{
	    width: calc(50% - 5px);
	    float: left;
	}

  	.fieldItemSection h3::before{ /*.field-item*/
	    content: ".";
	    clear: both;
	    display: block;
	    visibility: hidden;
	    height: 0px;
  	}

  		/*language Select*/
  		.cp-tabs .nav-tabs{
  			display: none;
  		}
  		
  		/*.mobileCodeLanguage{
			display: block;
			mobonly
		}*/
 	/*end pre*/
 	
	/*brandRefLayout*/

	.brandRefLayout.popupLt{
		display: block;
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.8);
		z-index: 101; 
	}
	.brandRefLayout img{
		width: 200px;
	}
 
	.closeBox::after{
		height: 20px;
		width: 20px;
	}
 
	.brandRefLayout img{
		max-width: 100px;
	}
	.brandRefSection.popupLt{
		top: 0;
		left: 0;
		width: calc(100vw - 60px);
		height: calc(100vh - 60px);
	}
	.bs-glyphicons-list>li{
		width: calc(50% - 20px);
		/*height: 190px;*/
	}

	/*
	input[type=submit], input[type=text]{
		max-width: 50%;
	}
	*/
	.fieldItemSection h1{
		max-width: calc(100% - 80px);
 
	}
	.logoMain-applepay{
		padding-top: 5px;
	    width: 80px;
 	}
}



@media (max-width: 436px) {
	.selectedStyle::after{
	/*left: 305px;*/
	left: 160px;
    top: 41px;
	}
}

@media (min-width: 437px) and (max-width: 640px) {
	.selectedStyle::after{
	left: 305px;
	}

}

.customOutputTab { /*.customisationResultTab*/
    display: none;
    position: relative;
    max-width: calc(100% - 28px);
    min-width: calc(100% - 28px);
    overflow: auto;
    padding-top: 18px;
    padding-left: 18px;
    padding-bottom: 18px;
    padding-right: 10px;
    margin-bottom: 12px;
    background-color: #f5f5f5;
    border: 2px solid #ebebeb;
    color: #007500;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    min-height:300px;
}
.customOutputTab.active {
	display:block;
}
.customOutputTab.output { /*.result*/
	-ms-transform: scale(.4,.4);
	-webkit-transform: scale(.4,.4);
	transform: scale(.4,.4);
	-webkit-transform-origin: bottom right;
	-ms-transform-origin: bottom right;
	transform-origin: bottom right;
	position: absolute;
	right: 10px;
	bottom: 5px;
	z-index:2;
	display:block;
/*	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);*/
    border:none;

	-webkit-transition: .5s; /* Safari */
    transition: .5s;

    cursor:pointer;
    max-height:300px;
}
.customOutputTab.output.active {
	display:block;
/*	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;*/
	position:static;
	-ms-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transform: scale(1,1);
	border:2px solid #ebebeb;

	-webkit-transition: .5s; /* Safari */
    transition: .5s;
    cursor:default;
}
.customOutputTab.output.overlay {
	background-color:rgba(12,121,144,0.1);
	display:block;
	z-index:3;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
.customOutputTab.output.active.overlay {
	display:none;
}
.cp-tabs.custom { /*.customise*/
	position:relative;
}

.linqForSupport a { /*.supportlinks*/
    font-size: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: white;
    display: block;
    border-radius: 5px;
    padding: 40px 15px 40px 15px;
    margin-bottom: 20px;
    text-decoration: none;
    float: left;
    margin-right: 20px;
    width: 200px;
}


.bg-info {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    /*color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;*/
    color: #474a54;
    background-color: rgb(208, 241, 228);
    border-left: 4px solid #53a585;
    text-align: justify;
    word-break: break-all;
}

.bg-info i{color: #53a585;}

.bg-info font:nth-of-type(1){color: #53a585;font-weight: 600;}

      .scrollDone{
            margin-top: -67px!important;
            position: fixed!important;
            z-index: 9999!important;
            /*color: white!important;*/
            color: #616266!important;
            -webkit-transition: .4s;
            transition: .4s;
            font-size: 24px!important;
        }

        .HeaderMainContent{ /*.main-content-header*/
            -webkit-transition: .4s;
            transition: .4s; 
        }

		/* h2{font-size: 24px!important;} */
		h2{font-size: 16px! important;}

@media (min-width: 481px) and (max-width: 600px){
	.page-heading h1{
		font-size: 26px!important;
	}
}

@media (max-width: 480px){
	.page-heading h1{
		font-size: 23px!important;
	}
}


/*@media (max-width: 480px){
.scrollDone{
    font-size: 16px!important;
  }
  .HeaderMainContent{
    font-size: 23px!important;
  }
}
*/


@media (max-width: 640px){
	.preNoShowMobile::before {display: none;}


	#samplehr{margin-top: 80px;}

}

#samplehr{/*margin-right: 30px;*/}


@media (max-width: 420px){
	.hide-phone:nth-of-type(2) {
	    display: block!important;
	}
}