﻿/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*SPINNER//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.master-spinner-container {
    position: fixed;
    bottom: 10%;
    left: 50%;
    margin-bottom: -10px;
    margin-left: -8px;
    z-index: 99999999;
}

.cssload-loader {
	position: relative;
	left: calc(50% - 31px);
	width: 62px;
	height: 62px;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	perspective: 780px;
}

.cssload-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;	
}

.cssload-inner.cssload-one {
	left: 0%;
	top: 0%;
	animation: cssload-rotate-one 1.15s linear infinite;
		-o-animation: cssload-rotate-one 1.15s linear infinite;
		-ms-animation: cssload-rotate-one 1.15s linear infinite;
		-webkit-animation: cssload-rotate-one 1.15s linear infinite;
		-moz-animation: cssload-rotate-one 1.15s linear infinite;
	border-bottom: 3px solid #ffffff;
}

.cssload-inner.cssload-two {
	right: 0%;
	top: 0%;
	animation: cssload-rotate-two 1.15s linear infinite;
		-o-animation: cssload-rotate-two 1.15s linear infinite;
		-ms-animation: cssload-rotate-two 1.15s linear infinite;
		-webkit-animation: cssload-rotate-two 1.15s linear infinite;
		-moz-animation: cssload-rotate-two 1.15s linear infinite;
	border-right: 3px solid #ffffff;
}

.cssload-inner.cssload-three {
	right: 0%;
	bottom: 0%;
	animation: cssload-rotate-three 1.15s linear infinite;
		-o-animation: cssload-rotate-three 1.15s linear infinite;
		-ms-animation: cssload-rotate-three 1.15s linear infinite;
		-webkit-animation: cssload-rotate-three 1.15s linear infinite;
		-moz-animation: cssload-rotate-three 1.15s linear infinite;
	border-top: 3px solid #ffffff;
}







@keyframes cssload-rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-one {
	0% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-one {
	0% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-one {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-one {
	0% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-two {
	0% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-two {
	0% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-two {
	0% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-two {
	0% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-three {
	0% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-three {
	0% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-three {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-three {
	0% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*MISC/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.section-header {
    margin: 10px 0 10px 0;
    color: blue;
    font-weight: bolder;
    text-decoration: underline;
    font-size: 1.1em;
}

.vehicle-placeholder-a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: #fff;
}

.panel2, .panel3, .panel4 {
    display: block;
}

input.one-third { width: 15%; }


.panel-block .error-message-template {
    width: 75%;
    background-color: #D45252;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 5px 5px 5px;
    margin: 3px 0 10px 25%;
    text-align: center;
    float: left;
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    display: block;
}

.panel-block .input-wrapper .error-message-template {
    width: 100%;
    clear: both;
    margin-left: 0;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
}


.error-message-template-checklist {
    margin: 3px 25% 10px 0 !important;
}

@media (max-width: 479px) {
    
    .panel-block .error-message-template {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }

    .error-message-template-checklist {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

} 


.models-loading-message {
    color: #ffffff;
    width: 75%;
}


.results-area .w-input[disabled],
.results-area .w-select[disabled],
.results-area .w-input[readonly],
.results-area .w-select[readonly],
.results-area fieldset[disabled] .w-input,
.results-area fieldset[disabled] .w-select {
    background-color: #167EBA;
}


.form-page-wrapper-full-screen {
    width: 100%;
}

.form-wrapper-full-screen {
    width: 100%;
}

.motor-application-confirmed-container {
    width: 100%;
}


.motor-application-confirmed-container p {
    text-align: center;
}


/*BEGIN FIX FOR IFRAME ISSUE-*/

@media (max-width: 991px) {
    .panel-qq2 {
        min-height: 1vh;
    }
  
}
.panel-qq2 {
    min-height: 1vh;
}

.panel4 {
    min-height: 1vh
}

/*END FIX FOR IFRAME ISSUE-*/

body {
    background-color: #167eba;
}

.application-form-intro {
    text-align: left;
}

.motor-application-confirmed-tick {
    background-image: url('../Images/Tick.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 350px;
    height: 450px;
    margin: auto;
    margin-top: -20px;
}

@media (max-width: 640px) {
    .motor-application-confirmed-tick {
        width: 300px;
    }
  
}

@media (max-width: 320px) {
    .motor-application-confirmed-tick {
        width: 200px;
    }
  
}