@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --store-blue: #528ffe;
	--mobrowser-pre-black: #0e0e0e;
	--mobrowser-plugin-bg: #262626;
	--mobrowser-light85: #D8D8D8;
	--mobrowser-font-lato: 'Lato', Arial, Helvetica, sans-serif;
    --mobrowser-font-montserrat: 'Montserrat', Arial, Helvetica, sans-serif;
	--mobrowser-active: #38E287;
}

#moBrowser, #moBrowser :is(html, body, iframe) {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;
    border: 0;
}

#moBrowser html {
	background-color: var(--mobrowser-plugin-bg);
}

#moBrowser iframe {
    height: calc(100% - 50px);
}

#moBrowser :is(p, span) {
	font-family: var(--mobrowser-font-lato);
}

#moBrowser .search-container {
    width: 100%;
	padding-right: 35px;
}

#moBrowser #urlDisplay {
    padding-bottom: 6px;
    padding-top: 8px;
}

#moBrowser #urlData {
    position: absolute;
    z-index: 2;
    width: 100%;
    margin-bottom: 2px;
}

#moBrowser #urlInput {
    width: 100%;
    height: 25px;
    background-color: var(--mobrowser-plugin-bg);
    border: solid 1px var(--store-blue);
    padding-left: 8px;
    border-radius: 4px;
	color: grey;
	font-family: var(--mobrowser-font-lato);
	outline: none;
}

#moBrowser #urlInput::selection {
    background-color: var(--store-blue);
    color: #e2e2e2;
}

#moBrowser .url-segment {
    background-color: #444;
    color: white;
    padding: 4px 6px 4px 4px;
    margin: 0 4px 5px 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-family: var(--mobrowser-font-montserrat);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 1px solid transparent;
	height: 20px;
}

.modeless .url-segment {
	padding: 0 6px 0 4px !important;
	height: 18px !important;
}

#moBrowser .url-segment.non-clickable {
    background-color: transparent;
    pointer-events: none;
	color: var(--store-blue);
	border-color: var(--store-blue);
	
}

#moBrowser .url-segment:hover {
    background-color: var(--store-blue);
    cursor: pointer;
}

#moBrowser .url-segment:hover img, 
#moBrowser .url-segment.active-element img {
    filter: brightness(1.3);
}

#moBrowser .url-divider {
    margin: 0 3px 0 4px;
	pointer-events: none;
    position: relative;
	top: -1px;
    left: -2px;
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #888;	
}


#moBrowser .url-segment.active-element {
	background-color: var(--store-blue);
    cursor: default;
}

#moBrowser .segment-icon {
    vertical-align: middle;
    margin-right: 5px;
	width: 12px;
}

#moBrowser button {
    outline: none;
}

#moBrowser #error-overlay {
    position: fixed;
    /* top: 93px; */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mobrowser-plugin-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#moBrowser #error-overlay p,
#moBrowser #error-overlay a {
    margin-bottom: 15px;
    font-size: 16px;
    color: #b1b1b1;
    margin-bottom: 60px;
	font-family: var(--mobrowser-font-lato) !important;
}


#moBrowser #error-overlay a:hover {
	color: var(--store-blue);
}


#moBrowser #error-overlay h1 {
	color: #eaeaea;
	margin-bottom: 10px;
	font-family: var(--mobrowser-font-montserrat);
	font-weight: 700;
	font-size: 2em !important;
}

#moBrowser #errorMessage,
#moBrowser #error-overlay{
    font-size: 16px;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

#moBrowser #copyUrlButton, 
#moBrowser #openBrowserButton {
    right: -20px;
    border: none;
    background: var(--mobrowser-plugin-bg);
    cursor: pointer;
    z-index: 3;
    position: absolute;
}

#moBrowser #openBrowserButton img {
	max-width: 120%;
	width: 14px;
}

.modeless #openBrowserButton img {
	max-width: 120%;
	width: 16px !important;
}

#moBrowser #mobro-toolbar {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    left: 0;
    width: 100%;
    background-color: var(--mobrowser-plugin-bg);
    color: white;
    align-items: center;
    z-index: 99;
    border-bottom: solid #141414 1px;
    font-family: var(--mobrowser-font-montserrat);
    letter-spacing: .02em;
    justify-content: space-between;
    min-height: 46px;
    margin-top: -2px;
    padding-left: 4px;
    padding-right: 10px;
}


#moBrowser .toolbar-left,
#moBrowser .toolbar-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

#moBrowser .toolbar-left .toolbar-button {
	margin-right: -5px;
}

#moBrowser .toolbar-center {
    display: flex;
    align-items: center;
    flex-grow: 1;
	margin-left: 10px;
}

#moBrowser .toolbar-button {
	width: 30px;
    height: auto;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 5px;
	align-items: center;
    cursor: pointer;
}

#moBrowser .toolbar-button:hover, 
#moBrowser .toolbar-button:active {
    filter: brightness(1.3);
}

#moBrowser #openBrowserButton:hover,
#moBrowser #copyUrlButton:hover {
    filter: brightness(1);
}


#moBrowser #openBrowserButton img:hover,
#moBrowser #copyUrlButton img:hover {
    filter: brightness(1.3);
}


#moBrowser .toolbar-button img.mirror {
    transform: scaleX(-1);
}

#moBrowser .disabled-element {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    transition: opacity 0.2s ease;
}

#moBrowser .hidden {
	display: none;
}

#moBrowser #reloadButtonError {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#moBrowser #reloadButtonError:hover {
    background-color: #0056b3;
}

#moBrowser #backButton, 
#moBrowser #forwardButton {
    transition: opacity 0.2s ease;
}

#copypaster-loading-overlay,
#mobrowser-loading-overlay,
#modaless-loading-overlay {
    position: fixed;
    top: 93px;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    cursor: progress;
}


.mobro-loader,
.mobro-loader div {
    box-sizing: border-box;
}

.mobro-loader {
    color: var(--mobrowser-active);
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 170px;
}

.mobro-loader div {
    position: absolute;
    top: 33.33333px;
    width: 13.33333px;
    height: 13.33333px;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.mobro-loader div:nth-child(1) {
    left: 8px;
    animation: mobro-loader1 0.6s infinite;
}

.mobro-loader div:nth-child(2) {
    left: 8px;
    animation: mobro-loader2 0.6s infinite;
}

.mobro-loader div:nth-child(3) {
    left: 32px;
    animation: mobro-loader2 0.6s infinite;
}

.mobro-loader div:nth-child(4) {
    left: 56px;
    animation: mobro-loader3 0.6s infinite;
}

#moBrowser #error-overlay, 
#moBrowser #error-overlay p {
	text-align: center;
	top: -50px;
}

#moBrowser #reloadErrorPage {
    background-color: transparent;
    border: 2px solid var(--mobrowser-light85);
    border-radius: 50px;
    color: var(--mobrowser-light85);
    padding: 5px 20px;
    cursor: pointer;
    font-weight: 600
}

#moBrowser #reloadErrorPage:hover {
    background-color: var(--mobrowser-active);
    border-color: var(--mobrowser-active);
    color: var(--mobrowser-pre-black);
}

@keyframes mobro-loader1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes mobro-loader3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes mobro-loader2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

.external-link-tooltip {
    position: absolute;
    padding: 5px 10px;
    background-color: var(--mobrowser-pre-black);
    color: var(--mobrowser-light85);
    font-size: 12px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 11111;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: var(--mobrowser-font-montserrat);
    letter-spacing: .02em;
}

.tooltip-link {
	font-family: var(--mobrowser-font-montserrat);
    color: var(--store-blue);
	font-weight: 700;
}

