html,
body,
div[data-test="userListContent"],
#layout .wuKs{
    background: rgb(34 78 81)!important;
}
html{
    width: 100%;
    height:100%;
}
:root{
    --color-gray-label : #000!important;
    --color-gray :#000!important;
    --emphasized-message-background-color: #ffffff69 !important;

}
.chat-message-content{
    background-color: #ffffff69 !important;
    width: calc(100% - 4px);
}
button[data-test="helpListenOnlyBtn"]{
background: #a1ff56;
    border: 1px solid black;  
}
div[data-test="userListItemCurrent"] > div{
    background-size: cover!important;
    background-position: center!important;
}
#presentationToolbarWrapper{
    background: linear-gradient(49deg, rgba(255,255,255,.44) 50%, rgba(255,255,255,.32) 44%)!important;
}
#presentationToolbarWrapper > div{
    background: transparent!important;
}
div[data-test="userListContent"],
#layout .wuKs{
    box-shadow: 0 0 1px #000;
}
div[data-test="userListContent"] > div,
div[data-test="userListContent"] > div > div[role="tabpanel"],
div[data-test="userListContent"]   div[role="list"] > ul > li,
#layout .wuKs:before,
#layout .wuKs:before
{
    background: rgb(255 255 255 / 25%);
}
div[data-test="userListContent"]   div[role="list"] > ul{
    background: transparent;
}
div[data-test="userListContent"]   div[role="list"] > ul > li{
    margin-left: 0;
    padding-bottom: 0;
    padding-top: revert-layer;
    border-bottom: 1px solid #aaa;
}
div[data-test="chatMessageItem"] > div:first-of-type > div:first-of-type{
    padding-left: 5px;
}

@media(min-width: 450px){
    #layout div[data-test="timer"]{
        background: rgb(255 255 255 / 25%);
    }
}
/*
.tl-image{
    object-fit: contain;
    background-size: contain;
    width: 100%;
    height: 100%;
    object-position: center;
    background-repeat: no-repeat;
}
*/
#WhiteboardOptionButton{
    border: 1px solid #000;
    border-right: none;
    height: 35px;
    border-radius: 0;
}
#WhiteboardOptionButton button{

}
button[data-test="hidePrivateChat"]{
    background: transparent!important;
}
#chat-list{
    background: transparent!important;
}
.lable-error-mm{
    display: none;
    transition: .3s all;
    position: absolute;
    top: -25px;
    font-size: 12px;
    background: white;
    border-radius: 7px;
    color: #222!important;
    padding: 4px 10px;
    margin-right: -12px;
    box-shadow: 0 2px 2px 0 rgb(255 152 0 / 14%), 0 3px 1px -2px rgb(255 152 0 / 20%), 0 1px 5px 0 rgb(255 152 0 / 12%);

    animation: flash 3s infinite;
    -webkit-animation:flash 3s infinite;
}

@keyframes error-label-anim {
    0% {
        transform: translate3d(0,0,0);
    }
    35% {
        transform: translate3d(3px,12px,0);
    }
    75% {
        transform: translate3d(-3px,12px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}
#WhiteboardOptionButton > div{
    border-radius: 30px!important;
    padding: 2px 2px!important;
    width: unset!important;
}
.mm-caution-bt:hover .lable-error-mm{
    display:block;
}
.mm-caution.active + .lable-error-mm {
    display: block;
}
@media (max-width:450px){

    #presentationToolbarWrapper{
        padding: 0!important;
        margin: 0!important;
        font-size: 12px!important;
    }
    #fakeMic,.mm-caution-bt{
        width: 47px;
        height: 47px;
    }

}
div[data-test="networkDataContainer"]{
    padding: 0!important;
    background: transparent!important;
}
div[data-test="networkDataContainer"] > div:first-of-type > div:first-of-type{
    background: transparent!important;
}

button[data-test="prevSlide"] > span:first-of-type,button[data-test="nextSlide"]> span:first-of-type{

    padding: 5px!important;
    color: white;
    border: 1px solid white;
    transition: .3s all;
}

ul.MuiList-root li[data-test="aboutModal"]{
    display: none;
}


button[data-test="prevSlide"] ,button[data-test="nextSlide"]{
    border-radius: 50%;
    background-color: #00bcd4!important;
    border-color: #00bcd4!important;
    box-shadow: 0 4px 5px 0 rgba(0,188,212,.14), 0 1px 10px 0 rgba(0,188,212,.12), 0 2px 4px -1px rgba(0,188,212,.2)!important;
    transition: all .3s;
}
button[data-test="prevSlide"] > span:first-of-type i,button[data-test="nextSlide"]> span:first-of-type i{

    color: white!important;
    right: 2px;
    font-size: 10px;
}
button[data-test="prevSlide"] > span:first-of-type:hover,button[data-test="nextSlide"]> span:first-of-type:hover{

    background-color: #00bcd4!important;
    transform: scale(1.2);
}
#TD-Styles, #TD-TopPanel-Undo, #TD-TopPanel-Redo{
    margin:0!important;
}
#TD-PrimaryTools,#TD-Tools-Dots,#TD-Delete{
    border:1px solid;
}
#TD-Tools-Dots,#TD-Delete{
    border-radius: 50%;
}
#TD-Styles-Parent{
    border: 1px solid;
    top: 0;
    height: 35px!important;
    border-radius: 8px;
}
#presentationToolbarWrapper select{
    background: #fff6;
    border-radius: 5px;
    padding: 2px;
    margin: 0 10px;
}

#presentationToolbarWrapper button,
#presentationToolbarWrapper button i{
    background: transparent;
    color : #000;
    opacity: 1!important;
    font-weight: 400;
}
 
#layout .wuKs:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0px;
    left: 0
    display: block;
}
div[data-test="userListContent"] > div > div[role="tabpanel"] > div{
    background: transparent;
}
#message-input {
    color: black!important;
    overflow: hidden;
    overflow-wrap: break-word;
    height: 37px;
    background: #fffffff2 !important;
    border: none!important;
    box-shadow: none!important;
    font-size: 12px;
}
div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div {
    background: #ffffff69;
    padding: 0;
    margin: 0;
}

div[data-test="userListItemCurrent"] > div > div:nth-of-type(2) > span:nth-of-type(2), div[data-test="userListItem"] > div > div:nth-of-type(2) > span:nth-of-type(2){
    margin-bottom: -3px;
}

div[data-test="notificationBannerBar"]{
    background: #ffffff4f;
    color: #000;
}
div[data-test="notificationBannerBar"] button{

    padding: 0 7px;
    background: #ffffff47;
    border-radius: 10px;
    color: #222;
    text-decoration: blink;
    border: 1px solid #ac25ee;

}
form button[data-test="emojiPickerButton"]{
    margin: 0 0px !important;
    border: none;
    background: #fffffff2 !important;
    height: 100%;
}
form button[data-test="emojiPickerButton"] > span:first-of-type{
    padding: 1px;
    font-size: 16px;
    background: #ffffff9e;
}

.wuKs form > div > button {
    border: 1px solid black;
    border-radius: 50%;
}

div[data-test="chatMessages"] + form > div:first-of-type{
    background: #ffffff63;
    border-radius: 17px;
    padding-left: 2px;
}

p[data-test="chatWelcomeMessageText"]{
    background: #ffffff63!important;
    border: 1px solid #00000087;
    border-radius: 10px;
    text-align: center!important;
    outline: none;
    font-size: 13px!important;
}

.dkrRqD,
.dYeGju{
    background: transparent!important;
}
.dkrRqD > div{
    background: #ffffffc2;
    border-radius: 15px;
}
p[data-test="chatWelcomeMessageText"] > a:first-of-type span i:before {
    content: "\003F";
}

p[data-test="chatWelcomeMessageText"] > a:last-of-type {
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    text-decoration-line: none;
    font-weight: 600;
    transition: all 0.5s;
    cursor: pointer!important;
    -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
    -moz-animation: neon1 1.5s ease-in-out infinite alternate;
    animation: neon1 1.5s ease-in-out infinite alternate;
    padding-left: 1px;
}
@keyframes neon1 {
    from {
        text-shadow: 0 0 5px #b72ddb12, 0 0 10px #b72ddb17, 0 0 15px #b72ddb1a, 0 0 8px #b72ddb26, 0 0 10px #b72ddb36;
    }
}


p[data-test="chatWelcomeMessageText"] >  span:first-of-type{
    border: 1px solid black;
    padding: 0px 6px;
    transition: all .3s;
    background-color: rgb(255 208 0) !important;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgb(255 152 0 / 14%), 0 3px 1px -2px rgb(255 152 0 / 20%), 0 1px 5px 0 rgb(255 152 0 / 12%);
    display: inline-block;
    width: max-content;
    font-size: 11px;
    color: black;
}


header button[data-test="hidePublicChat"],
header button[data-test="hidePublicChat"] > span,
button[data-test="chatOptionsMenu"] i.icon-bbb-more{
    background: transparent!important;
    color: black;
}
.Toastify .toastClass,
.Toastify .actionToast,
.Toastify .raiseHandToast{

    background: #ffffffc7;
    border-radius: 10px;

}
.Toastify .toastBodyClass{
    color: #222;
    background-color: transparent;
}
.Toastify .toastIcon{
    /*    background: #00ced1!important;*/
    border: 1px solid black;
    color: black!important;
}

em-emoji-picker{
    background-color: #ffffff5c;
}

button[data-test="sendMessageButton"] > span:first-of-type{
    background-color: #00ced1!important;
    color: black;
    padding: 5px;
}

em-emoji-picker section#root{
    background: transparent!important;
}

div[data-test="chatMessages"] span[data-test="msgListItem"] > div > div >div:last-of-type{
    background:#ffffff69!important;
    padding: 4px 8px;
    border-radius: 8px;
}

div[data-test="chatMessages"] span[data-test="msgListItem"] > div time{
    color: #333;
    position: relative;
    top: -1px;
}
#Navbar button[data-test="optionsButton"] {
    background: #ffffff75;
    border-radius: 5px;
}

div[data-test="chatMessages"] span[data-test="msgListItem"] div[data-test="moderatorAvatar"],
div[data-test="chatMessages"] span[data-test="msgListItem"] div[data-test="viewerAvatar"]{
    border: none!important;
}
div[data-test="chatMessages"] span[data-test="msgListItem"] div[data-test="moderatorAvatar"] img{
    box-shadow: rgb(132 35 188 / 55%) 0px 0px 3px 1px;
}

div[data-test="chatMessages"] span[data-test="msgListItem"] > div p[data-test="chatUserMessageText"]{
    color: #222;
}

div[data-test="chatMessages"] > div > div{
    background:#ffffff40 !important;
    padding-left: 0 !important;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 4px;
    margin-top: 5px !important;
}

div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div  > div[role="button"]{

    padding: 0 10px 0 0;
    line-height: 1.2;
    transition: .3s all;
}
div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div  > div[role="button"]:focus{

    box-shadow: none!important;
}
div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div  > div[role="button"] img,
div[data-test="chatMessages"] span[data-test="msgListItem"] div[data-test="viewerAvatar"],
#mafiaPlugin #results img,
#mafiaPlugin #submitResultM img,
#mafiaPlugin #dayMechanisms img{
    box-shadow: rgb(0 0 0 / 28%) 0px 2px 4px 0px;
    width: 100%;
}

h2[data-test="messageTitle"],
div[data-test="userList"] > div:first-of-type h2{
    color: #000;
}

#submitResultM #submitResult p.gameTime i,
#gameResultDetail  p.gameTime i,
#mafiaGameResultModal #gameResultDetail > div span i{
    font-size: 15px;
    position: relative;
    top: 2px;
    color: #b72ddb!important;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #fff;
}

#mafiaPlugin #results img,
#mafiaPlugin #submitResultM img,
#mafiaPlugin #dayMechanisms img{
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;

}

#mafiaPlugin #dayPlaylist p.accsp{
    display: flex;
    margin: 2px 5px 0 0;
}
#mafiaPlugin #dayPlaylist p.accsp > button{
    padding: 3px;
    display: flex;
    background: #ffffffbd;
}
#mafiaPlugin #dayPlaylist p.accsp svg{
    color: #007aff;
    filter: drop-shadow(2px 3px 5px #007aff);
    height: 15px;
    fill: #007aff;
    width: 15px;
}
#mafiaPlugin #dayPlaylist p.accsp .toShot svg{
    color: #585858;
    filter: drop-shadow(2px 3px 5px #585858);
    height: 15px;
    fill: #585858;
    width: 15px;
}
#mafiaPlugin #dayPlaylist p.accsp .shotted.toShot svg{
    color: #ff0404;
    filter: drop-shadow(2px 3px 5px #ff0404);
    height: 15px;
    fill: #ff0404;
    width: 15px;
}


#mafiaPlugin #dayPlaylist p.accsp > span.raisH{

    display: flex;
    background: #ffffffa6;
    align-items: center;
    border-radius: 15px;
    padding-left: 5px;
    border: 1px solid #a0a0a0;

}
#mafiaPlugin #dayPlaylist p.accsp > span.raisH input{

    border: 1px solid #ddd;
    width: 30px;
    font-size: 12px;
    border-radius: 25px;
    height: 17px;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 0;
    padding-top: 3px;
    margin-right: 3px;

}

#mafiaPlugin #dayPlaylist p.accsp > span.raisH svg{
    fill: #b72ddb;
    filter: drop-shadow(2px 3px 5px #b72ddb);
}

#dayPlaylist .talkPending >div:first-of-type{
    background: #c3f2a7;
}
/*#dayPlaylist .talkPending >div:first-of-type p.accsp > button svg,*/
/*#dayPlaylist .talkPending p.accsp > button svg.active{*/
/*    color: #4caf50!important;*/
/*    fill: #4caf50!important;*/
/*    filter: drop-shadow(2px 3px 5px #4caf50) !important;*/
/*}*/


body,
#Navbar,
#ActionsBar{
    background: transparent;
}


#ActionsBar button span{
    background-color: rgba(255, 255 ,255 , 0.75)!important;
    color: black!important;
    border-color: black!important;
    transition: .3s all;
}
#ActionsBar button span[color="primary"]{
    background-color: #00ff28 !important;
}

#Navbar button[aria-describedby="recording-description"]{
    background-color: rgba(255, 255 ,255 , 0.75)!important;
    border-color: black;
}
@media (max-width: 450px){
    #Navbar button[aria-describedby="recording-description"]{
        padding: 3px;
        position: absolute;
        right: 96px;
        top: 14px;
    }
}

#Navbar button[aria-describedby="recording-description"] span#recording-description,
#Navbar button[aria-describedby="recording-description"] span#recording-description + span,
#Navbar button[aria-describedby="recording-description"] span[data-test="mainWhiteboard"],
#Navbar button[aria-describedby="recording-description"] span[data-test="mainWhiteboard"],
#Navbar button[aria-describedby="recording-description"] svg{
    color: black!important;
}

.pDxLY{
    opacity: 0;
}
div[data-test="userListContent"] > div[role="list"] > div{
    background: transparent!important;
}

#Navbar button[aria-describedby="recording-description"] span[data-test="mainWhiteboard"] g{
    stroke: black;
}
#Navbar button[aria-describedby="recording-description"] span[data-test="mainWhiteboard"] g > circle:last-of-type{
    stroke: #000;
    fill:red;
}
.buttonWrapper[data-test="toggleUserList"]:focus:not([aria-disabled="true"]) .kHPRtV ,
button[data-test="toggleUserList"]:focus >span:first-of-type,
button[data-test="hasUnreadMessages"]:focus >span:first-of-type,
button[data-test="toggleUserList"]:focus:not([aria-disabled="true"]) >span:first-of-type,
button[data-test="hasUnreadMessages"]:focus:not([aria-disabled="true"]) >span:first-of-type{
    box-shadow: none!important;
    background-color:  transparent!important;
}
.sc-kOHTFB.fGgIwo{
    background: transparent;
}
p[data-test="chatClearMessageText"] {
    text-align: center;
    background: #ffffff63;
    border-radius: 10px;
    border: 1px solid #0000009e;
}

#ActionsBar button[data-test="audioDropdownMenu"],
#ActionsBar button[data-test="videoDropdownMenu"]{
    width: fit-content;
    border-radius: 10px;
    height: 16px;
    left: -22px;
    bottom: -1px;
    position: absolute;
    background: transparent;
}
#ActionsBar button[data-test="audioDropdownMenu"]:after,
#ActionsBar button[data-test="videoDropdownMenu"]:after{
    content: 'تنظیمات';
    font-size: 10px;
    line-height: .5;
    position: relative;
    top: -5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0px 2px;
    background: linear-gradient(49deg, rgba(255 ,208 ,0 , 1 ) 50%, rgba(255 ,208 ,0,1) 44%)!important;
}
.MuiList-root > li{
    font-family: 'IRANSans';
    transition: .3s all!important;
}

.MuiList-root > li:hover{
    background-color: #00ced1!important;
}

button[data-test="manageUsers"]:before {
    content: 'تنظیمات کاربران'!important;
    top: -1px!important;
    right: -70px!important;
    padding: 5px 4px!important;
    border-left: none!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    line-height: .9!important;
}
button[data-test="manageUsers"] {
    background: rgba(255 ,208 ,0 , .954);
    border: 1px solid #000!important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#Navbar h1[data-test="presentationTitle"],
#Navbar h1[data-test="presentationTitle"] + span[aria-hidden="true"]{
    display: none;
}
div[data-test="chatButton"]{
    background: rgb(255 255 255 / 45%);
    transition: .3s all;
}
div[data-test="chatButton"] i.icon-bbb-group_chat{
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
}
#ActionsBar .hrnxpN{

    border-color: #222!important;
}

button[data-test="leaveMeetingDropdown"]{
    position: relative;
    left: 3px;
}

div[data-test="chatButton"] div[aria-label="چت عمومی یک پیام جدید"] > div:before {
    content: 'پیام جدید';
    font-size: 10px;
    line-height: .5;
    position:relative;
    z-index: 10;
    display: inline-block;
    padding-right: 3px;
}
div[data-test="chatButton"] div[aria-label="چت عمومی یک پیام جدید"] > div{
    display: inline-block;
    direction: ltr;

}

.icon-mm-error{
    padding-right: 5px;
    padding-left: 5px;
    top: 2px;
    position: relative;
    font-style: normal;
    font-size: 18px;
}

.callservice button{
    border: 1px solid black;
    position: absolute;
    right: 90px;
    top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: black;
    cursor: pointer;
    border-radius: 6px;
    transition: .3s all;
    width: max-content;
    background: linear-gradient(49deg, rgba(255 ,208 ,0 , .74) 50%, rgba(255 ,208 ,0,.62) 44%)!important;

}

@media(min-width:450px){
    .callservice button{
        right: 88px!important;
        top: 10px!important;
    }
    .online-direct-link button{
        right: 188px!important;
        top: 10px!important;
    }
}
.shareDirectLink >button{
    position: absolute;
    top: 6px;
    left: 6px;
    background: #fff;
    color: black;
    border: none;
    font-size: 15px;    outline: none;
    cursor: pointer;
    border-radius: 50%;
}

.shareDirectLink p.content{

    margin: 5px 0 0;
    font-size: 13px;
    color: #555;

}
.shareDirectLink p.title{

    margin: 0;
    font-weight: 500;
    font-size: 14px;
    color: #222;

}
.shareDirectLink{
    text-align: right;
}
.shareDirectLink p.link{

    background: rgb(241, 243, 244);
    padding: 12px;
    border-radius: 5px;
    font-size: 14px;
    text-align: left;
    position:relative;
    margin-bottom: 0;

}
.direct-tLink-container{
    bottom: 60px;
}
.shareDirectLink p.link i{
    position: absolute;
    right: 9px;
    font-size: 19px;    transition: .3s all;

}
.shareDirectLink p.link i:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.shareDirectLink span.popup{
    position: absolute;
    font-size: 11px;
    right: 8px;
    top: -14px;
    background: #ddd;
    padding: 3px;
    border-radius: 8px;
}
.shareDirectLink p.caution{
    font-size: 13px;
}

.online-direct-link button:hover,
.callservice button:hover{
    box-shadow: 0 1px 3px rgba(255 ,208 ,0,.62);
}

.online-direct-link button{
    transition: .3s all;
    position: absolute;
    right: 90px;
    top: 23px;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: black;
    cursor: pointer;
    border-radius: 6px;
    width: max-content;
    background: linear-gradient(49deg, rgba(255 ,208 ,0 , .74) 50%, rgba(255 ,208 ,0,.62) 44%)!important;
    border: 1px solid black;
}

.mm-caution-bt:hover .lable-error-mm{
    display:block;
}

#ActionsBar button span.mm-caution{
    background: transparent!important;
}

.mm-caution-bt{
    padding: 0!important;
    border-color: orange!important;
    width: 42px;
    height: 42px;
    color: #fff;
    border: 2px solid orange!important;
    border-radius: 50%;
    background: orange;
}

.icon-mm-error:before{
    content: "\003F";
}
#ActionsBar button[data-test="minimizePresentation"]:before, #ActionsBar button[data-test="restorePresentation"]:before, #ActionsBar button[data-test="stopScreenShare"]:before, #ActionsBar button[data-test="startScreenShare"]:before, #ActionsBar button[data-test="joinVideo"]:before, #ActionsBar button[data-test="actionsButton"]:before, button[data-test="manageUsers"]:before {
    content: 'تخته';
    font-size: 10px;
    line-height: .5;
    position: absolute;
    top: -4px;
    right: 27px;
    border-radius: 15px;
    border: 1px solid #06172a;
    z-index: 10;
    font-weight: 500;
    color:#000;
    padding: 5px 4px;
    background: linear-gradient(49deg, rgb(255 208 0) 50%, rgb(255 208 0) 44%)!important;
}

div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div:first-of-type{
    border-top-right-radius: 5px;
    margin-bottom: 1px;
}
div#user-list-virtualized-scroll div[aria-label="Users list"] > div > span > div:last-of-type{
    border-bottom-right-radius: 5px;
}

#ActionsBar button[data-test="joinVideo"]:before {
    content: 'وبکم'!important;
}
#ActionsBar button[data-test="stopScreenShare"]:before, #ActionsBar button[data-test="startScreenShare"]:before {
    content: 'صفحه نمایشگر'!important;
}
#ActionsBar button[data-test="actionsButton"]:before {
    content: 'قابلیت ها'!important;
    top: -6px!important;
    right: 22px!important;
}
#ActionsBar button{
    position: relative;
}

#ActionsBar button span.emoji-mart-emoji,
#ActionsBar button span.emoji-mart-emoji > span{
    background-color: transparent!important;
}

@media (max-width : 450px){
    .sc-domHDO.eIIwNO{
        justify-content: flex-end!important;
    }
}


button[data-test="toggleUserList"]::before, button[data-test="hasUnreadMessages"]::before {
    border-radius: 5px;
    position: absolute!important;
    top: 0!important;
    right: -1px;
    width: 82px;
    line-height: 1.326!important;
    content: "لیست کاربران\aلیست چت ها"!important;
    padding: 3px 0px!important;
    border: 1px solid black;
    font-size: 12px!important;
    color: black!important;
    z-index: 1;
    white-space: pre;
    background-color: rgba(255, 255 ,255 , 0.85)!important;
}
button[data-test="toggleUserList"] i {
    opacity: 0;
}

body{
    font-family: IRANSans!important;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url("/font/Iran-sans-55/IRANSansWeb_Bold.eot");
    src: url("/font/Iran-sans-55/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url("/font/Iran-sans-55/IRANSansWeb_Bold.woff2") format("woff2"), url("/font/Iran-sans-55/IRANSansWeb_Bold.woff") format("woff"), url("/font/Iran-sans-55/IRANSansWeb_Bold.ttf") format("truetype"); }

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url("/font/Iran-sans-55/IRANSansWeb_Medium.eot");
    src: url("/font/Iran-sans-55/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("/font/Iran-sans-55/IRANSansWeb_Medium.woff2") format("woff2"), url("/font/Iran-sans-55/IRANSansWeb_Medium.woff") format("woff"), url("/font/Iran-sans-55/IRANSansWeb_Medium.ttf") format("truetype"); }

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url("/font/Iran-sans-55/IRANSansWeb_Light.eot");
    src: url("/font/Iran-sans-55/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"), url("/font/Iran-sans-55/IRANSansWeb_Light.woff2") format("woff2"), url("/font/Iran-sans-55/IRANSansWeb_Light.woff") format("woff"), url("/font/Iran-sans-55/IRANSansWeb_Light.ttf") format("truetype"); }

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url("/font/Iran-sans-55/IRANSansWeb_UltraLight.eot");
    src: url("/font/Iran-sans-55/IRANSansWeb_UltraLight.eot?#iefix") format("embedded-opentype"), url("/font/Iran-sans-55/IRANSansWeb_UltraLight.woff2") format("woff2"), url("/font/Iran-sans-55/IRANSansWeb_UltraLight.woff") format("woff"), url("/font/Iran-sans-55/IRANSansWeb_UltraLight.ttf") format("truetype"); }

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url("/font/Iran-sans-55/IRANSansWeb.eot");
    src: url("/font/Iran-sans-55/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("/font/Iran-sans-55/IRANSansWeb.woff2") format("woff2"), url("/font/Iran-sans-55/IRANSansWeb.woff") format("woff"), url("/font/Iran-sans-55/IRANSansWeb.ttf") format("truetype");
}

button[data-test="optionsButton"] span i.icon-bbb-more{
    color: black;
}
button[data-test="connectionStatusButton"] span[color="success"]{
    background-color: #ffffff42;
}
#Navbar i.icon-bbb-left_arrow,#Navbar i.icon-bbb-right_arrow{
    opacity:0;
}
#ActionsBar button[data-test="minimizePresentation"], #ActionsBar button[data-test="restorePresentation"], #ActionsBar button[data-test="stopScreenShare"], #ActionsBar button[data-test="startScreenShare"], #ActionsBar button[data-test="joinVideo"], #ActionsBar button[data-test="actionsButton"], button[data-test="manageUsers"] {
    position: relative;
}

div[data-test="chatButton"] div[aria-label="چت عمومی یک پیام جدید"]{
    margin-left: 5px;
    border: 1px solid black;
    border-radius: 10px;
}
header[data-test="chatTitle"]{
    position: relative;
    z-index: 10;
}hasUnreadMessages

 button[data-test="manageUsers"] {
     background: rgba(255 ,208 ,0 , .954);
     border: 1px solid black!important;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     color: black!important;
 }

button[data-test="hasUnreadMessages"]::after {
    right: 20px;
    width: fit-content;
    height: 15px;
    font-size: 8px;
    color: white;
    bottom: -16px;
    top: unset;
    content: "پیام جدید" !important;
    border-radius: 4px;
    padding: 0px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    z-index: 1;
    border-image: initial;
}
button[data-test="hasUnreadMessages"] i.icon-bbb-user{
    opacity: 0;
}
button[data-test="manageUsers"] .icon-bbb-settings {
    font-size: 13px!important;
    color: #222!important;
}
div#user-list-virtualized-scroll{
    background: transparent;
}
div#user-list-virtualized-scroll div[aria-label="Users list"]{

    background: transparent;
}
.eJkKfP, .kHEAYK, .itbcIW, .gqIQPN, .OVwuJ, .jeBktL > div, .lkAGvL, .idZSOl {
    min-height: 27px!important;
    min-width: 27px!important;
    width: 27px!important;
    max-height: 27px!important;
    box-shadow: rgb(0 0 0 / 28%) 0px 2px 4px 0px;
    border: none!important;
}
div[data-test="userAvatar"] > div{
    border:none;
}
.fXZWBW::before {
    content: "  ";
    opacity: 1;
    inset: -5px auto auto -5px;
    border-radius: 5px;
    background-color: #00ced1;
    padding: 0.45rem !important;
}

div[data-test="userListItemCurrent"] > div::after ,
div[data-test="userListItem"] > div::after {
    top: 16px!important;
    right: -8px!important;
    height: 15px;
    width: 15px;
    border: 1px solid #000;
}

div[data-test="webcamItem"] video,
div[data-test="webcamItemTalkingUser"] video{
    object-fit: cover!important;
}


div[data-test="webcamItemTalkingUser"]:after{
    border : 2px solid #f194f3;
    color:#000;
}
div#simpleModal{
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(100,130,159,1) 0%, rgb(119 64 111) 90% );
    /*border-radius: 25px;*/
}
div[data-test="talkingIndicator"]  > div >div {
    background: transparent!important;
}
div[data-test="talkingIndicator"]  > div button{
    background-color: rgba(255,255,255,.45)!important;
    color: black;
}
div[data-test="webcamVideoItem"] i.icon-bbb-unmute,
div[data-test="talkingIndicator"]  > div button i.icon-bbb-unmute{
    background-color: #2df37c;
    color: black;
}


label[for="setCam"],
select#setCam,
label[for="setQuality"],
label[for="brightness"],
select#setQuality+label{
    color:#000;
}


div#simpleModal input#brightness{
    position: relative;
    margin: 0;
    height: 1.25rem;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline-width: 0;
    background: transparent!important;
    direction: ltr;
}
div#simpleModal input#brightness:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #222;
    top: 6px;
    z-index: 0;
}

div#simpleModal input#brightness {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    z-index: 1;
}
div#simpleModal input#brightness::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #222;
    height: 15px;
    width: 10px;
    border-radius: 2px;
    background:linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #00ced1;
    cursor: ew-resize;
    z-index: 10;
    position: relative;
    box-shadow: 0 11px 6px 0 rgb(0 206 209 / 14%), 0 3px 1px -2px rgb(0 206 209 / 20%), 0 1px 5px 0 rgb(0 206 209 / 12%);
}

div#simpleModal input#brightness::-moz-range-thumb {
    border: 1px solid #222;
    height: 15px;
    width: 10px;
    border-radius: 2px;
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);;
    background-color: #00ced1;
    cursor: ew-resize;
    z-index: 10;
    position: relative;
}

div#simpleModal input#brightness::-ms-thumb {
    border: 1px solid #222;
    height: 15px;
    width: 10px;
    border-radius: 2px;
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);;
    background-color: #00ced1;
    cursor: ew-resize;
    z-index: 10;
    position: relative;
}

div#simpleModal button[data-test="startSharingWebcam"],
button[data-test="confirmManagePresentation"],
button[data-test="updateLayoutBtn"],
button[data-test="applyLockSettings"]{
    border: 1px solid #00000057!important;
    color: #000;
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #00ced1!important;
    margin: 0;
    border-radius: 10px;
}
@media(max-width: 450px) {
    div#simpleModal[data-test="webcamSettingsModal"] > div:first-of-type > div:first-of-type > div:last-of-type > div:first-of-type {
        text-align: center;
        width: 100%;
        background: none;
        border-radius: 15px;
    }
}
@media(min-width: 450px) {
    div#simpleModal[data-test="webcamSettingsModal"] > div:first-of-type > div:first-of-type > div:last-of-type > div:first-of-type {
        margin-left: 43px;
        background: none;
    }
}

div#simpleModal div[data-test="virtualBackground"]{
    background: #ffffff78;
    border-radius: 5px;
    border: 1px solid;
    margin-right: 0;
    font-family: unset!important;
}

div#simpleModal[data-test="webcamSettingsModal"] >div:first-of-type > header h2{
    display: none;
}
div#simpleModal[data-test="webcamSettingsModal"] >div:first-of-type >div:first-of-type >div:first-of-type{
    align-items: unset;
}
@media(min-width: 450px) {
    div#simpleModal[data-test="webcamSettingsModal"] > div:first-of-type > div:first-of-type > div:first-of-type> div:first-of-type {
        position: relative;
        top: 15px;
    }
}
div#simpleModal[data-test="webcamSettingsModal"] > div:first-of-type > div:first-of-type > div:first-of-type{
    padding-top: 0;
}

select#setCam,
select#setQuality{
    background: #ffffff9c;
    border: none;
    border-radius: 5px;
    height: 35px;
    margin-top: 5px;
    border: 1px solid;
}



div#simpleModal > div{
    padding: 8px;
    background: #ffffff78;
    border-radius: 25px;
    flex: auto;
}



div#simpleModal  video#preview{
    box-shadow: 0 0 3px #222;
    border-radius: 10px;
    object-fit: cover;
}


div[data-test="userListItemCurrent"] > div::before ,
div[data-test="userListItem"] > div::before {
    left: auto;
    right: -8px!important;
    top: 0px;
    border: 1px solid;
    height: 15px;
    width: 15px;
    border: 1px solid #000;
    background-color: #00ced1;
}
div[data-test="userListContent"] > div:nth-last-of-type(2){
background: #ffffff73 !important;
    margin: 0;
    padding: 10px;
}
div[data-test="userAvatar"]{
    padding-right: 5px;
}
div[data-test="userListItemCurrent"] ,
div[data-test="userListItem"]{
    padding: 5px 8px 5px 0!important ;
    transition: .3s all;
    background: #ffffff69;
}

div[data-test="userListItemCurrent"] > div:first-of-type ,
div[data-test="userListItem"] > div:first-of-type,
.eLmkJB{
        border: 1px solid #000;
        background-position: center;
    background-size: cover;
}

   
div[data-test="userListItemCurrent"] span[data-test="mobileUser"],
div[data-test="userListItem"] span[data-test="mobileUser"]{
    color: #222;
}

.jFTJfP{
    background: transparent!important;
}


#bbb-mm-modal .modal-body,
#general-mm-modal .modal-body{
    background-color: #74ebd5 !important;
    background-image: linear-gradient(90deg,#74ebd5 0,#9face6 100%) !important;
    border-radius: 25px;
}
div[data-test="userListContent"] > div[role="list"] > div > div{
   margin: 0;
    padding-top: 2px;
    padding-bottom: 0px;
}

i.fad.fa-close:after { content: "\02717";}
#bbb-mm-modal .modal-body .back i:after {
    content: "\022DE";
    position: relative;
    top: -1px;
    padding-left: 5px;
}
@keyframes flash {
    from,75%, 88%, to {
        opacity: 1;
    }

    81%, 94% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
}
.animated.infinite {
    animation-iteration-count: infinite;
}


#bbb-mm-modal.notSupported .modal{
    margin-bottom:70px;
}

#bbb-mm-modal.notSupported .close{
    display: none;
}
.browserWarning{
    display: none;
}
@media ( max-width: 450px){
    #bbb-mm-modal.notSupported #appVsWeb{
        margin-top: -50px;
    }
}

.loadingOnline{
    position: absolute;
    left: 10px;
    margin-top: -4px;
}

.loadingOnline .loaderRefOnline{
    z-index: 100;
    perspective: 800px;
    width: 28px;
    height: 28px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #EFEFFA;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #EFEFFA;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}






#bbb-mm-modal .modal-body,
.caution-modal .modal-body,
#general-mm-modal .modal-body {
    direction: rtl;
}
#bbb-mm-modal .modal-body > p:first-of-type,
#general-mm-modal .modal-body > p:first-of-type {
    margin-bottom: 10px;
}
#bbb-mm-modal .modal-body > p > i,
#general-mm-modal .modal-body > p > i {
    color: #00ced1;
    font-size: 18px;
    padding-left: 10px;
    top: 3px;
}
#bbb-mm-modal .modal-body > p,
#general-mm-modal .modal-body > p {
    margin-bottom: 5px;
}
#bbb-mm-modal .modal-body > p:last-of-type,
#general-mm-modal .modal-body > p:last-of-type {
    margin-bottom: 15px;
}
#bbb-mm-modal .close,
.caution-modal .close {
    font-size: 22px !important;
    top: 10px !important;
    left: 20px !important;
    position: absolute;
    right: unset !important;
    border: none;
    border-radius: 50%;
    padding: 0 10px;
    width: 35px;
    height: 35px;
    background-color: rgba(244, 67, 54, 0.3);
    box-shadow: rgba(244, 67, 54, 0.8) 0 0 6px -3px;
}
#bbb-mm-modal .close i,
.caution-modal .close i {
    font-size: 14px;
}
#bbb-mm-modal .back,
#general-mm-modal .back {
    font-size: 16px !important;
    top: 10px !important;
    left: unset !important;
    position: absolute;
    display: none;
    right: 20px !important;
    border: none;
    border-radius: 25px;
    padding: 4px 10px;
    height: 35px;
    background-color: rgba(0, 206, 207, 0.3);
    box-shadow: rgba(0, 206, 207, 0.8) 0 0 6px -3px;
    border: 1px solid white;
}
@media (min-width: 450px) {
    #bbb-mm-modal .close:hover,
    .caution-modal .close:hover,
    #general-mm-modal .close:hover {
        box-shadow: rgba(244, 67, 54, 0.8) 0 0 20px -3px;
    }
    #bbb-mm-modal .back:hover,
    #general-mm-modal .back:hover {
        box-shadow: rgba(0, 206, 207, 0.8) 0 0 20px -3px;
    }
}
#bbb-mm-modal .caution > a,
#general-mm-modal .caution > a {
    margin-bottom: 3px;
    cursor: pointer;
    color: #333;
    font-weight: 500;
    transition: all 0.3s;
    display: block;
}
#bbb-mm-modal .caution > p:first-of-type,
#general-mm-modal .caution > p:first-of-type {
    margin-bottom: 5px;
    text-align: center;
    font-weight: 600;
}
#bbb-mm-modal .caution > a > i,
#general-mm-modal .caution > a > i {
    color: #00ced1;
    font-size: 20px;
    padding-left: 5px;
    top: 4px;
}
#bbb-mm-modal .caution,
#general-mm-modal .caution {
    margin-bottom: 20px;
}
@media (min-width: 450px) {
    #bbb-mm-modal .caution > a:hover,
    #general-mm-modal .caution > a:hover {
        color: #00ced1;
    }
}
#bbb-mm-modal .caution,
#general-mm-modal .caution {
    background-color: #f4fafe;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 2px 2px 0 rgba(0, 206, 207, 0.14),
    0 3px 1px -2px rgba(244, 250, 254, 0.2),
    0 1px 5px 0 rgba(244, 250, 254, 0.12);
    margin-top: 10px !important;
}
#bbb-mm-modal .modal,
.caution-modal .modal{
    z-index: 1050;
    display: none;
    /*  overflow: hidden;*/
    -webkit-overflow-scrolling: touch;
    outline: 0;
    /*  overflow-y: scroll;*/
    max-width: 750px;
    margin-bottom: 100px;
}
@media (min-width: 450px) {
    #bbb-mm-modal .modal {
        margin-top: 100px;
    }
}
#bbb-mm-modal .modal.in .modal-dialog,
.caution-modal .modal.in .modal-dialog,
#general-mm-modal .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
}
#bbb-mm-modal .modal-dialog,
.caution-modal .modal-dialog{
    position: relative;
    width: auto;
    margin: 10px;
}
#general-mm-modal .modal-dialog{
    position: relative;
}
#bbb-mm-modal .modal-content,
.caution-modal .modal-content,
#general-mm-modal .modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 25px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
}
#bbb-mm-modal .modal-body,
.caution-modal .modal-body{
    position: relative;
    text-align: right;
    padding: 30px 25px;
}
@media (max-width: 450px) {
    #bbb-mm-modal .modal-body,
    .caution-modal .modal-body {
        padding: 50px 15px 15px;
    }
}

#general-mm-modal .modal-body .back i:after {
    content: "X";
    position: relative;
    top: -1px;
    padding-left: 5px;
    content: "X";
    position: relative;
    top: -1px;
    padding-left: 5px;
}
#bbb-mm-modal .modal-body .main .pad-list,
#general-mm-modal .modal-body .main .pad-list {
    display: flex;
    justify-content: space-evenly;
}
#bbb-mm-modal .modal-body .main ul,
#general-mm-modal .modal-body .main ul {
    list-style: none;
    padding: 0;
}
#bbb-mm-modal .modal-body .main .pad-list > li,
#general-mm-modal .modal-body .main .pad-list > li {
    display: inline-flex;
    height: 75px;
    width: 75px;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 206, 207, 0.89) 0 0 5px -1px;
    border-radius: 15px;
    background-color: rgb(255 255 255 / 37%);
    cursor: pointer;
    transition: 0.3s all;
    border: 1px solid white;
}
#bbb-mm-modal .modal-body .main .pad-list.solution > li,
#bbb-mm-modal .modal-body .main .row-list.solution > li,
#general-mm-modal .modal-body .main .pad-list.solution > li,
#general-mm-modal .modal-body .main .row-list.solution > li {
    cursor: inherit;
}
#bbb-mm-modal .modal-body .main .row-list.solution.sub,
#general-mm-modal .modal-body .main .row-list.solution.sub {
    margin: 5px;
    background: #80c883;
}
#bbb-mm-modal .modal-body .main .row-list li.centerize,
#general-mm-modal .modal-body .main .row-list li.centerize {
    display: flex;
    justify-content: center;
}
@media (min-width: 450px) {
    #bbb-mm-modal .modal-body .main .pad-list > li:hover,
    #general-mm-modal .modal-body .main .pad-list > li:hover {
        box-shadow: rgba(0, 206, 207, 0.89) 0 0 15px -1px;
    }
}
#bbb-mm-modal .modal-body .main .pad-list p,
#general-mm-modal .modal-body .main .pad-list p {
    margin: 0;
}

#bbb-mm-modal .modal-body .btn-next-mm,
#general-mm-modal .modal-body .btn-next-mm {
    padding: 10px 40px;
    letter-spacing: 0;
    border: none;
    border-radius: 25px;
    background-color: #00ced1;
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 206, 209, 0.14),
    0 3px 1px -2px rgba(0, 206, 209, 0.2), 0 1px 5px 0 rgba(0, 206, 209, 0.12);
    margin-top: 25px;
    border: 1px solid white;
}
@media (min-width: 450px) {
    #bbb-mm-modal .modal-body .btn-next-mm:hover,
    #general-mm-modal .modal-body .btn-next-mm:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 206, 209, 0.24),
        0 3px 10px -2px rgba(0, 206, 209, 0.3),
        0 1px 15px 0 rgba(0, 206, 209, 0.22);
    }
}

#general-mm-modal{
    position: absolute;
    z-index: 900;
    background-color: transparent;
    border: none;
    text-align: center;
    display: flex;
    left: 0;
    top: 0;
}

#bbb-mm-modal {
    height: 100vh;
    width: 100vw;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    overflow-y: scroll;
}
.caution-modal{
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 270px;
    z-index: 20000;
    top: 150px;
    animation: movingAround 4s linear infinite
}
#bbb-mm-modal button,
#bbb-mm-modal li,
.caution-modal button,
.caution-modal li,
#general-mm-modal button,
#general-mm-modal li {
    cursor: pointer;
    transition: 0.3s all;
    outline: 0;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-120%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeIn {
    animation-name: fadeIn;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-120%);
    }
}
.fadeOut {
    animation-name: fadeOut;
}
@keyframes fadeOut2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeOut2 {
    animation-name: fadeOut2;
}
.animated {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
.animated.faster {
    animation-duration: 0.25s;
}
#bbb-mm-modal .modal-body .main .row-list,
#general-mm-modal .modal-body .main .row-list {
    margin: 25px 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
    border:1px solid white;
}
@media (max-width: 450px) {
    #bbb-mm-modal .modal-body .main .row-list,
    #general-mm-modal .modal-body .main .row-list {
        margin: 0;
    }
}

#general-mm-modal .modal{

}

#bbb-mm-modal .modal-body .main .row-list > li,
#general-mm-modal .modal-body .main .row-list > li {
    padding: 20px 25px;
    background-color: rgb(255 255 255 / 37%);
    transition: 0.3s all;
}
#bbb-mm-modal .modal-body .main .row-list.solution,
#general-mm-modal .modal-body .main .row-list.solution {
    margin-top: 40px;
    background-color: #f6f6f6;
}
#bbb-mm-modal .modal-body .main .row-list.solution > li,
#general-mm-modal .modal-body .main .row-list.solution > li {
    background-color: transparent;
}
#bbb-mm-modal .modal-body .main .row-list > li:not(li:last-of-type),
#general-mm-modal .modal-body .main .row-list > li:not(li:last-of-type) {
    border-bottom: solid 2px #fff;
}
@media (min-width: 450px) {
    #bbb-mm-modal .modal-body .main .row-list:not(.solution) > li:hover,
    #general-mm-modal .modal-body .main .row-list:not(.solution) > li:hover {
        background-color: rgba(0, 206, 207, 0.5);
    }
}
#bbb-mm-modal .modal-body .main .row-list > li > p,
#general-mm-modal .modal-body .main .row-list > li > p {
    margin: 0;
    display: inline-block;
}
#bbb-mm-modal .modal-body .main .row-list > li svg,
#general-mm-modal .modal-body .main .row-list > li svg {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 10px;
    margin-bottom: -10px;
}
#bbb-mm-modal .modal-body .main .row-list > li > p svg,
#general-mm-modal .modal-body .main .row-list > li > p svg {
    height: 25px;
    width: 25px;
    margin-bottom: -8px;
    margin-right: 0;
}
#bbb-mm-modal .modal-body .main .row-list img {
    object-fit: contain;
    display: table-column;
    object-position: center;
    width: 100%;
    box-shadow: 0 2px 5px 0 #000;
    border-radius: 15px;
    max-width: 400px;
}
#bbb-mm-modal .modal-body .main #supportNumbers + .footer-mm,
#general-mm-modal .modal-body .main #supportNumbers + .footer-mm {
    display: none;
}
#bbb-mm-modal .modal-body .main h5,
#general-mm-modal .modal-body .main h5 {
    font-size: 14px;
}


div[aria-describedby="clap-option-desc"],
div[aria-describedby="hand-option-desc"],
div[aria-describedby="-1-option-desc"],
div[aria-describedby="+1-option-desc"],
div[aria-describedby="slightly_frowning_face-option-desc"],
div[aria-describedby="neutral_face-option-desc"],
div[aria-describedby="smiley-option-desc"]{
    margin:0;
}

.Toastify button{

    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #00ced1!important;
    color: black;

}

/*@media(max-width: 450px) {*/
#general-mm-modal .modal-body {
    padding: 0;
}
div.input-div input{
    height: 26px!important;
    font-size: 12px;
}
/*}*/



div.input-div input,
div.input-div select,
div.input-div textarea{
    padding: 0 15px;
    max-width: 800px;
    background: #ffffff85;
    border-radius: 20px;
    height: 40px;
    border: 2px solid #fff;
    width: 100%;
    z-index: 2;
    color: #222;
    position: relative;
    text-align: right;
    direction: rtl;
}



div.input-div inpu.ltr,
div.input-div select.ltr,
div.input-div textarea.ltr{
    direction: ltr;
    text-align: left;
}


div.input-div textarea{
    height: unset!important;
    padding: 10px 15px;
}
div.input-div label{

    position: absolute;
    top: 8px;

    right: 15px;
    border-radius: 5px 5px 0;
    margin: 0;
    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    opacity: 0;
    transition: .3s;
    z-index: 1;
    transform: translateY(20px);
    direction: rtl;
}
div.input-div label {

    font-size: 11px;
}


div.input-div.des > i {
    position: absolute;
    left: 15px;
    border-radius: 5px 5px 0;
    margin: 0;
    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    font-size: 16px;
    transition: .3s;
    z-index: 3;
    transform: translateY(20px);
    cursor: pointer;
    top: 0px;
}
div.input-div.des > i:hover{
    scale: 1.15;
}
div.input-div{
    position: relative;
    transition: .3s all;
}
div.input-div input:not(:placeholder-shown) ~ i,
div.input-div textarea:not(:placeholder-shown) ~ i{
    transform: translateY(10px);
}
div.input-div input:not(:placeholder-shown) + label,
div.input-div textarea:not(:placeholder-shown) + label,
div.input-div select + label{
    opacity: 1;
    transform: translateY(-4px);
}
div.input-div input:not(:placeholder-shown),
div.input-div textarea:not(:placeholder-shown),
div.input-div select{
    margin-top: 24px;
}
div.input-div input:placeholder-shown,
div.input-div textarea:placeholder-shown{
    margin-top:5px;
}
div.input-div input,
div.input-div textarea{
    color: #222;
    transition: .3s all;

}
div.input-div input::placeholder,
div.input-div textarea::placeholder{
    color: #444;
    transition: .3s all;
}
div.input-div label span,
#first-tab .file-drop-area label span b{
    font-size: 12px;
    font-weight: 500;
    color: #895f02;
}
div.input-div > i.inner {

    position: absolute;
    top: 15px;
    right: 12px;
    z-index: 5;
    font-size: 16px;
    transition: .3s all;
    width: fit-content;
    height: fit-content;
}
#third-tab div.input-div input{

    cursor: pointer;
}
div.input-div input:not(:placeholder-shown) ~ i.inner{
    transform: translateY(28px);
}
div.input-div.has-icon input,
div.input-div.has-icon.no-padding input{
    padding-right: 33px;
}
div.input-div.no-padding,
div.input-checkbox-div.no-padding,
.checkbox-parent.no-padding{
    padding:0;
}
.checkbox-parent + div.input-div input:not(:placeholder-shown){
    margin-top: 26px;
}
.checkbox-parent + div.input-div input:not(:placeholder-shown) + label,
.ticketPlan div.input-div input:not(:placeholder-shown) + label{
    transform: translateY(-7px);
}
.checkbox-parent + div.input-div input:not(:placeholder-shown){
    margin-top: 26px;
}
.checkbox-parent + div.input-div input:not(:placeholder-shown) + label,
.ticketPlan div.input-div input:not(:placeholder-shown) + label{
    transform: translateY(-7px);
}
.checkbox-parent + div.input-div input:not(:placeholder-shown) ~ i.inner,
.ticketPlan div.input-div input:not(:placeholder-shown) ~ i.inner{
    transform: translateY(22px);
}
.checkbox-parent + div.input-div input:not(:placeholder-shown) ~ i.inner,
.ticketPlan div.input-div input:not(:placeholder-shown) ~ i.inner{
    transform: translateY(22px);
}
div.input-div input.has-error{
    background: #ffc459eb;
}
.input-div.date input[readonly]{
    background: #ffffff85!important;
    border-radius: 20px;
    cursor: pointer;
}
div.input-div label span, #first-tab .file-drop-area label span b{
    font-size: 12px;
    font-weight: 500;
    color: #895f02;
}
div.input-div input.ltr, div.input-div select.ltr, div.input-div textarea.ltr{
    direction: ltr;
    text-align: left;
}

div.input-div input:not(:placeholder-shown) ~ .input-label{
    transform: translateY(29px);
}
div.checkbox-parent >span{
    position: relative;
    top: -13px;
    right: 10px;
    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
}
div.checkbox-parent.mini div.input-checkbox-div label{
    height: 16px;
    width: 35px;
}
div.checkbox-parent.mini div.input-checkbox-div label::after{
    width: 11.7px;
    height: 11.7px;
}
div.checkbox-parent.mini >span{
    font-size: 12px;
    right: -12px;
    top: -5px;
}
#mafiaPlugin #results > div:first-of-type p.title{
    margin: -5px 0 5px;
}
/*@media(min-width: 450px) {*/
div.checkbox-parent.mini > span {
    font-size: 11px;
}
/*}*/
/*@media(max-width: 450px) {*/
/*    div.checkbox-parent.mini > span {*/
/*        font-size: 11px;*/
/*    }*/
/*}*/
div.input-checkbox-div input{
    display: none;
}
div.input-checkbox-div{
    width: 52px;
    display: inline-flex;
    margin-bottom: 10px;
}
div.input-checkbox-div.no-margin{
    margin-bottom: 0;
}
div.checkbox-parent >span{
    position: relative;
    top: -13px;
    right: 10px;
    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
}

div.input-checkbox-div label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3rem;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    background: rgba(255, 255, 255, 0);
    position: relative;
    cursor: pointer;
    border-radius: 1.6rem;
    margin:0;
}
div.input-checkbox-div label::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #9baacf;
    transition: all 0.4s ease;
}
div.input-checkbox-div label::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(330deg, #00ced1 0%, #b72ddb 50%, #00ced1 100%);
    opacity: 0;
    transition: all 0.4s ease;
}
div.input-checkbox-div input:checked ~ label::before {
    opacity: 1;
}
div.input-checkbox-div input:checked ~ label::after {
    left: 57%;
    background: #E4EBF5;
}
div.input-checkbox-div input[disabled] + label{
    opacity: .5;
}
#general-mm-modal button.add-more{
    background: #00000014;
    border-radius: 25px;
    color: #000;
    border: 1px solid #000c;
    transition: .3s all;
}
#cameraDock div[data-test="webcamConnecting"] > div:nth-of-type(2),
#cameraDock div[data-test="webcamItem"] > div:nth-of-type(3){
    bottom: -5px;
}
#cameraDock div[data-test="webcamItem"] button[data-test="webcamFullscreenButton"]{
    background: #04040473!important;
}
#cameraDock div[data-test="webcamConnecting"] > div:nth-of-type(2) > i{
    top: 3px;
}
#cameraDock div[data-test="webcamConnecting"] > div:nth-of-type(2) > div:first-of-type >div span,
div[data-test="webcamVideoItem"] div[data-test="dropdownWebcamButton"]{
    border: 1px solid #559a00;
    border-radius: 15px;
    padding: 0 14px 0 5px!important;
    font-size: 10px;
    background: #000;
}
#general-mm-modal button.add-more{
    padding: 2px 8px;
    font-size: 11px;
}




#general-mm-modal button.add-more:hover{
    box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}
#general-mm-modal #mafiaPlugin{
    background: rgb(255 255 255 / 25%);

    border-radius: 15px;
    position: relative;
}

/*@media(max-width: 450px){*/
#general-mm-modal #mafiaPlugin{
    padding: 5px;
    max-width: 290px;
}
/*}*/
/*@media(min-width: 450px){*/
/*    #general-mm-modal #mafiaPlugin{*/
/*        padding: 15px;*/

/*    }*/
/*}*/


#general-mm-modal .close{
    font-size: 14px !important;

    position: absolute;
    right: unset !important;
    border-radius: 50%;
    padding: 0;
    color: white;
    border: 1px solid white;
    background-color: rgb(255 0 0 / 80%);
    display: flex;
    justify-content: center;
    box-shadow: rgba(244, 67, 54, 0.8) 0 0 6px -3px;
    align-items: center;
    z-index: 10;
}
/*@media(min-width: 450px){*/

/*    #general-mm-modal .close{*/
/*        top: 20px !important;*/
/*        left: 20px !important;*/
/*        width: 28px;*/
/*        height: 28px;*/

/*    }*/
/*    #general-mm-modal .close i{*/
/*        font-size: 12px;*/
/*    }*/
/*    #roles-mafia .selctive-row .checkbox-parent{*/
/*        margin-top: 10px;*/
/*        text-align: right;*/
/*    }*/
/*    #roles-mafia .selctive-row button.close-row{*/
/*        font-size: 12px;*/
/*        padding: 0px 10px;*/
/*    }*/
/*    #roles-mafia .selctive-row{*/
/*        padding: 5px;*/
/*    }*/
/*}*/
/*@media(max-width: 450px){*/

#general-mm-modal .close{
    top: 5px !important;
    left: 5px !important;
    width: 22px;
    height: 22px;
}
#general-mm-modal .close i{
    font-size: 10px;
}
#roles-mafia .selctive-row .checkbox-parent{
    margin-top: 5px;
    text-align: right;
    margin-right: 5px;
}
#roles-mafia .selctive-row button.close-row{
    font-size: 10px;
    padding: 0px 5px;
}
#roles-mafia .selctive-row{
    padding: 0px;
}
/*}*/



#roles-mafia .selctive-row > div.input-div:first-of-type{
    width: calc(60% - 10px);
    display: inline-block;
}
#roles-mafia .selctive-row > div.input-div:nth-of-type(2){
    width: calc(40% - 10px);
    display: inline-block;
    margin: 0 5px;
}

#roles-mafia .selctive-row .checkbox-parent .input-checkbox-div{
    width: 48px;
}
#roles-mafia .selctive-row {
    background: rgb(255 255 255 / 50%);
    border-radius: 15px;
    margin-bottom: 3px;
    position: relative;
}
#general-mm-modal #mafiaPlugin h4{
    text-align: center;
    margin: 5px auto 15px;
    font-size: 16px;
}
#roles-mafia{
    margin-top:35px;
}

#roles-mafia .selctive-row button.close-row {
    position: absolute;
    left: 10px;
    background-color: rgb(255 0 0 / 80%);
    border-radius: 15px;
    top: 3px;
    color: white;
    border: 1px solid #0000004f;
}
#roles-mafia .selctive-row button.close-row:hover {
    box-shadow: 0 14px 26px -12px rgba(255, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 0, 0, 0.2);
}
#roles-mafia .selctive-row input[readonly]{
    background: #ddd;
}
#mafiaPlugin button.show-result{
    color: #fff;
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #14b9bc;
    border: 1px solid #00000012;
    border-radius: 15px;
    position: relative;
}
#mafiaPlugin button.show-result[disabled]{
    padding-left:40px;
}

/*@media(max-width: 450px){*/
#mafiaPlugin button.show-result{
    font-size: 13px;
    padding: 4px 10px;
    top: -10px;
}
/*}*/
/*@media(min-width: 450px){*/
/*    #mafiaPlugin button.show-result{*/
/*        padding: 10px 50px;*/
/*    }*/
/*}*/


#mafiaPlugin button.show-result[disabled]{
    opacity: .5;
    cursor: not-allowed;
}
#mafiaPlugin button.show-result:hover{
    cursor: pointer;
    box-shadow: 0 14px 26px -12px rgba(0, 206, 207, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 206, 207, 0.2);
}

.aomc{
    text-align: right;
}
.aomc.center{
    text-align: center;
}
.aomc b{
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
}
.aomc p.caution{
    color: #895f02;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 0;
}
.aomc p{
    margin-bottom: 0;
}

.swal2-modal{
    direction: rtl;
    border-radius: 25px!important;
}
.swal2-content{
    font-size:14px!important;
}
.swal2-styled.swal2-confirm{
    background-color: #00ced1!important;
    box-shadow: 0 2px 2px 0 rgba(0,206,209, 0.14), 0 3px 1px -2px rgba(0,206,209, 0.2), 0 1px 5px 0 rgba(0,206,209, 0.12);
    border-radius: 25px!important;
}
.swal2-actions button{
    border-radius: 25px!important;
}
div[data-test="userListItem"] span.mroletag{
    position: absolute;
    left: 5px;
    font-size: 11px;
    border-radius: 25px;
    background: rgb(255 208 0);
    border: 1px solid;
    padding: 1px 8px 1px 6px;
    top: 5px;
}
button[data-test="raiseHandLabel"] + div button,
button[data-test="lowerHandLabel"] + div button{
    position: absolute!important;;
}

div[data-test="userListItem"] span.mroletag >span{
    position: relative;
    right: -3px;
    top: 1px;
}

.mafia-night-parent{
    background-color: black;
    border-radius: 25px;
    margin: 0 1px;
    box-shadow: 0 3px 11px 0px rgb(0 0 0 / 20%);
    color: white;
    font-size: 15px;
    border-radius: 0 5px 5px 25px;
    padding: 2px 15px 2px 3px;
    z-index: 2;
}

#mafiaPlugin #dayMechanisms .upPanel .states > button svg{

    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    fill: #b72ddb!important;
    width: 20px;
    height: 20px;

}


#mafiaPlugin #dayMechanisms .upPanel .states > button.active{
    background: #c3f2a7;
}
#mafiaPlugin #dayMechanisms .upPanel .states > button{
    border-radius: 10px 10px 5px 5px;
}
#mafiaPlugin #dayMechanisms .upPanel .states > button > span{
    position: absolute;
    bottom: -7px;
    z-index: 1;
    font-size: 9px;
    left: 0;
    right: 0;
    margin: auto;
    background: black;
    border: 1px solid #559a00;
    border-radius: 5px;
    line-height: 1;
    padding: 1px 2px;
    width: 41px;
    height: 13px;
}
#mafiaPlugin #dayMechanisms .upPanel .states > button > span:nth-of-type(3){
    line-height: 0.7;
}
#mafiaPlugin #dayMechanisms .upPanel .states{
    padding: 3px 0px 10px;
    transition: .3s all;
}
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div{
    padding-left:0!important;
}

.mafia-night-parent > button{
    font-size: 14px;
    cursor: pointer;
    padding: 1px 17px;
}
.mafia-night-parent > button:first-of-type:hover{
    background: linear-gradient(to right, #777, #333);
    box-shadow: 0 1px 10px 3px rgb(255 246 0 / 80%)!important;
}
.mafia-night-parent > button:last-of-type:hover{
    background: linear-gradient(to right, #333, #777);
    box-shadow: 0 1px 10px 3px rgb(255 246 0 / 80%)!important;
}

.mafia-night-parent > button:first-of-type{

    background: linear-gradient(to right, #333, #777);
    border-radius: 25px 0;
}
.mafia-night-parent > button:last-of-type{
    background: linear-gradient(to right, #777, #444);
    border-radius: 0 25px;
}
.mafia-day-bt{
    margin: 0 1px;
    cursor: pointer;
    background: linear-gradient(to top, #e0eafc, #fff);
    font-size: 16px;
    color: black;
    padding: 1px 34px 2px 20px;
    border-radius: 10px 0 0 10px;
    position: relative;
    right: -20px;
    z-index: 1;
    font-weight: 500;
    margin-left: -12px;
}
.mafia-day-bt:hover{
    box-shadow: 0 1px 10px 3px rgb(255 246 0 / 80%)!important;
}
.mafia-night-parent p{
    display: inline-block;
    padding: 0!important;
    margin: 0!important;
}

@media (max-width : 450px){
    .mafia-day-bt{
        margin-left: -19px;
        padding: 1px 28px 2px 15px;
    }
    .mafia-night-parent p{
        display: none;
    }
    .mafia-night-parent > button{
        padding: 1px 12px;
    }
    .mafia-night-parent{
        padding: 2px;
    }
    .mafia-night-parent > button{
        padding: 1px 13px;
    }
}

body.onprogress > main,
body.onprogress > div[role="presentation"],
body.onprogress >div[id="modals-container"],
body.onprogress > main > div{
    opacity: 0;
}
button#dragModal{
    background: transparent;
    border: none;
    position: absolute;

    cursor: pointer;
    top: 7px;
    z-index: 10;
}
@media(max-width: 450px){

    button#dragModal{left: 24px;}
}
@media(min-width: 450px){
    button#dragModal{left: 32px;}
}
button#dragModal svg{

    width: 14px;
    fill: #000;
    height: 16px;

}

@keyframes movingAround {
    0%   {transform: translate(0,0);}
    25%  {transform: translate(7px,0);}
    50%  {transform: translate(7px,-7px);}
    75%  {transform: translate(0px,-7px);}
    100% {transform: translate(0px,0px);}
}

#mafiaPlugin #results > div:first-of-type,
#mafiaPlugin #dayPlaylist > div:first-of-type,
#mafiaPlugin #submitResultM > div:first-of-type{

    text-align: center;
    border-radius: 15px;
    background: rgb(249 229 255 / 66%);
    padding: 5px 5px 0;
    border: 1px solid #fff;

}
#mafiaPlugin #results > div:first-of-type p.title,
#mafiaPlugin #submitResultM > div:first-of-type p.title,
#mafiaPlugin #dayPlaylist > div:first-of-type p.title{
    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    margin-top: 0;
}
/*@media(max-width: 450px){*/
#mafiaPlugin #results > div:first-of-type p.title,
#mafiaPlugin #dayPlaylist > div:first-of-type p.title{
    font-size: 12px;
}
#mafiaPlugin #results > div:first-of-type > div p.subtitle,
#mafiaPlugin #dayPlaylist > div:first-of-type > div p.subtitle{
    font-size: 12px;
}
#mafiaPlugin #results > div:first-of-type > div > div,
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div,
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.talked > div{
    font-size: 12px;
}
/*}*/


#mafiaPlugin #results > div:first-of-type > div,
#mafiaPlugin #submitResultM > div:first-of-type > div,
#mafiaPlugin #dayPlaylist > div:first-of-type > div{
    background: #ffffff87;
    padding: 3px;
    border-radius: 10px;
    min-width: fit-content;
    margin: 0 auto 3px;
}
#mafiaPlugin #dayPlaylist > div:first-of-type > div{
    width: fit-content;
}
#mafiaPlugin #results > div:first-of-type > div span,
#mafiaPlugin #submitResultM > div:first-of-type > div span,
#mafiaPlugin #dayPlaylist > div:first-of-type > div span{
    padding-right: 5px;
}
#mafiaPlugin #results > div:first-of-type > div p.subtitle,
#mafiaPlugin #submitResultM > div:first-of-type > div p.subtitle,
#mafiaPlugin #dayPlaylist > div:first-of-type > div p.subtitle{

    display: block;
    margin: 0;
    font-weight: 500;
    margin-bottom: 5px;

}
#mafiaPlugin #dayMechanisms  .upPanel .actions svg{
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    height: 18px;
    fill: #b72ddb!important;
    width: 18px;
}
#mafiaPlugin #dayMechanisms  .upPanel .actions button{
    padding: 6px;
    display: inline-flex;
    background: #ffffff82;
}
/*#mafiaPlugin #dayMechanisms  .upPanel .actions button:hover{*/
/*    box-shadow: 0 0 3px 1px #22222229;*/
/*}*/
#mafiaPlugin #dayMechanisms  .upPanel{
    border-radius: 15px;
    background: #ffffff70;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
#mafiaPlugin #dayMechanisms .upPanel .actions button.active{
    background: #97fa94;
}
#mafiaPlugin #dayMechanisms  .upPanel .timing{
    direction: ltr;
    padding: 5px 10px 5px;
}
#mafiaPlugin #dayMechanisms  .upPanel .timing > div{
    display: inline-block;
    position: relative;
}
#mafiaPlugin #dayMechanisms  .upPanel .timing > div > input{
    background: #ffffffcf;
    border: none;
    text-align: center;
    min-width: 45px;
    border-radius: 5px;
    padding: 0;
}
#mafiaPlugin #dayMechanisms  .upPanel .timing > div > span {
    bottom: 0;
    left: -32px;
    top: 2px;
    position: absolute;
    color: #9524b3!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    font-size: 11px;
}
#rolingms #results{
    position: relative;
}
#mafiaPlugin #dayMechanisms  .upPanel .timing > div:nth-of-type(2) > span {
    right: -27px;
    left: unset;
}
#mafiaPlugin #dayPlaylist p.accsp .switch  svg{
    fill: #ff7b00;
    filter: drop-shadow(2px 3px 5px #ff7b00ff);
}
#mafiaPlugin #dayPlaylist  .talked p.accsp .switch  svg{
    fill: #37b32b;
    filter: drop-shadow(2px 3px 5px #37b32bff);
}
#mafiaPlugin button.drag{
    cursor: move;
    border: none;
    padding: 0;
    background: transparent;
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
}
#mafiaPlugin button.drag svg{
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    width: 17px;
    fill: #b72ddb!important;
}
#mafiaPlugin #submitResultM #submitResult.resultseted{
    background: rgb(230 255 229 / 66%);
}
#mafiaPlugin #submitResultM > div:first-of-type > div > div.checkbox-parent{
    background: rgb(255 255 255 / 50%);
    width: fit-content;
    margin: 10px auto 0 auto;
    border-radius: 25px;
    padding: 5px 5px 0 0;
    height: 29px;
    border: 1px solid #a1a1a17d;
}

#submitResultM #submitResult p.gameTime,
#gameResultDetail p.gameTime{
    margin: 0;
    color: #000;
}

#mafiaGameResultModal #gameResultDetail > div.winned,
#mafiaPlugin #submitResultM #submitResult > div.winned{
    background: rgb(230 255 229);
    border: 1px solid #fff;
}
#mafiaGameResultModal #gameResultDetail > div.winned .statusL,
#mafiaPlugin #submitResultM #submitResult > div.winned .statusL{
    background: #00ff15;
    color: black;
    border: 1px solid;
}
#mafiaGameResultModal #gameResultDetail > div.loosed .statusL,
#mafiaPlugin #submitResultM #submitResult > div.loosed .statusL{
    background: #ff9d00;
    color: #000;
    border: 1px solid;
}
#mafiaGameResultModal #gameResultDetail > div.loosed,
#mafiaPlugin #submitResultM #submitResult > div.loosed{
    background: rgb(255 229 229);
    border: 1px solid #fff;
}

#submitResultM .loadingOnline{
    left: 8px;
}
#submitResultM #submitResult p.submitedBefore{
    margin: 5px auto 0;
    font-size: 13px;
    background: #24ce32;
    width: fit-content;
    color: white;
    border-radius: 15px;
    padding: 0px 8px;
}
#submitResultM #submitResult p.submitedBefore i{
    font-size: 16px;
    position: relative;
    right: -4px;
    top: 2px;
}

#mafiaPlugin #submitResultM > div:first-of-type > div.intro{
    background: #fffffffa;
    border: 1px solid #559a00;
}

.tab-pane#submitResultM > p.title{

    font-weight: 700;
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    font-size: 13px;
    margin-top: 35px;
    margin-bottom: 8px;

}
.tab-pane#submitResultM div.input-checkbox-div{
    width: 45px;
}

#mafiaPlugin #results > div:first-of-type > div > div,
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div,
#mafiaPlugin #submitResultM > div:first-of-type > div > div:not(.checkbox-parent),
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.talked > div{

    display: flex;
    align-items: center;
    padding: 2px 2px 2px 10px;
    border-radius: 25px;
    text-align: center;
    justify-content: center;
    width: fit-content;
    margin: auto;
    border: 1px solid #0000002e;
    margin-bottom: 2px;
    flex-wrap: wrap;
    transition: .3s all;

}
.sendDirectParent #directMessinput{

    border: 1px solid #cacaca;
    border-radius: 10px;
    padding: 5px;
    width: 100%;
    background: #fbf6ff;

}
#mafiaPlugin #dayPlaylist p.accsp .message svg{
    fill: #ff0077;
    filter: drop-shadow(2px 3px 5px #ff0077ff);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny{
    background-color: #ca942a!important;
}
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.mafiashownight,
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.talked > div.mafiashownight{
    background: #fca3d6;
}
#rolingms >div.detty,
#submitResultM #submitResult{
    max-height: 410px;
    overflow-y: scroll;
}
#dayPlaylist {
    max-height: 320px;
    overflow-y: scroll;
}

#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.talked > div{
    background: #bbb;
}
#mafiaPlugin #dayPlaylist > div:first-of-type > div > div.talked{
    background: #ddd;
    padding: 5px;
    display: block;
}
#mafiaPlugin #dayMechanisms button{
    margin: auto 3px;
    border-radius: 25px;
    color: white;
    padding: 4px 15px;
    font-size: 11px;
    border: 1px solid #fffc;
    transition: .3s all;
    position: relative;
}

/*@media(min-width: 450px){*/
/*    #mafiaPlugin #dayMechanisms button {*/
/*        padding: 4px 25px;*/
/*        font-size: 13px;*/
/*    }*/
/*}*/
/*@media(min-width: 450px){*/
/*    #mafiaPlugin #dayMechanisms button {*/
/*        padding: 4px 15px;*/
/*        font-size: 11px;*/
/*    }*/
/*}*/

#mafiaPlugin #dayMechanisms button[disabled]{
    opacity: .5;
}

#mafiaPlugin #dayMechanisms button:hover{
    box-shadow: 0 14px 26px -12px rgb(216 216 216 / 42%), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgb(202 208 202 / 20%);
}

#mafiaPlugin #dayMechanisms button.nextTalk{
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #4cafaf;

}
#mafiaPlugin #dayMechanisms button.resetM{
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #999999;
}
#mafiaPlugin #dayMechanisms button.automaticM{
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%);
    background-color: #00ced1;
}
#mafiaPlugin #dayMechanisms{
    margin-top:30px;
}
.nav-tabs>.nav-item.disabled{
    cursor: not-allowed;
    background: #bbb;
}
#mafiaPlugin #dayPlaylist div.accs{
    background: #00000017!important;
    border: 1px solid #a6a6a6!important;
    padding: 1px!important;
}

/*#general-mm-modal{*/
/*    !*background-image: radial-gradient( circle farthest-corner at 10% 20%, rgb(63 82 100) 0%, rgb(112 60 105) 90% );*!*/
/*    background: none;*/
/*}*/

/*@media (min-width: 450px) {*/
/*    .nav-tabs > .nav-item:hover {*/
/*        box-shadow: 0 0 3px 1px #22222229;*/
/*    }*/
/*    .nav-tabs>.nav-item {*/
/*        padding: 10px 10px;*/
/*        font-size: 13px;*/
/*    }*/
/*    .nav-tabs>.nav-item svg{*/
/*        width: 24px;*/
/*        height: 24px;*/
/*        margin-left: 12px;*/
/*    }*/
/*    .nav-tabs>.nav-item span.desc {*/
/*        font-size: 11px;*/

/*    }*/
/*}*/
/*@media (max-width: 450px) {*/
.nav-tabs>.nav-item {
    padding: 5px;
    font-size: 11px;

}
.nav-tabs>.nav-item svg{
    width: 20px;
    height: 20px;
    margin-left: 8px;

}
.nav-tabs>.nav-item span.desc {
    font-size: 9px;

}
/*}*/
.nav.nav-tabs>li:not(:last-of-type) {
    margin-bottom: 5px;
}

.nav-tabs>.nav-item {
    background: #ffffff4a;
    color: #222;
    transition: .3s all;
    border: 1px solid #fff2!important;
    border-radius: 15px;
    font-weight: 500;
    direction: rtl;
    text-align: left;
    vertical-align: middle;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.nav.nav-tabs {
    position: relative;
    display: flex;
    flex-flow: row;
    white-space: nowrap;
    justify-content: space-around;
    margin-bottom: 0;
    direction: ltr;
    margin-top: 5px;
    border: none;
    direction: rtl;
    flex-wrap: wrap;
    flex-direction: column;
}
.upp-label {
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
}
.upp-label svg {

    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);

    fill: #b72ddb!important;
}
.upp-label svg {
    width: 14px;
    margin: 5px;
}
.upp-label span{
    font-size: 12px;
}



.upp-label span{

    color: #222;
    font-weight: 200;
}
.nav-tabs>.nav-item svg{
    color: #b72ddb!important;
    filter: drop-shadow(2px 3px 5px #b72ddb55);
    fill: #b72ddb!important;


}
.tab-content.tab-space > .tab-pane:not(.active){
    display: none;
}


/*@media (min-width: 450px) {*/
.nav-tabs > .nav-item .title {
    font-size: 13px;
}
/*}*/
.nav-tabs>.nav-item span.desc {
    font-weight: 500;
    color: #895f02;
}

.back-tl-pa{
    position: absolute;
    top: 4px;
    right: 4px;
    text-align: left;
    display: none;
    z-index: 10;
}

.back-tl-pa  span{
    position: relative;
    left: -6px;
    top: -10px;
    color: #222;
    font-weight: 300;
    font-size: 12px;
}

.back-tl-pa .back-tl svg{
    width: 26px;
    height: 26px;
    display: inline-block;
    border-radius: 100%;
    background-color: #00ced1;
    color: #ffffff;
    line-height: 30px;
    text-align: center;
    padding: 0;
    opacity: 1;
    box-shadow: 0 0 10px rgba(0 ,206 ,207, 0.5);
    font-size: 11px;
    border: 1px solid;

}
.back-tl-pa .back-tl svg > path:first-of-type{
    fill: white;
}
.back-tl-pa .back-tl{
    border: none;
    background: #ffffff57;
    margin: 0;
    height: 28px;
    border-radius: 25px;
    padding-right: 1px;
    padding-left: 13px;
}


.back-tl-pa .back-tl i{
    font-size: 24px;
    top: 3px;
}
.tab-pane.active#statesm{
    margin-top:30px;
}

.scenario-roles-av,
.scearios-sec{
    background: rgb(255 255 255 / 35%);
    padding: 5px;
    border-radius: 25px;
    margin: 5px 0;
}
.scearios-sec .role-title{
    text-align: center;
    font-weight: 500;
    color: #000;
    margin: 0 0 5px;
}
.scenario-roles-av .checkbox-parent.mini{
    padding: 0;
    width: 50%;
    display: inline-block;
    text-align: right;
}
.scearios-sec > div{
    display: none;
    padding: 1px 0;
}

.scenario-roles-av div.input-checkbox-div input[disabled] + label{
    opacity: .7;
}
.scearios-sec {
    padding-top:0!important;
    padding-bottom: 0!important;
}
.scearios-sec.customParticipants{
    padding:5px!important;
    text-align: center;
}
.scearios-sec.customParticipants button{
    margin:0!important;
}
.scenario-roles-av .customRole,
.customParticipantss .customRole{
    position: relative;
    background: #ffffff61;
    padding: 2px 25px 2px 5px;
    border-radius: 25px;
    border: 1px solid #00000059;
    font-size: 12px;
    margin-bottom: 5px;
}
.scenario-roles-av .customRole input,
.customParticipantss .customRole input{
    background: transparent;
    border: none;
    color: #000;
    width:100%;

}
.scenario-roles-av .customRole button,
.customParticipantss .customRole button{
    position: absolute;
    right: 3px;
    border: 1px solid #fff;
    background: #e53636;
    color: #fff;
    top: 3px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.scenario-roles-av >div{
    text-align: right;
}

div.customRolePa > div{
    width: 50%;
}
button.goToDayPlz{
    padding: 4px 10px!important;
    background: linear-gradient(224deg, #7a7a7a80 30%, #bdbdbd52 44%) !important;
    background-color: #4caf50!important;
    color: white!important;
}
div[data-test="webcamConnecting"] img{
    width: 100%;
}

#simpleModal[data-test="webcamSettingsModal"] ul[role="tablist"] > li{
    color:#000;
}
#simpleModal[data-test="webcamSettingsModal"] ul[role="tablist"] > li.is-selected {
    color: #000;
    background: #4af3ff80;
    border-radius: 11px;
    border: 1px solid #fff;
}

div[data-test="chatMessageItem"] > div:first-of-type > div:first-of-type > div:first-of-type{
    background-size: cover!important;
    background-position: center!important;
}