/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    header .main-menu li{
        margin: 0px 10px;
    }
}

/*Tablet only*/
@media only screen and (min-width : 768px) and (max-width : 992px) {
    .columnflex {
        flex-direction: row;
        height: auto;
    }

}

/* Small Devices (phones and small tablets) */
@media only screen and (max-width : 768px) {
     .mobiletoedge{
        padding-left: 0px;
        padding-right: 0px;
     }

     .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }

    .container-fluid > .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .childflexboxrow
    {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .panel {
        flex: none;
        margin-right: 15px;
        width: calc(50% - 15px);
    }
        .panel.folder_panel_wide {
            max-width: 100%;
            width: 100%;
        }
    .text-center-mobile{
        text-align: center;
    }

    #templateselect_holder .panel{ width: calc(50% - 15px); }

    .panel-holder-nocarousel.flex{
        margin-right: -15px;
    }
    .panel-holder-nocarousel.flex .panel{
        flex: 1 0 164px;
        max-width: calc(50% - 15px);
    }
    .panel-holder.flex.slick-initialized{
        margin-right: -15px;
        margin-left: -15px;
    }

    .azzuu-dropdown.opened {
        border-radius: 0px;
        min-width: calc(100vw);
        border-left: 0px;
    }

    header .option-menu-mobile{
        left: 0px;
        right: initial;
        display: block;
    }
    header .option-menu-mobile .azzuu-sidebar{
        left: 0px;
        right: initial;
        transform: translateX(-100%);
        border-right: 1px solid #C9D0E1;
        border-left: none;
        text-align: left;
    }
    header .option-menu-mobile li:first-of-type.opened{
        border-right: 1px solid #c9d0e1;
        border-left-color: transparent;
    }
    header .option-menu-mobile .azzuu-sidebar.opened{
        transform: translateX(0%);
    }

    header#editor .option-menu > li{
        display: none;
    }
    header .option-menu > li.showmobile,
    header#editor .option-menu > li.showmobile{
        display: block;
    }
    header .option-menu > li.hidemobile{
        display: none;
    }
    header .logoholder.mainlogo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    header .main-menu, .subheader .main-menu {
        text-align: left;
        background-color: white;
        
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

     header .main-menu li/*, .subheader .main-menu li*/ {
        display: block;
        margin: 0px 25px;
    }
     .subheader .main-menu li:first-of-type{
         margin-left: 150px;
     }
     .subheader .main-menu li:last-of-type{
         padding-right: 100px;
     }
        .subheader .main-menu li.mobilespacer {
            display: block;
            margin-left: 0px;
        }
        header .main-menu.socialsizeholder:before {
            font-family: 'azzuuinterface' !important;
            content: 'Size';
            content: "\e926";
            position: relative;
            top: 5px;
            background-color: #fff;
            font-size: 14px;
            left: 0;
            padding: 0 10px;
            cursor: pointer;
        }
        /*
            1	Facebook
            2	Twitter
            3	Instagram
            4	LinkedIn
            5	Instagram Stories
            6	Facebook Stories
            7	Snapchat
            //8   ,//Email
            //9     ,	TV
            //10  Digital Signage
        */
        header .main-menu.socialsizeholder[data-socialplatformid="1"]:before {
            content: "\e927";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="2"]:before {
            content: "\e926";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="3"]:before {
            content: "\e903";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="4"]:before {
            content: "\e961";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="5"]:before {
            content: "\e99c";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="6"]:before {
            content: "\e99b";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="7"]:before {
            content: "\e993";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="8"]:before {
            content: "\e9a1";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="9"]:before {
            content: "\e9a1";
        }
        header .main-menu.socialsizeholder[data-socialplatformid="10"]:before {
            content: "\e9a1";
        }

        header .main-menu.socialsizeholder {
            display: none;
            position: absolute;
            top: 0px;
            left: 114px;
            display: block;
        }

    header#editor .main-menu.socialsizeholder li {
        display: none !important;
        text-align: center;
    }
    header#editor .main-menu.socialsizeholder:hover li {
        display: block !important;
    }

        [data-tooltip]:hover::before {
            bottom: 100%;
            top: initial;
        }

    header#editor .main-menu.socialsizeholder li.social_size.newpagesize {
        border-left: none !important;
        border-top: 1px solid #C9D0E1;
    }

    /*smaller back button for mobile*/
    a.mobilebackbutton, button.mobilebackbutton, 
    a.mobilebackbutton:hover, button.mobilebackbutton:hover {
        font-size: 0;
        padding: 8px;}
    a.mobilebackbutton > span, button.mobilebackbutton > span,
    a.mobilebackbutton:hover > span, button.mobilebackbutton:hover > span {
        font-size: 12px;
        margin: 0px;
    }
    .logoholder img {
        display: none;
    }

    .panel .panel-image > button, .panel .panel-image > a.button{ opacity: 1; }
    .panel .panel-image > div > button, .panel .panel-image > div > a{ opacity: 1; }
    .panel.panel-small{width: initial; }

    .panel .panel-image > a.button{
        display: none;
    }

    button.moreButton {
        position: fixed;
        bottom: 55px;
        right: 10px;
        z-index: 40;
    }
        button.moreButton.moreButton_oneItem,
        button.moreButton.moreButton_twoItems {
            display: block;
        }
    button.moreButton.moreButton_oneItem + ul.moreMenu {
        margin-right: 0px;
    }

    button.moreButton.moreButton_mobileOnly{ display: block; }
    button.moreButton + ul {/*display: none; opacity: 0; transform: translateY(30px);  */ pointer-events: none;
                            /*transition: 0.3s ease-in opacity, 0.3s ease-in transform;*/
    }
    button.moreButton.focus + ul.moreMenu {display: block;}

    button.moreButton.focus + ul{ opacity: 1; pointer-events: all; transform: translateY(0px); }

    button.moreButton + ul.moreMenu li,
    button.moreButton + ul.moreMenu li:first-child {opacity: 0; transform: translateY(30px); transition: 0.3s ease-in all; pointer-events: none;}
        .moreButton.moreButton_twoItems + ul.moreMenu li {
            opacity: 0;
            transform: translateY(30px);
        }

    button.moreButton.focus + ul.moreMenu li:first-child{pointer-events: all; opacity: 1; transform: translateY(0px); 
                                               transition: 0.3s ease-in opacity,  0.3s ease-in transform;}

    button.moreButton.focus + ul.moreMenu li:nth-child(1) { transition-delay: 0.0s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(2) { transition-delay: 0.1s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(3) { transition-delay: 0.2s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(4) { transition-delay: 0.3s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(5) { transition-delay: 0.4s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(6) { transition-delay: 0.5s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(7) { transition-delay: 0.6s; }
    button.moreButton.focus + ul.moreMenu li:nth-child(8) { transition-delay: 0.7s; }

    button.moreButton.moreButton_oneItem + ul.moreMenu li, button.moreButton.moreButton_oneItem + ul.moreMenu li:first-child{ pointer-events: none; }
    button.moreButton.moreButton_oneItem.focus + ul.moreMenu li, button.moreButton.moreButton_oneItem.focus + ul.moreMenu li:first-child{ pointer-events: all; }

    ul.moreMenu{
        position: fixed;
        bottom: 105px;
        right: 10px;
        margin-right: 0px;
    }
    button.moreButton.focus + ul.moreMenu{
        padding-right: 0px;
    }
     .subheader {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .signinholder input, .signinholder input:active{ 
        width: 100%;
        max-width: 100%;
    }
    .signinholder .contents {
        padding: 30px 30px;
    }

    #dashboard_calendar_holder .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #dashboard_calendar_holder .fc-basic-view .fc-body .fc-row {
        min-height: 2.5em;
    }
    body{
        margin-bottom: 60px;
        margin-top: 75px;
    }
    body.with-subheader {
        margin-top: 135px;
    }
    .section{
        margin-top: 15px;
        margin-bottom: 0px;
    }
    .panel:hover{
        transform: none;
        cursor: pointer;
        box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
    }

    #socialPreviewHolder .facebook_preview{ width: 100%; }
    #socialPreviewHolder .twitter_preview{ width: 100%; }
    #socialPreviewHolder .facebook_preview .imagePreview{ width: 100%; }
    #socialPreviewHolder .twitter_preview .imagePreview{ width: 100%; }

    .slider + label {
        min-width: 20%;
        max-width: 70%;
    }

    .popup, .signinholder{
        min-width: 90%;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        margin-top: 0px;
    }
    .popup button, .buttonholder button, .popup a.button{
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 10px;
        min-width: 90px;
        margin-bottom: 0px;
    }
    .buttonholder button {
        margin-left: -1px;
    }
    .popup .preview_image{
        width: 100px; height: 100px; border-radius: 50px; margin: 0 auto; background-color: #CCCCCC;
    }
    .section .contents.splt [class^="col-"], .popup .contents.splt [class^="col-"]{ border: none;}
    #success, #error, #progress{
         max-width: 60%;
        min-width: 60%; 
    }

    .popup .contents{
        padding: 15px;
    }

    .section .contents.seperatorlines > div[class^="col-"]{
        border-bottom: 1px solid #C9D0E1;
        border-right: none;
    }
    .section .contents{
        padding: 30px 15px;
    }
    .contents-header .contents-primary-button{
        top: 20px;
    }

    .contents-header-filters {
        margin: 0px auto;
        text-align: center;
    }
        .contents-header-filters li {
            padding: 0 5px;
        }

    .panel.trending-panel {
        max-width: 150px;
        overflow: hidden;
    }
    .panel.trending-panel .panel-image {
        height: 100px;
    }
    .panel.trending-panel.createpostusingtrending .panel-body h2{
        font-size: 16px;
    }
    g-panel.createpostusingtrending .panel-body h2.long {
        font-size: 12px;
    }
    g-panel.createpostusingtrending .panel-body h2.short {
        font-size: 20px;
    }

    .recentpanel #socialPreviewHolder{
        padding: 0 0px;
    }
    #socialPreviewHolder .twitter_preview{
        margin-left: 0px;
    }
    #socialPreviewHolder .facebook_preview{
        padding-left: 0px;
    }

    .section#socialPreviewHolder .contents{
        padding: 15px 0;
    }

    .socialPanelHolder{
        width: auto;
        overflow-x: auto;
        margin: 0 -15px;
        padding-left: 15px;
    }
    .socialPanelHolder > ul{
        width: 20000px;
    }
    .socialPanelHolder .socialListPanels li{
        width: 150px;
        font-size: 12px;
    }
    .socialPanelHolder .socialListPanels li:last-child{
            padding-right: 15px;
    }
    .socialPanelHolder .socialListPanels li > label {
        padding: 17px;
    }
    .post-message-previewcreator tr td{
        display: block; /*table-row;*/
        width: 100%;
        padding-right: 0px;
    }
    #socialPreviewHolder .socialPreviewFooter span[class^="icon-twitter"] {
        margin-right: 25px;
    }
    .post-message-previewcreator .messageinfooptions{
        position: relative;
        padding-right: 45px;
    }
    .post-message-previewcreator .messageinfooptions button[type=button]{
        padding: 10px 8px !important;
    }
    #usersearch, .editorPostLinkParamList,
    .editorPostHashtagList, .editorPostFeedParamList {
        width: 100vw;
        max-width: 100vw;
        left: 0px;
        position: fixed;
        transform: none;
        top: inherit !important;
        bottom: 0px !important;
        margin-bottom: 0px;
        max-height: 40vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .post-message-previewcreator .emojiInput{
        margin-top: 0px;
    }
    .post-message-previewcreator .wdt-emoji-picker {
        top: -30px;
        display: block !important;
        right: 12px 
    }
    #post_calendar_holder #calendarNext{
        display: none;
    }

    #undopip{ padding-left: 0px; text-align: center; padding-top: 10px; padding-right: 0px; }
    #undopip > button{ margin-left: 0px; width: 100%; margin-top: 10px; }

    #trending-open-tab {
        display: block;
        padding: 10px 20px;
        background-color: #ffffff;
        border: 1px solid #c9d0e1;
        border-right: none;
        position: absolute;
        right: 0px;
        border-radius: 10px 0 0 10px;
        color: #08c684;
        z-index: 1;
    }

    #trendinglists li > div {
        padding: 5px 10px;
        margin: 0 5px 8px 5px;
    }
    .section.trending-holder {
        display: none;
        position: fixed;
        width: 100%;
        top: 0px;
        right: initial;
        z-index: 45;
        height: 100%;
        margin: 0px;
        min-height: 220px;
        margin-right: 0px;
        border: none;
    }
    .section.trending-holder.show{
        display: block;
    }
    .section.trending-holder.follow{
        position: fixed;
        top: 0px;
    }
    /*.section.trending-holder .contents {
        margin-left: 85px;
    }
    .section.trending-holder .contents{
        margin-left: 100px;
        width: 100%;
        overflow-x: auto;
    }
    .section.trending-holder .contents form{
        width: 20000px;
    }
    .section.trending-holder .feed-item {
        width: 250px;
        float: left;
    }*/

    .section.trending-holder .contents form > div{
        /*display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;*/
    }
        .section.trending-holder .contents[data-tab-source="trending"],
        .section.trending-holder .contents[data-tab-source="newsfeed"] {
            padding-left: 15px;
            padding-right: 15px;
        }
    .section.trending-holder .feed-item  {
        flex: 0 0 auto;
        /*width: calc(100vw - 101px);*/
        padding: 0px 15px;
    }
    .section.trending-holder .contents {
        max-height: 100%;
    }
    .section.trending-holder .tab.active {
        background-color: #ffffff;
        border-right: #ffffff 1px solid;
    }
    #post_calendar_holder{
        margin-left: -15px;
    }
    /*.tab-holder #post_calendar_holder{
        margin-left: 84px;
    }*/

    .trending-present {
        padding-right: 15px;
    }
    /*.trending-holder .tabs{
        width: 85px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .trending-holder .tab, .trending-holder .tab.third{ 
        float:initial; width: 100%;
    }*/
    .trending-holder .feed-item h2{
        margin-top: 0px;
    }
    .recentpanel .tabs .tab{
        min-width: 100px;
        padding: 5px;
    }
    .col-lg-7.recentpanel{
        border-left: none;
    }
    .activitylogtable > .col-sm-12 + .col-sm-12{
        border-left: none;
    }

    footer{
        display: block;
        position: fixed;
        bottom: 0px;
        background-color: #ffffff;
        border-top: 1px solid #c9d0e1;
        width: 100%;
        z-index: 81;
    }
    #header .centermenu{
        display: none;
    }

    footer [class^="icon-"] {
        margin-right: 0px;
    }

    /*.editorPostFeedLinkList{ width: 80vw;}
    .editorPostFeedParamList{ width: 70vw;}*/
    .popdownholder .popdown.editorPostFeedLinkList small,
    .popdownholder .popdown.editorPostFeedParamList small {
        white-space: pre-wrap;
    }
    .popdownholder .popdown.editorPostFeedLinkList li,
    .popdownholder .popdown.editorPostFeedParamList li{
        overflow: hidden;
    }

    #calendarPostPopup{
        top: 119px !important;
        left: 0px !important;
        position: fixed;
        width: 100%;
        transform: none;
        border-radius: 0 0 8px 8px;
    }
    #calendarPostPopup:after, #calendarPostPopup:before{
        display: none;
    }

    .columnflex {
        flex-direction: row;
        height: auto;
    }
    .section .contents.contents-split{
        width: 100% !important;
        border-bottom: 1px solid #C9D0E1;
        border-right: none;
    }
    .section .contents.contents-split:last-child{
        border-bottom: none;
    }
    [class^="icon-"].nopaddingmobile, [class*=" icon-"].nopaddingmobile {
        margin-right: 0px;
    }

    div[class*="col-"] .section.extrapadding .contents {
        padding: 15px;
    }

    .editorPostHashtagList div{
        width: 50%;
    }
    .editorPostHashtagList ul.basicList {
        max-height: initial;
    }
    #socialContentHolder hr.extended{
        margin-left: -15px;
        margin-right: -15px;
    }
    br.hidden-sm{
        display: none;
    }
    #matchevents.section, .section[data-panel], .livefeed.section {
        width: 100%;
        margin-top: 10px;
    }
    .pull-left-mobile,
    .pull-right.pull-left-mobile {
        float: left !important;
    }
    .primaryButton + .primaryButton.pull-left-mobile {
        margin-left: 0px;
    }
    #undopip > button {
        border-left: 0px;
        border-top: 1px solid #ffffff;
        height: 40px;
    }

    #createNewTemplateList .panel {
        flex: 1 0 150px;
    }
    .panel.folder_panel_wide .panel-body h2{
        font-size: 16px;
    }
    .panel.folder_panel .button[data-loadfolder] {
        padding: 5px 8px;
    }
}

/* EXTRA Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* SUPER SMALL Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { }