.ptt_box {
    position: relative;
    width: 100%;
    height: 100svh;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.main_frame {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;

}

.main_frame .participants_box {
    width: 25%;
    height: 100%;
    padding: 20px;
}

.main_frame .participants_box .card {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
}

.participants_box .parti_list {
    position: relative;
    width: 100%;
    height: calc(100% - 54px);
    flex-direction: column;
    /* gap: 10px; */
    overflow: auto;
    padding-top: 30px;
}

.participants_box .participants_title {
    position: relative;
    width: 100%;
    height: 38px;
    font-size: 14px;
    font-family: 'vazir';
    color: white;
    text-align: center;
    background-color: #00000045;
    padding-top: 9px;
    border-radius: 5px;
}

.participants_box .participants_title .back {
    position: absolute;
    right: 10px;
    width: 25px;
    height: 25px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../images/ptt/back.png");
    top: 7px;
    display: none;
}

.participants_box .parti_list .parti_item {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-radius: 8px;
}

.participants_box .parti_list .parti_item:not(:last-child) {
    /*border-bottom: 1px solid #00000012;*/
}


.participants_box .parti_list .parti_item .ptt_button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 3px solid rgb(255 255 255 / 42%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.68);
    transition: 0.3s;
    cursor: pointer;
}

.participants_box .parti_list .parti_item .disabled_ptt_button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 3px solid #ffffff17;
    box-shadow: inset 0 0 24px #ffffff1f;
    transition: 0.3s;
    cursor: pointer;
}

.participants_box .parti_list .parti_item .ptt_button:active {
    border-color: #41d6e35c;
    box-shadow: inset 0 0 15px #41d6e39e;
}

.participants_box .parti_list .parti_item .ptt_button .icon {
    width: 30px;
    height: 30px;
    background-image: url("../../images/ptt/ear.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.participants_box .parti_list .parti_item .disabled_ptt_button .icon {
    width: 30px;
    height: 30px;
    background-image: url("../../images/ptt/ear.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.participants_box .parti_list .parti_item .parti_name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    font-family: vazir;
    font-size: 16px;
}

.participants_box .parti_list .parti_item .hand {
    width: 24px;
    height: 24px;
    background-image: url("../../images/ptt/hand.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.participants_box .parti_list .parti_item .ear {
    width: 22px;
    height: 22px;
    background-image: url("../../images/ptt/ear_mute.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.participants_box .parti_list .parti_item .mute {
    width: 20px;
    height: 20px;
    background-image: url("../../images/ptt/speaker_mute.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.main_frame .chat_box {
    width: 25%;
    height: 100%;
    padding: 20px;
}

.main_frame .chat_box .card {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main_frame .home_box {
    width: 50%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.main_frame .home_box .buttons_box {
    position: relative;
    width: max-content;
    height: 90px;
    display: flex;
    justify-content: center;
    gap: 5px;
}


.main_frame .home_box .buttons_box .btn_card {
    width: 78px;
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.main_frame .home_box .buttons_box .btn_card button {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

.main_frame .home_box .buttons_box .btn_card .speaker_icon {
    background-image: url("../../images/ptt/speaker.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
}

.main_frame .home_box .buttons_box .btn_card .mute_speaker_icon {
    background-image: url("../../images/ptt/speaker_mute.png") !important;
}

.main_frame .home_box .buttons_box .btn_card .ear_icon {
    background-image: url("../../images/ptt/ear.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 56% 56%;
}

.main_frame .home_box .buttons_box .btn_card .mute_ear_icon {
    background-image: url("../../images/ptt/ear_mute.png") !important;
}

.main_frame .home_box .buttons_box .btn_card .hand_icon {
    background-image: url("../../images/ptt/hand.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60%;
}

.main_frame .home_box .buttons_box .btn_card .sounds_icon {
    background-image: url("../../images/ptt/sounds_on.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60%;
}

.main_frame .home_box .buttons_box .btn_card .settings_icon {
    background-image: url("../../images/ptt/settings.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 59% 59%;
}

.main_frame .home_box .buttons_box .btn_card .sos_icon {
    background-image: url("../../images/ptt/sos.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 69% 60%;
}

.main_frame .home_box .buttons_box .btn_card .sounds_off_icon {
    background-image: url("../../images/ptt/sounds_off.png") !important;
}

.main_frame .home_box .buttons_box .btn_card .hangup_icon {
    background-image: url("../../images/ptt/leave.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 54% 54%;
    background-color: rgba(255, 0, 0, 0.43);
}

.main_frame .home_box .buttons_box .btn_card .record_icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
}

.main_frame .home_box .buttons_box .btn_card .record_inactive {
    background-image: url("../../images/ptt/record.png");
}

.main_frame .home_box .buttons_box .btn_card .record_active {
    background-image: url("../../images/ptt/stop_record.png");
}

.main_frame .home_box .buttons_box .btn_card .caption {
    width: 100%;
    height: 20px;
    font-size: 12px;
    color: white;
    text-align: center;
    font-family: vazir;
    letter-spacing: 1px;
}


.mute_active {
    background-color: rgba(255, 0, 0, 0.43) !important;
}


.main_frame .home_box .ptt_button {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 3px solid #ffffff17;
    box-shadow: inset 0 0 24px #ffffff1f;
    transition: 0.3s;
    cursor: pointer;
    outline: none !important;
}

.main_frame .home_box .ptt_button_active {
    border-color: #5e8862;
    box-shadow: inset 0 0 45px #6ea174;
}

.main_frame .home_box .ptt_button_disabled {
    border: 3px solid rgb(213 106 30 / 62%);
    box-shadow: inset 0px 0px 50px rgb(225 107 22);
    cursor: not-allowed;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: 0.3s;
    outline: none !important;
}

.main_frame .home_box .ptt_button_i_speak {
    border: 3px solid;
    border-color: #41d6e35c !important;
    box-shadow: inset 0 0 45px #41d6e39e !important;
    cursor: pointer;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: 0.3s;
    outline: none !important;
}

.main_frame .home_box .ptt_button .icon {
    width: 100px;
    height: 100px;
    background-image: url("../../images/ptt/wt.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.main_frame .home_box .ptt_button_disabled .icon {
    width: 100px;
    height: 100px;
    background-image: url("../../images/ptt/wt.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.main_frame .home_box .ptt_button_i_speak .icon {
    width: 100px;
    height: 100px;
    background-image: url("../../images/ptt/wt.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.border_7 {
    border-width: 7px !important;
}

.border_15 {
    border-width: 15px !important;
}

.border_20 {
    border-width: 20px !important;
}

.border_25 {
    border-width: 25px !important;
}

.border_30 {
    border-width: 30px !important;
}


.main_frame .home_box .speaking {
    color: white;
    font-weight: bold;
    font-size: 15px;
    font-family: inter_regular;
    height: 30px;
}

.main_frame .home_box .top_part {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.main_frame .home_box .top_part .my_name {
    font-size: 15px;
    font-family: vazir;
    color: white;
    text-align: right;
    line-height: 50px;
    top: 2px;
    position: relative;
}

.main_frame .home_box .top_part .change_channel_box {
    position: relative;
    width: 180px;
    height: 50px;
    background: #ffffff1f;
    border-radius: 10px;
    cursor: pointer;
}

.main_frame .home_box .top_part .map_btn {
    position: relative;
    width: 50px;
    height: 50px;
    background: #ffffff1f;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    transition: 0.3s;
}

.main_frame .home_box .top_part .map_btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.main_frame .home_box .top_part .map_btn .map_icon {
    position: absolute;
    width: 69%;
    height: 65%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../images/ptt/map.png");
    opacity: 0.9;
}

.main_frame .home_box .top_part .map_btn .chat_icon {
    position: absolute;
    width: 73%;
    height: 75%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../images/ptt/chat.png");
    opacity: 0.9;
}

.main_frame .home_box .top_part .map_btn .party_icon {
    position: absolute;
    width: 62%;
    height: 64%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../images/ptt/party.png");
    opacity: 0.9;
}




.main_frame .home_box .top_part .change_channel_box .icon {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 9px;
    top: 13px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../images/channel/antenna.png);
    opacity: 0.9;
}

.main_frame .home_box .top_part .change_channel_box .caption {
    position: absolute;
    left: 34px;
    top: 2px;
    font-size: 13px;
    color: white;
    font-family: vazir;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    white-space: nowrap;
}

.main_frame .home_box .top_part .change_channel_box .arrow {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 14px;
    top: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../../images/channel/down.png');
    opacity: 0.9;
}

.chat_box .chatting_title {
    position: relative;
    width: 100%;
    height: 38px;
    font-size: 14px;
    font-family: 'vazir';
    color: white;
    text-align: center;
    background-color: #00000045;
    padding-top: 9px;
    border-radius: 5px;
}

.chat_box .chatting_title .back {
    position: absolute;
    right: 10px;
    width: 25px;
    height: 25px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../images/ptt/back.png");
    top: 5px;
    display: none;
}

.chat_box .chat_list {
    position: relative;
    width: 100%;
    height: calc(100% - 54px);
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    padding-top: 10px;
}

.chat_box .write_message {
    background-color: rgb(0 0 0 / 22%);
    height: 63px;
    width: 100%;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}


.chat_box .write_message textarea {
    background-color: transparent;
    font-size: 13px;
    border: none;
    outline: none;
    width: calc(100% - 44px);
    resize: none;
    color: white;
    height: 100%;
    font-family: vazir;
}

.chat_box .write_message .send_btn {
    background-color: #638b68;
    font-size: 13px;
    border: none;
    outline: none;
    width: 41px;
    resize: none;
    color: white;
    max-height: 90%;
    border-radius: 8px;
    background-image: url("../../images/ptt/send.png");
    background-position: center;
    background-size: 37% 54%;
    background-repeat: no-repeat;
    /* margin-top: 3px; */
    height: 49px;
    cursor: pointer;
    transition: 0.15s;
}

.chat_box .write_message .send_btn:active {
    background-color: #3c5940;
}


.chat_box .chat_list .message {
    width: 80%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
    gap: 15px;
}

.chat_box .chat_list .message .name_time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.chat_box .chat_list .message .name_time .name {
    font-size: 13px;
    font-family: vazir;
}

.chat_box .chat_list .message .name_time .time {
    font-size: 13px;
    color: rgba(180, 180, 180, 0.82);
    font-family: vazir;
}

.chat_box .chat_list .message .msg {
    font-size: 11px;
    line-height: 20px;
    color: white;
    word-wrap: break-word;
    font-family: vazir;
}


.chat_box .chat_list .left {
    float: left !important;
    background-color: #e2e2e217;
    border-bottom-left-radius: 0;
    color: rgba(70, 198, 231, 0.82);
}

.chat_box .chat_list .right {
    float: right !important;
    background-color: #00000029;
    border-bottom-right-radius: 0;
    color: rgba(70, 198, 231, 0.82);
}


.side_buttons {
    position: absolute;
    width: 39px;
    height: 200px;
    top: -100px;
    bottom: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    display: none;
    transition: 0.2s;
}

.hide_side_buttons {
    right: -50px !important;
}

.side_buttons .chat_button {
    position: absolute;
    width: 30px;
    height: 100px;
    background-color: rgb(122 149 173 / 62%);
    margin: auto;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    right: 0;
}

.side_buttons .chat_button .caption {
    position: absolute;
    text-align: center;
    transform: rotate(-90deg);
    color: white;
    font-size: 12px;
    font-family: inter_regular;
    left: -7px;
    top: 42px;
}

.side_buttons .parti_button {
    position: absolute;
    width: 30px;
    height: 100px;
    top: 102px;
    background-color: rgb(122 149 173 / 62%);
    margin: auto;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    right: 0;
}

.side_buttons .parti_button .caption {
    position: absolute;
    text-align: center;
    transform: rotate(-90deg);
    color: white;
    font-size: 12px;
    font-family: inter_regular;
    left: -16px;
    top: 42px;
}

.change_channel_box .channels_list {
    position: absolute;
    width: 100%;
    height: max-content;
    background-color: #00000045;
    border-radius: 10px;
    padding: 5px 5px;
    margin-bottom: 15px;
    display: none;
    top: 55px;
    z-index: 1;
}

.change_channel_box .channels_list .item {
    width: 100%;
    line-height: 40px;
    font-family: inter_regular, serif;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    padding: 5px 19px;
}

.change_channel_box .channels_list .item:hover {
    background-color: var(--input-card);
}

.change_channel_box .channels_list .item:nth-child(1) {
    border-radius: 5px 5px 0px 0px;
}

.change_channel_box .channels_list .item:last-child {
    border-radius: 0px 0px 5px 5px;
}

.change_channel_box .channels_list .item:not(:last-child) {
    border-bottom: 1px solid #ffffff0a;
}


.notif_box {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 350px;
    height: max-content;
    bottom: 140px;
    max-height: 200px;
    overflow: auto;
}

.notif_box .hand_item {
    position: relative;
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
    height: 35px;
    padding: 0px 5px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin-bottom: 3px;
    cursor: pointer;
}

.notif_box .hand_item .icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/hand.png");
    background-size: 100% 100%;
}

.notif_box .hand_item .msg_icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/message.png");
    background-size: 100% 100%;
}

.notif_box .hand_item .enter_icon {
    width: 20px;
    height: 19px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/enter.png");
    background-size: 100% 100%;
}

.notif_box .hand_item .leave_icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/leave.png");
    background-size: 100% 100%;
}

.notif_box .hand_item .cross_icon {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/cross.png");
    background-size: 100% 100%;
    position: absolute;
    right: 5px;
    top: 4px;
}

.notif_box .hand_item .text {
    width: calc(100% - 70px);
    font-family: vazir;
    font-size: 13px;
    line-height: 35px;
    color: #ffffff;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.no_chat {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 30%;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/no_chat.png");
    background-size: 100% 100%;
}

.no_user {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 30%;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/no_user.png");
    background-size: 100% 100%;
}

.settings_over {
    background-color: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}

.settings_over .settings_box {
    position: absolute;
    width: 400px;
    height: 300px;
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.settings_over .settings_box .close {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 25px;
    height: 25px;
    background-image: url("../../images/ptt/cross.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    cursor: pointer;
}

.settings_over .settings_box .title {
    font-size: 15px;
    font-family: inter_regular;
    color: #555555;
    position: absolute;
    left: 16px;
    top: 15px;
}

.settings_over .settings_box .settings_label {
    font-size: 14px;
    font-family: inter_regular;
    color: #555555;
}

.settings_over .settings_box .sos_timer_input {
    border: none;
    background-color: #5555551a;
    padding: 5px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

.sos_over {
    background-color: rgb(0 0 0 / 56%);
    backdrop-filter: blur(30px);
    position: fixed;
    z-index: 4;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}

.sos_over .sos_box {
    position: absolute;
    width: 442px;
    height: 100svh;
    border-radius: 10px;
    padding: 16px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* text-align: justify; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.sos_over .sos_box .title {
    width: 100%;
    font-size: 23px;
    color: #ffffff;
    font-family: inter_bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.sos_over .sos_box .title .sos_icon {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/sos4.png");
}

.sos_over .sos_box .text_desc {
    width: 100%;
    font-size: 16px;
    color: #ffffff;
    font-family: vazir;
    line-height: 35px;
    text-align: justify;
}

.sos_over .sos_box .text_desc span {
    font-family: inter_bold;
    font-size: 25px;
    color: indianred;
}

.sos_over .sos_box .counter_box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sos_over .sos_box .counter_box .counter {
    font-size: 14rem;
    color: indianred;
    font-family: inter_bold;
    text-shadow: -5px -5px 0 white, /* Top-left shadow */ 5px -5px 0 white, /* Top-right shadow */ -5px 5px 0 white, /* Bottom-left shadow */ 5px 5px 0 white, /* Bottom-right shadow */ 0px -5px 0 white, /* Top shadow */ -5px 0px 0 white, /* Left shadow */ 5px 0px 0 white, /* Right shadow */ 0px 5px 0 white; /* Bottom shadow */
}

.sos_over .sos_box .counter_box .counter2 {
    font-size: 3rem !important;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff !important;
    color: white;
}

.sos_over .sos_box .counter_box .sos_man {
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/sos3.png");
}

.sos_over .sos_box .cancel_button {
    width: 240px;
    height: 68px;
    line-height: 35px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background-color: rgb(134 175 136 / 59%);
    color: white;
    font-size: 25px;
    font-family: inter_regular;
}


.show_sos_over {
    background-color: rgb(225 81 81);
    /* backdrop-filter: blur(30px); */
    position: fixed;
    z-index: 3;
    width: 400px;
    height: 177px;
    left: 0;
    right: 0;
    top: 118px;
    margin: auto;
    border-radius: 10px;
    padding: 15px;
    display: none;
}

.show_sos_over .title {
    font-size: 20px;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 2px #555555;
    font-family: inter_regular;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
}

.show_sos_over .title .sos_icon {
    width: 36px;
    height: 37px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/ptt/sos2.png");
}

.show_sos_over .text_desc {
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 2px #555555;
    font-family: inter_regular;
    margin-top: 30px;
}

.leave_box {
    width: 100%;
    height: 100%;
    background-color: #313b2f;
    left: 0;
    top: 200px;
    position: absolute;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    font-family: inter_regular;
    transition: 0.5s;
    gap: 16px;
}

.leave_box .leave_btn {
    width: 63px;
    height: 32px;
    line-height: 25px;
    padding: 4px 3px;
    background-color: indianred;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.leave_box .cancel_btn {
    width: 63px;
    height: 32px;
    line-height: 25px;
    padding: 4px 3px;
    background-color: #919191;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.map_box_kadr {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100svh;
    display: none;
    overflow: hidden !important;
}

.map_box {
    position: fixed;
    background-color: #1c1c1c;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100svh;
}

.custom-marker {
    position: relative;
    width: max-content;
    width: max-content;
    min-width: 80px;
    height: auto;
    padding: 0px 10px 0px 15px;
    border-radius: 10px;
    /*background-color: #3c5940;*/
    border: solid 5px #ffffff;
    border-left-width: 0px;
    text-align: center;
    font-size: 13px;
    font-family: inter_regular;
    color: white;
    transition: 0.4s;
    transform: scale(0, 0);
    box-shadow: 0 0 5px black;
}

.you-custom-marker {
    position: relative;
    width: max-content;
    width: max-content;
    min-width: 80px;
    height: auto;
    padding: 0px 10px 0px 15px;
    border-radius: 10px;
    background-color: #b56f9a;
    border: solid 5px #ffffff;
    border-left-width: 0px;
    text-align: center;
    font-size: 13px;
    font-family: inter_regular;
    color: white;
    transition: 0.4s;
    transform: scale(0, 0);
    box-shadow: 0 0 5px black;
}

.custom-marker .icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -11px;
    left: -28px;
    border-radius: 100%;
    /*background-color: #3c5940;*/
    border: solid 4px white;
    box-shadow: 0px 0px 5px black;
    background-position: center;
    background-size: 55% 53%;
    background-repeat: no-repeat;
    background-image: url('../../images/ptt/mini_bisim.png');
}

.you-custom-marker .icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -11px;
    left: -28px;
    border-radius: 100%;
    background-color: #b56f9a;
    border: solid 4px white;
    box-shadow: 0px 0px 5px black;
    background-position: center;
    background-size: 55% 53%;
    background-repeat: no-repeat;
    background-image: url('../../images/ptt/mini_bisim.png');
}

.default_scale {
    transform: scale(1, 1);
}

.close_map {
    z-index: 999;
    background-color: #ffffff;
    position: fixed;
    right: 14px;
    top: 14px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 0 0 0px #5889a0;
    border: solid 6px #c6d0d5;
    background-image: url('../../images/ptt/cross_green.png');
    background-repeat: no-repeat;
    background-position: center;
}

.recenter_map {
    z-index: 999;
    background-color: #ffffff;
    position: fixed;
    right: 14px;
    bottom: 27px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 0 0 0px #5889a0;
    border: solid 6px #c6d0d5;
    background-image: url('../../images/ptt/recenter.png');
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.map_speaking {
    position: absolute;
    z-index: 999;
    /* margin: 50px auto; */
    width: max-content;
    min-width: 200px;
    text-align: center;
    /* height: 50px; */
    line-height: 32px;
    padding: 5px 10px;
    font-size: 16px;
    margin: auto;
    left: 0;
    right: 0;
    top: 14px;
    color: #3c7f91;
    background-color: white;
    border-radius: 48px;
    box-shadow: 0 0 19px 8px #5a8498;
    border: solid 3px #98b9ca;
}

.map_speaking_whisper {
    border: 3px solid rgb(213 106 30 / 62%) !important;
    box-shadow: inset 0px 0px 50px rgb(225 107 22) !important;
}

.map_ptt_btn {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 50px;
    width: 130px;
    height: 130px;
    background-color: #2C3E50;
    border: solid 10px #455c73;
    border-radius: 100%;
    z-index: 999;
    background-image: url('../../images/ptt/wt.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55% 55%;
    cursor: pointer;
    box-shadow: inset 0 0 0 #455c73,0px 0px 22px #0b0e10;
    transition: 0.3s;
}

.map_ptt_btn_active {
    border: solid 15px #455c73;
}

#chat_btn{
    display: none;
}

#participants_btn{
    display: none;
}



.leaflet-control-layers-toggle {
    background-color: #333333 !important;
}


.color_1 {
    background-color: #2F4F59;
}

/* Deep Teal */
.color_2 {
    background-color: #4E5C68;
}

/* Charcoal Gray */
.color_3 {
    background-color: #7A5A3C;
}

/* Coffee Brown */
.color_4 {
    background-color: #8A2E6D;
}

/* Purple */
.color_5 {
    background-color: #5C6E5B;
}

/* Olive Green */
.color_6 {
    background-color: #5D2F2F;
}

/* Burgundy */
.color_7 {
    background-color: #3F5B63;
}

/* Muted Teal */
.color_8 {
    background-color: #2C3E50;
}

/* Midnight Blue */
.color_9 {
    background-color: #6A4E93;
}

/* Dark Orchid */
.color_10 {
    background-color: #4A5D66;
}

/* Dark Slate Green */
.color_11 {
    background-color: #8B4513;
}

/* Saddle Brown */
.color_12 {
    background-color: #7F3A02;
}

/* Dark Orange */
.color_13 {
    background-color: #9A7D6E;
}

/* Earthy Brown */
.color_14 {
    background-color: #5A3D5C;
}

/* Deep Purple */
.color_15 {
    background-color: #4D4A28;
}

/* Olive Drab */
.color_16 {
    background-color: #6B5B3C;
}

/* Burnt Sienna */
.color_17 {
    background-color: #3D3C3A;
}

/* Dark Gray */
.color_18 {
    background-color: #7F8C8D;
}

/* Concrete Gray */
.color_19 {
    background-color: #4A6A5B;
}

/* Pine Green */
.color_20 {
    background-color: #6A2E6B;
}

/* Rich Purple */
.color_21 {
    background-color: #3A5A40;
}

/* Dark Green */
.color_22 {
    background-color: #B17F51;
}

/* Deep Yellow Ochre */
.color_23 {
    background-color: #8B3A3A;
}

/* Maroon */
.color_24 {
    background-color: #5A6D7C;
}

/* Slate Blue */
.color_25 {
    background-color: #4B4F46;
}

/* Army Green */
.color_26 {
    background-color: #4E5C3B;
}

/* Fern Green */
.color_27 {
    background-color: #B25C40;
}

/* Rustic Red */
.color_28 {
    background-color: #2F4F4F;
}

/* Jungle Green */
.color_29 {
    background-color: #3C4C4A;
}

/* Darker Forest Green */
.color_30 {
    background-color: #4C5D52;
}

/* Greenish Gray */
.color_31 {
    background-color: #6F4F37;
}

/* Chestnut Brown */
.color_32 {
    background-color: #3F4A48;
}

/* Deep Blue Green */
.color_33 {
    background-color: #5C6B56;
}

/* Khaki Green */
.color_34 {
    background-color: #4D6269;
}

/* Dusty Blue */
.color_35 {
    background-color: #8F2A4B;
}

/* Dark Crimson */
.color_36 {
    background-color: #5F4A7A;
}

/* Plum */
.color_37 {
    background-color: #3D5A50;
}

/* Deep Sea Green */
.color_38 {
    background-color: #7A6E38;
}

/* Olive Brown */
.color_39 {
    background-color: #5D4E5D;
}

/* Soft Purple */
.color_40 {
    background-color: #8A6D3B;
}

/* Golden Brown */
.color_41 {
    background-color: #504B3D;
}

/* Olive Gray */
.color_42 {
    background-color: #7F5B34;
}

/* Caramel */
.color_43 {
    background-color: #4C3B37;
}

/* Earth Brown */
.color_44 {
    background-color: #3A4F52;
}

/* Dark Slate Blue */
.color_45 {
    background-color: #5A7A4E;
}

/* Avocado Green */
.color_46 {
    background-color: #4E6B5F;
}

/* Seaweed Green */
.color_47 {
    background-color: #8A4B39;
}

/* Spicy Brown */
.color_48 {
    background-color: #9B6A4F;
}

/* Warm Earth */
.color_49 {
    background-color: #5F6A5C;
}

/* Olive Drab Green */
.color_50 {
    background-color: #6F4F4B;
}

/* Walnut Brown */