/*
* ----------
    TICKETS GRID
* ----------
*/
:root {
    /* COLORS */
    --color-new: #FFE300;
    /* value 1 New*/
    --color-canceled: #773603;
    /* value 2 Canceled*/
    --color-closed: #B25912;
    /* value 3 Closed*/
    --color-open: #00A0D6;
    /* value 4 Open*/
    --color-pending-clarification: #EA2419;
    /* value 5 Clarification*/
    --color-pending-approval: #E8266B;
    /* value 6 Approval*/
    --color-pending-test: #D676C0;
    /* value 7 Test*/
    --color-pending-third: #F36B00;
    /* value 8 Third*/
    --color-pending-release: #730058;
    /* value 9 Release*/
    --color-onhold: #497000;
    /* value 10 On-Hold*/
    --color-resolved: #7BBB00;
    /* value 11 Resolved*/
}
.sort-asc {
    margin-top: 4px;
    float: right;
    font-size: 10px;
}
.section .view-grid .sort-asc {
    float: none;
}
.fa-sort-up:before,.fa-sort-asc:before {
    font-size: 11px;
}
.sort-desc {
    margin-top: 4px;
    float: right;
    font-size: 8px
}
.section .view-grid .sort-desc {
    float: none;
}

.tags-search {
    float: left;
    padding-top: 20px;
    padding-bottom: 30px;
}

.tags-search .input-group {
    border: 1px solid #ddd;
}

.tags-search .input-text {
    border: none;
}

.tags-search .btn-default {
    border: none;
}

.ticket-list .entitylist-filter {
    display: none;
}

.head {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

.head a:hover, a:focus {
    color: var(--color-primary);
    text-decoration: none;
}

.view-grid .details-link {
    color: var(--color-link) !important;
    white-space: inherit;
    text-decoration: underline;
}

.view-grid .details-link ea:hover, a:focus {
    color: var(--color-link);
    text-decoration: none;
}

#container-list-tickets .view-grid>table {
    background-color: white;
}

.table .fa-arrow-up {
    font-size: 11px;
    float: right;
}

.table .fa-arrow-down {
    font-size: 11px;
    float: right;
}

.table>thead>tr>th[aria-label*="Remaining"] {
    border: none;
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table>thead>tr>th {
    border: none;
    max-width: 21ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
    border: 0.5px solid #4444441A;
    font-size: 13px;
}

.ticket-list th {
    width: auto !important;
}

/*
* ----------
    COLUMN - ACTIONS INFO
* ----------
*/
.ticket-list .view-grid > table > tbody > tr > td[aria-label="action menu"] .fa-chevron-circle-down {
    display: none;
}

.ticket-list .view-grid .sort-disabled[aria-label="Actions"] {
    display: none !important;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label="action menu"] {
    display: none;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label="Aktionsmenü"] {
    display: none;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label*="acciones"] {
    display: none;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label*="ação"] {
    display: none;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label="action menu"] .btn:before {
    content: "";
    position: relative;
    top: 1px;
    display: inline;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ticket-list .view-grid > table > tbody > tr > td[aria-label="action menu"] .btn-default {
    border: none;
    background: transparent;
}

/*
* ----------
    STATUS - TICKETS
* ----------
*/
/* nowrap 1 grid*/
.view-grid > table > tbody > tr > td[data-attribute="ap_type"] {
    word-break: initial;
}

.view-grid > table > tbody > tr > td[data-attribute="ap_id"] {
    white-space: nowrap;
}

.view-grid > table > tbody > tr > td[data-attribute="statuscode"] {
    word-break: initial;
}

.view-grid > table > tbody > tr > td[data-attribute="ap_priority"] {
    white-space: nowrap;
}

.view-grid > table > tbody > tr > td[data-attribute="ap_id"] {
    white-space: nowrap;
}

.view-grid > table > tbody > tr > td[data-attribute="ap_service_level_agreementid"] {
    white-space: nowrap;
}

/* value 1 New*/
.view-grid [data-attribute="statuscode"][data-value*='1']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-new);
}

/* value 2 Canceled*/
.view-grid [data-attribute="statuscode"][data-value*="2"]:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-canceled);
}

/* value 3 Closed*/
.view-grid [data-attribute="statuscode"][data-value*="3"]:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-closed);
}

/* value 4 Open*/
.view-grid [data-attribute="statuscode"][data-value*='4']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-open);
}

/* value 5 Pending Clarification*/
.view-grid [data-attribute="statuscode"][data-value*='5']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-pending-clarification);
}

/* value 6 Pending Approval*/
.view-grid [data-attribute="statuscode"][data-value*='6']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-pending-approval);
}

/* value 7 Pending Test*/
.view-grid [data-attribute="statuscode"][data-value*='7']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-pending-test);
}

/* value 8 Pending Third-party*/
.view-grid [data-attribute="statuscode"][data-value*='8']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-pending-third);
}

/* value 9 Pending Release*/
.view-grid [data-attribute="statuscode"][data-value*='9']:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    float: left;
    color: var(--color-pending-release);
}

/* value 10 Resolved*/
.view-grid [data-attribute="statuscode"][data-value*="10"]:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-onhold);
}

/* value 11 Resolved*/
.view-grid [data-attribute="statuscode"][data-value*="11"]:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    float: left;
    color: var(--color-resolved);
}

/* value 12 Canceled*/
.view-grid [data-attribute="statuscode"][data-value*="12"]:before {
    position: relative;
    top: -1px;
    content: ' \25CF';
    padding-right: 2px;
    display: inline-block;
    font-family: FabricMDL2Icons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    font-size: 13px;
    /* float: left; */
    color: var(--color-canceled);
}

.border-left-tickets {
    border-right: 1px solid #cdcdcd;
}

.border-bottom-tickets {
    border-bottom: 1px solid #cdcdcd;
}

.crmEntityFormView .cell {
    padding: 0 5px 5px;
}

#files-tickets .actions {
    float: right;
    border: none;
    display: none;
}

#files-tickets .section-title {
    display: none;
}

.title-chat {
    padding-bottom: 10px;
}

.crmEntityFormView .tab-title {
    border: none;
    padding-bottom: 10px;
}

.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    border-color: rgba(68, 68, 68, 0.2);
    height: 30px;
    padding: 4px 12px;
}

#ticket-info .input-group .form-control {
    background-color: var(--color-white);
}

.sharepoint-custom-icon {
    display: block;
    white-space: initial;
    font-size: 11px;
}

.timeago {
    font-size: 10px;
}

#ticket-info .tab-title {
    display: none;
}

.crmEntityFormView .tab-column textarea#ap_description {
    height: 60px;
    margin-bottom: 10px;
}

#EntityFormControl_0ecb73590da6ed11aad1000d3abb9531 .crmEntityFormView .tab-column textarea#ap_description {
    height: 190px;
    margin-bottom: 10px;
}

#files-info .tab-title {
    display: none;
}

.crmEntityFormView table.table td:first-child {
    padding: 8px;
    vertical-align: middle;
}

#approvals-page-ticket .notify-title {
    text-align: left;
    margin-left: -15px;
}

[aria-label="Followers"] legend {
    display: none;
}

.section-title h3 {
    font-size: 13px;
    color: #666;
    font-weight: normal;
}

.tab-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
}

.tab-sub {
    font-size: 15px;
}

.crmEntityFormView .state, .crmEntityFormView .status {
    padding: 6px 3px;
}

#list-pages {
    background-color: white;
    cursor: pointer;
    height: 32px;
}

table[data-name="tags-form"] {
    height: 100px;
}

table[data-name="followers-form"] {
    height: 80px;
}

#s2id_selectfollowers ul {
    display: block;
    max-height: 62px !important;
    overflow-y: auto;
}

#s2id_select_ap_tags ul {
    display: block;
    max-height: 62px !important;
    overflow-y: auto;
}

#s2id_select_ap_type ul {
    display: block;
    max-height: 62px !important;
    overflow-y: auto;
}

#s2id_select_ap_priority ul {
    display: block;
    max-height: 62px !important;
    overflow-y: auto;
}

#s2id_select_statuscode ul {
    display: block;
    max-height: 62px !important;
    overflow-y: auto;
}

.height_slectpage {
    height: 95px;
}

button.form-close span {
    font-size: 20px;
}

.add-folder {
    display: none;
    visibility: hidden;
}

#EntityFormPanel .tab-column label {
    font-size: 13px;
    color: #444444;
    opacity: 0.5;
    font-weight: 400;
}

#EntityFormPanel.crmEntityFormView td.cell {
    color: #444444;
}

#EntityFormPanel.crmEntityFormView .section-title {
    color: #444444;
    opacity: 0.5;
}

.form-control {
    color: #525252;
    ; }

[data-name="new_edit_1"] #ap_id {
    color: whitesmoke;
}

[data-name="new_edit_1"] #ap_headline {
    font-weight: bold;
}

#EntityFormPanel .view-grid > table > tbody > tr > td[data-attribute="ap_headline"] {
    white-space: nowrap;
}

.titlecustom {
    font-size: 13px;
    font-weight: 400;
    padding-left: 5px;
    padding-bottom: 25px;
}

.titlecustomspan {
    color: #444444;
    opacity: 0.5;
}

.titlecustombold {
    color: #525252;
    opacity: 1;
}

.textareatitle {
    font-size: 26px !important;
    word-break: break-word;
    max-width: 100%;
    height: auto !important;
    display: block;
    margin-bottom: 10px;
}

.richtext {
    overflow: auto;
    display: block;
}

/*
* ----------
    MEDIA
* ----------
*/
@media (max-width: 766px) {
    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='1']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*="2"]:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: v#666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*="3"]:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='4']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='5']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='6']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='7']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='8']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*='9']:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*="10"]:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*="11"]:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }

    .view-grid > table > tbody > tr > td[data-attribute="statuscode"][data-value*="12"]:before {
        font-family: var(--font-family-normal),"Segoe UI Light","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-style: normal;
        text-align: left;
        overflow-x: hidden;
        content: attr(data-th);
        font-weight: 700;
        display: inline-block;
        width: 15rem;
        margin-left: 0rem;
        float: left;
        padding-right: 1rem;
        word-break: break-all;
        padding-left: 1rem !important;
        color: #666;
    }
}