/*
此样式表为：网动WEB会议客户端会外自定义的会议室里元素样式设置
*/

html{width:100%; height: 100%;}
body{width: 100%; height: 100%; padding: 0; margin: 0; font:12px Arial,Helvetica,Verdana;color:#5a5a5a;}
.logo{ width:145px; height:50px; position: fixed; top:2%; left:2%; z-index: 9000; background-repeat: no-repeat; background-position: top left}
/*会议室名*/
#roomInfo{
    display: table-cell;
    position: fixed;
    width: 90%;
    height:18px;
    color: #F0F0F0;
    font-size:18px;
    font-weight:500;
    text-align: center;
    vertical-align: middle;
    top: 3%;
    left: 5%;
    letter-spacing: 2px;
    z-index: 1006;
}

/*.mask{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #737373;
    !*background-color: rgba(115,115,115,1);*!
    filter: alpha(opacity=30);
    -ms-filter: "alpha(opacity=30)";
    !*z-index: 100;*!
    !*background:url(../images/login_bgx.gif);*!
}*/

#meet_body{
    width: 85%; height: 85%; top:5%; left: 7.5%; /*position: absolute;*/z-index: 99;
}

/* iamenu_root,footBar的根布局，控制menu栏居中 */
#iamenu_root{
    width: 100%;
    height: 8%;
    min-height: 70px;
    max-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    z-index: 100;
}

/*iactive使用的footBar*/
#iamenuBar{

    /* width: 500px; */
    min-width:600px;
    max-width: 950px;
    height: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    white-space: nowrap;
    position: absolute;
    /* background: #3c3c3c; */
    background: rgba(20, 20, 20, 0.8);
    border-radius: 6px;
    
    /* margin-left: 30%;   后面写适配逻辑的时候，要根据实际的屏幕宽高来设置左边距来居中 */
    
    /* filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8; */
    /* background-image: linear-gradient(0deg, #212121, #252525); */
}
/* #iamenu_left, #iamenu_middle, #iamenu_right{ height: 100%;float: left;} */
/* #iamenu_left{ width: 33%; display: flex; justify-content: left; align-items: center;}
#iamenu_right{width: 33%; display: flex; justify-content: flex-end; align-items: center;}
#iamenu_middle{ width: 34%;} */
/* #iamenu_middle_child{ height: 100%; display: flex; justify-content: center; align-items: center; vertical-align: center;} */

/* toolbox_content_item, 每个menu+text的item */
.toolbox_content_item{
    width: 75px;
    height: 60px;
    max-width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-block-end: 5px; */
    margin-right: 20px;
    flex-shrink: 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    /* cursor: pointer; */
}

.toolbox_content_item:hover{
    cursor: pointer;
    background-color: #5a5a5a;
    border-radius: 3px;
}

/* 麦克风、摄像头，设置弹性盒子为横向 */
#iamenu_item_start_audio, #iamenu_item_start_video , #iamenu_item_change_moudle {
    flex-direction: row;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}

/* toolbox 带有三角的菜单，左边上下的父div */
.toolbox{
    width: 70px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
}

.toolbox:hover{
    cursor: pointer;
    background-color: #5a5a5a;
    border-radius: 3px;
}

/* toolbox_item_check 菜单右侧的打开选项 */
.toolbox_item_check{
    width: 16px;
    height: 60px;
    max-width: 16px;
    min-width: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
}

.toolbox_item_check:hover{
    cursor: pointer;
    background-color: #5a5a5a;
    border-radius: 3px;
}

/* toolbox_item_check_img 菜单右侧打开选项的三角图标 */
.toolbox_item_check_img{
    width: 10px;
    height: 10px;
    background-image: url('../iam_sdk/images/tools_check_up.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
}

/* foot_menu_text, 每个menu对应的文本 */
.foot_menu_text{

    height: 16px;
    margin-block-start: 0;
    margin-block-end: 0px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #E0E0E0;
    line-height: 16px;
}

/* iamenu_foot_menu_basestyle，menu菜单样式 */
.iamenu_foot_menu_basestyle{
    width: 100%;
    height: 100%;
    max-width: 40px;
    min-width: 40px;
    max-height: 40px;
    min-height: 40px;
    /* margin-block-start: 2px; */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
}

/* vertical_line, 退出按钮左边竖线 */
.vertical_line{
    width: 1px;
    height: 60%;
    min-width: 1px;
    background: rgb(200, 200, 200);
    margin-block-start: 10px;
    margin-block-end: 5px;
    margin-left: 25px;
}

/* iamenu_logout，退出按钮 */
#iamenu_logout{ 
    width: 48px;
    height: 40px; 
    min-width: 48px;
    min-height: 40px;
    margin-left: 3%;
    margin-right: 3%;
    /* border-radius: 5px; */
    margin-block-start: 5px;
    margin-block-end: 0px;
    /* background: rgb(255, 0, 0); */
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* .foot_menu_float{float: left;} */

#iamenu_start_screen{/*float: left;*/background-image: url("../iam_sdk/images/screen.png");}
#iamenu_handup{/*float: left;*/ background-image: url("../iam_sdk/images/handup.png");}
#iamenu_start_audio{ background-image: url("../iam_sdk/images/audio_open.png");}
#iamenu_logout{ background-image: url("../iam_sdk/images/logout.png");}
#iamenu_start_video{ background-image: url("../iam_sdk/images/video_open.png");}
#iamenu_change_layout{ /* float: right; */ background-image: url("../iam_sdk/images/change_layout.png")}
#iamenu_bt_userlist{ /* float: right; */ background-image: url("../iam_sdk/images/userlist.png")}
#iamenu_set_config{ /* float: right; */ background-image: url("../iam_sdk/images/sysset.png")}

/* #iamenu_start_screen:hover{ background-image: url("../iam_sdk/images/screen_hover.png");}
#iamenu_handup:hover{background-image: url("../iam_sdk/images/handup_hover.png")}
#iamenu_start_audio:hover{background-image: url("../iam_sdk/images/audio_open_hover.png")}
#iamenu_logout:hover{background-image: url("../iam_sdk/images/logout_hover.png")}
#iamenu_start_video:hover{background-image: url("../iam_sdk/images/video_open_hover.png")}
#iamenu_change_layout:hover{background-image: url("../iam_sdk/images/change_layout_hover.png")}
#iamenu_bt_userlist:hover{background-image: url("../iam_sdk/images/userlist_hover.png")}
#iamenu_set_config:hover{background-image: url("../iam_sdk/images/sysset_hover.png")} */
/*iactive使用的footBar*/