* {
    box-sizing: border-box;
}

* {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.colors-default {
    --tab: #006587;
    --light: #d3d3d3;
    --tab-text: #0f0f0f;
    --button: #004b6c;
    --button-inactive: lightgray;
    --button-inactive-text: gray;
    --red-button: rgb(212, 63, 58);
    --green-back: #33CC33;
    --red-back: #FF3300;
    --text: #333333;
    --call-color: #0D893F;
}

body {
    background-color: #ffffff;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

img {
    display: block;
}

.tab-bar {
    background-color: #006587;
    color: #0f0f0f;
    height: 70px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
}

.tab-bar-item-full {
    height: 70px;
    width: 100%;
}

.tab-bar-item-full img {
    margin-left: 50%;
    padding: 24px 20px;
}

.tab-bar-item {
    height: 70px;
    width: 50%;
}

.tab-bar-item img {
    margin: auto;
    padding: 24px 0;
}

.tab-bar-item.active {
    border-bottom: 3px solid #d3d3d3;
}

.navigation-bar {
    background-color: #439688;
    color: #0f0f0f;
    float: left;
    height: 70px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.content {
    font-size: 18px;
    /*26px;*/
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: auto;
    right: 0;
    top: 0;
}

.tab-bar~.content {
    top: 70px;
}

.navigation-bar~.content {
    bottom: 70px;
}

.text-center {
    text-align: center;
}

.bottom {
    bottom: 0;
    float: left;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.wrong-popup {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wrong-popup-img {
    margin: auto;
}

.wrong-popup-inner-container {
    margin: auto;
}

.wrong-popup-outher-container {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;
    background-color: DimGrey;
}


.wrong-popup-message {
    text-align: center;
    color: white;
    padding: 20px 10px 10px 10px;
}

.wrong-popup-loop {
    animation: spin 3s infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    100% {
        transform: rotate(-360deg);
    }
}


.open_wrapper{
    background-color: #33CC33;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    flex-direction: column;
}

.open_message{
    color: #fff;
    font-size: 18px;
    margin: 20px auto;
    text-align: center;
}

.open_img{
    width: 100px;
    animation: open_img_ani 800ms forwards;
}

.close_wrapper{
    background-color: #FF3300;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    flex-direction: column;
}

.close_img{
    width: 100px;
    animation: close_img_ani 1s forwards linear;
}

.open_popup_out{
    animation: open_popup_out_ani 100ms forwards;
}

.open_popup_in{
    animation: open_popup_in_ani 100ms forwards;
}

@keyframes close_img_ani{
    0% {
        transform: rotate(0deg) scale(1);
    }

    20% {
        transform: rotate(-10deg) scale(1.1);
    }

    60% {
        transform: rotate(10deg) scale(1.1);
    }
    
    90% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes open_img_ani{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
    
    100% {
        transform: scale(1);
    }
}

@keyframes open_popup_out_ani{
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}

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

    100% {
        opacity: 100%;
    }
}

.row {
    float: left;
    width: 100%;
}

.col-3 {
    float: left;
    width: 33.33%;
}

.dialpad {
    float: left;
    font-size: 24px;
    margin: auto;
    width: 100%;
    text-align: center;
    padding: 8px;
}

.dialpad-button {
    border-bottom: 1px solid #333333;
    padding: 8px 0;
    margin: 8px 16px;
}

.dialpad-erase {
    border: none;
    padding: 8px 0;
    margin: 0px 8px;
    display: block;
    background-color: #ffffff00;
    max-width: 100px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIGhlaWdodD0iODAwcHgiIHdpZHRoPSI4MDBweCIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiAKCSB2aWV3Qm94PSIwIDAgNDg5LjQyNSA0ODkuNDI1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMTIyLjgyNSwzOTQuNjYzYzE3LjgsMTkuNCw0My4yLDMwLjYsNjkuNSwzMC42aDIxNi45YzQ0LjIsMCw4MC4yLTM2LDgwLjItODAuMnYtMjAwLjdjMC00NC4yLTM2LTgwLjItODAuMi04MC4yaC0yMTYuOQoJCQljLTI2LjQsMC01MS43LDExLjEtNjkuNSwzMC42bC0xMTEuOCwxMjEuN2MtMTQuNywxNi4xLTE0LjcsNDAuMywwLDU2LjRMMTIyLjgyNSwzOTQuNjYzeiBNMjkuMTI1LDIzMy4wNjNsMTExLjgtMTIxLjgKCQkJYzEzLjItMTQuNCwzMi0yMi42LDUxLjUtMjIuNmgyMTYuOWMzMC43LDAsNTUuNywyNSw1NS43LDU1Ljd2MjAwLjZjMCwzMC43LTI1LDU1LjctNTUuNyw1NS43aC0yMTdjLTE5LjUsMC0zOC4zLTguMi01MS41LTIyLjYKCQkJbC0xMTEuNy0xMjEuOEMyMy4wMjUsMjQ5LjY2MywyMy4wMjUsMjM5LjY2MywyOS4xMjUsMjMzLjA2M3oiLz4KCQk8cGF0aCBkPSJNMjI1LjQyNSwzMDkuNzYzYzIuNCwyLjQsNS41LDMuNiw4LjcsMy42czYuMy0xLjIsOC43LTMuNmw0Ny44LTQ3LjhsNDcuOCw0Ny44YzIuNCwyLjQsNS41LDMuNiw4LjcsMy42czYuMy0xLjIsOC43LTMuNgoJCQljNC44LTQuOCw0LjgtMTIuNSwwLTE3LjNsLTQ3LjktNDcuOGw0Ny44LTQ3LjhjNC44LTQuOCw0LjgtMTIuNSwwLTE3LjNzLTEyLjUtNC44LTE3LjMsMGwtNDcuOCw0Ny44bC00Ny44LTQ3LjgKCQkJYy00LjgtNC44LTEyLjUtNC44LTE3LjMsMHMtNC44LDEyLjUsMCwxNy4zbDQ3LjgsNDcuOGwtNDcuOCw0Ny44QzIyMC43MjUsMjk3LjI2MywyMjAuNzI1LDMwNC45NjIsMjI1LjQyNSwzMDkuNzYzeiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPg==);
    background-size: contain;
    background-position-x: right;
    background-repeat: no-repeat;
}

.dialpad-input-panel {
    margin: 50px 8px;
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-top: 70px;
}

.dialpad-input-panel-col {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pin {
    font-size: 24px;
    /*36px;*/
    text-align: center;
    margin-bottom: 20px;
    padding: 36px 8px;
    line-height: 40px;
}

.dialpad-room-name {
  font-size: 24px;
  padding-bottom: 36px;
  padding-top: 20px;
}
.call-screen{
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    background-color: white;
    flex-direction: column;
    justify-content: space-between;
}

.call-screen-header{
    flex-shrink: 0;
}

.button-hang-up {
    background-color: rgb(212, 63, 58);
    border-radius: 16px;
    height: 48px;
    padding: 12px;
    width: 256px;
    margin: 16px auto;
}

.button-close {
    background-color: grey;
    border-radius: 16px;
    height: 48px;
    padding: 12px;
    width: 256px;
    margin: 16px auto;
}

.call-screen-button-img{
    margin: auto;
}


.chat-messages{
    height: 100%;
    overflow-y: scroll;
}

.chat-messages::-webkit-scrollbar{
	width: 12px;
	background-color: #F5F5F5;
}

.chat-messages::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.chat-messages::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--light);
}

.chat-message{ 
    min-height: 60px;
    margin: 10px;
    box-shadow: gray 5px 5px 0;
    border-radius: 10px;
    padding: 10px;
}

.chat-message-mine{
    background-color: var(--tab);
    color: #ffffff;
    margin-right: 60px;
}

.chat-message-theirs{
    background-color: lightgray;
    color: #000000;
    margin-left: 69px;
}

.chat-form{
    display: flex;
    padding: 10px;
    background-color: lightgray;
    border-top: 1px gray solid;
}

.chat-form-input{
    width: 100%;
    border: 1px gray solid;
    border-radius: 10px;
    padding: 10px;
}

.chat-form-submit{
    width: 30px;
    flex-shrink: 0;
}
.list-group {
    padding: 16px 0;
    width: 100%;
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 16px;
    width: 100%;
    align-items: center;
    margin: 5px 0px;
}

.text-center {
    text-align: center;
}

.button-phone {
    background-color: var(--call-color);
    border-radius: 50%;
    margin: 0 0;
    padding: 12px;
    border: none;
    display: block;
}

.button-phone-chat {
    background-color: var(--call-color);
}

.button-phone-call {
    background-color: var(--call-color);
}

.list-group-contacts {
    margin-top: 70px;
}

.call-or-chat {
    display: flex;
}

.phone-list-contact-label { 
    padding: '20px 0' 
}
.search-field {
    display: flex;
    justify-content: space-between;
    padding: 5px 16px;
    width: 100%;
    align-items: center;
    border: none;
    margin: 5px 0px;
}

.search-field-input {
    border: none;
    outline: none;
    padding: 7px 0;
    width: 100%;
}

.welcome_logo{
    display: block;
    width: 50%;
    margin: 100px auto 0% auto;
}

.welcome_message{
    display: block;
    margin: 30px auto 0% auto;
    text-align: center;
}
.notify-screen{
    flex-direction: column;
    justify-content: space-between;
}

.notify-form{
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.notify-form-input{
    width: 100%;
    border: 1px gray solid;
    border-radius: 3px;
    padding: 10px;
    display: block;
    max-width: 350px;
    margin: auto;
    resize: none;
}

.notify-form-input::placeholder{
    line-height: 30px;
}

.notify-form-button{
    width: 100%;
    flex-shrink: 0;
    background-color: var(--tab); 
    border-radius: 50px; 
    height: 50px;
    margin: 25px auto; 
    padding: 12px;
    border: none;
    display: block;
    color: #fff;
    max-width: 300px;
}

.notify-form-buttons{
    margin: 30px 0; 
}

.notify-form-submit{
    background-color: var(--tab); 
}

.notify-form-cancel{
    background-color: var(--red-button); 
}

.notify-form-submit:disabled{
    background-color: lightgray;
    color: grey; 
}

.notify-contact-label{
    font-weight:"bold"; 
    margin:'20px';
}

.notify-form-block{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.notify-screen-header{
    padding-top: 30px;
}
.globe_shadow{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0009;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: hidden;
}

.globe_panel{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: #fff4;
    border-bottom-left-radius: 32px;
}

.globe_button{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8bWV0YWRhdGE+IFN2ZyBWZWN0b3IgSWNvbnMgOiBodHRwOi8vd3d3Lm9ubGluZXdlYmZvbnRzLmNvbS9pY29uIDwvbWV0YWRhdGE+CjxnPjxnIHN0cm9rZT0iI2ZmZiIgZmlsbD0iI2ZmZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTExLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSI+PHBhdGggZD0iTTQyNDAsNDk2MC4zYy0xNDQyLTI1Mi0yNTcwLTk4OC0zMzU2LTIxODZjLTU0Ni04MzYtNzg0LTE2NTYtNzg0LTI3MDBjMC00NDgsNDAtNzcwLDE0OC0xMTk2YzE1Mi01OTYsNDM2LTExOTQsODE0LTE3MDJjNzE2LTk2NCwxNzk4LTE2NTIsMjk2OC0xODg0YzQwMi04MCw0ODgtODYsMTA1MC03OGM0OTQsOCw1NzgsMTQsODIwLDYyYzEwMjYsMjAyLDE4NDIsNjM0LDI1NzIsMTM2MmM3NDYsNzQ4LDExODAsMTU4NiwxMzc4LDI2NThjNDYsMjUwLDUwLDMyNiw1MCw4MDBjMCw0NjgtNiw1NTYtNTAsODA0Yy0xMjAsNjg4LTM5OCwxMzg2LTc4NCwxOTY2Yy00NzQsNzE0LTExMDYsMTI1NC0xOTM2LDE2NTZjLTc1OCwzNjYtMTMxMiw0OTAtMjE4MCw0ODZDNDU4NCw1MDA2LjMsNDQ2NCw0OTk4LjMsNDI0MCw0OTYwLjN6IE01MTI2LDQ2NjQuM2M3OC0zNCwyNDAtMjA2LDM1NC0zNzhjMjM4LTM2Miw0MzAtOTE2LDU5MC0xNzEwbDE0LTY2SDUwMDBjLTEwMjIsMC0xMDgyLDItMTA3MiwzNmM2LDE4LDQyLDE3OCw4MiwzNTRjMTQ0LDYyNiwzMDIsMTA2Miw0OTAsMTM1NkM0NzMyLDQ2MTYuMyw0OTI4LDQ3NDYuMyw1MTI2LDQ2NjQuM3ogTTQxMjAsNDI2Ni4zYy0yMjQtNDcyLTM1NC04NjQtNDcyLTE0MzZjLTMwLTEzOC02Mi0yNjYtNzItMjg0Yy0xNi0zNC02OC0zNi02NDYtMzZjLTM0NiwwLTYzMCw2LTYzMCwxMmMwLDYsNjAsMTI4LDEzMiwyNzBjMzIwLDYyOCw3MzIsMTEyMiwxMjA4LDE0NDRjMTUyLDEwNCw1NTAsMzE0LDU5NCwzMTRDNDI0Niw0NTUwLjMsNDE5Niw0NDIyLjMsNDEyMCw0MjY2LjN6IE02MDYyLDQ0MTAuM2M2MjAtMzEyLDExMDgtODM2LDE1MjAtMTYyOGwxNDItMjcyaC02NTBoLTY0OGwtMjQsMTI2Yy01MiwyNzYtMjA2LDg2MC0yOTIsMTExNGMtNTIsMTQ4LTE0OCwzODItMjE2LDUxOGMtNjgsMTM4LTEyNiwyNTYtMTMwLDI2NkM1NzU2LDQ1NTQuMyw1ODY4LDQ1MDYuMyw2MDYyLDQ0MTAuM3ogTTI5NDgsNDEwNC4zYy0zNzItMzkyLTYzNi03ODAtODg2LTEzMDRjLTU2LTEyMC0xMTgtMjM0LTEzNi0yNTRjLTI4LTMyLTc0LTM2LTQyMi0zNmgtMzg4bDQ0LDc0Yzk2LDE2MiwzNDAsNDY2LDU0MCw2NzRjMzY2LDM4MCw3MTQsNjQ0LDExNjAsODgwYzExNiw2MiwyMTQsMTEyLDIxOCwxMTJDMzA4Miw0MjUwLjMsMzAyNCw0MTg0LjMsMjk0OCw0MTA0LjN6IE03MjYwLDQwNzYuM2M2NDQtMzY0LDExNDAtODI4LDE1NzgtMTQ3Mmw2NC05NGwtNDA2LDRsLTQwNiw2bC03MCwxNDBjLTMzMiw2NzQtNTQ0LDk5Mi05NDIsMTQxOEM2OTAyLDQyNjYuMyw2OTI0LDQyNjYuMyw3MjYwLDQwNzYuM3ogTTE3OTAsMjEzNi4zYy00NC0xMTItMTk0LTc1Ni0yMjgtOTg2Yy0zOC0yNDgtODItNzA2LTgyLTg0MnYtNThIOTQ4SDQxOGwxMiwxMTZjODAsNzIwLDE2MiwxMDY4LDM3MCwxNTUwYzExOCwyNzQsNzQsMjU0LDU3NiwyNTRDMTc3NiwyMTcwLjMsMTgwNCwyMTY4LjMsMTc5MCwyMTM2LjN6IE0zNDk4LDIwODYuM2MwLTQ4LTMwLTQ3OC02NC05NTZsLTY0LTg3MGwtNzc4LTZsLTc3OC00bDE0LDIzNGMxNiwyODIsNzQsNzA0LDEzMCw5NjZjNzIsMzMwLDE2Niw2NDQsMjA2LDY4NGMzNCwzNCw4MiwzNiw2ODYsMzZoNjUwTDM0OTgsMjA4Ni4zeiBNNjE1OCwyMDE2LjNjNTgtNDEwLDEyMi0xMjQ0LDEyMi0xNjEwdi0xNTZINTAwMGMtNzA0LDAtMTI4MCw2LTEyODAsMTZjMTAsNTU4LDEwNCwxNzQ0LDE1MCwxODgwYzYsMTgsMjUyLDI0LDExMzgsMjRoMTEyOEw2MTU4LDIwMTYuM3ogTTc4NDYsMjEzNi4zYzM0LTQwLDE0OC00MzAsMjEyLTcyNmM1OC0yODAsMTAyLTYxNiwxMTYtOTA0bDEyLTI1NmgtNzcyaC03NzJsLTEwLDEwNmMtNiw1Ni0zNCw0MjgtNjIsODI0cy01Niw3ODAtNjIsODU2bC0xNCwxMzRoNjYwQzc3NTYsMjE3MC4zLDc4MTYsMjE2Ni4zLDc4NDYsMjEzNi4zeiBNOTA4NCwyMTM2LjNjODgtMTAwLDI1Ni01MjYsMzQ2LTg3NGM3MC0yNzAsMTE2LTU2MCwxNDAtODQ2bDEyLTE2NmgtNTI4aC01MjhsLTEyLDI0NmMtMjQsNDcwLTExMCw5ODYtMjQyLDE0NDBsLTY4LDIzNGg0MjZDOTAwOCwyMTcwLjMsOTA1OCwyMTY2LjMsOTA4NCwyMTM2LjN6IE0xNDkwLTI2My43YzM4LTUyOCwxMTQtOTk0LDIzMC0xNDA2YzQyLTE0OCw4NC0yODYsOTAtMzA2YzE0LTMyLTEyLTM0LTQyMi0zMGwtNDM4LDZsLTY0LDEyMGMtMTQ4LDI3OC0zMjgsODIyLTM4NCwxMTYwYy0zNiwyMDgtNzgsNTk4LTY4LDYxNmM0LDgsMjQyLDE0LDUyNiwxNGg1MTZMMTQ5MC0yNjMuN3ogTTM0MzItOTI5LjdjMzYtNDU2LDcwLTg4Niw3Ni05NTRsMTAtMTI2aC02NTZjLTUzMCwwLTY2Miw2LTY4MCwyOGMtNjAsNzItMjAyLDU5Mi0yNzIsMTAwMmMtNTIsMzA4LTEwMCw4MTItODIsODYwYzEwLDI2LDEwOCwzMCw3NzYsMjZsNzY2LTZMMzQzMi05MjkuN3ogTTYyODAtMjIzLjdjLTItMzU2LTY2LTExODItMTI2LTE2MDZsLTI0LTE3MGwtMTExNi02bC0xMTE0LTRsLTIwLDQ0Yy0xMCwyNi01MCw0MTAtOTAsODU2cy03OCw4NTgtODQsOTE2bC0xMiwxMDRoMTI5NGgxMjkyVi0yMjMuN3ogTTgxNzItMzE5LjdjLTE0LTI3MC01NC01NzYtMTE0LTg3MGMtNTYtMjgwLTE5Mi03NDItMjMyLTc4NGMtMzAtMzQtODYtMzYtNjgwLTM2aC02NDZ2NjRjMCw3NiwxMTQsMTYwMCwxMzIsMTc1MmwxMCwxMDRoNzcyaDc3Mkw4MTcyLTMxOS43eiBNOTU4MC0xMzkuN2MwLTEwNi0xMDQtNzQwLTE1MC05MTZjLTg4LTMzOC0yODItODI4LTM2NC05MThjLTMwLTMyLTc0LTM2LTQ1Ni0zNmgtNDI0bDY0LDIxNmMxMzQsNDQyLDIzNiwxMDA4LDI2MiwxNDcwbDE0LDIzNGg1MjZoNTI4Vi0xMzkuN3ogTTE5NDQtMjM4My43YzE4LTIwLDk0LTE2MiwxNzItMzE2YzIyOC00NDgsNDc2LTgwNiw4MDItMTE1NGM4MC04NiwxMzQtMTU2LDEyMi0xNTZjLTM2LDAtMzQwLDE2Ni01NDAsMjk2Yy0zNTAsMjI2LTY2MCw0OTQtOTIyLDc5NmMtMTc2LDIwMi00MTgsNTIyLTQxOCw1NTJjMCw4LDE3MCwxNiwzNzYsMTZDMTg3MC0yMzQ5LjcsMTkxOC0yMzUzLjcsMTk0NC0yMzgzLjd6IE04ODQ4LTIzNzMuN2MtOC0xNC04OC0xMjYtMTgwLTI0OGMtNDAyLTU0NC05NzItMTAzMC0xNTc2LTEzNDBjLTIxMi0xMTAtMjE2LTEyMCw5MCwyMjBjMzIwLDM1NCw1MzQsNjcyLDczNCwxMDkyYzYwLDEyNiwxMjQsMjQ2LDE0MCwyNjZjMjYsMzAsNzQsMzQsNDE4LDM0Qzg3ODAtMjM0OS43LDg4NjAtMjM1NS43LDg4NDgtMjM3My43eiBNMzYyOC0yNTMzLjdjMTM2LTYzOCwyOTAtMTEyMCw0ODItMTUwOGMxNTgtMzE4LDE2MC0zMDgtNTgtMjA4Yy02NjgsMzAwLTEyMzgsODk4LTE2NjIsMTczOGwtNzAsMTQyaDYzNmg2MzhMMzYyOC0yNTMzLjd6IE02MDYwLTIzOTMuN2MwLTE0LTIyLTEyNC01MC0yNDZjLTE4Mi04MTItNDE2LTEzNjYtNzAwLTE2NjBjLTE4Ni0xOTItMzM0LTIxOC01MjAtOTBjLTI5MiwyMDItNTk4LDg2Ni03NzgsMTY5MGMtMzAsMTMyLTU4LDI2MC02MiwyODZsLTEwLDQ0aDEwNjBDNTgzNC0yMzY5LjcsNjA2MC0yMzc1LjcsNjA2MC0yMzkzLjd6IE03NjYyLTI0MTMuN2MtMjgtNzYtMjQwLTQ1Ni0zMzYtNjA2Yy0xNDgtMjI4LTMzMC00NDgtNTM4LTY1MmMtMjE2LTIxMC0zNTQtMzE2LTU4Ni00NTRjLTE0OC04OC00NDQtMjI4LTQ1OC0yMTZjLTQsNCw2MCwxMzgsMTQyLDI5OGMxNzYsMzQ0LDI3Niw2MzYsNDE0LDEyMDRjNTYsMjMyLDEwNiw0MzIsMTEwLDQ0NmM2LDE4LDE1MiwyNCw2MzgsMjRoNjMyTDc2NjItMjQxMy43eiIvPjwvZz48L2c+Cjwvc3ZnPg==);
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    border: none;
    background-color: transparent;
}

.globe_list{
    position: absolute;
    top: 70px;
    right: 0px;
    margin: 0;
    background-color: #fff;
    list-style: none;
    width: 100%;
    max-width: 300px;
    padding: 16px;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}

.globe_list_in{
    animation: globe_panel_in_ani 200ms forwards;
}

.globe_list_out{
    animation: globe_panel_out_ani 200ms forwards;
}

@keyframes globe_panel_in_ani{
    0%{
        transform: translate(100%, 0);
    }

    100%{
        transform: translate(0, 0);
    }
}

@keyframes globe_panel_out_ani{
    0%{
        transform: translate(0, 0);
    }

    100%{
        transform: translate(100%, 0);
    }
}


.globe_list_hidden{
    display: none;
}

.globe_item{
    margin: 20px 0px;
    padding: 15px 5px;
}

.globe_item::marker{
    display: none;
}

.globe_item_selected{
    background-color: var(--tab);
    color: white;
}