body {
    background-color: var(--main-bg-color);
    margin: 0px ;
    font-family: var(--font-family);
}


.reload-css-0009 {

    display: none;
}

.page-header {
    height: 40px;
    margin-top: 0px;
    text-align: center;
    padding: 0;
    margin-left: 0px;
    width: -webkit-fill-available;
    width: -moz-available;

    position: fixed;
    z-index:18;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    font-size: 16pt;
    padding-top: 10px;
    text-decoration: none;
    font-family: 'Arial';
    font-weight: bold;
}

.nav-header {
  width: 100%;
  background-color: var(--navbar-bg2-color);
  height: 40px;

}

/* > cibler ul enfant direct de nav */
.nav-header > ul{
  margin: 0px;
  padding: 0px;
}

.nav-header > ul > li {
  float: left;
  position: relative;
  height: 40px;
}

.nav-header > ul::after {
  content: "";
  display: block;
  clear: both;
}

.nav-header li{
  list-style-type: none;
}

.nav-header li:hover .submenu {
  display: inline-block;
  position: absolute;
  top: 40px;
  left: 0px;
  padding: 0px;
  z-index: 100;
}

.nav-header li:hover .submenu-2 {
  display: inline-block;
  position: absolute;
  top: 40px;
  left: 0px;
  padding: 0px;
  z-index: 100;
}

.nav-header a {
  display: inline-block;
  text-decoration: none;
}

.nav-header > ul > li > a {
  padding: 10px 20px;
  color: var(--navbar-text-color);

}

.nav-header > ul > li:hover  a {
  padding: 10px 20px;
}



.submenulink {
    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    padding-bottom: 5px !important;
}


.link-selected {
    color: chocolate;
    font-weight: bold;
    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    padding-bottom: 5px !important;
}

.link-not-selected {
    color: #0e76a8;

    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    padding-bottom: 5px !important;
}




.page-headerright {
    height: 100%;
    width: 40px;

    right: 0;
    margin-top: 40px;

    text-align: center;
    padding: 0;
    position: fixed;
    z-index:17;

    background-color: var(--navbar-bg2-color);
    /*align-content: center;*/
}



.nav-headerright {

    margin-top: 20px;
}








.page-left {

    background-color: var(--page-bg-color);

    margin-top: 0px;
    margin-left: 0px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;

    width: 800px;

    position: fixed;
    z-index:2;

    border-right-color: var(--trigger-up-color);
    border-right-width: 5px;
    border-right-style: inset;
}

.page-left table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
}

.page-left td.tpDate {
    font-weight: bold;
}

.page-left table, tr, td{
    /* padding:0 !important;
    margin:0 !important; */
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}



.page-left-min {

    background-color: var(--page-bg-color);

    margin-top: 0px;
    margin-left: 0px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;

    width: 50px;

    position: fixed;
    z-index:1;

    border-right-color: var(--trigger-up-color);
    border-right-width: 5px;
    border-right-style: inset;
}



.page-right {

    background-color: var(--main-bg-color);

    margin-top: 0px;
    margin-left: 820px;
    margin-right: 30px;

    height: -webkit-fill-available;
    width: -webkit-fill-available;

    height: -moz-available;
    width: -moz-available;

}

.page-right table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
}

.page-right td.tpDate {
    font-weight: bold;
}

.page-right table, tr, td{
    /* padding:0 !important;
    margin:0 !important; */
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}











.page-nav-left-content {

    background-color: var(--page-bg-color);

    margin-top: 20px;
    margin-left: 0px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
    width: 800px;

    position: fixed;
    z-index:2;

    display: none;

    border-right: var(--page-border-color);
    border-right-width: 5px;
    border-right-style: double;
}

.page-nav-right-content {

    background-color: var(--page-bg-color);

    margin-top: 20px;
    margin-right: 0px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
    width: 800px;

    position: fixed;
    z-index:2;
    right: 0;

    display: none;

    border-left: var(--page-border-color);
    border-left-width: 5px;
    border-left-style: double;
}











.page-nav-right-content-mess {

    background-color: var(--page-bg-color);

    margin-top: 20px;
    margin-right: 0px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
    width: 800px;

    position: fixed;
    z-index:14;
    right: 0;

    display: none;

    border-left-color: var(--trigger-up-color);
    border-left-width: 5px;
    border-left-style: outset;
}

.page-nav-left-content-mess {

    background-color: var(--page-bg-color);

    margin-top: 20px;
    margin-left: 0px;

    padding-left: 10px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
    width: 800px;

    position: fixed;
    z-index:14;
    left: 0;

    display: none;

    border-right-color: var(--trigger-up-color);
    border-right-width: 5px;
    border-right-style: inset;
}


.page-nav-left-content-mess-v1 {

    background-color: var(--page-bg-color);

    margin-top: 20px;
    margin-left: 0px;

    padding-left: 10px;

    height: -webkit-fill-available;
    height: -moz-available;
    height: 100%;
    width: 790px;

    position: fixed;
    z-index:14;
    left: 0;

    display: none;

}


.nav-tab {
        border-top: var(--page-border-color);
        border-top-width: 5px;
        border-top-style: double;

        height: 100%;
        position: fixed;
        width: 800px;
        background-color: var(--page-tabcontent-color);
}




.page-nav table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
}

.nav-tab-head {
    -webkit-border-horizontal-spacing: 3px;
    -webkit-border-vertical-spacing: 0px;
}

.nav-tab-head-selected {
    border-width: 2px 2px 0px;
    background-color: var(--navbar-accent);
    border-style: solid;
    border-color: var(--page-border-color);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;

}

.nav-tab-head-unselected {
    border-width: 2px 2px 0px;
    background-color: white;
    border-style: solid;
    border-color: gray;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
}




.notif-tab-head-selected {
    border-width: 2px 2px 2px;
    background-color: var(--navbar-accent);
    border-style: solid;
    border-color: var(--page-border-color);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;

}

.notif-tab-head-unselected {
    border-width: 2px 2px 2px;
    background-color: white;
    border-style: solid;
    border-color: gray;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
}











.page-content {
    padding-top: 40px;
    padding-right: 60px;
    padding-left: 10px;

    /* position: absolute; */
    z-index: 1;
}

.page-content-messages {
    padding-top: 40px;
    padding-right: 20px;
    padding-left: 20px;

    /* position: absolute; */
    z-index: 1;
}

.page-content table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
    /*box-shadow: 3px 3px 9px #919191;*/
}

.page-content td.tpDate {
    font-weight: bold;
}

.page-content table, tr, td{
    /* padding:0 !important;
    margin:0 !important; */
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* margin-left: 5px;
    margin-right: 5px; */
}





.page-content-home {
    padding-top: 40px;
    padding-right: 10px;
    padding-left: 10px;

    /* position: absolute; */
    z-index: 1;
}

.page-content-home table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
}

.page-content-home td.tpDate {
    font-weight: bold;
}

.page-content-home table, tr, td{
    /* padding:0 !important;
    margin:0 !important; */
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* margin-left: 5px;
    margin-right: 5px; */
}









.page-content-messv2 {
    padding-top: 40px;
    padding-right: 60px;
    padding-left: 40px;

    /* position: absolute; */
    z-index: 1;
}

.page-content-messv2 table {
    /* font-size: small; */
    border: 0px;
    border-spacing: 0px;
}

.page-content-messv2 td.tpDate {
    font-weight: bold;
}

.page-content-messv2 table, tr, td{
    /* padding:0 !important;
    margin:0 !important; */
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* margin-left: 5px;
    margin-right: 5px; */
}










.list-form {
    position: fixed;
    z-index:1;

    background-color: #d8d8d8;
    width: -webkit-fill-available;
    width: -moz-available;

    border-bottom: 3px solid #606060;
}

.list-table {
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.content-notlist {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}




.list-form-alt {

    height: 190px;

    position: fixed;
    z-index:1;

    background-color: #d8d8d8;
    width: -webkit-fill-available;
    width: -moz-available;

    border-bottom: 3px solid #606060;
}

.list-table-alt {
  padding-top: 200px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}



.page-content .bigselect {
  width: 500px;
}

.page-content select {
    width: 250px;
}

.page-content ul {
    list-style-type: none;
    margin: 5px;
    padding: 5px;
}

.buttonList {
  margin: 1px;
  padding: 1px;
  width: -webkit-fill-available;
  width: -moz-available;
  font-size: smaller;
}


input.readonly {
  background: #a3a3a3;
}

/* label {
  display: block;
  width: 350px;
} */

input {
  width: 250px;
}

.input_checkbox{
  width: 25px;
}

.buttonsmall {
  width: 150px;
  margin-left: 8px;
}


.biginput {
  width: 450px;
}

.biggerinput {
  width: 900px;
}






nav {
  width: 100%;
  background-color: #555;
  height: 50px;

}

/* > cibler ul enfant direct de nav */
nav > ul{
  margin: 0px;
  padding: 0px;
}

nav > ul > li {
  float: left;
  position: relative;
  height: 45px;
}

nav > ul::after {
  content: "";
  display: block;
  clear: both;
}

nav li{
  list-style-type: none;
}

nav li:hover .submenu {
  display: inline-block;
  position: absolute;
  top: 45px;
  left: 0px;
  padding: 0px;
  z-index: 100;
}

nav a {
  display: inline-block;
  text-decoration: none;
}

nav > ul > li > a {
  padding: 10px 20px;
  color: #FFF;

}

nav > ul > li:hover  a {
  padding: 5px 20px;
}


.expert-user{
    background-color: var(--nbmsg-ok-color);
}



.td-free{
    background-color: var(--status-free-color);
}

.td-affected{
    background-color: var(--status-affected-color);
}

.td-closed{
    background-color: var(--status-closed-color);
}

.td-received{
    background-color: var(--status-received-color);
}

.td-restarted{
    background-color: var(--status-restarted-color);
}

.td-in-progress{
    background-color: var(--status-in-progress-color);
}

.td-waiting-customer{
    background-color: var(--status-waiting-customer-color);
}

.td-waiting-support{
    background-color: var(--status-waiting-support-color);
}

.td-waiting-supplier{
    background-color: var(--status-waiting-supplier-color);
}

.td-waiting-technical{
    background-color: var(--status-waiting-technical-color);
}

.td-responded{
    background-color: var(--status-responded-color);
}

.td-historized{
    background-color: var(--status-historized-color);
}

.td-msgnb-ok{
    background-color: var(--nbmsg-ok-color);
}
.td-msgnb-warning{
    background-color: var(--nbmsg-warning-color);
}
.td-msgnb-ko{
    background-color: var(--nbmsg-ko-color);
}



.td-closing-comment{
    background-color: var(--closing-color);
}

.td-comment{
    background-color: var(--comment-color);
}


.td-idontknow{
    background-color: var(--status-idk-color);
}


.td-timestop{
    background-color: var(--status-timestop-color);
}
.td-first-timestop{
    background-color: var(--status-first-timestop-color);
}


.td-wait-ok{
    background-color: var(--wait-ok-color);
}
.td-wait-warning{
    background-color: var(--wait-warning-color);
}
.td-wait-ko{
    background-color: var(--wait-ko-color);
}
.td-wait-fatal{
    background-color: var(--wait-fatal-color);
}






.td-fraud-0{
    background-color: var(--fraud-0-color);
}

.td-fraud-1{
    background-color: var(--fraud-1-color);
}

.td-fraud-2{
    background-color: var(--fraud-2-color);
}

.td-fraud-3{
    background-color: var(--fraud-3-color);
}





.td-head-accent-light{
    background-color: var(--td-accent-light-bg-color);
    color : var(--td-accent-light-text-color);
    font-size: small;
}

.td-head-accent-dark{
    background-color: var(--td-accent-dark-bg-color);
    color : var(--td-accent-dark-text-color);
    font-size: small;
}

.td-head-accent-internal{
    background-color: var(--td-accent-internal-bg-color);
    color : var(--td-accent-internal-text-color);
    font-size: small;
}

.td-head-accent-calendar{
    background-color: var(--td-accent-calendar-bg-color);
    color : var(--td-accent-calendar-text-color);
    font-size: small;
}


.td-head-accent-forward{
    background-color: var(--td-accent-forward-bg-color);
    color : var(--td-accent-forward-text-color);
    font-size: small;
}

.td-head-accent-server-error{
    background-color: var(--td-accent-server-error-bg-color);
    color : var(--td-accent-server-error-text-color);
    font-size: small;
}

.scrolldiv-types {
    overflow: scroll;
    overflow-x: hidden;
    height: calc(100% - 270px);
}

.scrolldiv-customer {
    overflow: scroll;
    overflow-x: hidden;
    /*height: calc(100% - 230px);*/
    height: 600px;
}

.scrolldiv-user {
    overflow: scroll;
    overflow-x: hidden;
    /*height: calc(100% - 230px);*/
    height: 600px;
}




.menu-title{
  float: left;
  position: relative;
  height: 10px;
  padding: 10px 20px;
  color: #FFF;
}

.menu-filter{
  float: left;
  position: relative;
  height: 10px;
  padding: 10px 20px;
  color: greenyellow;
}

.menu-title:hover{
  padding: 10px 20px;
}

.menu-header:hover{
  /*border-top: 5px solid var(--navbar-accent);*/
  background-color: var(--navbar-accent-trans);
}

.menu-header .submenu{
  background-color: var(--navbar-accent);
}




.menu-image{

    padding-left: 16px;
    padding-right: 16px;
    padding-top: 3px;

}


.menu-image:hover{

    background-color: var(--navbar-accent-trans);

}


.menu-image-2{

    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;

}


.menu-image:hover{

    background-color: var(--navbar-accent-trans);

}

.submenu{
  display: none;
}

.submenu li{
  border-bottom: 1px solid white;
}

.submenu li:hover{
  background-color: #606060;
}

.submenu li a{
  padding: 15px 30px;
  font-size: 16px;
  color: var(--navbar-submenu-text-1);
  width: 300px;
}

.submenu li:hover a{
  color: var(--navbar-submenu-text-2);
  font-weight: bold;
}

/* ── Flyout sous-sous-menu (apparition à droite) ── */
.submenu li.has-submenu {
  position: relative;
}

.submenu li.has-submenu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.submenu li.has-submenu > a::after {
  content: '▶';
  font-size: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

.submenu-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 200;
  background-color: var(--navbar-accent);
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 220px;
}

.submenu li.has-submenu:hover > .submenu-flyout {
  display: block;
}

.submenu-flyout li {
  border-bottom: 1px solid white;
}

.submenu-flyout li:hover {
  background-color: #606060;
}

.submenu-flyout li a {
  display: block;
  padding: 15px 30px;
  font-size: 16px;
  color: var(--navbar-submenu-text-1);
  width: 220px;
  box-sizing: border-box;
  text-decoration: none;
}

.submenu-flyout li:hover a {
  color: var(--navbar-submenu-text-2);
  font-weight: bold;
}








.submenu-2{
  display: none;
}

.submenu-2 li{
  border-bottom: 1px solid white;
}

.submenu-2 li:hover{
  background-color: #606060;
}

.submenu-2 li a{
  padding: 15px 30px;
  font-size: 16px;
  color: #222538;
  width: 700px;
}

.submenu-2 li:hover a{
  color: #EEE;
  font-weight: bold;
}


















.submenu-filter{
  background-color: var(--navbar-filter-list);
}
.submenu-manage{
  background-color: var(--navbar-filter-config);
}



.action_form {
  text-align: center;
}






.pagination {
  display: block;
  margin-block-start: 5px;
  margin-block-end: 5px;
  margin-inline-start: 5px;
  margin-inline-end: 5px;
  padding-inline-start: 5px;
  margin-bottom: 30px;
}

.pagination li {
  color: black;
  float: left;
  padding: 2px 8px;
  text-decoration: none;
  border: 1px solid var(--tablesorter-header-bg-color);
  background-color: var(--tablesorter-bg-color);
  list-style-type: none;
}

.pagination li.active {
  background-color: var(--tablesorter-header-bg-color);
  color: white;
  border: 1px solid var(--tablesorter-header-bg-color);
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}













/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */

  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  z-index: 20; /* Sit on top */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: var(--td-accent-dark-bg-color);
  color: var(--td-accent-dark-text-color);
  text-align: center;
}

/* Modal Body */
.modal-body {
    padding: 2px 16px;
}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: var(--navbar-accent);
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: var(--main-bg-color);
  margin: 5% auto;
  padding: 0;
  /* border: 1px solid #888; */

  width: 40vw;
  height: min-content;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}







/* input[type="file"] {
    display: none;
} */
.custom-file-upload {
    cursor: pointer;
}



.hide_file{
    display: none;
}



























.btn {
	border-radius:12px 0 12px 0;
  border: 2px solid #959595;
  color: #4a4a4a;
	font:bold 12px 'Source code pro', Calibri, serif;
  padding: 5px;
  margin: 3px;
  width: -webkit-fill-available;
  width: -moz-available;
}

.btn_mini {
	border-radius:12px 0 12px 0;
  border: 2px solid #959595;
  color: #4a4a4a;
	font:bold 12px 'Source code pro', Calibri, serif;
  padding: 5px;
  margin: 3px;
}

.btn_grey {
	background: #aaaaaa;
}
.btn_lgrey {
	background: #eeeeee;
}
.btn_blue {
	background: #93ceff;
}
.btn_pink {
	background: #f9abe5;
}
.btn_red {
	background: #ff9d8e;
}
.btn_green {
	background: #c9fcdc;
}
.btn_yellow {
	background: #f9ff8e;
}
.btn_purple {
	background: #bbabf9;
}
.btn_orange {
	background: #ffc88e;
}

.action_form_inline {
  text-align: center;
  display: inline;
}


.td-blue{
    background-color: #a9ecf9;
}

.td-yellow{
    background-color: #f9ff8e;
}

.td-green{
    background-color: #b1ff8e;
}

.td-orange{
    background-color: #ffc88e;
}

.td-red{
    background-color: #ff9d8e;
}

.td-pink{
    background-color: #f9abe5;
}

.td-purple{
    background-color: #bbabf9;
}

.td-grey{
    background-color: #aaaaaa;
}

.td-white{
    background-color: #ffffff;
}

.tr-one{
    background-color: #F0F0F0;
}

.tr-two{
    background-color: #dddddd;
}



.tr-one-b{
    background-color: #d4fae3;
}

.tr-two-b{
    background-color: #c1e3ce;
}

.tr-one-a{
    background-color: #f6e5ff;
}

.tr-two-a{
    background-color: #decfe6;
}




.tr-head{
    background-color: #a8b1c1;
}

.tr-head-2{
    background-color: #d0dbed;
}

.tr-one-2{
    background-color: #f4ffff;
}
.tr-one-sub-1{
    background-color: #c9e8e8;
}

.tr-one-sub-2{
    background-color: #e5ffff;
}


.tr-two-2{
    background-color: #fffef4;
}
.tr-two-sub-1{
    background-color: #ede8cb;
}
.tr-two-sub-2{
    background-color: #fffbe0;
}



















.td-yellow-2{
    background-color: #fbfcd9;
}

.td-green-2{
    background-color: #d4fae3;
}

.td-orange-2{
    background-color: #ffefde;
}

.td-red-2{
    background-color: #ffe3e0;
}

.td-pink-2{
    background-color: #ffe3f7;
}





.td-docker-1-1{
    background-color: #cae2e6;
}
.td-docker-1-2{
    background-color: #b4cbcf;
}
.td-docker-2-1{
    background-color: #ebe4ce;
}
.td-docker-2-2{
    background-color: #cfcab8;
}


.td-docker-status-green-1{
    background-color: #b1ff8e;
}
.td-docker-status-green-2{
    background-color: #9be07b;
}
.td-docker-status-red-1{
    background-color: #ff9d8e;
}
.td-docker-status-red-2{
    background-color: #ed9182;
}
.td-docker-status-yellow-1{
    background-color: #fff38a;
}
.td-docker-status-yellow-2{
    background-color: #ede282;
}

.tr-dark{
    background-color: #777777;
    color: white;
}


option:disabled {
    color: #ff9d8e;
}



.trigger-image {
    position: absolute;
    top: 40px;
}











.left-trigger-1 {
    position: fixed;
    left: 0;

    z-index: 13;
    top: 30%;
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;
    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;

}

.left-trigger-2 {
    position: fixed;
    left: 0;

    z-index: 13;
    top: calc(30% + 120px);
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;
    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;

}


.left-trigger-3 {
    position: fixed;
    left: 0;

    z-index: 13;
    top: calc(30% + 240px);
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;
    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;

}

.left-trigger-4 {
    position: fixed;
    left: 0;

    z-index: 13;
    top: calc(30% + 360px);
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;
    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;

}








.left-trigger-1-up {
    position: fixed;
    left: 810px;

    display: none;

    z-index: 15;
    top: 30%;
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;
}

.left-trigger-2-up {
    position: fixed;
    left: 810px;

    display: none;

    z-index: 15;
    top: calc(30% + 120px);
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;
}

.left-trigger-3-up {
    position: fixed;
    left: 810px;

    display: none;

    z-index: 15;
    top: calc(30% + 240px);
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;
}

.left-trigger-4-up {
    position: fixed;
    left: 810px;

    display: none;

    z-index: 15;
    top: calc(30% + 360px);
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-right: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 0px 50px 50px 0px;
}





























.right-trigger {
    position: fixed;
    right: 0;

    z-index: 13;
    top: 40%;
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;

    border-left: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 50px 0px 0px 50px;
}

.right-trigger-2 {
    position: fixed;
    right: 0;

    z-index: 13;
    top: calc(40% + 120px);
    height: 100px;
    background-color: var(--trigger-color);
    width: 20px;

    border-left: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 50px 0px 0px 50px;
}




.right-trigger-up {
    position: fixed;
    right: 800px;

    display: none;

    z-index: 15;
    top: 40%;
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-left: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 50px 0px 0px 50px;
}

.right-trigger-2-up {
    position: fixed;
    right: 800px;

    display: none;

    z-index: 15;
    top: calc(40% + 120px);
    height: 100px;
    background-color: var(--trigger-up-color);
    width: 20px;

    border-left: dotted;
    border-color: var(--td-accent-dark-bg-color);

    border-radius: 50px 0px 0px 50px;
}




.person_from{
  background-color: var(--back-person-from);
}

.person_to{
  background-color: var(--back-person-to);
}

.person_cc{
  background-color: var(--back-person-cc);
}

.person_bcc{
  background-color: var(--back-person-bcc);
}






.trumbowyg-editor table {
    width: 100%;
    box-shadow: 0px 0px;
}









div.scroll {
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}


.bubble-mess-1-to {
    width: 85%;

    margin-right: 0;
    margin-left: auto;
}

.bubble-mess-1-internal {
    width: 85%;
}

.bubble-mess-1-from {
    width: 85%;
}


.button-reply {

    display: contents;
    font-size: x-large;

}


.bubble-mess-1-home {
    /*box-shadow: 3px 3px 9px #919191;*/

    width: 90% !important;

    margin-left: 5% !important;
    margin-right: 5% !important;

    /*background-color: var(--td-accent-dark-bg-color);*/
}

.reply_inter {
    display: none;
}

.comment_div {

}