.content-wrapper { display: flex; flex-direction: column; }
.customer-tickets {flex: 1; display: flex; flex-direction: column; text-align:right;margin:60px 20px 0 20px;}
.tickets { font-size: 1rem; background-color: var(--color-bg-container); border:1px solid var(--color-border-main); border-radius:var(--border-radius-10);overflow:hidden;}
.tickets > :first-child { margin-top: auto !important;}
.tickets .no-ticket { text-align: center; direction: rtl; padding: 50px; font-size: 17px; color: var(--color-text-light);height:100%;}

.ticket-forms{padding:20px 20px}
@media (min-width:800px) {
    .customer-tickets { width: 800px; margin: 60px auto 0px auto;1border-radius:var(--border-radius-18);1border:1px solid var(--color-border-input);}
    .tickets { 1border:1px solid var(--color-border-main); }
    .ticket-forms{padding:0}
}

.input-container { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; border:2px solid var(--color-main-ketabrah);border-radius:var(--border-radius-10);}
.input-container * { outline-color: rgba(0,0,0,0.1);-webkit-appearance:none;}
.input-message {flex-grow:1;font-size:0;}
.input-message textarea {width:100%;border:0;border-radius:0;resize: none;padding:10px 20px;font-size:1rem;background-color:var(--color-bg-input);}
.input-message textarea:disabled { opacity: 0.5; cursor: not-allowed;}

.input-options { display: flex; justify-content: space-between;align-items:center; padding: 10px 20px; background-color: var(--color-bg-container);border-top:1px solid var(--color-border-main) }
.input-options input[type=button] { border: 0; border-radius: 10px; font-size: 14px; margin: 0 3px; padding: 10px 30px 10px 10px;min-width: 110px; -webkit-appearance: none;}
.btn-customer-ticket-send { background: #5e942b url(/images/customer-ticket-send.png) no-repeat right 10px center; background-size: 20px; color: #fff; transition: background 0.3s }
.btn-customer-ticket-send:disabled {opacity:0.4;cursor:not-allowed;}

.btn-customer-ticket-attachment { background: url(/images/customer-ticket-attachment.png) no-repeat right center;  background-size: 24px; color: var(--color-text-light);}
.btn-customer-ticket-attachment.green {color: #5e942b }
.btn-customer-ticket-attachment-clear {background-size: 20px; color: #D50000; padding-right: 5px !important;background:none;display:none; }

.ticket-item { display: flex; flex-direction: row-reverse; flex-shrink: 0; align-items: start; padding: 20px;border-bottom: 1px solid var(--color-bg-top-layer)}
.ticket-item.ketabrah-answer{background-color:var(--color-bg-container-green-light)}
.ticket-item .profile-picture { flex-shrink: 0; width: 30px;height:30px; border-radius: 50%; overflow: hidden; position: relative; font-size: 0;}
.ticket-item .profile-picture img { max-width: 100%;}
.ticket-item .profile-picture:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); border-radius: 50%; }

.details { text-align: right; padding-right: 10px; }
.details .description { direction: rtl; 1color: #212121; font-size: 16px ;line-height:220%}
.details .description p {margin: 1.2em 0;word-break: break-word}
.details .attachment { background: url(/images/customer-ticket-attachment.png) no-repeat right center; background-size: 20px; color: var(--color-text-light); padding: 5px 25px 5px 5px; display: inline-block; margin-top: 5px; direction: rtl; }
.details .name-date { direction: rtl; margin-bottom: 7px; }
.details .name-date .name { font-size: 16px;font-weight: bold; }
.details .name-date .date {font-size: 13px; margin-right: 10px;}

.select-title {margin:20px 0 5px 0; }
#ddlTicketCategories, #ddlTicketSubCategories {font-weight: bold; font-size:1rem; width: 100%;box-sizing: border-box;background-color:var(--color-bg-container); outline:0;border-radius:var(--border-radius-10);direction:rtl;text-align:right;padding:10px;border:1px solid var(--color-border-input)}
#ddlTicketCategories:hover, #ddlTicketSubCategories:hover { border: 1px solid var(--color-border-input-hover); }

#divDisplaySubmitTicketForms {margin-top: 50px; display: none;}
#divMessage {margin-top: 0;}

.spinner { height: 18px; width: 18px; position: relative; -webkit-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 3px solid #fff; border-top: 3px solid rgba(112, 148, 78,0.8); border-radius: 100%; display: inline-block; }
@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg)}
    to { -webkit-transform: rotate(359deg)}
}

@keyframes rotation {
    from { transform: rotate(0deg);}
    to { transform: rotate(359deg);}
}

/* Feedback form */
.feedback { overflow: hidden; display: inline-block; padding: 0 10px 10px 10px; margin-top: 10px; border-radius: 10px; background: var(--color-bg-container); direction: rtl; color: var(--color-text-light); }
.feedback .positive, .feedback .neutral, .feedback .negative { width: 32px; height: 32px; background-size: 32px; background-repeat: no-repeat; margin: 10px; float: right; border: 0; outline: 0; background-color: transparent; cursor: pointer;-webkit-tap-highlight-color:transparent; }
.feedback .positive { background-image: url(/images/feedback-positive.png)}
.feedback .neutral { background-image: url(/images/feedback-neutral.png)}
.feedback .negative { background-image: url(/images/feedback-negetive.png)}
.feedback .positive.gray1 { background-image: url(/images/feedback-positive-gray.png) !important}
.feedback .neutral.gray1 { background-image: url(/images/feedback-neutral-gray.png) !important}
.feedback .negative.gray1 { background-image: url(/images/feedback-negetive-gray.png) !important}
.feedback #RatingMessage { text-align: center; clear: both; transition: color 0.2s}
body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(/images/feedback-positive-gray.png) url(/images/feedback-neutral-gray.png) url(/images/feedback-negetive-gray.png)}