@charset "utf-8";

.app-nav-regions { position: relative; }

.app-nav-regions.open .region-selector { background-color: rgb(37, 37, 37); border-bottom: 1px solid rgb(5, 5, 5); }

.app-nav-regions.open .region-selector svg { transform: rotate(180deg); }

.app-nav-regions.open .region-selector svg path { stroke: rgb(229, 229, 229); }

.app-nav-regions.open .region-popup { display: block; }

.app-nav-regions .region-item { align-items: center; display: flex; gap: 8px; }

.app-nav-regions .region-item .flag { height: 12px; width: 12px; }

.app-nav-regions .region-item .region { color: rgb(255, 255, 255); font-size: 12px; font-weight: 400; letter-spacing: 0.36px; line-height: 16px; }

.app-nav-regions .region-item .language { color: rgb(163, 163, 163); font-size: 12px; font-weight: 400; letter-spacing: 0.36px; line-height: 16px; padding-left: 8px; position: relative; }

.app-nav-regions .region-item .language::before { background-color: rgb(82, 82, 82); content: ""; height: 12px; left: 0px; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; }

.app-nav-regions .region-selector { align-items: center; display: flex; height: 40px; padding: 0px 4px 0px 8px; }

.app-nav-regions .region-selector svg { height: 20px; width: 20px; }

.app-nav-regions .region-selector svg path { stroke: rgb(115, 115, 115); }

.app-nav-regions .region-popup { background: rgba(32, 32, 32, 0.98); border: 1px solid rgb(37, 37, 37); box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 24px -2px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; display: none; position: absolute; right: 0px; top: 100%; }

.app-nav-regions .region-popup .header { background-color: rgb(37, 37, 37); padding: 12px 24px; }

.app-nav-regions .region-popup .header p { color: rgb(212, 212, 212); font-size: 12px; font-weight: 500; letter-spacing: 0.36px; line-height: 16px; }

.app-nav-regions .region-popup .body { padding: 8px 24px; }

.app-nav-regions .region-popup .body .region-list { display: flex; gap: 40px; justify-content: space-between; }

.app-nav-regions .region-popup .body .region-list .region-item { height: 32px; width: max-content; }

.app-nav-regions .region-popup .body .region-list .region-item:hover .region { border-bottom: 1px solid rgb(255, 255, 255); }