@charset "utf-8";

/*  --------------------------------------------------------------------------------------------------
                                                                                            1920px >= x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (min-width:1920px) {}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1919px < x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:119.938em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1680px < x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:105em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1440px >= x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:90em) {
    .container {
        max-width: none;
        padding-right: 84px;
        padding-left: 84px;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1280px > x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:80em) {
    .container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1170px > x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:73.125em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1024px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:64em) {
    body { font-size: 0.938em; }

    #intro_row .new_request {
        width: 268px; 
    }

    #intro_row .new_message {
        width: 212px
    }

    .defaultForm .bottom_row .col.attach_file
    {
        width: 198px;
    }

    .defaultForm .bottom_row .col.submit
    {
        width: 202px;
    }

    .system_item .date,
    .system_item .status {
        width: 192px;
    }

    #intro_row button.defaultBtn.close-ticket,
    #intro_row button.defaultBtn.open-ticket {
        padding: 12px;
    }

    #ticket_page #intro_row .date:before,
    #ticket_page #intro_row .status:before,
    #ticket_page #intro_row .logged_time:before {
        height: 44px;
    }

    #ticket_page #intro_row .col {
        padding-right: 12px;
    }

    #ticket_page #intro_row .requester {
        width: 180px;
    }

    #ticket_page #intro_row .date {
        width: 189px;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #ticket_page #intro_row .col.status1 {
        margin-top: 16px;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            1023px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:63.938em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            980px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:61.25em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                             800px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:50em) {
    body { font-size: 0.875em; }

    #h_user {
        padding-right: 12px;
        padding-left: 12px;
    }

    #h_user img {
        width: 72px;
        margin-right: 6px;
    }

    .defaultForm .bottom_row,
    #intro_row
    {
        display: block;
    }

    .defaultForm .bottom_row .col,
    #intro_row .col
    {
        display: inline-block;
    }

    .defaultForm .bottom_row .col:first-of-type,
    #intro_row .col:first-of-type
    {
        width: 100%;
        padding-right: 0;
    }

    .defaultForm .bottom_row .col.submit
    {
        width: 50%;
        min-width: 196px;
    }

    #intro_row h1 {
        padding-bottom: 1.5rem;
    }

    .system_item .col {
        padding: 18px;
    }

    .system_item .messages_num {
        width: 81px;
    }

    .system_item .date,
    .system_item .status {
        width: 140px;
    }

    #ticket_messages a.attachment {
        padding-left: 12px;
        padding-right: 66px;
    }

    #ticket_messages .title h2 {
        padding-left: 24px;
    }

    #ticket_messages .title .btn {
        padding-right: 24px;
    }

    #ticket_messages .wrapper {
        padding: 36px 24px;
    }

    #ticket_messages .bottom_row .col.attach_file,
    #ticket_messages .bottom_row .col.submit
    {
        min-width: inherit
    }

    #ticket_messages a.attachment .btn {
        right: 12px;
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
}

/*  ------------------------------------------------------------------------------------ 800px >=y  */

@media screen and (max-height:50em),
and (max-device-height: 50em) {}

/*  --------------------------------------------------------------------------------------------------
                                                                                             767px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:48em) {
}

/*  --------------------------------------------------------------------------------------------------
                                                                                            600px >=y
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-height:37.5em),
and (max-device-height: 37.5em) {}

/*  --------------------------------------------------------------------------------------------------
                                                                                             640px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:40em) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .shrink #header #h_user {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    #intro_row button {
        margin-bottom: 6px;
    }
    
    #h_user .name {
        font-size: 13px;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                             639px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:39.938em) {
    #h_user img {
        width: 48px !important;
    }
    
    #h_user .text p {
        display: none;
    }
    
    .defaultForm textarea,
    .defaultForm input#subject {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 48px;
    }
    
    .defaultForm .counter {
        right: 12px;
    }

    .system_item .col {
        padding: 18px 9px;

    }

    .system_item .messages_num {
        width: 62px;

    }

    .system_item .date,
    .system_item .status {
        width: 102px;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                             480px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:30em) {
    #header .logo {
        width: 160px;
    }
    
    #header .logo img {
        width: 148px;
    }

    #h_user .name {
        display: none
    }
    
    .defaultForm .bottom_row .col.submit
    {
        width: 100%;
    }

    .system_item a {
        position: relative;
        display: block;
        padding: 18px;

    }

    .system_item .col {
        display: block;
        padding: 0;

    }

    .system_item .messages_num {
        position: absolute;
        top: 12px;
        left: 12px;
        border-right: none;
    }

    .system_item .messages_num .bubble {
        margin-top: 3px;
    }

    .system_item .date:before,
    .system_item .status:before {
        display: none;
    }

    .system_item .date,
    .system_item .status {
        width: 100%;
        padding-top: 12px;
    }

    .system_item .date *,
    .system_item .status * {
        display: inline-block
    }

    .system_item .col .label {
        margin-right: 3px;
    }

    #ticket_messages .title h2 {
        padding-left: 12px;
    }

    #ticket_messages .title .btn {
        padding-right: 12px;
    }

    #ticket_messages .wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    #ticket_messages .bottom_row .col.attach_file,
    #ticket_messages .bottom_row .col.submit
    {
        width: 100%;
        padding-left: 0;
    }

    #ticket_messages .defaultForm button {
        margin-bottom: 12px;
    }
    
    #ticket_messages .item {
        padding-left: 42px;
    }
    
    #ticket_messages .avatar img {
        width: 36px;
    }

    #ticket_messages .user {
        padding-top: 5px;
    }

    #ticket_messages form {
        padding-left: 42px;
    }

    .defaultForm .bottom_row .col .sub_col {
        display: block;
    }

    #due_date i {
        left: 28px;
    }

    #intro_row h1 .col-left,
    #intro_row h1 .col-right {
        float: none;
    }

    #main_intro_row h1 .col-left,
    #main_intro_row h1 .col-right {
        float: none;
    }
}

/*  --------------------------------------------------------------------------------------------------
                                                                                             360px >=x
    --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:22.5em) {
}