/*
    
    Ticket Number: PROWL- 82

    Author(s): Web Design Dpt @ William Reed - Digital Delivery 
    Created: 30/03/2023
    Last Modified: 04/04/2023 By AN

    -----------------------------------------------------------

    Desktop Styles

    1.0 Default Values
    1.1 Site Structure Starts Here

    Tablet Styles
    
    Mobile Styles

*/

/* HTML5 display-role reset for older browsers */

body { font-family: arial; line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }


/*
    1.0 Default Values

    Brand Colour Root Variables

*/

:root {  

    /* Brand Colour Variables */

    --primary-brand: #62a9a0;
    --primary-brand-dark: #367C81;
    --primary-brand-grey: #f0f2f2;
    --primary-cta: #F8722E;
    --primary-cta-hover: #E15007;
}

/*
    1.1 Site Structure Starts Here
*/

h1, h2, h3 {
    font-family: "klavika-web", sans-serif;
    font-weight: 400;
    font-style: normal;
}


#system-freeze {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 100%;
    max-width: 1220px;
    padding: 0;
    gap: 3.2rem;
    position: relative;    
}

#system-freeze .system-update {
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.4rem 3.2rem 2.4rem;
    width: 100%;
    z-index: 1;
}

#system-freeze .update-img {
    max-width: 400px;
}

#system-freeze .system-update h1 {
    font-size: 40px;
    letter-spacing: -0.008em;
    line-height: 48px;
    margin: 0 0 30px 0;
    padding: 0;
    font-weight: bold;
}

#system-freeze .system-update p {
    font-size: 16px;
    line-height: 26px;
    padding: 0;
    margin: 0 0 20px 0;
}

#system-freeze .system-update a {
    color: var(--primary-brand);
    font-size: 16px;
    line-height: 26px;
    text-decoration: none;
}

#system-freeze .system-update a:hover {
    text-decoration: underline;
}

#system-freeze .system-update a.discount-button {
    color: #fff;
    font-size: 22px;
    font-family: "klavika-web", sans-serif;
    line-height: 18px;    
}

#system-freeze .system-update a.discount-button:hover {
    text-decoration: none;
}

.system-update .discount-button {
    background-color: var(--primary-cta);
    border-radius: 0.4rem;
    color: #FFF;
    padding: 16px;
    margin: 10px 0 20px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: fit-content;
}

.system-update .discount-button:hover {
    background-color: var(--primary-cta-hover);
    text-decoration: none;
}  

/*
    Tablet Styles
*/

@media screen and (min-width: 729px) and (max-width: 1120px) {

	#system-freeze .system-update {
		grid-template-columns: 1fr 1fr 1fr;
	}

	#system-freeze .update-img {
		max-width: 300px;
	}

}

/*
    Mobile Styles
*/

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

    #system-freeze {
        flex-direction: column;
        justify-content: start;
        padding-bottom: 3.2rem;
        margin-bottom: 3.2rem;
        gap: 0;
    }    

}

/*
    Form Overrides
*/

#dis1 {
    max-width: 640px;
    width: 100%;
    padding: 30px;
}

.mktoForm {
    width: 100% !important;
}

#dis1 h2 {
    font-family: "klavika-web", sans-serif;
    font-weight: bold;
    font-style: normal;    
    font-size: 28px;
    line-height: 32px;
    padding: 0;
    margin: 0 0 20px 0;
}

#dis1 p {
    font-family: "klavika-web", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;    
    font-size: 16px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

#dis1 p.form-disclaimer { 
    font-size: 12px !important;
    line-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mktoForm span {
    font-family: "klavika-web", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;    
    font-size: 14px !important;
    line-height: 22px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.mktoForm input, .mktoForm select {
    font-family: "klavika-web", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;    
    font-size: 16px !important;
    line-height: 26px !important;
    padding: 5px 10px;
    width: 575px!important;
}

input[name="connect3rdPartyOptIn"]  {
    width: fit-content !important;
}  

.mktoForm .mktoButtonRow {
    text-align: left !important;
}

.mktoForm button.mktoButton {
    background-color: var(--primary-cta) !important;
    border-radius: 0.4rem !important;
    font-size: 22px !important;
    font-family: "klavika-web", sans-serif !important;
    line-height: 18px !important;
    color: #FFF !important;
    padding: 16px !important;
    margin: 10px 0 20px 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    height: auto !important;
}

.mktoForm button.mktoButton:hover {
    background-color: var(--primary-cta-hover) !important;
    text-decoration: none !important;
}  

#Lblconnect3rdPartyOptIn {
    display: flex;
    flex-direction: column-reverse;
    width: 575px !important;
}

.mktoRadioList  {
    margin: -20px 0 0 20px !important;
    clear: both;
}

div[title="I agree"] label {
    font-family: "klavika-web", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;    
    font-size: 16px !important;
    line-height: 12px !important;
}

.blocker {
    z-index: 100000 !important;
}

/*
    Mobile Styles for the form
*/

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

	.mktoForm {
		padding: 10px 0 !important;
	}

	.mktoForm input:not(input[name="connect3rdPartyOptIn"]), 
	.mktoForm select {		
		display: inline-block !important;
		float: none;
		width: 96% !important;
	}
	
	.mktoForm .mktoRequiredField label.mktoLabel {    
		 display: inline-block !important;
		 /* float: none; */
		 width: auto  !important;		
	}
	
	.mktoRadioList {
		clear: both;
		margin: -20px 0 0 6px !important
	}	
	
		#Lblconnect3rdPartyOptIn {
		display: flex !important;
		width: auto !important;		
	}

	/* dropdown styling */
	.mktoForm .mktoFormRow .mktoField {
		clear: none !important;		
	}

	
	.mktoForm .mktoButtonRow {
		margin-top: 14px !important;
		text-align: center !important;
		width: 100% !important;		
	}
	
	.mktoForm button.mktoButton {		
		width: 100% !important;	
	}

	/* .mktoForm select.mktoField {
		color: rgb(118,118,118);
	} */
	#dis1 {
		padding: 20px !important;
	}
	#dis1 p {
		margin-bottom: 10px !important;	
	}

	.mktoForm span {
		margin-bottom: 30px !important;
		margin-top: 10px !important;	
		/* margin: 10px -10px 30px -10px !important; */
	}
}