body {
    margin: auto;
    width: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 70%;
}
/* ------------------------------------------------------ */
/*	typo					  							  */
/* ------------------------------------------------------ */

ul {
    display: block;
    white-space: normal;
    list-style-type: disc;
    list-style-position: inside;
    padding-bottom: 5px;
}

/* ------------------------------------------------------ */
/*	wrapper					   							  */
/* ------------------------------------------------------ */

#wrapper {
    margin: auto;
    text-align: left;
    display: block;
}

/* ------------------------------------------------------ */
/*	header					   							  */
/* ------------------------------------------------------ */

#header {
    clear: both;
    position: relative;
    padding: 10px;
}

/* ------------------------------------------------------ */
/*	content					   							  */
/* ------------------------------------------------------ */

.c {
    width: 100%;
    margin: 0;
    vertical-align: top;
    clear: both;
    overflow: hidden;
    display: block;
}

    .c:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

/* ------------------------------------------------------ */
/*	structure	column size								  */
/* ------------------------------------------------------ */

.left15 {
    float: left;
    width: 15%;
    margin: 0px;
    display: block;
}

.left20 {
    float: left;
    width: 20%;
    margin: 0px;
    display: block;
}

.left25 {
    float: left;
    width: 25%;
    margin: 0px;
    display: block;
}

.left30 {
    float: left;
    width: 30%;
    margin: 0px;
    display: block;
}

.left33 {
    float: left;
    width: 33%;
    margin: 0px;
    display: block;
}

.left40 {
    float: left;
    width: 40%;
    margin: 0px;
    display: block;
}

.left50 {
    float: left;
    width: 50%;
    margin: 0px;
    display: block;
}

.left55 {
    float: left;
    width: 55%;
    margin: 0px;
    display: block;
}

.left60 {
    float: left;
    width: 60%;
    margin: 0px;
    display: block;
}

.left66 {
    float: left;
    width: 66%;
    margin: 0px;
    display: block;
}

.left70 {
    float: left;
    width: 70%;
    margin: 0px;
    display: block;
}

.left75 {
    float: left;
    width: 75%;
    margin: 0px;
    display: block;
}

.left80 {
    float: left;
    width: 80%;
    margin: 0px;
    display: block;
}

.right15 {
    width: 15%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right20 {
    width: 20%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right25 {
    width: 25%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right30 {
    width: 30%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right33 {
    width: 33%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right40 {
    width: 40%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right50 {
    width: 50%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right60 {
    width: 60%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right66 {
    width: 66%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right70 {
    width: 70%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right75 {
    width: 75%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right80 {
    width: 80%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.right85 {
    width: 85%;
    margin: 0px;
    float: right;
    text-align: left;
    display: block;
}

.center33 {
    width: 33%;
    float: left;
    margin: auto;
}

.center40 {
    width: 40%;
    float: left;
    margin: auto;
}

.center50 {
    width: 50%;
    float: left;
    margin: auto;
}

.center60 {
    width: 60%;
    float: left;
    margin: auto;
}

/* ------------------------------------------------------ */
/*	container							   */
/* ------------------------------------------------------ */

.container {
    height: 100%;
}

/* ----------------------------------------------------- */
/*	footer      	  				  */
/* ----------------------------------------------------- */

#footer {
    clear: both;
    position: relative;
}

/* ----------------------------------------------------- */
/*	Ticket Messages Bubble      	  				  */
/* ----------------------------------------------------- */

.other-message {
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:top 100%:bottom) */
    padding: 1em;
    clip-path: polygon(0 100%,100% 100%,100% 0,0 0, 0 max(0%,var(--p) - var(--b)/2), calc(-1*var(--h)) var(--p), 0 min(100%,var(--p) + var(--b)/2));
    border-image: fill 0//0 0 0 var(--h) linear-gradient(-315deg, #e8dede, #e8dede); /* the gradient */
}

.my-message {
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:top 100%:bottom) */
    padding: 1em;
    clip-path: polygon(100% 100%,0 100%,0 0,100% 0, 100% max(0%,var(--p) - var(--b)/2), calc(100% + var(--h)) var(--p), 100% min(100%,var(--p) + var(--b)/2));
    border-image: fill 0//0 var(--h) 0 0 linear-gradient(-30deg, #dbeae7, #dbeae7); /* the gradient */
}

.internal-message {
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:top 100%:bottom) */
    padding: 1em;
    clip-path: polygon(100% 100%,0 100%,0 0,100% 0, 100% max(0%,var(--p) - var(--b)/2), calc(100% + var(--h)) var(--p), 100% min(100%,var(--p) + var(--b)/2));
    border-image: fill 0//0 var(--h) 0 0 linear-gradient(-30deg, #e6e5e5, #e6e5e5); /* the gradient */
}