@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
@import url('https://fonts.googleapis.com/css?family=Cardo:400,400i,700|Work+Sans:400,600,700&display=swap');
:root {
    --Subdomain: tctlogin;

    --TextFontColor: #292E42;              
    --DarkFontColor: #292E42;                           
    --LightFontColor: #FFFFFF;                           
 
    --ComplementColor: #F0AD4E;                             
    --ComplementText: #292E42;               
       
    --SectionColor: #292E42;                                                     
    --SectionHighlight: #2C9145;           
    --SectionText: #FFFFFF;    
    --SectionTextHighlight: #FFFFFF;      

    --SubSectionColor: #EEEEEE;                             
    --SubSectionText: #292E42;    

    --RowHighlight: #F2F2F2;                             
    --TitleRowHighlight: #FFFFF7;        
    
    
    --PrimaryColor: #2C9145;                             
    --PrimaryHighlight: #81BE5C;                     
    --PrimaryText: #FFFFFF;                               
    --PrimaryTextHighlight: #FFFFFF;      
    
    --SecondaryColor: #3F9BD6;                         
    --SecondaryHighlight: #56C5EF;          
    --SecondaryText: #292E42;                           
    --SecondaryTextHighlight: #292E42;                               

    --TertiaryColor: #F09C4E;                           
    --TertiaryHighlight: #F5B63F;          
    --TertiaryText: #FFFFFF;                             
    --TertiaryTextHighlight: #FFFFFF;                                 
    
    --QuaternaryColor: #B35C4C;                
    --QuaternaryHighlight: #ED5454;          
    --QuaternaryText: #FFFFFF;                         
    --QuaternaryTextHighlight: #FFFFFF;                             
   
    //Not Data Driven
    --LinkHighlight: #81be5c;      
}
.LogoImage { content:url("\2F tct\2F web\2F img\2F tct\2F TCT\5F logo\5F 2greens\2E png"); }

.colorPrimary {color: var(--PrimaryColor);}
.colorSecondary {color: var(--SecondaryColor);}
.colorTertiary {color: var(--TertiaryColor);}
.colorQuaternary {color: var(--QuaternaryColor);}

html,body {margin: 0; padding: 0; height: 100%;  
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */}
body, input, textarea, select, button {font: 14px/1.5em 'Work Sans', Helvetica,'Helvetica Neue',Arial,sans-serif; color: var(--TextFontColor);}

hr {margin-top:5px;margin-bottom: 5px;}

/* text styling */
h1 {font-size: 5em; line-height: 1em; text-align: center; font-family: serif; font-weight: 100;}
h2 {font-size: 170%; line-height: 1.2em; font-weight: 600; color: var(--TextFontColor); margin: 0.5em 0 1.3rem;}
h3 {font-size: 100%; font-weight: normal;}
h4 {font-size: 100%; font-weight: normal;}
h5 {font-size: 100%; font-weight: normal;}
h6 {font-size: 100%; font-weight: normal;}
p {margin: 0.5em 0 1em;}
ul {padding-left: 17px;}
a {color: var(--PrimaryColor);
	text-decoration: none;
	-webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.5s ease;                 
    -o-transition: all 0.5s ease;   
    -ms-transition: all 0.5s ease;          
    transition: all 0.5s ease;}
a:hover{color:var(--LinkHighlight);}
a.help {cursor: help;} 

a.minibutton {cursor:pointer;color:var(--PrimaryText);background-color:var(--PrimaryColor);} 
a.minibuttonsecondary {cursor:pointer;color:var(--SecondaryText);background-color:var(--SecondaryColor);} 
a.minibuttontertiary {cursor:pointer;color:var(--TertiaryText);background-color:var(--TertiaryColor);} 
a.minibuttonquaternary {cursor:pointer;color:var(--QuaternaryText);background-color:var(--QuaternaryColor);} 

label {width: 100%; box-sizing: border-box; font-size: 100%; padding: 0; margin: 0; color: var(--TextFontColor);}
::-webkit-input-placeholder {color: #999;}
:-moz-placeholder {color: #999;}
::-moz-placeholder {color: #999;}
:-ms-input-placeholder {color: #999;}

/* controls */
input, textarea, select {background: #FFFFFF; color: var(--TextFontColor); border: 1px solid #ddd;}
input {font-size: 92%; display: block; width: 100%; box-sizing: border-box; margin: 0 0 0.25em; padding: 10px;flex:1;}
textarea {font-size: 92%; display: block; width: 100%; box-sizing: border-box; margin: 0 0 0.25em; padding: 10px;}
select {font-size: 85%; outline: none; width: 100%; padding: 0 0 0 10px;}
form {margin: 1em 0;}
fieldset {margin: 0 0 1em; padding: 0 0 1em; border: none; border-bottom: 1px solid #ddd;}
input.inline {display: inline-block; width: auto;}
select.inline {display: inline-block; width: auto;height:29px;min-width:100px;}


input[type=color] {box-sizing:initial; padding: 1px; color:initial;width: 40px}


button, input[type=submit], .button {border-radius: 4px;} 

button, input[type=submit], .button {border: 2px solid;padding: 10px 15px; cursor: pointer;font-weight:600 !important; text-transform:uppercase;text-align:center;letter-spacing: .045em;-webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.5s ease;                 
    -o-transition: all 0.5s ease;   
    -ms-transition: all 0.5s ease;          
    transition: all 0.5s ease;}

h2 button {font-size:1em;}
    
button.small, input[type=submit].small, .button.small {font-size: 92%; padding: 5px 10px;}
button.inline, input[type=submit].inline, .button.inline, a.button {width: auto; display: inline-block;}

#button, input[type=submit].primary, .button.primary {color: #2C9145; border-color:#2C9145;}
#button:hover, input[type=submit]:hover, .button:hover {text-decoration:none;}
#button:hover, input[type=submit].primary:hover, .button.primary:hover {background: #2C9145;color:#FFFFFF;border-color:#2C9145;text-decoration:none;}

a.button, button, input[type=submit], input[type=button] {background:var(--PrimaryColor);color:var(--LightFontColor);border-color:var(--PrimaryColor);text-decoration:none;}
button.secondary, input[type=submit].secondary, input[type=button].secondary, .button.secondary {background: var(--SecondaryColor);color:var(--LightFontColor);border-color:var(--SecondaryColor);text-decoration:none;}
button.tertiary, input[type=submit].tertiary, input[type=button].tertiary, .button.tertiary {background: var(--TertiaryColor);color:var(--LightFontColor);border-color:var(--TertiaryColor);text-decoration:none;}
button.quaternary, input[type=submit].quaternary, input[type=button].quaternary, .button.quaternary {background: var(--QuaternaryColor);color:var(--LightFontColor);border-color:var(--QuaternaryColor);text-decoration:none;}

a.button:hover, button:hover, input[type=submit]:hover, input[type=button]:hover {background:var(--PrimaryHighlight);color:var(--LightFontColor);border-color:var(--PrimaryHighlight);text-decoration:none;}
button.secondary:hover, input[type=submit].secondary:hover, input[type=button].secondary:hover, .button.secondary:hover {background: var(--SecondaryHighlight);color:var(--LightFontColor);border-color:var(--SecondaryHighlight);text-decoration:none;}
button.tertiary:hover, input[type=submit].tertiary:hover, input[type=button].tertiary:hover, .button.tertiary:hover {background: var(--TertiaryHighlight);color:var(--LightFontColor);border-color:var(--TertiaryHighlight);text-decoration:none;}
button.quaternary:hover, input[type=submit].quaternary:hover, input[type=button].quaternary:hover, .button.quaternary:hover {background: var(--QuaternaryHighlight);color:var(--LightFontColor);border-color:var(--QuaternaryHighlight);text-decoration:none;}







/* froala editor overrides */
button.fr-remove-word {background: var(--PrimaryColor) !important; color: #FFFFFF !important;}
button.fr-remove-word:hover {background: var(--PrimaryColor) !important;}
button.fr-keep-word {background: var(--PrimaryColor) !important; color: #FFFFFF !important;}
button.fr-keep-word:hover {background: var(--PrimaryColor) !important;}

span.viewbutton:hover {cursor:default;background: var(--PrimaryColor);}


/*
#header{
	text-align:right;
	padding:1.5rem;
	font-weight:400;
	color:#70768E;
        
}
#header a{
	font-weight:600;
	color:#70768E;


}
#header a:hover{
	border-bottom:1px solid #70768E;
	text-decoration:none;
}


#header, table{-webkit-box-shadow: 0px 0 10px 0px rgba(170,169,181,0.2);
-moz-box-shadow: 0px 0 10px 0px rgba(170,169,181,0.2);
box-shadow: 0px 0 10px 0px rgba(170,169,181,0.2);}
 */

.actionbox
{
    width:100%; 
    border: black solid 1px;
}

.actionboxmenu 
{
    min-width: 125px; 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
    border-color: black; 
    border-style: solid; 
    border-width: 0 1px 0px 0;
}

.actionboxmenu ul {
    list-style-type: none; 
    padding: 0px; 
    margin: 0px;
}

li.actionboxtab {
    padding: 10px;
    border-color: black; 
    border-style: solid; 
    border-width: 0 0px 1px 0;
    background-color: black;
}

li.actionboxtab a{
    text-decoration: none;
}

li.actionboxtabselected{
    background-color: white;
}

.actionboxcontent{
    display: none;
}

.actionboxcontentfirst{
    display: inline;
}

.dragged-over {background: var(--RowHighlight);}

table {padding:2rem;background: transparent;border-spacing:0;border-collapse:separate}
caption {background: var(--SectionColor); color: var(--SectionText); padding: 13px 20px; text-align: left; font-size: 115%; line-height: 1.5em;vertical-align: middle;}
tr {border-top: 1px solid #ddd}
tr:hover {background: var(--RowHighlight);}
tr.nohover {background: var(--RowHighlight);}
tr.nohover:hover {background: var(--RowHighlight);}
tr.nohoverwhite {background: transparent;}
tr.nohoverwhite:hover {background: transparent;}
tr.nohoveraction {background: transparent;}
tr.nohoveraction:hover {background: transparent;}


th {color: var(--SectionColor);; padding: 4px 4px; text-align: left;border-bottom:1px solid #e4e0e5 !important;}
td {border-bottom: 1px solid #e4e0e5; padding: 12px 4px;}
table tbody tr:last-child td {border-bottom:0;}
table tbody tr:last-child th {border-bottom:0 !important;}
td.nowrap {white-space: nowrap;}
td:first-child {border-left: none;}
th.cell-center,
td.cell-center {text-align: center;}

td.examplecell {bgcolor: var(--PrimaryColor);}

td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }

table.fullwidth {width: 100%; border-right: none;}
table.fullwidth td:last-child {border-right: none;}

table.layout {}
table.layout tr {border: none;}
table.layout tr:hover {background: none;}

table caption .filter {font-size: 92%;float:right;}
table caption .caption-title{float:left;padding:.8rem 0;}
table caption .filter select {font-size: 13px; border: none; width: auto;}


table.tablesorter {
	font-family: 'Work Sans', Helvetica,'Helvetica Neue',Arial,sans-serif;
    width: 100%;
    text-align: left;
    border-radius:0;
	background:transparent;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    border: 1px solid #FFF;
    font-size: 14px;
}
table.tablesorter thead tr .header {
    cursor: pointer;
}
table.tablesorter tbody td {
    background-color: #FFFFFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#FFFFFF;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
}



.form_input_txt {margin-right:1rem;}


/* clear-fix */
.cf:before, .container:before, .row:before,
.cf:after, .container:after, .row:after {content: ""; display: table;}
.cf:after, .container:after, .row:after {clear: both;}
/* For IE 6/7 (trigger hasLayout) */
.cf, .container, .row:after {zoom: 1;}



/* inner container - just adds some padding */
.inner {padding: 8px 20px;}


/* basic row / cell styles */
.row {}
.onehalf {width: 50%; padding: 0 10px; float: left; box-sizing: border-box;}
.row .onehalf:first-child {margin-left: 0px;}

.onethird {}
.row .onethird {}

.twothirds {}
.row .twothirds {}

.onequarter {}
.row .onequarter {}


.arrow-left,
.arrow-right
    {width: 0px; height: 0px; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; display: inline-block; overflow: hidden; margin: 2px;}
.arrow-left {border-right: 5px solid var(--DarkFontColor);}
.arrow-right {border-left: 5px solid var(--DarkFontColor);}

.arrow-left-light{border-right: 5px solid var(--LightFontColor);}
.arrow-right-light {border-left: 5px solid var(--LightFontColor);}    
#sidebar .arrow-left {border-right-color: #fff;}
#sidebar .arrow-right {border-left-color: #fff;}
#sidebar-collapsed .arrow-left {border-right-color: #fff;}
#sidebar-collapsed .arrow-right {border-left-color: #fff;}

.remove-from-list{color: var(--TertiaryColor);}

.arrow-down,
.arrow-up
    {width: 0px; height: 0px; border-left: 5px solid transparent;  border-right: 5px solid transparent; display: inline-block; overflow: hidden; margin: 2px;}
    
.arrow-down {border-top: 5px solid var(--DarkFontColor);}
.arrow-up {border-bottom: 5px solid var(--DarkFontColor);}

.arrow-down-light{border-top: 5px solid var(--LightFontColor);}
.arrow-up-light {border-bottom: 5px solid var(--LightFontColor);}


#sidebar .arrow-up {border-bottom-color: #fff;}
#sidebar .arrow-down {border-top-color: #fff;}
#sidebar-collapsed .arrow-up {border-bottom-color: #fff;}
#sidebar-collapsed .arrow-down {border-top-color: #fff;}



/* Layout stuff */
#wrapper {width: 100%; display: table; height: 100%; min-height: 100%;}
#sidebar {width: 240px; vertical-align: top;}
#sidebar-collapsed {width: 20px; vertical-align: top;}
#sidebar-fixed {position: fixed; width: 240px; height: 100%; top: 0; left: 0; background: var(--SectionColor);}
#sidebar-collapsed-fixed {position: fixed; width: 20px; height: 100%; top: 0; left: 0; background: var(--SectionColor) no-repeat;}
#content {width: auto; min-width: 875px; margin-left: 240px; vertical-align: top;}

/* Login Page is not dynamic */
#sidebar, #sidebar *, #loginWrapper {color: #fff;}
/*#loginWrapper {background: #6F875F url(/tctportal/web/img/tct/lighthouse.png); background-size: cover;}*/
#loginWrapper {background: var(--SectionColor); background-size: cover;}

#logo {margin:1rem 2rem 2rem; padding: 0;display:block;float:none !important;}
#logo img {width:100%;height:auto;}


#sidebar ul {margin: 1em 0; padding: 0;}
#sidebar li {display: inline; list-style: none;font-weight:600;}
#sidebar li a {display: block; padding: 15px 20px;border-bottom:1px solid rgba(112,118,142,.3);color: var(--SectionText);}
#sidebar li i {color: var(--SectionText);}
#sidebar li a:hover,
#sidebar li.active > a {text-decoration:none;
	background: rgb(129,190,92);
        color: var(--SectionTextHighlight);
    background: -moz-linear-gradient(45deg, var(--SectionHighlight) 0%, var(--SectionHighlight) 100%);
    background: -webkit-linear-gradient(45deg, var(--SectionHighlight) 0%, var(--SectionHighlight) 100%);
    background: linear-gradient(45deg, var(--SectionHighlight) 0%, var(--SectionHighlight) 100%) !important;}
#sidebar li:hover i {color: var(--SectionTextHighlight);}
#sidebar li.active i {color: var(--SectionTextHighlight);}

#sidebar .scrollTop {position: fixed; bottom: 0px; left: 0px; width: 240px; padding: 15px 20px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar .scrollTop .arrow-up {float: right; margin-top: 10px;}
#sidebar .scrollTop:hover {background: rgba(0,0,0,0.2);}

#sidebar .poweredBy {position: fixed; bottom: 50px; left: 0px; width: 240px; padding: 15px 20px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar .poweredBy:hover {background: rgba(0,0,0,0.2);}

#sidebar .nextRelease {position: fixed; bottom: 120px; left: 0px; width: 240px; padding: 15px 20px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar .nextRelease:hover {background: rgba(0,0,0,0.2);}
#sidebar .highlight {font-weight:bold;color: var(--ComplementColor);}

#sidebar-collapsed .scrollTop {position: fixed; bottom: 0px; left: 0px; width: 20px; padding: 5px 5px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar-collapsed .scrollTop .arrow-up {float: right; margin-top: 10px;}
#sidebar-collapsed .scrollTop:hover {background: rgba(0,0,0,0.2);}
#sidebar-collapsed .poweredBy {position: fixed; bottom: 50px; left: 0px; width: 20px; padding: 5px 5px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar-collapsed .poweredBy:hover {background: rgba(0,0,0,0.2);}
#sidebar-collapsed .nextRelease {position: fixed; bottom: 120px; left: 0px; width: 20px; padding: 5px 5px; box-sizing: border-box; background: rgba(0,0,0,0.15); float: right; margin-top: 10px;}
#sidebar-collapsed .nextRelease:hover {background: rgba(0,0,0,0.2);}
#sidebar-collapsed .highlight {font-weight:bold;color: var(--ComplementColor);}

.sidebar-icon{width:15px;position:relative;top:2px;margin-right:15px;}
#sidebar .far, #sidebar .fas{margin-right:15px;}
#sidebar .svg-inline--fa{margin-right:15px;}


#content {background: #f2f2f2; padding: 0;}

/* certification stats (start date, goal date, % complete...) */
.app-stats span {padding: 0 25px 0 0;}


/* Certification Filter */
.refresh-search .item {float: left; margin: 1em 1em 1em 0; width: 15%;}
.refresh-search .item select {width: 100%;}


/* Dialog boxes */
div.ui-dialog {padding: 0; margin: 1em 0;}
div.ui-dialog div.ui-dialog-titlebar {background: #fff; color: var(--DarkFontColor); border: none; border-bottom: 1px solid #ddd; font-weight: normal; padding: 1em; font-size: 122%; position: relative;}
.ui-dialog .ui-dialog-content.form-dialog {padding: 0;}
.ui-dialog .ui-dialog-content.form-dialog fieldset {padding: 10px 15px 15px;}
.ui-dialog .ui-dialog-title {font-family: 'Work Sans', Helvetica,'Helvetica Neue',Arial,sans-serif;font-weight: 600;color: #292E42;}



/* Tabs */
div.tabs-container {padding: 0; background: transparent; clear: both;}
div.tabs-container ul.tabs-nav {margin: 0; padding: 15px 15px 0; background: transparent; border: none; border-bottom: 1px solid #ddd; border-radius: 0px;}
div.tabs-container ul.tabs-nav li {font-weight:600; list-style: none; display: inline; float: left; background: #fff; margin: 1px .2em 0 0; border: 1px solid #ddd; border-bottom-color: transparent;}
div.tabs-container ul.tabs-nav li:hover a {color: var(--PrimaryColor); }
div.tabs-container ul.tabs-nav li.tabs-active,
div.tabs-container ul.tabs-nav li.ui-tabs-active {background: #fff; border-color: #ddd; border-bottom-color: transparent; margin-bottom: -1px; padding-bottom: 1px; }
div.tabs-container ul.tabs-nav li a {display: block; padding: 8px 15px; color: var(--DarkFontColor); outline: none; cursor: pointer;}
div.tabs-container ul.tabs-nav li.tabs-active a,
div.tabs-container ul.tabs-nav li.ui-tabs-active a {color: var(--PrimaryColor);}


div.tabs-container .tabs-panel {background: #fff; padding: 5px 0px;}






/* Section */
#divSectionList {font-size: 92%;}
.section-title {background: var(--SectionColor); color: var(--SectionText); padding: 15px 25px; border-top: 1px solid #666;}
.section-title > h2 {color: var(--SectionText); font-size: 140%;}
.section-title-row {color: var(--SectionText); position: relative; cursor: pointer;}
.section-title-row > h2 {color: var(--SectionText); font-size: 140%;}
.section-status {width: 210px; padding: 10px 25px; position: absolute; top: 0; right: 0; text-align: right;}
/* SubSection */
.subsection {border-bottom: 1px solid #fff;}
.subsection-title {background: var(--SubSectionColor); color: var(--SubSectionText); padding: 15px 20px;}
.subsection-title .subsection-name {width: 80%; color: var(--SubSectionText); margin: 0.5em 0 0.75em;}
.subsection-title .subsection-name > span.TitleShort {font-size: 108%; background: var(--PrimaryColor); color: var(--PrimaryText) ; padding: 5px; border-radius: 3px; float: left; margin: 0 15px 15px -45px;}
.subsection-detail,
.subsection-title-row {position: relative; cursor: pointer;}
.subsection-title .subsection-name {padding-left: 45px;}
.subsection-status {width: 210px; padding: 10px 25px; position: absolute; top: 0; right: 0; text-align: right;}
/* Requirement */
.requirement {border-bottom: 1px solid #E7E7E7;}
.requirement.open {border-left: 3px solid var(--ComplementColor);}
.requirement.open .requirement-title {padding-left: 23px;}
.requirement.open .requirement-detail {padding-left: 198px;}
.requirement.open .requirement-actions {margin: 15px 0 30px;}
.requirement-title-row {position: relative; cursor: pointer;}
.requirement-title-row:hover {background: #FFFFF7;}
.requirement-title-row .arrow-up,
.requirement-title-row .arrow-down {margin: 0 0 2px 20px;}
.requirement.open .requirement-title-row:hover {background: #fff;}
.requirement-title {width: 150px; padding: 10px 25px; position: absolute; top: 0; left: 0;}
.requirement-title > h4 {margin: 0; color: var(--DarkFontColor);}
.requirement-detail {float: left; padding-top: 10px; padding-bottom: 10px;}
.requirement-status {width: 210px; padding: 10px 25px; position: absolute; top: 0; right: 0; text-align: right;}
.requirement-detail {padding-left: 200px; padding-right: 225px;}
.requirement-actions {padding-left: 200px; padding-right: 60px;}
.requirement-actions {}
.requirement .action {background: #fafafa; border: 1px solid #ddd; margin-bottom: 5px;}
.requirement .action-title {padding: 15px; background: #f9f9f9;}
.requirement .action-title > h5 {margin: 0; padding-left: 72px;}
.requirement .action-title > h5 .action-shortTitle {background: var(--ComplementColor); color: var(--ComplementText); padding: 2px 6px; border-radius: 3px; font-weight: bold; float: left; margin-left: -72px;}
.requirement .action-stats {float: left;}

span.actionShortTitleOnly {background: var(--ComplementColor); color: var(--ComplementText); padding: 2px 6px; border-radius: 3px; font-weight: bold; float: left; margin-left: -10px;}

.requirement .action-buttons {float: right; margin: 0 0 -10px; position: relative; z-index: 10;}
.requirement .action-buttons .note {margin: 1em 0 0.5em;}
.requirement .action-tabs {clear: both;}
.requirement .action .tabs-panel {min-height: 150px; padding: 10px 15px;}

.requirement .action.open .action-title {background: none;}


/* Main login screen - is this even used? */
#loginWrapper {width: 100%; height: 100%; min-height: 100%; text-align: center;}
#loginWrapper a {color: #E0ECD7;}
#loginWrapper td {vertical-align: middle;}

#loginBox {background: #fff; color: var(--DarkFontColor); border-radius: 5px; width: 380px; margin: 0 auto; text-align: left;}
#loginBox a {color: var(--DarkFontColor);}
#loginBox h1 {margin: 0 auto; padding: 25px; border-bottom: 1px solid #ddd;}

form#login {padding: 25px 20px; margin: 0 0 1em;}
form#login input,
form#login button {}

/* jquery ui overrides */
div.ui-widget-overlay {background: rgba(0,0,0,0.5); opacity: 1;}
div.ui-widget,
div.ui-widget input, 
div.ui-widget select, 
div.ui-widget textarea, 
div.ui-widget button {font-family: 'Work Sans', Helvetica,'Helvetica Neue',Arial,sans-serif; font-size: .96em; line-height: 1.4em;}
div.ui-widget {border: none;}
div.ui-widget-content {/*background: transparent;*/ color: var(--DarkFontColor);}

/* Misc Adds */
#ddlViewBy {height:4rem;}

#tblHelpGuide tr:hover{background:transparent;}

#small {display:flex;}

li {margin-bottom:10px;}

.supportform_save {border: 2px solid #2C9145;color: #2C9145;}

.supportform_cancel {border: 2px solid #B35C4C; color: #B35C4C;}

.sectionbackground {color: var(--SectionText);background-color:var(--SectionColor);}
.primarybackground {color: var(--PrimaryText);background-color:var(--PrimaryColor);}

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

mark, .mark {background: #ff0;}

.back-button {color: var(--SectionColor);cursor:pointer;} 
.back-button:hover {color: var(--PrimaryColor);cursor:pointer;}


select:focus{
    box-shadow: 0 0 0 1px #000; 
}


.ui-tabs-vertical { width: 35em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel {padding: .1em .1em .1em 13em; float: none; width: 25em;}

.ui-tabs { width:100%;}	

td.warningcell {background-color:coral;} 

div.fr-element.fr-view {padding-top:1px !important;}

.fabuttonprimary {cursor:pointer;color:var(--PrimaryColor);}
.fabuttontertiary {cursor:pointer;color:var(--TertiaryColor);}