/*
	New styling since IPT v2.5.0 (Bootstrap 5).
	If you consider the CSS and HTML could be improved for convenience
	of theming, please report an enhancement request in the IPT project
	site at https://github.com/gbif
	Thank you very much!
*/

/* Principle settings for all pages */

body {
    font-family: Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif !important;
    padding-top: 3.5rem; /* Separates nav and main */
    color: #4e565f;
	background: url(../images/service_bg.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
}

table {
    color: #4e565f !important;
}


/* Logo, header, menu etc. START */
.jbb-logo {
	background: #333333;
    height: 50px;
    position: relative;
    line-height: 32px;
    padding-right: 8px;
    padding-left: 8px;
    transition: all .3s;
    overflow: hidden;
    vertical-align: middle;
}

header, .dropdown-menu {
    font-size: 0.875rem !important;
}

.dropdown-item:active {
    background-color: #61a861 !important;
}

.bg-jbb-black-gradient {
    background: #333333 !important;
}

.navbar-button {
    color: #61a861 !important;
}

.navbar-button:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* Logo, header, menu etc. END */


/* Admin page styles START */
.admin-col-listing .admin-col-listing-item {
    position: relative;
    display: block;
    height: 100%;
    padding: 4rem;
    color: #4e565f;
    transition: all .2s ease-in-out;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .admin-col-listing .admin-col-listing-item {
        padding: 2rem;
    }
}

.admin-col-listing.admin-col-listing-hover .admin-col-listing-item:hover {
    z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: #61a861;
}

.admin-col-listing-item-disabled:hover {
    color: #4e565f !important;
    background-color: #fff !important;
}

.admin-col-listing.admin-col-listing-hover .admin-col-listing-item:hover .admin-icon {
    color: #fff;
}

.admin-col-listing .admin-col-listing-item .admin-icon {
    color: #61a861;
}

.admin-icon {
    font-size: 36px;
}

.admin-col-listing .admin-col-listing-item .admin-card-title {
    margin-top: .5rem;
}

.admin-card {
    display: block;
    padding: 1px 0;
    background-color: #fff;
    border: none;
}

.admin-card .admin-card-title:last-child {
    margin-bottom: 0;
}

.admin-card .card-body {
    padding: 0 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-card-title {
    font-size: 1rem;
}
/* Admin page styles END */


/* Footer START */
footer {
  background: #2D342E;
}

footer ul li{
  padding-left: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  list-style: none;
  line-height: 15px;
}

footer h2 {
  text-transform: capitalize;
  font-weight: 700;
}

footer a {
  text-decoration: none !important;
}

footer a:hover {
  color: #537A07 !important;
}

.ipt-footer-item:after {
    content: '|';
    margin: 0 5px;
}

.footer-gbif-logo {
    width: 55px;
}
/* Footer END */


/* Links color with exception for some classes START */
a:not(.btn, .button, .navbar-brand, .nav-link, .menu-link, .popover-link, .admin-col-listing-item) {
    color: #7ab701 !important;
    text-decoration: none !important;
}

a:not(.btn, .button, .navbar-brand, .nav-link, .menu-link, .popover-link, .admin-col-listing-item):focus,
a:not(.btn, .button, .navbar-brand, .nav-link, .menu-link, .popover-link, .admin-col-listing-item):hover {
    color: #2c79a1 !important;
    text-decoration: underline !important;
}
/* Links color with exception for some classes END */


/* Datepicker styles START */
.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover {
    background-image: linear-gradient(to bottom, #61a861, #61a861) !important;
}

.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
    background-image: linear-gradient(to bottom, #61a861, #61a861) !important;
}

.datepicker td, .datepicker th {
    font-size: 1rem !important;
}

.datepicker-days td, .datepicker-days th {
    width: 40px !important;
}
/* Datepicker styles END */


/* Custom colors */
.text-gbif-primary {
    color: #61a861 !important;
}

.text-gbif-danger {
    color: #e36370 !important;
}

.text-gbif-header {
    color: #4E565F !important;
}

.bg-gbif-primary {
  background-color: #61a861 !important;
}

.bg-gbif-danger {
  background-color: #e36370 !important;
}

.bg-gbif-header {
  background-color: #4E565F !important;
}


/* GBIF gray colored outline button START */
.btn-outline-secondary {
    color: #4e565f !important;
    border-color: #bec6ce !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
    color: #212529 !important;
    background-color: #eaecef !important;
    border-color: #bec6ce !important;
}
.btn-outline-secondary:focus, .btn-outline-secondary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(190, 198, 206, 0.25) !important;
}
/* GBIF gray colored outline button START */


/* GBIF green colored outline button START */
.btn-outline-gbif-primary {
    color: #61a861 !important;
    border-color: #61a861 !important;
}
.btn-outline-gbif-primary:hover {
    color: #fff !important;
    background-color: #61a861 !important;
    border-color: #61a861 !important;
}
.btn-check:focus + .btn-outline-gbif-primary, .btn-outline-gbif-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25) !important;
}
.btn-check:checked + .btn-outline-gbif-primary, .btn-check:active + .btn-outline-gbif-primary, .btn-outline-gbif-primary:active, .btn-outline-gbif-primary.active, .btn-outline-gbif-primary.dropdown-toggle.show {
    color: #fff !important;
    background-color: #61a861 !important;
    border-color: #61a861 !important;
}
.btn-check:checked + .btn-outline-gbif-primary:focus, .btn-check:active + .btn-outline-gbif-primary:focus, .btn-outline-gbif-primary:active:focus, .btn-outline-gbif-primary.active:focus, .btn-outline-gbif-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25) !important;
}
.btn-outline-gbif-primary:disabled, .btn-outline-gbif-primary.disabled {
    color: #61a861 !important;
    background-color: transparent !important;
}
/* GBIF green colored outline button END */


/* GBIF red colored outline button START */
.btn-outline-gbif-danger {
    color: #e36370;
    border-color: #e36370;
}
.btn-outline-gbif-danger:hover {
    color: #fff;
    background-color: #e36370;
    border-color: #e36370;
}
.btn-check:focus + .btn-outline-gbif-danger, .btn-outline-gbif-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}
.btn-check:checked + .btn-outline-gbif-danger, .btn-check:active + .btn-outline-gbif-danger, .btn-outline-gbif-danger:active, .btn-outline-gbif-danger.active, .btn-outline-gbif-danger.dropdown-toggle.show {
    color: #fff;
    background-color: #e36370;
    border-color: #e36370;
}
.btn-check:checked + .btn-outline-gbif-danger:focus, .btn-check:active + .btn-outline-gbif-danger:focus, .btn-outline-gbif-danger:active:focus, .btn-outline-gbif-danger.active:focus, .btn-outline-gbif-danger.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}
.btn-outline-gbif-danger:disabled, .btn-outline-gbif-danger.disabled {
    color: #e36370;
    background-color: transparent;
}
/* GBIF red colored outline button END */


/* Style form elements START */
.form-control, .form-select, .form-control:focus, .form-select:focus {
    color: #212529;
}

.form-control:focus {
    background-color: #fff;
    border-color: #92c392;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25);
}

.form-select:focus {
    border-color: #92c392;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25);
}

.form-check-input:not(.is-invalid):focus {
    border-color: #92c392;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25);
}

.form-check-input:not(.is-invalid):checked {
    background-color: #61a861;
    border-color: #61a861;
}
/* Style form elements END */


/* Published versions table separator */
td.separator {
    border-right: 1px solid #EEEEEE;
    padding-right: 30px !important;
}

td.left_padding {
    padding-left: 30px !important;
}


/* Custom colors for tables pagination items START */
.page-link {
    position: relative;
    display: block;
    color: #61a861 !important;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.page-link:hover {
    z-index: 2;
    color: #61a861 !important;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-link:focus {
    z-index: 3;
    color: #61a861 !important;
    background-color: #e9ecef;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25) !important;
}

.page-item:not(:first-child) .page-link {
    margin-left: -1px;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: #61a861 !important;
    border-color: #61a861 !important;
}
.page-item.disabled .page-link {
    color: #6c757d !important;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}
/* Custom colors for tables pagination items END */


/* Overlay div for modal views START */
#modalbox {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

#modalback {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
}

#modalcontainer {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 80px;
    min-height: 50px;
}

#modalcontent {
    display: inline-block;
    margin: 0 auto;
    min-width: 100px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
}
/* Overlay div for modal views END */


/* Style select2 component START */
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    color: #fff !important;
    background-color: #61a861 !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #92c392 !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25) !important;
    box-shadow: 0 0 0 0.25rem rgba(113, 177, 113, 0.25) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #212529 !important;
}
/* Style select2 component END */


/* Style autocomplete component START */
.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.ui-autocomplete > li {
    padding: 3px 20px;
}

.ui-autocomplete > li.ui-state-focus {
    background-color: #DDD;
}

.ui-helper-hidden-accessible {
    display: none;
}

.ui-menu-item:hover {
    background-color: #61a861;
    color: #fff;
    cursor: pointer;
}

.ui-autocomplete-input {
    min-width: 200px;
}
/* Style autocomplete component END */


#watermark {
    position: fixed;
    opacity: 0.15;
    z-index: 1000;
    color: #666;
    font-size: 650%;
}


/* Resource logo styling */
.icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-position-x: 10px;
    background-position-y: 50%;
    padding-left: 30px;
}


.icon-gbif {
    background-image: url('../images/gbif-logo.svg');
}


/* Licence logos styling START */
.cc_logo {
    display: block;
    float: left;
    margin-right: 18px;
    height: 31px;
    width: 88px;
}

.cc_by {
    background: url('../images/icons/cc-by.svg');
}

.cc_by_nc {
    background: url('../images/icons/cc-by-nc.svg');
}

.cc_zero {
    background: url('../images/icons/cc-zero.svg');
}
/* Licence logos styling END */


/* DOI styling START */
span.doi {
    background: #61a861;
    color: #fff;
}
/* DOI styling END */


/* Version table pointer styling */
img.latestVersionHidden {
    opacity: 0.2;
}


/* Data records chars styling START*/
ul.no_bullets li {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding-left: 0;
    margin-left: 0;
}

ul.horizontal_graph {
    margin: 0;
}

ul.horizontal_graph .grey_bar {
    background-color: #a9e4ba;
    border-radius: 1px;
    display: inline-block;
    height: 3px;
    margin: 0 0 2px;
}

ul.horizontal_graph li span {
    display: inline-block;
    width: 200px;
    font-size: 0.9em;
    word-wrap: break-word;
}

ul.no_bullets {
    list-style: outside none none;
}

ul.horizontal_graph .value_label {
    color: #cccccc;
    display: inline-block;
    font-size: 0.9em;
    margin: 0 0 0 10px;
    padding: 0;
}
/* Data records chars styling START*/


/* Metadata map size */
#locationMap {
    clear: both;
    height: 170px;
    max-width: 310px;
}

#map {
    height: 320px;
    border: none;
    margin-top: 18px;
}


/* Metadata image size */
#resourcelogo img {
    max-width: 150px;
}


/* Resource mini logo in the table */
.resourceminilogo {
    width: 30px;
}


/* Mapping page custom colors */
#filter {
    color: #0080FF;
}

#coreID {
    color: #008959;
}

div.requiredMapping {
    background-color: #E6F5EB;
}

div.mappingFiler {
    background-color: #F0FAFF;
}


/* Pointer at info\warning icons */
i {
    cursor: pointer;
}

.icon-validate {
    padding: 0 !important;
}

/* No decoration for popovers */
a.popover-link, a.popover-link:hover, a.popover-link:focus {
    text-decoration: none !important;
}


/* Resource deletion buttons */
.confirmDeletion {
    border: none;
    color: #212529;
}


/* Utilities */
.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.text-smaller {
    font-size: 0.875rem !important;
}