abbr{border:0px; margin:0px;}

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

.form_main a{padding-bottom:2px !important;}

/***************Thickbox***********************/
#TB_title{display:none !important;}

#TB_window {background-color:transparent !important;border:none !important; z-index: 2000;}
/***************End- Thickbox***********************/

.error_font {color:#C40000 !important;}

#error_msg_expiry_date{width:170px;}

#error_msg_ccv_number{width:155px;text-align:center;}

/***************Register - Accept Terms Error***********************/
.form_check_right_red{float:left;padding:2px 0px 0px 0px;margin:0px;width:198px;color:#F83939; !important;}

.form_check_right_red a{float:none;padding:0px 0px 0px 0px;margin:0px;color:#007ad4;text-decoration:underline;}
/***************Register - Accept Terms Error***********************/

/***************Payment Gateway - Error***********************/
.server_error_mes{float:left;padding:0px 0px 0px 10px;margin:0px;width:603px; font-size:11px;color:#c40000;}

.CheckoutExp_left_inline_text{float:left;padding:2px 0px 0px 0px;margin:0px;width:127px; font-size:11px;color:#424242;height:16px;}

.CheckoutExp_left_error{float:left;padding:2px 0px 0px 0px;margin:0px;width:127px; font-size:11px;color:#c40000;height:16px;}

.CheckoutExp_left_main_red{float:left;background:url(../img/layout/textbox_small_off.jpg) no-repeat;padding:4px 0px 0px 5px;padding:6px 0px 0px 5px\9;margin:0px;width:262px;height:24px;height:22px\9; font-size:12px;}

.CheckoutExp_left_main_red input{float:left;background-color:#ecd4d4;padding:0px 0px 0px 0px;margin:0px;width:120px;height:20px; font-size:12px;border:0px;color:#424242;}

.payment_CreateBack{float:left;padding:0px 0px 0px 0px;margin:0px;width:613px;}

.payment_CreateBack a{float:left;padding:0px 0px 0px 0px;margin:0px;width:613px; font-size:12px;color:#429bde;text-decoration:underline;}

.gryBoxPriceLeft_ordersummary {float:left;padding:0px 0px 0px 0px;margin:0px;width:120px;}

.heightauto{height:auto;}

.payment-confirm-left-panel{padding-top: 15px;}

.payment_error_class {display:block;}
/***************Payment Gateway - Error***********************/

/***********************Login and Reset-Password Validation***********************************/
/*.CheckoutLeftTextbox_error {width:277px !important;} */

.header_email_main p{width:220px !important;}

.logout_main{display:none}
/************************Login and Reset-Password Validation******************************/

/************************Design pages******************************/
input.logo_img{position:absolute;top:332px;left:639px;width: 170px;height:45px;direction:rtl;font-size:2em;-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;    z-index: 2;}

#upload-logo {background:url(../img/layout/btn_browser_blue.jpg) no-repeat;color:#ffffff;z-index:1;width:170px;height:42px;font-size:10px;cursor: pointer;}

.active-icon {background:url(../img/layout/btn_active.jpg) no-repeat;color:#ffffff;z-index:1;width:170px;height:42px;font-size:10px;cursor: pointer;}

.browser_image {background:url(../img/layout/btn_browser_blue.jpg) no-repeat;color:#ffffff;z-index:1;width:170px;height:42px;font-size:10px;cursor: pointer;}

#summary-odd-bg-img {z-index:1;width:80px;height:12px;cursor: pointer;}

#summary-even-bg-img {z-index:1;width:80px;height:12px;cursor: pointer;}

.select_color input{width:142px;}

input#feature_bg{position:absolute;top:363px;left:559px;width:170px;height:42px;direction:rtl;font-size:2em;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;z-index:2;
cursor:pointer;}

.list-error {padding:8px;margin-left:40px; font-size:11px;color:#c40000;}
/************************Design pages******************************/

.darkbg{background:#ddd !important;}

.status{padding:0px;margin:0px; font-size:11px;}

ul#files{ list-style:none; padding:0; margin:0;}
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:180px; max-height:150px;}

#btn-admin-save{cursor: pointer;}
#app-status-img{cursor: pointer;}

.success{ background:#99f099; border:1px solid #339933;}

.error{ background:#f0c6c3; border:1px solid #cc6622;}
/************************Design pages******************************/

.color_value {background-image:url(../img/layout/color_value_textbox.png);background-repeat: no-repeat;border:none;float: left;height: 28px;margin: 0;padding: 2px 0 0 3px;width: 72px;}

.color_value input {float: left;height: 23px;margin: 0;padding:0px 0px 0px 5px;padding:4px 0px 0px 5px\9;height: 19px\9;width: 64px;border:0px; font-size:13px;color:#999;}
/******************Edit-profile error*****************/

.pass_err{height:25px !important;}

/******************app-info icon browse*****************/
#browse_icon_low {background:url(../img/layout/btn_browser.jpg) no-repeat;z-index:1;width:80px;height:27px;cursor: pointer;float:left;margin: 32px 0 0 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;}

#browse_icon_high {background:url(../img/layout/btn_browser.jpg) no-repeat;z-index:1;width:80px;height:27px;cursor: pointer;float:left;margin: 32px 0 0 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;}

/******************Getting Started Accordion*****************/
.gettingStartApp_content ul{float:left;padding-left:20px;}

/******************app-feature(Select-feature)*****************/
#feature_error{float:left;padding:2px 0px 0px 0px;margin:0px;width:607px; font-size:11px;color:#c40000;height:16px;}

.reset_invalid {height:250px;margin-top:30px;}

.feature_yourIcon_left p{float:left;padding:10px 0px 0px 0px;margin:0px 0px 0px 0px;}

/**** FEATURE PANEL ICON & BACKBROUND CSS STARTS HERE ****/
#fp_active_icon {background:url(../img/layout/btn_active.jpg) no-repeat; color:#ffffff; z-index:1; width:170px; height:42px; font-size:10px; cursor:pointer; margin-top:18px;}

#fp_inactive_icon {background:url(../img/layout/btn_inactive.jpg) no-repeat; color:#ffffff; z-index:1; width:170px; height:42px; font-size:10px; cursor:pointer;margin-top:18px;}

#fp_background {background:url(../img/layout/btn_upload.jpg) no-repeat; color:#ffffff; z-index:1; width:170px; height:42px; font-size:10px; cursor:pointer;}

.fb_save_button {float:right; padding:10px 15px 20px 10px; margin:0px 0px 10px 0px; width:581px; background:url(../img/layout/bottom_border.jpg) no-repeat left bottom;}

.fb_save_button a{float:right; margin:0px 10px 0px 0px;	padding:0px;}
/**** FEATURE PANEL ICON & BACKBROUND CSS ENDS HERE ****/

/**** FEATURE LIST ICON CSS STARTS HERE ****/
#list_active_icon {background:url(../img/layout/btn_active.jpg) no-repeat; color:#ffffff; z-index:1; width:170px; height:42px; font-size:10px; cursor:pointer; margin-top:18px;}

#list_inactive_icon {background:url(../img/layout/btn_inactive.jpg) no-repeat; color:#ffffff; z-index:1; width:170px; height:42px; font-size:10px; cursor:pointer;margin-top:18px;}
/**** FEATURE LIST ICON CSS ENDS HERE ****/

#color-picker-popup {display: none;}

#gallery-popup {display: none;}

/** MTM010812 #list_fp_active_icon {background:url(../img/layout/btn_browser_blue.jpg) no-repeat;color:#ffffff;z-index:1;width:170px;height:42px;font-size:10px;cursor: pointer;margin-top:18px;}**/

/** MTM010812 #list_fp_inactive_icon {background:url(../img/layout/btn_browser_blue.jpg) no-repeat;color:#ffffff;z-index:1;width:170px;height:42px;font-size:10px;cursor: pointer;
margin-top:18px;} **/

#list_appviewer {width:256px !important;}

#list_appviewer h1, #list_appviewer p{width:251px !important;}

.share_right{float:right !important;}
  
.contact-icon{float:left; margin:0px 60px 0px 0px; padding:0px 0px 0px 0px; width:255px;  display: block;}

.contact-icon h1{float:left;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;width:161px;font-size:13px;font-weight:normal;color:#424242;text-transform:none;height:17px;}

.contact-icon p{float:left;padding:1px 0px 0px 0px;margin:0px 0px 0px 0px;width:161px;font-size:11px;font-weight:normal;color:#727272;text-align:center;}

#contact-active-icon a {color: #0079D4;}

.feature_panel_icon_left_back_add{float:left;background:url(../img/layout/icon_border_40_40.jpg) no-repeat;padding:0px 0px 0px 0px;margin:20px 0px 0px 0px;width:40px;	height:40px;}

.feature_panel_icon_right_add {float:left;padding:15px 0px 0px 0px;margin:0px 0px 0px 0px;width:452px;}

.label_color {background-image:url(../img/layout/color_label_txt.png);background-repeat: no-repeat;border:none;float:none;height:29px;margin:0;padding:2px 0 0 3px;
width: 126px;}

.label_color_red {background-image:url(../img/layout/color_label_txt_red.png);background-repeat: no-repeat;border:none;float:left;height:29px;margin:0;padding:2px 0 0 3px;width: 126px;}

.label_color input {
/*    float:left; */
    height:23px;
    margin:0;
    padding:0px 0px 0px 5px;
    width: 115px;
    border:0px; 
    font-size:13px;
    line-height:1.5;
    color:#999;
    font-family: Verdana, "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}

.label_color_red input {float:left;height:23px;margin:0;padding:0px 0px 0px 5px;padding:4px 0px 0px 5px\9;height: 19px\9;width: 100px;border:0px; font-size:13px;color:#999;}

.label_color_error {padding:8px;margin-left:40px; font-size:11px;color:#c40000;}

.color_picker_txt_div {background-image:url(../img/layout/color_value_textbox.png);background-repeat: no-repeat;border:none;float: left;margin: 0;
padding: 1px 0 0 1px; width:75px;height: 29px;}

.color_picker_txt_div input {float:left;margin:0;padding:0px 0px 0px 11px;border:0px; font-size:13px;color:#999;width:62px; width:62px\0/; height:26px;} 

/**** MANAGE CONTENT CSS STARTS HERE ****/
/*.icon_left_main{
   float:left;
   padding:5px 0px 0px 3px;
   margin:0px 0px 0px 0px;
   width:110px;
}*/

.manage_rss_icon_border{float:left;padding:0px 0px 0px 0px;margin:10px 0px 0px 0px;}

.manage_rss_icon_border p{color:#727272; font-size:11px; font-weight:normal;}

.manage_content_category{float:left;width:259px;height:22px;cursor:pointer;background:url(../img/layout/drop_manage.jpg) no-repeat; font-size:12px;color:#424242;padding:6px 0px 0px 8px;}

.manage_content_category_red{float:left;width:259px;height:22px;cursor:pointer;background:url(../img/layout/drop_manage_red.jpg) no-repeat; font-size:12px;color:#424242;padding:6px 0px 0px 8px;}

.manage_content_desc{float:left;background:url(../img/layout/manage_textarea.jpg) no-repeat;padding:6px 0px 0px 7px;margin:0px 0px 0px 0px;width:260px;height:74px;	 font-size:13px;color:#424242;}

.manage_content_desc textarea{font-family: Verdana, "Gill Sans", Calibri, "Trebuchet MS", sans-serif; float:left;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;width:256px;height:68px; font-size:12px;color:#424242;border:0px;}

.manage_content_desc_red{float:left;background:url(../img/layout/manage_textarea_red.jpg) no-repeat;padding:6px 0px 0px 7px;margin:0px 0px 0px 0px;width:260px;height:74px;	 font-size:13px;color:#424242;}

.manage_content_desc_red textarea{float:left;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;width:256px;height:68px; font-size:12px;color:#424242;border:0px;background-color:#ECD4D4;}

.Managecalc_inner_red{float:left;padding:6px 0px 0px 0px;margin:0px 0px 0px 0px;width:154px; font-size:12px;color:#424242;}

.Managecalc_inner_red input{float:left;padding:0px 5px 0px 5px;margin:0px 0px 0px 0px;width:144px; font-size:12px;color:#424242;	height:26px;padding:4px 0px 0px 8px\9;height:22px\9;border:1px #FF0000 solid;}

.ManageDes_red{float:left;padding:6px 0px 0px 0px;margin:0px 0px 0px 0px;width:324px; font-size:12px;color:#424242;}

.ManageDes_red textarea{float:left;padding:0px 0px 0px 5px;margin:0px 0px 0px 0px;width:315px; font-size:12px;color:#424242;	height:55px;border:1px #FF0000 solid;}

.ManageInternal_inputbox_red{float:left;padding:3px 0px 0px 0px;margin:0px 0px 0px 0px;width:281px; font-size:12px;color:#424242;}

.ManageInternal_inputbox_red input{float:left;padding:0px 5px 0px 5px;margin:0px 0px 0px 0px;width:268px; font-size:12px;color:#424242;height:26px;padding:4px 0px 0px 8px\9;height:22px\9;border:1px #FF0000 solid;}

.ManageContentCentre_no_content{float:left;padding:12px 0px 0px 0px;margin:0px 0px 0px 0px;width:98%;height:20px; text-align:center;}

.Manageconten_input_red{float:left;padding:3px 0px 0px 0px;margin:0px 0px 0px 0px;width:235px; font-size:12px;color:#424242;}
.Manageconten_input_red input{float:left;padding:0px 5px 0px 5px;margin:0px 0px 0px 0px;width:235px; font-size:12px;color:#424242;height:26px;padding:4px 0px 0px 8px\9;height:22px\9;border:1px #FF0000 solid;}
.Manageconten_input_red textarea{float:left;padding:0px 0px 0px 5px;margin:0px 0px 0px 0px;width:240px; font-size:12px;color:#424242;height:70px;border:1px #FF0000 solid;}

.ManageInternal_inputbox_new_red{float:left;padding:3px 0px 0px 0px;margin:0px 0px 0px 0px;width:235px; font-size:12px;	color:#424242;}
.ManageInternal_inputbox_new_red input{float:left;padding:0px 5px 0px 5px;margin:0px 0px 0px 0px;width:235px; font-size:12px;	color:#424242;height:26px;padding:4px 0px 0px 8px\9;height:22px\9;border:1px #FF0000 solid;}

.ManageContent_RSS{float:left;background:url(../img/layout/cal_back.jpg) repeat-x;padding:6px 0px 0px 10px;margin:0px 0px 0px 0px;width:575px;height:21px; font-size:13px;font-weight:bold;border:1px solid #D0D0D0;}

.ManageContent_RSS_bottom{float:left;background-color:#fff;padding:0px 10px 10px 10px;margin:0px 0px 0px 0px;width:565px; font-size:12px;border:1px #d0d0d0 solid;border-top:none;}

.ManageContent_RSS_option{float:left;padding:25px 0px 0px 0px;margin:0px 0px 0px 0px;width:560px; font-size:12px;color:#424242; }

.ManageContent_RSS_option .header{padding:0px 0px 5px 0px;font-weight:bold;}

.ManageContent_RSS_option ul{float:left;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;width:560px; font-size:12px;color:#424242;display:block;}
.ManageContent_RSS_option ul li{float:left;padding:0px 0px 5px 0px;margin:0px 0px 0px 0px;width:560px;list-style:none;}

.ManageContentList{float:left;background-color:#fff;padding:0px;margin:0px 0px 0px 0px;width:191px; font-size:12px;	border:1px #d0d0d0 solid;border-top:none; }
.ManageContentList ul{background-color:#fff;margin:0;padding:0;float:left;display:block;width:201px;display:block;}
.ManageContentList ul li{float:left;background-color:#fff;margin:0;padding:4px 0px 4px 10px;list-style:none; font-size:12px;	color:#575757;width:191px;}
.ManageContentHeader{float:left; width:560px; margin:0 0 0 0; padding:0 0 10px 0; font-weight:bold; font-size:12px; color:#424242;}
.resetbox_text_right ul li{cursor:pointer;}

.Manageph span{color: #C40000;font-size: 11px;margin: 0;padding: 0;}

.manage_content_close{float:right; margin-right:10px;}
.manage_content_close a{cursor:pointer;}

.content_preview{float:right;padding-top:16px; padding-left:10px; padding-right:10px;}
.content_preview a{color:#429BDE;float:right;   font-size:12px; margin:0;padding:0; text-decoration:underline; font-weight:bold;}

#preview_image{float:left; width:100%; padding-top:15px; text-align:center;}
#preview_title{float:left; width:100%; padding-top:15px;}
#preview_content{float:left; width:100%; padding-top:15px; padding-bottom:10px;}

#content-calendar-img-status{ padding-right:2px;}

.delete_item{cursor:auto !important; color:#C40000 !important;}

#external_url_error{font-size:11px; float:left; width:250px; padding-left:6px;}

.resetbox_text_right_a{padding-top:3px !important; padding-left:6px !important;}

.content_title{ float:left; padding-left:15px; padding-top:5px; font-size:14px; color:#424242; font-weight:bold;margin:0 0 0 0;}

.ManageInternal_inputbox_inner{ width:515px !important;}
#calendar_item_error{ padding-top:10px; padding-left:10px;}
#standard_item_error{ padding-top:10px; padding-left:10px;}
.item_require{font-weight:normal; color:#C40000; font-size:11px;}

#start_time_error{ margin-top:115px;}
#end_time_error{margin-top:115px;} 

.CheckoutLeftTextboxDisabled{
	float:left;
	background:url(../img/layout/add_app_textbox.jpg) no-repeat;
	padding:4px 0px 0px 5px;
	padding:6px 0px 0px 5px\9;
	margin:0px;
	width:262px;
	height:24px;
	height:22px\9;
	 
	font-size:12px;
}

.CheckoutLeftTextboxDisabled input{
	float:left;
	padding:0px 0px 0px 0px;
	margin:0px;
	width:259px;
	height:20px;
	 
	font-size:12px;
	border:0px;
	color:#424242;
    background-color:#CCCCCC !important;
	opacity:0.3;
	filter:alpha(opacity=30); /* For IE8 and earlier */
}

/*** MTM010812 >>>#description-odd-bg-img { cursor:pointer !important; text-decoration:underline; color:#0079D4 !important; float:right;} */

#content-calendar-img-status{padding-top:2px!important; width:250px!important;}
#calendar_desc_label{padding-top:10px;}

/**** MANAGE CONTENT CSS ENDS HERE ****/

.ignore-click {color: #c0c0c0; cursor: default;}

.save_button{float:left; border: 0 none;background:url(../img/layout/btn_save.jpg) no-repeat transparent;height:26px;width:87px;color:transparent;cursor:pointer; font-size:0; line-height:0; display:block; text-indent:-9999px; margin:0px 10px 0px 0px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; }

.saveclose_button{float:left; border: 0 none;background:url(../img/layout/btn_saveclose.jpg) no-repeat transparent;height:27px;width:119px;color:transparent;cursor:pointer; font-size:0; line-height:0; display:block; text-indent:-9999px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;}

.cancel_button{float:left; border: 0 none;background:url(../img/layout/btn_cancel.jpg) no-repeat transparent;height:27px;width:80px; color:transparent;cursor:pointer; font-size:0; line-height:0; display:block; text-indent:-9999px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;}

#editprofileform .CheckoutLeftTextbox_main input{font-weight:bold;}

.btn_manage:hover , .btn_manage.active{padding-right:1px !important;}


/*** NEW TAB MENU STARTS HERE ***/

/* menu redesign classes */
.content_app_top ul {margin:0px; padding:0px;}
.content_app_top ul li{float:left; list-style:none;}
.content_app_top ul li a .left{background:url(../img/layout/menu1_normal.png) repeat 0px 0px; width:5px; height:28px; float:left;}
.content_app_top ul li a .mid{ background:url(../img/layout/menu1_normal_bg.png) repeat-x 0px 0px; padding:7px 12px 4px;   float:left; height:17px; color:#fff; font-size:13px; text-align:center;}
.content_app_top ul li a .right{background:url(../img/layout/menu1_normal.png) repeat 5px 0px; width:5px; height:28px; float:left;}

.content_app_top ul li a:hover .left{background:url(../img/layout/menu1_hover.png) repeat 0px 0px; width:5px; height:28px; float:left;}
.content_app_top ul li a:hover .mid{ background:url(../img/layout/menu1_hover_bg.png) repeat-x 0px 0px; padding:7px 12px 4px;   float:left; height:17px; color:#4f4f4f; font-size:13px; text-align:center;}
.content_app_top ul li a:hover .right{background:url(../img/layout/menu1_hover.png) repeat 5px 0px; width:5px; height:28px; float:left;}

.content_app_top ul li a.active .left{background:url(../img/layout/menu1_selected.png) repeat 0px 0px; width:5px; height:28px; float:left; cursor:default;}
.content_app_top ul li a.active .mid{ background:url(../img/layout/menu1_selected_bg.png) repeat-x 0px 0px; padding:7px 12px 4px;   float:left; height:17px; color:#4f4f4f; font-size:13px; text-align:center; 
cursor:pointer; font-weight:bold;}
.content_app_top ul li a.active .right{background:url(../img/layout/menu1_selected.png) repeat 5px 0px; width:5px; height:28px; float:left; cursor:default;}

/* Menu 2 - Sub Menu Classes */

.upload_right_top ul {margin:0px; padding:0px;}
.upload_right_top ul li{float:left; list-style:none; margin-right:1px;}
.upload_right_top ul li a .left{background:url(../img/layout/menu2_normal_corner.png) repeat 0px 0px; width:5px; height:26px; float:left;}
.upload_right_top ul li a .mid{ background:url(../img/layout/menu2_normal_bg.png) repeat-x 0px 0px; padding:6px 12px 5px;   float:left; height:15px; color:#424242; font-size:13px; text-align:center;}
.upload_right_top ul li a .right{background:url(../img/layout/menu2_normal_corner.png) repeat 5px 0px; width:5px; height:26px; float:left;}

.upload_right_top ul li a:hover .left{background:url(../img/layout/menu2_hover_corner.png) repeat 0px 0px; width:5px; height:26px; float:left;}
.upload_right_top ul li a:hover .mid{ background:url(../img/layout/menu2_hover_bg.png) repeat-x 0px 0px; padding:6px 12px 5px;   float:left; height:15px; color:#4f4f4f; font-size:13px; text-align:center;}
.upload_right_top ul li a:hover .right{background:url(../img/layout/menu2_hover_corner.png) repeat 5px 0px; width:5px; height:26px; float:left;}

.upload_right_top ul li a.active .left{background:url(../img/layout/menu2_selected_corner.png) repeat 0px 0px; width:5px; height:26px; float:left;}
.upload_right_top ul li a.active .mid{ background:url(../img/layout/menu2_selected_bg.png) repeat-x 0px 0px; padding:6px 12px 5px;   float:left; height:15px; color:#4f4f4f; font-size:13px; text-align:center; 
cursor:pointer; font-weight:bold;}
.upload_right_top ul li a.active .right{background:url(../img/layout/menu2_selected_corner.png) repeat 5px 0px; width:5px; height:26px; float:left;}

/*** NEW TAB MENU STARTS HERE ***/

/*** NEW MAIN TAB MENU STARTS HERE ***/

.main_nav ul {margin:0px; padding:0px;}
.main_nav ul li{display:inline-block; list-style:none; margin-right:1px;}
.main_nav ul li a .left{
   /*background:url(../img/layout/main_menu_corner.jpg) repeat 0px 0px; */
   width:6px; 
   height:51px; 
   float:left;}
.main_nav ul li a .mid{
   /*background:url(../img/layout/main_menu_bg.jpg) repeat-x 0px 0px;*/ 
   padding:16px 12px 4px;  
   float:left; 
   height:31px; 
/*   color:#424242; */
   color:#ffffff;
   text-align:center; 
   font-size:14px; 
   font-weight:normal; 
   line-height: 22px;}
.main_nav ul li a .right{
   /*background:url(../img/layout/main_menu_corner.jpg) repeat 6px 0px; */
   width:6px; 
   height:51px; 
   float:left;}

/*
.main_nav ul li a:hover .left{background:url(../img/layout/main_menu_hover_corner.jpg) repeat 0px 0px; width:6px; height:51px; float:left;}
.main_nav ul li a:hover .mid{ background:url(../img/layout/main_menu_hover_bg.jpg) repeat-x 0px 0px; padding:16px 12px 4px;   float:left; height:31px; color:#262626; text-align:center;  font-size:14px; font-weight:bold; line-height: 22px;}
.main_nav ul li a:hover .right{background:url(../img/layout/main_menu_hover_corner.jpg) repeat 6px 0px; width:6px; height:51px; float:left;}

.main_nav ul li a.active_tab .left{background:url(../img/layout/main_menu_selected_corner.jpg) repeat 0px 0px; width:5px; height:51px; float:left; cursor:default;}
.main_nav ul li a.active_tab .mid{ background:url(../img/layout/main_menu_selected_bg.jpg) repeat-x 0px 0px; padding:16px 12px 4px;  height:31px; color:#262626; text-align:center; cursor:pointer;  font-size:14px; font-weight:normal; line-height: 22px;}
.main_nav ul li a.active_tab .right{background:url(../img/layout/main_menu_selected_corner.jpg) repeat 5px 0px; width:5px; height:51px; float:left; cursor:default;}
*/
.main_nav ul li a:hover .left{ width:6px; height:51px; float:left;}
.main_nav ul li a:hover .mid{ padding:16px 12px 4px;   float:left; height:31px; color:#A5CDFF; text-align:center;  font-size:14px; font-weight:bold; line-height: 22px;}
.main_nav ul li a:hover .right{ width:6px; height:51px; float:left;}

.main_nav ul li a.active_tab .left{ width:6px; height:51px; float:left;}
.main_nav ul li a.active_tab .mid{ padding:16px 12px 4px;   float:left; height:31px; color:#A5CDFF; text-align:center;  font-size:14px; font-weight:bold; line-height: 22px;}
.main_nav ul li a.active_tab .right{ width:6px; height:51px; float:left;}

.icon_home{	width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_home.png) no-repeat 0px 0px; margin-right:5px;}
.icon_pricing{	width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_overview.png) no-repeat 0px 0px; margin-right:5px;}
 a.active_tab .mid .icon_pricing{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_overview_active.png) no-repeat 0px 0px; margin-right:5px;}
 a:hover .mid .icon_pricing{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_overview_active.png) no-repeat 0px 0px; margin-right:5px;}

.icon_faq{	width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_faq.png) no-repeat 0px 0px; margin-right:5px;}
 a.active_tab .mid .icon_faq{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_faq.png) no-repeat 0px 0px; margin-right:5px;}
/* a.active_tab .mid .icon_faq{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_faq_active.png) no-repeat 0px 0px; margin-right:5px;} */
/* a:hover .mid .icon_faq{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_faq_active.png) no-repeat 0px 0px; margin-right:5px;} */
 a:hover .mid .icon_faq{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_faq.png) no-repeat 0px 0px; margin-right:5px;}

.icon_contact{	width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_contact.png) no-repeat 0px 0px; margin-right:5px;}
 a.active_tab .mid .icon_contact{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_contact_active.png) no-repeat 0px 0px; margin-right:5px;}
 a:hover .mid .icon_contact{width:25px; height:24px; display:block; float:left; background:url(../img/layout/icon_contact_active.png) no-repeat 0px 0px; margin-right:5px;}
 
/*** NEW MAIN TAB MENU ENDS HERE ***/

.edit-update{padding-right:5px;float:left; border: 0 none;background:url(../img/layout/btn_update.jpg) no-repeat transparent;height:26px;width:102px;color:transparent;cursor:pointer; font-size:0; line-height:0; display:block; text-indent:-9999px;}

#form_error_app{color:red; font-size:12px; padding-left:5px;}

/*** BROWSE PROBLEM FOR IE ***/
#content-rss-img{width:85px !important;}
#content-calendar-img{width:85px !important;}
.linespace { height: 20px; line-height: 20px; clear: both;}

.feature_icon_main label.radio_unchecked:hover{cursor:pointer !important;}
label.radio_unchecked:hover{cursor:pointer !important;}
.galleryboxContainerInnerLeft input:hover{cursor:pointer !important;}

/************************ Your Files (App Content) — modern grid ******************************/
/* Toolbar: search, upload, delete — right-aligned on one row; upload/delete are icon buttons */
#app-your-files #your-files-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:10px 0; }
#app-your-files #your-files-search{ width:240px; max-width:60%; }
#app-your-files #your-files-upload-btn,
#app-your-files #delete-file-btn{ line-height:22px; }
#app-your-files #your-files-selected-count:not(:empty){ margin-left:4px; }

#app-your-files #your-files-filterbar{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:nowrap; gap:16px; margin:0 0 10px; }
#app-your-files #your-files-filters{ margin:0; }
#app-your-files #your-files-filters .btn.active{ background:#428BCA; color:#fff; border-color:#357ebd; }
#app-your-files #your-files-sortwrap{ display:inline-flex; align-items:center; gap:6px; }
#app-your-files #your-files-sortwrap label{ margin:0; font-weight:normal; color:#666; font-size:12px; }
#app-your-files #your-files-sort{ width:auto; display:inline-block; }

/* Persistent drag-and-drop affordance. */
#app-your-files #your-files-drophint-static{ font-size:12px; color:#9aa3ad; margin:0 0 8px; }
#app-your-files #your-files-drophint-static .glyphicon{ margin-right:5px; }

/* Only the grid scrolls; toolbar + filters stay put (max-height refined in JS via sizeGrid). */
#app-your-files #your-files-dropzone{ position:relative; min-height:180px; max-height:60vh; overflow-y:auto; border:2px dashed #d6dbe0; border-radius:6px; padding:10px; background:#fcfcfd; transition:border-color .15s, background .15s; }
#app-your-files #your-files-dropzone.dragover{ border-color:#428BCA; background:#eef6fc; }
#app-your-files #your-files-drop-hint{ display:none; position:absolute; top:0; left:0; right:0; bottom:0; z-index:5; align-items:center; justify-content:center; font-size:18px; color:#428BCA; background:rgba(238,246,252,.85); border-radius:6px; pointer-events:none; }
#app-your-files #your-files-dropzone.dragover #your-files-drop-hint{ display:flex; }
#app-your-files #your-files-drop-hint .glyphicon{ margin-right:8px; }
#app-your-files #your-files-empty{ padding:40px 10px; text-align:center; color:#999; }

#app-your-files #app-your-files-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
#app-your-files .your-files-card{ position:relative; width:160px; border:1px solid #e0e0e0; border-radius:6px; background:#fff; padding:8px; transition:box-shadow .15s, border-color .15s; }
#app-your-files .your-files-card:hover{ box-shadow:0 2px 8px rgba(0,0,0,.12); border-color:#cfcfcf; }
#app-your-files .your-files-card.selected{ border-color:#428BCA; box-shadow:0 0 0 2px rgba(66,139,202,.35); }

#app-your-files .your-files-card .select-item-checkbox{ position:absolute; top:8px; left:8px; z-index:3; margin:0; opacity:0; transition:opacity .15s; }
#app-your-files .your-files-card:hover .select-item-checkbox,
#app-your-files .your-files-card.selected .select-item-checkbox{ opacity:1; }

#app-your-files .yf-thumb-wrap{ position:relative; height:110px; display:flex; align-items:center; justify-content:center; background:#f5f6f8; border-radius:4px; overflow:hidden; cursor:pointer; }
#app-your-files .yf-name{ cursor:pointer; }
#app-your-files .yf-thumb-img{ width:100%; height:100%; object-fit:cover; }
#app-your-files .yf-thumb-glyph{ font-size:44px; color:#9aa3ad; }
#app-your-files .yf-play{ position:absolute; font-size:38px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; }
#app-your-files .yf-badge{ position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.62); color:#fff; font-size:10px; line-height:1; padding:3px 5px; border-radius:3px; letter-spacing:.4px; }

#app-your-files .yf-name{ margin-top:6px; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app-your-files .yf-meta{ font-size:11px; color:#999; margin-top:2px; }
#app-your-files .yf-desc-wrap{ margin-top:4px; min-height:18px; max-width:100%; overflow:hidden; }
#app-your-files .yf-desc{ display:block; max-width:100%; font-size:11px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text; }
#app-your-files .yf-desc-add{ display:inline-block; max-width:100%; font-size:11px; color:#bbb; cursor:text; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app-your-files .your-files-card:hover .yf-desc-add{ color:#428BCA; }
#app-your-files .yf-desc-input{ width:100%; height:24px; font-size:11px; padding:2px 6px; }

#app-your-files .yf-actions{ margin-top:6px; display:flex; gap:10px; opacity:0; transition:opacity .15s; }
#app-your-files .your-files-card:hover .yf-actions{ opacity:1; }
#app-your-files .yf-actions a{ color:#7a8290; font-size:13px; }
#app-your-files .yf-actions a:hover{ color:#428BCA; }
#app-your-files .yf-actions .yf-delete-one:hover{ color:#d9534f; }

/* Click-to-preview lightbox */
#your-files-preview-modal .modal-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:20px; }
#your-files-preview-modal .yf-preview-meta{ font-size:12px; color:#999; margin-top:4px; }
#your-files-preview-modal .yf-preview-body{ padding:0; background:#1b1f24; text-align:center; min-height:120px; }
#your-files-preview-modal .yf-preview-img{ max-width:100%; max-height:75vh; display:inline-block; }
#your-files-preview-modal .yf-preview-media{ max-width:100%; max-height:75vh; display:inline-block; vertical-align:middle; }
#your-files-preview-modal video.yf-preview-media{ width:100%; }
#your-files-preview-modal audio.yf-preview-media{ width:90%; margin:40px 0; }
#your-files-preview-modal .yf-preview-frame{ width:100%; height:75vh; border:0; background:#fff; }
#your-files-preview-modal .yf-preview-noprev{ padding:50px 20px; color:#888; background:#fff; }
#your-files-preview-modal .yf-preview-noprev .glyphicon{ font-size:60px; display:block; margin-bottom:16px; color:#aab2bd; }
#your-files-preview-modal .modal-footer .getLink{ float:left; }

/* =====================================================================
   MI Modern — dashboard UI modernization tokens + components.
   Shared layer introduced 2026-07 for the gradual dashboard refresh,
   piloted on Communication -> 1-on-1 Chat. New/refreshed tabs should
   consume these --mi-* tokens (and future .mi-* classes) instead of
   re-inlining per-tab <style> blocks. Memory: project_dashboard_ui_modernization.
   ===================================================================== */
:root{
  --mi-accent:#3b5bdb; --mi-accent-ink:#2f49b0; --mi-accent-tint:#eef1fd;
  --mi-ink:#1b2231; --mi-ink-2:#3a4459; --mi-muted:#6b7280; --mi-faint:#98a0af;
  --mi-line:#e6e8ee; --mi-line-2:#eef0f4; --mi-surface:#ffffff; --mi-surface-2:#fafbfc;
  --mi-danger:#e5484d; --mi-success:#2f9e6f; --mi-warn:#b4881a;
  --mi-radius:8px; --mi-radius-sm:6px;
  --mi-shadow:0 1px 2px rgba(20,28,48,.04), 0 4px 16px rgba(20,28,48,.06);
}

/* ---- Chat Settings modal: sizing (relocated out of the inline <style> block) ---- */
#chat-settings-modal .modal-dialog{ max-height:90vh; margin:2vh auto; }
#chat-settings-modal .modal-content{ max-height:90vh; display:flex; flex-direction:column; }
#chat-settings-modal .modal-body{ overflow-y:auto; flex:1 1 auto; }

/* Global-hours collapse affordances — scoped to THIS modal.
   (Was an unscoped `.panel-heading:hover`, leaking to every panel in the dashboard.) */
#chat-settings-modal .panel-heading{ cursor:pointer; }
#chat-settings-modal .panel-heading:hover{ background-color:#e9ecef; }
#chat-settings-modal .panel-heading:active{ background-color:#dee2e6; }
#chat-settings-modal .dropdown-arrow{ transition:transform .3s ease; }
#chat-settings-modal #global-hours-fields{ transition:all .3s ease; }

/* Disabled (read-only franchise-scope) fields */
#chat-settings-modal .disabled-fields{ opacity:.6; pointer-events:none; }
#chat-settings-modal .disabled-fields input,
#chat-settings-modal .disabled-fields textarea{ background-color:#f8f9fa !important; color:#6c757d !important; cursor:not-allowed !important; }
#chat-settings-modal .disabled-fields label{ color:#6c757d !important; }

/* Inline-edit highlight — kept, de-gradiented */
#chat-settings-modal .email-item.editing-display-name,
#chat-settings-modal .email-item.editing-chat-scope{ border-color:var(--mi-accent) !important; box-shadow:0 0 0 3px var(--mi-accent-tint); }

/* ---- Contact list: replace the shadowed / gradient / slide-in cards with clean rows ---- */
#dm-chat-permissions-list{ background:#fff !important; border:1px solid var(--mi-line) !important; border-radius:var(--mi-radius); padding:12px !important; box-shadow:none !important; }
#dm-chat-permissions-list .list-group{ margin:0; padding:0; background:transparent; border:0; }
#dm-chat-permissions-list .email-item,
#dm-chat-permissions-list .list-group-item{
  margin:0 0 10px 0 !important; border:1px solid var(--mi-line) !important; border-radius:var(--mi-radius-sm) !important;
  padding:0 !important; background:#fff !important; box-shadow:none !important; overflow:hidden;
  transition:border-color .15s ease !important; animation:none !important; transform:none !important;
}
#dm-chat-permissions-list .email-item:last-child,
#dm-chat-permissions-list .list-group-item:last-child{ margin-bottom:0 !important; }
#dm-chat-permissions-list .email-item:hover,
#dm-chat-permissions-list .list-group-item:hover{ border-color:#cdd2dc !important; box-shadow:none !important; transform:none !important; }
/* Kill the gradient separator pseudo-elements from the old design */
#dm-chat-permissions-list .email-item::before,  #dm-chat-permissions-list .email-item::after,
#dm-chat-permissions-list .list-group-item::before, #dm-chat-permissions-list .list-group-item::after{ display:none !important; content:none !important; }
#dm-chat-permissions-list .email-item.open{ border-color:#cdd2dc !important; background:var(--mi-surface-2) !important; }

/* Summary row (click to expand) */
#dm-chat-permissions-list .mi-contact-main{ display:grid; grid-template-columns:38px minmax(0,1fr) auto auto auto; align-items:center; gap:11px; padding:11px 13px; cursor:pointer; }
#dm-chat-permissions-list .mi-contact-main:hover{ background:var(--mi-surface-2); }
#dm-chat-permissions-list .mi-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
#dm-chat-permissions-list .mi-contact-id{ min-width:0; }
#dm-chat-permissions-list .mi-contact-name{ font-size:13.5px; font-weight:700; color:var(--mi-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dm-chat-permissions-list .mi-contact-email{ font-size:12px; color:var(--mi-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dm-chat-permissions-list .mi-contact-pills{ display:flex; gap:6px; align-items:center; }
#dm-chat-permissions-list .mi-pill{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.5; }
#dm-chat-permissions-list .mi-pill-loc{ background:var(--mi-line-2); color:var(--mi-ink-2); }
#dm-chat-permissions-list .chat-scope-value.label{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
#dm-chat-permissions-list .chat-scope-value.label-warning{ background:#fdf3e2; color:#9a6a12; }
#dm-chat-permissions-list .chat-scope-value.label-info{ background:var(--mi-accent-tint); color:var(--mi-accent-ink); }
#dm-chat-permissions-list .mi-chev{ color:var(--mi-faint); font-size:10px; transition:transform .18s ease; width:16px; text-align:center; }
#dm-chat-permissions-list .email-item.open .mi-chev{ transform:rotate(180deg); }
#dm-chat-permissions-list .mi-remove-btn{ border:0; background:transparent; color:var(--mi-faint); width:28px; height:28px; border-radius:6px; cursor:pointer; padding:0; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
#dm-chat-permissions-list .mi-remove-btn:hover{ background:#fdecec; color:var(--mi-danger); }

/* Expandable per-contact editor */
#dm-chat-permissions-list .mi-contact-edit{ display:none; padding:2px 15px 15px 62px; }
#dm-chat-permissions-list .email-item.open .mi-contact-edit{ display:block; }
#dm-chat-permissions-list .mi-edit-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
#dm-chat-permissions-list .mi-edit-grid .form-group{ margin-bottom:0 !important; }
#dm-chat-permissions-list .mi-contact-edit label{ font-size:12px; font-weight:600; color:var(--mi-muted); margin-bottom:3px; }
#dm-chat-permissions-list .mi-ph{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--mi-line); }
#dm-chat-permissions-list .mi-ph .checkbox{ margin:0 0 4px; }
#dm-chat-permissions-list .mi-ph .checkbox label{ font-weight:600; color:var(--mi-ink); }
@media (max-width:640px){
  #dm-chat-permissions-list .mi-edit-grid{ grid-template-columns:1fr; }
  #dm-chat-permissions-list .mi-contact-edit{ padding-left:15px; }
}

/* ---- Chat Settings modal: modern sections (Bucket A) ---- */
/* header / title / body-padding / footer are inherited from the shared .mi-modal class */
#chat-settings-modal .mi-info-badge{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--mi-accent-tint); color:var(--mi-accent-ink); font-size:11px; font-weight:700; line-height:1; cursor:help; margin-left:6px; vertical-align:2px; }

#chat-settings-modal .mi-set-section{ padding:18px 0; border-bottom:1px solid var(--mi-line-2); }
#chat-settings-modal .mi-set-section:last-of-type{ border-bottom:0; }
#chat-settings-modal .mi-set-label{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--mi-faint); font-weight:700; margin:0 0 12px; }
#chat-settings-modal .mi-help{ font-size:12.5px; color:var(--mi-muted); margin-top:6px; }

/* franchise scope bar */
#chat-settings-modal #chat-settings-location-selector{ background:var(--mi-accent-tint) !important; border:1px solid #d9e0fb; border-radius:var(--mi-radius-sm) !important; padding:12px 14px !important; margin-bottom:6px !important; }
#chat-settings-modal #chat-settings-location-selector label{ font-weight:600; color:var(--mi-accent-ink); }

/* radio option rows */
#chat-settings-modal .mi-radio{ display:block; margin:0 0 8px; }
#chat-settings-modal .mi-radio:last-child{ margin-bottom:0; }
#chat-settings-modal .mi-radio label{ display:flex; gap:10px; align-items:flex-start; margin:0; padding:11px 13px; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); cursor:pointer; font-weight:500; transition:border-color .14s, background .14s; }
#chat-settings-modal .mi-radio label:hover{ border-color:#cdd2dc; }
#chat-settings-modal .mi-radio input{ margin:2px 0 0; }
#chat-settings-modal .mi-radio label:has(input:checked){ border-color:var(--mi-accent); background:var(--mi-accent-tint); }
#chat-settings-modal .mi-radio-title{ font-size:13.5px; font-weight:700; color:var(--mi-ink); }
#chat-settings-modal .mi-radio-sub{ font-size:12.5px; color:var(--mi-muted); margin-left:6px; }

/* business-hours toggle + fields */
#chat-settings-modal .mi-check-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
#chat-settings-modal .mi-check-text{ flex:1; min-width:0; }
#chat-settings-modal .mi-check-title{ display:block; font-size:13.5px; font-weight:700; color:var(--mi-ink); }
#chat-settings-modal #global-hours-fields{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--mi-line); }
#chat-settings-modal .mi-hours-grid{ display:flex; gap:12px; }
#chat-settings-modal .mi-hours-grid .form-group{ flex:1; margin-bottom:0; }
#chat-settings-modal #global-hours-fields label{ font-size:12px; font-weight:600; color:var(--mi-ink-2); margin-bottom:3px; }

/* add-staff row — single accent (blue), not green */
#chat-settings-modal .mi-addrow .btn-success{ background:var(--mi-accent); border-color:var(--mi-accent); color:#fff; border-top-right-radius:var(--mi-radius-sm); border-bottom-right-radius:var(--mi-radius-sm); }
#chat-settings-modal .mi-addrow .btn-success:hover,
#chat-settings-modal .mi-addrow .btn-success:focus{ background:var(--mi-accent-ink); border-color:var(--mi-accent-ink); color:#fff; }

/* ---- Toggle switch (styles a real checkbox; keeps the input's id/class for JS) ---- */
.mi-switch{ position:relative; display:inline-block; width:40px; height:22px; flex:0 0 auto; margin:0; cursor:pointer; }
.mi-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.mi-switch .mi-slider{ position:absolute; inset:0; background:#cfd4dd; border-radius:999px; transition:background .18s ease; }
.mi-switch .mi-slider::before{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .18s ease; }
.mi-switch input:checked + .mi-slider{ background:var(--mi-accent); }
.mi-switch input:checked + .mi-slider::before{ transform:translateX(18px); }
.mi-switch input:focus-visible + .mi-slider{ box-shadow:0 0 0 3px var(--mi-accent-tint); }

/* personal-hours row (expanded contact editor) — text left, switch right */
#dm-chat-permissions-list .mi-ph-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
#dm-chat-permissions-list .mi-ph-text{ flex:1; min-width:0; }
#dm-chat-permissions-list .mi-ph-text strong{ color:var(--mi-ink); }

/* location pin icon in the contact-row pill */
#dm-chat-permissions-list .mi-pill-loc .mi-pin{ color:var(--mi-muted); vertical-align:-1px; margin-right:1px; }

/* inline SVG icon helpers (replace unreliable FontAwesome glyphs) */
.mi-ico{ display:inline-block; vertical-align:-2px; }
@keyframes mi-spin{ to{ transform:rotate(360deg); } }
.mi-spin{ animation:mi-spin .8s linear infinite; transform-origin:center; }
@media (prefers-reduced-motion: reduce){ .mi-spin{ animation-duration:1.8s; } }

/* =====================================================================
   MI Modern — 1-on-1 Chat two-pane tab (Bucket B)
   ===================================================================== */
.mi-dm-shell{ display:flex; flex-direction:column; height:calc(100vh - 210px); min-height:500px; border:1px solid var(--mi-line); border-radius:12px; background:var(--mi-surface); overflow:hidden; box-shadow:var(--mi-shadow); }
.mi-dm-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--mi-line); background:var(--mi-surface); flex:0 0 auto; }
.mi-dm-toolbar-label{ font-size:13px; color:var(--mi-muted); }
.mi-dm-toolbar-actions{ display:flex; gap:8px; }

/* modern accent button — overrides Bootstrap .btn-primary blue with the MI indigo (reusable) */
.btn.mi-btn-accent{ background:var(--mi-accent); border-color:var(--mi-accent); color:#fff; border-radius:var(--mi-radius-sm); }
.btn.mi-btn-accent:hover, .btn.mi-btn-accent:focus, .btn.mi-btn-accent:active,
.btn.mi-btn-accent:active:hover, .btn.mi-btn-accent:active:focus{ background:var(--mi-accent-ink); border-color:var(--mi-accent-ink); color:#fff; }

.mi-dm-panes{ flex:1 1 auto; display:grid; grid-template-columns:450px 1fr; min-height:0; position:relative; }

/* left rail */
.mi-dm-rail{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--mi-line); background:var(--mi-surface); }
.mi-dm-rail-top{ padding:14px 14px 10px; border-bottom:1px solid var(--mi-line-2); display:flex; flex-direction:column; gap:11px; flex:0 0 auto; }
.mi-dm-rail-title{ display:flex; align-items:center; justify-content:space-between; }
.mi-dm-rail-title h3{ margin:0; font-size:15px; font-weight:650; color:var(--mi-ink); letter-spacing:-.01em; }
.mi-dm-search{ position:relative; }
.mi-dm-search .mi-dm-search-ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mi-faint); }
.mi-dm-search input.form-control{ padding-left:33px; border-radius:var(--mi-radius-sm); background:var(--mi-surface-2); }
.mi-dm-search input.form-control:focus{ background:#fff; border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }

/* segmented Mine/All */
.mi-seg{ display:inline-flex; align-self:flex-start; background:#eceef2; border-radius:999px; padding:3px; gap:2px; }
.mi-seg-btn{ appearance:none; border:0; background:transparent; font-family:inherit; font-size:12.5px; font-weight:400; color:var(--mi-muted); padding:5px 16px; border-radius:999px; cursor:pointer; transition:background .16s, color .16s; }
.mi-seg-btn.active{ font-weight:600; }
.mi-seg-btn:hover{ color:var(--mi-ink); }
.mi-seg-btn.active{ background:#fff; color:var(--mi-ink); box-shadow:0 1px 2px rgba(20,28,48,.12); }
.mi-seg-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--mi-danger); color:#fff; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; vertical-align:1px; }

/* ---- Shared modal shell — add class "mi-modal" to any Bootstrap modal ---- */
.mi-modal .modal-content{ border:1px solid var(--mi-line); border-radius:12px; box-shadow:0 20px 60px rgba(20,28,48,.28); overflow:hidden; }
.mi-modal .modal-header{ border-bottom:1px solid var(--mi-line); padding:16px 20px; background:var(--mi-surface); }
.mi-modal .modal-title{ font-size:17px; font-weight:680; color:var(--mi-ink); display:flex; align-items:center; gap:9px; }
.mi-modal .modal-title .mi-ico{ color:var(--mi-accent-ink); }
.mi-modal .modal-body{ padding:18px 20px; color:var(--mi-ink-2); }
.mi-modal .modal-body h5{ color:var(--mi-ink); font-weight:650; font-size:14px; margin:20px 0 8px; }
.mi-modal .modal-body h5:first-child{ margin-top:0; }
.mi-modal .modal-body p{ line-height:1.55; }
.mi-modal .modal-body ul, .mi-modal .modal-body ol{ line-height:1.6; padding-left:22px; }
.mi-modal .modal-body li{ margin-bottom:5px; }
.mi-modal .modal-footer{ border-top:1px solid var(--mi-line); background:var(--mi-surface-2); }
.mi-help-link{ color:var(--mi-accent-ink); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.mi-help-link:hover{ text-decoration:underline; color:var(--mi-accent-ink); }

/* chat-settings-info help cards */
.mi-help-intro{ font-size:13.5px; color:var(--mi-ink-2); background:var(--mi-accent-tint); border:1px solid #d9e0fb; border-radius:var(--mi-radius-sm); padding:12px 14px; margin-bottom:14px; line-height:1.55; }
.mi-modal .mi-help-card{ background:var(--mi-surface); border:1px solid var(--mi-line); border-left:3px solid var(--mi-accent); border-radius:var(--mi-radius-sm); padding:13px 15px; margin-bottom:12px; }
.mi-modal .mi-help-card h5{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13.5px; }
.mi-modal .mi-help-card h5 .mi-ico{ color:var(--mi-accent-ink); }
.mi-modal .mi-help-card p{ margin:0 0 6px; font-size:13px; color:var(--mi-ink-2); }
.mi-modal .mi-help-card p:last-child{ margin-bottom:0; }
.mi-modal .mi-help-card .mi-help-sub{ padding-left:14px; color:var(--mi-muted); }
.mi-help-note{ font-size:12px; color:var(--mi-muted); }
.mi-help-tip{ font-size:12.5px; color:var(--mi-warn); background:#fdf7e7; border:1px solid #f0e2b8; border-radius:var(--mi-radius-sm); padding:10px 13px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.mi-help-tip .mi-ico{ flex:0 0 auto; margin-top:1px; color:var(--mi-warn); }
.mi-help-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mi-help-grid > div > .mi-help-card:last-child{ margin-bottom:0; }
@media (max-width:640px){ .mi-help-grid{ grid-template-columns:1fr; } }

/* conversation list */
.mi-dm-list{ flex:1 1 auto; overflow-y:auto; min-height:0; }
.mi-conv{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:11px; padding:12px 14px; border-bottom:1px solid var(--mi-line-2); cursor:pointer; position:relative; transition:background .13s; }
.mi-conv:hover{ background:var(--mi-surface-2); }
.mi-conv.active{ background:var(--mi-accent-tint); }
.mi-conv.active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mi-accent); }
.mi-conv-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; position:relative; overflow:hidden; flex:0 0 auto; }
.mi-conv-avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mi-conv-mid{ min-width:0; }
.mi-conv-name{ font-size:13.8px; font-weight:600; color:var(--mi-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-conv-name.unread{ font-weight:700; }
.mi-conv-sub{ font-size:12px; color:var(--mi-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.mi-conv-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; }
.mi-conv-time{ font-size:11px; color:var(--mi-faint); font-variant-numeric:tabular-nums; }
.mi-conv-badge{ min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--mi-danger); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.mi-conv-loc{ display:inline-block; font-size:10.5px; color:var(--mi-accent-ink); background:var(--mi-accent-tint); border-radius:4px; padding:1px 6px; margin-right:6px; vertical-align:1px; }
.mi-dm-empty-msg{ padding:44px 22px; text-align:center; color:var(--mi-faint); font-size:13px; }

/* right thread pane */
.mi-dm-thread{ display:flex; flex-direction:column; min-height:0; background:var(--mi-surface-2); }
.mi-dm-thread-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--mi-faint); gap:12px; padding:20px; text-align:center; }
.mi-dm-thread-empty p{ margin:0; font-size:14px; }
.mi-dm-thread-head{ display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--mi-line); background:var(--mi-surface); flex:0 0 auto; }
.mi-dm-thread-title{ font-size:14.5px; font-weight:650; color:var(--mi-ink); }
.mi-dm-thread-back{ display:none; width:32px; height:32px; border:1px solid var(--mi-line); background:#fff; border-radius:var(--mi-radius-sm); color:var(--mi-muted); cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto; }
.mi-dm-thread-back:hover{ background:var(--mi-surface-2); color:var(--mi-ink); }
.mi-dm-thread-body{ flex:1 1 auto; min-height:0; }
.mi-dm-thread-body iframe.mi-chat-iframe{ width:100%; height:100%; border:0; display:block; }

/* narrow screens: single column; thread overlays the rail */
@media (max-width:820px){
  .mi-dm-panes{ grid-template-columns:1fr; }
  .mi-dm-thread{ position:absolute; inset:0; z-index:5; display:none; }
  .mi-dm-shell.mi-thread-open .mi-dm-thread{ display:flex; }
  .mi-dm-thread-back{ display:inline-flex; }
}

/* =====================================================================
   MI Modern — Notifications hub (Sent/Scheduled tab, Bucket C)
   Chip-filtered list with expand-in-place rows, replacing the
   bootstrap-table on Communication -> Sent/Scheduled Pushes.
   ===================================================================== */

/* status/audience pills — unscoped so any modernized tab can use them.
   (The #dm-chat-permissions-list rules above are scoped and override.) */
.mi-pill{ display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; line-height:1.5; }
.mi-pill-sent{ background:#e6f5ee; color:#1f7a54; }
.mi-pill-scheduled{ background:var(--mi-accent-tint); color:var(--mi-accent-ink); }
.mi-pill-draft{ background:var(--mi-line-2); color:var(--mi-ink-2); }
.mi-pill-template{ background:#fdf3e2; color:#9a6a12; }
.mi-pill-loc{ background:var(--mi-line-2); color:var(--mi-ink-2); max-width:180px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
a.mi-pill{ text-decoration:none; }
a.mi-pill:hover{ filter:brightness(.96); text-decoration:none; }

/* filter chips */
.mi-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.mi-chip{ appearance:none; font-family:inherit; font-size:12px; font-weight:400; padding:5px 13px; border-radius:999px; border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); cursor:pointer; transition:border-color .14s, background .14s; }
.mi-chip.active{ font-weight:600; }
.mi-chip:hover{ border-color:#cdd2dc; }
.mi-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-chip.active{ background:var(--mi-accent); border-color:var(--mi-accent); color:#fff; }
.mi-chip .mi-chip-n{ opacity:.65; font-weight:500; margin-left:3px; font-variant-numeric:tabular-nums; }

/* toolbar row above the list */
.mi-hub-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mi-hub-toolbar .mi-hub-spacer{ flex:1; }
.mi-hub-search{ position:relative; }
.mi-hub-search input{ width:230px; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); background:var(--mi-surface-2); padding:6px 28px 6px 32px; font-size:13px; color:var(--mi-ink); }
.mi-hub-search input:focus{ outline:none; background:#fff; border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-hub-search .mi-hub-search-ico{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--mi-faint); pointer-events:none; }
.mi-hub-search .mi-hub-search-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--mi-faint); cursor:pointer; padding:2px 4px; font-size:13px; line-height:1; display:none; }
.mi-hub-search .mi-hub-search-clear:hover{ color:var(--mi-ink-2); }

/* the list — scrolls internally so the toolbar and footer stay visible
   (the tab content region doesn't scroll the page) */
.mi-hub-list{ border:1px solid var(--mi-line); border-radius:var(--mi-radius); background:var(--mi-surface); box-shadow:var(--mi-shadow); overflow:hidden; overflow-y:auto; max-height:calc(100vh - 330px); min-height:280px; }
.mi-hub-row{ border-bottom:1px solid var(--mi-line-2); }
.mi-hub-row:last-child{ border-bottom:0; }
.mi-hub-main{ display:grid; grid-template-columns:88px minmax(0,1fr) minmax(0,26%) 150px auto; gap:12px; align-items:center; padding:12px 14px; cursor:pointer; }
.mi-hub-main:hover{ background:var(--mi-surface-2); }
.mi-hub-status{ min-width:0; }
.mi-hub-msg{ min-width:0; }
.mi-hub-title{ font-size:13.5px; font-weight:700; color:var(--mi-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-hub-prev{ font-size:12.5px; color:var(--mi-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.mi-hub-aud{ display:flex; gap:5px; flex-wrap:wrap; align-items:center; min-width:0; }
.mi-hub-meta{ font-size:12px; color:var(--mi-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mi-hub-meta .mi-hub-date{ display:block; color:var(--mi-ink-2); font-size:12.5px; font-weight:600; }
.mi-hub-meta a{ color:var(--mi-accent-ink); }
.mi-hub-acts{ display:flex; gap:2px; align-items:center; justify-content:flex-end; position:relative; }

/* delete-confirm bubble anchored to the trash icon */
.mi-confirm-pop{ position:absolute; top:calc(100% + 9px); right:0; z-index:30; background:#fff; border:1px solid var(--mi-line); border-radius:var(--mi-radius); box-shadow:0 8px 28px rgba(20,28,48,.18); padding:12px 14px; width:232px; cursor:default; }
.mi-confirm-pop::before{ content:""; position:absolute; top:-5px; right:14px; width:9px; height:9px; background:#fff; border-left:1px solid var(--mi-line); border-top:1px solid var(--mi-line); transform:rotate(45deg); }
.mi-confirm-pop.mi-pop-up{ top:auto; bottom:calc(100% + 9px); }
.mi-confirm-pop.mi-pop-up::before{ top:auto; bottom:-5px; border:0; border-right:1px solid var(--mi-line); border-bottom:1px solid var(--mi-line); background:#fff; }
.mi-confirm-pop .mi-confirm-txt{ font-size:13px; font-weight:600; color:var(--mi-ink); margin-bottom:10px; }
.mi-confirm-pop .mi-confirm-btns{ display:flex; gap:8px; justify-content:flex-end; }
.mi-confirm-pop .mi-confirm-btns .btn{ border-radius:var(--mi-radius-sm); font-weight:600; }
.mi-confirm-pop .mi-pop-confirm{ background:var(--mi-danger); border:1px solid var(--mi-danger); color:#fff; }
.mi-confirm-pop .mi-pop-confirm:hover{ background:#c93c40; border-color:#c93c40; color:#fff; }
.mi-confirm-pop .mi-pop-cancel{ background:#fff; border:1px solid var(--mi-line); color:var(--mi-ink-2); }
.mi-confirm-pop .mi-pop-cancel:hover{ border-color:#cdd2dc; }
.mi-icon-btn{ width:28px; height:28px; border:0; background:transparent; border-radius:6px; color:var(--mi-accent); cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.mi-icon-btn:hover{ background:var(--mi-accent-tint); color:var(--mi-accent-ink); }
.mi-icon-btn.mi-danger{ color:var(--mi-danger); }
.mi-icon-btn.mi-danger:hover{ background:#fdecec; color:var(--mi-danger); }

/* (expand-in-place detail retired: rows open the preview modal instead) */
.mi-d-label{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mi-faint); font-weight:700; margin:14px 0 5px; }
.mi-d-label:first-child{ margin-top:0; }
.mi-d-card{ background:#fff; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); padding:12px 14px; font-size:13px; color:var(--mi-ink-2); overflow-wrap:break-word; }
.mi-d-card .mi-d-title{ font-weight:700; color:var(--mi-ink); margin-bottom:4px; }
/* Rich in-app content can be arbitrarily long — scroll it inside the card
   so an expanded row always fits on screen. */
.mi-d-card .mi-d-body{ max-height:300px; overflow-y:auto; overflow-x:hidden; }
.mi-d-card .mi-d-body img{ max-width:100%; height:auto; }
.mi-d-media-img{ max-width:220px; max-height:140px; border-radius:var(--mi-radius-sm); border:1px solid var(--mi-line); display:block; margin-top:8px; }
.mi-d-btn-preview{ display:inline-block; background:var(--mi-accent); color:#fff; font-size:12px; font-weight:600; padding:5px 13px; border-radius:var(--mi-radius-sm); margin-top:8px; }
.mi-d-stats{ display:flex; gap:22px; }
.mi-d-stat b{ display:block; font-size:17px; letter-spacing:-.01em; color:var(--mi-ink); font-variant-numeric:tabular-nums; }
.mi-d-stat b a{ color:var(--mi-accent-ink); text-decoration:none; }
.mi-d-stat b a:hover{ text-decoration:underline; }
.mi-d-stat span{ font-size:11.5px; color:var(--mi-muted); }
.mi-d-meta-line{ font-size:12.5px; color:var(--mi-muted); margin-top:6px; }
.mi-d-meta-line b{ color:var(--mi-ink-2); font-weight:600; }

/* footer: count + load more */
.mi-hub-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; font-size:12.5px; color:var(--mi-muted); font-variant-numeric:tabular-nums; }

/* empty / loading states */
.mi-hub-empty{ padding:48px 22px; text-align:center; color:var(--mi-faint); font-size:13.5px; }
.mi-hub-empty .mi-ico{ display:block; margin:0 auto 12px; color:#c3c9d4; }

@media (max-width:900px){
  .mi-hub-main{ grid-template-columns:80px minmax(0,1fr) auto; }
  .mi-hub-aud{ display:none; }
  .mi-hub-meta{ display:none; }
  .mi-hub-detail{ padding-left:16px; }
  .mi-hub-detail-grid{ grid-template-columns:1fr; }
}
/* =====================================================================
   MI Modern — Notification composer (Send tab, Bucket D)
   Single-page composer: four collapsible sections + sticky live preview.
   Legacy control ids live inside .mi-c-sec-body untouched; this layer
   only provides the shell. Bootstrap-3 controls inside inherit its look.
   ===================================================================== */
.mi-comp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.mi-comp-crumb{ font-size:12px; margin-bottom:2px; }
.mi-comp-crumb a{ color:var(--mi-muted); text-decoration:none; }
.mi-comp-crumb a:hover{ color:var(--mi-accent-ink); }
.mi-comp-head h4{ margin:0; font-size:18px; font-weight:700; color:var(--mi-ink); letter-spacing:-.01em; }
.mi-comp-head-actions{ display:flex; gap:8px; }
.mi-comp-head-actions .btn{ border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); font-weight:600; border-radius:var(--mi-radius-sm); }
.mi-comp-head-actions .btn:hover{ border-color:#cdd2dc; }

.mi-comp-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.mi-comp-main{ min-width:0; }

/* collapsible section */
.mi-c-sec{ background:var(--mi-surface); border:1px solid var(--mi-line); border-radius:var(--mi-radius); margin-bottom:12px; box-shadow:var(--mi-shadow); overflow:hidden; }
.mi-c-sec-head{ display:flex; align-items:center; gap:10px; padding:12px 15px; cursor:pointer; }
.mi-c-sec-head:hover{ background:var(--mi-surface-2); }
.mi-c-sec-head:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--mi-accent-tint); }
.mi-c-num{ width:22px; height:22px; border-radius:50%; background:var(--mi-accent-tint); color:var(--mi-accent-ink); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mi-c-sec.mi-c-done .mi-c-num{ background:var(--mi-success); color:#fff; }
.mi-c-sec-title{ font-size:13.5px; font-weight:700; color:var(--mi-ink); white-space:nowrap; }
.mi-c-sec-hint{ font-size:12px; color:var(--mi-faint); white-space:nowrap; }
.mi-c-sec-sum{ font-size:12.5px; color:var(--mi-muted); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%; text-align:right; }
.mi-c-sec-head .mi-chev{ color:var(--mi-faint); flex:0 0 auto; transition:transform .18s ease; display:inline-flex; }
.mi-c-sec.open .mi-c-sec-head .mi-chev{ transform:rotate(180deg); }
.mi-c-sec-body{ display:none; padding:6px 16px 18px 47px; border-top:1px dashed var(--mi-line-2); }
.mi-c-sec.open .mi-c-sec-body{ display:block; }
/* legacy inline styles inside the bodies set their own max-widths; rein in headings */
.mi-c-sec-body label{ font-size:12.5px; font-weight:600; color:var(--mi-ink-2); }
.mi-c-sec-body h2, .mi-c-sec-body h3{ font-size:15px; }

/* template mode: no audience, no delivery — just content + Save Template.
   The template picker is also hidden: picking a template flips isTemplate
   off (legacy behavior), which would silently exit template mode. */
.mi-comp-template-mode #comp-sec-audience,
.mi-comp-template-mode #comp-sec-delivery,
.mi-comp-template-mode #newPushMsg-step1-choose-template{ display:none; }
.mi-comp-template-mode #review-save-template-box{ display:block !important; }

/* the composer lives in a height-capped container (getRemainingHeight in
   communication.js) — scroll internally so the sticky preview tracks */
#msg-now-container{ overflow-y:auto; }

/* sticky live preview rail */
.mi-comp-preview{ position:sticky; top:12px; }
.mi-pv-label{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mi-faint); font-weight:700; margin:0 0 8px; }
.mi-phone{ background:#0f1420; border-radius:22px; padding:14px 12px 18px; box-shadow:var(--mi-shadow); }
.mi-phone-time{ text-align:center; color:#8b93a5; font-size:10px; margin-bottom:10px; letter-spacing:.06em; }
.mi-push-card{ background:rgba(255,255,255,.95); border-radius:12px; padding:10px 12px; }
.mi-push-top{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.mi-push-appicon{ width:18px; height:18px; border-radius:4.5px; background:linear-gradient(135deg,var(--mi-accent),#7a5bdb); flex:0 0 auto; }
.mi-push-app{ font-size:10.5px; font-weight:600; color:#5b6270; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-push-when{ margin-left:auto; font-size:10px; color:#9aa1ad; flex:0 0 auto; }
.mi-push-msg{ font-size:12.5px; color:#1b2231; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow-wrap:break-word; }
/* iOS expanded rich notifications center-crop the attached image to a 3:2
   landscape (or 1:1 square) display ratio — NOT the squat band a fixed
   140px height produced. Drive the height from the width via aspect-ratio so
   the crop matches the device in both the composer preview and the sent-list
   modal (both share this class). */
.mi-push-img{ width:100%; border-radius:8px; margin-top:8px; aspect-ratio:3/2; object-fit:cover; }
.mi-push-vid{ margin-top:8px; font-size:11px; color:#5b6270; background:var(--mi-line-2); border-radius:8px; padding:14px 10px; text-align:center; }
.mi-pv-mc{ background:#fff; border:1px solid var(--mi-line); border-radius:var(--mi-radius); padding:13px 14px; margin-top:14px; }
.mi-pv-mc-title{ font-size:13px; font-weight:700; color:var(--mi-ink); margin-bottom:4px; overflow-wrap:break-word; }
.mi-pv-mc-body{ font-size:12px; color:var(--mi-ink-2); margin-bottom:10px; max-height:220px; overflow-y:auto; overflow-x:hidden; overflow-wrap:break-word; }
.mi-pv-mc-body img{ max-width:100%; height:auto; }
.mi-pv-mc-btn{ display:inline-block; background:var(--mi-accent); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; border-radius:var(--mi-radius-sm); }
.mi-pv-mc-meta{ font-size:11.5px; color:var(--mi-muted); margin-top:8px; }
.mi-pv-aud{ margin-top:14px; font-size:12px; color:var(--mi-muted); overflow-wrap:break-word; }
.mi-pv-aud b{ color:var(--mi-ink-2); }

@media (max-width:1000px){
  .mi-comp-grid{ grid-template-columns:1fr; }
  .mi-comp-preview{ position:static; max-width:340px; }
}
@media (max-width:640px){
  .mi-c-sec-body{ padding-left:16px; }
  .mi-c-sec-hint{ display:none; }
}

/* ---- Composer B.2: interior restyle (behavior untouched) ------------- */

/* option pills — a radio wrapped in a label; checked state = accent */
.mi-optrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
label.mi-opt{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:8px 15px; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); cursor:pointer; font-weight:500 !important; font-size:13px !important; color:var(--mi-ink) !important; background:#fff; transition:border-color .14s, background .14s; }
label.mi-opt:hover{ border-color:#cdd2dc; }
label.mi-opt input{ margin:0; }
label.mi-opt:has(input:checked){ border-color:var(--mi-accent); background:var(--mi-accent-tint); }
label.mi-opt:has(input:checked) span{ color:var(--mi-accent-ink); font-weight:600; }

/* inputs */
.mi-c-sec-body .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
.mi-c-sec-body .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-c-sec-body input[type="datetime-local"]{ border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); padding:6px 10px; font:inherit; font-size:13px; color:var(--mi-ink); }
.mi-c-sec-body input[type="datetime-local"]:focus{ outline:none; border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
#notification-text-char-cnt{ color:var(--mi-faint); font-size:11px; font-weight:600 !important; }

/* button hierarchy: in-section actions (gallery, upload, share picker)
   read as secondary; the submit CTAs carry the accent */
.mi-c-sec-body .btn-primary{ background:#fff; border:1px solid var(--mi-line); color:var(--mi-ink-2); border-radius:var(--mi-radius-sm); font-weight:600; text-shadow:none; }
.mi-c-sec-body .btn-primary:hover,
.mi-c-sec-body .btn-primary:focus,
.mi-c-sec-body .btn-primary:active{ background:var(--mi-accent-tint); border-color:var(--mi-accent); color:var(--mi-accent-ink); }
#msgSendButton, #msgSendLaterButton, #msgSaveDraftButton, #msgSaveTemplateButton{
  background:var(--mi-accent) !important; border:1px solid var(--mi-accent) !important; color:#fff !important;
  border-radius:var(--mi-radius-sm); font-weight:600; padding:8px 26px; text-shadow:none;
}
#msgSendButton:hover, #msgSendLaterButton:hover, #msgSaveDraftButton:hover, #msgSaveTemplateButton:hover,
#msgSendButton:focus, #msgSendLaterButton:focus, #msgSaveDraftButton:focus, #msgSaveTemplateButton:focus{
  background:var(--mi-accent-ink) !important; border-color:var(--mi-accent-ink) !important;
}

/* audience tables (locations / system groups / groups): quiet the
   bootstrap chrome — hairline borders, uppercase headers, hover rows */
.mi-c-sec-body .fixed-table-container{ border:1px solid var(--mi-line) !important; border-radius:var(--mi-radius-sm); }
.mi-c-sec-body .table-bordered{ border:1px solid var(--mi-line); }
.mi-c-sec-body .table-bordered > tbody > tr > td,
.mi-c-sec-body .table-bordered > thead > tr > th{ border-color:var(--mi-line-2); }
.mi-c-sec-body .table > tbody > tr > td{ vertical-align:middle; font-size:13px; }
.mi-c-sec-body .table > thead > tr > th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mi-faint); border-bottom-width:1px; }
.mi-c-sec-body .table-hover > tbody > tr:hover{ background:var(--mi-surface-2); }

/* feature picker ("Content to Open in App") — custom JSON-driven
   dropdown built by buildFeaturePickerHTML in communication.js */
.mi-fpick{ position:relative; max-width:340px; }
.mi-fpick-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:#fff; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); padding:8px 13px; font-size:13px; font-weight:600; color:var(--mi-ink-2); cursor:pointer; text-align:left; }
.mi-fpick-btn:hover{ border-color:#cdd2dc; }
.mi-fpick-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-fpick.open .mi-fpick-btn{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-fpick-btn .mi-ico{ color:var(--mi-faint); transition:transform .15s ease; flex:0 0 auto; }
.mi-fpick.open .mi-fpick-btn .mi-ico{ transform:rotate(180deg); }
.mi-fpick-panel{ position:fixed; z-index:1060; background:#fff; border:1px solid var(--mi-line); border-radius:var(--mi-radius); box-shadow:0 8px 28px rgba(20,28,48,.16); overflow:hidden; } /* placed via JS off the button rect — section cards clip overflow */
.mi-fpick-search{ padding:8px; border-bottom:1px solid var(--mi-line-2); }
.mi-fpick-search input{ width:100%; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); padding:6px 10px; font-size:13px; color:var(--mi-ink); }
.mi-fpick-search input:focus{ outline:none; border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-fpick-list{ max-height:320px; overflow-y:auto; padding:6px; }
.mi-fpick-type{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mi-faint); font-weight:700; padding:10px 8px 4px; }
.mi-fpick-loc{ font-size:11.5px; font-weight:600; color:var(--mi-ink-2); padding:6px 8px 2px 14px; }
.mi-fpick-loc.mi-fpick-franchise{ font-weight:700; }
a.mi-fpick-item{ display:block; padding:7px 10px 7px 20px; border-radius:6px; cursor:pointer; text-decoration:none; }
a.mi-fpick-item:hover{ background:var(--mi-accent-tint); text-decoration:none; }
a.mi-fpick-item .menu-feature-name{ display:block; font-size:13px; font-weight:600; color:var(--mi-ink); }
a.mi-fpick-item:hover .menu-feature-name{ color:var(--mi-accent-ink); }
a.mi-fpick-item .mi-fpick-desc{ display:block; font-size:11.5px; color:var(--mi-muted); }
a.mi-fpick-item.selected{ background:var(--mi-accent-tint); }
a.mi-fpick-item.selected .menu-feature-name{ color:var(--mi-accent-ink); }

/* selection modals can outgrow the viewport — pin and scroll the body */
#sharePagesSelectionModal .modal-dialog,
#templateSelectionModal .modal-dialog{ margin:4vh auto; }
#sharePagesSelectionModal .modal-body,
#templateSelectionModal .modal-body{ max-height:72vh; overflow-y:auto; }

/* "Who should receive it?" helper lines */
.mi-who-hint{ font-size:12.5px; color:var(--mi-muted); margin-top:8px; }

/* "Use a template" — tinted so it reads as an action, not chrome */
#newPushMsg-step1-choose-template{ background:var(--mi-accent-tint); border:1px solid #d9e0fb; color:var(--mi-accent-ink); font-weight:600; }
#newPushMsg-step1-choose-template:hover,
#newPushMsg-step1-choose-template:focus{ background:#dfe6fb; border-color:var(--mi-accent); color:var(--mi-accent-ink); }

/* preview rail: audience group pills */
.mi-pv-aud-pills{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }

/* real app icon in the phone mock (falls back to the gradient span) */
img.mi-push-appicon{ object-fit:cover; background:none; }

/* inline share-page picker */
.mi-spick-list{ max-width:480px; max-height:260px; overflow-y:auto; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); background:#fff; }
.mi-spick-item{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--mi-line-2); cursor:pointer; }
.mi-spick-item:last-child{ border-bottom:0; }
.mi-spick-item:hover{ background:var(--mi-surface-2); }
.mi-spick-item.selected{ background:var(--mi-accent-tint); box-shadow:inset 3px 0 0 var(--mi-accent); }
.mi-spick-main{ flex:1; min-width:0; }
.mi-spick-name{ display:block; font-size:13px; font-weight:600; color:var(--mi-ink); }
.mi-spick-item.selected .mi-spick-name{ color:var(--mi-accent-ink); }
.mi-spick-desc{ display:block; font-size:11.5px; color:var(--mi-muted); }
.mi-spick-prev{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--mi-accent-ink); }
.mi-spick-prev:hover{ color:var(--mi-accent-ink); text-decoration:underline; }

/* audience tables flash unstyled before bootstrap-table dresses them —
   data-classes adds .table at init, so hide the raw element until then */
#locations-select-table:not(.table),
#group-selection-table:not(.table){ display:none; }

/* videos in the composer: cap height in the editor and the preview rail
   so portrait uploads stay sane (!important beats older inline styles) */
#comp-sec-inapp .redactor-box video,
#comp-sec-inapp .redactor-editor video{ max-width:100% !important; max-height:360px !important; width:auto !important; height:auto !important; }
.mi-pv-mc-body video{ max-width:100% !important; max-height:200px !important; width:auto !important; height:auto !important; display:block; }

/* one video entry point in the editor toolbar — the stock embed plugin's
   button is redundant (reachable from the chooser's Embed option) */
.redactor-toolbar li a.re-video{ display:none; }
#editor-video-list .mi-spick-list{ max-width:none; }

/* video chooser thumbnails (MediaConvert "-thumb.0000000.jpg" convention) */
.mi-spick-thumb{ width:64px; height:40px; flex:0 0 auto; border-radius:4px; overflow:hidden; background:#0f1420; display:flex; align-items:center; justify-content:center; }
.mi-spick-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mi-spick-thumb-fallback{ color:#8b93a5; font-size:14px; align-items:center; justify-content:center; width:100%; height:100%; }

/* targeted-audience status pills */
.mi-pill-norecv{ background:#fdecec; color:#b03a3e; }
#targeted-users-table:not(.table){ display:none; }

/* Add-a-Video modal: wrap the action buttons on narrow screens, keep the
   body inside the viewport, and never let long unbroken filenames force
   horizontal scrolling */
.mi-video-modal-actions{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.mi-video-modal-actions .btn{ flex:1 1 auto; white-space:normal; }
#editorVideoModal .modal-dialog{ margin:4vh auto; }
#editorVideoModal .modal-body{ max-height:80vh; overflow-y:auto; }
#editorVideoModal .mi-spick-list{ overflow-x:hidden; }
.mi-spick-name{ overflow-wrap:anywhere; }

/* Hub device-preview modal: the composer's preview components (phone
   mock + in-app card) on the left, the FULL audience (named groups /
   recipient emails — the row only shows counts) on the right. Wraps to a
   single column on narrow screens. Unlike the live preview, the message
   text is NOT line-clamped — this is the full record. */
#hubPreviewModal .modal-dialog{ width:720px; max-width:95vw; margin:4vh auto; }
#hubPreviewModal .modal-body{ max-height:82vh; overflow-y:auto; }
.mi-hub-preview-body{ display:flex; gap:20px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.mi-hub-preview-main{ width:320px; max-width:100%; flex:0 0 auto; }
.mi-hub-preview-aud{ flex:1 1 220px; min-width:220px; max-width:320px; }
.mi-hub-preview-body .mi-d-label{ margin-top:0; }
.mi-hub-preview-main .mi-pv-mc{ margin-top:14px; }
/* many-group sends can list dozens of pills — cap the height and let it
   scroll on its own so the modal doesn't grow into an endless column (the
   emails list beside it already does the same). */
.mi-hub-preview-pills{ display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; max-height:260px; overflow-y:auto; }
.mi-hub-preview-emails{ max-height:200px; overflow-y:auto; font-size:12px; color:var(--mi-ink-2); line-height:1.9; margin-top:4px; overflow-wrap:anywhere; }
.mi-hub-preview-body .mi-push-msg{ display:block; -webkit-line-clamp:none; overflow:visible; }
a.mi-push-vid{ display:block; text-decoration:none; }
a.mi-push-vid:hover{ color:var(--mi-accent-ink); }

/* legacy .pushed-down (top:200px + overflow:hidden) fights the
   viewport-aware mi-modal sizing — neutralize it inside the modern skin */
.mi-modal .modal.pushed-down{ top:0; overflow-x:hidden; overflow-y:auto; }

/* preview modal: Notification / In-app segmented toggle */
.mi-preview-seg{ margin-bottom:14px; }
.mi-hub-preview-main .mi-pv-mc{ margin-top:0; }

/* =====================================================================
   MI Modern — Sharing tab (Phase C): Share Pages + Deep Links behind one
   nav tab with an in-pane segmented control.
   ===================================================================== */
.mi-sharing-seg{ margin-bottom:16px; }

/* Share Pages rows (replaced the bootstrap-table) */
.mi-sp-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--mi-line-2); background:#fff; }
.mi-sp-row:last-child{ border-bottom:0; }
.mi-sp-row:hover{ background:var(--mi-surface-2); }
.mi-sp-main{ flex:1; min-width:0; }
.mi-sp-name{ display:block; font-size:13.5px; font-weight:700; color:var(--mi-ink); }
.mi-sp-desc{ display:block; font-size:12.5px; color:var(--mi-muted); }
.mi-sp-acts{ display:flex; gap:2px; flex:0 0 auto; }

/* Deep Links: reskin the bootstrap panels as MI cards */
#deep-links-tab .panel-default{ border:1px solid var(--mi-line); border-radius:var(--mi-radius); box-shadow:var(--mi-shadow); }
#deep-links-tab .panel-default > .panel-heading{ background:var(--mi-surface); border-bottom:1px solid var(--mi-line-2); border-radius:var(--mi-radius) var(--mi-radius) 0 0; padding:12px 16px; }
#deep-links-tab .panel-heading h5{ font-size:13.5px; color:var(--mi-ink); }
#deep-links-tab .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
#deep-links-tab .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
#deep-links-tab label{ font-size:12.5px; font-weight:600; color:var(--mi-ink-2); }
#deep-links-tab .btn-primary{ background:var(--mi-accent); border-color:var(--mi-accent); border-radius:var(--mi-radius-sm); font-weight:600; }
#deep-links-tab .btn-primary:hover,
#deep-links-tab .btn-primary:focus{ background:var(--mi-accent-ink); border-color:var(--mi-accent-ink); }
#deep-links-tab .table > thead > tr > th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mi-faint); border-bottom-width:1px; }
#deep-links-tab .table > tbody > tr > td{ vertical-align:middle; font-size:13px; border-color:var(--mi-line-2); }
#deep-links-tab .table-hover > tbody > tr:hover{ background:var(--mi-surface-2); }
#deep-links-tab .fixed-table-container{ border:1px solid var(--mi-line) !important; border-radius:var(--mi-radius-sm); }

/* Share Page editor modal: stacked modern fields */
#edit-share-page-modal .modal-body{ max-height:75vh; overflow-y:auto; }
.mi-sp-field{ margin-bottom:14px; }
.mi-sp-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--mi-ink-2); margin-bottom:4px; }
.mi-sp-field .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
.mi-sp-field .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
.mi-sp-field .mi-who-hint{ margin-top:4px; }

/* =====================================================================
   MI Modern — Groups tab (Phase D). Skin pass: the table/detail-row/
   modal machinery in groups.js is untouched; ids and classes it drives
   (filter chips' btn-primary/btn-default toggling, bulk-button
   enablement) are restyled in place.
   ===================================================================== */

/* nested sub-tabs (My Groups / Class Groups Settings) as a segmented pill */
#groups-nav{ border:0; display:inline-flex; background:#eceef2; border-radius:999px; padding:3px; gap:2px; margin-bottom:16px; }
#groups-nav > li{ float:none; margin:0; }
#groups-nav > li > a{ border:0 !important; border-radius:999px !important; margin:0; padding:5px 16px; font-size:12.5px; font-weight:600; color:var(--mi-muted); background:transparent; }
#groups-nav > li > a:hover,
#groups-nav > li > a:focus{ background:transparent; color:var(--mi-ink); }
#groups-nav > li.active > a,
#groups-nav > li.active > a:hover,
#groups-nav > li.active > a:focus{ background:#fff !important; color:var(--mi-ink) !important; box-shadow:0 1px 2px rgba(20,28,48,.12); }

/* filter chips: groups.js toggles btn-primary (active) / btn-default —
   map those states onto the mi-chip look without touching the JS */
#groups-filter-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
#groups-filter-chips .groups-filter-chip{ font-size:12px; font-weight:400; padding:5px 13px; border-radius:999px; border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); box-shadow:none; text-shadow:none; }
#groups-filter-chips .groups-filter-chip.btn-primary{ font-weight:600; }
#groups-filter-chips .groups-filter-chip:hover{ border-color:#cdd2dc; }
#groups-filter-chips .groups-filter-chip.btn-primary{ background:var(--mi-accent); border-color:var(--mi-accent); color:#fff; }

/* toolbar buttons: quiet outline look; enablement styling preserved */
#groups-tab .mi-hub-toolbar .btn-default{ border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); font-weight:600; border-radius:var(--mi-radius-sm); }
#groups-tab .mi-hub-toolbar .btn-default:hover:not(:disabled):not(.disabled){ border-color:var(--mi-accent); color:var(--mi-accent-ink); background:var(--mi-accent-tint); }
#groups-tab .mi-hub-toolbar .btn-default:disabled,
#groups-tab .mi-hub-toolbar .btn-default.disabled{ opacity:.5; }

/* table chrome (covers both the groups table and the class-groups table) */
#groups-tab .fixed-table-container{ border:1px solid var(--mi-line) !important; border-radius:var(--mi-radius-sm); }
#groups-tab .table-bordered > tbody > tr > td,
#groups-tab .table-bordered > thead > tr > th{ border-color:var(--mi-line-2); }
#groups-tab .table > thead > tr > th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mi-faint); border-bottom-width:1px; }
#groups-tab .table > tbody > tr > td{ vertical-align:middle; font-size:13px; }
#groups-tab .table-hover > tbody > tr:hover{ background:var(--mi-surface-2); }
#groups-tab .fixed-table-pagination{ padding:6px 12px; }

/* detail (members) panel */
#groups-tab .group-detail-panel{ background:var(--mi-surface-2); border-radius:var(--mi-radius-sm); padding:12px 14px; }

/* class-groups settings: same treatment for its action buttons */
#class-group-setup-tab .btn-default{ border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); font-weight:600; border-radius:var(--mi-radius-sm); }
#class-group-setup-tab .btn-default:hover{ border-color:var(--mi-accent); color:var(--mi-accent-ink); background:var(--mi-accent-tint); }
#class-group-setup-tab .btn-success{ background:var(--mi-accent); border-color:var(--mi-accent); border-radius:var(--mi-radius-sm); font-weight:600; }
#class-group-setup-tab .btn-success:hover{ background:var(--mi-accent-ink); border-color:var(--mi-accent-ink); }
#class-group-setup-tab .btn-danger{ border-radius:var(--mi-radius-sm); font-weight:600; }

/* group modals: form fields inside the freshly skinned modals */
#groups-tab .mi-modal .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
#groups-tab .mi-modal .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }

/* ---- Groups modals: interior modernization (CSS-only where the DOM is
   a JS contract — groups.js drives section show/hide via .input-row) ---- */

/* staff add/remove */
.mi-staff-addrow{ display:flex; gap:8px; align-items:center; max-width:400px; margin-top:4px; }
.mi-staff-addrow .form-control{ flex:1; }
.mi-staff-list{ margin-top:10px; max-height:320px; overflow-y:auto; }
.mi-staff-list .email{ display:inline-block; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--mi-line-2); color:var(--mi-ink-2); }

/* edit-group form (DOM untouched — restyle in place) */
#edit-group-modal .modal-body{ max-height:75vh; }
#edit-group-modal .nice-label,
#edit-group-modal h5.nice-label{ font-size:12.5px; font-weight:600; color:var(--mi-ink-2); margin:14px 0 4px; }
#edit-group-modal .nice-label span{ font-weight:600; }
#edit-group-modal .input-row{ margin-bottom:6px; }
#edit-group-modal .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
#edit-group-modal .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
#edit-group-modal select{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); }
#edit-group-modal .inputs-box{ margin-bottom:8px; }

/* generic mi-modal button polish (footer buttons across the groups modals) */
.mi-modal .modal-footer .btn{ border-radius:var(--mi-radius-sm); font-weight:600; min-width:96px; }
.mi-modal .modal-footer .btn:not(.mi-btn-accent):not(.btn-danger){ border:1px solid var(--mi-line); background:#fff; color:var(--mi-ink-2); }
.mi-modal .modal-footer .btn:not(.mi-btn-accent):not(.btn-danger):hover{ border-color:#cdd2dc; }
.mi-modal .modal-footer .btn-danger{ background:var(--mi-danger); border:1px solid var(--mi-danger); }
.mi-modal .modal-footer .btn-danger:hover{ background:#c93c40; border-color:#c93c40; }

/* jackrabbit login helper texts */
#edit-jackrabbit-login-modal .first-time{ font-size:13px; color:var(--mi-ink-2); }
#edit-jackrabbit-login-modal .login-error{ border-radius:var(--mi-radius-sm); }

/* groups table row actions: inline-SVG icon buttons need inline-flex to
   sit on the text baseline inside table cells */
.groups-table-edit-col-wrapper{ display:inline-flex; gap:2px; align-items:center; }

/* first-time / empty-state card (Class Groups setup, reusable) */
.mi-empty-card{ max-width:440px; background:var(--mi-surface); border:1px solid var(--mi-line); border-radius:var(--mi-radius); box-shadow:var(--mi-shadow); padding:28px 26px; text-align:center; margin:24px 0; }
.mi-empty-card .mi-ico{ color:var(--mi-accent); margin-bottom:10px; }
.mi-empty-card h4{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--mi-ink); }
.mi-empty-card p{ font-size:13px; color:var(--mi-muted); margin:0 0 18px; line-height:1.55; }
.mi-empty-card .btn{ min-width:180px; }

/* MI Manager audience picker (app 2945): align the inline-styled block
   with the composer look without touching its markup */
#manager-audience-picker label{ font-size:12.5px; font-weight:600; color:var(--mi-ink-2); }
#manager-audience-picker .form-control{ border-radius:var(--mi-radius-sm); border-color:var(--mi-line); box-shadow:none; }
#manager-audience-picker .form-control:focus{ border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }
#manager-audience-picker #manager-audience-preview{ background:var(--mi-surface-2) !important; border:1px solid var(--mi-line); border-radius:var(--mi-radius) !important; }

/* Help tab link list */
.mi-help-list .mi-help-link{ font-size:14px; }
.mi-help-list p{ margin-bottom:12px; }

/* generic info badge (help popover trigger, "?" in a tinted circle) —
   the #chat-settings-modal variant above is scoped; this one is shared */
a.mi-info-badge{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--mi-accent-tint); color:var(--mi-accent-ink); font-size:11px; font-weight:700; line-height:1; cursor:help; margin-left:6px; vertical-align:2px; text-decoration:none !important; outline:none; }
a.mi-info-badge::after{ content:"?"; }
a.mi-info-badge:hover{ background:#dfe6fb; color:var(--mi-accent-ink); }

/* edit-group modal: breathing room under the Type/Authentication pill
   groups before the next section heading */
#edit-group-modal .mi-optcol{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; max-width:none; margin-bottom:18px; }

/* Communication sub-nav: quiet tabs (Option A) — CSS-only restyle of the
   Bootstrap nav-tabs. Muted text; active = accent ink + short rounded
   underline. Pill segments stay reserved for in-tab view switchers. */
#push-nav.nav-tabs{ border-bottom:1px solid var(--mi-line); display:flex; gap:26px; flex-wrap:wrap; margin-bottom:18px; }
#push-nav.nav-tabs > li{ float:none; margin:0 0 -1px; }
#push-nav.nav-tabs > li > a{ position:relative; display:block; margin:0; padding:9px 2px 11px; border:0 !important; border-radius:0 !important; background:transparent !important; font-size:13.5px; font-weight:400; color:var(--mi-muted); white-space:nowrap; }
#push-nav.nav-tabs > li > a:hover,
#push-nav.nav-tabs > li > a:focus{ color:var(--mi-ink); background:transparent !important; }
#push-nav.nav-tabs > li.active > a,
#push-nav.nav-tabs > li.active > a:hover,
#push-nav.nav-tabs > li.active > a:focus{ color:var(--mi-accent-ink); font-weight:600; border:0 !important; background:transparent !important; }
#push-nav.nav-tabs > li.active > a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--mi-accent); }

/* Deep Links location dropdown: the last bare native select on the page */
#deep-links-location-select{ appearance:none; -webkit-appearance:none; border:1px solid var(--mi-line); border-radius:var(--mi-radius-sm); background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a0af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center; padding:7px 30px 7px 11px; font-size:13px; color:var(--mi-ink); min-width:170px; }
#deep-links-location-select:focus{ outline:none; border-color:var(--mi-accent); box-shadow:0 0 0 3px var(--mi-accent-tint); }

/* ============================================================
   Communication on phones
   ============================================================ */

/* bootstrap-table card view (data-mobile-responsive, <=562px): the card
   "title" is a copy of the column header, so the select-all column clones a
   dead checkbox into every card. Hide any checkbox that lands in a title. */
.push_main .card-view > .title input[type="checkbox"]{ display:none; }

/* Card rows read as label/value lines, left-aligned. The title keeps a fixed
   gutter so values line up; rows whose title is empty (row checkbox, action
   icons) drop the gutter and flow from the left edge. */
.push_main .card-views{ text-align:left; }
.push_main .card-view{ display:flex; align-items:baseline; gap:10px; padding:2px 0; text-align:left; }
.push_main .card-view > .title{ flex:0 0 110px; font-size:12.5px; font-weight:600; color:var(--mi-ink-2); }
.push_main .card-view > .title:empty,
.push_main .card-view > .title:has(> input[type="checkbox"]){ display:none; }
.push_main .card-view > .value{ flex:1; min-width:0; word-break:break-word; }

/* Simple picker tables (composer locations + audience groups): the per-card
   "Select / Location / Group Name" labels just repeat, so drop them and put
   the checkbox and name on one line. */
#locations-select-table .card-view > .title,
#group-selection-table .card-view > .title{ display:none; }
#locations-select-table .card-views,
#group-selection-table .card-views{ display:flex; align-items:center; gap:10px; }
#locations-select-table .card-views .card-view,
#group-selection-table .card-views .card-view{ padding:0; }

/* Card view (bootstrap-table-mobile flips at <=562px, matching this query):
   with a fixed table height, fitHeader gives the table a negative top margin so
   the real thead hides under the floating header clone. Card view hides the
   header but never clears that margin, so the first card's top is pushed above
   the scroll area for good. The margin is inline (jQuery .css), hence !important. */
@media (max-width: 562px){
   .push_main .fixed-table-body .table{ margin-top:0 !important; }
   /* The desktop expand-chevron rule pins td:first-child to 32px/centered; in
      card view the whole card is one first-child td, so undo it here. */
   #groups-table > tbody > tr:not(.detail-view) > td:first-child{
      width:auto !important; min-width:0 !important; max-width:none !important;
      text-align:left !important; cursor:default;
   }
}

@media (max-width: 767px){
   /* Nav: one scrollable row instead of wrapping Help onto its own line */
   #push-nav.nav-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:20px; scrollbar-width:none; }
   #push-nav.nav-tabs::-webkit-scrollbar{ display:none; }

   /* Toolbars: no right-alignment spacer on phones; chips get their own row,
      controls flow left with even gaps, and the accent CTA goes full width */
   .mi-hub-toolbar{ gap:8px; }
   .mi-hub-toolbar .mi-hub-spacer{ display:none; }
   .mi-hub-toolbar #groups-filter-chips,
   .mi-hub-toolbar .mi-chips{ flex-basis:100%; }
   /* Chips stay on one row; overflow scrolls sideways (scrollbar hidden) */
   .mi-hub-toolbar .mi-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
   .mi-hub-toolbar .mi-chips::-webkit-scrollbar{ display:none; }
   .mi-hub-toolbar .mi-chips .mi-chip{ flex:0 0 auto; white-space:nowrap; }
   .mi-hub-toolbar .btn.mi-btn-accent{ flex-basis:100%; }
   .mi-hub-toolbar .mi-hub-search{ flex:1 1 100%; }
   .mi-hub-toolbar .mi-hub-search input{ width:100%; }

   /* bootstrap-table's built-in search: full width under the toolbar */
   .push_main .fixed-table-toolbar .search{ float:none !important; width:100%; margin:0 0 8px; }
   .push_main .fixed-table-toolbar .search input{ width:100%; }

   /* Chat modals carry inline width:60%/max-width:700px for desktop; on a
      phone that's ~260px. Let them take the full width minus a small gutter. */
   #group-chat-modal .modal-dialog,
   #dm-chat-modal .modal-dialog{ width:auto !important; max-width:none !important; margin:8px; }

   /* Class Groups Settings: the action buttons float right and the org picker
      floats left with nothing clearing them, so the full-width table search
      above overlaps them and swallows their taps. Normal flow on phones. */
   #class-groups-setup-container > .btn,
   #class-groups-setup-container .class-group-location-picker{
      float:none !important; display:inline-block;
   }
   #class-groups-active-classes-table-container{ clear:both; }
}