Mkdocs with material theme: extra css not working on mobile devices - css

Question

I'm using Mkdocs with material theme for products documentation on my company. I'd made some customize on the original theme using the extra.css file.
When people navigate on my site on web browser it's working ok.
When they navigate on mobile devices, the extra.css is not working, or having a very strange behavior.
On the images of mobile devices, the left side is when I open the menu. The right side is when I click in a link in the menu.
Here is my extra.css file.
.md-header__button.md-logo :-webkit-any(img,svg) {
display: block;
width: auto;
height: 2rem;
fill: currentColor;
}
.md-nav--primary {
font-size: .75rem;
line-height: 1.5;
background-color: #0000cc;
border-color: #eee;
border-width: thin;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding-top: .6rem;
padding-bottom: .6rem;
}
.md-header {
background-color: #0000cc;
}
input.md-search__input {
width: 100%;
height: 1.8rem;
padding-left: 2.2rem;
font-size: .8rem;
opacity: 1;
background-color: rgba(0,0,0,1);
border-radius: 16px;
text-align: left;
letter-spacing: 0px;
color: #ffffff;
opacity: 1;
}
.md-search__input:hover {
background-color: rgba(0,0,0,1);
}
.md-search-result__teaser {
display: -webkit-box;
max-height: 2rem;
color: #00348b;
margin: .5em 0;
overflow: hidden;
font-size: .64rem;
line-height: 1.6;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[data-md-toggle=search]:checked~.md-header .md-search__input {
text-overflow: clip;
background-color: var(--md-default-bg-color);
border-radius: .1rem .1rem 0 0;
color: #00348b;
}
.md-search-result__meta {
padding: 0 .8rem;
color: #00348b;
font-size: .64rem;
line-height: 1.8rem;
scroll-snap-align: start;
}
.md-nav--primary, .md-nav--secondary {
font-size: .75rem;
line-height: 1.5;
background-color: #eee;
-moz-border-radius: 8px;
border-radius: 8px;
padding-top: .6rem;
padding-bottom: .6rem;
background: #00348B 0% 0% no-repeat padding-box;
}
.md-nav__title {
display: block;
padding: 0 .6rem;
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
color: #ffffff;
}
.md-nav__item .md-nav__link--active {
text-align: left;
font: normal normal normal 14px/18px Open Sans;
letter-spacing: 0.35px;
color: #FFFFFF;
opacity: 1;
}
.md-nav__item--nested>.md-nav__link {
color: #FFFFFF;
}
.md-nav__link {
display: block;
margin-top: .625em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: color 125ms;
scroll-snap-align: start;
text-align: left;
letter-spacing: 0.33px;
color: #FFFFFF;
opacity: 1;
}
.md-nav__link[data-md-state=blur] {
color: #d5d5d5;
}
.md-footer {
color: #FFFFFF;
background : #00348B 0% 0% no-repeat padding-box;
}
.md-float-right {
height: 100%;
margin: 430px 0 0 650px;
display: inline-block;
align-items: flex-end;
position: fixed;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
text-align: justify;
}