/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/
.ltr {
    direction: ltr !important;
}
.reply_datetime,
.reply_time_calc,
#bina_ticketing_attachment_table span {
    font-size: 12px;
    font-weight: 400;
    color: #777;
    line-height: 2;
}

.bina-ticketing-clear {
    display: block;
    clear: both;
    width: 100%;
    padding: 10px;
}
#bina_ticketing_reply_table .clear {
    margin: 15px 0px;
}

.reply_ajax_wating,
.ticket_ajax_wating {
    width: 40px !important;
    display: table;
    height: 40px !important;
}
.buttonBox_reply,
.textarea_reply {
    margin: 10px 0 5px 0;
}
.header_box {
    display: flow-root;
}
#ticket_title {
    font-size: 1.1em;
}
#bina_ticketing_reply_table {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}
#send_reply {
    background-color: #d9edf7;
    width: 100%;
    text-align: right;
    color: #4c606a;
    font-size: 0.9em;
    box-sizing: border-box;
    border-color: #bce8f1;
    border-radius: 4px;
}
#send_reply svg {
    width: 20px;
    vertical-align: text-bottom;
}
#send_reply:hover {
    background: #c9dde7 !important;
    box-shadow: unset !important;
}
#send_reply .dashicons.dashicons-plus {
    line-height: 2;
    float: left;
}
#send_reply_form {
    border: 1px solid #bce8f1;
    margin: -15px 0px 20px 0;
    padding: 10px;
}
#send_reply_form #reply {
    height: 250px;
}
#attachment_box input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-size: 14px;
}
#add_attachment_file {
    background: transparent;
    color: #595959;
    border: 1px solid #595959;
    border-radius: 4px;
    margin: 0 auto;
    width: 100%;
    font-size: 13px;
}
#attachment_help {
    font-weight: 300;
    font-size: 14px;
}
#message {
    height: 250px;
}
#recordingsList li {
    background-color: whitesmoke;
    padding: 15px;
    border-radius: 10px;
}
#recordingsList li audio {
    padding: 0px 15px;
    float: right;
}
#recordingsList li .button {
    margin: 0px 4px;
}
.bina-ticketing-buttons-row {
    text-align: center;
}
.bina-ticketing-buttons-row a {
    margin: unset !important;
}
.bina-ticketing-buttons-row .button {
    border-radius: 4px;
}
.bina-ticketing-buttons-row .success {
    background: #769756 !important;
}
.bina-ticketing-buttons-row #submit {
    margin: unset;
    background: #27ae60 !important;
}
#bina-ticketing-privacy-policy {
    background: #fbfcfc;
    padding: 10px;
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.bina-tickting-choose-departments .col-inner {
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #f2f3f5;
    padding: 5px;
    transition: all 0.4s ease;
}
.bina-tickting-choose-departments .col-inner:hover {
    background: #e3e3e3;
}
.bina-tickting-choose-departments .col-inner p {
    margin: unset;
    font-size: 14px;
    font-weight: normal;
}
.bina-ticketing-select-department {
    width: 100%;
    text-align: inherit;
}
.bina-ticketing-select-department h4 {
    margin: unset;
}
.bina-ticketing-select-department svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-choose-department-title {
    font-size: 24px;
    margin-bottom: 25px;
    font-size: 15px;
}
.bina-ticketing-new-ticket-title {
    font-size: 24px;
    margin-bottom: 25px;
}
.bina_ticketing-success-created-ticket {
    text-align: center;
}
.bina_ticketing-success-ticket-number {
    background: #def0d7;
    padding: 10px 0;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}
.bina_ticketing-success-created-ticket p {
    font-size: 15px;
}
.bina_ticketing-success-created-ticket .button {
    background: transparent;
    color: #333;
}
.bina_ticketing-success-created-ticket .button svg {
    width: 20px;
    vertical-align: text-bottom;
}
.bina-ticketing-filter-status {
    border: 2px solid #f5f5f5;
    border-radius: 5px;
}
.bina-ticketing-filter-status-title {
    background: #f5f5f5;
    padding: 5px;
    font-size: 0.9em;
}
.bina-ticketing-filter-status-title svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-status-item {
    display: flex;
    padding: 8px 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease-out;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.bina-ticketing-status-item:hover {
    background: #f5f5f5;
}
.bina-ticketing-status-item.selected {
    background: antiquewhite;
}
.bina-ticketing-create-ticket-button {
    width: 100%;
    border-radius: 5px !important;
    font-size: 13px !important;
    margin: 0 0 10px 0 !important;
}
.bina-ticketing-recent-tickets {
    border: 2px solid #f5f5f5;
    margin-top: 10px;
    border-radius: 5px;
}
.bina-ticketing-recent-tickets-title {
    background: #f5f5f5;
    padding: 5px;
    font-size: 0.9em;
}
.bina-ticketing-recent-tickets-title svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-recent-item {
    display: table;
    width: 100%;
    padding: 5px 15px;
    border-bottom: 1px solid #f5f5f5;
    min-height: 65px;
    transition: all 0.3s ease-out;
}
.bina-ticketing-recent-item:hover {
    background: #f5f5f5;
}
.bina-ticketing-recent-item p {
    font-size: 0.7em;
    margin-bottom: 5px;
    font-weight: 400;
}
.bina-ticketing-recent-item .status {
    font-size: 12px;
    float: right;
}
.bina-ticketing-recent-item .time {
    font-size: 10px;
    float: left;
}
.bina-ticketing-table thead tr th {
    border-bottom: 2px solid #a2d27a;
}
.bina-ticketing-table tbody tr.even {
    background: #f9fafc;
}
.bina-ticketing-table tbody tr td.title {
    padding-right: 5px;
}
.bina-ticketing-user-details {
    border: 2px solid #f5f5f5;
    border-radius: 5px;
}
.bina-ticketing-user-details-title {
    padding: 5px;
    background: #f5f5f5;
    font-size: 0.9em;
}
.bina-ticketing-user-details-title svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-user-details-item {
    padding: 8px 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9em;
    transition: all 0.3s ease-out;
    overflow: hidden;
}
.bina-ticketing-user-details-item:hover {
    background: #f2f3f5;
}
.bina-ticketing-ticket-detail {
    border: 2px solid #f5f5f5;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 0.9em;
    overflow: hidden;
}
.bina-ticketing-ticket-detail-title {
    padding: 5px;
    background: #f5f5f5;
    font-size: 0.9em;
}
.bina-ticketing-ticket-detail-title svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-ticket-detail-item {
    padding: 8px 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9em;
    transition: all 0.3s ease-out;
}
.bina-ticketing-ticket-detail-item:hover {
    background: #f2f3f5;
}
.bina-ticketing-ticket-detail-buttons {
    background: #f5f5f5;
    padding: 5px;
}
.bina-ticketing-create-ticket-button svg {
    width: 17px;
    vertical-align: text-bottom;
}
.attachment-controllers {
    display: flex;
}
.attachment-controllers #audio-attachment-help {
    width: 50%;
    font-size: 14px;
    font-weight: 300;
}
.attachment-controllers #controls {
    width: 50%;
    text-align: center;
    padding: 5px;
}
.attachment-controllers #controls button {
    margin: unset;
    border-radius: 4px;
}
.attachment-controllers #controls button svg {
    width: 20px;
    vertical-align: text-bottom;
}
#add_attachment_file svg {
    width: 20px;
    vertical-align: text-bottom;
}
.user_reply {
    min-width: 50%;
    max-width: 90%;
    background: #f2f3f5;
    padding: 15px;
    border-radius: 5px;
    min-height: 65px;
    display: table;
}
.user_reply .reply_datetime {
    float: left;
    direction: ltr;
}
.admin_reply {
    display: table;
    min-width: 50%;
    max-width: 90%;
    float: left;
    background: #248fde;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
}
.reply_message {
    font-size: 0.9em;
    line-height: 2;
    text-align: justify;
}
.admin_reply .user_info {
    font-size: 12px;
}
.admin_reply .reply_datetime {
    color: #fff;
    font-size: 11px;
    direction: ltr;
}
.bina_reply_attachment_table {
    display: table;
    width: 100%;
    margin-top: 15px;
}
.bina_reply_attachment_div {
    padding: 5px;
}
.bina_reply_attachment_div .reply_attachment_img {
    width: 45px;
    float: right;
}
.bina_reply_attachment_div span {
    display: block;
    font-size: 14px;
    overflow: hidden;
}
.admin_reply .bina_reply_attachment_div span {
    color: #fff;
}
.bina-ticketing-ticket-attachments {
    border: 2px solid #f5f5f5;
    border-radius: 5px;
    margin-bottom: 10px;
}
.bina-ticketing-ticket-attachments-title {
    background: #f5f5f5;
    padding: 5px;
    font-size: 15px;
}
.bina-ticketing-ticket-attachments-title svg {
    width: 25px;
    vertical-align: text-bottom;
}
.bina-ticketing-ticket-attachments-item {
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.3s ease-out;
    padding: 8px 15px;
    font-size: 14px;
    display: block;
}
.bina-ticketing-ticket-attachments-item:hover {
    background: #f2f3f5;
}
.bina-ticketing-ticket-attachments-item img {
    width: 30px;
}
.bina-ticketing-ticket-attachments-item span.filename {
    direction: ltr;
    float: left;
}
.attachment-controllers .record {
    background: #ff4d4d;
}
.attachment-controllers .pause {
    background: #9736c6;
}
.attachment-controllers .stop {
    background: #3d3d3d;
}
.bina-ticketing-status-item.selected .cancel svg {
    width: 15px;
    float: left;
}
.bina-ticketing-full-container form select {
    box-shadow: unset;
    border-radius: 4px;
    font-size: 14px;
}
.bina-ticketing-full-container form input[type="text"] {
    box-shadow: unset;
    font-size: 14px;
    border-radius: 4px;
}
.bina-ticketing-full-container form textarea {
    font-size: 14px;
    box-shadow: unset;
    border-radius: 4px;
}
.bina-ticketing-reply-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.bina-ticketing-rating {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bina-ticketing-rating svg {
    width: 20px;
    vertical-align: bottom;
}
.rate {
    cursor: pointer;
}
.fill-rate svg {
    fill: #fff200;
}
/* tablet and above */
@media screen and (min-width: 768px) {
    .bina-ticketing-buttons-row {
        margin-top: 20px;
    }
    #bina-ticketing-privacy-policy ol li,
    #bina-ticketing-privacy-policy ul li {
        margin-right: 15px;
    }
    .bina-ticketing-sidebar {
        border-left: 1px solid #dddee0;
    }
}
/* mobile devices */
@media screen and (max-width: 870px) {
    .bina-ticketing-table .urgency {
        display: none;
    }
    .bina-ticketing-table .last_reply {
        display: none;
    }
    .bina-ticketing-table tbody td.title,
    .bina-ticketing-table tbody td.department,
    .bina-ticketing-table tbody td.status a {
        font-size: 13px;
    }
    .bina-ticketing-new-ticket-title {
        font-size: 18px;
        text-align: center;
    }
    .attachment-controllers {
        display: block;
    }
    .attachment-controllers #controls {
        width: 100%;
        text-align: center;
    }
    .attachment-controllers #audio-attachment-help {
        width: 100%;
    }
    .admin_reply {
        min-width: 90%;
    }
    .user_reply {
        min-width: 90%;
    }
}
@media only screen and (max-width: 48em) {
    #recordingsList li audio {
        padding: 0;
        float: unset;
        width: 100%;
    }
    .bina-ticketing-table .urgency span {
        width: auto !important;
        min-width: auto !important;
    }
    .bina-ticketing-table .status span {
        width: auto !important;
        min-width: auto !important;
    }
    #ticket_title {
        width: 100%;
        display: table;
    }
    #back_to_ticket_list {
        display: table;
        width: 100%;
    }
    #recording_button_box button {
        margin: 0;
    }
}
.bina-ticketing-progress-step-container {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: #f2f3f5;
    padding: 10px;
    border-radius: 4px;
}
.bina-ticketing-progress-step-container .stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}
.bina-ticketing-progress-step-container .stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    right: -50%;
    z-index: 2;
}
.bina-ticketing-progress-step-container .stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    right: 50%;
    z-index: 2;
}
.bina-ticketing-progress-step-container .stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
}
.bina-ticketing-progress-step-container .stepper-item.completed .step-counter {
    background-color: #4bb543;
    color: #fff;
}
.bina-ticketing-progress-step-container .stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 20px;
    right: 50%;
    z-index: 3;
}
.bina-ticketing-progress-step-container .stepper-item:first-child::before {
    content: none;
}
.bina-ticketing-progress-step-container .stepper-item:last-child::after {
    content: none;
}
.bina-ticketing-progress-step-container .stepper-item .step-name {
    font-size: 12px;
}