/*poppins url: https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%27)*/
/* Not In-Use */
/*
@font-face {
  font-family: "Poppins-100";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiGyp8kv8JHgFVrLPTucHtA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/* Not In-Use */
/*
@font-face {
  font-family: "Poppins-200";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/* Not In-Use */
/*
@font-face {
  font-family: "Poppins-300";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/* In Use */
@font-face {
  font-family: "Poppins-400";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* In Use */
@font-face {
  font-family: "Poppins-500";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* In Use */
@font-face {
  font-family: "Poppins-600";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* In-Use */

@font-face {
  font-family: "Poppins-700";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Not In-Use */
/*
@font-face {
  font-family: "Poppins-800";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/* Not In-Use */
/*
@font-face {
  font-family: "Poppins-900";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

.ng-p1{
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 14px;
  font-family:"Poppins-400", sans-serif!important;

}
.ng-p2{
  margin-bottom: 32px;
    font-weight: 400;
  font-size: 14px;
  font-family:"Poppins-400", sans-serif!important;
}



body, .page {
  background: #7A3864 !important;
  background-image: url(https://www.nationalgrideso.com/static/background-CIAM.png) !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/*controls input labels ontop of input fields*/

.reg-label {
	font-family:"Poppins-400", sans-serif!important;
    position: initial !important;
    margin: 0 0 8px 0 !important;   
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #000000 !important;
    text-transform: none;
	letter-spacing: 0.32px !important;
}

/*
  To be used for all submit buttons on all screens
*/

/* new css for buttons */

.control{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/*
  To be used for all submit buttons on all screens
*/

.btnsubmit {
    font-family:"Poppins-600", sans-serif;
    height: 40px;
    width: 80px;
    border-radius: 2px;
    /* float: right; */
    color: #fff !important;
    font-size: 14px !important;
    line-height: 20px !important;
    background: #7A3864;
    cursor: pointer;
    border-color: #7A3864;
    border: 1px solid #7A3864;
	letter-spacing: 0.16px !important;
}

.btnsubmit:hover {
    font-family:"Poppins-600", sans-serif;
    height: 40px;
    width: 80px;
    border-radius: 2px;
    /* float: right; */
    color: #fff !important;
    font-size: 14px !important;
    line-height: 20px !important;
    background: #8C6A83 !important;
    cursor: pointer;
    border: 0;
	letter-spacing: 0.16px !important;							  
}

.btnsubmit:active {
    font-family:"Poppins-600", sans-serif;
    height: 40px;
    width: 80px;
    border-radius: 2px;
    float: right;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 20px !important;
    background: #3F0731 !important;
    cursor: pointer;
    border: 0;	
	letter-spacing: 0.16px !important;
}

.btnsubmit:focus {
    font-family:"Poppins-600", sans-serif;
    height: 40px;
    width: 80px;
    border-radius: 2px;
    /* float: right; */
    color: #fff;
    font-size: 14px !important;
    line-height: 20px !important;
    background: #7A3864;
    cursor: pointer;
	outline-offset: 1px;
	outline: 2px solid #3394CD !important;
	letter-spacing: 0.16px !important;
}

/*
  CSS for when a submit button has a disabled attribute
*/


.btnsubmit:disabled {
    font-family:"Poppins-600", sans-serif!important;
    background: #D2D2D2 !important;
    pointer-events: none;
    opacity: 100 !important;
    border-color: #C6C6C6;
	letter-spacing: 0.16px !important;
}

  /*
    To be used for all cancel buttons on all screens
  */


.btncancel {
	font-family:"Poppins-600", sans-serif;
    background: #fff;
    border: 1px solid #7A3864;
    padding: 9px;
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    width: 83px; 
	color: #7A3864;
	font-size: 14px;
	letter-spacing: 0.16px;
	line-height: 20px;
}

.btncancel:hover {
	font-family:"Poppins-600", sans-serif;
    background: #8C6A83 !important;
	color: #fff !important;
    border: 1px solid #8C6A83 !important;
    padding: 9px;
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    width: 83px;
	font-size: 14px;
	letter-spacing: 0.16px;
	line-height: 20px;		  				   
}

.btncancel:active {
	font-family:"Poppins-600", sans-serif;
    background: #3F0731 !important;
	color: #fff !important;
    border: 1px solid #3F0731 !important;
    padding: 9px;
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    width: 83px;
	font-size: 14px;
	letter-spacing: 0.16px;
	line-height: 20px;
}

.btncancel:focus {
	font-family:"Poppins-600", sans-serif;
	color: #7A3864;
	background: #fff;
    border: 1px solid #7A3864;
    padding: 9px;
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    width: 83px;
	outline-offset: 1px;
	outline: 2px solid #3394CD;
	font-size: 14px;
	letter-spacing: 0.16px;				  
	line-height: 20px;
}

.btncancel:focus:active {
	outline: none !important;
}

/*
  Controls location of container of where the Microsoft Button sits in
*/

.mscontainercontrol{
  text-align: center;
}

/*
  CSS for the Microsoft Button
*/

.msbtnmain {
    font-family:"Poppins-600", sans-serif;
    color: #fff !important;
    font-size: 14px !important;
    height: 40px;
    width: 201px;
    background: #2C5E77;
	border: 0 !important;
	border-radius: 2px;
    margin-bottom: 32px;
	cursor: pointer;
	line-height: 20px !important;
	letter-spacing: 0.16px;							  
}

.msbtnmain:hover {
    font-family: "Poppins-600", sans-serif !important;
    color: #fff !important;
    font-size: 14px !important;
    height: 40px;
    width: 201px;
    background: #3F87AA63 !important;
    border: 0;
	border-radius: 2px;
    margin-bottom: 32px;
	cursor: pointer;
	line-height: 20px !important;
	letter-spacing: 0.16px;
}

.msbtnmain:active {
    font-family: "Poppins-600", sans-serif !important;
    color: #fff !important;
    font-size: 14px !important;
    height: 40px;
    width: 201px;
    background: #070E40 !important;
    border: 0 !important;
	border-radius: 2px;
    margin-bottom: 32px;
	cursor: pointer;
	line-height: 20px !important;
	letter-spacing: 0.16px;
}

.msbtnmain:focus {
    font-family: "Poppins-600", sans-serif !important;
    color: #fff !important;
    font-size: 14px !important;
    height: 40px;
    width: 201px;
    background: #2C5E77;
	border: 0 !important;
	border-radius: 2px;
    margin-bottom: 32px;
	cursor: pointer;
	outline-offset: 1px;
	outline: 2px solid #3394CD !important;
	line-height: 20px !important;
	letter-spacing: 0.16px;
}

/*
  CSS for heading that will be similar across all screens
*/

.ng-heading {
	font-family:"Poppins-500", sans-serif!important;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    font-weight: 500;
	/* letter-spacing: 0.16px; */
}

.ng-heading--4 {
	font-family: "Poppins-400", sans-serif !important;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: left !important;
	letter-spacing: 0.16px;
}
			 
/*
  Controls the container that the Logo sits in
*/

.org-logo-container {
    height: 74px !important;
    background-color: #7A3864;
}

/*
  CSS for the logo itself
*/

.org-image {
	height: 42px;
	width: 125px;
}

/*
  CSS for the logo itself
*/

.org-logo-padding {
	padding: 16px 32px 16px 32px;
}


/*
  Contols style for the links type primary
*/

.ng-links-primary {
	font-family:"Poppins-400", sans-serif!important;
    cursor: pointer !important;
    color: #7A3864 !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 24px !important;
    text-transform: none;
    background: none;
    border: none;
	letter-spacing: 0.16px !important;
}

.ng-links-primary:hover {
	font-family: "Poppins-400", sans-serif, arial !important;
    cursor: pointer !important;
    color: #3F0731 !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 24px !important;
    text-transform: none;
    background: none;
    border: none;
	text-decoration:underline;
	letter-spacing: 0.16px !important;
}
							  

.ng-links-primary:focus {
	font-family: "Poppins-400", sans-serif, arial !important;
    cursor: pointer !important;
    color: #7A3864 !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 24px !important;
    text-transform: none;
    background: none;
    border: none;
	outline-offset: 1px;
	outline: 2px solid #3394CD !important;
	letter-spacing: 0.16px !important;
}

.ng-links-primary:visited {
	font-family: "Poppins-400", sans-serif, arial !important;
    cursor: pointer !important;
    color: #6F6F6F !important;
    font-size: 14px !important;    
    font-style: normal !important;
    line-height: 24px !important;
    text-transform: none;
    background: none;
    border: none;	
	letter-spacing: 0.16px !important;
}

/*
  Contols style for the links type secondary
*/

.ng-links-secondary {
    font-family:"Poppins-400", sans-serif!important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #7A3864 !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 24px !important;
    display: inline;
	letter-spacing: 0.16px !important;
}

.ng-links-tertiary {
    font-family: "Poppins-400", sans-serif !important;
    background: none !important;
    border: none !important;
    color: #000 !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 24px !important;
    display: inline;
}			 
								
/*
  Contols style for the where simple text is required
*/

.ciamjusttext {
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
}

.div_help {
    width: 100%;
    text-align: left !important;
    cursor: default;
    white-space:nowrap;
}

/*
  Contols style padding around the content
*/
.paddingcontent {
  padding: 32px 32px 32px 32px;
}

/* stle for container holding checkbox*/

.terms-conditions-container{
  text-align: left;
  accent-color: #161616 !important;
  margin-bottom: 32px !important;
}

.terms-conditions-container input {
width: 15px !important;
height: 15px !important;
vertical-align: middle !important;
}

/* to be used to align the error message in skerror on top of the form */

.feedback--error {
    font-family:"Poppins-400", sans-serif !important;
    color: #cf0c0c !important;
    font-size: 14px !important;
    text-align: left !important;
    letter-spacing: 0.16px !important;
    line-height: 24px;
}

.ng-text-input {
	background: #FFFFFF;
	border: 1px solid #6F6F6F;
	box-sizing: border-box;
	padding: 8px 16px;
	height: 40px;
	font-family:"Poppins-400", sans-serif !important;
	font-size: 14px !important;
	line-height: 24px !important;
	font-style: normal !important;
	letter-spacing: 0.16px !important;
}

.ng-text-input:focus {
	background: #FFFFFF;
	border: 2px solid #3394CD;
	border-radius: 2px;
	box-sizing: border-box;
	padding: 8px 16px;
	height: 40px;
	font-family:"Poppins-400", sans-serif !important;
	font-size: 14px !important;
	line-height: 24px !important;
	font-style: normal !important;
	letter-spacing: 0.16px !important;
}

.ng-text-input:focus:active {
	background: #FFFFFF;
	border: 1px solid #6F6F6F;
	box-sizing: border-box;
	padding: 8px 16px;
	height: 40px;
	font-family:"Poppins-400", sans-serif !important;
	font-size: 14px !important;
	line-height: 24px !important;
	font-style: normal !important;
	letter-spacing: 0.16px !important;
}

.css-sw2ho0 {
 --primary-color: #B04A2A !important;
}

a {
  color: #b35234;
}

a:hover {
  color: #cc8f79;
}

.password-suggestions.pwdsg-hide {
  display: none;
}

.pingicon-success-round{
  color:#7AA450;
}

.pingicon-error-triangle{
  color: red;
}

.tooltip {
  position: absolute;

}
/* end theme styles */

@media (max-width: 480px) {
  .tooltip {
    display: none !important;
  }
}

.ng-email-text {
  color: #7A3864 !important;
}

.ng-terms-conditions-container {
    text-align: left;
    accent-color: #161616 !important;
    display: inline-grid;
    position: sticky;
}

.ng-terms-conditions-container input {
	width: 15px !important;
	height: 15px !important;
	vertical-align: middle !important;
	top: 3px;
	box-shadow: none;
}

.ng-checkbox {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 2px;
    vertical-align: middle;
    border: 1px solid black;
    cursor: pointer;
	appearance: none;
}

.ng-checkbox {
  position: relative;
}

.ng-checkbox:checked {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAfAAAAHwBFQ/t5AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACdSURBVDiNrdNLCsIwFEbhz8fckSsSHYp7FOpj6CrcgNN2EYLSUZykpdKHfRgIXH44h+TeBA5IEQbuNLKj4FIyi8XoNR/BJLhVgyFHTrDAGs+Y9YZPEV7hXsnLIserBT63wKUgxx6bBsmlA/4WhBBgi3fMr1h2wLUrFJIdjj3gWhNLSRT9ghunUPSjD9w6xhyPPuP9y1POJvAZE7/zB59zscPmBGf4AAAAAElFTkSuQmCC");
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
}

.ng-checkbox:focus {
   box-shadow: 0 0 0 2pt #3394CD;
}

.ng-checkbox:focus:active {
    box-shadow: none !important;
}

.ng-round-erroricon1:before {
    content: '!';
    width: 16px;
    height: 16px;
    line-height: 14px;
    border-radius: 50%;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background: #CF0C0C;
    position: absolute;
    top: 12.5px;
    right: 40px;
}

.link-font1 {
  font-family: "Poppins-700", sans-serif !important;
}

.link-font1:hover {
  font-family: "Poppins-700", sans-serif !important;
}

.link-font1:focus {
  font-family: "Poppins-700", sans-serif !important;
}

.link-font1:visited {
  font-family: "Poppins-700", sans-serif !important;
}

.app-container {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.page__content {
    height: 100%;
    flex-direction: row-reverse !important;
    margin: 0px !important
}

/* to be used to style the card that contain all the content*/

.card {
 top: 0px !important;
 position: sticky;
 width: 452px !important;
 max-width: 100% !important;
 margin: auto auto auto auto !important;									 
}

/*
  Controls Css for OR seperator
*/

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 32px !important;
    margin-top: 32px !important;
    font-family:"Poppins-400", sans-serif !important;
    font-size: 16px;
    line-height: 22px;
    height: 26px;
    color: #7A3864;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.buttoncontrol {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
	margin-bottom: 32px !important;
}

.pingicon-success-round-field:before {
    content:"\E92E";
    color: #7AA450;
    position: absolute;
    right: 40px;
    top: 12.5px;
}

.text-input__icon:before {
    top:12px !important;
}

.css-sw2ho0 {
    --primary-color: #7A3864 !important;
}

.spinner-color {
   color: #7A3864 !important; 
}