/*********************************
company: s2you
subject: s2you-portal
document: global.css
author: Plitek
date: 18.12.2002

GLOBAL
**********************************/
input::-webkit-calendar-picker-indicator {
    opacity: 100;
}

/* -----------------------------------------------------------------------------------------------
Body
----------------------------------------------------------------------------------------------- */

.BodyPageControl {
    /*background-color: #F6F7E7;
      background-color: #E8E9E1; (dunkler)
      background-color: #F4F5ED; (heller)
      background-color: #F1F2EA; (noch heller)*/
    background-color: #F1F2EA;
}

.BodyChannelStandard {
    /*background-color: #F3F4EF;*/
    background-color: #FFFFFF;
}

.BodyChannelOverview {
    background-color: #FFFFFF;
}

.BodyPageHeading {
    /*background-color: #F3AD00; (orange)*/
    background-color: #FFFFFF;
}

/* -----------------------------------------------------------------------------------------------
Version
----------------------------------------------------------------------------------------------- */

.version {
    color: #AAAAAA;
    font-size: 0.8rem;
}

/* -----------------------------------------------------------------------------------------------
ContentArea
----------------------------------------------------------------------------------------------- */

.Abstract {
    color: #000000;
    font-size: 11px;
}

p.Abstract {
    margin: 2px 3px 6px 2px;
    line-height: 15px;
}

.Note {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: gray;
    margin: 0pt 0pt 0pt 0pt
}

a.Note {
    color: #990000;
    font-weight: normal;
}

p.CategoryHeading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 12pt;
    font-weight: bold;
    line-height: 18px;
    margin: 3pt 3pt 3pt 2pt;
}

.Table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    margin: 0pt 2pt 0pt 2pt
}

td.register {
    background-color: #ffffff;
}

tr.TableRow {
    background-color: #F3F3EB
}

.table-hover tbody tr:hover td input {
    color: black;
}

.table tr.disabled {
    background: #c3c3c3;
    opacity: 0.6;
}

.table td.center {
    text-align: center;
}

.table td,
.table th {
    padding: 3px;
}

.table-hover tbody tr:hover td a {
    color: #ffffff;
}

.table-hover tbody tr:hover td a:hover {
    background-color: transparent;
}

.table-hover tbody tr:hover, .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #4681F5;
    color: #FFFFFF;
}

p.Table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: normal;
    font-size: 8pt;
}

/* --Config for form */
form i.warning-sign {
    color: #c50000;
}

.s4y-info-popover {
    background-image: url('data:image/png;base64,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');
    background-size: contain;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    cursor: pointer;
    box-sizing: border-box;
}

.s4y-info-popover:hover {
    border: solid 1px;
    border-radius: 1.4rem;
}

form .label-normal {
    font-size: 11px !important;
    font-weight: normal !important;
    display: inline-block !important;
    margin-right: 5px;
}


/* ----- Monitoring Findings List ------ */

.Discarded {
    color: #999999;
}

/* -----------------------------------------------------------------------------------------------
ContentArea Heading
----------------------------------------------------------------------------------------------- */

.Abstract, .AbstractH1, .AbstractH2 {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}

.AbstractH1 {
    color: #000066;
    font-size: 11pt;
    font-weight: bold;
    margin: 1pt;
}

.AbstractH2 {
    color: #000000;
    font-size: 11pt;
    font-weight: bold;
    margin: 6pt 0pt 4pt 0pt;
}

/* -----------------------------------------------------------------------------------------------
Infoboxes
----------------------------------------------------------------------------------------------- */

p.InfoboxTitle {
    font-size: 10pt;
    font-weight: bold;
    margin: 6px 4px 6px 2px;
}

p.InfoboxTitleVar1 {
    font-size: 10pt;
    font-weight: bold;
    color: #5A7C14;
    margin: 6px 4px 6px 2px;
}

a.InfoboxTitle {
    color: #990033;
    font-weight: bold;
}

.InfoboxTitle {
    /*color: #990000; (dunkelrot)*/
    /*color: #990033; (dunkelrot desaturiert)*/
    color: #990033;
    font-weight: bold;
}

/* -----------------------------------------------------------------------------------------------
Channel-Footer
----------------------------------------------------------------------------------------------- */

a.ChannelFooter {
    color: #999999;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
}

p.ChannelFooter {
    color: #999999;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal;
    margin: 1pt 1pt;
}

a.Quicklink {
    color: #999999;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
}

p.Quicklink {
    color: #999999;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal
}

a.SiteInformation {
    color: #990000;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
}

p.SiteInformation {
    color: #990000;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 8pt;
    font-weight: normal;
    margin: 2pt 1pt;
}

/* -----------------------------------------------------------------------------------------------
Actions
----------------------------------------------------------------------------------------------- */

a.PageActions {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    /*color: #000033; (dunkelblau)
      color: #990033; (dunkelrot)*/
    color: #990033;
    font-weight: normal;
    font-size: 8pt;
}

p.PageActions {
    margin: 2pt 0pt;
}

.Actions {
    color: Gray;
    font-weight: normal;
    font-size: 8pt;
}

p.Actions {
    margin: 2pt 0pt;
}

/* -----------------------------------------------------------------------------------------------
HTML Headings
----------------------------------------------------------------------------------------------- */

H1 {
    color: #333333;
    font-size: 12pt;
    font-weight: bold;
}

H1, H2, H3, li, p {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}

H2 {
    font-size: 11pt;
    font-weight: bold;
}

H3 {
    font-size: 10pt;
    font-weight: bold;
}

/* -----------------------------------------------------------------------------------------------
Heading
----------------------------------------------------------------------------------------------- */

p.HeadingCategory {
    color: Black;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

a.HeadingCategory {
    color: Black;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

p.SideboxTitle {
    color: #000033;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* -----------------------------------------------------------------------------------------------
Teaser
----------------------------------------------------------------------------------------------- */

.Teaser {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    color: #000000;
    font-size: 11px;
}

p.Teaser {
    margin: 3pt 2pt 2pt 2pt;
    line-height: 13px;
}

/* -----------------------------------------------------------------------------------------------
taxname
----------------------------------------------------------------------------------------------- */

.Taxname {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 11px;
}

p.Taxname {
    margin: 2pt 1pt 1pt 1pt;
    line-height: 12px;
}

/* -----------------------------------------------------------------------------------------------
Shop
----------------------------------------------------------------------------------------------- */

.Shop {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 9px;
}

td.Shop {
    vertical-align: top;
}

p.Shop {
    font-family: Verdana, Helvetica, sans-serif;
    color: #000000;
    font-size: 10px;
    margin: 1pt 1pt 1pt 1pt;
    vertical-align: top;
    line-height: 13px;
}

p.ShopTeaser {
    margin: 2pt 2pt 2pt 2pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 9px;
    line-height: 13px;
}

/* -----------------------------------------------------------------------------------------------
Structure
----------------------------------------------------------------------------------------------- */

div.StructureHint {
    margin-bottom: 0.5rem;
}

p.StructureHint {
    color: #666666;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    margin: 3pt 1pt 1pt 3pt;
    border-bottom: 1px solid #FF0099;
}

/* hanhle: 03.10.16- style for help icon in caption of a page*/

.btn.static-help {
    background-color: transparent;
    border-color: transparent;
    color: #00c5ff;
    margin: 0px;
}

td.StructureHint {
    /*background-color : #B6BAAC;*/
    background-color: #FFFFFF;
}


/* -----------------------------------------------------------------------------------------------
Other HTML Tags
----------------------------------------------------------------------------------------------- */

ul, ol {
    margin-top: 2px;
    list-style-position: inside;
}

ol, li {
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}

p {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 11px;
    margin: 0px 0px 0px 2px;
}

p.classify {
    font-size: 12px;
    font-weight: bold;
    margin: 3px 0px 2px 4px;
}

.classify {
    color: #990033;
    font-weight: bold;
}


/* -----------------------------------------------------------------------------------------------
Images
----------------------------------------------------------------------------------------------- */

.ImageTitle {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    color: #000000;
    font-size: 9px;
}

p.ImageTitle {
    margin: 3pt 2pt 2pt 2pt;
    line-height: 11px;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------------------------------
Plates
----------------------------------------------------------------------------------------------- */

.PlateTitle {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
    line-height: 14px;
    margin: 6pt 1pt 1pt 3pt;
}

table.image_left {
    margin: 0pt 10pt 10pt 0pt;
}

table.image_right {
    margin: 0pt 0pt 10pt 10pt;
}

/* -----------------------------------------------------------------------------------------------
DataPaging
----------------------------------------------------------------------------------------------- */

#forumHeadPanel {
    background-color: #FFDDFF;
}

div.dpArea {
    /*position: top;*/
    height: 50px;
    border: solid 1px;
    color: red;
    background-color: lightgrey;
}

div.dpTitle {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 11px;
    line-height: 15px;
    margin: 0px 0px 0px 2px;
    font-weight: bold;
}

div.dpFirst {
    background-color: #EEFFFF;
}

div.dpNext {
    background-color: #FFFFEE;
}

div.dpLast {
    background-color: #FFEEFF;
}

p.dpTitle {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 11px;
    line-height: 15px;
    margin: 0px 0px 0px 2px;
    font-weight: bold;
}

p.dpLinkSelected {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 11px;
    line-height: 15px;
    margin: 0px 0px 0px 2px;
    text-decoration: underline;
}

a.dpLink {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    text-decoration: none;
    color: #990033;
    font-weight: normal;
}

a.dpLink:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------------------------
DataPaging2
----------------------------------------------------------------------------------------------- */
.s4-datapaging {
    float: left;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
}

ul.pagination2 {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination2 li {
    display: inline;
}

ul.pagination2 li a {
    color: black;
    float: left;
    padding: 4px 8px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination2 li a.active,
ul.pagination2 li.active a {
    background-color: #99CC00;
    color: white;
    border: 1px solid #99CC00;
}

ul.pagination2 li a:hover:not(.active) {
    background-color: #ddd;
}


p.dpLinkSelected {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 15px;
    margin: 0px 0px 0px 2px;
    text-decoration: underline;
}

a.dpLink {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #990033;
    font-weight: normal;
}

/* -----------------------------------------------------------------------------------------------
DataPaging
----------------------------------------------------------------------------------------------- */

.forumNote {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: black;
    margin: 0px 0px 0px 0px
}


/* -----------------------------------------------------------------------------------------------
Displaytag
----------------------------------------------------------------------------------------------- */
.displaytag {
    color: black;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
}

table.displaytag {
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.displaytag thead tr th {
    background-color: #eee;
    padding: 2px 4px 2px 4px;
    text-align: left;
    vertical-align: top;
    font-size: 11px;
    font-weight: normal;
}

table.displaytag tr.even {
    background-color: #F9ECB9;
}

table.displaytag tr.odd {
    background-color: #FEFFC3;
}

table.displaytag td, table.displaytag th {
    padding: 2px 1px 2px 1px;
    border: 1px solid #ccc;
    vertical-align: top;
    font-size: 12px;
    border-collapse: collapse;
    color: black;
}

table.displaytag th.order1 {
    color: #3300FF;
}

table.displaytag th.order2 {
    color: #3300FF;
}

table.displaytag th.sorted {
    color: #3300FF;
}

table.displaytag th.sortable {
    color: #FF0033;
}


.exportlinks {
    margin: 5px 0px 5px 0px;
    padding: 3px 3px 3px 3px;
    background: #eee;
    border: 1px solid #ccc;
}

.pagebanner {
    padding: 2px 2px 2px 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #eee;
}

.pagelinks {
    margin: 5px 5px 5px 5px;
    padding: 2px 2px 2px 2px;
    background: #eee;
    border: 1px solid #ccc;
}


span.export.displaytag {
    margin: 5px 5px 5px 5px;
    padding: 0 4px 1px 20px;
    display: inline;
    cursor: pointer;
    background: #eea;
}

span.pagebanner.displaytag {
    background-color: #fff;
    border: 0;
    padding: 2px 4px 2px 4px;
    width: 79%;
    display: block;
}

span.pagelinks.displaytag {
    background-color: #eee;
    border: 1px dotted #999;
    padding: 2px 4px 2px 4px;
    width: 79%;
    display: block;
    margin-bottom: 5px;
}


/* -----------------------------------------------------------------------------------------------
Displaytag
----------------------------------------------------------------------------------------------- */


/* Test: anderer Style */

.tmd {
    color: black;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 11px;
}

table.tmd {
    margin: 20px 0 20px 0;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

table.tmd thead tr th {
    color: black;
    background-color: #db8;
    padding: 2px 4px 2px 4px;
    text-align: left;
    vertical-align: top;
    font-size: 11px;
    font-weight: bold;
}

table.tmd tr.even {
    background-color: #fff;
}

table.tmd tr.odd {
    background-color: #cfc;
}

table.tmd td, table.tmd th {
    border: 1px solid #ccc;
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}

.its {
    color: blue;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

table.its {
    margin: 20px 0 20px 0;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

table.its thead tr {
    background-color: #69c;
}

table.its tr.even {
    background-color: #def;
}

table.its tr.odd {
    background-color: #aff;
}

table.mars thead tr {
    background-color: #9c9;
}

table.mars tr.even {
    background-color: #ccb;
}

table.mars tr.odd {
    background-color: #eec;
}

/* -----------------------------------------------------------------------------------------------
Bildtafeln
----------------------------------------------------------------------------------------------- */

table.Gallery2 {
    /*background-color: #F5F8FD*/
    /*background-color: #E5EAF6*/
    background-color: #DDDDDD;
}

td.Gallery2 {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    color: #263B7B;
    font-weight: normal;
    font-size: 9px;
}

/*------ css ------------------------------*/

.plate-image-box {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    width: 215px;
    /*- Avoid scale width when image is not loading -*/
    min-width: 200px;
    padding: 5px;
    background-color: #DDD;
    margin: 2px;
    border-radius: 8px;
    border: 2px solid #AAA;
    float: left;
    position: relative;
}

/* hanhle - 29.03.2019 - Support deleting highlight */
.plate-image-box.deleted {
    background: red;
    opacity: 0.5;
    cursor: not-allowed;
}

.plate-image-box.selected {
    border-color: #8aab50;
    border-style: dashed;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.plate-image-box.deleted * {
    pointer-events: none;
    z-index: -1;
}

.plate-image-innerbox {
    width: 100%;
    height: 204px;
    background-color: #DDD;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    border: 0px;
}

.plate-image-innerbox > table {
    margin: auto;
}

.plate-image-info {
    width: 100%;
    max-height: 70px;
    background-color: #EEE;
    font-size: 0.8rem;
    color: #333;
    margin: 0;
    border-top: 2px dotted grey;
    padding: 2px;
    border-collapse: collapse;
    border-spacing: 0;
}

.plate-image-info2 {
    width: 100%;
    /*   padding: 2px; */
    padding-bottom: 3px;
    background-color: #EEE;
    vertical-align: top;
    font-size: 1.2em;
    color: #333;
    margin: 0px;
}

.plate-image-info2 .image-location {
    -webkit-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
    margin: 0px;
    padding: 0px;
    height: 18px;
}

.plate-image-info2 .image-location i {
    color: #3c763d;
    margin: 0px;
}

/**
** Custom style for image plate
*/
.plate-image-info .trivialname,
.plate-image-info .validname,
.plate-image-info .sciencename {
    max-width: 200px;
    width: 100%;
}

.trivialname, .validname, .sciencename {
    width: 28ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    /* Avoid break layout when missing */
    height: 1.2rem;
    font-size: 0.9rem;
}

/* Add default color for trivial name */
.trivialname {
    font-weight: bold;
    color: #FF6600;
}


.report-problem-container form > * {
    padding: 10px;
}

.report-problem-container input[type="text"], .report-problem-container textarea {
    border: solid 1px grey;
}

.report-problem-container input[type="radio"], input[type="checkbox"] {
    vertical-align: sub;
}

/*------------------------------*/

.choice {
    font-size: 0.8em;
    color: red;
    font-weight: bold;
}

.filterSettings {
    padding: 3px 3px 3px 3px;
    background: #EEE;
    font: 0.9em Verdana, sans-serif;
    border: 1px solid #ccc;
}

p.filterSettings {
    font-size: 0.8em;
    color: black;
}

h2.filterSettings {
    font-size: 0.8em;
    color: black;
    font-weight: bold;
}

h3.filterSettings {
    font-size: 0.8em;
    color: red;
    font-weight: bold;
}

.panelActions {
    margin-right: 20px;
    padding: 5px;
    text-align: right;
}

/*----------------- jobs ------------------------*/

#jobs {
    width: 600px;
    padding: 5px;
    margin: 5px;
}

#jobs p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    line-height: 1.2em;
    padding: 2px;
    margin: 2px;
}

#jobs-id {
    background: #AEE;
    float: left;
    width: 200px;
    padding: 3px;
}

#jobs-projekt {
    background: #EAE;
    float: right;
    width: 200px;
    padding: 3px;
}

#jobs-thema {
    clear: both;
    background: #EEA;
    padding: 3px;
}

#jobs-status {
    background: #AEA;
    padding: 3px;
}

#jobs-buttons {
    background: #EEE;
    padding: 3px;
}

/* -- f�r ajax-upload --*/

contentDiv {
    font-family: arial;
    font-size: 14px;
}

.error {
    color: red;
}

.warning {
    float: left;
    color: #9b6c16;
}

.error:not(label) {
    border: solid 1px red !important;
}

/* multimedia-files */


/* page layout */

div.heading {
    padding: 4px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ccc;
}

/* object stuff */

.mediaplugin {
    margin: 0px;
    padding: 4px;
    border: 1px dotted #ccc;
    overflow: visible;
}

/* 'get plugin' links */

a.plugin {
    text-decoration: underline;
}

#multimedia {
    top: 20px;
    margin-left: 220px;
}

/* -- maps-plate --*/

.plate-map-container {
    float: left;
    padding: 2px;
}

.plate-map-box {
    width: 210px;
    height: 340px;
    padding: 2px;
    background-color: #eee;
    margin: 0px;
    border: 1px solid #0000EE;
}

.plate-map-innerbox {
    height: 290px;
    padding: 0;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    border: 0px solid #0000EE;
}

.plate-map-info-top {
    height: 40px;
    background-color: #eee;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: #666;
    margin: 0;
    border: 0;
    padding: 0;
}

.plate-map-info-bottom {
    height: 1.2em;
    background-color: #eee;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    font-size: 0.9em;
    color: #666;
    margin: 0;
    border: 0;
    padding: 0;
}

/*---   F�r pagecontrol ---*/

.navlist {
    padding: 0 1px 1px;
    margin-left: 0;
    font: bold 12px Verdana, sans-serif;
    background: #CCC;
    width: 14em;
}

.navlist li {
    list-style: none;
    margin: 0;
    border-top: 1px solid gray;
    text-align: left;
}

.navlist li a {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.75em;
    border-left: 1em solid #AAB;
    background: #CCD;
    text-decoration: none;
}

.navlist li a:link {
    color: #448;
}

.navlist li a:visited {
    color: #222;
}

.navlist li a:link:focus {
    color: #DDD;
}

.navlist li a:hover {
    border-color: #FE3;
    color: #FFF;
    background: #332;
}

/*-- member-download --*/

ul.downloadList {
    list-style-type: none;
}

/*css-templates */

#main_twocol {
    top: 0px;
    left: 0px;
}

#left {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 195px;
    padding: 3px;
    margin: 0px;
    background-color: #eaeaea;
    border: 0px solid #0000EE;
}

/* History */

th.history {
    color: #FFFFFF;
    background-color: #FF0000;
}

tr.even td {
    color: #111111;
    background-color: #F6F7E7;
}

tr.odd td {
    color: #111111;
    background-color: #FFFFFF;
}

/* -----------------------------------------------------------------------------------------------
Taxaliste Pagecontrol 22.3.2010
----------------------------------------------------------------------------------------------- */

ul.taxalist {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    border-bottom: 1px solid #555;
}

li.taxalist {
    border-bottom: 1px dotted #555;
}

li.taxalist:hover {
    background: #dddddd;
}

li.dispgroup {
    font-weight: bold;
    font-size: 11pt;
    padding-top: 2pt;
    padding-bottom: 2pt;
    margin-bottom: 3pt;
    margin-top: 5pt;
}

p.sciencename {
    font-style: italic;
    font-size: 8pt;
    color: black;
}

/* -----------------------------------------------------
Navigations-Pagecontrol, z.B. im Admin-Bereich
-------------------------------------------------------*/

ul.navVerticalList {
    list-style-type: none;
    padding-left: 2px;
    margin-left: 2px;
    border-bottom: 1px solid #555;
}

li.listHeading {
    font-weight: bold;
    font-size: 1.2rem;
    padding-top: 2pt;
    padding-bottom: 2pt;
    margin-bottom: 3pt;
    margin-top: 5pt;
}

li.listItem {
    border-bottom: 1px dotted #555;
    padding-top: 2pt;
    padding-bottom: 2pt;
    font-size: 1rem;
}

li.listItem:hover {
    background: #dddddd;
}

/*-------------------- Transparenz                        -------------------------*/

.transparentLayer {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

/*-------------------- Login-Box  -------------------------*/


/* Mask for background, by default is not display */

#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}

/* You can customize to your needs  */

.login-popup {
    display: none;
    background: #333;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px;
    /* Safari, Chrome */;
}

img.btn_close {
    /* Position the close button */
    float: right;
    margin: -28px -28px 0 0;
}

fieldset {
    border: none;
}

fieldset[disabled] {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
}

form.signin .textbox label {
    display: block;
    padding-bottom: 7px;
}

form.signin .textbox span {
    display: block;
}

form.signin p, form.signin span {
    color: #999;
    font-size: 11px;
    line-height: 18px;
}

form.signin .textbox input {
    background: #666666;
    border-bottom: 1px solid #333;
    border-left: 1px solid #000;
    border-right: 1px solid #333;
    border-top: 1px solid #000;
    color: #fff;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 6px 4px;
    width: 200px;
}

form.signin input:-moz-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

form.signin input::-webkit-input-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

.form-horizontal .control-label.text-left {
    word-break: break-word;
    text-align: left;
}

.option-text-align {
    line-height: 20px;
}

input.input-labelize {
    background: rgba(0, 0, 0, 0);
    border: none;
    width: 100rem;
    font-size: 1rem;
    color: inherit;
    outline: none;
}

.button {
    background: -moz-linear-gradient(top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background: -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color: #000;
    border-width: 1px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px 4px;
    margin-top: 10px;
    font-size: 12px;
    width: 214px;
}

.button-icon {
    -webkit-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
    margin: 0px;
    padding: 0px;
}

.button:hover {
    background: #ddd;
}


/* ********** Login-Layer ************************** */

div#loginContent {
    height: 100%;
    margin: 2px;
    background-color: grey;
}


/* ------------------------ zentrale Nachtraege 9-2015 -------------*/

p.searchresult {
    font-size: 10px;
}

table.searchresult {
    border: 1px dotted grey;
}

div.searchresult {
    margin: 2px;
    border: 1px solid grey;
}

/* ********** Select2 ************************** */

select {
    background: white;
}

.select2-hidden-accessible {
    width: 200px;
}

.select2 {
    width: 200px;
}

.select2 .select2-selection {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.datapaging {
    padding-top: 5px;
    padding-bottom: 5px;
}

.itemPaging {
    padding-left: 10px;
}

.datapaging a.active {
    color: #99cc00;
}

#image-search-form {
    /*border: 1px solid red;*/
}

.s4-col-md-6 {
    width: 50%;
    float: left;
}

.s4-col-md-3 {
    width: 33%;
    float: left;
}

.form-group.disabled, .form-group.disabled *, .btn.disabled,
a.disabled {
    color: grey !important;
    opacity: 0.8;
    pointer-events: none;
}

.s4-form-group {
    margin: 10px;
}

.s4-form-control {
    width: 80%;
}

.s4-label-control {
    display: block;
    margin-bottom: 4px;
}

#search-wrapper {
    display: none;
}

#btn-show-search-form {
    text-decoration: underline;
    color: #99cc00;
    display: inline-block;
    width: 150px;
    cursor: pointer;
    font-weight: bold;
}

#image-search-form {
    font-size: 9pt;
}

#image-search-form label {
}

#image-search-form fieldset {
    border: 1px solid #FF6600;
}

.s4-radio-inline {
    display: inline-block;
}

.s4-form-actions {
    margin-top: 10px;
}

#btn-search {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    background-color: #FF6600;
    font-size: 8pt;
    font-weight: bold;
    color: #FFFFFF;
    border: 1px #000000;
    width: 120px;
    height: 24px;
    cursor: pointer;
    margin-left: 10px;
}

.s4-select2 {
    /*width: 100%;*/
    width: 320px;
}

.sts-group {
    cursor: pointer;
}

#specieSample {
    display: none;
}

.sensitiv {
    color: red;
    font-weight: bold;
}

.display-hide {
    display: none;
}

.child > td:first-child {
    padding-left: 15px
}

.tree-icon-collapse {
    margin-right: 5px;
}

#content .nav-tabs > li.active > a, #memberContent .member-card .nav-tabs > li.active > a {
    color: #138731;
    cursor: default;
    background-color: #ddd;
    border: 2px solid #1cc547;
    border-bottom-color: transparent;
    font-weight: bold;
}

.tab-pane {
    margin-bottom: 15px;
}


/*======================================?????
*   Teaser
==============================================*/

.s4y-teaserBox {
    margin-bottom: 3px;
    padding-bottom: 2px;
}

.s4y-teaserHead {
    margin-bottom: 3px;
    padding-bottom: 2px;
}

.s4y-teaserBody {
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*
* ====== Forum new 29.10.16 NH ==================
*/

.forumpost div {
    border: 1px solid grey;
    margin: 2px;
}

.forumpost-heading {
    background-color: #eeeeee;
    padding: 2px;
    border: 0;
    font-size: 9px;
}

.forumpost-data {
    font-size: 10px;
    color: #333333;
    background-color: #eeeeee;
    border: 0;
}

.forumpost-subject {
    margin-left: 30px;
    font-size: 11px;
    line-height: 15px;
    font-weight: bold;
    border: 0;
}

.forumpost-body {
    margin-left: 30px;
    padding: 2px;
}

.forumpost-image {
    float: right;
    margin-left: 5px;
    padding: 5px;
    border: 0;
}

div.forumpost-buttoncol li {
    list-style-type: none;
    padding: 2px 2px 2px 2px;
}

/*
* ============ generalsearch box ===============
*/

#s4-generalsearch {
    display: none;
    width: 230px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-right: 70px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.s4-generalsearchfield img {
    position: absolute;
    right: 16px;
    vertical-align: middle;
    margin-top: 2px;
    margin-bottom: 2px;
}

.s4-generalsearchfield {
    vertical-align: middle;
    font-size: 9pt;
    color: #111111;
    padding: 2px 0px;
    display: block;
    position: relative;
}

::-webkit-input-placeholder {
    color: #444444;
}

:-moz-placeholder { /* Firefox 18- */
    color: #444444;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #444444;
}

:-ms-input-placeholder {
    color: #444444;
}

/*
* ======= specieslist ================
*/

div .specieslist thead th {
    background-color: #DDDDDD;
    color: #222222;
    padding: 2px;
    font-size: 8pt;
}

p .groupname {
    font-family: Arial, Helvetica, Sans serif;
    font-weight: bold;
    font-size: 12px;
}

img.statusIcon {
    border: 0;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

img.statusIconSmall {
    border: 0;
    width: 9px;
    height: 9px;
}

img.statusAnonymous {
    opacity: 0.7;
    cursor: not-allowed;
}

.plate-image-info td {
    display: inline-table;
}

.plate-image-info td[align="left"] {
    float: left;
}

.plate-image-info td[align="right"] {
    float: right;
    text-align: right;
}

.plate-image-info a {
    display: inline-block;
    margin-right: 2px;
    /* handle in case author name is too long*/
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.plate-image-info a:focus {
    outline: none;
}

a img.statusIcon:hover,
a svg.statusIcon:hover {
    cursor: pointer;
    border: solid 1px;
    border-radius: 10px;
    box-sizing: border-box;
}

.hoverable:hover {
    cursor: pointer;
    border: solid 1px;
    border-radius: 50%;
    box-sizing: border-box;
}

a img.nonhoverable:hover {
    border: none;
    cursor: auto;
}

img.static-icon {
    width: 1.2rem;
    height: 1.2rem;
}

#observationDetail td {
    padding: 1px;
}

/*-- nh 7.3.17 forms ---  */

.gatheringNumbers {
    width: 100%;
    background-color: #D8E79C;
    margin-bottom: 4px;
    font-size: 10px;
}

.gatheringNumbers input[type="checkbox"] {
    vertical-align: middle;
    margin-top: 0px;
}

table.gatheringNumbers th {
    background-color: #dddddd;
    font-size: 9px;
    font-weight: bold;
    padding: 2px;
}

table.gatheringNumbers td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    border: 1px solid white;
}

table.gatheringNumbers td[align="left"] {
    font-size: 9px;
    font-weight: bold;
}

submit-progress {
    position: fixed;
    top: 40%;
    left: 40%;
    padding: 20px;
    margin: 20px;
    background-color: red;
    color: white;
    font-size: 14px;
}

.formErrors {
    margin-left: 5px;
    padding: 2px;
    color: red;
    font-size: 8pt;
    font-weight: bold;
}

/*-- NH 24.3.17: userlist table admin -- */

.adminUserList {
    max-width: 250rem;
}

table.adminUserList th {
    background-color: #dddddd;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.3rem;
    border-bottom: 1px solid grey;
}

table.adminUserList td {
    font-size: 1rem;
    font-weight: normal;
    padding: 0.1rem 0.3rem 0.1rem 0.3rem;
    border-bottom: 1px solid #cccccc;
}

/*  Define the background color for all the ODD background rows  */
.adminUserList tr:nth-child(odd) {
    background: #deffde;
}

/*  Define the background color for all the EVEN background rows  */
.adminUserList tr:nth-child(even) {
    background: #ffffff;
}

.userLevelActionUp {
    margin: 1px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 2px;
    border: 1px solid green;
    font-size: 11px;
    color: white;
    background-color: green;
    font-weight: bold;
}

.userLevelActionDown {
    margin: 1px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 2px;
    border: 1px solid red;
    font-weight: bold;
    font-size: 11px;
    color: white;
    background-color: red;
}

table.s4y-statistics-current {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.s4y-statistics-current th {
    background-color: #cccccc;
    padding: 2px;
    font-size: 10px;
    border-bottom: 1px solid grey;
}

.input-group-addon.active {
    cursor: pointer;
    font-weight: bolder;
}

.input-group-addon.inactive {
    font-weight: inherit;
}

div.s4y-tab-panel div.s4y-tabpanel {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    overflow: hidden;
    border: none;
}

.s4y-tabpanel ul {
    list-style: none;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid grey;
}

.s4y-tabpanel li {
    float: left;
    margin-bottom: 5px;
    margin-right: 1px;
    background-color: #fff;
    overflow: hidden;
    border-bottom: 1px solid #666;
}

.s4y-tabpanel li a {
    display: block;
    padding: 5px;
    background-color: #ccc;
    color: #000;
    border-bottom: 0;
    border: 1px solid #999;
    /* CSS 3 elements */
    webkit-border-top-right-radius: 0.50em;
    -webkit-border-top-left-radius: 0.50em;
    -moz-border-radius-topright: 0.50em;
    -moz-border-radius-topleft: 0.50em;
    border-top-right-radius: 0.50em;
    border-top-left-radius: 0.50em;
}

.s4y-tabpanel li a:hover {
    background-color: #faa;
    color: #fff;
    text-decoration: none;
}

.s4y-tabpanel .active a {
    background-color: #ffa;
    color: #f2f;
}

.s4y-tabpanel .active a:hover {
    background-color: #ffa;
    color: #f2f;
}


/* Style the buttons inside the tab */
div.s4y-tablinks {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.s4y-tab-links:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.s4y-tablinks.active {
    background-color: #ccc;
}

.s4y-img {
    width: 15px;
    vertical-align: middle;
}

.s4y-input {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid grey;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.42857143;
}

.s4y-btn {
    margin-right: 5px;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.s4y-btn2 {
    margin-right: 5px;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid #337ab7;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    color: #337ab7;
    background-color: #fff;
    border-color: #2e6da4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.s4y-btn-info {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.s4y-btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #000;
    opacity: 0.5;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #000;
    opacity: 0.5;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #000;
    opacity: 0.5;
}

:-moz-placeholder { /* Firefox 18- */
    color: #000;
    opacity: 0.5;
}

.s4y-hide {
    opacity: 0.5;
    cursor-pointer: not-allowed;
    pointer-events: none;
}

.s4y-hide-background {
    opacity: 0.5;
    cursor-pointer: not-allowed;
    pointer-events: none;
    background: #eee !important;
}

.s4y-hide-click {
    opacity: 0.5;
    /*     cursor-pointer: not-allowed; */
    /*     pointer-events: none; */
}

.s4y-stamp {
    position: absolute;
    z-index: 555555;
    left: 40px;
    top: 70px;
    font-size: 1.5rem;
    border: 1px solid red;
    background: #fff;
    color: red;
    padding: 5px;
    transform: rotate(-25deg);
}

.s4y-stamp:before {
    background: none;
    border: 2px solid red;
    content: "";
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    pointer-events: none;
}

.s4y-cursor {
    cursor: pointer
}

.s4y-btn[disabled],
button[disabled] {
    cursor: not-allowed;
    pointer-event: none;
    opacity: 0.5;
}

.s4y-btn a:active {
    background-color: #289060;
    cursor: wait;
}

.s4y-btn:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.s4y-mydata-edit h4 {
    font-size: 14px;
    font-weight: bold;
}

.s4y-mydata-edit {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dotted lightgrey;
}


.s4y-error {
    color: red !important;
    border: solid 1px red !important;
}

label.s4y-error {
    border: none !important;
}

label.s4y-label {
    font-size: 0.8rem;
    font-weight: bold;
}

.s4y-warning {
    color: #9b6c16 !important;
    border: solid 1px #9b6c16 !important;
}


@-webkit-keyframes s4you-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes s4you-spin {
    to {
        transform: rotate(360deg);
    }
}

div.s4y-formlinks {
    padding: 5px;
    background-color: #dddddd;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.s4y-formlinks ul {
    list-style: none;
}

div.s4y-formlinks li {
    float: left;
    padding: 5px;
    border: 1px solid #999999;
    background-color: #ffffff;
    height: 64px;
    margin: 3px;
}

div.s4y-formlinks li.active {
    border-color: red;
}

/* fixing floats */
.s4y-clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* a basic design for popovers */
/* .s4y-popover { */
/*   position: absolute; */
/*   height: auto !important; */
/*   real browsers */
/*   height: 400px; */
/*   IE6: treaded as min-height */
/*   min-height: 400px; */
/*   real browsers */
/*   background-color: white; */
/*   z-index: 9009; */
/*   width: 600px; */
/*   border: 2px solid #310c0c; */
/*   padding: 3px 3px 3px 3px; */
/*   top: 120px; */
/*   border-radius: 10px; */
/*   font-size:0.9em; */
/* } */


#s4y-validationLayer {
    position: absolute;
    height: auto !important;
    /* real browsers */
    height: 50px;
    /* IE6: treaded as min-height*/
    min-height: 50px;
    /* real browsers */
    background-color: white;
    z-index: 9011;
    width: 450px;
    border: 5px solid grey;;
    padding: 3px 3px 3px 3px;
    top: 120px;
    border-radius: 10px;
    padding: 5px;
    font-size: 0.9em;
}

#s4y-validationContent {
    margin-top: 5px;
    width: 100%;
}

#s4y-validationLayer #s4y-validationContent::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

#s4y-validation .header {
    margin-bottom: 2px;
    padding: 2px;
}

#s4y-validation .header p {
    font-size: 1.1em;
    color: green;
    font-weight: bold;
}

#s4y-validation .footer {
    border-top: 1px dotted lightgrey;
    margin-top: 2px;
    padding: 2px;
}

#s4y-validation .footer p {
    font-size: 0.8em;
    font-color: darkgrey;
    font-weight: normal;
}

#s4y-validation table {
    border-collapse: collapse;
    margin: 3px;
}

#s4y-validation table {
    border-collapse: collapse;
    margin: 3px;
}

#s4y-validation table,
#s4y-validation th,
#s4y-validation td {
    border: 1px solid grey;
}

#s4y-validation td {
    padding: 3px;
}

#s4y-validation tr:hover {
    background-color: #f5f5f5
}

#s4y-validation tr:nth-child(even) {
    background-color: #f2f2f2
}

/* diagrams for user activity */

div.s4y-timelist {
    margin: 10px;
    padding: 3px;
}

div.s4y-timelist table {
    width: auto;
    height: 130px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid grey;
}

div.s4y-timelist table td {
    border: 0;
    vertical-align: bottom;
    border-image-width: 0;
    padding: 0;
    margin: 0;
}


div.s4y-day {
    float: left;
    background-color: #009000;
    width: 2px;
    bottom: 0;
    margin: 0;
}

div.s4y-week {
    float: left;
    background-color: #000099;
    width: 12px;
    color: white;
    margin-left: 2px;
    margin-right: 2px;
    bottom: 0;
}

div.s4y-month {
    float: left;
    background-color: #cc4444;
    width: 60px;
    color: black;
    border-bottom: 1px solid black;
    margin-left: 3px;
    margin-right: 3px;
    bottom: 0;
}

.s4y-bar div {
    float: left;
    border-bottom: 1px solid black;
}

td.s4y-timeline-label {
    font-size: 0.8em;
    color: black;
    /*padding: auto;*/
    border-top: 1px solid grey;
    text-align: center;

}

table.s4y-table {
    border-collapse: collapse;
}

table.s4y-table tbody tr:nth-child(odd) {
    background: #ddd;
}

table.s4y-table tbody tr:hover {
    color: #fff;
    background-color: #aaffcc;
}

table.s4y-table th {
    background-color: #aaccff;
    font-size: 0.9em;
    font-weight: bold;
    padding: 3px;
}

table.s4y-table td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    border: 1px solid lightgrey;
    font-size: 1em;
    color: black;
}

table.s4y-table tfoot {
    border-top: 2px solid black;
    font-weight: bold;
    background-color: #ddd;
}

div.s4y-row-data {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.s4y-row-image {
    float: left;
}

div.s4y-cell {
    padding: 2px;
    font-size: 0.9em;
    float: left;
}

div.s4y-iconbar {
    position: relative;
}

.plate-image-info2 .smaller {
    font-size: 0.8rem;
    font-family: Arial, Helvetica;
}

.plate-image-info2 .s4y-image-name {
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

ul.s4y-iconbar {
    position: absolute;
    bottom: 10px;
}

ul.s4y-iconbar li {
    list-style-type: none;
    display: inline;
    border: 1px solid #BBB;
    padding: 0.1rem 0.2rem;
    margin: 0;
}

ul.s4y-iconbar li span {
    display: inline-block;
    width: 14px;
    line-height: 14px;
    padding: 1px 1px 1px 3px;
    text-align: center;
    font-size: 8px;
}

/* user generated plates */

div.s4y-plate-mounted-image-box {
    font-family: Arial, sans-serif;
    height: 182px;
    padding: 0;
    margin: 0;
    border: 1px solid #FFF;
    float: left;
}

div.s4y-plate-mounted-image-innerbox {
    height: 150px;
    margin: 0;
    background-color: #AAA;
}

div.s4y-plate-mounted-image-info {
    height: 70px;
    background-color: #EEE;
    font-size: 0.8em;
    color: #333;
    margin: 0;
    border-top: 2px dotted grey;
    padding: 2px;
}

div.s4y-userplate-image-box {
    font-family: Arial, sans-serif;
    width: 178px;
    /*padding: auto;*/
    background-color: #DDD;
    margin: 1px;
    border-radius: 6px;
    border: 2px solid #AAA;
    float: left;
}

div.s4y-userplate-image-innerbox {
    width: 100%;
    height: 172px;
    background-color: #DDD;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    border: 0px;
}

div.s4y-userplate-image-innerbox img {
    margin: auto;
    border: 0;
}

div.s4y-userplate-image-info {
    height: 33px;
    background-color: #DDD;
    font-size: 0.8rem;
    margin: 0;
    border-top: 1px dotted grey;
    padding: 3px;
}

div.s4y-userplate-image-info p {
    font-size: 0.8rem;
    line-height: 1rem;
    font-family: Arial, Helvetica, sans-serif;

}

div.s4y-themebox {
    width: 40rem;
    padding: 5px;
    margin: 5px;
    float: left;
}

div.s4y-themebox a {
    font-size: 1.1rem;
    font-weight: bold;
    color: blue;
}

div.s4y-themebox p {
    font-size: 0.9rem;
}

div.s4y-themebox h2 h3 {
    font-size: 1rem;
}

div.s4y-title {
    font-size: 1.2rem;
    line-height: 1.6rem;
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 0.5rem;
}

/* ---------------- newest forum image ---------------*/

div.s4y-forum-newest {
    padding: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #F6F7E7;
    font-weight: normal;
}

div.s4y-forum-newest-picture {
    text-align: center;
}

div.s4y-forum-newest-info {
    margin-top: 8px;
}

div.s4y-cms-edit-images {
    margin-top: 3px;
    margin-bottom: 3px;
    border-bottom: 1px solid gray;
}

div.s4y-cms-edit-topic {
    margin-top: 3px;
    margin-bottom: 3px;
    border-bottom: 2px dotted gray;
}


/* ---------------- usergroups ---------------*/
div.usergroup {
    margin: 1rem;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e8592c;
    width: 45%;
    max-width: 600px;
}

div.usergroup groupname {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

div.usergroup groupdesc {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

div.usergroup grouptext {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ---------------- observation form ---------------*/

/* ---------------- speciessheet -------------------*/
div.imageframe {
    float: left;
    height: 240px;
    width: auto;
}

#speciessheetmoreimages {
    display: none;
}

div.s4y-speciessheet-teaserbox {
    width: 100%;
    padding: 2px;
    border-bottom: 1px solid grey;
    margin-bottom: 2px;
}

.dropzone needsclick, #uploader {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAT80lEQVR42u3d3XHjOBaAUWFqAnAICsEhOARnRCAjh+AQHIJC6Ay4DyNtuW1L5j9A3nPedmqml93lFj5egFTKOZ8AgFj+qX0BAMD2BAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgP6tfQE15Zxfa19D63LOb7WvAYDlmQAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACCjlnGtfw//lnF9rXwMAtCSldOm67mPxX7d2AJRSnvq+f6l6EQCwAyml967r/izya9UKAAs/AEyTc36b+2tUCQCjfgCYJ6X00XXdZep/v/khQIs/AMzX9/3znDV10wCw+APAsqaurZsFgMUfANZRSnke+99sEgAWfwBYT9/351LK05j/ZvUAKKWca/2BAEAUY5+sWz0A+r4fPZYAAMYbM3FfNQCM/gGgTb4LAAAOZOjN92oBMOVEIgCwjdUCoO/7c+3fHABENOQAvi0AADiYIQfwVwkAj/4BQNtWCQCP/gFA22wBAEBAAgAAAvq39gUAcGw557fa17BHa79MzwQAAAISAAAQ0OIB4P3/ANA+EwAACEgAAEBAAgAAAlo0AHwDIADsw6LvAfANgMCWaj1fXkp59nnH3nkRENC0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AN4ICAB1DJnErxYA3ggIAO2yBQAAB5Jzfhvy760aAEMvAgDY1uoTAI8EAsA2xtx4rx4AHgkEgPWllN7H/PubnAGwFQAA60kpXbqu+zPmv9nsEKAIAIB1THnybtOnAEQAACxr6tq6+WOAIgAA5kspfcxZU1POucqFl1Ke+r5/qfJ/DgA7tsTNdLUAuBECADBMSul97GG/u79W7QD4LOf8WvsaAKAl1xP+i79Tp6kAAAC24bsAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAABCQAACEgAAEBAAgAAAhIAABCQAACAgAQAAAQkAAAgIAEAAAEJAAAISAAAQEACAAACEgAAEJAAAICABAAABCQAACAgAQAAAQkAAAhIAABAQAIAAAISAAAQkAAAgIAEAAAEJAAAICABAAAB/Q8TLkZUCfbPVAAAAABJRU5ErkJggg==') no-repeat;
    background-position: 50% 20px;
    background-size: contain;
}

#uploader.dz-started {
    background: none;
}

hr {
    border: 0px;
    border-top: 1px solid rgb(204, 204, 204);
    box-sizing: content-box;
    height: 0;
    margin: 2px 0px;
}

input.highlight, textarea.highlight {
    background-color: #A1FF10;
}

.alert {
    padding: 5px;
    margin-bottom: 17px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.alert-danger hr {
    border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
    color: #843534;
}

.required {
    color: red;
}

/**
* hanhle - 03.06.2018- hidden pathway to replace by new submenu
**/
#pathway {
    display: none !important;
}

/**
* Hoai ho- 7.11.2018 - button
**/
.s4y-close {
    float: right;
    display: inline-block;
    fill: lightgray;
    cursor: pointer;
}

.s4y-close:hover {
    fill: #ff6600;
}

.s4y-btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.s4y-btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.s4y-btn-warning {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    color: #fff;
}

.s4y-btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.s4y-btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border: 1px solid #d58512;
}

.s4y-modal {
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    overflow-y: auto;

}

.s4y-modal .s4y-confirm {
    background: #fff;
    display: table;
    /*     text-align: center; */
    margin: 0 auto;
    font-size: 1.2rem;
    padding: 5px;
    margin-top: 100px;
    border-radius: 5px;
    border: #333 solid 1px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(198, 132, 51, 0.8);
    /*     -ms-transform: translate(0, -500%); */
    /*     -webkit-transition: -webkit-transform 0.3s ease-out; */
    /*     -moz-transition: -moz-transform 0.3s ease-out; */
    /*     -o-transition: -o-transform 0.3s ease-out; */
    transition: transform 0.3s ease-out;
}

.box-image {
    box-sizing: border-box;
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: 5px;
    -webkit-box-shadow: 0 3px 2px #777;
    -moz-box-shadow: 0 3px 2px #777;
    box-shadow: 0 3px 2px #777;
    margin-bottom: 1rem;
}

.s4y-preview {
    z-index: 99;
    background: #5cb85c;
    cursor: pointer;
    padding: 0px;
    box-shadow: 0 0 0 1px white, 0 0 0 3px #5cb85c;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: fixed;
    bottom: 5px;
    left: 5px;
}

.linkForumIcon {
    border: 0;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: #5cb85c;
}

.s4y-preview:hover {
    opacity: 0.5;
}

/* hoai.ho */
.s4y-image-15 {
    width: 15px;
    height: 15px;
}

/* HOAI HO 10.10 ADD VALIDATION FORM */
.s4y-obsform-element textarea {
    resize: none;
    font-size: 1rem;
}

.s4y-obsform-element textarea.data-condition {
    height: 22px;
    width: 50px;
}

.observation-form textarea {
    min-height: 2rem;
    vertical-align: middle;
}

.observation-form .title-add {
    font-weight: bold;
    font-size: .8rem;
}

.observation-form label.title-add {
    margin-left: 2px;
}

.s4y-column-line {
    min-height: 50px;
    background: #f6f7e7;
}

/*hanhle - Add require field*/
.req-mask {
    color: red;
}

.s4y-size-15 {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.s4y-size-12 {
    width: 1.2rem !important;
    height: 1.2rem !important;
}

.s4y-size-10 {
    width: 1rem !important;
    height: 1rem !important;
}

.s4y-pointer {
    cursor: pointer
}

.s4y-checkbox {
    background: url('../images/icons/svg/check-square-o.svg') no-repeat center center/cover;
    display: inline-block;
    margin-right: .5rem;
    vertical-align: middle;
}

.s4y-checkbox.checked {
    background: url('../images/icons/svg/square-o.svg') no-repeat center center/cover;
}

.s4y-dropdown-option {
    position: absolute;
    width: auto;
    right: 0;
    border: 1px solid lightgray;
    border-radius: 5px;
    list-style: none;
    display: none;
    background: #fff;
}

.s4y-dropdown-option li:hover {
    background: rgba(153, 204, 0, 0.6);
    cursor: pointer;
}

.s4y-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

.s4y-container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.s4y-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.s4y-container-2 .s4y-left {
    margin-right: 1rem;
}

.s4y-container-2 .s4y-left,
.s4y-container-2 .s4y-right {
    width: calc(50% - 1rem);
}

.s4y-block {
    display: block;
}

.s4y-not-scroll-y {
    overflow-y: hidden;
}

.s4y-none {
    display: none;
}

.s4y-vertical-top {
    vertical-align: top !important;
}

.navVerticalList .active {
    background-color: #7dbe3e;
}

.navVerticalList .active a {
    color: white;
}

.s4y-sticky {
    position: fixed;
    top: 0;
}

div.validation:before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

div.validation:after {
    content: "\f06a";
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, noto sans, Ubuntu, Cantarell, helvetica neue, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 13px;
}

.s4y-top-onerem {
    margin-top: 1rem;
}

.s4y-top-halfonerem {
    margin-top: .5rem;
}

.s4y-bottom-onerem {
    margin-bottom: 1rem;
}

.s4y-bottom-halfonerem {
    margin-bottom: .5rem;
}

.login-suggest {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

.dropdown-input-disabled {
    background: rgb(235, 235, 228);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.dropdown-close-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/*##################### Scroll to top component
hanhle - 04.05.2019
*/
.scrolltop-wrap {
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 12rem;
    right: 4rem;
    bottom: 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scrolltop-wrap #scrolltop-bg {
    fill: #FF6600;
}

.scrolltop-wrap #scrolltop-arrow {
    fill: white;
}

.scrolltop-wrap a:hover #scrolltop-bg {
    fill: #f19d66;
}

.scrolltop-wrap a:hover #scrolltop-arrow {
    fill: white;
}

@supports (-moz-appearance: meterbar) {
    .scrolltop-wrap {
        clip: rect(0, 3rem, auto, 0);
    }
}

.scrolltop-wrap a {
    position: fixed;
    /*        position: -webkit-sticky; */
    /*        position: sticky; */
    top: -5rem;
    width: 3rem;
    height: 3rem;
    margin-bottom: -5rem;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: all;
    outline: none;
    overflow: hidden;
}

.ie .scrolltop-wrap a {
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: -5rem;
    width: 3rem;
    right: 2rem;
    height: 3rem;
    margin-bottom: -5rem;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: all;
    outline: none;
    overflow: hidden;
}

.scrolltop-wrap a svg {
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.scrolltop-wrap a svg path {
    transition: all 0.1s;
}

.scrolltop-wrap a #scrolltop-arrow {
    -webkit-transform: scale(0.66);
    transform: scale(0.66);
    -webkit-transform-origin: center;
    transform-origin: center;
}

@media print {
    .scrolltop-wrap {
        display: none !important;
    }
}

/* ##################### End scroll top component */
.s4y-limited {
    max-width: 20ch;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.s4y-span-image-series {
    cursor: pointer;
    color: #eb4f00;
}

.s4y-span-image-series:hover {
    opacity: 0.5;
}

/* share link */
.s4y-share-link .s4y-share-content p {
    margin-bottom: 1rem;
    width: 350px;
}

.s4y-share-link .s4y-share-content input[type="text"] {
    padding: 5px;
    border-radius: 5px;
    width: 350px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.42857143;
    height: 2.5rem;
}

.s4y-share-link .s4y-share-content .btn-copy-link {
    margin-left: 5px;
    height: 30px;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    user-select: none;
    border: 1px solid transparent;
    border-color: #ccc;
}

.s4y-share-link .s4y-share-content .btn-copy-link:hover {
    background-color: #ccc;
}


.s4y-bulk.s4y-sticky {
    position: sticky;
    top: 0;
    background: white;
    z-index: 99;
}

/*
Dang Nguyen - 19/08/2020 - new global style here
*/
/* basic style */
.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

.m-0 {
    margin: 0;
}

.m-5 {
    margin: 5px;
}

.mt-5 {
    margin-top: 5px;
}

.mr-5 {
    margin-right: 5px;
}

.mb-5 {
    margin-bottom: 5px;
}

.ml-5 {
    margin-left: 5px;
}

.m-10 {
    margin: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mr-10 {
    margin-right: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.p-0 {
    padding: 0;
}

.p-10 {
    padding: 10px;
}

/* util style */

.border {
    border: 1px solid #cccccc;
}

.border-top {
    border-top: 1px solid #cccccc;
}

.border-right {
    border-right: 1px solid #cccccc;
}

.border-bottom {
    border-bottom: 1px solid #cccccc;
}

.border-left {
    border-left: 1px solid #cccccc;
}

.border-0 {
    border: none;
}

.border-top-0 {
    border-top: none;
}

.border-right-0 {
    border-right: none;
}

.border-bottom-0 {
    border-bottom: none;
}

.border-left-0 {
    border-left: none;
}

.border-bold {
    border: 5px solid #cccccc;
    border-radius: 3px;
}

.desktop .d-modal-dialog {
    margin-top: 60px !important;
}