.top-right 
{
    position: absolute;
    right: 10px;
    top: 18px;
}

.nobreak
{
    white-space: nowrap;
}

/*
to position elements in a table cell right
*/
.cell-right
{
    position: absolute;
    right: 15px;    
}

td.text-align-right
{
    text-align: right;
}

/* indents */
.text-indent-10
{
     text-indent:10px;
}

.text-indent-15
{
     text-indent:15px;
}

.text-indent-20
{
     text-indent:20px;
}

.text-indent-25
{
     text-indent:25px;
}

.text-indent-30
{
     text-indent:30px;
}

/* adapts images to view size */
.responsive-picture {
    max-width: 100%;
    height: auto;	
}

/*
inserts space before an element sourrounded by span i.e. <span class="tabX">txt</span>
*/
span.tab5{
    padding: 0 5px;
} 

span.tab10{
    padding: 0 10px;
} 

span.tab15{
    padding: 0 15px;
} 

span.tab20{
    padding: 0 20px;
} 
            
/*
to generate table with rounded borders
especially for the eventlists
*/
table.separate {  
    padding: 0px; 
    border: 0px; 
    border-radius: 10px; 
    margin: 10px; 
    border-spacing: 0; 
    border-collapse: separate; }

table.separate td {  
    padding: 5px 12px; 
    border-bottom: 1px solid #343a40; 
    border-right: 1px solid #343a40; 
    border-top: 1px solid #343a40; 
} 

table.separate th {  
    padding: 5px 12px; 
    border-bottom: 1px solid #343a40; 
    border-right: 1px solid #343a40; 
}
//table.separate th {  padding: 5px 12px; border-bottom: 0px solid #343a40; border-right: 0px solid #343a40; }
//table.separate th { background: linear-gradient(to left, rgba(0, 0, 0, 0), #343a40, #343a40); color: white; }

table.separate tr:first-child td:first-child {
    border-bottom-left-radius:0px; //10px
}

table.separate tr:last-child td:last-child {
    border-bottom-right-radius:0px; //10px
}

table.separate tr th:first-child,
table.separate tr td:first-child {
   border-left: 1px solid #343a40;
}

table.separate tr:first-child th,
table.separate tr:first-child td {
   border-top: 1px solid #343a40;  //0px
}

table.separate tr:first-child th:first-child {
    border-top-left-radius: 0px; //10px
}

table.separate tr:first-child th:first-child,
table.separate tr:last-child th:last-child{
    border-top-right-radius:0px; //10px
}

table.col-size tr td:last-child {
    width: 50px;
}

tr.title {
    border-right: 0px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #343a40, #343a40); 
    color: white;
    font-weight: bold;
}

tr.date-field {
    border: 0px solid white;
    background: #707579;
    color: white;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

tr.no-border {
  border: 0;
}

tr.devider {
    border: 0px solid white;
    background: #707579;
}

hr.table-devider {
  border: 0; 
  height: 3px; 
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #343a40, #343a40);
}

/* sticky footer */
#site {
   position: relative;
   min-height: 100%;
   width: 100%;
   margin: 0 auto;
   background-color: white; 
}

#content {
    width: 100%;
    margin-left: auto; /* center <div> element horizontal */
    margin-right: auto; /* center <div> element horizontal */
    background-color: "";
    padding-bottom: 11em;
}

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    min-height: 50px;
    color: white;
    background-color: #343a40;
}
/* /sticky footer */

.bg-tsg-red-c8 {
    background-color: #de002ec8;
}

/*
changing the style of the bootstrap custom checkboxes https://frontfolks.com/code/how-to-change-color-and-style-of-bootstrap-4-custom-checkbox/
*/
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
     background-color: #de002e;
     box-shadow:0 0 0px #de002e;
}
 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
     box-shadow:0 0 0px #de002e;
}
 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
     box-shadow:0 0 0px #DE002E;
     background:rgba(222,0,46,.3);
}
 .custom-checkbox .custom-control-label::before {
     border-radius: 0.25rem;
}
 .custom-control-label::before {
     background-color:white;
}

/*
makes the clear button in inputfields type="search" visible
*/
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

/*
overrides booststrap btn-danger with another red
*/
.btn-danger {  
  background-color: #de002e;
  border-color: #de002e;
}
.btn-danger:hover {  
  background-color: #d0003a; /*darker: #ae0003a*/
  border-color: #c51f1a;
}

/*
makes the background fading from grey to white for i.e. card-headers
*/
.grey-to-white {
    color: white;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #343a40, #343a40);
}

/*
* makes the text red and font smaller for form error messages after failed validation
*/
.failed_validation {
    color: #de002e;
    font-size: smaller;
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

hr.dashed {
    border-top: 2px dashed #343a40;
}

hr.dotted {
    border-top: 2px dotted #343a40;
}

hr.solid {
    border-top: 2px solid #343a40;
}

/* change color of glyphicons */
.white {
	color: white;
}

.blue {
	color: #0000FF;
}

.green {
	color: green;
}

.red {
	color: #de002e;
}

.black {
	color: black;
}

.grey {
	color: grey;
}

.dark-grey {
	color: #343a40;
}

.gold {
	color: #FFD700;
}

.glyph-silver {
	color: #c0c0c0;
}

.bronze {
	color: #cd7f32;
}

ul.none {
    list-style: none;
}