/* This is the main stylesheet for Showcase website */
/* The primary layout is done with Bootstrap CSS */
/* To change the bootstrap style make ammendments in this stylesheet to the relevant classes */

/* ===================================
    01. Google font
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400&display=swap');

/* GENERAL CLASSES */
.general-body-class {
        background-color: #d4efd2;
    
}
.general-navbar-class {
        background-color: #1f7263 !important;
    background: url('../img/background_1920x1080_screen-statistics.png');
margin-left: 0px;
    margin-right: 0px;
}
.general-navbar-title-class {
    margin-bottom: 0px;
    
}

.navbar-expand-md {
    background-color: #1f7263 !important;
}
.general-navbar-buttons-class {}
.general-footer-copyright-class {}

.general-footer-class {
     background-color: #1f7263 !important;
}
.container {
    background-color: #d4efd2; /* previous #f9f9f9;*/
    max-width: 100%;
}
.mb-4 {
        margin-bottom: 0px !important;
}

.mb-3 {
    margin-bottom: 1rem!important;
    background-color: #d4efd2 !important;
}

.my-4 {
    margin-top: 0px !important;
margin-bottom: 0px !important;
}

.mb-3-colour {
    background-color: #b4dfb1 !important;
}

.border-bottom {
    border-bottom: 0px solid #dee2e6!important;
}

.border-top {
    border-top: 0px solid #dee2e6!important;
}

.me-2 {
        background-color: #1f7263 !important;
}

/* GENERAL CLASSES -> BOOTSTRAP */
body {
    font-size: 16px;
    line-height: 24px;
    color: #3d3d64;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: 'Mulish', sans-serif;
}

a {
    color: #00ad7c;
    text-decoration: underline;
    font-weight: 800;
}

a:hover {
    color: #ffffff;
}

h1 {
    font-family: 'Oswald', sans-serif;
    font-size:3.9rem; 
    line-height:4.2rem; 
    color:#4E9906;
    font-weight: 400;
    margin-bottom: 65px;
}
h2  { 
    font-family: 'Oswald', sans-serif;
    font-size:2.85rem; 
    line-height:3.4rem; 
    color:#6c6c97;
    font-weight: 400;
    margin-bottom: 25px;
}

h3  { 
    font-family: 'Oswald', sans-serif;
    font-size:18px; 
    line-height:28px; 
    color:#6c6c97;
    font-weight: 400;
    margin-bottom: 5px;
}
h4 { 
    font-size: 18px;
    line-height: 28px;
    color: #3d3d64;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: 'Mulish', sans-serif; 
}
h5 { 
    font-size: 15px; 
    line-height: 30px; 
    font-weight: 600; 
    color: #4E9906; 
    font-family: 'Mulish', sans-serif; 
}

h6 {
    text-align: right; 
    font-size: 15px; 
    line-height: 18px;
    color:#4E9906;
    font-family: 'Mulish', sans-serif; 
    font-weight: 600;
}

.text-muted {
    color: #d4efd2 !important;
}

.fs-4 {
    font-family: 'Oswald', sans-serif;
    font-size:18px; 
    text-transform: uppercase;
    color: #F87A13;
}
.nav {}
.nav-pills {
  
    background-color: #0a58ca00 !important;
}
.nav-link {
    vertical-align: middle;
    display:inline-block;  
    margin-top: 0px;
    background: #0a58ca00 0% 0% no-repeat padding-box !important;
    border-radius: 50px; 
    text-transform: uppercase; 
    width: auto; 
    font-family: 'Oswald', sans-serif; 
    font-weight: 400;
    font-size:14px; 
    padding: 5px 16px;
    color: #FFFFFF !important; 
    letter-spacing: 0.5px;
    border: none;
    margin-left: 10px;
}

.nav-link:active {
    border-color: #0a58ca00;
    color: #F87A13 !important; 
    cursor: pointer; 
    background: #F87A13 0% 0% no-repeat padding-box !important;
    border-radius: 50px !important; 
    padding: 5px 16px;
}

.nav-link:hover {
   color: #F87A13 !important;
}

.nav-item {
     
}

.img-fluid {}


.w-75 {
    width: 20% !important;
}

.btn {
    vertical-align: middle;
    display:inline-block;  
    margin-top: 20px;
    background: #FDA230 0% 0% no-repeat padding-box; 
    border-radius: 50px; 
    text-transform: uppercase; 
    width: auto; 
    font-family: 'Oswald', sans-serif; 
    font-weight: 500;
    font-size:14px; 
    padding: 10px 36px;
    color: #FFFFFF; 
    letter-spacing: 0.5px;
    border: none;
}

.btn:hover { 
    border-color: #0a58ca00;
    color: #ffffff !important; 
    cursor: pointer; 
    background: #F87A13 0% 0% no-repeat padding-box;
}

.list-group {}
.list-group-item {
        background-color: #ffffff54 !important;
        border: 1px solid rgb(255 255 255 / 65%) !important;
}

.modal {}
.modal-content {}
.modal-header {}
.modal-title {}
.modal-body {}
.modal-footer {}

.card {
	background-color: transparent !important;
	border-color: transparent !important;
}
.card-header {

}
.card-title {
}
.card-body {
	
}
.card-small-text {
	font-size: 10px !important;
}

.form-switch {}

/* LANDING PAGE */
.landingpage-title-container {
    background: url('../img/background_1920x1080.png');
    background-size: cover;
    min-height: 600px;
}

.landingpage-title-header {}
.landingpage-title-sub {}
.landingpage-section-image {}
.landingpage-section-title {}
.landingpage-section-subtitle {}
.landingpage-section-button {}

/* ABOUT PAGE */
.about-title-header {
    margin-bottom: 12px; 
}
.about-title-sub {
    color: #1f7263 !important;
    font-size: 36px !important;
    line-height: 42px;
    margin-bottom: 73px;
    padding-bottom: 70px !important;

}
.about-section-image {
    max-width: 100%;
    height: fit-content;
}
.about-section-title {}
.about-section-subtitle {

}
.about-institution-scroller {}
.about-institution-item {}
.about-team-container {}
.about-team-item {}

/* MONITORING PAGE */
.monitoring-title-header {
    }
.monitoring-title-sub {
        padding-bottom: 10px !important;

}
.monitoring-section-button {}
.monitoring-section-image {}
.monitoring-section-title {}
.monitoring-section-subtitle {}

/* IDENTIFICATION PAGE */
.identification-title-header {
    margin-bottom: 12px; 
}
.identification-title-sub {
    font-size: 20px;
    line-height: 25px;
    color: #1f7263;
    padding-bottom: 40px !important;
}
.identification-section-button {}
.identification-section-button-list {}
.identification-section-title {}
.identification-list-group {}
.identification-list-group-item {}

/* NEWS PAGE */
.news-title-header {
    margin-bottom: 12px; 
}
.news-title-sub {
    padding-bottom: 70px !important;
}
.news-section-image {}
.news-section-title {}
.news-section-intro {}
.news-section-more {}

/* USERHOME PAGE */
.userhome-title-header {}
.userhome-title-sub {}
.userhome-section-statscard {}
.userhome-section-title {}
.userhome-section-graph {}
.userhome-section-messages-list {}
.userhome-section-messages-list-item {}
.userhome-section-message-image {}
.userhome-section-button {}
.userhome-section-map {}

/* USER SETTINGS PAGE */
.usersettings-title-header {
	text-align: center !important;
    color: #1f7263 !important;
    font-size: 30px !important;
}
.usersettings-title-sub {
	text-align: center !important;
    color: #ffe421 !important;
    font-size: 20px !important;
	display: none !important;
}
}
.usersettings-card {
background-color: #fefefe !important;
border-radius: 10px !important;
}
.usersettings-card-body {}
.usersettings-table {}
.usersettings-switch {}
.usersettings-section-title h3 {
	text-align: center !important;
    color: #ffe421 !important;
    font-size: 20px !important;
}
.usersettings-section-button {}
.usersettings-count-item {}
.usersettings-count-item-selector {}
.usersettings-count-item-selector-image {}
.usersettings-count-item-selector-input {}

/* USER VISIT INDEX PAGE */
.uservisitindex-card {}
.uservisitindex-card-header {}
.uservisitindex-card-body {}
.uservisitindex-button {}
.uservisitindex-table {}
.uservisitindex-header {}
.uservisitindex-cell {}
.uservisitindex-actionbutton {}

/* USER VISIT CREATE/EDIT PAGE */
.uservisitcreate-title-header {}
.uservisitcreate-section-title {}
.uservisitcreate-button {}
.uservisitcreate-card {}
.uservisitcreate-card-body {}
.uservisitcreate-form-label {}
.uservisitcreate-form-input {}
.uservisitcreate-table {}
.uservisitcreate-header {}
.uservisitcreate-cell {}
.uservisitcreate-speciesselect2 {}

.uservisitcreate-actionbutton {}

/* These are in use */
.background-container {
    background: url('../img/background_1920x1080.png');
    background-size: cover;
    min-height: 800px;
}

.central-container {
    width: 100%;
    max-width: 600px;
    padding: 15px;
    margin: auto;
}

.switch-direction {
    flex-direction: row-reverse;
}

.user_badge {
    max-width: 152px;
    
}