.jGrowl {
    z-index:9999;
    color:#fff;
    font-size:12px;

    position:fixed;
}

.jGrowl.top-left {
    left:0;
    top:0;
}

.jGrowl.top-right {
    right:0;
    top:0;
}

.jGrowl.bottom-left {
    left:0;
    bottom:0;
}

.jGrowl.bottom-right {
    right:0;
    bottom:0;
}

.jGrowl.center {
    top:0;
    width:50%;
    left:25%;
}

.jGrowl.center .jGrowl-closer,.jGrowl.center .jGrowl-notification {
    margin-left:auto;
    margin-right:auto;
}

.jGrowl-notification {
    background: linear-gradient(135deg,rgba(20,24,27,.8) 0,rgba(27,32,38,.8) 100%);
    opacity:1;
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
    zoom:1;
    width:400px;
    text-align:left;
    display:none;
    border-radius:5px;
    min-height: 20px;
    margin:10px;
    padding:10px;
}

.jGrowl-notification .jGrowl-header {
    font-weight:700;
    font-size:.85em;
}

.jGrowl-notification .jGrowl-close {
    background-color:transparent;
    color:inherit;
    border:none;
    z-index:99;
    float:right;
    font-weight:700;
    font-size:1em;
    cursor:pointer;
}

.jGrowl-closer {
    background: linear-gradient(135deg,rgba(118,116,111,.25) 0,rgba(208,208,208,.25) 72%,rgba(118,116,111,.25) 100%);
    opacity:.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
    zoom:1;
    width:400px;
    display:none;
    border-radius:5px;
    cursor:pointer;
    font-size: 12px;
    font-weight:700;
    text-align:center;
    margin:10px;
    padding:4px 10px;
}

.jGrowl-notification .ui-state-highlight,.jGrowl-notification .ui-widget-content .ui-state-highlight,.jGrowl-notification .ui-widget-header .ui-state-highlight,.jGrowl-closer .ui-state-highlight,.jGrowl-closer .ui-widget-content .ui-state-highlight,.jGrowl-closer .ui-widget-header .ui-state-highlight {
    border:1px solid #000;
    background: linear-gradient(135deg,rgba(118,116,111,.25) 0,rgba(208,208,208,.25) 72%,rgba(118,116,111,.25) 100%);
    color:#fff;
}

@media print{
    .jGrowl {
        display:none;
    }
}










/* Lists */
.ticket-comment,
.ticket-comment-row {margin-bottom: 15px;}
.ticket-new-comments {color: green;}

/* Ticket form */
#ticketForm {max-width: 800px;}
#ticketForm #ticket-sections {max-width: 400px;}
#ticketForm .error, #comment-form .error {color: brown;}
#ticketForm [name="content"] {display:inline-block;}
#ticket-preview-placeholder {background: #fff; outline: 5px solid #AAA; padding: 5px; display: none; margin: 10px 0; overflow: hidden;}
#ticketForm .form-actions,
#comment-form .form-actions {margin-top: 10px; padding-top: 10px; border-top: 1px solid #e3e3e3;}
#ticketForm .form-actions .checkbox,
#comment-form .form-actions .checkbox {display:inline;}
#ticketForm .move-right {text-align: right;}

/* Comments */
.comments {position:relative;overflow:hidden;}
.comments-list {padding-left: 25px;}
.ticket-comment {list-style-type: none;margin-top:20px;}
.ticket-avatar {display:inline-block;}
.ticket-comment .ticket-avatar {max-width: 24px; max-height: 24px;}
.ticket-comment-author {display:inline-block;font-weight:bold;margin-left: 10px;}
.ticket-comment-createdon {display:inline-block;font-size: 0.8em;color: #555555;margin-left: 10px;}
.ticket-comment-edited {display:inline-block;font-size: 0.8em;color: #555555;margin-left: 10px;font-style:italic;}
.ticket-comment-link {display:inline-block; margin-left: 15px;}

.ticket-comment-header {position: relative;}
.ticket-comment:hover > .ticket-comment-body > .ticket-comment-header > .ticket-comment-dot-wrapper {display:block;}
.ticket-comment-dot-wrapper {display:none;position:absolute;top:0;left:0;width:1px;height:1px;}
.ticket-comment-dot {width:500px;height:5px;right:1px;top:9px;position:absolute;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUTDRYgxxbUHAAAAFVJREFUGNO1kbENACEMxBwKJCRmICOw/xgZIaxAgZSGb34E4gVOPsNPRFySEAAzu2stxhjMOeX1SImI6+703nF3zjnPjUqtVVSVvTeqSmtNsm5LbfIBwCcf3dkm2FsAAAAASUVORK5CYII=) repeat-x 100% 0;}

.ticket-comment-text {margin-top: 5px;}
.ticket-reply-link a {font-size: 0.8em; text-decoration: none; border-bottom: 1px dashed;}
.ticket-comment-down {display: none;}
/* Guest comment */
.ticket-comment-guest .ticket-comment-author {color: #AAA;}
/* Bad comments*/
.ticket-comment .bad .ticket-comment-text {
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}
.ticket-comment .bad.bad5 .ticket-comment-text { opacity: 0.2;}
.ticket-comment .bad.bad4 .ticket-comment-text { opacity: 0.35;}
.ticket-comment .bad.bad3 .ticket-comment-text { opacity: 0.5;}
.ticket-comment .bad.bad2 .ticket-comment-text { opacity: 0.65;}
.ticket-comment .bad.bad1 .ticket-comment-text { opacity: 0.8;}
.ticket-comment .bad.bad:hover .ticket-comment-text {opacity: 1;}

#comment-editor {width: 99%; display:inline-block;}
#comment-preview-placeholder {background: #fff;border: 5px solid #AAA;padding: 5px;display: none;margin: 10px 0;overflow:hidden;}

/* Messages */


/* Panel with spinner */
#comments-tpanel {width:32px;display: none;position:fixed;right:0;top:50%;margin-top: -16px;}

#tpanel {width:32px;position:fixed;top:50%;opacity:0.5;background: #AAA;}
#tpanel:hover{opacity:1;}

#tpanel .change{color:#666;font-size:12px;text-decoration:none;padding:0 10px;position:absolute;left:0;top:-15px}
#tpanel .divider{border-top: solid 1px #5c5c5c;border-bottom: solid 1px #dddddd;width: 28px;height: 0px;margin:0 auto;}
#tpanel .refresh{display:block;background:url("../../img/web/refresh.gif") no-repeat left top;width:28px;margin:2px;height:28px;background-size:32px;}
#tpanel .refresh.loading{background:url("../../img/web/loading.gif") no-repeat left top;background-size:32px;}
#tpanel .new{text-decoration:none;display: block;color:#fff;font-size:12px;padding:0;padding-top:4px;padding-bottom:6px;width:34px;text-align:center;}

#tpanel-refresh {opacity: .5;width: 32px;height: 32px;background-image: url('../../img/web/refresh.gif');background-size: 32px;cursor: pointer;}
#tpanel-refresh:hover {opacity: 1;}
#tpanel-refresh.loading {opacity: 1;background-image: url('../../img/web/loading.gif');cursor: default;}

#tpanel-new {margin-top: 2px;border-top: solid 1px #efefef;text-align: center;color: darkgreen;cursor: pointer;}

/* Unseen comment */
.ticket-comment-new .ticket-comment-header {background-color: #f5f5dc;}


/* Rating and vote */
.ticket-comment-rating {float: right; color: #555;}
.ticket-rating .rating, .ticket-comment-rating .rating {font-weight: bold;}

.ticket-rating.active .vote,
.ticket-comment-rating.active .vote {
    cursor: pointer;
}

.ticket-rating.active .vote.plus:hover,
.ticket-rating.inactive .vote.plus.voted,
.ticket-rating .rating.positive,
.ticket-comment-rating.active .vote.plus:hover,
.ticket-comment-rating.inactive .vote.plus.voted,
.ticket-comment-rating .rating.positive {
    color: green;
}

.ticket-rating.active .vote.minus:hover,
.ticket-rating.inactive .vote.minus.voted,
.ticket-rating .rating.negative,
.ticket-comment-rating.active .vote.minus:hover,
.ticket-comment-rating.inactive .vote.minus.voted,
.ticket-comment-rating .rating.negative {
    color: red;
}

.ticket-rating.inactive,
.ticket-comment-rating.inactive {
    color: #AAA;
}

.ticket-rating.active .vote.refrain:hover {
    opacity: .7;
}

/* Ticket stars*/
.ticket-star.active .star,
.ticket-comment-star.active .star {cursor: pointer;}
.ticket-star .stared,
.ticket-comment-star .stared {color: green;}
.ticket-star .unstared,
.ticket-comment-star .unstared {color: gray;}
.ticket-star.active .unstared:hover,
.ticket-comment-star.active .unstared:hover {color: green;}

/* Ticket meta*/
.ticket-meta, .section-meta {
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}

/* Form files */
#ticket-files-container {margin-top: 10px;}
#ticket-files-select {font-weight: bold;}
#ticket-files-progress,
#ticket-files-list .ticket-file-template {display:none;}
#ticket-files-progress-count {}
#ticket-files-progress-percent {float:right;}
#ticket-files-progress-bar {height: 1.5em; background: lightblue; margin-top:5px; width: 0;}

.clearfix {clear: both;}
#ticket-files-list {padding: 10px 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; min-height: 50px;}
#ticket-files-list .ticket-file {width: 120px; float:left; margin: 5px 0 5px 10px; outline: 1px solid #efefef;}
#ticket-files-list .ticket-file-image-wrapper {width: 120px; height: 90px; overflow:hidden;}
#ticket-files-list .ticket-file-image {width: 120px; border: 1px solid #efefef;}
#ticket-files-list .ticket-file-size {color: #777; float: right;}

#ticket-files-list.droppable {border-width: 3px; border-style: dashed;}
#ticket-files-list.dragover {border-color: darkgreen;}
#ticket-files-list .ticket-file-meta {font-size: .8em; padding: 0 5px;}

#ticket-files-list .ticket-file.new {outline-color: lightblue;}
#ticket-files-list .ticket-file.deleted {outline-color: darkred;}

#ticket-files-list .ticket-file .ticket-file-restore {color: darkgreen;}
#ticket-files-list .ticket-file .ticket-file-delete {color: darkred;}

#ticket-files-list .ticket-file .ticket-file-restore,
#ticket-files-list .ticket-file.deleted .ticket-file-delete {display: none;}
#ticket-files-list .ticket-file.deleted .ticket-file-restore {display: inline;}

#ticket-files-list .ticket-ghost-state-highlight {background: lightblue;}




/*=====AJAX-FORM-STYLE==============*/

.jGrowl.top-right{
    top: 120px;
    right: calc(50% - 200px);
}


.jGrowl-notification{

    border-radius: 0px;
    box-shadow: 0 0 10px rgba(0,0,0,.4);

}



.af-message-success, .tickets-message-success {
    border: 3px solid #5BBFF2;
}
.af-message-error, .tickets-message-error {
    border: 3px solid #D01818;
}
.af-message-info, .tickets-message-info {
    border: 3px solid #9D9C99;
}


.jGrowl-message{
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 10px;
}



.ajax_form.af_example {
    width: 100%;
}
.ajax_form.af_example .controls input,
.ajax_form.af_example .controls textarea {
    width: 100%;
}
.ajax_form .error {
    color: brown;
}
@media screen and (min-width: 320px) {
    .ajax_form.af_example .controls button[type="submit"] {
        float: right;
    }
}
@media screen and (max-width: 320px) {
    .ajax_form.af_example .controls button {
        width: 100%;
        margin-top: 5px;
    }
}