:root{
	--section:calc(100px + 50px + (75px*3));
	--btn-min-size:100px;
}

*{
	margin:0;
	padding:0;
}


body {
    width: 100%;
    overflow-x: hidden;
}


/* ---main body--- */
.rect-background {
    height: var(--section);
    background-color: #17479e;
    background: linear-gradient(to bottom, #17479e, #0095da), linear-gradient(#17479e, #17479e);
}


.rect-title-head {
    margin-top: 17px;
}

	.rect-title-head h1 {
	     font-size: 26px;
	     text-align: center;
	     color: #FFF;
	 }
	 
	 
/* NOte that custid-page margin depends on font size and number of lines of the header text. font size maybe used as a variable and with a multiplier here */
.custid-page {
    width: 100%;
    margin: 0 auto;
    margin-top: calc(var(--section)*-1 + 140px);
    margin-bottom:2rem;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0.2px 1px 10px 0 rgba(1, 1, 1, 0.55);
    max-width:900px;
}

.custid-page-wrapper {
    padding: 50px 0;
    min-height: 330px;
    width: 100%;
}

.custid-input {
    width: 100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:0 auto;
    max-width:430px;
}

.button-container{
    width: calc(2 * var(--btn-min-size) + 20px);
    display: flex;
    justify-content: space-between;
    margin: 1rem auto 1rem;
}

.button-container a{
	margin: 0 auto;
	text-decoration:none;
}

.btn {
    font-size: 16px;
    min-width:var(--btn-min-size);
    box-shadow: 0px 2px 3px 0px #888;
    outline:none;
    font-weight:700;
    margin: 0 auto !important;
}

.btn:focus, .btn:hover, .btn:active{
	outline:none !important;
	box-shadow: 0px 1px 3px 0px #888;
}

.disabledStyles{
	cursor: not-allowed !important;
	background-color: #bcbcbc !important;
	color: #6c757d !important;
	pointer-events:none;
}


.activeStyles{
	cursor: pointer !important;
	background-color: ghostwhite;
	color: #111 !important;
}

.custom-btn{
	cursor: pointer !important;
	background-color: ghostwhite;
	color: #111 !important;
}

	.custom-btn:hover{
		background-color:#17479E !important;
		color: white !important;
	}

	.custom-btn:active{
		background-color:#17479E !important;
		transform: translateY(1px);
		color: white !important;
	}


.btn-captcha{
    border-radius: 3px;
    height: 40px;
    padding-top: 4px;
    border: 1px solid #17479E;
    border-radius: 3px;    
 	margin-left: 10px; */    
}

	.btn-captcha:hover {
	    background-color: #17479E;
	    color: #FFF;
	}


.btn-next {
/*     float: right; */
    border-radius: 3px;
    height: 30px;
    padding-top: 4px;
    padding-right: 20px;
    border: 1px solid #17479E;
    background: url('../images/arrow-right.png') no-repeat;
    background-position: 46px center;
    border-radius: 3px;
}

	.btn-next:hover {
        background-color: #17479E;
        background: url('../images/btn-arrow-right.png') no-repeat #17479E;
        background-position: 46px center;
        color: #FFF;
    }
        

.para1{
	margin:0px;
	margin-top:2rem;
	text-align:center;
	font-size:12px;
}

 #error1  {
  color: #b94a48;
  font-weight: bold;
}

#timerContainer{
	display:flex;		
	margin:1rem 0;
}

	#timerContainer p{
		color:red;
		font-size:12px
	}
	
.toast{
    border-radius: 4px;
    background-color: red !important;
    position: fixed;
    bottom: 5vh;
    padding: 0.6rem 1.5rem;
    left: calc(50% - 150px);
    word-spacing: 1px;
    width: 310px;
    z-index: 100;
}

.toast-body{
	color: white;
	text-align: center;
}

/* ---main body--- */
	 
	 
	 
@media (max-width: 900px) {
    .rect-title-head {
        margin-top: 0px;
    }

        .rect-title-head h1 {
            margin: 0px;
            padding-top: 20px;
            font-size:20px;
        }
        
    .custid-page-wrapper {
    	padding: 20px 0;
    }
    
    .custid-input {
        border-style: none;
        padding-right: 5px;
    }
    
    .custid-input label {
        padding-left: 0px;
    }
}


@media (max-width: 576px) {

	ul{
		padding:0;
	}
	
    .custid-page-wrapper {
        padding: 20px;
    }
}