@charset "utf-8";
/* 
light blue
f56f00

orange
f56f00

*/

a:link {
text-decoration: none;
color:#5c88da;
}
a:visited {
text-decoration: none;
color:#5c88da;
}
a:hover {
text-decoration: none;
color:#5c88da;
}
a:active {
text-decoration: none;
color:#5c88da;
}

body {
background-color: #fff;
touch-action: manipulation;
}

#background {
position: fixed;
background-image: url('images/bg_main.jpg');
background-attachment:scroll;
background-repeat: no-repeat;
background-position:center top;
background-size: cover;
width:100%;
height:2500px;
}

body, ul, ol, li {
padding:0;
margin:0;
text-shadow:none;
font-family: 'Helvetica';
}

#page {
margin:0px auto;
position: relative;
width:640px;
}

#header {
padding-left: 30px;
padding-right: 30px;
}

.brandsHeader {
background-image: url('images/Brand_Logos.png');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
margin-left: 10px;
margin-right: 10px;
height: 120px;
z-index: 1;
}

.downloadTitle {
vertical-align:top;
margin-bottom: 30px;
padding-left: 10px;
}

.downloadTitle h2 {
font-family: 'Helvetica';
font-size: 52px;
font-weight: bold;
color:#FFF;
margin:4px;
}

.downloadTitle p {
display: flex;
align-items:center;
font-size: 28px;
color: #FFF;
margin-left: 4px;
margin-right: 4px;
margin-top: 22px;
margin-bottom: 12px;
}

.downloadTitle a {
display: inline-block;
width: 40px;
height: 40px;
background-image: url('images/Info_Button.png');
background-size: contain;
margin: 5px 0px 5px 20px;
}

.noAppsAvailable {
display: none;
font-size: 24px;
color: #FFF;
text-align: center;
line-height: 130%;
margin-top: 20px;
margin-left: 4px;
margin-bottom: 10px;
text-shadow: 0 2px 7px black;
}

.troubleshootingNote {
display: none;
font-size: 24px;
color: #FFF;
padding-left: 10px;
margin-top: 60px;
margin-left: 4px;
text-shadow: 0 2px 7px black;
}

.mobileSiteNote {
background-color:rgba(0, 0, 0, 0.85);
opacity: 1;
width: 80%;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
padding: 20px;
margin: auto;
font-size: 34px;
overflow: hidden;
}

.mobileSiteNoteHeader {
text-align: center;
font-size: 48px;
color:white;
margin-bottom: 12px;
}

.mobileSiteNoteBody {
color: white;
font-size: 20px;
text-align: center;
}

#content {
padding-left: 30px;
padding-right: 30px;
margin-top: 35px;
z-index: 2;
}

#footer {
height: 100px;
background-image: url('images/Stellantis_Footer_Logo.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 60px;
}

.phoneNumber {
color: #ffffff;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.3);
text-shadow: none;
white-space: nowrap;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

a[href^=tel] {
color:inherit;
text-decoration:inherit;
font-size:inherit;
font-style:inherit;
font-weight:bold;
white-space: nowrap;
}

.downloadApps{
font-size: 20px;
}

.topApps {
opacity: 0;
transition: opacity 0.5s ease-out;
}

.bbGames {
opacity: 0;
transition: opacity 0.5s ease-out;
}

.bottomApps {
opacity: 0;
transition: opacity 0.5s ease-out;
}

.downloadApps li {
-webkit-tap-highlight-color: rgba(0, 100, 200, 0.4);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
list-style-type: none;
background-color: #FFF;
position: relative;
opacity: 1;
background-color: rgba(255, 255, 255, 0.85);
}

.downloadApps .appSeparator {
background-color: rgba(255, 255, 255, 0);
height:50px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding:0;
margin-top: -5px;
margin-bottom: -5px;
opacity: 1;
}

.downloadApps .appSeparatorLines {
background-image: url('images/BetweenApp-btnLines.png');
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(255, 255, 255, 0);
height:50px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding:0;
margin-top: -5px;
margin-bottom: -9px;
opacity: 1;
}

.downloadApps a {
text-decoration:none;
font-weight: normal;
display: block;
padding:15px 15px;
}
.appIcon {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.appIcon:after {
animation: shine 7s ease-out infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(45deg);

background: rgba(255, 255, 255, 0);
background: linear-gradient(
to right, 
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.appIcon.icon1:after {
animation-delay: 1s;
}
.appIcon.icon2:after {
animation-delay: 1.15s;
}
.appIcon.icon3:after {
animation-delay: 1.3s;
}
.appIcon.icon4:after {
animation-delay: 1.45s;
}
.appIcon.icon5:after {
animation-delay: 1.6s;
}
.appIcon.icon6:after {
animation-delay: 1.75s;
}
.appIcon.icon7:after {
animation-delay: 1.9s;
}
.appIcon.icon8:after {
animation-delay: 2.05s;
}
.appIcon.icon9:after {
animation-delay: 2.2s;
}
.appIcon.icon10:after {
animation-delay: 2.35s;
}
.appIcon.icon11:after {
animation-delay: 2.5s;
}
.appIcon.icon12:after {
animation-delay: 2.65s;
}
.appIcon.icon13:after {
animation-delay: 2.8s;
}
.appIcon.icon14:after {
animation-delay: 2.95s;
}
.appIcon.icon15:after {
animation-delay: 3.05s;
}
.appIcon.icon16:after {
animation-delay: 3.2s;
}
.appIcon.icon17:after {
animation-delay: 3.35s;
}
.appIcon.icon18:after {
animation-delay: 3.5s;
}
.appIcon.icon19:after {
animation-delay: 3.65s;
}
.appIcon.icon20:after {
animation-delay: 3.8s;
}
.appTitle {
position: absolute;
top:14px;
font-size: 38px;
font-weight: bold;
left:130px;
color:#000;
z-index: 2;
}
.appDesc {
position: absolute;
top:64px;
left:130px;
line-height: 100%;
font-size: 24px;
padding-right: 10px;
color:#000;
}
.appVersion {
position: absolute;
font-size: 22px;
top:12px;
right:10px;
width:70px;
text-align: right;
color:#999999;
}
.appInstall {
font-size: 26px;
position: absolute;
bottom:10px;
right:10px;
width:100px;
text-align: right;
text-transform: uppercase;
color:#5c88da;
}
.tabletOnlyIcon {
display: none;
position: absolute;
top: 15px;
right: 10px;
width: 135px;
height: 70px;
background-image: url('images/Tablet_Only.png');
background-repeat: no-repeat;
background-size: contain;
}

.iShowroomHeader {
background-repeat: no-repeat;
background-size: contain;
height:66px;
position: relative;
display: none;
margin-bottom: -5px;
z-index: 1;
}

.bbHeader {
background-image: url('images/BB-Header.png');
background-repeat: no-repeat;
background-size: contain;
height:235px;
position: relative;
margin-top: 20px;
margin-bottom: -5px;
z-index: 1;
}

.bbFooter {
background-image: url('images/BB-Footer.png');
background-repeat: no-repeat;
background-size: contain;
height:130px;
position: relative;
margin-top: -5px;
z-index: 1;
}
.bbFooter a {
display: block;
width: 100%;
height: 70px;
padding-top: 35px;
}

#positionsSelector, #regionsSelector, #moreInformation, #tabletOnlyInformation, #announcementIshowroomPRO, #announcementMasterTech {
display: none;
position:fixed;
width: 100%;
height: 100%;
top:0px;
left:0px;
z-index:100;
background-color: black;
opacity: 0.97;
}

#positionsSelector, #regionsSelector, #announcementIshowroomPRO, #announcementMasterTech {
opacity: 1;
}

.positionsSelectorPopup, .regionsSelectorPopup, .moreInformationPopup, .tabletOnlyInformationPopup, .announcementIshowroomPROPopup, .announcementMasterTechPopup {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color:#eeeeee;
opacity: 1;
width: 570px;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
padding: 50px;
font-size: 34px;
overflow: hidden;
}

.positionsSelectorPopup {
width: 610px;
padding: 30px;
padding-top: 40px;
}

.moreInformationPopup, .tabletOnlyInformationPopup, .announcementIshowroomPROPopup, .announcementMasterTechPopup {
height: 850px;
}

.announcementIshowroomPROPopup {
height: 860px;
}

.positionsSelectorPopup, .regionsSelectorPopup {
padding-bottom: 125px;
}

.moreInformationHeader, .tabletOnlyInformationHeader {
text-align: center;
font-size: 68px;
color: #5C88DA;
margin-bottom: 40px;
}

.vehicleDeliveryInformationHeader {
text-align: center;
margin-bottom: 30px;
}


.moreInformationDescription, .tabletOnlyInformationDescription, .announcementIshowroomPROPopupDescription, .announcementMasterTechPopupDescription {
background-size: 150px 150px;
background-repeat: no-repeat;
background-position: 5px 35px;
}

.moreInformationDescription > p, .tabletOnlyInformationDescription > p {
padding: 5px 5px 5px 55px;
margin: 0;
}

.announcementIshowroomPROPopupDescription > p {
padding: 5px 5px 5px 15px;
margin: 0;
}

.announcementIshowroomPROPopupDescription > ul > li {
font-size: 32px;
padding-bottom: 15px;
}

.announcementIshowroomPROPopupDescription > a > img {
padding-top: 15px;
}

.announcementMasterTechPopupDescription > p {
padding: 5px 5px 5px 15px;
margin: 0;
}

.moreInformationCloseButton, .positionsSelectorCloseButton, .regionsSelectorCloseButton {
position: absolute;
left: 0;
bottom: 0;
background-color: #5C88DA;
color: white;
width: 100%;
height: 106px;
text-align: center;
font-size: 54px;
font-weight: bold;
}

.positionsSelectorCloseButton, .regionsSelectorCloseButton {
display: flex;
flex-direction: row;
align-items: center;
}

.positionsSelectorCloseButton .checkbox, .regionsSelectorCloseButton .checkbox {
margin-right: 30%;
margin-bottom: 5px;
}
.positionsSelectorCloseButton .label, .regionsSelectorCloseButton .label {
font-size: 24px;
text-align: left;
margin-top: 2px;
left: 125px !important;
width: 170px !important;
}

.positionsSelectorCloseButton > a, .regionsSelectorCloseButton > a {
display: block;
color: white;
width: 60%;
}

.moreInformationCloseButton > a {
display: block;
color: white;
padding-top: 20px;
width: 100%;
height: 100%;
}

#officialRules, #officialStudentRules {
display: none;
position: absolute;
top:0px;
left:0px;
z-index:100;
background-color: white;
padding-left: 30px;
padding-right: 30px;
}

.officialRulesConfirm {
background-color: black;
height:160px;
font-size: 48px;
font-weight: bold;
text-align: center;
color: #F2C30D;
/*margin-bottom: 70px;*/

position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.officialRulesConfirm a {
-webkit-tap-highlight-color: rgba(255,255,255,0.4);
display:block;
color: #F2C30D;
width:100%;
height:100%;
padding-top: 40px;
}

@keyframes fadeIn {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.popupHeader {
font-size: 48px;
font-weight: bold;
color: #5C88DA;
text-align: center;
margin-top: 70px;
}

.popupBody {
font-size: 32px;
color: #000;
padding-bottom: 170px;
}

.popupBody li {
margin-left: 38px;
margin-top: 1em
}

.divider {
height: 2px;
background-color: #999;
width: 560px;
margin: 10px auto;
clear: both;
}

.troubleshootingNoteBottom {
position: relative;
color: white;
text-align: center;
font-size: 24px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
line-height: 120%;
text-shadow: 0 2px 7px black;
}

#optimizedList {
margin: 0 0 0 15px;
}
#optimizedList li {
list-style-type: none;
padding:0px 0 15px 5px;
}
#optimizedList li:before {
content:"-";
position:absolute;
margin-left: -15px;
}

.color {
color:#FFF;
background-color: #5c88da !important;
}

.mdmInstructionsButton {
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
position: relative;
opacity: .85;
background-color: black;
color: white;
font-size: 28px;
text-align: center;
margin-bottom: 80px;
}
.mdmInstructionsButton > a {
display: block;
color: white;
padding:15px 15px;
}


#mdmInstructions {
display: none;
position: absolute;
top:0px;
left:0px;
z-index:100;
background-color: white;
padding-left: 30px;
padding-right: 30px;
}

#mdmInstructions .popupBody {
font-size: 1.5em;
}

.mdmInstructionsList {
margin-block-start: 0.6em;
margin-block-end: 0.6em;
}

.mdmInstructionsConfirm {
background-color: #5C88DA;
height:160px;
font-size: 48px;
font-weight: bold;
text-align: center;
color: white;
/*margin-bottom: 70px;*/

position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

.mdmInstructionsConfirm > a {
display: block;
color: white;
padding-top: 40px;
width: 100%;
height: 100%;
}


/*		ANDROID		*/
.downloadInstructionsAndroidButton {
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
position: relative;
opacity: .85;
background-color: black;
color: white;
font-size: 42px;
font-weight: bold;
text-align: center;
margin-top: 70px;
}
.downloadInstructionsAndroidButton > a {
display: block;
color: white;
padding:15px 15px;
}

#downloadInstructionsAndroid {
display: none;
position: absolute;
top:0px;
left:0px;
z-index:100;
background-color: white;
padding-left: 30px;
padding-right: 30px;
}

.downloadInstructionsAndroidConfirm {
background-color: #5C88DA;
height:160px;
font-size: 48px;
font-weight: bold;
text-align: center;
color: white;
/*margin-bottom: 70px;*/

position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

.downloadInstructionsAndroidConfirm > a {
display: block;
color: white;
padding-top: 40px;
width: 100%;
height: 100%;
}


@keyframes shine {
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}










@keyframes eh {
0% {transform: scale(0%)};
100% {transform: scale(100%)};
}

.feather-check { color: white; width: 30px; height: 30px; }

.checked-icon {
display: block;
opacity: 0;
width: 100%;
height: 100%;
}

.rad-icon {
opacity: 0;
background-color: #5C88DA;
border: 24px solid #5C88DA;
height: 1px;
width: 1px;
border-radius: 50%;
margin: 11px auto;
display: block;
}

.configSelector {
-webkit-tap-highlight-color: rgba(0, 100, 200, 0.4);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
padding: 10px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
font-size: 24px;
display: flex;
flex-direction: row;
align-items: center;
}

.configSelector a {
color: white;
opacity: 0.9;
padding: 5px;
align-self: center;
}

.positionsSelectorButton {
width: 72%;
text-align: left;
}

.regionsSelectorButton {
/*width: 28%;*/
text-align: right;
border-left: white 1px solid;
}

.positionsSelectorIcon, .regionsSelectorIcon {
opacity: 0.9;
padding: 5px;
cursor: pointer;
}

.regionsSelectorIcon {
padding-left: 10px;
}

.configPanel {
/* background-color: white; */
width: 92%;
border-radius: 10px;
/* box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2); */
display: flex;
flex-flow: column;
justify-content: space-evenly;
align-items: center;
padding: 0% 4% 6% 4%;
font-size: 32px;
}

.configPanel p {
margin-top: 10px;
margin-bottom: 10px;
}

h3 {
width: 92%;
font-size: 36px;
font-weight: bold;
color: #5C88DA;
margin-bottom: 10px;
}

#inputRegions, #inputPositions {
width: 90%;
}

#inputPositions {
display: block;
flex-wrap: wrap;
}

#inputPositions>* {
flex: 1 1 190px;
}

#inputPositions .positionCheckboxAll {
flex: 1 1 500px;
padding-top: 18px;
padding-bottom: 18px;
}

.regionRadio {
padding-top: 18px;
padding-bottom: 18px;
}

.positionCheckbox {
padding-top: 18px;
padding-bottom: 18px;
}

.checkbox, .radio {
width: 70px;
height: 70px;
position: relative;
display: block;
}

.check, .rad, .minus {
position: absolute;
height: 100%;
width: 100%;
background-color: #fff;
border-style: solid;
border-color: #333;
border-width: 3px;
}
.check, .minus { border-radius: 8px; transition: all 0.4s; }
.rad {border-radius: 50%; transition: all 0.4s; }

/* .checkbox.on .check, .radio.on .rad { background-color: #fff; } */
.checkbox.on .checked-icon, .radio.on .rad-icon {
opacity: 1; 
text-align: center;
animation-name: eh;
animation-duration: 0.3s;
}

.checkbox .checked-icon, .radio .rad-icon { transition: opacity 0.3s ease-out; }

.toggle {
position: relative;
width: 60px;
height: 34px;
display: inline-block;
}

.toggle .slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.4s;
border-radius: 34px;
}

.toggle .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
}

.toggle .slider { background-color: #e3eefa; }
.toggle.on .slider { background-color: #4287f5; }
.toggle.on .slider:before { transform: translateX(26px); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); }

.toggle .label {
position: absolute;
left: 100px;
top: 10px;
vertical-align: middle;
}

.checkbox .label, .radio .label {
position: absolute;
left: 90px;
height:100%;
display:flex;
align-items: center;
cursor: pointer;
}

.radio .label {
width: 350px;
}

.checkbox .label {
width: 410px;
}

.checkboxAll .label {
width: 410px;
}

.radio .subLabel {
position: absolute;
display:flex;
left: 110px;
top: 52px;
width: 280px;
font-size: 20px;
cursor: pointer;
}

input { height: 100%; width: 100%; opacity: 0; position: absolute; z-index: 100; cursor: pointer; vertical-align: middle;}

/* -- DISABLED -- */

.toggle.disabled .slider { background-color: #ededed; }
.toggle.disabled .slider::before { box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05); }
.checkbox.disabled .check, .radio.disabled .rad { background-color: #ededed; }

.disabled .label { color: #bababa; }
.disabled input { pointer-events: none; }

/* -- FOCUS -- */

.toggle.focus .slider, .checkbox.focus .check, .radio.focus .rad { box-shadow: 0px 0px 0px 2px #bababa; transition: all 0.4s; }
/* .focus .label { text-shadow: 0px 0px 3px #bababa; transition: all 0.4s; } */