/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*** COLORS ***/
/*** TYPOGRAPHY ***/
:root {
  color: #6E747D;
  font-family: "Open Sans", sans-serif;
  font-size: 18px; }

a {
  color: #6E747D;
  text-decoration: none; }
  a:focus {
    outline: none; }
  a:hover {
    text-decoration: none; }

p, ul, ol {
  line-height: 1.5; }

strong, b {
  font-weight: 700; }

em, i {
  font-style: italic; }

del {
  text-decoration: line-through; }

ins, u {
  text-decoration: underline; }

small, .small {
  font-size: 80%; }

/** HEADINGS **/
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.5;
  word-wrap: break-word; }

h2 {
  font-size: 2.6666666667rem; }

h3 {
  font-size: 1.7777777778rem; }

h4 {
  font-size: 1.3333333333rem;
  margin-bottom: 0.6666666667rem; }

h5 {
  font-size: 1rem; }

/** LISTS **/
ol {
  list-style: decimal inside; }

ul {
  list-style: inside none; }

/*** START ***/
*, *::after, *::before {
  box-sizing: border-box; }

html, body {
  height: 100%; }

:root {
  background-color: #F5F7FA; }

/*** SITE HEADER ***/
#site_header {
  background-color: white;
  box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1);
  color: #6E747D;
  height: 100vh;
  left: 0;
  overflow: auto;
  position: fixed;
  text-align: center;
  top: 0;
  transition: width 0.05s;
  width: 3.1111111111rem;
  z-index: 10; }

#site_header_user {
  background-color: #F5F7FA;
  padding: 0.4444444444rem; }

.site_header_user_brand {
  height: auto;
  width: 2.2222222222rem; }

.site_header_user_info {
  display: none; }
  .site_header_user_info .name {
    font-size: 0.8888888889rem;
    font-weight: 700; }
  .site_header_user_info .role {
    font-size: 0.6666666667rem;
    font-weight: 700;
    text-transform: uppercase; }

/* Site Nav */
#site_nav {
  padding-top: 0.8888888889rem; }
  #site_nav ul {
    font-size: 0.8888888889rem; }
    #site_nav ul li {
      text-align: left; }
      #site_nav ul li a {
        align-items: center;
        border-left: 0.1111111111rem solid white;
        color: inherit;
        display: flex;
        flex: 0 1 auto;
        justify-content: space-between;
        padding-bottom: 1.0555555556rem;
        padding-top: 1.0555555556rem;
        position: relative;
        text-align: center; }
        #site_nav ul li a i {
          font-size: 1.1111111111rem; }
        #site_nav ul li a span span {
          display: none; }
        #site_nav ul li a .title {
          flex-grow: 1;
          flex-shrink: 1;
          max-width: 9.4444444444rem;
          word-wrap: break-word; }
        #site_nav ul li a .ticket_number {
          flex-grow: 0;
          flex-shrink: 0; }
      #site_nav ul li:hover > a, #site_nav ul li.current-page-item > a, #site_nav ul li.current-menu-item > a, #site_nav ul li.current-page-parent > a {
        background-color: #F5F7FA;
        border-color: #6BA6EE;
        text-decoration: none; }
        #site_nav ul li:hover > a i, #site_nav ul li.current-page-item > a i, #site_nav ul li.current-menu-item > a i, #site_nav ul li.current-page-parent > a i {
          color: #6BA6EE; }
      #site_nav ul li.projects > a {
        background-color: #6BA6EE;
        border-color: #6BA6EE;
        color: white; }
      #site_nav ul li.projects:hover > a {
        color: white; }
        #site_nav ul li.projects:hover > a i {
          color: currentColor; }
    #site_nav ul li ul {
      display: none;
      font-size: 0.7777777778rem;
      list-style: none;
      list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
      list-style-type: none; }
      #site_nav ul li ul li {
        border-bottom: 0.0555555556rem dashed #979797; }
        #site_nav ul li ul li a {
          padding-bottom: 1.1111111111rem;
          padding-top: 1.1111111111rem; }
    #site_nav ul li:hover ul li a, #site_nav ul li.current_page_item ul li a, #site_nav ul li.current_menu_item ul li a, #site_nav ul li.current_page_parent ul li a {
      background-color: white; }
    #site_nav ul li.hover ul {
      display: block; }
  #site_nav [class^="ticket_number_"], #site_nav [class*=" ticket_number_"] {
    border-radius: 0.2777777778rem;
    color: white;
    font-size: 0.7777777778rem;
    font-weight: 700;
    height: 1.3333333333rem;
    line-height: 1.3333333333rem;
    padding-left: 0.8333333333rem;
    padding-right: 0.8333333333rem; }
  #site_nav .ticket_number_new {
    background-color: #E21414; }
  #site_nav .ticket_number_open {
    background-color: #FEA844; }
  #site_nav ul li ul li [class^="ticket_number_"], #site_nav ul li ul li [class*=" ticket_number_"] {
    padding-left: 0.3333333333rem;
    padding-right: 0.3333333333rem; }

.site_header_opened {
  /* Site Nav */ }
  .site_header_opened #site_header {
    width: 16.6666666667rem; }
  .site_header_opened .site_header_user_brand {
    width: 5.3333333333rem; }
  .site_header_opened #site_header_user {
    padding: 1.2777777778rem; }
  .site_header_opened .site_header_user_brand {
    margin-bottom: 0.5rem; }
  .site_header_opened .site_header_user_info {
    display: block; }
    .site_header_opened .site_header_user_info .name {
      margin-bottom: 0.5rem; }
  .site_header_opened #site_nav ul li a {
    justify-content: space-between;
    padding: 0.6666666667rem 1rem;
    text-align: left; }
    .site_header_opened #site_nav ul li a i {
      font-size: 0.8888888889rem;
      margin-right: 0.5555555556rem; }
    .site_header_opened #site_nav ul li a span {
      display: inline-block; }
  .site_header_opened #site_nav ul li ul {
    display: block; }

/*** COMPONENTS ***/
/** FORM **/
input, textarea, select {
  font-family: inherit; }

input::placeholder{
    font-size: small;
}

button:focus, input:focus, select:focus, textarea:focus {
  outline: none; }

button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
  cursor: pointer; }

/* Form Group */
.form_group {
  margin-bottom: 1.2222222222rem; }

/* Label */
label, legend, .label {
  display: block;
  font-size: 0.7777777778rem;
  margin-bottom: 0.2777777778rem; }

legend {
  margin-bottom: 0.5555555556rem; }

fieldset .form_group {
  align-items: center;
  display: flex;
  flex: 0 1 auto; }
fieldset label {
  font-weight: 700;
  flex: 0 0 80px; }

/* Input and Textarea */
.input-text, .input-textarea {
  -webkit-appearance: none;
  border: 0.0555555556rem solid #ECECEC;
  border-radius: 0.4444444444rem;
  font-size: 0.7777777778rem;
  padding: 0.4722222222rem 0.2777777778rem;
  width: 100%; }
  .input-text:hover, .input-text:focus, .input-textarea:hover, .input-textarea:focus {
    border-color: #6BA6EE; }
  .input-text:disabled, .input-textarea:disabled {
    background-color: lightgrey !important;
    border-color: lightgrey !important; }
    .input-text:disabled:hover, .input-textarea:disabled:hover {
      cursor: not-allowed; }

.input-textarea {
  font-size: inherit;
  height: 5.7777777778rem;
  resize: none; }

.input_group {
  align-items: center;
  border: 0.0555555556rem solid #6BA6EE;
  border-radius: 0.4444444444rem;
  display: flex;
  flex: 0 1 auto;
  height: 2.2222222222rem;
  overflow: hidden; }

.input_group_prepend {
  background-color: #6BA6EE;
  color: white;
  flex-grow: 0;
  flex-shrink: 0;
  height: 2.2222222222rem;
  line-height: 2.2222222222rem;
  width: 2.6666666667rem; }

.input_group_input {
  border: none;
  flex-grow: 1;
  flex-shrink: 1;
  font-size: 0.7777777778rem;
  padding: 0.4722222222rem 0.2777777778rem; }

.input_group.error {
  border-color: #E21414; }
  .input_group.error .input_group_prepend {
    background-color: #E21414; }

.error_msg {
  color: #E21414;
  display: block;
  font-size: 0.7777777778rem;
  margin-left: 2.6666666667rem;
  margin-top: 0.2222222222rem;
  text-align: left; }

/* Placeholder */
input::placeholder, textarea::placeholder {
  color: #ECECEC; }

/* Select */
select {
  appearance: none; }

.custom-select {
  background: white url("../img/select.svg") no-repeat right 0.4444444444rem center;
  border: 0.0555555556rem solid #ECECEC;
  border-radius: 0.4444444444rem;
  font-size: 0.7777777778rem;
  height: 2.2222222222rem;
  line-height: normal;
  overflow: hidden;
  padding: 0.2777777778rem 1.2777777778rem 0.2777777778rem 0.2777777778rem; }
  .custom-select:hover, .custom-select:focus {
    border-color: #6BA6EE; }

select::-ms-expand {
  display: none; }

/* Checkbox */
.checkbox_choice {
  display: inline-block;
  font-size: 0.7777777778rem;
  margin-right: 3.3333333333rem; }
  .checkbox_choice input[type="checkbox"] {
    margin-right: 0.2222222222rem; }
  .checkbox_choice:last-of-type {
    margin-right: 0; }

/* Button */
.button_ghost {
  background-color: white;
  border: 0.0555555556rem solid currentColor;
  border-radius: 0.4444444444rem;
  color: #6BA6EE;
  display: inline-block;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5555555556rem 2.2222222222rem;
  text-align: center;
  transition: all .15s; }
  .button_ghost:hover {
    background-color: #6BA6EE;
    color: white;
    cursor: pointer;
    text-decoration: none; }
  .button_ghost:disabled:hover {
    cursor: not-allowed; }

.button_ghost_danger {
  background-color: #E21414;
  border: 0.0555555556rem solid currentColor;
  border-radius: 0.4444444444rem;
  color: #6BA6EE;
  display: inline-block;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5555555556rem 2.2222222222rem;
  text-align: center;
  transition: all .15s; }
  .button_ghost_danger:hover {
    background-color: #6BA6EE;
    color: white;
    cursor: pointer;
    text-decoration: none; }
  .button_ghost_danger:disabled:hover {
    cursor: not-allowed; }

.button_card {
  background-color: white;
  border: none;
  font-size: 0.8888888889rem;
  font-weight: 700; }
  .button_card:hover {
    border-color: #6BA6EE;
    color: white; }
  .button_card:disabled {
    color: #ECECEC; }
    .button_card:disabled:hover {
      cursor: not-allowed; }

/* File Input */
.inputfile {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  width: 0.1px; }

.inputfile + label {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap; }
  .inputfile + label .label_attach {
    background-color: white;
    border: 0.0555555556rem solid #ECECEC;
    border-radius: 0.4444444444rem;
    display: inline-block;
    font-size: 0.7777777778rem;
    padding: 0.5277777778rem 0.8333333333rem; }
  .inputfile + label:hover .label_attach {
    background-color: #6BA6EE;
    color: white; }
  .inputfile + label .label_image {
    background-color: white;
    border: 0.0555555556rem solid currentColor;
    border-radius: 0.4444444444rem;
    color: #6BA6EE;
    display: inline-block;
    font-size: 1rem;
    padding: 0.1666666667rem 0.5555555556rem; }
  .inputfile + label:hover .label_image {
    background-color: #6BA6EE;
    border-color: #6BA6EE;
    color: white; }

/*** MODULES ***/
/** SITE BODY **/
#site_body {
  padding-left: 3.1111111111rem; }

/** SITE TOP **/
#site_body_top {
  align-items: center;
  background-color: white;
  border-bottom: 0.1111111111rem solid #ECECEC;
  box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1);
  display: flex;
  flex: 0 1 auto;
  height: 3.6666666667rem;
  justify-content: space-between;
  width: 100%; }
  #site_body_top > * {
    align-items: center;
    border-right: 0.0555555556rem solid white;
    display: inline-flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%; }
  #site_body_top a {
    color: #6E747D; }

#open_nav {
  align-items: center;
  border-right: 0.0555555556rem solid #ECECEC;
  color: #6E747D;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.7222222222rem;
  font-weight: 700;
  height: 100%;
  padding: 0 1.9444444444rem 0 0.7222222222rem;
  position: relative;
  text-transform: uppercase;
  z-index: 11; }
  #open_nav span {
    right: 0.7222222222rem;
    top: calc(50% - 1.5px); }
  #open_nav span, #open_nav span::before, #open_nav span::after {
    background: currentColor;
    border-radius: 0.0833333333rem;
    content: '';
    cursor: pointer;
    display: block;
    height: 0.1666666667rem;
    position: absolute;
    transition: all 250ms ease-in-out;
    width: 0.8333333333rem; }
  #open_nav span::before {
    right: 0;
    top: -0.3888888889rem; }
  #open_nav span::after {
    right: 0;
    bottom: -0.3888888889rem; }
  #open_nav.active span {
    background: transparent; }
    #open_nav.active span::before, #open_nav.active span::after {
      top: 0; }
    #open_nav.active span::before {
      transform: rotate(45deg); }
    #open_nav.active span::after {
      transform: rotate(-45deg); }

#search {
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%; }
  #search * {
    height: 100%; }
  #search form {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto; }
  #search input[type="text"] {
    border: none;
    font-size: 0.7777777778rem;
    padding-left: 0.8888888889rem;
    width: calc(100% - 64px); }
  #search input[type="submit"], #search button {
    background-color: #6BA6EE;
    border: none;
    color: white;
    font-size: 1.3333333333rem;
    padding: 0.8333333333rem 0;
    width: 3.5555555556rem; }

.add_project, .open_ticket, .create_user {
  color: white !important;
  font-size: 0.8888888889rem;
  font-weight: 700;
  height: 100%;
  padding: 0 1.2777777778rem;
  text-transform: uppercase; }

.add_project {
  background-color: #6BA6EE; }

.open_ticket {
  background-color: #E21414; }

.create_user { background-color: #38C713; }

.open_settings, .last_tickets_open, .user_option_open {
  border-right-color: #ECECEC !important;
  padding: 0 0.8888888889rem; }

.open_settings i, .last_tickets_open i {
  font-size: 1.3333333333rem; }

.last_tickets_open, .user_option_open {
  align-items: center;
  display: inline-flex;
  flex: 0 1 auto;
  height: 100%; }

ul.last_ticket > li {
  height: 100%;
  position: relative; }
ul.last_ticket .last_tickets_open {
  position: relative;
  height: 100%; }
  ul.last_ticket .last_tickets_open .ticket_number {
    align-items: center;
    background-color: #E21414;
    border-radius: 50%;
    color: white;
    display: flex;
    flex: 0 1 auto;
    font-size: 0.6666666667rem;
    font-weight: 700;
    height: 1.3333333333rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 0.4444444444rem;
    width: 1.3333333333rem; }
ul.last_ticket li ul {
  background-color: white;
  border-radius: 0 0 0.4444444444rem 0.4444444444rem;
  box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1);
  display: none;
  font-size: 0.6666666667rem;
  position: absolute;
  right: 0;
  top: 100%;
  width: 17.7777777778rem;
  z-index: 10; }
  ul.last_ticket li ul li {
    border-top: 0.0555555556rem solid #ECECEC; }
    ul.last_ticket li ul li a {
      align-items: flex-start;
      background-color: white;
      display: flex;
      flex: 0 1 auto;
      padding: 0.8888888889rem; }
      ul.last_ticket li ul li a .last_ticket_user {
        align-items: center;
        background-color: #6BA6EE;
        border-radius: 50%;
        color: white;
        display: inline-flex;
        flex-grow: 0;
        flex-shrink: 0;
        height: 1.7777777778rem;
        justify-content: center;
        margin-right: 0.8888888889rem;
        width: 1.7777777778rem; }
        ul.last_ticket li ul li a .last_ticket_user i {
          font-size: 0.9444444444rem; }
      ul.last_ticket li ul li a .last_ticket_text {
        flex-grow: 1;
        flex-shrink: 1; }
      ul.last_ticket li ul li a .last_ticket_user_name {
        color: #6BA6EE; }
    ul.last_ticket li ul li:hover a {
      background-color: #F5F7FA; }
    ul.last_ticket li ul li:last-child {
      border-radius: 0 0 0.4444444444rem 0.4444444444rem;
      font-size: 1rem;
      overflow: hidden; }
      ul.last_ticket li ul li:last-child a {
        background-color: #6BA6EE;
        color: white !important;
        justify-content: center; }
ul.last_ticket li:hover {
  cursor: pointer; }
  ul.last_ticket li:hover ul {
    display: block; }

ul.user_option {
  background-color: #F5F7FA; }
  ul.user_option > li {
    height: 100%;
    position: relative; }
  ul.user_option li ul {
    box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1);
    display: none;
    font-size: 0.8888888889rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10; }
    ul.user_option li ul li {
      background-color: white;
      border: 0.0555555556rem solid #ECECEC;
      white-space: nowrap; }
      ul.user_option li ul li a {
        display: block;
        padding: 0.8333333333rem 1.2777777778rem; }
        ul.user_option li ul li a i {
          margin-right: 0.7222222222rem; }
      ul.user_option li ul li:hover {
        background-color: #F5F7FA; }
        ul.user_option li ul li:hover a i {
          color: #6BA6EE; }
  ul.user_option li:hover {
    cursor: pointer; }
    ul.user_option li:hover ul {
      display: block; }

.user_option .user_option_open i {
  transition: transform 0.25s; }
.user_option:hover .user_option_open i {
  transform: rotate(-180deg); }

.user_option_image {
  margin-right: 0.5rem; }

/** SITE INTRO **/
#site_body_intro {
  background: white;
  padding: 0.55555555555rem 1.2222222222rem; }
  #site_body_intro h2 {
    font-size: 2.6666666667rem; }
  #site_body_intro [class^="intro_ticket_"], #site_body_intro [class*=" intro_ticket_"] {
    font-size: 0.6666666667rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    text-transform: uppercase; }
  #site_body_intro .intro_ticket_number {
    display: block;
    font-size: 2.6666666667rem;
    line-height: 2.5555555556rem; }
  #site_body_intro .intro_ticket_type {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    justify-content: center; }
    #site_body_intro .intro_ticket_type::before {
      background-color: currentColor;
      border-radius: 50%;
      content: '';
      display: inline-block;
      height: 0.8888888889rem;
      margin-right: 0.3333333333rem;
      width: 0.8888888889rem; }
  #site_body_intro .intro_ticket_new .intro_ticket_type {
    color: #E21414; }
  #site_body_intro .intro_ticket_open .intro_ticket_type {
    color: #FEA844; }
  #site_body_intro .intro_ticket_closed .intro_ticket_type {
    color: #38C713; }
  #site_body_intro .intro_ticket_total .intro_ticket_type {
    color: #6BA6EE; }
    #site_body_intro .intro_ticket_total .intro_ticket_type::before {
      content: none; }

/** SITE CONTENT **/
#site_body_content {
  background-color: #F5F7FA;
  padding: 1.3333333333rem 0.8333333333rem; }

.site_header_opened #site_body {
  padding-left: 16.6666666667rem; }

/** CARD **/
.card {
  background-color: white;
  border: 0.0555555556rem solid #ECECEC;
  border-radius: 0.4444444444rem;
  box-shadow: 0;
  margin-bottom: 1.7777777778rem;
  overflow: hidden;
  transition: box-shadow 0.1s;
  width: 100%; }
  .card:hover {
    box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1); }

.card_footer {
  align-items: center;
  border-top: 0.0555555556rem solid #ECECEC;
  display: flex;
  flex: 0 1 auto;
  font-size: 0.6666666667rem; }
  .card_footer a, .card_footer button {
    border-right: 0.0555555556rem solid #ECECEC;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.6388888889rem 0.2777777778rem; }
    .card_footer a:hover, .card_footer button:hover {
      background-color: #6BA6EE;
      color: white; }
    .card_footer a:last-of-type, .card_footer button:last-of-type {
      border-right: 0; }

.card_standard {
  color: #6E747D;
  padding: 0.9444444444rem 0.7777777778rem; }

.card_project {
  font-weight: 700;
  text-align: center;
  text-transform: uppercase; }

.card_project_top {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  padding: 0.8888888889rem 1.2777777778rem; }

.card_project_image {
  border-radius: 50%;
  flex-grow: 0;
  flex-shrink: 0; }

.card_ticket {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: right; }

[class^="card_project_ticket_"], [class*=" card_project_ticket_"] {
  display: inline-block;
  margin: 0 0.6666666667rem;
  text-align: center; }

.card_ticket_number {
  font-size: 1.3333333333rem; }

.card_ticket_type {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  font-size: 0.5555555556rem;
  justify-content: center;
  margin-top: 0.3888888889rem; }
  .card_ticket_type::before {
    background-color: currentColor;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 0.8888888889rem;
    margin-right: 0.3333333333rem;
    width: 0.8888888889rem; }

.card_project_ticket_new .card_ticket_type {
  color: #E21414; }

.card_project_ticket_open .card_ticket_type {
  color: #FEA844; }

.card_project_ticket_closed .card_ticket_type {
  color: #38C713; }

.card_user {
  height: 100%;
  text-align: center;
  padding: 2.2222222222rem 1.1111111111rem 1.1111111111rem; }

.card_user_info h5 {
  color: #6BA6EE; }

.card_user_photo {
  border-radius: 50%;
  margin: 0 auto 0.6666666667rem; }

.card_user_role {
  margin-top: 1.2777777778rem; }

.card_user_modify {
  padding: 0.8333333333rem 1.3888888889rem 1.3888888889rem 0; }

.card_setting_head {
  align-items: center;
  border-bottom: 0.0555555556rem solid #ECECEC;
  display: flex;
  flex: 0 1 auto;
  padding: 0.4444444444rem 1.3333333333rem; }

.card_setting_image {
  border-radius: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  height: auto;
  margin-right: 0.8888888889rem;
  width: 3.1111111111rem; }

.card_setting_title {
  flex-grow: 1;
  flex-shrink: 1;
  font-size: 0.8888888889rem;
  font-weight: 400; }

.card_setting_body {
  padding: 1.2777777778rem 1.3333333333rem; }

.card_setting_body, .button_setting_reset {
  display: none; }

.card_setting.opened .card_setting_body, .card_setting.opened .button_setting_reset {
  display: block; }
.card_setting.opened .button_setting_modify {
  display: none; }

.card_big_ticket {
  border-left: 0.5rem solid white;
  color: #6E747D;
  padding: 0.9444444444rem 1.4444444444rem 1.2777777778rem; }
  .card_big_ticket.answer {
    border-left-color: #FEA844; }

.card_big_ticket_group {
  margin-bottom: 1.3888888889rem; }

.card_big_ticket_title {
  font-size: 1.3333333333rem;
  font-weight: 700; }

.card_big_ticket_value {
  font-size: 0.8888888889rem;
  font-weight: 700; }

.card_big_ticket_priority {
  text-transform: uppercase; }

.card_stats_head {
  align-items: center;
  background-color: #6BA6EE;
  color: white;
  display: flex;
  flex: 0 1 auto;
  font-size: 0.6666666667rem;
  font-weight: 700;
  justify-content: space-between;
  padding: 0.4444444444rem 0.7222222222rem; }
  .card_stats_head a {
    color: white; }
  .card_stats_head i {
    flex-flow: 0;
    flex-shrink: 0;
    font-size: 1.3333333333rem; }

.card_stats_body {
  padding: 0.8888888889rem; }

.card_login_body {
  padding: 1.7777777778rem 0.9444444444rem; }

.card_login_lost {
  font-size: 0.7777777778rem; }

.table, .table_head, .table_body {
  width: 100%; }

.table_head {
  color: #1331c7;
  font-style: italic;
  font-size: 0.6666666666rem;
  padding-bottom: 0.8055555556rem;
  padding-top: 0.8055555556rem; }

.table_head_row, .table_body_row {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  justify-content: space-between;
  padding-left: 0.2777777778rem;
  padding-right: 0.2777777778rem; }

.table_body_row {
  background-color: white;
  border-radius: 0.4444444444rem;
  color: inherit;
  font-size: 0.8888888889rem;
  margin-bottom: 0.4444444444rem;
  padding-bottom: 0.7222222222rem;
  padding-top: 0.7222222222rem;
  text-align: left; }
  .table_body_row:hover {
    box-shadow: 0 0.1111111111rem 0.2222222222rem rgba(60, 60, 60, 0.1);
    color: #6BA6EE; }

.table_cell {
  padding-left: 0.2222222222rem;
  padding-right: 0.2222222222rem; }

/** ALERT **/
.alert {
  background-color: #6BA6EE;
  border-color: #6BA6EE;
  color: white;
  padding: 0.6666666667rem 1.2777777778rem 1.2777777778rem;
  position: relative; }
  .alert p {
    font-size: 1.1666666667rem;
    margin-bottom: 0; }
  .alert .close {
    color: white;
    font-size: 0.6666666667rem;
    opacity: 1;
    position: absolute;
    right: 0.8888888889rem;
    top: 0.7777777778rem; }

/** MODAL **/
.modal {
  background-color: #6BA6EE;
  background-color: rgba(107, 166, 238, 0.9);
  color: #6E747D; }

.modal-content {
  border-color: #ECECEC; }

.modal-header {
  border-bottom: 0;
  padding-bottom: 0; }

/*** CONTENTS ***/
/** LOGIN **/
#site_login {
  align-items: center;
  background-color: #F5F7FA;
  display: flex;
  flex: 0 1 auto;
  height: 100%;
  width: 100vw; }

#site_public_ticket {
  align-items: center;
  background-color: #F5F7FA;

  height: 120%;}

.card_login {
  background-color: white;
  margin: auto;
  max-width: 17.7777777778rem;
  width: 100%; }

.card_login_logo {
  align-items: center;
  background-color: white;
  display: flex;
  flex: 0 1 auto;
  height: 8.0555555556rem;
  justify-content: center; }

.card_public_logo {
  align-items: center;
  background-color: white;
  display: flex;
  flex: 0 1 auto;
  height: 10.0555555556rem;
  justify-content: center; }

.card_public_ticket {
  background-color: white;
  margin: auto;
  max-width: 37.7777777778rem;
  width: 60%; }

/** Tickets **/
.table_tickets_status, .table_tickets_number, .table_tickets_answers, .table_tickets_project, .table_tickets_date, .table_tickets_type, .table_tickets_attachment {
  flex-grow: 0;
  flex-shrink: 0;
  word-break: break-all; }

.table_tickets_status {
  width: 1.6666666667rem; }
  .table_tickets_status span {
    border-radius: 60%;
    display: block;
    height: 0.8888888889rem;
    width: 0.8888888889rem; }

.table_tickets_number {
  width: 3.6111111111rem; }

.table_tickets_request {
  flex-grow: 1;
  flex-shrink: 1; }

.table_tickets_answers {
  font-weight: 400;
  text-align: center;
  width: 3.8888888889rem; }
  .table_tickets_answers span {
    background: url(../img/answer.svg) no-repeat center center;
    display: inline-block;
    height: 1.5555555556rem;
    min-width: 1.7777777778rem; }

.table_tickets_project {
  width: 14.6666666667rem; }

.table_tickets_date {
  width: 5.3333333333rem; }

.table_tickets_note{
  width: 5.3333333333rem; }

.table_tickets_type {
  color: #6BA6EE;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
  width: 2.2222222222rem; }

.table_tickets_attachment {
  width: 1.6666666667rem; }

.table_body_row {
  font-weight: 700; }

.row_read.table_body_row {
  background-color: #EFF3F8;
  font-weight: 400; }

.row_new .table_tickets_status span {
  background-color: #E21414; }

.row_open .table_tickets_status span {
  background-color: #FEA844; }

.row_closed .table_tickets_status span {
  background-color: #38C713; }

.row_suspended .table_tickets_status span {
  background-color: #800080; }

.table_tickets_status, .table_tickets_number, .table_tickets_answers, .table_tickets_project, .table_tickets_date, .table_tickets_type, .table_tickets_attachment { flex-grow: 0; flex-shrink: 0; word-break: break-all; }

.table_tickets_status { width: 2.667rem; }

.table_tickets_status span { border-radius: 50%; display: block; height: 0.889rem; width: 0.889rem; }

.table_tickets_number { width: 3.611rem; }

.table_tickets_request { flex-grow: 1; flex-shrink: 1; }

.table_tickets_answers { font-weight: 400; text-align: center; width: 3.889rem; }

.table_tickets_answers span { background: url(../img/answer.svg) no-repeat center center; display: inline-block; height: 1.556rem; min-width: 1.778rem; }

.table_tickets_project { width: 14.667rem; }

.table_tickets_date { width: 5.333rem; }

.table_tickets_type { color: #1331c7; font-weight: 400; text-align: center; text-decoration: underline; width: 12.222rem; }

.table_tickets_attachment { width: 1.667rem; }

.table_body_row { font-weight: 700; font-size: small}

.row_read.table_body_row { background-color: #EFF3F8; font-weight: 400; }

.row_new .table_tickets_status span { background-color: #E21414; }

.row_open .table_tickets_status span { background-color: #FEA844; }

.row_closed .table_tickets_status span { background-color: #38C713; }

/** Utenti **/
.table_users .table_body_row {
  font-weight: 400; }

.table_tickets_photo, .table_users_name, .table_users_email, .table_users_role, .table_users_answers {
  flex-grow: 0;
  flex-shrink: 0;
  word-break: break-all; }

.table_tickets_photo {
  text-align: center;
  width: 2.7777777778rem; }
  .table_tickets_photo img {
    border-radius: 50%; }
  .table_tickets_photo .placeholder {
    background-color: #1331c7;
    border-radius: 50%;
    color: white;
    display: inline-block;
    height: 2.2222222222rem;
    line-height: 2.2222222222rem;
    width: 2.2222222222rem; }

.table_users_name {
  width: 11.6666666667rem; }

.table_users_email {
  width: 10.5555555556rem; }

.table_users_projects {
  flex-grow: 1;
  flex-shrink: 1; }

.table_users_role {
  width: 6.6666666667rem; }

.table_users_answers {
  font-weight: 400;
  text-align: center;
  width: 3.8888888889rem; }
  .table_users_answers span {
    background: url(../img/answer.svg) no-repeat center center;
    display: inline-block;
    height: 1.5555555556rem;
    min-width: 1.7777777778rem; }

/*** tickets ***/
.tickets {
  font-size: 13px; }
  .tickets .blocks {
    border: "1px solid #aaa";
    background: white;
    border-radius: 8px; }
    .tickets .blocks.padding {
      padding: 10px; }
    .tickets .blocks.margin {
      margin-bottom: 10px; }
  .tickets .form-control.border {
    border-radius: 8px;
    border: "1px solid #aaa";
    height: 40px; }

/*# sourceMappingURL=style.css.map */

.search-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  position: relative;
  height: 100%;
}

#searchForm {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

#inputString {
  flex-grow: 1;
  height: 100%;
  padding: 0 0.888rem;
  font-size: 0.777rem;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

.search_button {
  height: 100%;
  padding: 0 16px;
  background-color: #6BA6EE;
  color: #fff;
  border: 1px solid #6BA6EE;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.search_button i {
  font-size: 1.333rem;
}

/* AUTOCOMPLETE */
#autocomplete-suggestions {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;

  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;

  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;

  display: none;
  z-index: 9999;

  margin: 0;
  padding: 0;

  transition: max-height 0.3s ease;
}

#autocomplete-suggestions li {
  list-style: none;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  color: #333;
  font-size: 14px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#autocomplete-suggestions li:hover {
  background-color: #f0f0f0;
}

#inputString {
  flex-grow: 1;
  height: 100%;
  padding: 0 2.5rem 0 0.888rem;  /* spazio a destra per l'icona */
  font-size: 0.777rem;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
  position: relative;
}

/* Icona info dentro il campo */
.info-icon {
  position: absolute;
  top: 50%;
  right: 60px; /* Regola se hai bisogno di spostarlo un po' */
  transform: translateY(-50%);

  color: #007bff;
  cursor: pointer;

  font-size: 1.2rem; /* aumentato da 1rem */

  /* 🔥 Aggiunto padding invisibile per aumentare l'area cliccabile */
  padding: 6px;
  border-radius: 50%; /* fa in modo che il click sia sempre tondo e "pulito" */

  z-index: 10;
}

.info-icon:hover {
  color: #0056b3;
}