/*divs*/
body {
	margin:0px;
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:10pt !important;
	line-height: 1 !important;
}

#header {
	position: relative;
	height: 44px;
	width:100%;
	background-color: #333;
	background-attachment: scroll;
	background-position: 0% 0%;
	position: fixed;
	top: 0px;
}
.narrow{
	width:320px; 
	margin:auto
}
#submenu, .submenu {
	margin: 10px 0px;
    overflow-x: auto;
    margin-bottom:10px;
    clear:both
}
#submenu .link, #submenu input, #submenu select, #submenu label .link_red_reverse {
    margin-right:5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
}
.submenu .link, .submenu input, .submenu select, .submenu label .link_red_reverse {
    margin-right:5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
}
#subform,.subform {
	margin: 10px 0px;
    overflow-x: auto;
    margin-bottom:10px;
    clear:both
}
#subform .link, #subform input, #subform select, #subform label .link_red_reverse {
    margin-right:5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
    height:25px;

}
.subform .link, .subform input, .subform select, .subform label .link_red_reverse .subform button {
    margin-right:5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;

}
#subform label, input[type=checkbox], input[type=radio] {
    margin-top:5px;
    display:inline;
}
.formtext{
    float:left;
    margin-right:10px;
    margin-top:6px}


#status1 {
	margin:10px 20px;
	float:right;
	color: #ffffff;
	font-size:8pt;
}
#footer {
	width:100%;
	height:30px;
	position:fixed;
	bottom:0px;
	background-color: #000000;
	background-attachment: scroll;
	background-position: 0% 0%;
	position: fixed;
	bottom: 0pt;
	left: 0pt;
    z-index:10;
}
#footer_inner {
	margin-left:20px;
	font-size:8pt;
	padding:10px 0px;
	color:#ffffff
}
.dashboard_outer{width:50%; float:left}
.dashboard_outer_4{width:25%; float:left}
.dashboard_outer_3{width:33%; float:left}
.dashboard_inner{padding:10px; }
#calendar{
     	position:relative;
        z-index: 1;
}

/*formatting*/
h1 {
	font-size:1rem !important;
	font-size:18pt !important;
	font-weight:700 !important;
	margin-bottom:10px;
	margin-top:10px;
	color: #38650e;
    font-family: arial, helvetica, sans-serif;

}
h2 {
	font-size:14pt;
	font-weight:700;
	margin-bottom:6px
}
h3 {
	font-size:13pt;
	font-weight:700;
	margin-bottom:6px
}
h4 {
	font-size:10pt;
	font-weight:700;
	margin-bottom:6px
}
h5 {
	font-size:10pt;
	font-weight:700;
	margin-bottom:0px
}
p {
	font-size:10pt;
	margin-bottom:10px;
}
p.label {
margin:bottom:3px;
}
ul li{
    list-style-type: circle;
}
li {
    margin-left:20px;
}

.right {
	text-align:right
}
.small {
	font-family: verdana;
	font-size: 9px;
	color: #808080;
}
.center {
	text-align: center;
}
.confirm {
	margin-top:3px;
	padding:3px;
}
.warning {
	margin-top:3px;
	padding:3px;
	color:red;
}
.highlight {background-color:#6ec81b; color:#ffffff; padding:3px}
.grab{
    text-align:center;
    vertical-align: middle;
    cursor:grab
}
.grab:active{
    cursor:grabbing
}

/*forms*/
.form {
	margin:10px auto;
	max-width: 400px;
	padding: 20px 12px 10px 20px;
}
.form li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}
.form label {
	margin:0 0 3px 0;
	padding:0px;
	display:block;
	font-weight: bold;
}
input[type=text], input[type=date], input[type=datetime], input[type=number], input[type=search], input[type=time], input[type=url], input[type=email], input[type=password], textarea, select {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 3px;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
  	font-size:10pt !important;
    border-radius: 0.25rem;
    border-width: 1px;
    height: 25px;

}
input[type=text]:focus, textarea:focus, select:focus {
	box-shadow: 0 0 5px 6ec81b;
	border: 1px solid 6ec81b;
	background-color:#e2f8ce
}
input[readonly] {
	background-color:#CCCCCC
}
form input[type=submit], .form input[type=button], input[type="file"]::file-selector-button {
	background: #6ec81b;
	padding: 5px;
	height: 25px;
	border: none;
	color: #000000;
    border-radius: 0.25rem;
    font-size:10pt !important
}
form input[type=submit]:hover, .form input[type=button]:hover {
	background: #38650e;
    color:#ffffff;
}
form .required {
	color:red;
}
.inline-field{
    float:left;
    margin-right:10px;
}

/*buttons*/
input[type=submit], input[type=button] {
	background: #6ec81b;
	padding: 5px;
	border: none;
    margin-right:10px;
    float:left;
	color: #000000;
    border-radius: 0.25rem;

}
input[type=submit]:hover, input[type=button]:hover {
	background: #38650e;
    color:#ffffff;
}
.required {
	color:red;
}
.btn {
    border-radius:0.25 !important;
}
.btn:hover{
    opacity: 0.9;

}

.btn-primary{
	background: #6ec81b;
	color: #ffffff;
    line-height:1;
    padding:5px;
    font-size:10pt;
    border:none;
    }
.btn-warning{
	background: #ff0000;
	color: #ffffff;
    line-height:1;
    padding:5px;
    font-size:10pt;
    border:none;
}

/*table*/
caption{
caption-side: top;
background-color: #38650e;
    border: 0px solid #ffffff;
    text-align: left;
    border-width: 0px 0px 1px 1px;
    font-size: 10pt;
    font-weight: 700;
    color: #ffffff;
    vertical-align: middle;
    padding: 5px;
}
.table {
	margin:0px;
	margin-bottom:10px;
	padding:0px;
	width:100%;
	border:1px solid #38650e;
	border-collapse: collapse;
	border-spacing: 0;
	/*height:100%;*/
}
.table th {
	background-color:#38650e;
	border:0px solid #ffffff;
	text-align:left;
	border-width:0px 0px 1px 1px;
	font-size:10pt;
	font-weight:700;
	color:#ffffff;
	vertical-align:middle;
	padding:5px;
}
.selectable tbody > tr.hover > td, .selectable tbody > tr:hover > td, .selectable tbody > tr:hover + tr.table-childRow > td, .selectable tbody > tr:hover + tr.table-childRow + tr.table-childRow > td, .selectable tbody > tr.even.hover > td, .selectable tbody > tr.even:hover > td, .selectable tbody > tr.even:hover + tr.table-childRow > td, .selectable tbody > tr.even:hover + tr.table-childRow + tr.table-childRow > td {
	background-color: #d9d9d9; cursor: pointer;
}
.selectablegreen tbody > tr.hover > td, .selectable tbody > tr:hover > td, .selectable tbody > tr:hover + tr.table-childRow > td, .selectable tbody > tr:hover + tr.table-childRow + tr.table-childRow > td, .selectable tbody > tr.even.hover > td, .selectable tbody > tr.even:hover > td, .selectable tbody > tr.even:hover + tr.table-childRow > td, .selectable tbody > tr.even:hover + tr.table-childRow + tr.table-childRow > td {
	background-color: #6ec81b; cursor: pointer;
}
.table tr:hover td {
}
.table tr:nth-child(odd) {
	background-color:#e2f8ce;
}
.table tr:nth-child(even) {
	background-color:#ffffff;
}
.table td {
	vertical-align:middle;
	padding:3px;
	font-size:10pt;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.tablewrapper {
	padding:5px;
	width:100%;
	border:1px solid #000000;
	margin-bottom:20px;
}
.tablewrapper td {
	padding:5px;
	vertical-align:top;
}
.tableform {
	background-color:#efefef;
	border: 1px #000000 solid;
	font-size:10pt;
	width:100%;
	float:left
}
.tableform td {
	border:1px solid #000000;
	padding:5px;
	vertical-align:middle
}
.tableform th {
	background-color:#38650e;
	border:0px solid #ffffff;
	text-align:left;
	border-width:0px 0px 1px 1px;
	font-size:10pt;
	font-weight:700;
	color:#ffffff;
	vertical-align:middle;
	padding:8px;
}
.tableform input {
	width:100%;
    border-radius: 0.25rem;

/*	margin:0px;*/
}
.tableform input[type=checkbox]{
	width:15px;
/*	margin:0px;*/
}

.tableform_large th, .tableform_large td  {
    font-size:14pt !important;
}


.tablesorter {
	margin:0px;
	margin-bottom:10px;
	padding:0px;
	width:100%;
/*	border:1px solid #38650e;
*/    border-radius: 0.25rem;

}
.tablesorter table {
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
.tablesorter th {
	background-color:#38650e;
	/*border:0px solid #ffffff;*/
	text-align:center;
/*	border-width:0px 0px 1px 1px;
*/	font-size:10pt;
	font-weight:700;
	color:#ffffff;
	vertical-align:middle;
	padding:5px;
}
.tablesorter thead{
	position:sticky;
    inset-block-start: 0;
}
.tablesorter tr:hover td {
}
.tablesorter tr:nth-child(odd) {
	background-color:#E0E8FF;
}
.tablesorter tr:nth-child(even) {
	background-color:#ffffff;
}
.tablesorter tbody > tr.hover > td, .tablesorter tbody > tr:hover > td, .tablesorter tbody > tr:hover + tr.tablesorter-childRow > td, .tablesorter tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter tbody > tr.even.hover > td, .tablesorter tbody > tr.even:hover > td, .tablesorter tbody > tr.even:hover + tr.tablesorter-childRow > td, .tablesorter tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
	background-color: #d9d9d9;
}
.tablesorter td {
	vertical-align:middle;
	/*border:1px solid #38650e;*/
/*	border-width:0px 1px 1px 0px;
*/	padding:3px;
	font-size:10pt;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.large {
	padding:8px;
	font-size:14pt;
}

.tablesorter td:hover {
	cursor: pointer;
}
.sub_table {
	width: 100%;
/*	border:1px solid #38650e;
*/}
table.filter{
border-collapse: separate; border-spacing: 5px;
}
td.filter {
padding:3px;  
}
/*Datatables override*/
table.dataTable tbody th, table.dataTable tbody td{
    padding:3px;
}
.dataTables_wrapper .dataTables_paginate{
    float:left;
    text-align:left;
    color:#000000 !important;
    padding-top:0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    background-color: #6ec81b;
    color:#000000;
    border-radius: 0.25rem;
    padding: 4px;
    }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    background-color: #38650e;
    color: #000000;
}
.dataTables_wrapper .dataTables_processing{
    top:100px;
    height:100%;
    background-color: rgba(255,255,255,0.5);
    z-index:1000;
}

/*New datatables*/
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
    padding: 3px;
}
.dt-info, .dt-paging, .paging_full, .dt-paging-button{
    float: left;
}


/*Multiselect override*/
.multiselect-input-div input{
    padding:3px;
}
/*filter*/
.filter{
    margin-left:5px; margin-right:5px; float:left;}
.label {
    margin-top:5px;
    display: block
}

	/*Pager*/

/*#pager a {
	color:800080;
	text-decoration:underline
}
#pager a:hover {
	color:800080;
	text-decoration:none
}*/
/*Links & buttons*/
a{
    text-decoration:underline}

a.link, .button.link button.link, #idpc_button,  button.dt-paging-button, button{
	background-color: #6ec81b; /* Green */
	border: none;
	padding: 5px;
    min-height:25px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: black;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    border-radius: 0.25rem;
}
a.link:hover, .button.link:hover button.link:hover{
	background-color: #38650e;
	color: white;
}
a.link_reverse, .button.link_reverse button.link_reverse{
	background-color: #38650e; /* Green */
	border: none;
	color: white;
	padding: 5px;
    min-height:25px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    border-radius: 0.25rem;
}
a.link_reverse:hover, .button.link_reverse:hover button.link_reverse:hover{
	background-color: #6ec81b;
	color: white;
}
a.link_red, button.link_red{
	border: none;
	color: white;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: #ff0000;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
    }
a.link_red:hover, button.link_red:hover{
	background-color: #ff0000;
	color: #ffffff;
}
a.link_red_reverse, button.link_red_reverse{
	border: none;
	color: white;
	background-color: #ff0000;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    border-radius: 0.25rem;
    float: left;
    }
a.link_red:hover, button.link_red:hover {
	color: #ffffff;
}
a.link_orange, button.link_orange {
	border: none;
	color: white;
    padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: #F9BE05;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    border-radius: 0.25rem;
    float: left;
    }
a.link_orange:hover, button.link_orange:hover{
	background-color: #F9BE05;
	color: #ffffff;
}
a.link_orange_reverse, button.link_orange_reverse {
	border: none;
	color: #000000;
	background-color: #F9BE05;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
    }
a.link_orange:hover, button.link_orange:hover {
	color: #ffffff;
}
a.link_blue {
	border: none;
	color: white;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color:#3B5897;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
    }
a.link_blue:hover {
	background-color: #3B5897;
	color: #ffffff;
}
a.link_blue_reverse {
	border: none;
	color: white;
	background-color: #3B5897;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    float: left;
    border-radius: 0.25rem;
    }
a.link_blue:hover {
	color: #ffffff;
}
a.link_green {
	border: none;
	color: white;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: #6ec81b;
	box-sizing:border-box;
    margin-right: 5px;
    margin-bottom:5px;
    border-radius: 0.25rem;
     float: left;     
}
a.link_green:hover {
	background-color: #6ec81b;
	color: #ffffff;
}
a.selector {
	background-color: #6ec81b; /* Green */
	border: none;
	color: white;
	padding: 5px ;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: black;
	text-align:center;
    border-radius: 0.25rem;
}
a.selector:hover {
	background-color: #38650e;
	color: white;
}
a.footerlink {
	color: #6ec81b; /* Green */
	text-decoration: none;
	cursor: pointer;
}
a.footerlink:hover {
	color: white;
}
td a {
	width:100%;
}
.hide{display:none}
.confirm_message {
	background-color:#6ec81b;
	color: #000000;
	font-weight: 700;
	padding: 10px;
	margin:20px;
    line-height:100%;
    border-radius: 0.25rem;

}
.confirm_message a{
	text-decoration:underline
}
.error_message {
	background-color:#ff0000;
	color: #ffffff;
	font-weight: 700;
	padding: 10px;
	margin:20px;
    line-height:100%;
    border-radius: 0.25rem;
}
.error_message a{
	background-color:#ff0000;
	color: #ffffff;
	text-decoration:underline
}
.warning_message {
	background-color:#0000ff;
	color: #ffffff;
	font-weight: 700;
	padding: 10px;
	margin:20px 0;
    line-height:100%;
    border-radius: 0.25rem;
}
.warning_message a{
	background-color:#0000ff;
	color: #ffffff;
	text-decoration:underline
}
.update_message {
	background-color:#F9BE05;
	color: #000000;
	font-weight: 700;
	padding: 10px;
	margin:0px;
    line-height:100%;
    border-radius: 0.25rem;
}
.update_message a{
	background-color:F9BE05;
	color: #000000;
	text-decoration:underline
}

.validation-failed{background-color:#ff0000; color:#ffffff; }
.error {color:#ff0000; font-weight:700}
.confirm {color:#6ec81b; font-weight:700}
.clearfix{clear:both; height:0px}
.printshow{
	display:none !important}
.mailchimp_success	{
	background-color:#6ec81b;
	color: #ffffff;
	padding:3px}
.mailchimp_warning	{
	background-color:#0000ff;
	color: #ffffff;
	padding:3px}
.mailchimp_error	{
	background-color:#ff0000;
	color: #ffffff;
	padding:3px}
.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
@media print {
/* All your print styles go here */
#subform, #submenu, nav, #pager, .printhide, #footer, .top {
	display: none !important;}
.printshow{
	display:block !important}
.dashboard_outer, #content
    {width:180mm;}
#loader {
    background: url("..\images\icons\spinner.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;}

table th, table td  {
    background-color: #eeeeee !important;
    border: 2px solid #ffffff !important;
    text-align: left;
    font-size: 10pt;
    color: #000000 !important;
    vertical-align: middle;
    padding: 4px;
}
table th {
    font-weight: 700;
}
h1{
color: #000000}
.print85{
    width:85% !important;
}

}

@media all and (max-width: 960px) {
.dashboard_outer{width:100%; float:none}
.dashboard_outer_4{width:100%; float:none;}
.dashboard_outer_3{width:100%; float:none;}
.dashboard_inner{padding:10px; }
.tableform {min-width:300px}
/*label{display: block; margin-top:1rem}
*/
}
@media only screen and (min-width: 320px) and (max-width: 959px){
.pos_table {width:100%;}
.pos_table_input {width:100%}
.pos_table_output {width:100%}
.hide-mobile {display:none}

}
@media only screen and (min-width: 960px) and (max-width: 1199px){
.pos_table {width:960px; margin-right:auto; margin-left: auto;}
.pos_table_input {width:450px}
.pos_table_output {width:450px}
}
@media only screen and (min-width: 1200px) and (max-width: 3000px){
.pos_table {width:100%;}
.pos_table_input {width:60%}
.pos_table_output {width:33%}
}
#aqua{
    background-color:#76D7C4;
    color:#ffffff}
#fuchsia{
    background-color:#C39BD3;
    color:#ffffff}
#green{
    background-color:#1ABC9C;
    color:#ffffff}
#blue{
    background-color:#85C1E9;
    color:#ffffff}
#orange, #amber{
    background-color:#F5B041;
    color:#ffffff}
#red{
    background-color:#F1948A;
    color:#ffffff}
#black{
    background-color:#AAB7B8;
    color:#ffffff}
#brown{
    background-color:#E59866;
    color:#ffffff}
#purple{
    background-color:#BB8FCE;
    color:#FFFFFF}
.crossedout{
    text-decoration: line-through !important;
}

.tablet td{
    font-size:16pt;
}
.tablet th{
    font-size:16pt;
}
.tablet input{
    font-size:16pt;
}
.tablescroll{
    overflow-x:scroll;
}

/*filter*/
.filter-collapsible {
    background-color: #38650e;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.filter.active,.filter.collapsible:hover {
    background-color: #000000;
}

.filter-filter {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;

}
.filter-collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 15px;
    color: white;
    float: left;
    margin-left: 5px;
    margin-right: 5px
}

.filter.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.filter-list-group{
    float:left;
    width:25%;
    min-width: 150px;
    padding:10px;
    box-sizing: border-box;

}

.ajaxsuccess {
        border: green solid 2px !important;
        -webkit-animation: fadeinout 1s linear forwards !important;
        animation: fadeinout 1s linear forwards !important;
}

.ajaxfail {
        border: red solid 2px!important;
        -webkit-animation: fadeinout 1s linear forwards !important;
        animation: fadeinout 1s linear forwards !important;
}
.scrollx{
    overflow-x:scroll;
    clear:both
}
@media screen and (max-width: 500px) {
  #footer_details {
    visibility: hidden;
    display: none;
  }
}
.form-control{
    height: 25px;
    padding:3px
}
.dataTables_wrapper{
    min-height:300px;
}
.dataTables_info {
    padding: 5px !important;
}

/*.form-control{
    border-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}*/
.tableform input.datepicker, .datepicker{
    width:100px
}
.tableform input.datetimepicker, .datetimepicker{
    width:125px
}

/*textarea auto grow*/
.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}
.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}
.grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid black;
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

.initials {
    background-color: #000000; /* Green */
    border: none;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 8pt;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 50%;}

.initials a:hover{
    background-color: #6ec81b; /* Green */
    }

.speech-bubble-client {
    position: relative;
    background-color:#6ec81b ;
    color:#000000 ;
    border-radius: .4em;
    padding: 10px;
    width:80%;
    float:left;
    margin-left: auto;
    margin-bottom:20px

}

.speech-bubble-client-from {
float:right;
padding:5px;
text-align:right;
margin-left:auto;
margin-bottom:0;
font-size:8pt;
}
.speech-bubble-client:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top-color: #6ec81b;
    border-bottom: 0;
    border-left: 0;
    margin-left: -0.391em;
    margin-bottom: -0.781em;
}

.speech-bubble-company:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top-color: #38650e;
    border-bottom: 0;
    border-right: 0;
    margin-left: -0.391em;
    margin-bottom: -0.781em;
}

.speech-bubble-company {
    position: relative;
    background-color:#38650e;
    color:#ffffff;
    border-radius: .4em;
    padding: 10px;
    width:80%;
    float:right;
    margin-right: auto;
    margin-bottom:20px
}
.speech-bubble-company-from {
float:left;
padding:5px;
text-align:left;
margin-right:auto;
margin-bottom:0;
font-size:8pt;
}

.speech-bubble-notesx:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top-color: #0000FF;
    border-bottom: 0;
    border-right: 0;
    margin-left: -0.391em;
    margin-bottom: -0.781em;
}

.speech-bubble-notes {
    position: relative;
    background-color:#0000FF !important;
    color:#ffffff !important;
    border-radius: .4em;
    padding: 10px;
    width:100%;
    margin-right: auto;
    margin-bottom:20px
}
.speech-bubble-notes-from {
float:left;
padding:5px;
text-align:left;
margin-right:auto;
margin-bottom:0;
font-size:8pt;
}


/*https://codepen.io/AllThingsSmitty/pen/MyqmdM*/
@media screen and (max-width: 400px) {
    .responsivetable table {
    }

    .responsivetable table thead {
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .responsivetable table tr {
        border-bottom: 20px solid #38650e;
        display: block;
    }

    .responsivetable table td {
        display: block;
        text-align: right;
    }

    .responsivetable table td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

input[required], select[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}


/*Tootip*/
.ui-tooltip, .arrow:after {
        background: black;
        border: 2px solid white;
        opacity:1;
    }
    .ui-tooltip {
        padding: 10px ;
        color: white;
        font:  10p;
        box-shadow: 0 0 7px black;
    }
    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
    }
    .arrow.top {
        top: -16px;
        bottom: auto;
    }
    .arrow.left {
        left: 20%;
    }
    .arrow:after {
        content: "";
        position: absolute;
        left: 20px;
        top: -20px;
        width: 25px;
        height: 25px;
        box-shadow: 6px 5px 9px -9px black;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .arrow.top:after {
        bottom: -20px;
        top: auto;
    }

/*toggle*/
.toggle-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        .toggle-switch input {
            display: none;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 20px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 12px;
            width: 12px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #6ec81b;
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }

#idpc_input, #idpc_dropdown{
    max-width:300px;
    margin-right:10px
}