* {	margin: 0;	padding: 0;}

.clearfix {clear: both;}
.ios, .android{display: none;}
.hideOnDp, .legals{display: block;}
.showOnDp, .afterPreload{display: none;}
.img-responsive{margin:0 auto; width: 100%;}
p{padding: 0px 0;}
button, img {border: none;background: none;position: relative;}
.inline{display: inline-block;}
.link{
	text-decoration: underline; 
	cursor: hand; cursor: pointer;
	display: inline-block;
}

html{
	min-height: 100%;
}

body { 
    /*font-family: 'Poppins', sans-serif;
    font-family: 'Crimson Text', serif;*/
    font-family: 'Roboto', sans-serif;
	/*height: 100%;*/
	width: 100%;
	text-align: center;
	font-weight: normal;
	font-size: 14px;
	line-height: 100%;
	color: #000;
	margin:0 auto;
	position: relative;
	/* background: #000000 url(../images/bg.png) no-repeat top center fixed;  */
	background: #000000 url(../images/dk-bookworld-background2.png) no-repeat top center fixed; 
	background-attachment: scroll;
	background-position: top;
	overflow-x: hidden;
}

section{width: 100%;height: 100%;}

#msisdn-screen,
#moconfirm-screen,
#pin-screen,
#end-screen{
	display: none;
	position: relative;
}

#loader {background: url(../images/loader.gif);}

.feedback-icon.valid {background: url(../images/valid.png) no-repeat;}
.feedback-icon.invalid {background: url(../images/invalid.png) no-repeat;}

.error, .check{
	position: absolute;
	top: 9px;
	right: -18px;
	display: none;
}
.errortext{
	display: none;
	color: red;
	font-size: 14px;
	line-height: 100%;
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding: 15px 0;
}
#loading, #loader {
	z-index: 9999;
	position: absolute;
	left: 44%;
	top: 200px;
	display: none;
}

.default_button.valid,
.default_button:hover{
	opacity: .8;
}

.end-btn{
	font-size: 18px;
}

.smsToButton{text-decoration: none;}

.fs-pin{margin-bottom: 10px;}
.pin_button {
	width: 120px;
	height: 50px;
}

/* FORM */

.console {
	position: relative;
	margin: 0 auto;
	display: none;
	max-width: 1200px;
	height: auto;
	-webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    max-width: 780px;
}

.console p{
	padding: 0 20px;
}

.console_header{
	font-size: 50px;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
}

.console_instructions{
	font-size: 14px;
	text-align: center;
	padding: 0px 10px;
}

.form, .form-pin {
	position: relative;
	margin: 0px auto;
}

.label {
	position: relative;
	text-align: right;
	font-size: 14px;
}

#legal_moconfirm{
	color:white;
	font-size: 10px;
	text-align: center;
}

fieldset {
	position: relative;
	width: 100%;
	max-width: 300px;
	border: none;
	margin: 0 auto;
	padding: 0;
}
fieldset.fs-checkbox{max-width: 460px;}

dt, dd {
	float: left;
}

dd.full-width {width: 100%;}
.fs-msisdn dd.full-width {
	width: 100%;
}

dd.narrow {width: 120px;}

.radio {margin-top: 6px;}

.feedback-icon {
	position: absolute;
	width: 25px;
	height: 25px;
	top: 23px;
	right: 0px;
	background: none;
	pointer-events:none;
}
.fs-checkbox .feedback-icon {left: 15px;}
.fs-checkbox .feedback-icon.valid {
	display: none;
}

.inputfield{
	color: #000;
}

#input_pin{
	color: #000;
}
select,
input[type="text"],
input[type="tel"],
input[type="email"] {
	margin: 0 auto;
	width: 100%;
	height: 30px;
	border: 1px solid #bbb;
	text-indent: 10px;
}

select{height: 32px;}
input[type="text"],
input[type="tel"],
input[type="email"] {
	font-size: 18px;
	font-weight: bold;
	line-height: 100%
}


select.invalid,
input[type="text"].invalid,
input[type="tel"].invalid,
input[type="email"].invalid {
	border: 1px solid red;
}

input[type="tel"]#pin {
	width: 100%;
	height: 40px;
	font-size: 22px;
	line-height: 150%;
}



/*MSISDN*/

#prefix{
	position: absolute;
	font-size: 30px;
	top: -5px;
	left: -60px;
}

#checkbox{margin-right: 5px;}

#msisdn, #pin{
	max-width: 300px;
	height: 41px;
	margin-top: -10px;
	font-size: 18px;
	margin-bottom:10px;
}

#msisdn {
	margin-bottom: 0;
}

#pin{
	margin-top: 10px;
}

.fs-msisdn, .fs-pin{
	position: relative;
	margin:0 auto;
	padding-top: 20px;
}

.fs-pin{
	padding-top: 0px;
}

#msisdnPopup {
	display: none;
	z-index: 9999;
	position: absolute;
	top: 180px;
	left: 40px;
	background: #12345A;
	width: 415px;
	height: 315px;
	color: white;
	font-size: 14px;
	text-align: center
}

#msisdnPopup a{color: #00ffff;}
#legal_EnterPin_checkbox{margin-top: 100px;}
#msisdnPopup .default_button {margin: 10px auto;}

/* MOCONFIRM */
#moconfirm-screen{text-align: center;}

#msisdn-screen h2{
	width: 400px;
	font-weight: bold;
	padding: 30px 0 20px 0
}
#moconfirm-screen h2 {
	color: #fff;
	width: 100%;
	font-size: 16px;
	font-weight: bold;
}

#moconfirm_web .keyword, #moconfirm_web .shortcode {
	font-size: 30px;
	font-weight: bold;
	color: #082ba0;
}

#mo-confirm-wrap {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
	font-size: 18px;
	line-height: 120%;
}
#mo-confirm-wrap p{
	padding: 5px;
}
#mo-confirm-wrap span{
	display: inline-block;
	line-height: 100%;
	vertical-align: top;
}

#smsToButtonContainer{
	font-size: 20px;
	line-height: 90%;
}

#to {
	color: inherit;
	padding: 13px 10px;
}


/* ENDSCREEN */ 

#endscreen-wrapper{
	position: relative;
	width: 100%;
  	height: auto; 
  	padding-top: 15px;
  	text-align: center;
}

#r_text{
	font-size:16px;
	color:#fff;
	display: block;
	line-height: 125%;
	padding:10px;
}

#end-screen h1 {
	margin: 0 auto;
	font-size: 18px;
	line-height: 120%;
	padding: 5px 15px;
	position: relative;
}
#end-screen h3{
	font-size: 20px;
	line-height: 130%;
	padding: 10px;
	margin-top:0px;
}

#end-screen h1 b{font-size: 34px;}

#speed{margin: -30px auto 0 auto;}

#submitEnd{
	max-width: 280px;
	font-size: 28px;
	line-height: 150%;
	margin: 10px auto;
}
#endpic{
	margin: 0 auto;
}

#echonumber{
	font-weight: bold;
}
/* ======================= LEGALS ======================= */
/* ====================================================== */
.legals{font-family: Arial, sans-serif;}

#footer, .footerbtn {
	display: flex;
	justify-content: center;
	align-items: center;
    text-align: center;
	margin: 0px auto;
	margin-top: 300px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	width: 100%;
	line-height: 120%;
	display: none;
	color: black;
	position: fixed;
	left: 0;
	bottom: 0;
}

#footer_web{
	max-width: 768px;
	padding-block: 10px;
	max-width: 768px;
	background: #ffffffcc;
}

#footer a {color: inherit;}
#footer span {cursor: pointer; cursor: hand;}

.footerbtn{
	cursor: pointer;
	margin-top: 30px auto;
}

.footerbtn:hover, .footerbtn.active{
	text-decoration: underline;
}

.legal_belowinputfield{
	text-align: left;
	font-size: 10px;
}

.legal_belowinputfield a{
	color: inherit;
	font-size: inherit;
}

.legal_moconfirm,
.legals{
	text-align: center;
	font-size: 12px;
	line-height: 100%;
	position: relative;
}

.legals a{
	color: inherit;
	font-size: inherit;
}

#legal_topleft{
	position: absolute;
	left: 10px;
}




/*DEBUG*/
#debug-window{display: none; position: fixed; top: 0; right: 0; z-index: 99999; text-align: right;color: #000; background:#ccc;}
#debug-buttons{display: none; text-align: right;}
#debug-window button{margin: 3px; padding: 5px;}

/* ANIMATION */
.inputfield, #upSellButton, #smsToButton{   
  animation: shadowThrob 0.7s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.7s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 6px 6px rgba(78,196,21, 0.8);}
  to {box-shadow: 0 0 6px 6px rgba(78,196,21, 0.1);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 6px 6px rgba(78,196,21, 0.8);}
  to {box-shadow: 0 0 6px 6px rgba(78,196,21, 0.1);}
}


#moconfirm_web .keyword{
	animation-name: color_change; 
animation-duration:0.7s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 

-webkit-animation-name: color_change; 
-webkit-animation-duration:0.7s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite; 
}
@keyframes color_change {
	from { color: #229cf8; }
	to { color: black; }
}
@-webkit-keyframes color_change {
	from { color: #229cf8; }
	to { color: black; }
}

#moconfirm_web .shortcode{
	animation-name: color_changed; 
animation-duration:0.7s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 

-webkit-animation-name: color_changed; 
-webkit-animation-duration:0.7s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite; 
}
@keyframes color_changed {
	from { color: black; }
	to { color: #229cf8; }
}
@-webkit-keyframes color_changed {
	from { color: black; }
	to { color: #229cf8; }
}

.console_header4{
	text-transform: uppercase;
}

.header {
    padding-top: 45px;
}

.wrapper{
	width:90%;
	margin:0 auto;
}

.container-teaser {
	padding: 0px;
	margin: 0 auto;
	margin-bottom: 10px;
	display: none;
	max-width: 500px;
	padding: 15px;
	justify-self: center;
}


.container {
	padding: 0px;
	border: 2px solid #084729;
    background: white;
    border-radius: 10px;
	margin-inline: 10px;
	margin-bottom: 10px;
	display: none;
	max-width: 500px;
	padding: 15px;
	justify-self: center;
}

.header-container {
	color: #fff;
	padding: 10px;
	text-align: center;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 110%;
}

textarea:focus, input:focus{
    outline: none;
}
*:focus {
    outline: none;
}

.default_button{
	cursor: pointer;
	width: 100%;
	height: auto;
	font-size: 18px;
	font-weight: bold;
	line-height: 100%;
	margin: 0 auto;
	/* border: none;  */
	border: solid 1px black; 
	text-transform: uppercase;
	color: #fff;
	margin-top:15px;
    border-radius: 2px;
    padding: 15px 0;

    background: rgba(255,156,247,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,156,247,1) 0%, rgba(252,59,239,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,156,247,1)), color-stop(100%, rgba(252,59,239,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,156,247,1) 0%, rgba(252,59,239,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,156,247,1) 0%, rgba(252,59,239,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,156,247,1) 0%, rgba(252,59,239,1) 100%);
    background: radial-gradient(ellipse at center, rgba(255,156,247,1) 0%, rgba(252,59,239,1) 100%);
	background: rgb(104, 168, 74);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9cf7', endColorstr='#fc3bef', GradientType=1 );
}

.loader {
  border: 5px solid #333; /* Light grey */
  border-top: 5px solid #ccc; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: 30px auto;
}


/* remove blue block on tapping */
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0)!important;
  -webkit-tap-highlight-color: transparent!important;
}

*:focus {
    -webkit-tap-highlight-color: transparent!important;
    outline: none!important;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* ERROR */
.errortext,
.error{
	display: none;
	color: #fff;
	font-size: 12px;
	line-height: 100%;
	background: red;
	padding: 5px;
	margin: 5px auto 0px auto;
}




@media screen and (max-width: 992px) {
	h3{
		font-size: 18px;
	}
	#end-screen h3 {
		font-size: 11px;
		margin-top:0px;
		font-weight: normal;
	}
	/* body { 
		background: #000000 url(../images/dk-bookworld-background3.png) no-repeat top center fixed; 
	} */
}

@media screen and (min-width: 640px) {

	#end-screen h1 {
		font-size: 24px;
		line-height: 100%;
	}

	/* #end-screen h1 b{font-size: 50px;}
	.header{
	    padding-top:15vh;
	} */

}

@media screen and (min-width: 768px) {
	.wrapper{
		max-width: 960px;
	}
}

@media screen and (max-width: 500px) {
}

#testButton {
	background-color: purple;
}

#video-container {
	display: flex;
	max-width: 425px;
	width: 100%;
	height: 239px;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#dk-video {
	position: absolute;
	border-radius: 15px;
	aspect-ratio: 16/9;
	max-height: 274px;
	width: 100%;
	/* height: 274px; */
	object-fit: contain;
}

#overlay,
#end-overlay {
	width: 100%;
	position: absolute;
	z-index: 1;
	border-radius: 15px;
}

#end-overlay {
	display: none;
}

#bookworld-logo {
	position: fixed;
	left: 0;
	right: 0;
	top: 1em;
}

#msisdn-box {
	box-sizing: border-box;
	border: solid;
    background: white;
    padding-block: 17px;
    padding-inline: 17px;
    border-radius: 12px;
	max-width: 425px;
}

#msisdn-view {
	border: none;
	background: none;
	padding: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
}

/* Ensure the msisdn-view container resizes with its items */
#msisdn-view {
	margin-inline: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 100%; */
    padding: 0;
    box-sizing: border-box;
}

/* Maintain the aspect ratio of the video section */
#video-section {
    width: 140%;
    max-width: 425px;
    aspect-ratio: 16 / 9;
    position: relative;
}

#video-container {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

#dk-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

#overlay,
#end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 15px;
}

/* Apply a 5% margin on smaller viewports */
@media screen and (max-width: 425px) {
    /* #msisdn-view {
        margin: 0 5%;
    } */

    #msisdn-box {
        width: 100%;
        box-sizing: border-box;
    }
}

/* @media screen and (max-width: 375px) {
	body {
		background: #000000 url(../images/dk-bookworld-background.png) no-repeat top center fixed; 
	}
} */

#footer-hide {
    text-align: center;
    justify-self: center;
	place-content: center;
    width: 4em;
    height: 2em;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

#footer-hide:hover {
	color: #082ba0;
}

@media screen and (max-width: 500px) {
	#video-section {
		width: 100%;
	}
}