:root{
    --main-color: #7edc6f;
    /* --main-color: #33e96a; */
    --submain-color: #16692f;
    --detail-color: #ffffff;
    --gray-color: #b4b3b3;
    --light-gray-color: #d3d1d1;
    --universal-white: #f5f5f5;
    --universal-black: #2a2a2a;
    --info-color: #0dcaf0;
}

/* UNIVERSAL COLORS */
.main-color{
    color: var(--main-color);
}

.submain-color{
    color: var(--submain-color);
}

.gray-color{
    color: var(--gray-color);
}
/* UNVERSAL BACKGROUNDS */
.main-color-bg{
    background-color: var(--main-color);
}

.submain-color-bg{
    background-color: var(--submain-color);
}
/* GDARIENTS BASED ON BS5 */
.bg-gradient-primary {
    background-image: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%);
}

.bg-gradient-secondary {
    background-image: linear-gradient(310deg, #627594 0%, #a8b8d8 100%);
}

.bg-gradient-success {
    background-image: linear-gradient(310deg, #2dce89 0%, #2dcecc 100%);
}

.bg-gradient-info {
    background-image: linear-gradient(310deg, #1171ef 0%, #11cdef 100%);
}

.bg-gradient-warning {
    background-image: linear-gradient(310deg, #fb6340 0%, #fbb140 100%);
}

.bg-gradient-danger {
    background-image: linear-gradient(310deg, #f5365c 0%, #f56036 100%);
}

.bg-gradient-light {
    background-image: linear-gradient(310deg, #CED4DA 0%, #EBEFF4 100%);
}

.bg-gradient-dark {
    background-image: linear-gradient(310deg, #212229 0%, #212529 100%);
}
/* GENERAL UTLITTES */
.br-20{
    border-radius: 20px;
}

.br-15{
    border-radius: 15px;
}

.br-10{
    border-radius: 10px;
}

.display-7{
    font-weight: 400;
    font-size: 1.5rem;
}

.lh-small{
    line-height: 1.3;
}

.no-border{
    border: 0;
}

.green-border{
    border: 4px solid var(--main-color);
}

.container-anti-stretch {
    max-width: 1920px; 
}

.img-center{
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.text-justify{
    text-align: justify;
}

/* INPUTS */
.form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}


.form-check-input:active {
    background-color: var(--main-color); /* Active state color */
    border-color: darkgreen; /* Optional: darken the border color */
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 0, 0.25); /* Green focus ring */
}

/* BUTTONS */
.btn-outline-info{
    background-color: transparent;
    color: var(--info-color);
    border: 1px var(--info-color) solid;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.btn-outline-info:hover{
    background-color: var(--info-color);
    color: var(--universal-white);
    border: 1px var(--universal-white) solid;
    border-radius: 20px;
}

.btn-outline-main{
    background-color: transparent;
    color: var(--main-color);
    border: 1px var(--main-color) solid;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.btn-outline-main:hover{
    background-color: var(--main-color);
    color: var(--universal-white);
    border: 1px var(--universal-white) solid;
    border-radius: 20px;
}

.btn-main{
    background-color: var(--main-color);
    color: var(--universal-white);
    border: 1px var(--main-color) solid;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.btn-main:hover{
    background-color: transparent;
    color: var(--main-color);
    border: 1px var(--main-color) solid;
    border-radius: 20px;
}

.btn-main:disabled {
    background-color: lightgray; /* Or any color to indicate a disabled state */
    color: rgb(0, 0, 0); /* Adjust the text color */
    border-color: gray; /* Adjust the border color */
    cursor: not-allowed; /* Show a 'not-allowed' cursor */
    opacity: 0.8; /* Optionally reduce opacity for a "disabled" look */
}

.btn-outline-submain{
    background-color: transparent;
    color: var(--submain-color);
    border: 1px var(--submain-color) solid;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.btn-outline-submain:hover{
    background-color: var(--submain-color);
    color: var(--universal-white);
    border: 1px var(--universal-white) solid;
    border-radius: 20px;
}

.btn-submain{
    background-color: var(--submain-color);
    color: var(--universal-white);
    border: 1px var(--submain-color) solid;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.btn-submain:hover{
    background-color: transparent;
    color: var(--submain-color);
    border: 1px var(--submain-color) solid;
    border-radius: 20px;
}

.btn-custom-play-animation {
    position: relative; /* Ensure that child elements are positioned relative to this button */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem; /* Adjust height as needed */
    transition: all 0.5 ease-in-out;
}

.btn-custom-play-animation-info {
    position: relative; /* Ensure that child elements are positioned relative to this button */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem; /* Adjust height as needed */
    transition: all 0.5 ease-in-out;
}

.pop-this-on-hover,
.hide-this-on-hover {
    position: absolute; /* Overlay them on top of each other */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center both icon and text */
}

.pop-this-on-hover {
    color: transparent;
    transition: all 0.5 ease-in-out;
}

.hide-this-on-hover {
    transition: all 0.5 ease-in-out;
}

.btn-custom-play-animation:hover .pop-this-on-hover {
    color: var(--universal-white);
}

.btn-custom-play-animation:hover .hide-this-on-hover {
    color: transparent;
}

.btn-custom-play-animation-info:hover .pop-this-on-hover {
    color: var(--universal-white);
}

.btn-custom-play-animation-info:hover .hide-this-on-hover {
    color: transparent;
}
/* MAIN SIDEBAR / OFFCANVAS */
.custom-dropdown .dropdown-menu{
    animation: 0.6s slideup;
}

@keyframes slideup {
    from {
        transform: translateX(10%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

.ozesoft-navbar-image{
    max-height: 65px;
    padding-left: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.sidebar-icon{
    width: 30px;
    height: auto;
    margin-right: 5px;
}

.sidebar-dropdown{
    border: 0;
}

.sidebar-text-divider{
    color: var(--light-gray-color);
    border-bottom: 1px solid var(--light-gray-color);
    font-weight: bold;
    font-size: 13px;
}

.sidebar-fa-icon{
    margin-right: 7px;
    color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.sidebar-link {
    color: var(--universal-black);
    text-decoration: none;
}

.sidebar-item {
    border-radius: 10px;
    transition: color 1.0s ease-in-out, transform 2.3s ease-in-out, font-weight 0.3s ease-in-out;
    text-decoration: none;
    padding-left: 10px;
    padding: 4px 0 4px 10px;
    color: var(--universal-black);
}

.sidebar-item:hover{
    color: var(--submain-color);
    background-color: var(--light-gray-color);
    font-weight: 600;
    border-radius: 60px;
}

.sidebar-item:hover .sidebar-fa-icon {
    transform: scale(1.2) rotate(45deg); /* Enlarge icon */
    margin-right: 13px;
}

.sidebar-fa-icon-attention{
    margin-right: 7px;
    color: var(--universal-white);
    transition: all 0.3s ease-in-out;
}

.sidebar-item-attention{
    background-color: var(--main-color);
    color: var(--universal-white);
    border-radius: 30px;
    width: 100%;
    padding: 4px 12px;
    margin-top: 6px;
    transition: all 3s ease-in-out;
}

.sidebar-link-attention{
    color: var(--universal-white);
    text-decoration: none;
    font-weight: 700;
}

.sidebar-item-attention:hover .sidebar-fa-icon-attention {
    animation: pulsate 1.6s infinite;
    margin-right: 13px;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Scale up */
    }
    100% {
        transform: scale(1); /* Scale back down */
    }
}

/* BREADCRUMB */
.breadcrumb-link-custom{
    color: var(--main-color);
    text-decoration: none;
    cursor: pointer;
    transition: all 2.5s;
}

.breadcrumb-link-custom:hover{
    color: var(--main-color);
    text-decoration: underline;
    cursor: pointer;
}

/* CARDS! */
/* CURRENTLY THEY ARE GENERATED BY OVERWRITING DEFAULT BS5.3 CLASSES  */
.custom-card{
    border: 1px var(--main-color) solid;
    border-radius: 20px;
}

.custom-card-header{
    font-weight: bold;
    color: var(--universal-white);
    font-size: 13px;
    border: 0;
    border-radius: 19px 19px 0 0;
    background-color: var(--main-color);
    text-align: center;
    padding: 7px 10px;
}

/* USED PRIMARY IN PUBLIC PAGES */

.omg-itsshiny {
    animation: shine 10s infinite; /* Adjust the duration as needed */
}
  
@keyframes shine {
    0% {
        color: #2dce8a; /* Greenish-gold color at the start */
    }
    25% {
        color: #caf62c; /* Slightly darker greenish-gold color at the midpoint */
    }
    50% {
        color: #2dce8a; /* Back to the original greenish-gold color at the end */
    }
    75% {
        color: #4861df; /* Slightly darker greenish-gold color at the midpoint */
    }
    100% {
        color: #2dce8a; /* Back to the original greenish-gold color at the end */
    }
}

.navbar-trans {
    background-color: transparent;
  }

.my-nav-link {
    position: relative;
    margin-right: 1rem;
    color: #414055; /* Initial text color */
    text-decoration: none;
    transition: color 0.3s ease
}

.my-nav-link::before {
    content: "";
    position: absolute;
    bottom: -2px; /* Adjust as needed to position the line relative to text */
    left: 0;
    width: 0;
    height: 2px; /* Height of the line */
    background-color: green; /* Color of the line */
    transition: width 0.3s ease; /* Adjust the duration and timing function as needed */
}

.my-nav-link:hover {
    color: green;
}

.my-nav-link:hover::before {
    width: 100%;
}

.timeline {
    position: relative;
    margin: 20px auto;
    padding: 10px 20px;
    max-width: 600px;
    border-left: 2px solid var(--main-color); /* Kolor linii osi */
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 30px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    position: absolute;
    left: -15px;
    top: 0;
    background: var(--main-color); /* Kolor ikon */
    color: white;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid white;
}

.timeline-content {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content h6 {
    margin-top: 0;
    font-size: 1.1em;
    color: var(--main-color);
}

.timeline-content p {
    margin: 5px 0 0;
    font-size: 0.95em;
    color: #333;
}

.icon-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 200px; /* Optional: Limit the width of the whole component */
    margin: auto;
  }

  /* Square container for the icon */
  .square {
    width: 3rem;
    height: 3rem;
    background-color: #17a2b8; /* Info-like color */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* Optional rounded corners */
  }

  /* Icon styling */
  .square i {
    font-size: 1.5rem;
    color: white;
  }

  .icon-description {
    color: #6c757d; /* Light text for description */
  }


.pv-color{
    color: #FFA500;
}

.rf-color{
    color: #1666c5;
}

/* custom card inside ozesoft */
.inside-landing-card{
    border: 2px solid var(--main-color);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    box-shadow: 2px 2px var(--main-color);
}

.inside-landing-card p{
    color: gray;
    margin-bottom: 0;
    transition: all 0.5s ease-in-out;
}

.inside-landing-card:hover{
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
    border-radius: 25px;
    color: white;
    cursor: pointer;
    box-shadow: 5px 5px lightgray;
}

.inside-landing-card:hover p{
    color: white;
}

.accordion-button{
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0;
    --bs-accordion-active-bg: var(--main-color)
}

.accordion-button:not(.collapsed){
    color: #ffffff;
}