/*************************************************
*
*  Target only if it's viewed on the mobile device
*
*************************************************/

/*********************************
* Hide Behavior Fullscreen option
**********************************/
.iPhone .behaviorManagementHeader .fullscreen,
.WindowsPhone .behaviorManagementHeader .fullscreen{
    display:none !important;
}
@media screen
and (max-width:767px){
    .Android .behaviorManagementHeader .fullscreen{
        display:none !important;
    }
}



/*************************************************
*
*  767- MOBILE RESOLUTION
*
*************************************************/
@media screen
and (max-width:767px){


    /*********************
    * Main Area
    *********************/
    .mainPanel .mainPage{
        padding-bottom:48px;
    }
    #orgHome .communityPage{
        padding:48px 0 50px 0;
    }
    .shadowBox .profilePage{
        padding-top:48px;
    }

    /*.shareOptionsCount{
        right: 0;
    }*/



    /*********************
    * Main: Tab Bar
    *********************/
    .mainNavBar{
        top:auto;
        bottom:0;
        padding-left:0;
        border-bottom:none;
        border-top:1px solid #e4e5ed;
        background:#fff;
    }

    .mainNavBar a{
        margin-top:0;
        text-indent:-9999px;
        width:90px;
        background-image:none;
    }
    .mainNavBar a:after{
        content:attr(data-coachmark);
        text-indent:0;
        position:absolute;
        left:0;
        bottom:-7px;
        font-size:12px;
        width:100%;
        color:#000;
    }
    .mainNavBar .selected a{
        color:#00a4d4;
    }
    .mainNavBar .selected a:after{
        color:inherit;
    }
    .mainNavBar .bloomzLogo{
        display:none;
    }
    div.recommendIcon{
        background-position:-649px -536px;
        position:fixed;
        top:2px;
        width:44px;
        height:44px;
        text-indent:-9999px;
        right:0;
        cursor:pointer;
        display:block;
    }
    .mainNavBar li{
        border-left:none !important;
    }
    .mainNavBar li.settings{
        display:none !important;
    }
    .postsTab .inlineToolTip.recommendBloomzTip{
        padding-right: 10px;
    }






    /*********************
    * Community: Tab Bar
    *********************/
    .communityPage .orgNav{
        top:auto;
        bottom:0;
        padding-left:0;
        border-bottom:none;
        border-top:1px solid #e4e5ed;
        background:#fff;
    }
    .communityPage .orgNav ul{
        background:transparent !important;
        padding: 0;
        margin: 0;
        display: table;
        width: 100%;
        text-align: center;
        box-shadow:none;
    }
    .communityPage .orgNav li{
        margin: 0 1px 0 0;
        list-style: none;
        display: table-cell;
        position: relative;
    }
    .communityPage .orgNav li.selected{
        color:#00a4d4;
    }
    .communityPage .orgNav a{
        display: inline-block;
        margin-top:0;
        margin-bottom: 6px;
        padding:0;
        width: 43px;
        height: 38px;
        text-indent: -9999px;
        color:#000;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        position: relative;
        font-size: 12px;
        margin: 0;
        padding-top: 32px;
        height: auto;
        line-height: 1;
    }
    .communityPage .orgNav .selected a{
        color:inherit;
    }
    .communityPage .orgNav a:after{
        content:attr(data-coachmark);
        text-indent:0;
        position:absolute;
        left:0;
        bottom:-7px;
        font-size:10px;
        width:100%;
        color:#787878;
        line-height:1;
    }
    .communityPage .orgNav .selected a:after{
        color:inherit;
    }
    .communityPage .orgNav .selected{
        background-color:transparent;
        box-shadow:none;
    }
    .communityPage .orgNav .selected a{
        background-color:transparent;
        box-shadow:none;
    }
    .communityPage .orgNav li.moreOpt{
        position:relative;
        top:auto;
        right:auto;
    }
    .communityPage .orgNav ul li{
        display:none;
    }
    .communityPage .orgNav ul li:nth-child(1),
    .communityPage .orgNav ul li:nth-child(2),
    .communityPage .orgNav ul li:nth-child(3),
    .communityPage .orgNav ul li:nth-child(4),
    .communityPage .orgNav ul li:nth-child(5),
    .communityPage .orgNav ul li:nth-child(6),
    .communityPage .orgNav ul li.moreOpt{
        display:table-cell;
    }
    .communityPage .orgNav li.moreOpt a{
        background-position:-520px -66px;
        width:43px;
    }
    .communityPage .orgNav li.settings{
        display:none !important;
    }



    /************************
    * Community: orgNavMenu
    ************************/
    .orgNavMenu{
        top:99px;
        padding-top:0;
        border-top:1px solid #f2f2f2;
    }
    .orgNavMenu .profileActions li:nth-child(1),
    .orgNavMenu .profileActions li:nth-child(2),
    .orgNavMenu .profileActions li:nth-child(3),
    .orgNavMenu .profileActions li:nth-child(4){
        display:none;
    }
    .orgNavMenu ul{
        background:#fff !important;
    }
    .orgNavMenu li.moreOpt a{
        display:none;
    }
    .showMenu .orgNav .selected a:after{
        color:#787878;
    }
    .showMenu.communityPage .orgNav .moreOpt a{
        background-position:-520px -126px;
        color:#0076B5;
    }
    .showMenu .orgNav .moreOpt a:after{
        color:inherit;
    }
    .showMenu .orgNav li a svg.selectedIcon{
        display:none;
    }
    .showMenu .orgNav li a svg,
    .showMenu .orgNav li.moreOpt a svg.selectedIcon{
        display:inline-block;
    }
    .showMenu .quickLinks{
        display:none;
    }
    .orgNavMenu li.selected a,
    .orgNavMenu li a{
        background:#fff;
    }
    .orgNavMenu li a{
        border-top:none;
        border-bottom:1px solid #f2f2f2;
        text-align:left;
        text-indent:20px;
        color:#000;
    }


    /*********************
    * Demo Class
    *********************/
    .inIFrame #orgHome .communityPage .actionBar h1{
        text-align: center;
        padding: 4px 70px;
        font-size: 20px;
        line-height: 40px;
        color: #fff;
    }

    .logo { background:#fff; position:relative; border-bottom: 1px solid #e4e5ed; }
    .subNavTabs span.leaveEmpty { display:none; }
    .hasSubTabs { padding-top: 0 !important; }
    .hasSubTabs .actionBar { box-shadowBox:none !important; }
    .actionBar { position:relative; }
    .shadowBox .actionBar { position:absolute; }

    .hasSubTabs .subNavTabs { position:relative; top:0; box-shadow:none; }
    .orgNav ul, #orgHome .subNavTabs .orgNav ul { padding:0; }
    #beforeMainPanel { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
    .mainNavBar a svg, .orgNav a svg { left: 0; right: 0; top: 2px; margin: auto; width: 30px; height: 30px; }
    .messagesTab .addCurSection button { background-position: -255px -291px; opacity: 1; }
    #notificationCenter .hasSubTabs { padding-top:0 !important; }
    .allGroupsTitle { position: absolute; text-align: center; margin: 0 70px; margin-bottom: 0; padding-left: 0; width: auto; top: 17px; left: 0; right: 0; }
    .recipientPickerCtrl .forModeMainPanel.actionBar.selectGroups { height: auto; }
    .recipientPickerCtrl.modeHideTabsAndRecipients .actionButtons, .recipientPickerCtrl.modeMainPanel .actionButtons { position:relative; top:0; }
    .recipientPickerCtrl.modeMainPanel { padding:0; }
    nav.subNavBar .userHeader { position:relative; }
    nav.subNavBar .userHeader:after { content:""; background-image: url(../../images/sprite@2x.png); background-position: -231px -5px; background-size: 560px; height: 33px; width: 150px; margin-left: 10px; top: 0; left: 0; margin-top: 10px; position:absolute; }
    .userName { width:170px; padding-top:55px; }
    div.showDrawer .logo, div.showDrawer ~ #genericControls .logo { background:transparent; border-color:transparent; }
    #bloomzTray .choosePhotoOptions { top: 55px; left: 10px; height: 50px; width: 50px; border-radius: 50px; }
    .mainNavBar .mainTabBar { height: 49px; z-index: 1; position: relative; background: #fff; }
    .quickLinks:after { bottom: 54px; }
    .quickLinks div.addButton, .createActivity div.addButton { bottom: 51px; }
    .Desktop .scrollView>section section.orgProfile.hasCover, .scrollView>section section.orgProfile.hasCover { height:auto; padding-top: 130px; }
    .orgProfile.hasCover h2, .orgSettingsPage .orgProfile.hasCover h2 { position: relative; margin-left: 0; left: 0; bottom: 7px; margin-right: auto; display: block; }
    .orgProfile.hasCover .buttonGroup { height:auto; max-width: calc(100% - 20px); }
    .orgProfile.hasCover .buttonGroup button { line-height: 1.25; height: auto; }
    #orgHome .subNavTabs .orgNav { padding-left: 0; display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; width: 100vw; }
    .subNavTabs .orgNav ul, #orgHome .subNavTabs .orgNav ul { display: flex; overflow: auto; }
    .behaviorManagementItem { width: 23%; margin: 1%; }

    /*********************
    * SidePanel: Messages
    *********************/
    .sidePanel{
        right:-100%;
        box-shadow:rgba(0, 0, 0, 0.4) -4px 0px 10px 0px;
        padding-top:49px;
    }
    .showSidePanel #_sidechat .sidePanel, .showSidePanelMobile #_sidechat .sidePanel { right:0; }
    .sidePanel:before{
        content:"Messages";
        /*background:#44464e;*/
        /*border-bottom: 1px solid #25272d;*/
        position: absolute;
        top: 0;
        width: 100%;
        height: 47px;
        border-radius: 0;
        box-shadow: none;
        left:0;
        bottom: 14px;
        display: block;
        /*font-family: 'focoregular', Verdana, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;*/
        font-size:20px;
        line-height: 48px;
        /*text-align: center;
        color:#b3b3b3;
        text-shadow:0 1px 0 rgba(0,0,0,1);*/
        color:#000;
        padding:0 20px;
        text-align:left;
        width: auto;
        right: 90px;
        background: #fff;
    }
    .sidePanel .addCurSection:before{
        display:none;
    }
    .sidePanel .addCurSection button{
        margin-left:0;
    }
    .sidePanel .messages .message{
        /*background:#373842;*/
        border-bottom:1px solid #e4e5ed !important;
        color:#b3b3b3;
        text-shadow:none;
        border-color:transparent;
    }
    .sidePanel .messages .message:after{
        display:none;
    }
    .sidePanel .messages .message:active{
        background:#373842;
        border-top:1px solid #373842;
    }
    .sidePanel .messages .message time{
        color:#b3b3b3;
    }
    .sidePanel .messagesTab .message .profileM:after,
    /*.showPptsRoles,
    .sidePanel .messageTextPanel */{
        color:#fff;
    }
    .sidePanel .mainPage{
        border-left:none;
    }
    .sidePanel .groupChatCount{
        background:none;
        border:1px solid #888;
    }
    .sidePanel .groupChatCount:after{
        margin:-27px 0 0 1px;
        border:1px solid #888;
    }
    .sidePanel .mainPage .scrollView{
        border-left:none;
        background:#fff;
    }
    .sidePanel .contentArea{
        background:#fff;
    }
    .sidePanel .persistentEmptyPanelMsg:before{
        display:none;
    }
    .sidePanel .persistentEmptyPanelMsg li,
    .sidePanel .persistentEmptyPanelMsg h2{
        color:#b3b3b3;
    }
    .sidePanel .mainPage .scrollView::-webkit-scrollbar{
        width: 6px;  /* for vertical scrollbars */
    }
    .sidePanel .mainPage .scrollView::-webkit-scrollbar-track{
        background:#373842;
    }
    .sidePanel .mainPage .scrollView::-webkit-scrollbar-thumb{
        background: rgba(255, 255, 255, 0.3);
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
    }
    .sidePanel .mainPage .scrollView::-webkit-scrollbar-thumb:hover{
        background:rgba(255,255,255,.6);
    }
    .sidePanel .mainPage .scrollView:hover{
        overflow-x:hidden;
        overflow-y:scroll;
    }
    .sidePanel .endMsgDivider{
        display:none !important;
    }



    /*************************************************
    *  Message Tray Icon
    *************************************************/
    div#messageTrayIcon{
        width:36px;
        width:46px;
        height:44px;
        top:3px;
    }
    .communityPage div#messageTrayIcon:before{
        /*background-position:-524px -354px;*/
    }



    /*************************************************
    *  Hide/Show Message Tray
    *************************************************/
    div#messageTrayIcon.showSidePanel{
        width:100%;
        height:100%;
    }
    div#messageTrayIcon.showSidePanel .toggleTray{
        width:100%;
        height:100%;
        display:block;
        cursor:pointer;
        position:absolute;
    }
    #_sidechat,
    .hideSidePanel #_sidechat,
    .showSidePanel #_sidechat{
        display:none !important;
    }
    .showSidePanelMobile #_sidechat{
        display:block !important;
    }
    div#messageTrayIcon:before,
    .hideSidePanelMobile div#messageTrayIcon:before{
        background-color:transparent !important;
        border-left:1px solid transparent;
    }
    .showSidePanelMobile div#messageTrayIcon:before{
        /*background-color:rgba(0,0,0,.05) !important;*/
        border-left:1px solid transparent;
    }
    .showSidePanelMobile div#messageTrayIcon:after { top:-4px; }
    .showSidePanelMobile div#messageTrayIcon{
        width:100%;
        height:100%;
    }
    div#messageTrayIcon .toggleTray,
    .hideSidePanelMobile div#messageTrayIcon .toggleTray{
        width:36px;
        height:44px;
    }
    .showSidePanelMobile div#messageTrayIcon .toggleTray{
        width:100%;
        height:9999px;
    }
    .showSidePanelMobile .scrollview{
        -webkit-overflow-scrolling: auto !important;
    }
    .showSidePanelMobile .sidePanel .mainPage .scrollView{
        -webkit-overflow-scrolling: touch !important;
    }



    /*********************
    * Action Bar
    *********************/
    .actionBar{
        box-shadow:0 2px 4px rgba(0,0,0,.05);
    }
    .mainPage>.actionBar{
        display:block;
    }





    /*********************
    * Quick Links
    *********************/
    .showQuickLinks ~ div#messageTrayIcon{
        z-index:500;
    }



    /************************
    * Community: Action Bar
    ************************/
    #orgHome .communityPage .actionBar{
        border-bottom:none;
        height:50px;
        box-shadow:inset 0 -1px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.05);
        background:#198aa9;
    }
    #orgHome .communityPage .actionBar .backButtonOnly{
        color:#fff;
        width:100%;
        opacity:1;
    }
    #orgHome .communityPage .actionBar .backButtonOnly:after{
        background-position: -91px -8px;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        border:none;
        width:32px;
        height:32px;
        top: 8px;
        left: 8px;
        background-size: 564px 1870px;
    }
    #orgHome .communityPage .actionBar h1{
        text-shadow:none;
        color:#000;
        padding:4px 120px 4px 48px;
        text-align:left;
        font-weight: bold;
    }
    #orgHome .isSubgroup .actionBar h1 span.breadcrumb{
        color:#fff;
    }
    #orgHome .actionBar .actionButtons{
        right:44px;
    }
    #orgHome .actionBar .actionButtons.grpSettings{
        right:75px;
        z-index:1;
    }
    #orgHome .actionBar .actionButtons.searchBar{
        right:0 !important;
    }
    #orgHome .actionBar .actionButtons button.orgEdit:after{
        background-position:-332px -125px;
    }
    #orgHome .actionBar .actionButtons button.orgEdit.leaveGrp:after{
        background-position:-330px -722px
    }


    /*********************************************
    * SubNav Tabs
    *********************************************/
    .subNavTabs{
        background:#000;
    }
    .subNavTabs span:before{
        content: "";
        width: 100%;
        height: 1px;
        display: block;
        position: absolute;
        background: rgba(0,0,0,.1);
        left: 0;
        bottom: 0;
        z-index: 1;
    }
    .subNavTabs span{
        opacity:.92;
        filter:alpha(opacity=92);
        background:#198aa9;
    }

    /*********************************************
    * SubNav Student simple mode
    *********************************************/
    .isStudentSimpleView .subNavTabs{
        top:69px;
        height:37px;
        line-height:37px;
        background:#f2f2f2;
        box-shadow:inset 0 -1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.05);
    }
    .isStudentSimpleView .subNavTabs span{
        color:#787878;
        background:none;
    }
    .isStudentSimpleView .subNavTabs span.selected{
        color:#1bb3e0;
    }
    .isStudentSimpleView .subNavTabs span.selected:after{
        background:#1bb3e0;
    }

    .top-margin-10 {
        margin-top: 30px !important;
    }




    /*********************************************
    * Notifications SubNav Tabs
    *********************************************/
    #notificationCenter .actionBar{
        box-shadow: none !important;
        border-bottom: 1px solid #e0e0e0;
    }
    #notificationCenter .subNavTabs{
        top:49px;
        height:37px;
        line-height:37px;
        background:#f2f2f2;
        box-shadow:inset 0 -1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.05);
    }
    #notificationCenter .subNavTabs span{
        padding:0 7px;
        color:#787878;
        background:none;
    }
    #notificationCenter .subNavTabs span.selected{
        color:#1bb3e0;
    }
    #notificationCenter .subNavTabs span.selected:after{
        background:#1bb3e0;
    }
    .iPhone #notificationCenter .subNavTabs{
        height:38px;
    }




    /*********************************************
    * SubNav Tabs
    *********************************************/
    .scrollView h1.subInlineTabs *{
        /*display:none !important;*/
    }

    /*********************************************
    * Manage Tab
    *********************************************/

    .studentJoinedTag {
        padding-right: 0;
    }

    .studentCodeDetails {
        padding-right: 20px !important;
    }

    .moderatorTag {
        width: 60px;
        font-size: 12px;
    }



    /************************
    * Quick Links
    ************************/
    .quickLinks div.addButton,
    .calendarTab .quickLinks div.addButton,
    .orgSignupsPage .quickLinks div.addButton,
    .orgCalendarPage .quickLinks div.addButton,
    .volunteerAsks .quickLinks div.addButton,
    .quickLinks:after{
        bottom:57px;
    }
    .quickLinks:after{
        margin-bottom:3px;
    }
    .quickLinkStudent div.positionButtonPostOptions,
    .quickLinkStudent:after {
        bottom:8px;
    }
    .quickLinkStudent:after {
        margin-bottom:3px;
    }
    .mediaTab .addCurSection,
    .messagesTab .addCurSection,
    .volunteerAsks .addCurSection,
    .circlesTab .addCurSection,
    #orgHome .orgMembersPage .addCurSection,
    #orgHome .orgSignupsPage .addCurSection,
    #orgHome .orgMediaPage .addCurSection,
    #orgHome .orgInfoPage .addCurSection,
    #orgHome .orgManagePage .addCurSection{
        bottom:60px !important;
    }
    .addCurSection:empty{
        display:none !important;
    }
    .chatInput .placeHolderTextStudent {
        padding-left: 0;
        text-indent: 0;
    }

    #orgHome .orgManagePage .addCurSection{
        position:absolute;
        left:auto;
        bottom:14px;
        right:7px;
        display:block;
        height:56px;
        width:56px;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        border:none;
        background:#2ab3de;
        box-shadow:0px 5px 15px rgba(0,0,0,.25);
    }

    .orgMediaPage .quickLinks .optionCreateEvent,
    .orgMediaPage .quickLinks .optionCreateCircle,
    .orgMediaPage .quickLinks .optionCreateAwards,
    .orgMediaPage .quickLinks .optionAttendence,
    .orgMediaPage .quickLinks .optionCreatePost,
    .orgMediaPage .quickLinks .optionCreateStudentWork,
    .orgMediaPage .quickLinks .optionCreateAnnouncement,
    .orgMediaPage .quickLinks .optionCreateAlert,
    .orgMediaPage .quickLinks .optionCreateMessage,
    .orgMediaPage .quickLinks .optionCreateCircle,
    .orgMediaPage .quickLinks .optionCreateVolunteer,
    .orgMediaPage .quickLinks .optionCreatePTEvent,
    .orgMediaPage .quickLinks .optionCreateSubGroup{
        display: none;
    }

    .createActivity{
        bottom: 57px;
        position: absolute;
        z-index: 999;
        right: 8px;
    }




    /************************
    * Skills Picker
    ************************/
    #skillPicker.award{
        padding: 40px 16px;
        box-sizing: border-box;
        background: rgba(0,0,0,.7);
    }
    #skillPicker .subPage{
        border-radius:8px;
    }
    #skillPicker .subPage .actionBar{
        border-radius:8px 8px 0 0;
    }
    #skillPicker .subPage .awardsFooter{
        border-radius: 0 0 8px 8px;
    }

    #addRecipient {
        top: 71px;
        left: 333px;
    }

    /************************
    * post recipients listing
    ************************/
    .groupNameWithRoles .circleName{
        width: 200px !important;
    }

    .phoneSetting .linkControl span{
        font-size: 15px;
    }

    .phoneSetting .highlightableRow label{
        font-size: 16px;
    }
    .createPostBody div[image="image"] { width: 50%; padding: 0 10px 10px 0; }
    .orgInfoPage .contentArea .formLayout>section.editSection img { width:50%; }

    #dashboard .filter-by-options div{
        width: 70%;
    }

    #dashboard .filter-by-options{
        justify-content: flex-start;
    }

    .queueList{
        grid-auto-columns: 80%;
    }

    .postDeliveryReport{
        flex-direction: column;
    }

    .postDeliveryReport > div{
        width: 100%;
        justify-content: center;
        margin-top: 40px;
    }

    .color-legend{
        width: 100%;
        overflow-x: scroll;
    }

}


@media screen and (max-width:575px){
    .behaviorManagementItem { width: 31%; margin: 1%; }
    .studentAwardsSummary .summaryBox section.chart { position: relative; width: 100%; margin: 0 auto; border-right: 0; border-bottom: 1px solid #f2f2f2; display:table; }
    .studentAwardsSummary .summaryBox section.chart:last-child { border-bottom:0; }
    .mediaSelection div { flex: 0 0 48%; max-width: 48%; }
    #_communitySettings .formLayout label input[type='text'] { padding-left: 115px; }
    .createPostBody div[image="image"] { width: 100%; padding: 0 0 10px 0; }
    .orgInfoPage .contentArea .formLayout>section.editSection img { width:100%; }

    .communityManageContent .searchBar-with-select .searchBox-select { width:100%; padding-right:0; }
    .communityManageContent .searchBar-with-select.searchBar-searchOptions .searchBox { width:100%; }
    ul.actionButtons.searchBar li { margin-bottom: 10px; }
    .studentAwardsSummary .summaryBox .data{display: flex; flex-direction: column; align-items: center;}
}