.ticket-container, .ticket-sidebar { background-color: #ffffff; }

.ticket-sidebar__filter { transition:0.2s; }

/*Color for buttons*/

.el-button--primary{
  background-color: #008AB0!important;
  border-color: #008AB0!important;
}

.el-button--primary:hover, .el-button--primary:focus{
    background-color: #80C5D8!important;
 	border-color: #80C5D8!important;
}

.el-switch.is-checked .el-switch__core {
	border-color: #008AB0!important;
	background-color: #008AB0!important;
}

.el-button--text{ color: #008AB0!important; }

.text-button{ color: #008AB0!important; }

div .cell span a{ color: #008AB0!important; }

div .ticket-list-column-title__center a{ color: #008AB0!important; }

.staff__item:hover .staff__item-icon, .staff__item:hover .staff__item-name { color: #80C5D8!important; }

.el-button--primary.is-plain{ color: #000000!important; }

.el-button--primary.is-plain:hover{ color: #FFFFFF!important; }
/*Color for buttons*/

/*Background login page*/

.login{
      background: linear-gradient(to right, #80C5D8 10%, #006581 100%) !important;
  box-shadow: 0 100px 100px 100px #80C5D8 inset;
  animation: background 25s infinite alternate;
}

@keyframes background {
  50% {
    background: #80C5D8;
    box-shadow: 0 -200px 100px -100px #006581 inset;
  }
}

/*Background login page*/

/*Menu and logo on page*/

.logo{
  align-items: center;
  -webkit-filter: drop-shadow(1px 1px 1px #222);
  filter: drop-shadow(2px 2px 2px #500);
}

.menu__items{ scrollbar-width: none; }
.menu__item{ border-radius: 5px; transition:0.2s; }

/*.menu .menu__item.menu__item_logo, .menu .menu__item.menu__item_logo:hover{
    background-color: #FFFFFF !important;
}*/

/*Menu and logo on page*/

/*Begin Ticket buttons edited*/

.ticket-editor__plugin_macros .el-cascader .el-input__inner { background: #008AB0; transition: 0.1s; }

.ticket-editor__plugin_macros .el-cascader .el-input__inner:hover { background: #80C5D8; }

/*End Ticket buttons edited*/


/*visibility onmousehover at userfields*/
#ticket-app .ticket .ticket-user__field-value-text { overflow: visible !important; white-space: normal; }

/*SLA Custom color*/

/*
.ticket-list .ticket-list__column-sla-reached {
background: rgb(245, 108, 108, 0.3) !important;
}
*/

/*Begin Colorized icons for selection container*/  
.ticket-list_ticket-type-icon .hde-whatsapp { color:#02e540; font-size: 15px; font-weight: 550; }

h1 .hde-whatsapp, .ticket-tabs__tab-name .hde-whatsapp, .cell .hde-whatsapp { color:#02e540; }

button .el-icon-delete { color:#ff0000; transition: all 0.1s ease; }
button .el-icon-delete:hover { color:#ff4040; }

.ticket-list_ticket-type-icon .hde-tlgrm { color:#239cd6; font-size: 15px; font-weight: 550; }

#ticket-app .ticket-list .ticket-list_ticket-type-icon { color:#e79a36; font-size: 15px; font-weight: 550; }

.el-checkbox__inner { border-radius: 5px; }

h1 .hde-tlgrm, .ticket-tabs__tab-name .hde-tlgrm, .cell .hde-tlgrm { color:#239cd6; }

.ticket-list_ticket-type-icon .hde-letter { color:#bb0000; font-size: 15px;  font-weight: 550; }

h1 .hde-letter, .ticket-tabs__tab-name .hde-letter, .cell .hde-letter { color:#bb0000; }

.ticket-list_ticket-type-icon .hde-viber { color:#ae76db; font-size: 15px; font-weight: 550; }

h1 .hde-viber, .ticket-tabs__tab-name .hde-viber, .cell .hde-viber { color:#ae76db; }

.ticket-list_ticket-type-icon .icon-phone  { color:#FF00A6; font-size: 15px; font-weight: 550; }

h1 .icon-phone, .ticket-tabs__tab-name .icon-phone, .cell .icon-phone { color:#FF00A6; }

.ticket-list_ticket-type-icon .el-tooltip.el-icon-user { color:#0000ff; font-size: 15px; font-weight: 550; }

h1 .el-tooltip.el-icon-user, .ticket-tabs__tab-name .el-icon-user, .cell .el-icon-user { color:#0000ff; }
/*End colorized icons for selection contaier*/

/*unique color for user message*/
.ticket-detail__unique-id { 
    font-size: 12px !important;
    font-weight: 500 !important;
    /*color:#ff0000 !important; */
    text-overflow: ellipsis !important;
   flex: 1 !important;
  /*  font-weight: 550; */
}
/*tickets ID selector for all strong tagged strings*/

.ticket-detail__unique-id strong, .ticket-equipment__list-item {
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  cursor: pointer;
  user-select: all;
  -moz-user-select: all;
  -webkit-user-select: all;
}

.phone input{ cursor: pointer; }

/*system messages alignment*/
#ticket-app .ticket .ticket-conversation__message_comment { margin-left: 5% !important; margin-right: 5%; }
/*div bars for system messages in requests*/
.divBoxNotFilledFileds {
        background-color: white;
  		display: inline-block;
  		margin: -5px -5px -5px -5px;
 		box-sizing: border-box;
    	padding: 0px;
    }

.divRedSystemMessage {
        background-color: Red;
  		text-align: center;
  		margin: -5px -5px -5px -5px;
 		box-sizing: border-box;
    	padding: 0px;
    }

.divLightblueSystemMessage {
        background-color: #ADD8E6;
  		text-align: center;
  		margin: -5px -5px -5px -5px;
 		box-sizing: border-box;
    	padding: 0px;
    }

.divBoxFeedback_1{
	background-color: #f74f4f;
    text-align: center;
    margin: -10px -10px -10px -10px;
    box-sizing: border-box;
    display: inline-block;
    padding: 0px;
  	
}
.divBoxFeedback_2{
	background-color: #2b87f0;
    text-align: center;
    margin: 3px 3px 3px 3px;
    box-sizing: border-box;
    display: inline-block;
    padding: 5px;
}


/*navbar*/
.plugin-tickets-topnav { margin-bottom: 15px !important; }

.ticket-fields__custom-field-9 textarea { height:300px !important; }

.loadingDiv:after {
    content: "";
    display: block;
    position: fixed;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    z-index: 11;
    margin-top: -75px;
    margin-left: -75px;
    background: url(/img/loading2.gif) no-repeat #fff center;
    background-image: url(/img/loading2.gif);
    background-position-x: center;
    background-position-y: center;
    background-size: initial;
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
}


/*Begin Running global string plugin setup*/
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
@-moz-keyframes scroll {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}
 
@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}
 
.marquee {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
 
.marquee span {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 20s infinite linear;
    -moz-animation: scroll 20s infinite linear;
    animation: scroll 20s infinite linear;
}
/*End Running global string plugin setup*/

#ticket-app .ticket .ticket-right-block .ticket-fields__custom-fields { padding: 0px 0; }

label[for="77"]{ color: #008ab0; transition: all 0.1s ease; }

label[for="77"]:hover{ font-weight: bold; color: #23869b; cursor: pointer; user-select: none; }

#ticket-custom-field-77{ background-color: rgba(0, 255, 0, 0.24); font-weight: bold; color:red; height: 150px !important; display:none; }
.ticket-fields__custom-field-77 .el-form-item__content{ line-height: 0px!important; }
.ticket-fields__custom-field-77:hover #ticket-custom-field-77 { transition: all 2.0s ease;  display:block; }

.ticket-user__field  .user-card-company { background-color:rgba(255,0,0,0.1); }

/*Size of field*/
#ticket-custom-field-9{
	height: 200px !important;
    display: block;
    height: 100%;
}
#ticket-custom-field-18{
	max-height: 200px !important;
    display: block;
    height: 100%;
}


#ticket-custom-field-78, #ticket-custom-field-79, #ticket-custom-field-31, #ticket-custom-field-14, #ticket-custom-field-25, #ticket-custom-field-36, #ticket-custom-field-16, #ticket-custom-field-15, #ticket-custom-field-90, #ticket-custom-field-17, #ticket-custom-field-103, #ticket-custom-field-111, #ticket-custom-field-115, #ticket-custom-field-116, #ticket-custom-field-118, #ticket-custom-field-119, #ticket-custom-field-124, #ticket-custom-field-108, #ticket-custom-field-119 { margin-top: 0px !important;}

label[for="112"]{ color: red; font-weight: bold; }

#ticket-custom-field-108{ margin-top: 0px !important; width: 100%; }

  /*Begin Ticket buttons edited*/
.last-user-tickets { color: #008ab0; transition: all 0.1s ease; }
.last-user-tickets:hover { font-weight: bold; color: #23869b; cursor: pointer; user-select: none; }
/*End Ticket buttons edited*/

/*Deactivated rate system for all*/
#ticket-app .ticket .ticket-rate:active { pointer-events: none; }

/*Hide fields in tickets*/
#ticket-custom-field-79, .ticket-fields__custom-field-79, .ticket-fields__custom-field-37 { visibility:hidden; }

.ticket-right-block{ -webkit-flex-flow: row wrap; flex-flow: row wrap; }

.ticket-fields__field .el-row:nth-of-type(1){ order: 1; }

.ticket-fields__field .ticket-fields__custom-field-77:nth-of-type(2){ order: 2; }

/*Translate plugin hover color change begin*/
#languageSelect:hover{
	color: #23869b;
  	cursor: pointer;
  	user-select: none;
  	background-color:#80C5D8!important;
}
#translateButton:hover{
	color: #23869b;
  	cursor: pointer;
  	user-select: none;
  	background-color:#80C5D8!important;
}
/*Translate plugin hover color change end*/

/* Styling for the cascader menu items */
.el-cascader-node {
  padding: 8px 12px; /* Ensure consistent padding for better appearance */
  transition: background-color 0.3s ease; /* Smooth transition for hover or changes */
}

/* Apply different background colors for each MACRO menu item using :nth-child */
.el-cascader-node:nth-child(1) { background-color: #f0f9ff; /* Light blue for first item */ }
.el-cascader-node:nth-child(2) { background-color: #f0fff0; /* Light green */ }
.el-cascader-node:nth-child(3) { background-color: #fff0f0; /* Light red */ }
.el-cascader-node:nth-child(4) { background-color: #fff5e6; /* Light orange */ }
.el-cascader-node:nth-child(5) { background-color: #f0e6ff; /* Light purple */ }
.el-cascader-node:nth-child(6) { background-color: #e6f7ff; /* Light cyan */ }
.el-cascader-node:nth-child(7) { background-color: #fff0f5; /* Light pink */ }
.el-cascader-node:nth-child(8) { background-color: #e6ffe6; /* Light mint */ }
.el-cascader-node:nth-child(9) { background-color: #f5f5f5; /* Light gray */ }
.el-cascader-node:nth-child(10) { background-color: #e6f0ff; /* Light sky blue */ }
.el-cascader-node:nth-child(11) { background-color: #fffbe6; /* Light yellow */ }
.el-cascader-node:nth-child(12) { background-color: #f0e6e6; /* Light rose */ }
.el-cascader-node:nth-child(13) { background-color: #e6f5e6; /* Light lime */ }
.el-cascader-node:nth-child(14) { background-color: #f0e6ff; /* Light lavender */ }
.el-cascader-node:nth-child(15) { background-color: #e6f0f5; /* Light slate */ }

/* Hover effect for better user interaction */
.el-cascader-node:hover { filter: brightness(90%); /* Slightly darken on hover for feedback */ }

/* Ensure text remains readable */
.el-cascader-node__label { color: #333; /* Dark text for contrast */ }

/* Apply different background colors for each MACRO menu item using :nth-child */

  .menu-plugins .menu-plugins__popper-iframe { top:100px!important; }