:root {
    /* default FUI colors are being used here */
    
    /*---  Colors  ---*/
    --red              : #DB2828;
    --orange           : #F2711C;
    --yellow           : #FBBD08;
    --olive            : #B5CC18;
    --green            : #21BA45;
    --teal             : #00B5AD;
    --blue             : #2185D0;
    --violet           : #6435C9;
    --purple           : #A333C8;
    --pink             : #E03997;
    --brown            : #A5673F;
    --grey             : #767676;
    --black            : #1B1C1D;

    /*---  Light Colors  ---*/
    --lightRed         : #FF695E;
    --lightOrange      : #FF851B;
    --lightYellow      : #FFE21F;
    --lightOlive       : #D9E778;
    --lightGreen       : #2ECC40;
    --lightTeal        : #6DFFFF;
    --lightBlue        : #54C8FF;
    --lightViolet      : #A291FB;
    --lightPurple      : #DC73FF;
    --lightPink        : #FF8EDF;
    --lightBrown       : #D67C1C;
    --lightGrey        : #DCDDDE;
    --lightBlack       : #545454;

    /*--- Colored Backgrounds ---*/
    --redBackground    : #FFE8E6;
    --orangeBackground : #FFEDDE;
    --yellowBackground : #FFF8DB;
    --oliveBackground  : #FBFDEF;
    --greenBackground  : #E5F9E7;
    --tealBackground   : #E1F7F7;
    --blueBackground   : #DFF0FF;
    --violetBackground : #EAE7FF;
    --purpleBackground : #F6E7FF;
    --pinkBackground   : #FFE3FB;
    --brownBackground  : #F1E2D3;    

}

.studies-color        { color: var(--green)   !important; }
.participants-color   { color: var(--orange)  !important; }
.communications-color { color: var(--blue)    !important; }
.files-color          { color: var(--teal)    !important; }
.invoices-color       { color: var(--red)     !important; }
.clients-color        { color: var(--purple)  !important; }
.recruiters-color     { color: var(--brown)   !important; }
.support-color        { color: var(--pink)    !important; }
/* unused:
.category1-color      { color: var(--yellow);
.category2-color      { color: var(--olive);
.category3-color      { color: var(--violet);
.category4-color      { color: var(--pink);
.category5-color      { color: var(--grey);
.category6-color      { color: var(--black);
*/


.color-1  { background-color: #f44336 !important;} /* red */
.color-2  { background-color: #e91e63 !important;} /* pink */
.color-3  { background-color: #9c27b0 !important;} /* purple */
.color-4  { background-color: #673ab7 !important;} /* deep purple */
.color-5  { background-color: #3f51b5 !important;} /* indigo */
.color-6  { background-color: #2196f3 !important;} /* blue */
.color-7  { background-color: #03a9f4 !important;} /* light blue */
.color-8  { background-color: #00bcd4 !important;} /* cyan */
.color-9  { background-color: #009688 !important;} /* teal */
.color-10 { background-color: #4caf50 !important;} /* green */
.color-11 { background-color: #8bc34a !important;} /* light green */
.color-12 { background-color: #cddc39 !important;} /* lime */
.color-13 { background-color: #ffeb3b !important;} /* yellow */
.color-14 { background-color: #ffc107 !important;} /* amber */
.color-15 { background-color: #ff9800 !important;} /* orange */
.color-16 { background-color: #ff5722 !important;} /* deep orange */
.color-17 { background-color: #795548 !important;} /* brown */
.color-18 { background-color: #9e9e9e !important;} /* gray */
.color-19 { background-color: #607d8b !important;} /* blue gray */
.color-20 { background-color: #000000 !important;} /* black */


body{
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 60px;
}
body.dev {
    outline: 15px solid #2185d0a0;
    outline-offset: -15px;
}

/* 2023-12-04 @ 15:11  Semantic UI automatically sets overflow-x: hidden, which prevents us from seeing all of our profiler 
   information. We don't want this automatically set for DEV because we may miss some css issues that the end user would see,
   but DEV wouldn't. */
body.debug,
body.profile {
    overflow-x: unset;
}
    

/* 2021-01-27 @ 16:36  navigation.min.js dynamically sets the width of #site-navigation for some reason. This causes strange padding when SUI's dimmer covers the page. Switch to 100% for all cases. */
#site-navigation { width: 100% !important; }

/* external open icon for links that open in a new window */
a.external[target="_blank"]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

.right.floated { float: right; }
.left.floated { float: left; }
.textleft { text-align: left !important; }
.textright { text-align: right !important; }
.textcenter { text-align: center !important; }

.mini.text { font-size: 0.78571429rem; }
.tiny.text { font-size: 0.85714286rem; }
.small.text { font-size: 0.92857143rem; }
.text { font-size: 1rem; }
.large.text { font-size: 1.14285714rem; }
.big.text { font-size: 1.28571429rem; }
.huge.text { font-size: 1.42857143rem; }
.massive.text { font-size: 1.71428571rem; }



/* SmartyStreets overrides */
/* 2020-08-07 @ 15:49  smarty-ui verify button has a z-index that is too high and covers the navbar when scrolling.
                       was "inherit" but that wasn't enough to keep it above the state dropdown. It
                       also needs to stay below the #last_field_update_container .field_info_popup */
.smarty-ui { z-index: 2 !important; }
.smarty-popup-header {
    line-height: 1.35em;
    text-transform: unset;
    font-weight: normal;
    color: #202020;
    padding: 0;
}
.smarty-popup-header h4 {
    color: #f2711c;
}
.smarty-popup {
 padding: 1em;
}

/* as the menu is fixed to the top, bump all page content down a bit */
.main.container {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* 2019-11-22 @ 09:43  enable a wide-screen no-margin view for wide data  */
.main.container.wide {
    width: 99%;
}

/* make search bar narrow enough for iPad Air 2 */
#quick-search-name {
    width: 14em;
}

/* management statistics */
#stats .ui[class*="seven column"].grid  {
    display: flex;
    margin-left: 1em;
}
#stats .ui[class*="seven column"].grid > .column {
    width: 14%;
    padding: 0 .2em;
    margin: 0;
    text-align: center;
}
#stats .ui[class*="seven column"].grid > .column:last-child {
    width: 13.9%;
}
#stats .ui.segment {
  height: 6em;
}
#stats .ui.statistic .value {
  font-size: 150% !important;
}

#levenshtein-duplicates > .header {
  background-color: gold !important;
}

/* active/inactive status in subject_view */
#active_label { font-weight: bold; }

#support-ticket { z-index: 20000;}

/* subject_view: popup container for last date field was updated when ctrl-clicking on a field */
.field_info_popup {
    line-height: initial !important; /* stop squished multilines by .ui.label */
    background-color: #F4D6C3; 
    display: block; 
    padding: 3px; 
    /* box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); */
    border: 1px solid blue; 
    position:absolute; 
    z-index: 1000;
}

.ui.left.attached.dropdown {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ui.left.attached.dropdown > .ui.button {}

.nowrap {
    white-space:nowrap;
}
 
/* table customizations */

table th .subheading {
    font-weight: normal;
}

/* make line height smalled in small tables */
.ui.small.table {
    line-height: 1.1em;
}
/* allow a table row to be shorter than the content (to scroll) */
tr.scrolly td {
    padding: 0 !important;
}
tr.scrolly td div {
    padding: .5em .75em;
    overflow-y: auto;
    max-height: 10vh;
}

table caption {
/* removed because tablesorter caption was way too large
    font-weight: bold;
    font-size: 175%;
*/
    text-align: left;
    padding: .5em;
    background-color: #eef;
}

table.tablesorter caption {
    padding-bottom: .5em !important;
}

/*
.ui.compact.table td,
.ui.compact.table input {
    padding-right: .25em;
}
*/

/* new table type "vertical" where headers are on the side. Fixes borders (seen on /email/batch/1 for example) */
.vertical.table th {
    border-top: 1px solid rgba(34,36,38,.1);
    border-bottom: none !important;
    padding: .78571429em .78571429em;
}
.vertical[class*="compact"].table th,
.vertical[class*="compact"].table td {
    padding: .5em .7em;
    border-top: 1px solid rgba(34,36,38,.1);
}
.vertical[class*="very compact"].table th {
    padding: .4em .6em;
}
.vertical.table thead tr:first-child th {
    border-top: none;
}
/* for vertical tables where the TH tag isn't in a THEAD container */
.ui.table td.heading { font-weight: bold; text-align: right; }



/* put a shadow around hovered rows in a selectable table */
/* 2021-01-27 @ 18:21 .selectable2 avoids SUI's background color, allowing you to hover over a pre-existing background color */
.ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover,
.ui.selectable2.table tbody tr:hover, .ui.table tbody tr td.selectable2:hover {
	/* background: none !important; */
	box-shadow: 0 0 5px #548cc7;
    position: relative; /* 2020-12-07 @ 14:58 without this, box-shadow will be covered by adjacent divs that have relative positioning (i.e., a table header with a tooltip) */
}


/* alternative darkness for table borders */
table.ui.table { border: 1px solid rgba(34, 36, 38, 0.25) }
table.ui.table.darker { border: 1px solid rgba(34, 36, 38, 0.5) }
table.ui.table.darkest { border: 1px solid rgba(34, 36, 38, 1) }

.ui.table[class*="extra compact"] td,
.ui.table[class*="extra compact"] th {
	padding: 0.3em 0.3em;
}




/* cells that fill in a part of the background to indicate a percentage value 
-----------------------------------------------------------------------------*/
.percentage_cell {
    position: relative;
    background-color: #eee;
    margin-bottom: 2px;
    display: flex;
}
.percentage_cell .bar {
    background-color: rgba(255, 133, 27, 0.8); /* RGB equivalent of #FF851B */
    height: 24px;
    /*
    display: block;
    background-position: right center;
    background-repeat: repeat-x;
    border-right: #F2711C 1px solid;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    */
}
.percentage_cell .bar.alt {
    background-color: #42a6ff;
    /*
    border-right: #3492ff;
    */
}
.percentage_cell .values {
    text-align: center;
    padding-top: 3px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
}
.percentage_cell .bar span {
    position: absolute;
    left: 1em
}

/*-- Colors for Event Calendar --*/

.color-1  { background-color: #f44336 !important;} /* red */
.color-2  { background-color: #e91e63 !important;} /* pink */
.color-3  { background-color: #9c27b0 !important;} /* purple */
.color-4  { background-color: #673ab7 !important;} /* deep purple */
.color-5  { background-color: #3f51b5 !important;} /* indigo */
.color-6  { background-color: #2196f3 !important;} /* blue */
.color-7  { background-color: #03a9f4 !important;} /* light blue */
.color-8  { background-color: #00bcd4 !important;} /* cyan */
.color-9  { background-color: #009688 !important;} /* teal */
.color-10 { background-color: #4caf50 !important;} /* green */
.color-11 { background-color: #8bc34a !important;} /* light green */
.color-12 { background-color: #cddc39 !important;} /* lime */
.color-13 { background-color: #ffeb3b !important;} /* yellow */
.color-14 { background-color: #ffc107 !important;} /* amber */
.color-15 { background-color: #ff9800 !important;} /* orange */
.color-16 { background-color: #ff5722 !important;} /* deep orange */
.color-17 { background-color: #795548 !important;} /* brown */
.color-18 { background-color: #9e9e9e !important;} /* gray */
.color-19 { background-color: #607d8b !important;} /* blue gray */
.color-20 { background-color: #000000 !important;} /* black */

.calendar-bubble {
	display: inline-block;
	border: 1px solid white;
	background-color: green;
	padding: 0 .5em;
	font-weight: bold;
	float: right;
	border-radius: 2px;
	margin: 3px;
}

/* --- fixes for Semantic UI --- */

/* 2021-09-27 @ 20:32  allow for a readonly dropdown by hiding all option items and the dropdown arrow icon*/
.ui.dropdown.readonly  .menu .item, 
.ui.dropdown.readonly  .icon {
    display: none;
}
/* 2021-06-14 @ 07:59  re-enable pointer events on disabled fields so we can still use the scrollbars on disabled textareas */
.ui.form .disabled.field, .ui.form .disabled.fields .field, .ui.form .field :disabled {
	pointer-events: initial;
}

/* 2021-04-09 @ 18:41 (as of SUI 2.4.1) .ui.table[class*="top aligned"] tries to apply itself to the table which doesn't work because vertical-align only applies to inline and table-cell elements. Fix by appending " TD"  */
.ui.table[class*="top aligned"] td {
  vertical-align: top;
}

/* 2021-02-08 @ 17:38 don't remove the scrollbar when a modal or popup is opened (because of the strange shifting of all content to the right due to the missing scrollbar) 
body.animating.in.dimmable, body.dimmed.dimmable {
	overflow: initial !important;
}
*/

/* gripper for toggle was white with no border, which doesn't work for white backgrounds. Restore the box-shadow. */
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after,
.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
}
.ui.toggle.checkbox[class*="right floated"] {
    float: right !important;
    margin-right: 0em !important;
    margin-left: 1em !important;
}
/* 2021-08-12 @ 10:55  need a toggle checkbox with a red background for the recruiter_view (2fa lockout) */
.ui.red.toggle.checkbox input:focus:checked ~ .box:before,
.ui.red.toggle.checkbox input:focus:checked ~ label:before,
.ui.red.toggle.checkbox input:checked ~ .box:before,
.ui.red.toggle.checkbox input:checked ~ label:before {
    background-color: #d02121 !important
}
.ui.red.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
    background-color: grey;
}
/* checkboxes that don't have a label have extra padding that prevents them from centering. Seen in /study/info/* participants list (paid column) for example */
.ui.checkbox .box:empty,
.ui.checkbox label:empty {
	padding-left: 0;
}

#contact-cards {
    overflow-y: scroll;
}
.card-buttons {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

/* better than using !important on all elements because jquery has trouble with that when showing/hiding. */
.ui.form .hidden {
    display: none;
}
.ui.selection.dropdown {
    min-width: initial;
}

/* 2021-06-10 @ 16:34 textarea is styled differently than text input. I want them to be the same for dynamic-resizing textareas that are inline with text input fields */
.ui.form textarea {
    font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding: .67857143em 1em;
    line-height: 1.21428571em;
}
.ui.form textarea.inline {
    height: 2.714em;
}

/* === DataTables Formatting and Fixes === */

/* invoice_list_view fixes for datatables styling */
.dataTables_wrapper #invoiceTable_info { clear: none; margin-right: 2em; float: right; }
.dataTables_wrapper #invoiceTable_filter { padding-bottom: 1em; float: right; }


/* 2017-08-31 @ 16:50 to fix duplicate sorting arrow problem when both ScrollX and FixedColumns are used together */
.DTFC_LeftBodyWrapper table.dataTable.table thead th.sorting_asc::after, 
.DTFC_LeftBodyWrapper table.dataTable.table thead td.sorting_asc::after {
	content: "";
}

/* subject_search_results_view fixes for datatables styling */
.DTFC_LeftBodyLiner { overflow-x: hidden; } /* remove scrollbar under any fixed columns */
.DTFC_ScrollWrapper { margin-bottom: .5em; }
.dataTables_wrapper #results_info { clear: none; margin-right: 2em; float: right; }
.dataTables_wrapper #results_filter { padding-bottom: 1em; float: right; }

/* abbreviate the subject notes */
.dataTable th.subject-notes,
.dataTable td.subject-notes{
    max-width: 100px;
    min-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#results_length { float: left; }
#results_paginate { float: right; }
#results th { white-space: nowrap; }


.ui.collapsible.menu {
  display: inline;
}
@media screen and (max-width: 768px) {
  .ui.collapsible.menu {
    display: block;
  }
}
.ui.collapsible.menu .header .button {
  margin: 0.5em;
  display: none;
}
@media screen and (max-width: 768px) {
  .ui.collapsible.menu .header .button {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .ui.collapsible.menu .content {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .ui.collapsible.menu .content .item, .ui.collapsible.menu .content .menu {
    display: block;
    float: none;
    clear: both;
  }
}

.description.view {
  margin: 60px 1%;
}

/* Semantic UI colors for text */
.ui[class*="info text"]        { color: #276F86; }
.ui[class*="warning text"]  { color: #F2C037; }
.ui[class*="negative text"],
.ui[class*="error text"]      { color: #DB2828; }
.ui[class*="positive text"],
.ui[class*="success text"]  { color: #21BA45; }

.ui[class*="white text"] {  color: #FFFFFF; }
.ui[class*="grey text"] {   color: #CCCCCC; }
.ui[class*="dark grey text"] { color: #777777; }
.ui[class*="black text"] {  color: #1B1C1D; }
.ui[class*="yellow text"] { color: #F2C61F; }
.ui[class*="teal text"] {   color: #00B5AD; }
.ui[class*="red text"] {    color: #D95C5C; }
.ui[class*="purple text"] { color: #564F8A; }
.ui[class*="pink text"] {   color: #D9499A; }
.ui[class*="orange text"] { color: #E07B53; }
.ui[class*="green text"] {  color: #5BBD72; }
.ui[class*="blue text"] {   color: #3B83C0; }

/* Semantic UI colors for backgrounds */
/* conflicts with .ui.red.header to make text red
.ui[class*="white background"] {  background-color: #FFFFFF !important; }
.ui[class*="grey background"] {   background-color: #CCCCCC !important; }
.ui[class*="black background"] {  background-color: #1B1C1D !important; }
.ui[class*="yellow background"] { background-color: #F2C61F !important; }
.ui[class*="teal background"] {   background-color: #00B5AD !important; }
.ui[class*="red background"] {    background-color: #D95C5C !important; }
.ui[class*="purple background"] { background-color: #564F8A !important; }
.ui[class*="pink background"] {   background-color: #D9499A !important; }
.ui[class*="orange background"] { background-color: #E07B53 !important; }
.ui[class*="green background"] {  background-color: #5BBD72 !important; }
.ui[class*="blue background"] {   background-color: #3B83C0 !important; }
*/

/* Semantic UI-compatible container for multiple .ui.message divs. 
   Used for mutliple notification messages
*/
.ui.messages {
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -ms-flex-direction:column;
 flex-direction:column;
 position:relative;
 margin:1rem 0;
}
.ui.messages:first-child {
 margin-top:0
}
.ui.messages:last-child {
 margin-bottom:0
}


#confirmation-container {
    margin: 1em auto;
    max-width: 650px;
    padding: 1em 2em;
}
/* this was for the inline-editing of confirmation messages - on hold 2018-02-16 @ 15:35 
#confirmation-body:hover {
    border-color: black;
} */
#confirmation_preview h4 { margin-top: 0}
#confirmation_preview iframe {
  margin-right: 1em;
  background-color: #fffbf7;
  border: 1px solid #ddd;
  width: 100%;
  height: 310px;
  overflow-y: auto;
  padding: 0;
}

/* add capability for right aligned fields */
.ui.form .right.aligned.fields { justify-content: end; }
.ui.form .center.aligned.fields { justify-content: center; }
.ui.form .spaced.fields { justify-content: space-between; }

/* remove bottom margin from .fields with ".compact" */
.ui.form .compact.fields {
 margin-bottom: unset;
}

/* add vertical dividers between .fields in a .fields div */
.ui .vertically.divided.fields > .field:not(:first-child) {
    border-left: 1px solid #dededf;
    margin-left: .75em;
}

/* proper width for the "dobrowse" type fields used in subject_search_view */
.inline.yesno.field .ui.dropdown.selection { width: 5rem; }

.ui .inline.fields .field { display: inline-block; }
.ui .inline.fields { display: inline-block; width: 100%; }
form.ui.inline.form { display: inline-block; }

/* allow for a horizontal inline accordion that turn into a block when activated */
.ui.inline.accordion .title,
.ui.inline.accordion .field { display: inline-block; }
.ui.inline.accordion .title { margin-right: 3em; }
/* override for official .field > :first-child */
.ui.inline.accordion.field > :first-child { margin-right: 3em; }
.ui.inline.accordion .title.active { display: block; }
/* remove margins from accordion fields */
.ui.accordion.field { 
	clear: both;
	margin: 0em 0em 0em;
    color: red;
}


/* for text that's between two fields. It normally is aligned to the top but we want centered. */
.ui .text.field {
    padding-top: .7em;
}

/*Override*/
.ui.menu,
.ui.dropdown {
    opacity: 1;
    z-index: 1;
}
.ui.menu .item {
    cursor: pointer;
}

.go-behind {
    position: relative !important;
    /* z-index: -1 !important; */
}

/*--- LtOrange ---*/

/* CHANGE COLORS TO GET A LIGHT ORANGE COLOR */
.ui.ltorange.buttons .button,
.ui.ltorange.button {
  background-color: #F2711C;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}

.ui.ltorange.button {
  box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}

.ui.ltorange.buttons .button:hover,
.ui.ltorange.button:hover {
  background-color: #f26202;
  color: #FFFFFF;
  text-shadow: none;
}

.ui.ltorange.buttons .button:focus,
.ui.ltorange.button:focus {
  background-color: #e55b00;
  color: #FFFFFF;
  text-shadow: none;
}

.ui.ltorange.buttons .button:active,
.ui.ltorange.button:active {
  background-color: #cf590c;
  color: #FFFFFF;
  text-shadow: none;
}

.ui.ltorange.buttons .active.button,
.ui.ltorange.buttons .active.button:active,
.ui.ltorange.active.button,
.ui.ltorange.button .active.button:active {
  background-color: #f56100;
  color: #FFFFFF;
  text-shadow: none;
}

/* Basic */

.ui.basic.orange.buttons .button,
.ui.basic.orange.button {
  box-shadow: 0px 0px 0px 1px #F2711C inset !important;
  color: #F2711C !important;
}

.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
  background: transparent !important;
  box-shadow: 0px 0px 0px 1px #f26202 inset !important;
  color: #f26202 !important;
}

.ui.basic.orange.buttons .button:focus,
.ui.basic.orange.button:focus {
  background: transparent !important;
  box-shadow: 0px 0px 0px 1px #e55b00 inset !important;
  color: #f26202 !important;
}

.ui.basic.orange.buttons .active.button,
.ui.basic.orange.active.button {
  background: transparent !important;
  box-shadow: 0px 0px 0px 1px #f56100 inset !important;
  color: #cf590c !important;
}

.ui.basic.orange.buttons .button:active,
.ui.basic.orange.button:active {
  box-shadow: 0px 0px 0px 1px #cf590c inset !important;
  color: #cf590c !important;
}

.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
  margin-left: -1px;
}

/* Inverted */

.ui.inverted.orange.buttons .button,
.ui.inverted.orange.button {
  background-color: transparent;
  box-shadow: 0px 0px 0px 2px #FF851B inset !important;
  color: #FF851B;
}

.ui.inverted.orange.buttons .button:hover,
.ui.inverted.orange.button:hover,
.ui.inverted.orange.buttons .button:focus,
.ui.inverted.orange.button:focus,
.ui.inverted.orange.buttons .button.active,
.ui.inverted.orange.button.active,
.ui.inverted.orange.buttons .button:active,
.ui.inverted.orange.button:active {
  box-shadow: none !important;
  color: #FFFFFF;
}

.ui.inverted.orange.buttons .button:hover,
.ui.inverted.orange.button:hover {
  background-color: #ff7701;
}

.ui.inverted.orange.buttons .button:focus,
.ui.inverted.orange.button:focus {
  background-color: #f17000;
}

.ui.inverted.orange.buttons .active.button,
.ui.inverted.orange.active.button {
  background-color: #ff7701;
}

.ui.inverted.orange.buttons .button:active,
.ui.inverted.orange.button:active {
  background-color: #e76b00;
}

/* Inverted Basic */

.ui.inverted.orange.basic.buttons .button,
.ui.inverted.orange.buttons .basic.button,
.ui.inverted.orange.basic.button {
  background-color: transparent;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}

.ui.inverted.orange.basic.buttons .button:hover,
.ui.inverted.orange.buttons .basic.button:hover,
.ui.inverted.orange.basic.button:hover {
  box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  color: #FF851B !important;
}

.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.button:focus {
  box-shadow: 0px 0px 0px 2px #f17000 inset !important;
  color: #FF851B !important;
}

.ui.inverted.orange.basic.buttons .active.button,
.ui.inverted.orange.buttons .basic.active.button,
.ui.inverted.orange.basic.active.button {
  box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  color: #FF851B !important;
}

.ui.inverted.orange.basic.buttons .button:active,
.ui.inverted.orange.buttons .basic.button:active,
.ui.inverted.orange.basic.button:active {
  box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
  color: #FF851B !important;
}

.ui .highlighted.segment {
    background-color: #C4DAE8;
    background-color: #D7E0E7;
    background-color: #D9E7F0;
    background-color: #f8f8f8;
}

#search-results .ui.container { width: 99%; }

/* borders for map images */
img.map {
  border-radius: .5em;
  border: 2px solid black;
}

/* when a link needs to look like a disabled field */
.fake-disabled-field {
    display: inline-block;
    background-color: #93f6f2;
    background-color: white;
    /* color: #0f7392; */
    color: #000;
    padding: .65em;
    border-radius: 4px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fake-disabled-field:hover {
    text-decoration: underline;
    color: black;
}

/* used so we can insert a line-break into tooltips by using 
 as a line-break */
[data-tooltip]::after {
    white-space: pre;
}

/* --- Animations --- */

@keyframes blinky {
  0%  { opacity: 0; }
  50% { opacity: 1; }
}
.blinking-alert {
    animation: blinky .5s;
    animation-iteration-count: 4;
    animation-timing-function: steps(1);
}
.blinking,
.blinking::before {  /* ::before required for icons */
    animation: blinky 1.2s infinite;
    animation-timing-function: steps(1);
}


.bar {
  float: left;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background-color: #21ba45;
}

.sending p {
  margin-bottom: 0;
}
.sending .bar {
  animation: sending 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

@keyframes sending {
  0%,100% { 
    transform: translate(0, 0); 
  }
  50% { 
    transform: translate(80px, 0); 
  }
}

data.hover:hover:after {
    content: " (ID: " attr(value) ")";
    font-size: small;
    font-weight: normal;
    line-height: 1em;
    color: #777777;
}
    
/* CKEDITOR custom styles */
.cke_combo_text { width:auto !important; } /* 2020-11-02 @ 16:42 PJB fit toolbar on one line by narrowing combobox dropdowns */

/* Additional "bigger" icon size for Semantic UI */
i.bigger.icon, i.bigger.icons {
	line-height: 1;
	vertical-align: middle;
	font-size: 3em;
}

/* UTILITY and OVERRIDE styles */
.hidden { display: none; }
.invisible { visibility: hidden; }
.clickable { cursor:pointer !important; }
.faded { opacity: 0.5; }
.no-bottom-margin { margin-bottom: 0; }
.no-top-margin { margin-top: 0; }
.no-margin { margin: 0; }
/* collapse h1+h2 margins when a page has a subtitle */
h1.ui.header+h2.ui.header,
h1.ui.header+h3.ui.header
    { margin-top: -.25em; }
.error { color: #DB2828; }
/* for div clearing after a floated element */
.clearing:after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}