@charset "utf-8";
/**
*
* CSS file
*
* @template name    nuspay
* @creation date	2021
* @author   		MAWEZ
* @author URL 		mawez.com
* @license   		Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported Licence (CC BY-NC-SA 3.0) - See : http://creativecommons.org/licenses/by-nc-sa/3.0/
*
*/


/*
Anthracite	#3f3f3f		63-63-63
Vert foncé	#425349		66-83-73
Vert moyen	#6b774f		107-119-79
Vert clair	#979f76		151-159-118
Vieux rose	#a47e75		164-126-117
Lie de vin	#664840		102-72-64
Beige		#f6eddc		246-237-220
Taupe		#d2c4a7		210-196-167
*/



/*
*********************************************************************************
*** moo Global & apps specific
*********************************************************************************
*/
.mooModSep {clear:both;}
.mooYoutube a {display:none;}
.mooNavBar {display:none;}
.mooClear {clear:both;}
.mooHide {display:none;}
.mooShow {display:block;}
.mooTdCenter {text-align:center;}
.mooTdRight {text-align:right;}
.yakaContentThankyou {display:none;}
.mooImgAlignLeft{float:left; margin: 0 15px 0 0;}
.mooImgAlignRight{float:right; margin: 0 0 15px 0;}
h1 {display:none;}






/*
*********************************************************************************
*** Generic styles
*********************************************************************************
*/
body {
	font-family: 'Segoe UI', Candara, Calibri, Tahoma, Verdana, sans-serif;
	font-size:17px;
	line-height:23px;
	background-color:#F3F9EF;
	color:#3f3f3f;
}
strong{
	font-weight:bold;
}




/*
*********************************************************************************
*** Loading please wait
*********************************************************************************
*/
.mooWaitLoadModal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/loading.gif') 
                50% 50% 
                no-repeat;
}
body.mooLoading {
    overflow: hidden;   
}
body.mooLoading .mooWaitLoadModal {
    display: block;
}



/*
*********************************************************************************
*** Main bloc - meta content
*********************************************************************************
*/
#myMain {
	display:none;
}


/*
*********************************************************************************
*** Logo
*********************************************************************************
*/

#myLogo{
    display: inline-block;
    padding-left:2px;
}
#myLogo a{
    color: #a47e75;
}
.myPic {
    display: inline;
    float: left;
    content:url(../images/logo.png);
	background-repeat:no-repeat;
	background-size: contain;
	width:100px;
	height:20px;
    margin-top:10px;
}

.myTitle {
    white-space: nowrap;
    display: inline;
    float: left;
    margin-top:7px;
    font-size:1.5em;
}


/*
*********************************************************************************
*** All texts
*********************************************************************************
*/
#myPay .mooModContent .yakaContentCreate,
#myPay .mooModContent .yakaContentWritten,
#myPay .mooModContent .yakaContentTag
{
    display:none;
}


#myPay .mooModContent .yakaContentText {
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
}


#myPay .testMode {
    color: #FF0000;
    font-weight:bold;
    margin-top:20px;
    margin-bottom:20px;
}


/*
*********************************************************************************
*** Paiement
*********************************************************************************
*/
#yakaPayMobile {
  padding-left:10px;
  padding-right:10px;
}

#yakaPayMobile .mooFormInput{
	padding:10px;
	background:transparent;
    border:none;
	border-bottom:#425349 solid 1px;
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#425349;
	font-family: 'Segoe UI', Candara, Calibri, Tahoma, Verdana, sans-serif;
    font-size:1.2em;
}

#yakaPayMobile .mooFormSubmit{
    height:50px;
    width:250px;
    color: #FFFFFF;
    text-decoration: none;
	text-align: center;

	padding-left:5px;
	padding-right:5px;

	display: inline-block;

	border-radius:5px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);

	background: #6b774f;
	background-image: -webkit-linear-gradient(top, #6b774f, #979f76);
	background-image: -moz-linear-gradient(top, #6b774f, #979f76);
	background-image: -ms-linear-gradient(top, #6b774f, #979f76);
	background-image: -o-linear-gradient(top, #6b774f, #979f76);
	background-image: linear-gradient(top bottom, #6b774f, #979f76);
}
#yakaPayMobile .mooFormSubmit:hover {
    background-color: #979f76;
	background-image: -webkit-linear-gradient(top, #979f76, #6b774f);
	background-image: -moz-linear-gradient(top, #979f76, #6b774f);
	background-image: -ms-linear-gradient(top, #979f76, #6b774f);
	background-image: -o-linear-gradient(top, #979f76, #6b774f);
	background-image: linear-gradient(top bottom, #979f76, #6b774f);
}
#yakaPayMobile .mooFormSubmit:active {
    box-shadow: inset 0 0px 1px 1px rgba(0,0,0,0.5), inset 0 0px 0px 2px rgba(255,255,255,0.8), 0 0px 8px 0px rgba(0,0,0,0.3);
}
#yakaPayMobile .mooFormSubmit:active:before {
	top: -11px;
	bottom: -5px;
	content: "";
}

#yakaPayThanks .resetCode,
#yakaPayMobile .resetCode {
    font-size:0.85em;
    font-style:italic;
    text-decoration:underline;
    margin-top:20px;
    cursor:pointer;
}

#yakaPayThanks .resetCode {
    margin-left:10px;
}

/*
*********************************************************************************
*** Insert secret code
*********************************************************************************
*/
#insertCode {
  width:100%;
  background-color: #f6eddc;
  padding-bottom:20px;
  padding-top:20px;
  padding-left:10px;
  box-sizing: border-box;
}

#insertCode .mooFormInput{
	width:80px;
    margin-bottom:20px;
}


#insertCode input::-webkit-outer-spin-button,
#insertCode input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#insertCode input[type=number] {
  -moz-appearance: textfield;
}





/*
*********************************************************************************
***  Stripe pay
*********************************************************************************
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro');

#yakaStripeForm {
  width:100%;
  background-color: #f6eddc;
  padding-bottom:20px;
  padding-top:20px;
  box-sizing: border-box;
}

#yakaStripeForm .row {
  display: -ms-flexbox;
  display: flex;
  margin: 0 5px 10px;
}
 #yakaStripeForm .column {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 0 10px;
}
#yakaStripeForm .column.halfcol {
  width: 50%;
}


#yakaStripeForm label {
  position: absolute;
  width: 100%;
  left: 10px;
  bottom: 40px;
  color: #6b774f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform-origin: 0 50%;
  cursor: text;
  pointer-events: none;
  transition-property: color, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

  font-family: Source Code Pro, Consolas, Menlo, monospace;
  font-size: 16px;
  font-weight: 500;
}

#yakaStripeForm input {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding-bottom: 7px;
  box-sizing: border-box;
}

#yakaStripeForm .input::placeholder {
  color: #664840;
}
#yakaStripeForm .input.empty::placeholder {
    color:#664840;
}
#yakaStripeForm .input.base::placeholder {
    color:#664840;
}

#yakaStripeForm .input.invalid {
    color: #e25950;  /* rouge */
}
#yakaStripeForm .input.invalid + label {
  color: #e25950;  /* rouge */
}

#shopNews {
  width:100%;
  background-color: #f6eddc;
  padding-bottom:20px;
  padding-top:20px;
  padding-left:20px;
  box-sizing: border-box;
}
#shopNews input[type="radio"] {
  display: none;
}
#shopNews label {
    font-size:0.95em;
}
#shopNews input[type="radio"] + label {
  cursor:pointer;
  padding:3px;
  padding-right:5px;
  padding-top:5px;
  margin-top:-5px;
  opacity:0.6;
}
#shopNews input[type="radio"] + label::before {
  margin: 0 0.5rem ;
}
#shopNews input[type="radio"]:checked + label {
  border:#979f76 2px solid;
  opacity:1;
}
#shopNews input[type="radio"].demohappy + label::before {
  content: '\1F60D';
  font-size: 1.4em;
}
#shopNews input[type="radio"].demosad + label::before {
  content: '\1F622';
  font-size: 1.4em;
}

#yakaStripeForm .submitButton {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

#yakaStripeForm .stripeLogo {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
	width:112px;
	height:25px;
	margin-top:10px;
}
#yakaStripeForm .stripeLogo span{
	background-image:url(../images/stripe.png);
	background-repeat:no-repeat;
    background-size: contain;
	width:112px;
	height:25px;
	display:inline-block;
}




/*
*********************************************************************************
***  Admin front side
*********************************************************************************
*/
#yakaPayMobAdmin {
  padding-left:10px;
  padding-right:10px;
}

#yakaPayMobAdmin .loginForm .mooFormInput{
	width:200px;
    margin-bottom:20px;

	padding:10px;
	background:transparent;
    border:none;
	border-bottom:#425349 solid 1px;
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#425349;
	font-family: 'Segoe UI', Candara, Calibri, Tahoma, Verdana, sans-serif;
    font-size:1.2em;
}
#yakaPayMobAdmin .loginForm input::placeholder {
    color: transparent;
}

#yakaPayMobAdmin .loginForm .mooFormCheck {
	-webkit-appearance: none;
	background-color: #f6eddc;
	border: 1px solid #425349;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 15px;
    margin-right:5px;
	display: inline-block;
	position: relative;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    border-radius: 50%;
}
#yakaPayMobAdmin .loginForm .mooFormCheck:active,
#yakaPayMobAdmin .loginForm .mooFormCheck:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

#yakaPayMobAdmin .loginForm .mooFormCheck:checked {
	background-color: #f6eddc;
	border: 1px solid #425349;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #425349;
}
#yakaPayMobAdmin .loginForm .mooFormCheck:checked:after {
	content: '\2714';
    font-size: 20px;
	position: absolute;
	top: 0px;
    left: 6px;
	color: #664840;
}

#yakaPayMobAdmin .loginForm .mooMissingData {
	color:#a47e75;
	font-weight:bold;
}

#yakaPayMobAdmin .pwdLost a {
    color:#664840;
    font-size:0.85em;
}

#yakaPayMobAdmin hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #979f76;
    color: #979f76;
    text-align: center;
    margin-top:100px;
}


#yakaPayMobAdmin .mooFormSubmit{
    height:50px;
    width:250px;
    color: #FFFFFF;
    text-decoration: none;
	text-align: center;

	padding-left:5px;
	padding-right:5px;

    margin-top:20px;
    margin-bottom:20px;

	display: inline-block;

	border-radius:5px;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);

	background: #6b774f;
	background-image: -webkit-linear-gradient(top, #6b774f, #979f76);
	background-image: -moz-linear-gradient(top, #6b774f, #979f76);
	background-image: -ms-linear-gradient(top, #6b774f, #979f76);
	background-image: -o-linear-gradient(top, #6b774f, #979f76);
	background-image: linear-gradient(top bottom, #6b774f, #979f76);
}
#yakaPayMobAdmin .mooFormSubmit:hover {
    background-color: #979f76;
	background-image: -webkit-linear-gradient(top, #979f76, #6b774f);
	background-image: -moz-linear-gradient(top, #979f76, #6b774f);
	background-image: -ms-linear-gradient(top, #979f76, #6b774f);
	background-image: -o-linear-gradient(top, #979f76, #6b774f);
	background-image: linear-gradient(top bottom, #979f76, #6b774f);
}
#yakaPayMobAdmin .mooFormSubmit:active {
    box-shadow: inset 0 0px 1px 1px rgba(0,0,0,0.5), inset 0 0px 0px 2px rgba(255,255,255,0.8), 0 0px 8px 0px rgba(0,0,0,0.3);
}
#yakaPayMobAdmin .mooFormSubmit:active:before {
	top: -11px;
	bottom: -5px;
	content: "";
}


#yakaPayMobAdmin table#codeList {
  border: 1px solid #425349;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

#yakaPayMobAdmin table#codeList caption {

}

#yakaPayMobAdmin table#codeList tr {
  background-color: #f6eddc;
  border: 1px solid #425349;
  padding: .35em;
}

#yakaPayMobAdmin table#codeList th,
#yakaPayMobAdmin table#codeList td {
  padding: .625em;
  text-align: center;
}

#yakaPayMobAdmin table#codeList th {
  text-transform: uppercase;
  font-weight:bold;
}

@media screen and (max-width: 600px) {
  #yakaPayMobAdmin table#codeList {
    border: 0;
  }

  #yakaPayMobAdmin table#codeList thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #yakaPayMobAdmin table#codeList tr {
    border-bottom: 3px solid #425349;
    display: block;
    margin-bottom: .625em;
  }

  #yakaPayMobAdmin table#codeList td {
    border-bottom: 1px solid #425349;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  #yakaPayMobAdmin table#codeList td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  #yakaPayMobAdmin table#codeList td:last-child {
    border-bottom: 0;
  }
}


#yakaPayMobAdmin .codeSuccess {
    font-size:1.5em;
    color:#664840;
}

#newCode .mooFormInput{
	width:80px;
    margin-bottom:20px;

	padding:10px;
	background:transparent;
    border:none;
	border-bottom:#425349 solid 1px;
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#425349;
	font-family: 'Segoe UI', Candara, Calibri, Tahoma, Verdana, sans-serif;
    font-size:1.2em;
}


#newCode input::-webkit-outer-spin-button,
#newCode input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#newCode input[type=number] {
  -moz-appearance: textfield;
}