/*-----------------------------------------------------------------------------*/
/* -> Grid Controle <- */
/*-----------------------------------------------------------------------------*/
.content-grid-preview-width, .content-grid-width {
    min-width: 1120px !important;
}

/*-----------------------------------------------------------------------------*/
/* -> 1680 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1680px) {
    .ui-tabs-vertical .ui-tabs-nav {
        float: none;
        width: 100% !important;
    }

    .ui-tabs-vertical .ui-tabs-nav li {
        background-color: #ffffff !important;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .ui-tabs-vertical .ui-tabs-nav li a {
        display: block;
        width: 100%;
    }

    .ui-tabs-vertical .ui-tabs-panel {
        width: 100% !important;
    }

    .ct-sidebar-wrapper {
        width: 238px;
    }

    .logo {
        width: 239px;
    }
}

/*-----------------------------------------------------------------------------*/
/* -> 1540 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1540px) {

    /* --> page container <-- */
    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .ct-page-container-wrapper {
        padding-left: 75px;
    }

    /* --> sidebar <-- */
    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .ct-sidebar-wrapper {
        width: 75px;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sidebar .menu {
        margin-top: 50px !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sidebar-profile {
        display: none !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .menu-text {
        width: 0px !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sidebar .menu li .notification {
        position: absolute;
        right: 12px;
        top: -12px;
        border-radius:50px;
        min-width: 14px !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sym-navbar-logo {
        display: none;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .collapsed-logo {
        display: block;
        width: 74px;
        padding: 3px;
    }

    /* --> footer <-- */
    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .ct-page-footer {
        left:80px;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sidebar-menu {
        margin-top: 68px !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sym-menu-item-text {
        display: none;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sym-menu-item-link {
        padding: 10px 20px !important;
    }

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"] .sym-menu-item-icon {
        font-size: 2.25rem;
    }

}


/*-----------------------------------------------------------------------------*/
/* -> 1400 <- */
/*-----------------------------------------------------------------------------*/
@media(max-width:1400px) {

    /* --> page container <-- */
    .ct-page-container-wrapper {
        padding-left: 75px;
    }

    /* --> sidebar <-- */
    .ct-sidebar-wrapper {
        width: 75px;
    }

    .sidebar .sidebar-menu {
        margin-top: 50px !important;
        margin-top: 68px !important; /* sidebar height */
    }

    .sidebar-profile {
        display: none !important;
    }

    .menu-text {
        width: 0px !important;
    }

    .sym-menu-item-text {
        display: none;
    }

    .sym-menu-item-link {
        padding: 1rem 1.5rem !important;
        padding: 10px 20px !important; /* sidebar height */
    }

    .sym-menu-item-icon {
        font-size: 22px;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }

    .sym-navbar-logo {
        display: none;
    }

    .collapsed-logo {
        display: block;
    }

    .sidebar .sidebar-menu li .notification {
        position: absolute;
        right: 12px;
        top: -12px;
        border-radius:50px;
        min-width: 14px !important;
    }

    /* --> footer <-- */
    .ct-page-footer {
        left:80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 1370 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1370px) {

    /* --> treatment on template page <-- */
    .symmetrik-ipad {
        border: 1px solid transparent !important;
        background: none !important;
        width: 1018px !important;
        height: 768px !important;
    }

    .symmetrik-ipad-content {
        /*        width: 1020px !important;
                height: 766px !important;*/
        margin: -45px 0 0 0 !important;
    }

    .symmetrik-grid {
        position: relative !important;
        margin: 90px auto 0 auto !important;
        width: 994px !important;
        height: 664px !important;

    }

    .symmetrik-ipad-header {
        top: 0px !important;
    }

    .add-new-template-wrapper {
        float:left !important;
    }

    .symmetryk-briefcase-background-wrapper {
        width: 1024px !important;
    }

    .limit-bgthumbs {
        max-width: 665px !important;
    }

    .bgthumbs-wrapper{
        max-width: 774px !important;
    }

    .container-tracking {
        padding-left: 240px !important;
    }

    .tracking-global-chart-wrapper {
        padding-right: 225px !important;
    }

    .tracking-column, .sym-fake-left-column {
        max-width: 240px !important;
    }
    .btns-header-tracking-metric div:first-child {
        margin-left: -238px !important;
    }

    .tracking-left-column .input-group, .tracking-right-column .input-group {
        max-width: 185px !important;
    }

    .only-selected-target, .alert-target {
        padding: 4px 3px 0px 0px;
        font-size: 22px;
    }

    .content-briefcase {
        height: 70px !important;
        margin-bottom: 10px;
    }
    .thumb-briefcase {
        width: 65px !important;
        height: 62px !important;
    }

    .info-target {
        width: 156px !important;
        margin: 12px 2px 0px 0px !important;
    }

    .active_element .info-target {
        margin-top: 4px !important;
    }

    .tracking-right-column .info-target {
        margin-top: 10px !important;
    }

    .info-target span {
        padding: 2px 3px 0px 8px !important;
    }

    .avatar-rep {
        margin: 0px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .content-rep .info-target {
        margin: 1px 0px 0px 0px !important;
        width: 185px !important;
    }

    .content-rep.active_element .info-target {
        margin-top: -6px !important;
    }

    .tracking-right-column .content-rep .info-target {
        margin-top: 0px !important;
    }

    .filter-briefcase span, .filter-rep span {
        font-size: 12px !important;
    }

    .info-target span:nth-child(3) {
        font-size: 9px !important;
    }

    .select-option {
        width: 115px !important;
        height: 30px !important;
    }

    .thumb-briefcase img {
        padding: 8% !important;
        border-radius: 11px !important;
    }

    .thumb-briefcase:before {
        border-radius: 5px !important;
        top: -7px !important;
        left: 19px !important;
        width: 33px !important;
        height: 23px !important;
        border: 4px solid #ebeced !important;
    }

    .selected-list {
        right: 220px !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}

/*-----------------------------------------------------------------------------*/
/* -> 970 - 1280 <- */
/*-----------------------------------------------------------------------------*/
@media (min-width: 970px) and (max-width: 1280px) {

    .text-wrapper p {
        font-size: 14px;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 1250 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1250px) {

    ul.left-icons {
        float:right !important;
    }

    ul.right-icons {
        /*width: 100%;
        float: none !important;*/
        text-align: right;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 1120 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1120px) {

    .ct-page-wrapper[data-tab-selected="#briefcase-tile"],
    .ct-page-wrapper[data-tab-selected="#briefcase-tree"]{
        min-width: 1120px;
    }

    .content-grid-width {
        min-width: 1120px;
    }

    .content-grid-width .ct-page-footer {
        min-width: 1060px;
    }

    .symmetrik-actions {
        position: relative !important;
        left: -10px !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 1000 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 1000px) {

    .symmetryk-survey-block-left > .row {
        padding: 10px 10px 0px 10px !important;
    }

    .symmetryk-survey-block-right {
        padding: 0px 15px 0px 0px !important;
    }

    .symmetryk-survey-block-right > .row {
        padding: 10px 10px 0px 15px !important;
    }

    .symmetryk-survey-question {
        margin-bottom: 10px !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}

/*-----------------------------------------------------------------------------*/
/* -> 940 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 940px) {

    .symmetryk-survey-block-right > div > div {
        padding: 5px !important;
    }

    .symmetryk-survey-questions-details > div > div > span {
        font-size:13px !important;
    }

    .symmetryk-survey-questions-details > div > div > div {
        margin-left: 5px !important;
    }

    .symmetryk-survey-questions-details > div > div.symmetryk-survey-reps > div {
        margin-left: 30px !important;
    }

    .symmetryk-survey-date .datetimepicker {
        width: 142px !important;
    }

    .symmetryk-survey-date .datetimepicker input {
        padding: 6px 3px !important;
        width: 105px !important;
        font-size: 13px !important;
    }

    .symmetryk-survey-date .datetimepicker .input-group-addon {
        min-width: 30px !important;
        padding: 6px 6px !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}

/*-----------------------------------------------------------------------------*/
/* -> 800 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 800px) {

    .ct-page-content-survey {
        min-width: 740px;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 767 <- */
/*-----------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

    /* --> grid <-- */
    .symmetrik-grid-details {
        display:none
    }

    .symmetrik-inner {
        max-height: 390px;
    }
    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 450 <- */
/*-----------------------------------------------------------------------------*/
@media(max-width:450px) {

    /* --> navbar <-- */
    .navbar-symmetryk-logo {
        left: 0px;
    }

    .styled-filter-user {
        display: none !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }
}


/*-----------------------------------------------------------------------------*/
/* -> 360 <- */
/*-----------------------------------------------------------------------------*/
@media (max-width: 360px) {

    .right-icons {
        text-align: center !important;
    }

    span.in-progress, span.shipped,
    span.delayed, span.on-hold {
        width: 15px;
        height: 15px;
        padding: 0px;
        border-radius:50% !important;
        font-size: 0px;
        vertical-align: middle;
    }

    .styled-filter-user {
        display: none !important;
    }

    .logo {
        margin: 0;
        padding: 2px 1px;
        width: 80px;
    }

}