/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.cimso-off-canvas.cimso-active {visibility: visible;transition-delay: 0s;pointer-events: auto;}
.cimso-off-canvas {overflow-x: hidden;overflow-y: auto;visibility: hidden;position: fixed;top: 0;left: 0;right: 0;bottom: 0;transition: visibility 0s linear 0.525s;transition-delay: 0.525s; pointer-events: none;z-index: 99999998;}
.cimso-7.cimso-off-canvas .cimso-off-canvas-bg {background-color: rgba(0,0,0,0.75);}
.cimso-off-canvas.cimso-active .cimso-off-canvas-bg {opacity: 1;}
.cimso-off-canvas-bg {display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;z-index: 1;transform: translate3d(0, 0, 0);transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.cimso-7.cimso-off-canvas .cimso-off-canvas-close {width: calc(1em * 2);height: calc(1em * 2);font-size: 1.5em;color: rgba(0,0,0,0.5);}
.cimso-off-canvas.cimso-active .cimso-off-canvas-close {opacity: 1;transform: scale(1);}
.cimso-off-canvas-close-right {right: 0;}
.cimso-off-canvas-close {display: block;position: absolute;top: 0;margin: 0;border: 0;padding: 0;line-height: 1;text-align: center;background-color: transparent;opacity: 0;transform: scale(0); transition-duration: 0.3s, 0.5s, 0.5s;transition-property: color, opacity, transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);z-index: 3;}
.cimso-7.cimso-off-canvas .cimso-off-canvas-content {max-width: 24em;padding: calc(1.5em * 2);background-color: #ffffff;box-shadow: 0em 0em 2em 0em rgba(0,0,0,0.25);}
.cimso-off-canvas.cimso-active .cimso-off-canvas-content {transform: translate3d(0, 0, 0);}
.ps {overflow: hidden !important;overflow-anchor: none;touch-action: auto;-ms-overflow-style: none;-ms-touch-action: auto;}
.cimso-off-canvas-content-right {right: 0;transform: translate3d(115%, 0, 0);}
.cimso-off-canvas-content {position: absolute;top: 0;bottom: 0;width: 100%;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);z-index: 2;}

.cimso-info-message {border-radius: 5px; background-color: #efefef; padding: 10px;font-size: 0.85rem;}

form.cimso-support label { font-size: 90%; }
form.cimso-support .form-field, form.cimso-support-upload .form-field {margin-bottom: 5px; }

form.cimso-support input[type=text], form.cimso-support input[type=email], form.cimso-support input[type=file], .form-field textarea { width: 100%; }
/* form.cimso-support-upload, .cimso-support-info-message, .cimso-support-success-message, .cimso-support-error-message { display: none; } */
.cimso-support-info-message, .cimso-support-success-message, .cimso-support-error-message { display: none; }

#cimso-off-canvas-support h5 { margin-top: 0; font-size: 1.5rem; }
.cimso-support-info-message, .cimso-support-success-message, .cimso-support-error-message { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;  border-left-color: transparent; border-radius: .25rem; }
.cimso-support-info-message { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.cimso-support-success-message { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.cimso-support-error-message { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

.form-hidden {display: none;border: 1px solid #000; padding: 5px 10px; margin-top: 10px;}
a.open-ticket-form {cursor: pointer;display: flex; flex-flow: row wrap;justify-content: space-between;align-items: center;border: 1px solid #000;background-color: #efefef; padding: 5px 10px;font-weight: bold;}

.single-ticket-header-container {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.support-tickets-list {width: 100%; max-width: 1199px;}
.support-tickets-list hr {margin: 0 0 2.313rem 0;border-top: 1px solid #000;}
.cs-response { padding: 5px 10px;border-bottom: 1px solid #000; }
.client-response {background-color: #b3ccb5;}
.support-response {background-color: #efefef;}

.single-ticket-footer {background-color: #fff;margin-top: 10px;border: 1px solid #000;}
.stf-header {background-color: #efefef; padding: 5px 10px;border-bottom: 1px solid #000;}
.stf-container {background-color: #efefef; background-color: #fff; padding: 5px 10px;}
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}


#table_id_wrapper {margin-top: 45px;}
#table_id_wrapper table { max-width: 100%; }
#table_id_wrapper table .text-center {text-align: center;}

@media (max-width: 700px) {
  
  #table_id_wrapper table .text-center {text-align: left;}
  #table_id_wrapper table .btn-cimso-right { text-align: right; }
  #table_id_wrapper thead {
    position: absolute;
    left: -9999px;
    overflow: hidden;
    width: 0px;
    height: 0px;
    
  } 
  
  #table_id_wrapper tr, #table_id_wrapper td, #table_id_wrapper th, #table_id_wrapper thead, #table_id_wrapper tbody, #table_id_wrapper table {
    display: block;
  }
  
  #table_id_wrapper tbody tr:nth-child(2n+1) {
    background-color: #efefef;
    
  }
  
  #table_id_wrapper tbody tr td::before {
    display: inline-block;
    width: 25%;
    min-width: 100px;
    border-right: 2px dotted #999;
    margin-right: 10px;
    font-weight: bold;
    
  } 

  #table_id_wrapper tbody tr td::before {
    content: attr(data-title);
  }

}