/*  File Input customisations */
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
  width:400px;
}
.custom-file-input::before {
  content: 'Click to Select a File or drag and drop one here';
  display: inline-block;
  /*background: linear-gradient(top, #f9f9f9, #e3e3e3);*/
  background-color:red;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 15px 18px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  /*text-shadow: 1px 1px #fff;*/
  color:#FFFFFF;
  font-weight: 700;
  font-size: 10pt;
  width:400px;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

/* end file input */


.sticky{

 position: -webkit-sticky;
 position: sticky;
 top:0;
}

/* data table setup */
.styled-table {
    border-collapse: collapse;
    border:1pt solid #CCCCCC;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th{
    /*
    background-color: #5c8342;
    color: #F1F1F1;*/
 position: -webkit-sticky;
 position: sticky;
 top:0;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    /*background-color: #f3f3f3;*/
    background-color: #daeacf;
}

.styled-table tbody tr:first-of-type {
    border-bottom: 2px solid #84bc5f;
}
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #84bc5f;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

.nopadding {
    padding: 0px 0px !important;

}

/* end data tables setup */



/* data table setup */
.styled-tablecompact {
    border-collapse: collapse;
    border:1pt solid #CCCCCC;
    margin: 0px 0;
    font-size: 0.7em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-tablecompact thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    margin: 2px;
}

.styled-tablecompact th{
 position: -webkit-sticky;
 position: sticky;
 top:0;
}
.styled-tablecompact th,
.styled-tablecompact td {
    padding: 2px 2px;
}

.styled-tablecompact tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-tablecompact tbody tr:nth-of-type(even) {
    background-color: #daeacf;
}

.styled-tablecompact tbody tr:first-of-type {
    border-bottom: 2px solid #84bc5f;
}
.styled-tablecompact tbody tr:last-of-type {
    border-bottom: 2px solid #84bc5f;
}

.styled-tablecompact tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* .styled-tablecompact tbody td:first-child {
  position: sticky;
  left: 0;
  z-index:1;
}*/
 .styled-tablecompact tbody td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index:1;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
}



.styled-tablecompactform {
    border-collapse: collapse;
    border:1pt solid #CCCCCC;
    margin: 0px 0;
    font-size: 0.7em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-tablecompactform thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    margin: 2px;
}

.styled-tablecompactform th{
 position: -webkit-sticky;
 position: sticky;
 top:0;
}
.styled-tablecompactform th,
.styled-tablecompactform td {
    padding: 2px 2px;
}

.styled-tablecompactform tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-tablecompactform tbody tr:nth-of-type(even) {
    background-color: #daeacf;
}

.styled-tablecompactform tbody tr:first-of-type {
    border-bottom: 2px solid #84bc5f;
}
.styled-tablecompactform tbody tr:last-of-type {
    border-bottom: 2px solid #84bc5f;
}

.styled-tablecompactform tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* .styled-tablecompact tbody td:first-child {
  position: sticky;
  left: 0;
  z-index:1;
}*/
 .styled-tablecompactform tbody td:nth-child(3) {
  position: sticky;
  left: 0;
  z-index:1;
}



.styled-tableDates td {
    /*background-color: #f3f3f3;*/
    padding:0 !important;
    width:50px !important;
}


/* training calendar */
.CalendarTable{
    width:1000px;
    background-color:#CCCCCC;
}
.CalendarTable td{

}
.normalDay{
    background-color:#FFFFFF;
}
.blankDay{
    background-color:#FFFFFF;
}

/* end training calendar */

#programmetable th{
 position: -webkit-sticky;
 position: sticky;
 top:0;
}

.scrolltable th{
 position: -webkit-sticky;
 position: sticky;
 top:0;
}

.inabox{
    border:1pt solid #CCCCCC;
}

.scrollbox{
    max-height:300px;
    overflow-y:scroll;
}
.scrollboxBigger{
    max-height:600px;
    overflow-y:scroll;
}

button {
  background-color: #84bc5f;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
button.compactform {
  background-color: #84bc5f;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 6px;
  font-size:8pt;
  transition: 0.3s;
}
button.smaller {
  background-color: #cccccc;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 8px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
button:hover {
  background-color: #ddd;
}



.formbutton {
  background-color: Green;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}
.formbutton1 {
  background-color: Green;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}
.formbutton2 {
  background-color: Blue;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}
.formbutton3 {
  background-color: Orange;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}
.formbutton4 {
  background-color: Red;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}

.formbutton5 {
  background-color: Green;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:200px;
  height:100px;
  font-size:14pt;
  color:#FFFFFF;
}

.projectDates{
    color:#04278A;
}
.estimateDates{
    color:#8A0463;
}
.menubar{
    background-color:#58585a;
}
/*
#nav a {

    color: #FFFFFF;
    background-color: #58585a;

}
*/
div{
    color:#58585a;
}

p {
    color:#58585a;
}
.footer{
    background-color:#58585a;
    color:#84bc5f;
    margin: 0px;
    min-height: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;

}

.title{
    /*background-color:#f4e1d1;*/
    /*background: #F1F1F1;*/
    background-color: #5c8342;
    padding: 6px 12px 6px 12px;
    /*padding: 1em 1em 1em 1em;*/
    color: #555;
    font-weight: bold;
    vertical-align: center;


}
.titlemega{
    /*background-color:#f4e1d1;
    background: #F1F1F1;*/
    padding: 6px 12px 6px 12px;
    /*padding: 1em 1em 1em 1em;*/
    color: #555;
    font-weight: bold;
    vertical-align: center;
    font-size:36pt;

}
.formlabel{
    font-weight:bold
}
.titlesmaller{
    /*background-color:#f4e1d1;*/
    background: #F1F1F1;
    padding: 6px 12px 6px 12px;
    color: #555;
    font-weight: bold;
    vertical-align: center;
    font-size:10pt
}
.breadcrumbs{

    font-size:8pt;
    color:#CCCCCC;
}
    

H1{
    color: #58585a;
}
H2{
    color: #58585a;
}
H3{
    color: #58585a;
}
H4{
    color: #58585a;

}


body 
{
       
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:12pt;
}
.body 
{
        
	font-family:Arial, Verdana, Serif, "DejaVu Sans";

}
.error
{
        
	color: crimson;
}

.message
{
        
	font-weight: bold
}
        
p
{
	font-family:Arial, Verdana, Serif, "DejaVu Sans";

	margin:4pt;


}
div
{
	font-family:Arial, Verdana, Serif, "DejaVu Sans";

	margin:4pt;


}




UL{
    margin-bottom:3pt;
    margin-top:3pt;
}



a
{
	
	/*font-size:9pt;*/
	/*color:#525C12; */
    color:#58585a;
	text-decoration:none;
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
	}
	
	
a:hover
{
    color:green;
	/*color:#58585a;*/
	text-decoration:underline;
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
	}
a:visited
{
	color:#58585a;
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
	}

a:active
{
    color:#FFFFFF;
    font-size:11pt;
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
	/*color:#58585a;
    */
	}
a.titlebar
{
	/*font-size:10pt;*/
	color:#58585a;
	text-decoration:none;
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
	}
	
	
a.titlebar:hover
{
	color:#58585a;
	text-decoration:underline
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
	}
a.titlebar:visited
{
	color:#58585a;
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
}
a.formbuttonlink {
  background-color: Green;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:150px;
  height:40px;
  font-size:14pt;
  color:#FFFFFF;
  text-align:center
}
a.formbuttonlink:visited {
  background-color: Green;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:150px;
  height:40px;
  font-size:14pt;
  color:#FFFFFF;
}
a.formbuttonlink:hover {
  color:#CCCCCC;
}
.funkyHeading{
    background-color:#DAA520;
    color:#828282;
}

a.bread {
    padding: 6px 12px 6px 12px;
    color: #58585a;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
    font-size:10pt;
}
a.bread:visited {
    padding: 6px 12px 6px 12px;
    color: #58585a;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
}
.bread {
    color: #58585a;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition-property: background color;
    transition-duration: 1s;
    display: inline-block;
    border-radius: 5px;
}


    .bread:hover {
        background: #CCCCCC;
        border:solid 1pt #CCCCCC;
        color:#FFFFFF
    }
        
a.buttonsimple {
    /*background: #58585a;*/
    border: 1px solid #58585a;;
    padding: 3px 6px 3px 6px;
    /*color: #58585a;*/
    color:#5c8342;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
    font-size:10pt;
    border-radius: 4px;
}
a.buttonsimple:visited {
   /* background: #58585a;*/
    border: 1px solid #5c8342;
    padding: 6px 12px 6px 12px;
    /*color: #58585a;*/
    color:#5c8342;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
    border-radius: 4px;
}
a.button {
    /*background: #58585a;*/
    background: #5c8342;
    border: 1px solid #FFFFFF;
    padding: 6px 12px 6px 12px;
    color: #FFFFFF;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
	font-family:Arial, Verdana , Serif, "DejaVu Sans";
    font-size:10pt;
    border-radius: 4px;
}
a.button:visited {
   /* background: #58585a;*/
   background: #5c8342;
    border: 1px solid #FFFFFF;
    padding: 6px 12px 6px 12px;
    color: #FFFFFF;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
    border-radius: 4px;
}
.button {
    /*background: #DAA520;*/

   background: #5c8342;
    border: 1px solid #FFFFFF;
    padding: 6px 12px 6px 12px;
    color: #FFFFFF;
    width: auto;
    cursor: pointer;
    margin-right: 4px;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
    border-radius: 5px;
}


    .button:hover {
        background: #CCCCCC;
        border:solid 1pt #000000;
    }

a.breadcrumbs{
    font-size:8pt;
    color:#58585a;
}
a.breadcrumbs:visited{
    
    font-size:8pt;
    color:#58585a;
}
.breadcrumbs{
    
    font-size:8pt;
    color:#58585a;
}

a.actionitem {
  background: #AAAAAA;
  color: #FFFFFF;
  /*width: 1em;
  height: 1em;*/
    margin:2pt;
    padding-right:5px;
    padding-left:5px;
  border-radius: 1em;
  text-align: center;
  line-height: .9em;
    transition: background 1s;
    transition-property: background;
    transition-duration: 1s;
  }
a.actionitem:hover
{
	color:#58585a;
    background-color: #FFFFFF;
	text-decoration:underline
	}
a.actionitem:visited
{
  color: #FFFFFF;
}
a.prevnext {
  background-color: #CCCCCC;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
a.prevnext:visited {
  background-color: #CCCCCC;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
a.prevnext:hover {
  background-color: #ddd;
}
    .menubar{
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
	    font-size:9pt;
        /*background-color: #DAA520;*/
    }

   
    .tblbody{
        padding: 6px 12px 6px 12px;;
        border-bottom: 1pt solid #F1F1F1;
    }
    
    .title{    
    /*background-color:#f4e1d1;*/

    background: #FFFFFF;
    padding: 6px 12px 6px 12px;
    border-bottom: 0.5px solid #E6F1DF;
    
    
}

.titleunder{    
    border-bottom: solid;
    border-bottom-color: #edebe8;   
}
.show {display: inline;}
.hide {display: none;}

.highp{
    color:#37a34f;
    
}
.mediump{
    color:#3781a3;
}
.lowp{
    color:#b0b5b8;
   
}

.formlabels{
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:9pt;
    margin:4pt;
    color: #607db9;
}

/* FileNote page entry form styles*/

.tableHeadings{height:29px; font-weight:bold; color:#FFFFFF;}

.Title2a{font-family:Tahoma, Verdana, Arial;font-size:12pt;font-weight:bold}
.selTableRowSelected{ background-color: #CCCCCC}
.taskTableRow{cursor: grab}


/* TABS  */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  /*
  background-color: #f1f1f1;
  */
  background-color: #ffffff;
    color: #ffffff;
    text-align: left;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  /*background-color: #ddd;*/
    background-color: #E6F1DF;
  border: 1px solid #cccccc;
    border-bottom: 2px solid #84bc5f;
}

/* Create an active/current tablink class */
.tab button.active {
  /*background-color: #84bc5f;*/
    background-color: #E6F1DF;

    border-bottom: 2px solid #84bc5f;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontentOpportunity {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontentEvent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontentContact {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontentForm {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontentLead {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* end TABS */
/* TABS  */
/* Style the tab */
.tab2 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab2 button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent2 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* end TABS */


/*select.selectLarger {*/
.select2 select {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(images/selectarrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);*/
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

.selectColor {
   color: #fff;
   background-image: url(images/selectarrow.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

.select {
  font-size: 16px;
  position: relative;
  display: inline-block;
}

.selectDark {
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.5em 3em 0.5em 0.5em;
  margin: 0;

  transition: border-color 0.2s;
  border: 1px solid #CCCCCC;
  border-radius: 1px;

  background: #58585a;
  color: #f1f1f1;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
   background-image: url(images/selectarrow.png), -webkit-linear-gradient(#58585a, #58585a 10%, #58585a);
   background-position: 97% center;
   background-repeat: no-repeat;
}
.selectx select {
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.5em 2em 0.5em 0.5em;
  margin: 0;

  transition: border-color 0.2s;
  border: 1px solid #CCCCCC;
  border-radius: 1px;

  background: #FFFFFF;
  color: #555;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
   /*background-image: url(images/selectarrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);;*/
   background-image: url(images/selectarrow.png);
   background-position: 97% center;
   background-repeat: no-repeat;
}
.select select {
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.5em 3em 0.5em 0.5em;
  margin: 0;

  transition: border-color 0.2s;
  border: 1px solid #CCCCCC;
  border-radius: 1px;

  background: #FFFFFF;
  color: #555;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
   /*background-image: url(images/selectarrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);;*/
   background-image: url(images/selectarrow.png);
   background-position: 97% center;
   background-repeat: no-repeat;
}
.input {
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.3em 0.3em 0.3em 0.3em;
  margin: 0;

  transition: border-color 0.2s;
  border: 1px solid #AAAAAA;
  border-radius: 1px;

  background: #fff;
  color: #555;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.withBorder{
    border:solid 1pt #CCCCCC;
}
.InductionQuestionText 
{
       
	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:16pt;

}

textarea.mega{

	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:36pt;
}

input.mega{

	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:36pt;
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.5em 3em 0.5em 0.5em;
  margin: 0;
    height:50px;
  transition: border-color 0.2s;
  border: 1px solid #CCCCCC;
  border-radius: 1px;

  background: #f1f1f1;
  color: #555;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
input.larger{

	font-family:Arial, Verdana, Serif, "DejaVu Sans";
    font-size:16pt;
  outline: none;
  -webkit-appearance: none;
  display: block;
  padding: 0.5em 1em 0.5em 0.5em;
  margin: 0;

  transition: border-color 0.2s;
  border: 1px solid #CCCCCC;
  border-radius: 1px;

  background: #f1f1f1;
  color: #555;
  line-height: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
input.radioLarger{
  -webkit-appearance:button;
  -moz-appearance:button;
  appearance:button;
  border:4px solid #CCCCCC;
  border-top-color:#CCCCCC;
  border-left-color:#CCCCCC;
  background:#fff;
  width:35px;
  height:35px;
  border-radius:50%;
}
input.radioLarger:checked{
  border:13px solid #58585a;
}
input.checkboxLarger{
  -webkit-appearance:button;
  -moz-appearance:button;
  appearance:button;
  border:4px solid #CCCCCC;
  border-top-color:#CCCCCC;
  border-left-color:#CCCCCC;
  background:#fff;
  width:35px;
  height:35px;
  border-radius:15%;
}
input.checkboxLarger:checked{
  border:13px solid #58585a;
}

input.checkboxLargercompactform{
  -webkit-appearance:button;
  -moz-appearance:button;
  appearance:button;
  border:4px solid #CCCCCC;
  border-top-color:#CCCCCC;
  border-left-color:#CCCCCC;
  background:#fff;
  width:20px;
  height:20px;
  border-radius:15%;
}
input.checkboxLargercompactform:checked{
  border:13px solid #58585a;
}
input.checkboxLarge{
  -webkit-appearance:button;
  -moz-appearance:button;
  appearance:button;
  border:4px solid #CCCCCC;
  border-top-color:#CCCCCC;
  border-left-color:#CCCCCC;
  background:#fff;
  width:20px;
  height:20px;
  border-radius:10%;
}
input.checkboxLarge:checked{
  border:7px solid #58585a;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.activeColl, .collapsible:hover {
  background-color: #ddd;
}

/* Style the collapsible content. Note: hidden by default */

.content {
  padding: 0 1px;
  background-color: white;
  max-height: 0;
  overflow: auto;
  transition: max-height 0.2s ease-out;
  border: 1pt solid #CCCCCC
}

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

.activeColl:after {
  content: "-";/* "\2796"; /* Unicode character for "minus" sign (-) */
  color: black;
  font-size: 15pt;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* 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;
}



#drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 480px;
  font-family: sans-serif;
  margin: 100px auto;
  padding: 20px;
}
#drop-area.highlight {
  border-color: purple;
}


.treeplussmaller{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -1em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  text-align: center;
  line-height: .9em;
}

.treeminussmaller{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -1em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  text-align: center;
  line-height: .9em;
}

.treeplusfolder{
  background: #58585a;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -1em;
  width: 1em;
  height: 1em;
  border-radius: 0.1em;
  text-align: center;
  line-height: .9em;
}
.treeplus{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  text-align: center;
  line-height: .9em;
}

.treeminus{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  text-align: center;
  line-height: .9em;
}


.textareaScript {
    text-size:12pt;
}
.textareaScript:focus{
    background-color:#F0FFF0;
}
textarea {
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
    padding: 0.5em 0em 0.5em 0em;
	font-family: Tahoma, sans-serif;
	/*background-image: url(bg.gif);*/
	background-position: bottom right;
	background-repeat: no-repeat;
}
textarea:focus{
    background-color:#F0FFF0;
}
input:focus{
    background-color:#F0FFF0;
}


.buttonround {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
    border-radius: 12px;
    /*border-radius: 50%;*/
}


.smaller{
    font-size:8pt;
}



.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}