@font-face {
    font-family: 'ducati-cond-regular';
    src: url('font/DucatiStyleCond_Rg.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-condensed';
    src: url('font/DucatiStyleCond_Rg.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-cond-bold';
    src: url('font/DucatiStyleCond_XBd.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-cond-tab-bold';
    src: url('font/DucatiStyleCondTAB_Bd.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-cond-tab-xbold';
    src: url('font/DucatiStyleCondTAB_XBd.ttf') format('truetype');
}

@font-face {
    font-family: 'ducatisymbol';
    src: url('font/Ducatisymbolsdef.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-ext-a-bold';
    src: url('font/DucatiStyleExt_A_Bd.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-ext-regular-bold';
    src: url('font/DucatiStyleExt_Rg.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-ext-bold';
    src: url('font/DucatiStyleExt_Bd.ttf') format('truetype');
}

@font-face {
    font-family: 'ducati-ext-rg';
    src: url('font/DucatiStyleExt_Rg.ttf') format('truetype');
}

* {
    margin: 0%;
    padding: 0%;
    -webkit-touch-callout: none;
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-user-select: none;
    touch-action: manipulation;
    /* prevent copy paste, to allow, change 'none' to 'text' */
}

body {
    font-family: 'ducati-cond-regular';
    color: white;
    letter-spacing: 0px;
}

.d-footer-main {
    letter-spacing: 0.8px !important;
    font-family: "ducati-cond-regular" !important;
}

#simulator-title h4,
#simulator-title h5 {
    font-family: 'ducati-ext-bold';
}


/*. cm-selected-label,
                        .cm-items {
                        font-family: 'ducati-ext-bold';
                        } */

.row-margin-05 {
    margin-top: 0.5em;
}

.row-margin-10 {
    margin-top: 1.0em;
}

.row-margin-20 {
    margin-top: 2.0em;
}

.row-margin-30 {
    margin-top: 3.0em;
}

.list-group-item {
    background-color: transparent;
    border-top: 1px solid rgba(221, 221, 221, 0);
    border-radius: 0;
    color: #fff;
    border: none;
    vertical-align: middle;
    padding: 0%;
    margin: 0%;
    font-family: "ducati-cond-regular";
}

.list-group-flush {
    display: inline-block;
    height: 100%;
    background-color: transparent;
}

.right-menu-text {
    margin-top: 15px;
    font-weight: bold;
}

.footer-text {
    margin-left: 20px;
    margin-bottom: 30px;
}

.main-back {
    background-image: url('img/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.btn-outline-danger {
    background-color: #353434;
    color: #FFF;
    width: 7%;
    height: 100%;
    font-weight: bold;
    border-color: rgb(245, 9, 9);
    border-width: 3px;
}

.btn-outline-danger:hover {
    color: #FFF;
    width: 7%;
    height: 100%;
    font-weight: bold;
    background-color: rgb(245, 9, 9);
    border-color: rgb(245, 9, 9);
    border-width: 3px;
}

.empty-box {
    background-image: url('scorpi/tab_empty.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(207, 15, 15);
}

#simulator {
    display: none;
    position: relative;
    background-repeat: no-repeat;
    background-position: 0 80%;
    background-size: 100% auto;
}

.main-display-header {
    width: 100%;
    text-align: center;
    position: relative;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#simulator-title {
    text-align: center;
    margin-top: 20px;
}

#simulator-title h4 {
    margin-bottom: 0px;
}

#simulator-title h5 {
    font-family: "ducati-ext-rg";
    font-size: 1.16rem;
}

#header-logo {
    max-width: 60px;
}

.locale-container {
    position: absolute;
    right: 20px;
}

.info-container {
    z-index: 10;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.info-container button {
    width: 48px;
    height: 48px;
    padding: 0px;
}

.info-container img {
    width: 48px;
    height: 48px;
}

.btn-locale {
    background-color: #666666;
    width: 48px;
    height: 48px;
    border-radius: 24px !important;
    color: white;
    font-family: 'ducati-cond-regular';
}

.ducati-modal .modal-header {
    border-bottom: 0px
}

.ducati-modal .modal-footer {
    border-top: 0px
}

.ducati-modal .modal-content {
    background-color: #666666;
    border: 1px solid white;
    width: 90%;
}

#language-selector-modal .modal-content {
    max-width: 300px;
}

.ducati-modal-info-title {
    text-align: center;
    width: 100%;
}

.ducati-modal-info-subtitle {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}

#myModalVideo .ducati-modal .modal-content {
    background-color: #666666;
    border: 1px solid white;
    width: 65%;
}

.ducati-bold-txt {
    font-family: "ducati-cond-tab-bold";
}

.ducati-modal .modal-body {
    text-align: center;
    min-height: 300px;
}

#dealer-modal .modal-body,
#sygic-modal .modal-body {
    min-height: 60px;
}

#dealer-modal .modal-content,
#sygic-modal .modal-content {
    max-width: 357px;
}

#myModalVideo .ducati-modal .modal-dialog {
    max-width: 500px;
}

.ducati-modal-info-title {
    font-size: 18px;
}

.ducati-modal-info-subtitle {
    font-size: 18px;
}

.info-modal-legend-img {
    height: 130px;
    width: auto;
    margin-top: 20px;
}

.col-info-legend-details {
    text-align: left;
}

.info-legend-ul {
    margin-top: 30px;
    list-style: square outside url("main/info-legend-pointer.svg");
}

.info-legend-ul li {
    margin: 10px;
}

.info-legend-row {
    margin-bottom: 40px !important;
}

.modal-body-title {
    font-family: 'ducati-ext-regular-bold';
    font-size: 18px;
}

.modal-body-content {
    font-size: 14px;
}

.ducati-modal .close {
    margin: -0.5rem -0.5rem -0.5rem auto;
    background-color: black;
    height: 24px;
    width: 24px;
    border-radius: 24px;
    color: white;
    padding: 0px;
}

.ducati-modal .close img {
    width: 8px;
    height: 8px;
}

#language-selector-modal ul {
    list-style: none;
    width: 153px;
    margin: 0 auto;
    padding-top: 40px;
}

#language-selector-modal ul li {
    margin-bottom: 20px;
    text-align: left;
    font-size: 14px;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

#language-selector-modal ul li img {
    width: 21px;
    height: 14px;
    margin-right: 20px;
}

.language-selector-list a {
    font-family: 'ducati-cond-tab-bold';
    text-decoration: none;
    color: white;
}


/* ====================================================  Left Controll ========================== */

.left-ctrl {
    /* position: absolute;
                          width: 100%;
                            height: 100%; */
    /*height: 500px;*/
}

#cluster-row {
    margin-top: 60px;
    margin-bottom: 60px;
}

.control-container {
    margin: 0 auto;
    display: block;
    position: relative;
    width: 350px;
    ;
    height: 441px;
}

.top {
    outline: none;
    border: none;
    position: relative;
    width: 50px;
    height: 90px;
    outline: none;
    border: none;
    background: url(scorpi/joystick/top.png) no-repeat;
    background-size: 100%;
    top: 130px;
    left: 298px;
}

button.top:hover {
    cursor: pointer;
    background-color: #FABD44;
}

.bottom {
    outline: none;
    border: none;
    position: relative;
    width: 50px;
    height: 90px;
    background: url(scorpi/joystick/bottom.png) no-repeat;
    background-size: 100%;
    top: 210px;
    left: 149px;
}

button.bottom:hover {
    cursor: pointer;
    background-color: #FABD44;
}

.left {
    outline: none;
    border: none;
    position: relative;
    width: 90px;
    height: 70px;
    background: url(scorpi/joystick/left.png) no-repeat;
    background-size: 100%;
    top: 175px;
    left: 30px;
}

button.left:hover {
    cursor: pointer;
    background-color: #FABD44;
}

.right {
    outline: none;
    border: none;
    position: relative;
    width: 90px;
    height: 70px;
    background: url(scorpi/joystick/right.png) no-repeat;
    background-size: 100%;
    top: 175px;
    left: 270px;
}

button.right:hover {
    cursor: pointer;
    background-color: #FABD44;
}

.center {
    outline: none;
    border: none;
    position: relative;
    width: 50px;
    height: 50px;
    background: url(scorpi/joystick/center.png) no-repeat;
    background-size: 100%;
    top: 170px;
    left: 0px;
}

button.center:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button:active {
    outline: none;
    border: none;
}

.main-display-all-screens {
    position: absolute;
    height: 62.5%;
    width: 63.3%;
    overflow: hidden;
    top: 18%;
    left: 12.5%;
    border-radius: 5px;
}

.display-screen {
    width: 100%;
    height: 100%;
    background-color: black;
}

.main-ctrl {
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    display: flex;
    position: relative;
    justify-content: center;
    /* border-radius: 10px; */
    /* background-color: rgb(0, 0, 0); */
    background-image: url('main/telaio.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.mainDisplayListHight {
    max-height: 150px;
    max-width: 300px;
    margin-bottom: 10px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.textZeroMarginPadding {
    padding: 0%;
    margin: 0%;
}

.nav-item {
    padding: 0%;
    margin: 0%;
}

.text-zero_margin-padding {
    padding: 0%;
    margin: 0%;
}

.regularFont {
    font-family: "ducati-cond-regular";
    font-weight: normal;
    font-style: normal;
}

.fontBoldItalic {
    font-family: "ducati-cond-regular";
    font-weight: bold;
    font-style: italic;
}

.fontBold {
    font-family: "ducati-cond-bold";
    font-style: normal;
}

.DucatiStyleCond-X {
    width: 204px;
    height: 314.6px;
    font-family: cond_x;
    font-size: 128px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: right;
    color: #ffffff;
}

.DucatiStyleSymbol {
    width: 204px;
    height: 314.6px;
    font-family: ducatisymbol;
    font-size: 128px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: right;
    color: #ffffff;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #00000000;
    border-color: #007bff00;
}


/* ==================================================  Video style */

.video-card {
    margin-bottom: 20px;
    cursor: pointer;
}

.card-bike {
    background-image: url(videos/card_background.png);
    background-size: cover;
}

.card-bike .gradient_color {
    position: absolute;
    right: 0%;
    height: 100%;
    width: 59%;
}

.card-bike .video-play-icon {
    position: absolute;
    top: 36%;
    left: 22%;
    height: 31%;
}

.card-bike .videoTitle {
    font-family: 'ducati-ext-rg';
    font-size: 1.0em;
    position: absolute;
    line-height: 1.3em;
    top: 42%;
    left: 60%;
    color: #FFF;
    text-align: left;
}

.card-bike .videoDesc {
    font-family: 'ducati-ext-rg';
    position: absolute;
    font-size: 0.5vw;
    top: 38%;
    left: 60%;
    color: #FFF;
}

.modal-dialog {
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#myModalVideo .modal-body {
    position: relative;
    padding: 0px;
}

#myModalVideo .close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.row {
    margin: 0%;
}


/* Style the navbar */

#navbar {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    padding-top: 20px;
    padding-bottom: 20px;
}

#navbar a {
    font-family: 'ducati-cond-regular', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    border: solid 1px #bbbcbc;
    border-top-color: rgb(187, 188, 188);
    border-right-color: rgb(187, 188, 188);
    border-bottom-color: rgb(187, 188, 188);
    border-left-color: rgb(187, 188, 188);
    background-color: transparent;
    color: #bbbcbc;
    min-width: 120px;
    height: 37px;
    line-height: 35px;
    padding: 0 1em;
    border-radius: 100px;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: color .2s, border-color .2s, background-color .2s;
    transition: color .2s, border-color .2s, background-color .2s;
    margin-left: 15px;
    margin-right: 15px;
}

@supports (-moz-appearance:none) {
    #navbar a {
        padding-top: 2px;
    }
}

#navbar a:hover {
    background-color: #0f0f0f;
    color: bbbcbc;
}

#navbar .active {
    background-color: #0f0f0f;
    color: bbbcbc;
}


/* Page content */

.content {
    /* padding: 16px; */
}


/* The sticky class is added to the navbar with JS when it reaches its scroll position */

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-image: url('img/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */

.sticky+.content {
    padding-top: 80px;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


/* Button controls styles */

#btnSpringOutline {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 83px;
    height: auto;
}

#btnSpring {
    position: absolute;
    top: 30px;
    left: 11px;
    width: 60px;
    height: auto;
}

#btnModeOutline {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 83px;
    height: auto;
}

#btnMode {
    position: absolute;
    top: 130px;
    left: 11px;
    width: 60px;
    height: auto;
}

#btnPlusOutline {
    position: absolute;
    top: 0px;
    left: 115px;
    width: 83px;
    height: auto;
}

#btnPlus {
    position: absolute;
    top: 10px;
    left: 126px;
    width: 60px;
    height: auto;
}

#btnMinusOutline {
    position: absolute;
    top: 140px;
    left: 115px;
    width: 83px;
    height: auto;
}

#btnMinus {
    position: absolute;
    top: 150px;
    left: 126px;
    width: 60px;
    height: auto;
}

#controlOutline {
    position: absolute;
    left: 210px;
    top: 10px;
    width: 115px;
    height: auto;
}

#btnAccIcon {
    left: 276px;
    position: absolute;
    top: 90px;
    width: 30px;
}

#btnControl {
    position: absolute;
    left: 220px;
    top: 22px;
    width: 98px;
    height: auto;
}

#btnRes {
    position: absolute;
    left: 254px;
    top: 24px;
    width: 61px;
}

#btnOnOff {
    position: absolute;
    left: 221px;
    top: 54px;
    width: 48px;
    height: auto;
}

#btnSet {
    position: absolute;
    top: 129px;
    left: 252px;
    width: 62px;
    height: auto;
}

#btnCenterOuter {
    position: absolute;
    top: 302px;
    left: 122px;
    width: 68px;
    height: auto;
}

#btnCenter {
    position: absolute;
    top: 314px;
    left: 134px;
    width: 45px;
    height: auto;
}

#btnTop {
    position: absolute;
    top: 243px;
    left: 128px;
    width: 58px;
    height: auto;
}

#btnBottom {
    position: absolute;
    top: 366px;
    left: 128px;
    width: 58px;
    height: auto;
}

#btnRight {
    position: absolute;
    top: 306px;
    left: 185px;
    height: 60px;
    width: auto;
}

#btnLeft {
    position: absolute;
    top: 306px;
    left: 62px;
    height: 60px;
    width: auto;
}

.sos-text-common-DucatiStyleCond-x {
    position: absolute;
    font-family: DucatiStyleCond-X;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

.SOS-Call {
    font-size: 66px;
    line-height: 1.08;
    top: 100px;
    right: 99px;
}

.in-progress {
    font-size: 56px;
    line-height: 1.25;
    top: 150px;
    right: 85px;
}

.To-abort-the-call {
    font-size: 33px;
    line-height: 1.2;
}

.sixty {
    top: 325px;
    right: 175px;
    font-size: 90px;
    line-height: 1.2;
}

.Press-enter-to-exit {
    font-size: 32.9px;
    line-height: 2.12;
}

.main-screen-bottom-menu-text-style {
    /*   font-size: 23px;
                        font-weight: bold;
                        padding: 0%;
                        margin: 0%;
                        font-family: "ducati-cond-regular";
                        font-weight: bold; */
}

.main-screen-time-text-style {
    padding: 0%;
    margin: 0%;
    font-family: "ducati-cond-tab-bold";
    font-weight: bold;
    color: #FFF;
    letter-spacing: 0.01em;
}

#number-four {
    font-family: "ducati-cond-bold";
    position: absolute;
    left: 300px;
    top: 150px;
    align-self: center;
    font-size: 128px;
    font-weight: bold;
    color: #FFF;
    font-style: italic;
}

.LAP {
    position: absolute;
    left: 380px;
    top: 235px;
    align-self: center;
    font-size: 26px;
    font-weight: bold;
    color: #FFF;
    font-family: "ducati-cond-bold";
    font-stretch: normal;
    font-style: normal;
    line-height: 0.77;
    letter-spacing: -0.52px;
    text-align: left;
}

.Gear {
    font-family: "ducati-cond-bold";
    font-stretch: normal;
    font-style: italic;
    position: absolute;
    left: 310px;
    top: 290px;
    align-self: center;
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
}

.Load-mode-helmat-list-text {
    color: #FFF;
    font-size: 22px;
    font-weight: bold;
}

.lap-data-mode-text {
    color: #FFF;
    font-size: 1.5vw;
    font-weight: bold;
}

.launch-call {
    position: absolute;
    top: 43%;
    left: 7%;
    font-size: 2vw;
    font-family: 'ducati-cond-regular';
    overflow: hidden;
    font-weight: bold;
    color: #ffffff;
    box-sizing: border-box;
}

#loadModeDisplayTitle {
    position: absolute;
    margin: 2%;
    color: #FFF;
    font-size: 20px;
}

#loadMenuNumericalDisplayTitle {
    position: absolute;
    margin: 2%;
    color: #FFF;
    font-size: 20px;
}

#loadHighLabel {
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    position: absolute;
    font-size: 0.8vw;
    top: 20%;
    right: 70%;
}

#loadLowLabel {
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    position: absolute;
    font-size: 0.8vw;
    bottom: 22%;
    right: 70%;
}

.screen-content #motorBikeNumberChangePic {
    position: absolute;
    left: 31%;
    height: 55%;
    top: 21%;
}

.displayTitle {
    font-family: "ducati-cond-regular";
    position: absolute;
    margin: 2%;
    color: #828282;
    font-size: 1.1vw;
    font-weight: 600;
}

.displayTitleDivTwoTitle {
    position: absolute;
    width: 100%;
    margin: 2%;
}

.display_twoTitle_positional {
    position: absolute;
    width: 100%;
    margin-top: 1%;
    margin-left: 2%
}

.displayTwoTitle {
    font-family: "ducati-cond-regular";
    margin: 0.3%;
    color: #828282;
    font-size: 1.5vw;
    font-weight: 600;
}

.normalTextMeterSide {
    font-family: "ducati-cond-bold";
    text-align: end;
    color: #777777;
    font-weight: bold;
    font-stretch: normal;
    font-size: 20px;
    padding: 0%;
    margin: 0%;
    margin-bottom: 0%;
}

#directRidingSelectedLabel {
    font-family: "ducati-cond-bold";
    height: 50px;
    width: 315%;
    background-color: red;
    overflow: hidden;
    font-weight: 700;
    color: white;
    font-size: 28px;
    box-sizing: border-box;
    text-align: -webkit-center;
    padding-right: 140px;
}

.directRidingSelectedLabelPosition {
    position: absolute;
    left: 60px;
    top: 14px;
}

.displaySelectedRightLabel {
    font-family: "ducati-cond-regular";
    font-size: 2vw;
    font-stretch: normal;
    color: #828282;
    position: absolute;
    right: 2%;
    top: 44%;
    align-self: center;
    font-weight: bold;
}

.infoSetting {
    font-family: "ducati-cond-regular";
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #ffffff;
    font-size: 1.3vw;
}

#infoSettingBatteryVolt {
    margin-left: 10%;
    width: 40%;
    float: right;
}

#infoSettingRpmValue {
    margin-left: 10%;
    width: 35%;
    float: right;
}

.big200Div {
    position: absolute;
    top: 23%;
    right: 3%;
    width: 20%;
    height: 33%;
}

.big200 {
    font-family: "ducati-cond-bold";
    font-size: 4vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    right: 0%;
    position: absolute;
    top: 33%
}

@supports (-moz-appearance:none) {
    .big200 {
        top: 40%
    }
}

.kmh {
    font-family: "ducati-cond-regular";
    font-size: 0.9vw;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.05;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    position: absolute;
    bottom: 0%;
    right: 1%;
    top: 92%;
}

.directRidingMode200RightSide {
    position: absolute;
    margin-right: 3%;
    right: 0%;
    color: white;
    font-size: 26px;
    font-weight: bold;
    height: 100%;
    width: 26%;
}

#directHelmatRidingModeLabel {
    font-family: 'ducati-cond-bold';
    position: absolute;
    margin: 2%;
    right: 1%;
    color: white;
    font-size: 1.6vw;
    font-weight: bold;
    top: 5%;
}

#directRiding200Position {
    top: 31%;
    font-size: 5vw;
}

@supports (-moz-appearance:none) {
    #directRiding200Position {
        top: 33%;
    }
}

#directRidingkmPosition {
    bottom: 36%;
    position: absolute;
    top: unset;
}

#directRidingNumber {
    font-family: "ducati-cond-bold";
    color: white;
    font-size: 5vw;
    font-weight: bold;
    top: 60%;
    position: absolute;
    right: 0%;
}

@supports (-moz-appearance:none) {
    #directRidingNumber {
        top: 63%;
    }
}

#directRidingGearSpan {
    font-family: "ducati-cond-regular";
    position: absolute;
    color: white;
    font-size: 0.9vw;
    top: 91%;
    right: 3%;
}

.screen-header {
    height: 10%;
    width: 50%;
    position: absolute;
    z-index: 2;
    top: 1%;
    left: 1.3%;
}

.screen-footer {
    height: 10%;
    width: 50%;
    position: absolute;
    z-index: 1;
    bottom: 0px;
}

.screen-header .top-bar-image {
    height: 90%;
    margin-left: 2%;
    margin-top: 1%;
}

.screen-header .nav-item {
    margin-left: 5%;
}

.screen-header .nav-item img {
    height: 100%;
    width: 115%;
    display: block;
}

.screen-header .navbar-nav {
    flex-direction: row;
    height: 100%;
}

.screen-footer .nav-item {
    margin-left: 10px;
}

.screen-footer .nav-item img {
    height: 100%;
    width: 100%;
    display: block;
}

.screen-footer .navbar-nav {
    flex-direction: row;
    height: 100%;
}

.screen-time-container {
    position: absolute;
    right: 0px;
    height: 10%;
    z-index: 2;
    display: block;
    width: 50%;
    top: 0%;
}

@supports (-moz-appearance:none) {
    .screen-time-container {
        top: 1%;
    }
}

.screen-content {
    /*   position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1; */
    position: absolute;
    height: 100%;
    width: 100%;
    /* left: 1%; */
    /* right: 1%; */
    z-index: 1;
    background-color: black;
}

.screen-content #mainAdaptiveCruise {
    position: absolute;
    bottom: 13%;
    right: 2%;
    height: 15%;
}

.screen-content #mainMeter {
    position: absolute;
    height: 96%;
    right: 1.6%;
    top: 2%;
}

.screen-content #mainHeatSeatIcon {
    position: absolute;
    left: 83%;
    bottom: 24%;
    height: 12%;
}

.screen-content #mainAccFollow {
    position: absolute;
    top: 38%;
    left: 22.8%;
    height: 26%;
}

.screen-time-container .main-screen-time-text-style {
    text-align: right;
    position: relative;
    /*  top: 45%; */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* font-size: 1.6em; */
    font-size: 1.6vw;
    margin-right: 1%;
}

.timeHour {
    position: absolute;
    right: 13.8%;
}

.timeBlink {
    position: absolute;
    right: 11.5%;
}

.timeMinute {
    position: absolute;
    right: 2.5%;
}

.screen-footer span {
    font-family: "ducati-cond-regular";
    position: absolute;
    /* top: -13%; */
    /* margin-right: 2%; */
    /* display: block; */
}

.mainFooterdegree {
    font-family: "ducati-cond-regular";
    font-size: 1.2vw;
}

#mainLeftFooterdegree {
    position: absolute;
    top: 9%;
    left: 26%;
}

@supports (-moz-appearance:none) {
    #mainLeftFooterdegree {
        top: 16%;
    }
}

#mainSpinLeftFooterdegree {
    position: absolute;
    top: 9%;
    left: 26%;
}

@supports (-moz-appearance:none) {
    #mainSpinLeftFooterdegree {
        top: 16%;
    }
}

#mainRightFooterdegree {
    position: absolute;
    top: 15%;
    right: 11%;
}

#mainSpinRightFooterdegree {
    position: absolute;
    top: 15%;
    right: 13%;
}

.screen-footer li {
    height: 100%;
    width: 100%;
}

.main-screen-bottom-bar-degree-text {
    font-family: "ducati-cond-tab-bold"!important;
    font-size: 1.5vw;
    margin-left: 16%;
    bottom: -11%;
}

@supports (-moz-appearance:none) {
    .main-screen-bottom-bar-degree-text {
        bottom: -20%;
    }
}

#drlImage {
    position: absolute;
    /* margin-left: 46%; */
    height: 70%;
    top: 19%;
    left: 45%;
}

@supports (-moz-appearance:none) {
    #drlImage {
        top: 16%;
    }
}

#fogImage {
    position: absolute;
    margin-left: 45%;
    height: 70%;
    top: 20%;
}

#bottom-bar-air {
    font-family: "ducati-cond-regular";
    font-size: 1.2vw;
    position: absolute;
    left: 3%;
    top: 7%;
}

@supports (-moz-appearance:none) {
    #bottom-bar-air {
        top: 16%;
    }
}

.screen-temperature-container {
    position: absolute;
    bottom: 0px;
    height: 10%;
    right: 1%;
    width: 50%;
    display: block;
    z-index: 1;
}

.screen-temperature-container span {
    position: absolute;
    right: 17%;
    -ms-transform: translateY(-50%);
    margin-right: 2%;
    /* display: block; */
    background-color: black;
}

.screen-temperature-container img {
    position: absolute;
    height: 65%;
    top: 20%;
    right: 2%;
}

.screen-footer-spin span {
    position: absolute;
    margin-right: 2%;
    /* display: block; */
}

.screen-footer-spin li {
    height: 100%;
    width: 100%;
}

.screen-footer-spin {
    height: 10%;
    width: 50%;
    position: absolute;
    bottom: 0px;
}

.screen-temperature-spin-container {
    position: absolute;
    bottom: 0px;
    height: 10%;
    right: 0px;
    width: 50%;
    display: block;
}

.screen-temperature-spin-container span {
    position: absolute;
    /* top: 50%; */
    -ms-transform: translateY(-50%);
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
    /* font-size: 1.6em; */
    margin-right: 2%;
    /* display: block; */
    background-color: black;
    right: 19%;
}

.screen-temperature-spin-container img {
    position: absolute;
    height: 65%;
    top: 20%;
    right: 4%;
}

.screen-trip-container {
    position: absolute;
    left: 2%;
    height: 20%;
    bottom: 13%;
    width: 50%;
    overflow: hidden;
    background-image: url('main/menu_box.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.screen-trip-container ul {
    position: relative;
    left: 11%;
    top: -2%;
    height: 100%;
}

@supports (-moz-appearance:none) {
    .screen-trip-container ul {
        top: 0%;
    }
}

.screen-trip-container .trip-property-item {
    height: 33%;
}

.trip-property-value {
    display: inline-block;
    width: 7%;
    font-size: 1vw;
    padding: 0%;
    margin: 0%;
    font-family: "ducati-cond-bold";
}

.trip-property-lengthCategory {
    display: inline-block;
    /*  width: 0%; */
    font-size: 1vw;
    padding: 0%;
    margin-left: 7%;
    font-weight: 700;
    font-family: "ducati-cond-regular";
}

.trip-property-key {
    display: inline-block;
    width: 40%;
    font-size: 1vw;
    padding: 0%;
    margin: 0%;
    font-weight: 700;
    font-family: "ducati-cond-regular";
}

.screen-velocity-label {
    font-family: "ducati-cond-regular";
    position: absolute;
    top: 31%;
    left: 15%;
    height: 34.3%;
    width: 7%;
}

.screen-velocity-label #mainkmNumber {
    font-family: 'ducati-cond-tab-xbold';
    position: absolute;
    font-weight: bold;
    font-size: 5vw;
    top: -7%;
}

@supports (-moz-appearance:none) {
    .screen-velocity-label #mainkmNumber {
        top: 0%;
    }
}

.screen-velocity-label #mainkm {
    font-size: 1vw;
    position: absolute;
    bottom: 2%;
    right: 4%;
}

@supports (-moz-appearance:none) {
    .screen-velocity-label #mainkm {
        bottom: 0%;
    }
}


/* ================================ Main Screen Menu Container */

.screen-menu-container {
    position: absolute;
    left: 2%;
    height: 20%;
    top: 13%;
    width: 50%;
    overflow: hidden;
}

.screen-content .motorBikeCenter {
    position: absolute;
    width: 70%;
    right: 10%;
    top: 25%;
}

.screen-content .display-back-button {
    position: absolute;
    height: 100%;
    z-index: 1;
}

.screen-content .ellipse-first-level {
    position: absolute;
    height: 100%;
    z-index: -1;
    left: 9%;
}

.screen-content .ellipse-second-level {
    position: absolute;
    height: 100%;
    z-index: -1;
    left: 44%;
    top: 0%;
}

.screen-content .imgBikeStatisticsUpper {
    position: absolute;
    height: 22%;
    z-index: -1;
    left: 34%;
    bottom: 3%;
}

.screen-content .imgBikeStatisticsBottom {
    position: absolute;
    height: 22%;
    z-index: -1;
    left: 34%;
    bottom: 3%;
}

.screen-content #adaptiveMotorBikeChange {
    bottom: 0%;
    top: unset;
}

.screen-menu-container #mainSportMenu {
    background-image: url('main/menu_box_active.png');
    background-repeat: no-repeat;
    background-size: contain;
    left: 0%;
    height: 100%;
    overflow: hidden;
}

.screen-menu-container #upperMainArrowDiv {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
}

.screen-menu-container #upperMainArrowDown {
    position: absolute;
    bottom: 20%;
    left: 33%;
    width: 50%;
}

.screen-menu-container #upperMainArrowUp {
    position: absolute;
    top: 20%;
    left: 33%;
    width: 50%;
}

.screen-content #mainScreenRidingModeColor {
    position: absolute;
    top: 0%;
    left: 31.5%;
    height: 100%;
    transform-origin: 100% 50%;
}

.screen-content #mainRiderTypeIcon {
    position: absolute;
    top: 51.6%;
    left: 36%;
    height: 3.6%;
    transform-origin: 170px 0;
}

.screen-content #mainRiderTypeSpringText {
    position: absolute;
    top: 49%;
    left: 34.5%;
    font-weight: 700;
    font-size: 1.2vw;
    transform-origin: 165px 0;
}

.screen-content #ridingModeMainChange {
    font-family: 'ducati-cond-bold';
    /*text-align: end;*/
    color: rgb(223, 0, 2);
    font-size: 1.1vw;
    padding: 0%;
    margin: 0%;
    top: 43%;
    left: 33%;
    position: absolute;
    transform-origin: 345% 90%;
    width: 45px;
    text-align: left;
}

.screen-menu-container ul {
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    position: relative;
    left: 12%;
}

#textModesBoxRightSide,
#mtsaTextModesBoxRightSide {
    position: absolute;
    right: 0%;
    bottom: 12%;
    height: 24%;
}


/* ========================================================== Common Menu Style with List Menu Screens*/

.ducati-menu .ducati-menu-item {
    /* font-family: 'ducati-cond-bold'; */
    height: 33%;
    /* font-size: 0.8vw; */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ducati-menu-selected {
    font-size: 2vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    color: white;
}

.ducati-menu-previous-1 {
    color: #afafaf !important;
    font-size: 1.5vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
}

.ducati-menu-previous-2 {
    color: #828282 !important;
    font-size: 1.3vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
}

.ducati-menu .ducati-menu-item .ducati-menu-previous-1 {
    color: #afafaf !important;
}

.ducati-menu .ducati-menu-item .ducati-menu-previous-2 {
    color: #828282 !important;
}

#mainSportMenu .ducati-menu-item {
    font-weight: normal;
    font-size: 0.8vw;
    font-family: 'ducati-cond-bold';
    color: #717171;
}

#mainSportMenu .ducati-menu-previous-2 {
    font-weight: normal;
    font-size: 0.8vw;
}

#mainSportMenu .ducati-menu-previous-1 {
    font-weight: normal;
    color: #717171 !important;
    font-size: 0.8vw;
}

#mainSportMenu .ducati-menu .ducati-menu-selected {
    font-weight: normal;
    font-family: 'ducati-cond-bold';
    color: white;
    font-size: 1vw;
}

#heatSeatMenuListUl .ducati-menu-previous-2,
#mainPhoneListUl .ducati-menu-previous-2 {
    font-weight: normal;
    font-size: 0.8vw;
    font-family: 'ducati-cond-bold';
}

#heatSeatMenuListUl .ducati-menu-previous-1,
#mainPhoneListUl .ducati-menu-previous-1 {
    font-weight: normal;
    color: #717171 !important;
    font-family: 'ducati-cond-bold';
    font-size: 0.8vw;
}

#heatSeatMenuListUl .ducati-menu-selected,
#mainPhoneListUl .ducati-menu-selected {
    font-weight: normal;
    font-family: 'ducati-cond-bold';
    color: white;
    font-size: 1vw;
}

.ducati-menu-multicontent-container {
    display: flex;
    flex-direction: column;
}

.ducati-menu-multicontent-container img {
    position: absolute;
    height: 50%;
    top: 0%;
}

#directLoadModeListHelmat li {
    height: 25% !important;
}

#directLoadModeListHelmat .ducati-menu-multicontent-container img {
    height: 64%;
}

#directLoadModeListHelmat .ducati-menu-multicontent-subtitle {
    top: 65%;
}

#loadModeHelmatUl .ducati-menu-multicontent-container img {
    position: absolute;
    height: 80%;
    top: 9%;
}

.ducati-menu-multicontent-subtitle {
    position: absolute;
    /*  bottom: 0% */
}

.ducati-menu-multicontent-title-right {
    position: absolute;
    top: 0%;
    left: 2%;
}

#directLoadModeListHelmat .ducati-menu-previous-1 .ducati-menu-multicontent-container img {
    height: 59% !important;
}

#directLoadModeListHelmat .ducati-menu-previous-2 .ducati-menu-multicontent-container img {
    height: 50% !important;
}

#directLoadModeListHelmat .ducati-menu-previous-1 .ducati-menu-multicontent-container {
    font-size: 1vw !important;
}

#directLoadModeListHelmat .ducati-menu-previous-1 .ducati-menu-multicontent-subtitle {
    top: 55% !important;
}

#directLoadModeListHelmat .ducati-menu-previous-2 .ducati-menu-multicontent-subtitle {
    top: 55% !important;
}

.ducati-menu-previous-2 .ducati-menu-multicontent-container {
    font-size: 0.9vw !important;
}


/* ========================= Other Screen Menu Container */

.other-screen-menu-container {
    position: absolute;
    left: 2%;
    height: 36%;
    width: 50%;
    top: 35%;
    overflow: hidden;
}

.other-screen-menu-container ul {
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    position: relative;
    left: 12%;
}


/* ===================================== Setting Screen Display */

.setting-screen-list-menu {
    position: absolute;
    height: 80%;
    width: 100%;
    left: 2%;
    top: 10%;
}

.setting-screen-list-menu .setting-screen-sub-menu {
    position: absolute;
    left: 40%;
    top: 15%;
    height: 74%;
    width: 34%;
}

.setting-screen-sub-sub-menu {
    position: absolute;
    top: 14%;
    height: 74%;
    left: 75%;
}

.first-level-ducati-menu {
    position: absolute;
    top: 14%;
    height: 74%;
    width: 100%;
    left: 2%;
    color: #FFF;
    font-size: 1.6vw;
    font-weight: 700;
    align-self: center;
}

.first-level-title {
    position: absolute;
    top: 43%;
    left: 7%;
    color: #FFF;
    font-size: 2.0vw;
    font-family: 'ducati-cond-regular';
    font-weight: 700;
    align-self: center;
    margin-left: 1%;
}

#loadModeNumericMenuListUl {
    top: 14%;
    height: 74%;
    left: 1%;
}

#suspensionFrontMenuListUl {
    top: 17%;
    height: 70%;
    left: 1%;
}

#absArrow {
    top: 33%;
    height: 16%;
    right: 31%;
    position: absolute;
}

#absCornering {
    font-family: 'ducati-cond-regular';
    font-size: 0.8vw;
    top: 28%;
    height: 15%;
    right: 32%;
    position: absolute;
    color: #df0002 !important;
}

#imgDqsOnOff {
    position: absolute;
    height: 12%;
    z-index: -1;
    left: 43%;
    bottom: 10%;
}

#fcwListul {
    top: 14%;
    height: 74%;
    left: 1%;
}

#loadModeHelmatUl .ducati-menu-previous-1 {
    opacity: 0.8;
}

#loadModeHelmatUl .ducati-menu-previous-2 {
    opacity: 0.6;
}

.loadModeIcon {
    position: absolute;
    height: 18%;
    right: 35%;
    top: 17%;
}

#directRidingSubMenuUl .ducati-menu-item {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    color: white !important;
    font-weight: bold;
}

#directRidingSubMenuUl .ducati-menu-selected {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    color: white !important;
}

#directRidingSubMenuUl .ducati-menu-previous-1 {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    color: white !important;
}

#directRidingSubMenuUl .ducati-menu-previous-2 {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    color: white !important;
}


/* =============================================================  Bar  */

.displayBar {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    width: 45%;
    height: 6%;
    left: 32%;
    bottom: 21%;
    border: 2px solid white;
}

.AbsBar {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    width: 30%;
    height: 6%;
    left: 40%;
    bottom: 21%;
    border: 2px solid white;
    border-radius: 4px;
}

.dtcDisplayBoxTextStyle {
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0%;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    font-size: 0.65vw;
    font-stretch: normal;
    font-style: normal;
    color: black;
}

@supports (-moz-appearance:none) {
    .dtcDisplayBoxTextStyle {
        top: 7%;
    }
}

#dtcLeftLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.75vw;
    bottom: 5.2%;
    left: 32%;
}

#dtcRightLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.75vw;
    bottom: 5.2%;
    right: 22.8%;
}

#dtcFirstBoxLabel {
    text-align: center;
    width: 33%;
    background-color: #4d4d4d;
    position: absolute;
    height: 100%;
    align-self: center;
}

#dtcSecondBoxLabel {
    position: absolute;
    left: 33.60%;
    height: 100%;
    text-align: center;
    width: 32.80%;
    background-color: #4d4d4d;
}

#dtcThirdBoxLabel {
    position: absolute;
    right: 0;
    height: 100%;
    text-align: center;
    width: 33%;
    background-color: #4d4d4d;
}

#mainScreenLap {
    position: absolute;
    font-family: 'ducati-cond-bold';
    font-size: 1.0vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    top: 46%;
    right: 19%;
}

.screen-content #imgDtcStatUpper {
    position: absolute;
    top: 73.4%;
    width: 44%;
    height: 5%;
    left: 32%;
}

.screen-content #imgDtcStatBottom {
    position: absolute;
    bottom: 12%;
    width: 45%;
    height: 5%;
    left: 32%;
}


/* ========================================================== DWC  */

.screen-content #imgDwcStatChange {
    position: absolute;
    top: 74.4%;
    width: 32%;
    height: 5%;
    left: 39%;
}

#dwcLeftLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.65vw;
    bottom: 15%;
    left: 39%;
}

#dwcRightLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.65vw;
    bottom: 15%;
    right: 29%;
}


/* ======================================================================   Suspension */

#suspensionLeftLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.70vw;
    bottom: 14.2%;
    left: 39%;
}

#suspensionRightLabel {
    font-family: 'ducati-cond-regular';
    position: absolute;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 0.70vw;
    bottom: 14.2%;
    right: 29%;
}

#imgSuspensionFrontStat {
    position: absolute;
    top: 74.4%;
    width: 32%;
    height: 5%;
    left: 39%;
}


/* ========================================================== Engine Display */

#engineBottomBar {
    bottom: 12%;
}

#absBottomBar {
    bottom: 12%;
}

.engineFirstBoxLabel {
    position: absolute;
    height: 100%;
    left: 0%;
    background-color: #4d4d4d;
    text-align: center;
    width: 49.65%;
}

.engineSecondBoxLabel {
    float: right;
    height: 100%;
    position: absolute;
    right: 0%;
    text-align: center;
    width: 49.65%;
    background-color: #4d4d4d;
}


/* ==================================================================Load Mode Helmat */

#directLoadModeListHelmat .ducati-menu-selected {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
}

#directLoadModeListHelmat .ducati-menu-previous-1 {
    font-size: 1.2vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    opacity: 0.8;
}

#directLoadModeListHelmat .ducati-menu-previous-2 {
    font-size: 1.0vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    opacity: 0.6;
}

#directRidingMenuUl li {
    text-transform: uppercase;
    font-family: 'ducati-cond-bold';
}

.riding-mode-selection {
    height: 19%;
    top: 40%;
    position: absolute;
    left: 2.3%;
    width: 29.7%;
}

#infoDisplayList #arrowdiv {
    top: 44%;
    height: 74%;
    left: 43.5%;
    width: 25%;
}

@supports (-moz-appearance:none) {
    #infoDisplayList #arrowdiv {
        top: 42%;
    }
}

#infoDisplayList #arrowdiv #arrowDown {
    position: absolute;
    top: 20%;
    width: 10%;
}

#infoDisplayList #arrowdiv #arrowUp {
    position: absolute;
    top: 0%;
    width: 10%;
}

.screen-content #infoDetail {
    position: absolute;
    width: 50%;
    height: auto;
    top: 43%;
    left: 46%;
    overflow: hidden;
}

.screen-content #displayOrderList {
    align-self: center;
    height: 100%;
    position: absolute;
    right: 0%;
    width: 34%;
    text-align: center;
}

.list-group-item .displayOrderRightSideNumber {
    height: 8%;
}

#infoNumberList .list-group-item {
    height: 7%;
}

#orderListRightMenu .list-group-item {
    height: 7%;
}

#arrowdiv {
    position: absolute;
    top: 44%;
    right: 33%;
}

.display-order-list-title {
    color: #fff;
    font-size: 1.2vw;
    margin-top: 11%;
    margin-bottom: 3%;
}

.display-order-list-ul-container {
    position: absolute;
    width: 100%;
    left: 30%;
}

.item-order-index {
    font-size: 0.75vw;
}

.item-order-divider {
    font-size: 1.2vw;
}

#infoNumberList .list-group-item {
    align-self: flex-end;
}

#orderListRightMenu .list-group-item {
    align-self: flex-start;
    color: #fff;
    font-size: 1vw;
    top: 1%;
}

#SettingServiceMenu {
    position: absolute;
    left: 9%;
    top: 0%;
    width: 80%;
    height: 84%;
}

#settingServiceList {
    position: absolute;
    left: 45%;
    top: 22%;
    width: 80%;
    height: 79%;
    list-style: none;
}

#settingServiceList img {
    width: 9%;
}

#settings-service-1 {
    position: absolute;
    top: 0%;
    left: 2%;
    width: 100%;
}

#settings-service-2 {
    position: absolute;
    top: 40%;
    left: 2%;
    width: 100%;
}

#settings-service-3 {
    position: absolute;
    top: 78%;
    left: 2%;
    width: 100%;
}

.settings-service-title {
    color: #828282;
    font-size: 1.2vw;
    position: absolute;
    left: 11%;
    top: -42%;
}

.settings-service-info {
    color: #828282;
    font-size: 1.2vw;
    position: absolute;
    left: 11%;
    top: 34%;
}

@supports (-moz-appearance:none) {
    .settings-service-info {
        top: 41%;
    }
}

.screen-content #unitConsumptionSubMenuList {
    position: absolute;
    height: 80%;
    width: 100%;
    left: 2%;
    top: 10%;
}

.screen-content #unitTempratureSubMenuList {
    position: absolute;
    height: 80%;
    width: 100%;
    left: 2%;
    top: 10%;
}

.screen-content #unitSpeedSubMenuList {
    position: absolute;
    height: 80%;
    width: 100%;
    left: 2%;
    top: 10%;
}


/* =============================================================================   Bluetooth Pairing */

.bluetoothDisplayText {
    font-size: 2vw;
}

.screen-content .display-ecclipse {
    position: absolute;
    height: 100%;
    z-index: -1;
    /* it is changed 0 to -1 */
}

.screen-content .display-ecclipse2 {
    position: absolute;
    height: 100%;
    left: 35%;
    z-index: 0;
}


/* ========================================================= smartphone */

#bluetoothPairedListUl {
    position: absolute;
    left: 40%;
    top: 18%;
    height: 74%;
}

.screen-content #bluetoothSmartphoneMenuList {
    top: 8%;
}


/* ========================================================= Direct Riding Ul */

.screen-content #directRidingMenuUl {
    position: absolute;
    top: 12%;
    height: 74%;
    left: 2%;
    color: #FFF;
    font-size: 2.0vw;
    font-weight: 700;
    align-self: center;
}

@supports (-moz-appearance:none) {
    .screen-content #directRidingMenuUl {
        top: 14%;
    }
}


/* ================================================================== blueTooth Paired Devices List  */

#nodeviceLabel {
    font-size: 2.0vw;
    left: 44%;
    overflow: hidden;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    top: 44%;
}

#deletePairedLabel {
    color: #ffffff;
    font-size: 2.0vw;
    top: 44%;
}

#bluetoothPairingLabel {
    color: #ffffff;
    font-size: 2.0vw;
}

#smartphoneNodeviceLabel {
    left: 40%;
    overflow: hidden;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
}


/* =====================================================  SOS Call Display */

.sos-display {
    position: absolute;
    top: 2.4%;
    right: 0px;
    width: 54%;
    height: 90%;
    text-align: right;
    z-index: 1;
}

.sos-display #sosCallAborted {
    font-size: 2.5vw;
    align-self: center;
    top: 40%;
    right: 3%;
    width: 83%;
    line-height: 1.08;
}

.sos-display #sosCallInProgress {
    font-size: 2.5vw;
    align-self: center;
    top: 40%;
    right: 3%;
    width: 83%;
    line-height: 1.08;
}

.sos-progress-start {
    position: absolute;
    height: 100%;
    width: 100%;
}

.sos-text-common-DucatiStyleCond-x {
    position: absolute;
    font-family: 'ducati-cond-bold';
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

.sos-progress-start #SOS-Call {
    font-size: 2.0vw;
    line-height: 1.08;
    top: 16%;
    left: 10%;
    /* right: 20%; */
    width: 100%;
    text-align: center;
}

.sos-progress-start #in-progress {
    width: 100%;
    font-size: 2vw;
    line-height: 1.25;
    top: 29%;
    right: 16%;
    left: 10%;
    text-align: center;
}

.sos-progress-start #To-abort-the-call {
    width: 100%;
    left: 10%;
    text-align: center;
    top: 53%;
    /* right: 20%; */
    font-size: 1.2vw;
    line-height: 1.2;
}

.sos-progress-start #press-enter-within {
    width: 100%;
    left: 10%;
    text-align: center;
    top: 60%;
    /* right: 17%; */
    font-size: 1.2vw;
    line-height: 1.2;
}

.sos-progress-start #sixtySeconds {
    width: 100%;
    left: 10%;
    top: 75%;
    text-align: center;
    /* right: 27%; */
    font-size: 3.5vw;
    line-height: 1.2;
}

.sosEnter {
    position: absolute;
    font-size: 2.0vw;
    line-height: 1.08;
}

#sosEnterExit {
    width: 100%;
    height: 100%;
}

.sosEnter #enterSOSCall {
    font-size: 2.5vw;
    line-height: 1.08;
    top: 30%;
    text-align: center;
    width: 100%;
    text-align: center;
}

.sosEnter #entersossucceeded {
    /* right: 20%; */
    /* right: 20%; */
    width: 100%;
    font-size: 2.5vw;
    line-height: 1.25;
    top: 48%;
    text-align: center;
    width: 100%;
    text-align: center;
}

.sosEnter #Press-enter-to-exit {
    align-self: center;
    font-size: 1.25vw;
    line-height: 1.2;
    top: 65%;
    text-align: center;
    width: 100%;
    line-height: 2.12;
}

#sos_Suceeded {
    font-size: 2.5vw;
    align-self: center;
    top: 33%;
    right: 3%;
    width: 83%;
    line-height: 1.08;
    right: 3%;
}


/* ==================================================== blind Spot Dimmer */

.screen-content #blindDimmerMotorBikeChange {
    /* float: left; */
    right: 0%;
    /* bottom: -18%; */
    /* top: 40%; */
    bottom: 0%;
    top: unset;
}

.screen-content #blindOnOffMotorBikeChange {
    /* float: left; */
    right: 0%;
    /* bottom: -18%; */
    /* top: 40%; */
    bottom: 0%;
    top: unset;
}

.screen-content #fcwMotorBikeChange {
    /* float: left; */
    /* bottom: -18%; */
    /* top: 40%; */
    bottom: 0%;
    top: unset;
}


/* ======================================================== Player Display  */

#mainScreenPlayer {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 21%;
    top: 13%;
    z-index: -1;
}

#playerPreviousSong {
    position: absolute;
    left: 21%;
    top: 70%;
    height: 17%;
}

#playerPlayPause {
    position: absolute;
    left: 32%;
    top: 70%;
    height: 17%;
}

#playerStop {
    position: absolute;
    left: 42%;
    top: 70%;
    height: 17%;
}

#playerNextSong {
    position: absolute;
    left: 53%;
    top: 70%;
    height: 17%;
}

#playerVolumeUp {
    position: absolute;
    left: 10%;
    top: 23%;
    height: 10%;
}

#playerVolumeIcon {
    position: absolute;
    left: 10%;
    top: 41%;
    height: 18%;
}

#playerVolumeDown {
    position: absolute;
    left: 10%;
    top: 69%;
    height: 10%;
}

#songName {
    font-family: 'ducati-cond-regular';
    position: absolute;
    top: 28%;
    height: 74%;
    left: 21%;
    color: #FFF;
    font-size: 1.2vw;
    align-self: center;
    margin-left: 3%;
}


/* ================================================= Main Heat Seat */

#mainHeatSeatList {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 21%;
    top: 13%;
    z-index: -1;
}


/* ================================================= Main Abs Display */

#mainAbsDisplay {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 21%;
    top: 13%;
    z-index: -1;
}

#absFirstItem {
    display: block;
    position: absolute;
    top: 38%;
    left: 10%;
    font-weight: normal;
    font-family: 'ducati-cond-bold';
    color: white;
    font-size: 1vw;
}

#absOnOff {
    display: block;
    position: absolute;
    top: 70%;
    left: 10%;
    font-size: 0.6vw;
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    color: white;
}


/* ============================================== Main Phone List */

#mainPhoneList {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 21%;
    top: 13%;
    z-index: -1;
}


/* =============================================== Trip Master */

.main-trip-master {
    position: absolute;
    width: 50%;
    background-image: url('main/player_back.png');
    background-repeat: no-repeat;
    height: 23%;
    top: 12%;
    background-size: cover;
    z-index: -1;
}

.main-trip-master #tripMasterStatus {
    position: absolute;
    left: 10%;
    top: 15%;
    height: 45%;
    background-size: cover;
}

.main-trip-master #tripMasterZero {
    font-family: 'ducati-cond-bold';
    position: absolute;
    top: 8%;
    height: 74%;
    right: 45%;
    color: #a1a1a1;
    font-size: 2.5vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: right;
}

.main-trip-master #tripMasterKm {
    font-family: 'ducati-ext-bold';
    top: 40%;
    color: #a1a1a1;
    font-weight: bold;
    left: 57%;
    font-size: 0.8vw;
    position: absolute;
}

.main-trip-master #mainScreenTripOnOff {
    font-family: 'ducati-cond-regular';
    font-weight: bold;
    left: 11.5%;
    top: 65%;
    font-size: 0.8vw;
    position: absolute;
}

.main-trip-master #TripMasterPlayPause {
    position: absolute;
    left: 25%;
    top: 70%;
    height: 15%;
}

.main-trip-master #TripMasterReset {
    position: absolute;
    left: 35%;
    top: 70%;
    height: 15%;
}

.main-trip-master #tripMasterIncrease {
    position: absolute;
    left: 45%;
    top: 70%;
    height: 15%;
}


/* ============================================= Main Screen Lap Display */

#mainScreenLapDisplay {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    left: 2%;
    top: 13%;
    height: 21%;
    width: 50%;
    position: absolute;
    overflow: hidden;
    z-index: -1;
}

#mainScreenLapChronometer {
    font-family: 'ducati-cond-tab-xbold';
    position: absolute;
    top: 2%;
    height: 74%;
    left: 10%;
    color: #ffffff;
    font-size: 1.8vw;
    font-weight: bold;
    text-align: left;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
}

@supports (-moz-appearance:none) {
    #mainScreenLapChronometer {
        top: 5%;
    }
}

#mainScreenLapCount {
    font-size: 0.8vw;
    position: absolute;
    left: 10%;
    top: 47%;
    color: white;
    font-weight: bold;
}

#mainScreenLapOnOff {
    font-size: 0.8vw;
    position: absolute;
    left: 10%;
    top: 70%;
    color: white;
    font-weight: bold;
}

@supports (-moz-appearance:none) {
    #mainScreenLapOnOff {
        top: 71%;
    }
}


/* Reset Info */

#resetMainScreenDisplay {
    background-image: url(main/player_back.png);
    background-repeat: no-repeat;
    background-size: contain;
    left: 2%;
    /* top: 68%; */
    bottom: 12%;
    height: 21%;
    width: 50%;
    position: absolute;
    overflow: hidden;
    z-index: -1;
}

.resetMsg span {
    /*  position: absolute; */
    top: 13%;
    color: white;
    font-weight: bold;
    left: 10%;
    font-size: 1.0vw;
}

#resetYes {
    position: absolute;
    top: 54%;
    color: white;
    font-weight: bold;
    left: 10%;
    font-size: 0.8vw;
}

#resetNo {
    position: absolute;
    top: 54%;
    color: white;
    font-weight: bold;
    left: 24%;
    font-size: 0.8vw;
}


/* Blind spot off */

#lapDataNoLap {
    color: #FFF;
    font-size: 2.2vw;
    font-weight: 700;
    align-self: center;
    /* margin-left: 2%; */
    right: 3%;
    position: absolute;
}

#lapData {
    position: absolute;
    align-self: center;
    left: 47%;
    top: 31%;
}


/* Bluetooth Pair Device  */

.BluetoothPairDeviceText {
    font-family: 'ducati-cond-regular';
    /*  position: absolute; */
    font-size: 1.8vw;
    font-weight: bold;
}

#pairWithDiv {
    position: absolute;
    top: 16%;
    width: 100%;
    text-align: center;
}

#pairCodeLabel {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 30%;
}

#pairCodeNumber {
    width: 100%;
    text-align: center;
    position: absolute;
    font-size: 1.8vw;
    font-weight: bold;
    top: 48%;
}

#pairDeviceArrowUp {
    position: absolute;
    height: 2%;
    top: 68%;
    left: 49%;
}

#pairAccept {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 70%;
}

#pairDecline {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 70%;
}

#pairDeviceArrowDown {
    position: absolute;
    height: 2%;
    top: 85%;
    left: 49%;
}

#changeKm {
    position: absolute;
    left: 48%;
}

#changeText {
    position: absolute;
    left: 43%;
}

#PropertyName {
    position: absolute;
}

.screen-trip-container #bottomMainArrowDown {
    position: absolute;
    bottom: 20%;
    left: 4%;
    width: 5%;
}

.screen-trip-container #bottomMainArrowUp {
    position: absolute;
    top: 20%;
    left: 4%;
    width: 5%;
}

#directRidingSubMenuUl {
    position: absolute;
    height: 86%;
    left: 32%;
    top: 7%;
}

#directRidingMode220 {
    font-size: 5vw;
    right: 2%;
    top: 36%;
}

@supports (-moz-appearance:none) {
    #directRidingMode220 {
        top: 40%;
    }
}

#directRidingModeKmh {
    right: 2.5%;
    top: 61%;
    position: absolute;
}

#bsdDivMain {
    font-family: 'ducati-cond-bold';
    position: absolute;
    top: 54%;
    right: 0%;
    font-size: 0.9vw;
    color: #777777;
    width: 11.5%;
}

#bsdRightSideMain {
    margin-right: 13%;
}

#directRidingSubMenuUl li:nth-child(1) {
    transform: rotate(0deg) translate(0, -60%) rotate(-0deg) translate(-19%, 0) !important;
}

#directRidingSubMenuUl li:nth-child(2) {
    transform: rotate(25.714285714285715deg) translate(0, -60%) rotate(-25.714285714285715deg) translate(-7%, 0) !important;
}

#directRidingSubMenuUl li:nth-child(8) {
    transform: rotate(180deg) translate(0, -60%) rotate(-180deg) translate(-17%, 0) !important;
}

#directRidingSubMenuUl li:nth-child(7) {
    transform: rotate(154.28571428571428deg) translate(0, -60%) rotate(-154.28571428571428deg) translate(-7%, 0) !important;
}

#absOnly {
    position: absolute;
    font-family: "ducati-cond-regular";
    font-size: 0.8vw;
    top: 32%;
    left: 35%;
    color: #df0002;
    /* font-weight: bold; */
    font-stretch: normal;
    font-style: normal;
    line-height: 0.81;
    letter-spacing: normal;
    text-align: left;
}

#absFront {
    position: absolute;
    font-family: "ducati-cond-regular";
    /* font-weight: bold; */
    font-stretch: normal;
    font-style: normal;
    line-height: 0.81;
    letter-spacing: normal;
    text-align: left;
    font-size: 0.8vw;
    top: 28%;
    left: 35%;
    color: #df0002;
}

#absExclamation {
    height: 8%;
    position: absolute;
    top: 27%;
    left: 33.6%;
}

.card-image {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 300px;
    height: 300px;
}


/* ===========================================================  Main Spin Start */

.spin-header {
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin-header img {
    height: 8.5%;
}

.spin-header .headerMainMobile {
    position: absolute;
    top: 1.8%;
    left: 64%;
}

.spin-header .headerMainBattery {
    position: absolute;
    top: 1.8%;
    left: 68.3%;
}

.spin-header .headerMainNetwork {
    position: absolute;
    left: 72.2%;
    top: 1.8%;
}

.spin-header .headerMainHelmat {
    position: absolute;
    left: 77%;
    top: 2%;
}

.spin-header .headerMainSos {
    position: absolute;
    left: 63.4%;
    top: 13%;
}

#spinTopBar {
    position: absolute;
    /* margin-left: 0.8%; */
    /* margin-top: 0.5%; */
    height: 6.8%;
    /* top: 1%; */
    top: 2.9%;
    left: 1.3%;
}

#mainSpinNetwork {
    position: absolute;
    top: 1%;
    right: 17%;
    height: 20%;
}

#mainSpinAccFollow {
    position: absolute;
    height: 20%;
    left: 41.5%;
    top: 2.5%;
}

#mainSpinAdaptiveCruise {
    position: absolute;
    height: 12%;
    left: 48%;
    top: 9%;
}

#mainN {
    position: absolute;
    font-family: 'ducati-cond-tab-xbold';
    font-weight: bold;
    font-size: 3.8vw;
    top: -6%;
    padding: 0%;
    right: 38%;
    color: #8fd821;
}

@supports (-moz-appearance:none) {
    #mainN {
        top: -3%;
    }
}

#mainN.on-main-screen {
    font-style: italic;
    font-size: 4.8vw;
}

#mainN.going-to-main-screen {
    font-style: italic;
}

#mainSpinGear {
    position: absolute;
    color: #FFF;
    /* margin-left: 10%; */
    top: 17%;
    height: 5%;
    right: 39.5%;
    font-size: 0.7vw;
}

#mainSpinGear.on-main-screen {
    font-size: 0.9vw;
    font-style: italic;
}

#mainSpinkmNumber {
    position: absolute;
    font-family: 'ducati-cond-tab-xbold';
    font-weight: bold;
    font-size: 3.6vw;
    top: -5%;
    padding: 0%;
    right: 60.5%;
}

@supports (-moz-appearance:none) {
    #mainSpinkmNumber {
        top: -3%;
    }
}

#mainSpinkmNumber.on-main-screen {
    font-size: 5vw;
}

#mainSpinkm {
    position: absolute;
    color: #FFF;
    /* margin-left: 10%; */
    top: 17.5%;
    height: 5%;
    right: 60.5%;
    font-size: 0.7vw;
}

#mainSpinkm.on-main-screen {
    font-size: 1vw;
}

#mainRpmNumber {
    position: absolute;
    font-family: 'ducati-cond-tab-xbold';
    font-weight: bold;
    font-size: 2.4vw;
    top: 8%;
    padding: 0%;
    right: 6%;
}

@supports (-moz-appearance:none) {
    #mainRpmNumber {
        top: 9%;
    }
}

#mainRpm {
    font-family: "ducati-cond-regular";
    position: absolute;
    color: #FFF;
    /* margin-left: 10%; */
    top: 15.5%;
    right: 1.5%;
    font-size: 1vw;
}

@supports (-moz-appearance:none) {
    #mainRpm {
        top: 15.8%;
    }
}

.ridingModeBar {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    width: 25%;
    height: 9%;
    left: 1.5%;
    top: 13%;
    border: 1px solid;
    border-color: rgb(223, 0, 2);
    /* border: double white; */
    border-radius: 8px;
}

#ridingModeName {
    font-family: 'ducati-cond-bold';
    text-align: end;
    color: rgb(223, 0, 2);
    font-size: 1.1vw;
    padding: 0%;
    margin: 0%;
    top: 15%;
    left: 7.5%;
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
}

#spinLoadModeAutoText {
    left: 72%;
    position: absolute;
    top: 7%;
    font-weight: 700;
    font-size: 1.0vw;
}

#drlSpinImage {
    position: absolute;
    height: 70%;
    top: 19%;
    left: 45%;
}

@supports (-moz-appearance:none) {
    #drlSpinImage {
        top: 16%;
    }
}

#fogImage {
    position: absolute;
    margin-left: 45%;
    height: 50%;
    top: 20%;
}

#bottom-spin-bar-air {
    font-family: "ducati-cond-regular";
    font-size: 1.2vw;
    position: absolute;
    left: 3%;
    top: 7%;
}

@supports (-moz-appearance:none) {
    #bottom-spin-bar-air {
        top: 16%;
    }
}

.spin-center-container {
    width: 100%;
    height: 64%;
    position: absolute;
    top: 24%;
}

.spin-center-container #musicMenuList {
    width: 100%;
    height: 100%;
}

.spinCenterBox {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    width: 93.5%;
    height: 58%;
    left: 3.5%;
    top: 23%;
    /* border: 0.01px solid; */
    /* border-color: #ffffff;
    border: double white;
    border-radius: 5px; */
    padding: 4%;
}

.spinCenterBox.on-main-screen {
    background-color: #000;
    width: 100%;
    left: 0;
    padding-left: 7.5%;
    padding-right: 7%;
    box-shadow: 0 -10px 20px black;
}

.spinCenterBox .menu {
    width: 25%;
    height: 100%;
    padding: 0%;
    align-self: center;
    border: 0.01px solid;
    border-color: #ffffff;
}

#musicIcon {
    left: 42%;
}

#contactIcon {
    height: 25%;
    left: 36%;
}

#phoneIcon {
    height: 25%;
    left: 36%;
}

#gpsIcon {
    height: 37%;
    left: 29%;
    bottom: 39%;
}

.menuIcon {
    position: absolute;
    bottom: 45%;
    left: 32%;
    height: 32%;
}

.menuSpinText {
    font-family: "ducati-cond-regular";
    font-size: 0.8vw;
    /* font-weight: bold; */
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    position: absolute;
    bottom: 23%;
    /* left: 38%; */
    width: 100%;
    text-align: center;
}

#spinLoadModeIcon {
    position: absolute;
    top: 26%;
    left: 62%;
    height: 45.6%;
}

#spinBsdDivMain {
    font-family: 'ducati-cond-bold';
    position: absolute;
    /* top: 71%; */
    right: 20%;
    font-size: 0.9vw;
    color: #777777;
    width: 12.5%;
    bottom: 0%;
}

#spinBsdRightSideMain {
    margin-right: 13%;
}


/* ======================================================  Spin Music List */

.spin-center-container #backArrow {
    position: absolute;
    top: 2%;
    left: 4%;
    height: 10%;
}

.spin-center-container #listCategoryIcon {
    position: absolute;
    top: 0%;
    left: 11%;
    height: 14%;
}

.spin-center-container #listCategoryTitle {
    font-family: "ducati-cond-regular";
    position: absolute;
    top: 1%;
    /* left: 44%; */
    height: 14%;
    font-size: 1.4vw;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    width: 100%;
    text-align: center;
}

.spin-center-container #musicTypeList {
    position: absolute;
    top: 17%;
    width: 100%;
    height: 85%;
}

.spin-center-container #musicTypeNextList {
    position: absolute;
    top: 21%;
    width: 100%;
    height: 85%;
}

.spin-center-container #artistMusicTypeNextList {
    position: absolute;
    top: 21%;
    width: 100%;
    height: 85%;
}

.spin-center-container #allContacts {
    position: absolute;
    top: 21%;
    width: 100%;
    height: 85%;
}

.spin-center-container #contactDetail {
    position: absolute;
    top: 21%;
    width: 100%;
    height: 85%;
}

.spin-center-container #recentCallDisplay {
    position: absolute;
    top: 21%;
    width: 100%;
    height: 85%;
}

.DucatiMusicItem .contactDetailHome {
    font-family: "ducati-cond-regular";
    color: #8e8e8d;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.2vw;
    top: 17%;
    right: 78%;
    position: absolute;
}

.DucatiMusicItem .contactDetailIcon {
    top: 17%;
    left: 25%;
    height: 63%;
    position: absolute;
}

.DucatiMusicItem .ContactInfo {
    font-family: "ducati-cond-regular";
    color: #ffffff;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.2vw;
    top: 17%;
    left: 32%;
    position: absolute;
}

.mainSpinMenuList {
    overflow: hidden;
    list-style-type: none;
    width: 98%;
    position: absolute;
    left: 1%;
    height: 100%;
}

.mainSpinMenuList li {
    height: 25%;
    border: 2px solid transparent;
}

ul#musicMenuUl li {
    height: 20%;
    border: 2px solid transparent;
}

.DucatiMusicItem {
    font-family: "ducati-cond-regular";
    font-size: 1.2vw;
    position: relative;
    padding: 5px;
}

.DucatiMusicItem.firstSelected {
    background-color: #303030;
    text-decoration: none;
}

.DucatiMusicItem.active {
    /* font-size: 1.5vw; */
    text-decoration: none;
    border: 2px solid;
    border-color: #2680eb !important;
}

.DucatiMusicItem .imgIcon {
    position: absolute;
    left: 1%;
    height: 80%;
}

.DucatiMusicItem .playlistIcon {
    position: absolute;
    left: 1%;
    height: 80%;
}

.DucatiMusicItem .itemSingleNumber {
    font-family: "ducati-cond-regular";
    font-size: 1.2vw;
    font-weight: 700;
    font-stretch: normal;
    color: #8e8e8d;
}

.DucatiMusicItem .itemSingleTitle {
    font-family: "ducati-cond-regular";
    color: #8e8e8d;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.2vw;
    top: 11%;
    left: 9%;
    position: absolute;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemSingleTitle {
        top: 17%;
    }
}

.DucatiMusicItem .itemSingleTitlewhite {
    font-family: "ducati-cond-regular";
    color: #ffffff;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.2vw;
    top: 7%;
    left: 9%;
    position: absolute;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemSingleTitlewhite {
        top: 17%;
    }
}

.DucatiMusicItem .itemTitle {
    font-family: "ducati-cond-regular";
    font-weight: 700;
    font-stretch: normal;
    color: #8e8e8d;
    font-size: 1.2vw;
    position: absolute;
    top: -7%;
    left: 9%;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemTitle {
        top: 2%;
    }
}

.DucatiMusicItem .itemSubTitle {
    font-family: "ducati-cond-regular";
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.0vw;
    position: absolute;
    color: #717171;
    top: 46%;
    left: 9%;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemSubTitle {
        top: 52%;
    }
}

.DucatiMusicItem .itemSeperator {
    font-family: "ducati-cond-regular";
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.0vw;
    position: absolute;
    color: #717171;
    left: 25%;
    top: 52%;
}

.DucatiMusicItem .headingSongCount {
    font-family: "ducati-cond-regular";
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.0vw;
    position: absolute;
    color: #717171;
    left: 27%;
    top: 52%;
}

.DucatiMusicItem .itemDurationTitle {
    font-family: "ducati-cond-regular";
    color: #717171;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.0vw;
    position: absolute;
    right: 1%;
    top: 19%;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemDurationTitle {
        top: 22%;
    }
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .itemDurationTitle {
        top: 25%;
    }
}

.DucatiMusicItem .shufleimgIcon {
    float: right;
    width: 6%;
    margin-top: 1.0%;
}

.DucatiMusicItem .recentCallIcon {
    position: absolute;
    left: 3%;
    height: 25%;
    top: 40%;
}

.DucatiMusicItem .recentCallPhoneIcon {
    position: absolute;
    left: 10%;
    height: 50%;
    top: 21%;
}

.DucatiMusicItem .recentCallPhoneTitle {
    font-family: "ducati-cond-regular";
    color: #8e8e8d;
    font-weight: 700;
    font-stretch: normal;
    font-size: 1.2vw;
    top: -10%;
    left: 15%;
    position: absolute;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .recentCallPhoneTitle {
        top: -3%;
    }
}

.DucatiMusicItem .recentCallPhoneSubTitle {
    font-family: "ducati-cond-regular";
    color: #303030;
    font-stretch: normal;
    font-size: 1.0vw;
    top: 43%;
    left: 15%;
    position: absolute;
}

@supports (-moz-appearance:none) {
    .DucatiMusicItem .recentCallPhoneSubTitle {
        top: 48%;
    }
}


/* =========================================================== Spin Music Player */

.spin-center-container #btnPreviousSong {
    position: absolute;
    right: 61%;
    top: 7%;
    height: 30%;
}

.spin-center-container #btnNextSong {
    position: absolute;
    right: 33%;
    top: 7%;
    height: 30%;
}

.spin-center-container #btnPlayPause {
    position: absolute;
    right: 47%;
    top: 7%;
    height: 30%;
}

.spin-center-container #nowPlayingsongName {
    position: absolute;
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    bottom: 33%;
    width: 100%;
    text-align: center;
    font-size: 1.4vw;
    color: #2680eb;
}

.spin-center-container #songAuthorName {
    position: absolute;
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    font-size: 1.4vw;
    /* top: 70%; */
    width: 100%;
    text-align: center;
    bottom: 15%;
}

#spinMusicPlayer {
    height: 78%;
}

#diskBackground {
    position: absolute;
    top: -30%;
    /* right: 0%; */
    height: 125%;
    width: 100%;
}

.progressBarBack {
    width: 100%;
    background: black;
    position: absolute;
    bottom: 8%;
    height: 5%;
}

.progressBarBack #progressBarPercentage {
    width: 0%;
    height: 100%;
    background: #2680EB;
}

#startingTime {
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    font-size: 1.0vw;
    position: absolute;
    bottom: 12%;
    left: 2%;
}

#durationTime {
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    font-size: 1.0vw;
    position: absolute;
    bottom: 12%;
    right: 2%;
}


/* ============================================================================ Phone Dial Key pad */

#phoneDialKeypad {
    width: 100%;
    /* height: 40%; */
    position: absolute;
    height: 100%;
    top: 17%;
}

.call {
    width: 18%;
    background-color: #66bb6a;
    padding: 0.5%;
    margin: 0.5%;
    position: absolute;
    right: 5.4%;
    bottom: 13.6%;
    cursor: pointer;
}

.call #callText {
    margin-left: 9%;
    font-size: 1.0vw;
    margin-top: 6.6%;
    color: #717171;
}

.call #callIcon {
    position: absolute;
    height: 48%;
    left: 15%;
    top: 26%;
}

#recentContacts {
    position: absolute;
    height: 12%;
    right: 13%;
    top: 3%;
}

#contacts {
    position: absolute;
    height: 12%;
    right: 5%;
    top: 3%;
}

.digit:active {
    background-color: #000000;
}

#dialPad {
    position: absolute;
    width: 55%;
    left: 20%;
    height: 82%;
}

.dialKeyPad {}

.dialKeyPad #one {}

.dialKeyPad #two {
    left: 34%;
}

.dialKeyPad #three {
    left: 68%;
}

.dialKeyPad #four {
    top: 26%;
}

.dialKeyPad #five {
    top: 26%;
    left: 34%;
}

.dialKeyPad #six {
    top: 26%;
    left: 68%;
}

.dialKeyPad #seven {
    top: 52%;
}

.dialKeyPad #eight {
    top: 52%;
    left: 34%;
}

.dialKeyPad #nine {
    top: 52%;
    left: 68%;
}

.dialKeyPad #star {
    top: 78%;
}

.dialKeyPad #zero {
    top: 78%;
    left: 34%;
}

.dialKeyPad #hash {
    top: 78%;
    left: 68%;
}

.dialKeyPad #btnCall {
    left: 102%;
    top: 78%;
}

.selectedKeyPadKey {
    border: 2px solid;
    border-color: #2680eb !important;
}

.digit {
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    font-size: 0.68vw;
    background-color: #303030;
    /* float: left; */
    padding: 0.55%;
    margin: 0.4%;
    width: 32.5%;
    text-align: center;
    border: 2px solid;
    border-color: #267feb00;
    position: absolute;
    height: 23%;
}

.digit .sub {
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    font-size: 0.75vw;
    color: #717171;
}

.keypadNumber {
    width: 54.7%;
    position: absolute;
    height: 13%;
    top: 3%;
    background: #121212;
    left: 20%;
}

.keypadNumber #dialNumber {
    font-family: "ducati-cond-regular";
    font-style: normal;
    font-weight: 600;
    margin-left: 6%;
    font-size: 1.2vw;
    letter-spacing: normal;
    color: #2680eb;
}

#btnKeypadClear {
    position: absolute;
    height: 8%;
    right: 26.5%;
    top: 5.5%;
}

#btnKeypadDelete {
    position: absolute;
    height: 8%;
    right: 19%;
    top: 5.5%;
}


/* ====================================================== Green Pop Up Call */

.greenPopUpCall {
    /* z-index: 19;
        position: absolute;
        top: 0%;
        right: 0; */
}

.greenPopUpCall #callVolumeDown {
    position: absolute;
    z-index: 3;
    right: 39.5%;
    top: 18%;
    height: 2.2%;
}

.greenPopUpCall #callVolumeIcon {
    position: absolute;
    z-index: 4;
    right: 38.5%;
    top: 9.3%;
    height: 6%;
}

.greenPopUpCall #callVolumeUp {
    position: absolute;
    z-index: 5;
    right: 39.5%;
    top: 5%;
    height: 2.2%;
}

.greenPopUpCall #greenImage {
    position: absolute;
    right: 0%;
    z-index: 2;
    height: 22.5%;
}

.greenPopUpCall #callName {
    position: absolute;
    left: 65%;
    z-index: 2;
    top: 7%;
    font-size: 1.3vw;
    font-family: 'ducati-cond-bold';
}

.greenPopUpCall #endcallIcon {
    position: absolute;
    right: 32.5%;
    top: 18%;
    z-index: 2;
    height: 1.7%;
}

.greenPopUpCall #endcalltext {
    font-family: 'ducati-cond-bold';
    font-size: 0.6vw;
    position: absolute;
    left: 68%;
    top: 17%;
    z-index: 2;
}


/* ==============================================  Main Green Call */

.greenPopUpCall #callMainGreenVolumeDown {
    position: absolute;
    z-index: 4;
    left: 5%;
    top: 28.5%;
    height: 1.7%;
}

.greenPopUpCall #callMainGreenVolumeIcon {
    position: absolute;
    z-index: 4;
    left: 4.8%;
    top: 21%;
    height: 5%;
}

.greenPopUpCall #callMainGreenVolumeUp {
    position: absolute;
    z-index: 6;
    left: 5%;
    top: 17%;
    height: 1.7%;
}

.greenPopUpCall #mainGreenImage {
    position: absolute;
    left: 2%;
    top: 13%;
    z-index: -1;
    height: 21%;
}

.greenPopUpCall #mainGreencallName {
    position: absolute;
    left: 10.5%;
    z-index: 2;
    top: 18%;
    font-size: 1.3vw;
    font-family: 'ducati-cond-bold';
}

@supports (-moz-appearance:none) {
    .greenPopUpCall #mainGreencallName {
        top: 19%;
    }
}

.greenPopUpCall #mainGreenEndcallIcon {
    position: absolute;
    left: 10.5%;
    top: 29.5%;
    z-index: 2;
    height: 1.5%;
}

@supports (-moz-appearance:none) {
    .greenPopUpCall #mainGreenEndcallIcon {
        top: 29%;
    }
}

.greenPopUpCall #mainGreenEndcalltext {
    font-family: 'ducati-cond-bold';
    font-size: 0.6vw;
    position: absolute;
    left: 14%;
    top: 28%;
    z-index: 2;
}


/* ========================= Orange Main Popup */

.orangePopUpCall #mainOrangeCall {
    position: absolute;
    z-index: 4;
    left: 5%;
    top: 28.5%;
    height: 1.7%;
}

.orangePopUpCall #mainOrangeImage {
    position: absolute;
    left: 2%;
    top: 13%;
    z-index: -1;
    height: 21%;
}

.orangePopUpCall #mainOrangeCallName {
    position: absolute;
    left: 11%;
    z-index: 2;
    top: 18%;
    font-size: 1.3vw;
    font-family: 'ducati-cond-bold';
}

@supports (-moz-appearance:none) {
    .orangePopUpCall #mainOrangeCallName {
        top: 19%;
    }
}

.orangePopUpCall #mainOrangeEndcallIcon {
    position: absolute;
    left: 4%;
    top: 22%;
    z-index: 2;
    height: 3.0%;
}

.orangePopUpCall #mainOrangePhoneIcon {
    position: absolute;
    left: 11%;
    top: 28%;
    z-index: 2;
    height: 4%;
}

.orangePopUpCall #mainEndCallBack {
    font-family: 'ducati-cond-bold';
    font-size: 0.6vw;
    position: absolute;
    left: 14%;
    top: 28%;
    z-index: 2;
}


/* ========================================================================  Orange End call Pop up */


/* ====================================================== Green Pop Up Call */

.orangePopUpCall {
    /* z-index: 19;
        position: absolute;
        top: 0%;
        right: 0; */
}

.orangePopUpCall #orangeImage {
    position: absolute;
    right: 0%;
    z-index: 2;
    height: 22.5%;
}

.orangePopUpCall #orangeEndcallIcon {
    position: absolute;
    right: 38%;
    top: 10%;
    z-index: 3;
    height: 3.0%;
}

.orangePopUpCall #orangeCallName {
    position: absolute;
    left: 65%;
    z-index: 2;
    top: 7%;
    font-size: 1.3vw;
    font-family: 'ducati-cond-bold';
}

.orangePopUpCall #orangePhoneIcon {
    position: absolute;
    right: 32.5%;
    top: 16%;
    z-index: 3;
    height: 4%;
}

.orangePopUpCall #endCallBack {
    font-family: 'ducati-cond-bold';
    font-size: 0.6vw;
    position: absolute;
    left: 68%;
    top: 16%;
    z-index: 2;
}

.sygicScreen {
    height: 100%;
    width: 100%;
}

.sygicImageFullScreen {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
}

.screen-header img {
    /*  top: 8%;
        height: 85%; */
}

.headerMainFual {
    position: absolute;
    left: 0%;
    height: 65%;
    top: 18%;
}

.headerMainMobile {
    position: absolute;
    left: 46%;
    top: 8%;
    height: 85%;
}

.headerMainBattery {
    position: absolute;
    left: 54%;
    top: 8%;
    height: 85%;
}

.headerMainNetwork {
    position: absolute;
    left: 62%;
    top: 8%;
    height: 85%;
}

.headerMainHelmat {
    position: absolute;
    left: 72%;
    top: 8%;
    height: 85%;
}

.headerMainSos {
    position: absolute;
    left: 87%;
    top: 8%;
    height: 85%;
}

.auto-leveling-icon {
    height: 80% !important;
    top: -12% !important;
}

.auto-leveling-title {
    top: -6%;
    left: 3%;
    font-size: 1.5vw;
    font-family: 'ducati-cond-tab-bold';
}

.video-list {
    background-color: black;
}

.video-row {
    margin-bottom: 1.5rem;
}

#directLoadModeListHelmat .ducati-menu-previous-1 .auto-leveling-icon {
    top: 3% !important;
}

#directLoadModeListHelmat .ducati-menu-previous-2 .auto-leveling-icon {
    top: 3% !important;
}

#directLoadModeListHelmat .ducati-menu-previous-1 .auto-leveling-title {
    font-size: 1.3vw;
}

#directLoadModeListHelmat .ducati-menu-previous-2 .auto-leveling-title {
    font-size: 1.2vw;
}

.video-list {
    width: 100%;
    padding-bottom: 34%;
    height: 0;
}

.video-title {
    font-family: "ducati-ext-rg";
    font-size: 18px;
    text-align: center;
    flex: 1;
}

.play-container {
    flex: 4;
}

.card-img-overlay {
    padding-bottom: 4px;
}

.video-preview {
    cursor: pointer;
}

.video-preview:hover .play-container img {
    opacity: 0.5;
}


.embed-responsive {
    background-color: black ;
}

/* ======================================== */


/* Responsive fonts for smartphone */


/* Portrait phones and smaller */


/* @media (max-width: 991px) {
    #mainN,
    #mainSpinkmNumber {
        top: -4%;
    }
} */

@media (max-width: 991px) {
    .content {
        padding: 0 !important;
    }
    .control-container {
        height: 222px;
    }
    #display-column {
        padding-left: 0px;
        padding-right: 0px;
    }
    .main-ctrl {
        width: 100%;
        height: 0;
        padding-bottom: 56%;
        display: flex;
        position: relative;
        justify-content: center;
        /* border-radius: 10px; */
        /* background-color: rgb(0, 0, 0); */
        background-image: none;
    }
    #cluster-row {
        margin-top: 0px;
    }
    #mainkmNumber {
        top: -8%;
        left: 13%;
    }
    .screen-velocity-label #mainkm {
        bottom: 3%;
        right: 4%;
    }
    @supports (-moz-appearance:none) {
        .screen-velocity-label #mainkmNumber {
            top: 5%;
            left: 13%;
        }
        .screen-velocity-label #mainkm {
            bottom: 2%;
            right: 4%;
        }
    }
    .lap-data-mode-text {
        font-size: 3.74vw;
    }
    .launch-call {
        font-size: 4.98vw;
    }
    .displayTwoTitle {
        font-size: 3.74vw;
    }
    .displaySelectedRightLabel {
        font-size: 4.98vw;
    }
    .infoSetting {
        font-size: 3.23vw;
    }
    .big200 {
        font-size: 9.96vw;
    }
    .kmh {
        font-size: 2.49vw;
    }
    #directHelmatRidingModeLabel {
        font-size: 3.98vw;
    }
    #directRiding200Position {
        font-size: 12.45vw;
    }
    #directRidingNumber {
        font-size: 12.45vw;
    }
    .main-screen-bottom-bar-degree-text {
        bottom: 2%;
    }
    #mainLeftFooterdegree {
        top: 15%;
        left: 25%;
    }
    #mainRightFooterdegree {
        top: 17%;
        right: 11%;
    }
    #directRidingGearSpan {
        font-size: 2.98vw;
    }
    .screen-time-container .main-screen-time-text-style {
        font-size: 3.98vw;
    }
    #bottom-bar-air {
        font-size: 2.98vw;
    }
    .main-screen-bottom-bar-degree-text {
        font-size: 3.74vw;
    }
    .mainFooterdegree {
        font-size: 2.74vw;
    }
    .trip-property-value {
        font-size: 2.49vw;
    }
    .trip-property-lengthCategory {
        font-size: 2.49vw;
    }
    .trip-property-key {
        font-size: 2.49vw;
    }
    .screen-velocity-label #mainkmNumber {
        font-size: 12.45vw;
    }
    .screen-velocity-label #mainkm {
        font-size: 2.49vw;
    }
    .screen-content #mainRiderTypeSpringText {
        font-size: 2.98vw;
    }
    .screen-content #ridingModeMainChange {
        font-size: 2.49vw;
    }
    #mainSportMenu .ducati-menu-item {
        font-size: 1.99vw;
    }
    #mainSportMenu .ducati-menu .ducati-menu-selected {
        font-size: 2.49vw;
    }
    .ducati-menu-selected {
        font-size: 4.98vw;
    }
    .ducati-menu-previous-1 {
        font-size: 3.74vw;
    }
    .ducati-menu-previous-2 {
        font-size: 3.23vw;
    }
    #directRidingSubMenuUl .ducati-menu-previous-1 {
        font-size: 4.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-previous-2 {
        font-size: 4.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-selected {
        font-size: 4.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-item {
        font-size: 2.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-selected {
        font-size: 2.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-previous-1 {
        font-size: 2.98vw;
    }
    #directRidingSubMenuUl .ducati-menu-previous-2 {
        font-size: 2.98vw;
    }
    .display-order-list-title {
        font-size: 2.98vw;
    }
    .item-order-index {
        font-size: 1.874vw;
    }
    .item-order-divider {
        font-size: 2.98vw;
    }
    #orderListRightMenu .list-group-item {
        font-size: 2.49vw;
    }
    .bluetoothDisplayText {
        font-size: 4.98vw;
    }
    .screen-content #bluetoothPairedDevices {
        font-size: 4.98vw;
    }
    #bluetoothPairedDevices .ducati-menu-previous-1 {
        font-size: 3.23vw;
    }
    #bluetoothPairedDevices .ducati-menu-selected {
        font-size: 3.74vw;
    }
    .screen-content #settingListMenuUl {
        font-size: 3.98vw;
    }
    .screen-content #directRidingMenuUl {
        font-size: 3.98vw;
    }
    .screen-content #directLoadModeListHelmat {
        font-size: 3.98vw;
    }
    #nodeviceLabel {
        font-size: 4.98vw;
    }
    #deletePairedLabel {
        font-size: 4.98vw;
    }
    #bluetoothPairingLabel {
        font-size: 4.98vw;
    }
    .sos-display #sosCallAborted {
        font-size: 6.22vw;
    }
    .sos-display #sosCallInProgress {
        font-size: 6.22vw;
    }
    .sos-progress-start #SOS-Call {
        font-size: 4.98vw;
    }
    .sos-progress-start #in-progress {
        font-size: 4.98vw;
    }
    .sos-progress-start #To-abort-the-call {
        font-size: 2.98vw;
    }
    .sos-progress-start #press-enter-within {
        font-size: 2.98vw;
    }
    .sos-progress-start #sixtySeconds {
        font-size: 8.71vw;
    }
    #Press-enter-to-exit {
        font-size: 3.74vw;
    }
    #sos_Suceeded {
        font-size: 6.22vw;
    }
    #songName {
        font-size: 2.49vw;
    }
    .main-trip-master #tripMasterZero {
        font-size: 7.47vw;
    }
    .main-trip-master #tripMasterKm {
        font-size: 1.99vw;
    }
    .main-trip-master #mainScreenTripOnOff {
        font-size: 3.74vw;
    }
    #mainScreenLapChronometer {
        font-size: 4.48vw;
    }
    #mainScreenLapCount {
        font-size: 1.99vw;
    }
    #mainScreenLapOnOff {
        font-size: 1.99vw;
    }
    .resetMsg span {
        font-size: 2.49vw;
    }
    #resetYes {
        font-size: 1.99vw;
    }
    #resetNo {
        font-size: 1.99vw;
    }
    #lapDataNoLap {
        font-size: 3.4.98vw;
    }
    .BluetoothPairDeviceText {
        font-size: 4.48vw;
    }
    #pairCodeNumber {
        font-size: 4.48vw;
    }
    #directRidingMode220 {
        font-size: 12.45vw;
    }
    .main-display-all-screens {
        left: 2.5%;
        height: 95%;
        width: 95%;
        top: 0%;
    }
    .main-ctrl {
        background-position: center !important;
    }
    #display-column {
        order: 1;
    }
    #controls-column {
        order: 2;
    }
    .control-container {
        position: relative;
        width: 414px;
        margin-top: 0px;
    }
    #btnSpringOutline {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 69px;
        height: auto;
    }
    #btnSpring {
        position: absolute;
        top: 29px;
        left: 9px;
        width: 50px;
        height: auto;
    }
    #btnModeOutline {
        position: absolute;
        top: 108px;
        left: 0px;
        width: 69px;
        height: auto;
    }
    #btnMode {
        position: absolute;
        top: 116px;
        left: 9px;
        width: 50px;
        height: auto;
    }
    #btnPlusOutline {
        position: absolute;
        top: 0px;
        left: 78px;
        width: 69px;
        height: auto;
    }
    #btnPlus {
        position: absolute;
        top: 9px;
        left: 87px;
        width: 50px;
        height: auto;
    }
    #btnMinusOutline {
        position: absolute;
        top: 140px;
        left: 78px;
        width: 69px;
        height: auto;
    }
    #btnMinus {
        position: absolute;
        top: 150px;
        left: 87px;
        width: 50px;
        height: auto;
    }
    #controlOutline {
        position: absolute;
        left: 142px;
        top: 22px;
        width: 96px;
        height: auto;
    }
    #btnAccIcon {
        left: 197px;
        position: absolute;
        top: 90px;
        width: 25px;
    }
    #btnControl {
        position: absolute;
        left: 150px;
        top: 34px;
        width: 82px;
        height: auto;
    }
    #btnRes {
        position: absolute;
        left: 254px;
        top: 24px;
        width: 50px;
    }
    #btnOnOff {
        position: absolute;
        left: 151px;
        top: 61px;
        width: 40px;
        height: auto;
    }
    #btnSet {
        position: absolute;
        top: 129px;
        left: 252px;
        width: 55px;
        height: auto;
    }
    #btnCenterOuter {
        position: absolute;
        top: 75px;
        left: 308px;
        width: 57px;
        height: auto;
    }
    #btnCenter {
        position: absolute;
        top: 85px;
        left: 318px;
        width: 37px;
        height: auto;
    }
    #btnTop {
        position: absolute;
        top: 25px;
        left: 312px;
        width: 48px;
        height: auto;
    }
    #btnBottom {
        position: absolute;
        top: 127px;
        left: 314px;
        width: 48px;
        height: auto;
    }
    #btnRight {
        position: absolute;
        top: 78px;
        left: 361px;
        height: 50px;
        width: auto;
    }
    #btnLeft {
        position: absolute;
        top: 78px;
        left: 257px;
        height: 50px;
        width: auto;
    }
    #bsdDivMain {
        font-size: 2.24vw;
    }
    .settings-service-title {
        font-size: 2.98vw;
    }
    .settings-service-info {
        font-size: 2.98vw;
    }
    #absCornering {
        font-size: 1.12vw;
    }
    .dtcDisplayBoxTextStyle {
        font-size: 1.86vw;
    }
    #absFront {
        font-size: 3.74vw;
    }
    #absOnly {
        font-size: 3.74vw;
    }
    #mainScreenLap {
        font-size: 2.00vw;
    }
    .displayTitle {
        font-size: 4.48vw;
    }
    /* ===========================================  Spin Display start */
    #spinBsdDivMain {
        font-size: 2.24vw;
    }
    .menuSpinText {
        font-size: 1.99vw;
    }
    #bottom-spin-bar-air {
        font-size: 2.98vw;
    }
    #ridingModeName {
        font-size: 2.74vw;
    }
    #mainRpm {
        font-size: 2.49vw;
    }
    #mainRpmNumber {
        font-size: 5.97vw;
    }
    #mainSpinkm {
        font-size: 1.74vw;
    }
    #mainSpinkmNumber {
        font-size: 8.96vw;
        top: -3%;
    }
    #mainSpinGear {
        font-size: 1.74vw;
    }
    #mainN {
        font-size: 9.46vw;
        top: -3%;
    }
    .DucatiMusicItem {
        font-size: 2.98vw;
    }
    .DucatiMusicItem.active {
        font-size: 3.74vw;
    }
    .DucatiMusicItem .itemSingleTitle {
        font-size: 2.98vw;
    }
    .DucatiMusicItem .itemTitle {
        font-size: 2.98vw;
    }
    .DucatiMusicItem .itemSubTitle {
        font-size: 2.49vw;
    }
    .DucatiMusicItem .itemDurationTitle {
        font-size: 2.49vw;
    }
    .DucatiMusicItem .itemSingleTitlewhite {
        font-size: 2.98vw;
    }
    #startingTime {
        font-size: 2.49vw;
    }
    #durationTime {
        font-size: 2.49vw;
    }
    .spin-center-container #nowPlayingsongName {
        font-size: 3.48vw;
    }
    .spin-center-container #songAuthorName {
        font-size: 3.48vw;
    }
    .digit {
        font-size: 1.69vw;
    }
    .digit .sub {
        font-size: 1.874vw;
    }
    .call #callText {
        font-size: 2.49vw;
    }
    .DucatiMusicItem .contactDetailHome {
        font-size: 2.98vw;
    }
    .DucatiMusicItem .ContactInfo {
        font-size: 2.98vw;
    }
    .greenPopUpCall #callName {
        font-size: 3.23vw;
    }
    .greenPopUpCall #endcalltext {
        font-size: 0.9vw;
    }
    .greenPopUpCall #mainGreencallName {
        font-size: 3.23vw;
    }
    .greenPopUpCall #mainGreenEndcalltext {
        font-size: 1.49vw;
    }
    .orangePopUpCall #mainOrangeCallName {
        font-size: 3.23vw;
    }
    .orangePopUpCall #mainEndCallBack {
        font-size: 1.49vw;
    }
    .orangePopUpCall #orangeCallName {
        font-size: 3.23vw;
    }
    .orangePopUpCall #endCallBack {
        font-size: 1.49vw;
    }
    .first-level-title {
        font-size: 4.98v;
    }
    #directLoadModeListHelmat .ducati-menu-previous-1 .ducati-menu-multicontent-container {
        font-size: 2.49vw !important;
    }
    .ducati-menu-previous-2 .ducati-menu-multicontent-container {
        font-size: 2.24vw !important;
    }
    #heatSeatMenuListUl .ducati-menu-previous-2,
    #mainPhoneListUl .ducati-menu-previous-2 {
        font-weight: normal;
        font-size: 1.99vw;
        font-family: 'ducati-cond-bold';
    }
    #heatSeatMenuListUl .ducati-menu-previous-1,
    #mainPhoneListUl .ducati-menu-previous-1 {
        font-weight: normal;
        color: #717171 !important;
        font-family: 'ducati-cond-bold';
        font-size: 1.99vw;
    }
    #heatSeatMenuListUl .ducati-menu-selected,
    #mainPhoneListUl .ducati-menu-selected {
        font-weight: normal;
        font-family: 'ducati-cond-bold';
        color: white;
        font-size: 2.49vw;
    }
    .auto-leveling-title {
        font-size: 3.74vw;
    }
    .DucatiMusicItem .itemSeperator {
        font-size: 2.49vw;
    }
    .DucatiMusicItem .headingSongCount {
        font-size: 2.49vw;
    }
    #absFirstItem {
        font-size: 2.49vw;
    }
    #absOnOff {
        font-size: 0.9vw;
    }
    .screen-velocity-label #mainkmNumber {
        top: 0%;
    }
    .spin-center-container #listCategoryTitle {
        font-size: 3.48vw;
    }
    #loadHighLabel,
    #loadLowLabel {
        font-size: 2vw;
    }
    #dtcLeftLabel,
    #dtcRightLabel {
        font-size: 1.87vw;
    }
    #dwcLeftLabel,
    #dwcRightLabel {
        font-size: 1.62vw;
    }
    #suspensionLeftLabel,
    #suspensionRightLabel {
        font-size: 1.74vw;
    }
    #directLoadModeListHelmat .ducati-menu-selected {
        font-size: 2.99vw;
    }
}