/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	Stylesheet for ID-Rights Demo App
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 @font-face {
    font-family: "Prompt-Light";
    src: url("/webfonts/Prompt-Light.woff2") format("woff2"), url("/webfonts/Prompt-Light.woff") format("woff");
}

@font-face {
    font-family: "Prompt-Medium";
    src: url("/webfonts/Prompt-Medium.woff2") format("woff2"), url("/webfonts/Prompt-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Prompt-SemiBold";
    src: url("/webfonts/Prompt-SemiBold.woff2") format("woff2"), url("/webfonts/Prompt-SemiBold.ttf") format("truetype");
}

body {
	display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: "Prompt-Light";
    min-height: 100vh;
    margin: 0px;
    background-color: #fafcff;
}

.demoiframe {
    min-height: 510px;
    width: 628px;
}

.formdiv {
	display: block;
    text-align: center;
}

.header {
	height: 47px;
	background-color: #FFFFFF;
	padding: 0 20px;
	font-size: 14px;
	line-height: 12px;
	color: #003088;
	border-bottom: 1px solid;
	border-bottom-color: #B5D3FF;
	display: grid;
	grid-template-columns: 55px auto 85px;
	align-items: center;
}

.header img.logo {
    width: 45px;
}

.language {
	font-size: 14px;
	color: #333333;
	text-decoration: none;
	text-align: right;
	padding: 5px 0;
	cursor: pointer;
}

.language .large {
    display: none;
}

.content {
	margin: 20px 20px;
}

h1 {
	font-family: "Prompt-Medium";
	font-size: 22px;
	color: #003088;
}

.paragraphs span {
	display: block;
	margin: 14px 40px 30px 0;
  	font-size: 18px;
  	letter-spacing: 0.22px;
  	color: #333333;
    margin-bottom: 10px;
}

 .button {
 	font-family: "Prompt-Light";
	width: 100%;
  	height: 50px;
  	border-radius: 24.5px;
  	border: solid 1px #003088;
  	background-color: #003088;
  	color: #ffffff;
  	font-size: 18px;
  	line-height: 2.31;
  	letter-spacing: 0.25px;
  	pointer-events: visible;
  	cursor: pointer;
	margin-top: 20px;
}

button:focus {
	outline-color: #003088;
	outline-width: medium;
	outline-style: double;
}

.p1 {
    font-weight: normal;
    text-align: justify;
    margin: 20px 0;
}

p span {
	display: block;
	margin: 14px 40px 30px 0;
  	font-size: 18px;
  	letter-spacing: 0.22px;
  	color: #333333;
    margin-bottom: 10px;
}

.otherpage {
    margin: 25px 0 0;
    text-align: left;
}
.othersources {
	font-size: 18px;
    letter-spacing: 0.25px;
    padding-top: 5px;
    color: #333333;
}

.link {
	margin: 10px 0 0;
    font-size: 18px;
    letter-spacing: 0.22px;
    text-decoration: underline;
    cursor: pointer;
    color: #003088;
}

.radio_grp {
	text-align: center;
    font-size: 16px;
    margin-bottom: 15px;
}

.header_grp {
	display: none;
	text-align: center;
    font-size: 16px;
}

.orgdiv {
	position: relative;
    padding-bottom: 15px;
}

.input-field {
	width: 100%;
    box-sizing: border-box;
    height: 50px;
    border-radius: 7px;
    border: solid 1px #999999;
    background-color: #ffffff;
}

input {
	font-family: "Prompt-Light";
    font-size: 18px;
    letter-spacing: 0.25px;
    padding: 10px 0 0 16px;
    color: #333333;
}

.input-field-txt {
    position: absolute;
    padding-top: 3px;
    left: 18px;
    background-color: transparent;
    height: 12px;
    font-size: 9px;
    letter-spacing: 0.34px;
    color: #333333;
}

::placeholder {
  color: #333333;
}

input:placeholder-shown {
  	padding: 0 0 0 16px;
  	color: #333333;
}

input:placeholder-shown + label {
	display: none;
}

.result {
	color: #000000;
    font-size: 20px;
    margin: 0 0 30px;
}

.response {
    font-size: 18px;
    margin: 0 0 10px;
}

.rawresponse {
	width: 100%;
	padding: 0;
}

.signstatus {
    width: 100%;
    font-size: 14px;
    border-width: medium 1px 1px;
}

.signstatus td, .signstatus th {
	border: 1px solid #c6c6c6;
    padding: 2px;
    text-align: left;
}

.subscript {
	position: absolute;
	 left: 0px;
}

.errordiv {
	word-break: break-word;
}

.footer {
	background-color: #FAFCFF;
	padding: 19px 0;
	text-align: center;
	font-size: 15px;
	color: #003088;
	border-top: 1px solid;
	border-top-color: currentcolor;
	border-top-color: #B5D3FF;
}

/* Tablet and desktop */
@media (min-width: 455px) {
    .header {
        font-size: 18px;
        line-height: 14px;
        grid-template-columns: 75px auto 145px;
    }

    .header img.logo {
        width: initial;
    }
    
    .language .small {
        display: none;
    }

    .language .large {
        display: inline;
    }
    
    .button {
        width: 220px;
    }
    
	.formdiv #verifyspbtn {
        margin-left: 25px;
    }
}

/* Desktop */
@media (min-width: 670px) {
    .header {
        padding: 0 0;
        justify-content: center;
        grid-template-columns: 85px 396px 150px;
    }
    
    .content {
		width: 630px;
  		margin: 45px auto;
    }
    
    .orgdiv {
    	width: 50%;
    	margin: 0 auto;
    }
    
    #verifysp .button {
		margin-top: 36px;
	}
}
