/* You can add global styles to this file, and also import other style files */
@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");
/*@import url("../css/tabs-style.css");*/
@import url("../node_modules/ngx-toastr/toastr.css");

@font-face {
    font-family: 'Chirp';
    src: url('/fonts/Chirp-Regular.woff2') format('woff2'), 
        url('/fonts/Chirp-Regular.ttf') format('truetype'),
        url('/fonts/Chirp-Regular.eot');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Chirp';
    src: url('/fonts/Chirp-Medium.woff2') format('woff2'), 
        url('/fonts/Chirp-Medium.ttf') format('truetype'),
        url('/fonts/Chirp-Medium.eot');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Chirp';
    src: url('/fonts/Chirp-Bold.woff2') format('woff2'), 
        url('/fonts/Chirp-Bold.ttf') format('truetype'),
        url('/fonts/Chirp-Bold.eot');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Chirp';
    src: url('/fonts/Chirp-Heavy.woff2') format('woff2'), 
        url('/fonts/Chirp-Heavy.ttf') format('truetype'),
        url('/fonts/Chirp-Heavy.eot');
    font-weight: 900; /* Heavy */
    font-style: normal;
}



html, body {
    height: 100%; /* Make sure the html and body fill the full height */
    margin: 0; /* Remove default margin */
}

body {
    /*display: flex;
    flex-direction: column; /* Makes the main content stretch to fill available space */
}

/*div.right_side_bar {
    position: fixed;
    right: 30px;
    top: 10px;
}
*/

.right_side_bar {
/*    position: sticky;
    top: 0;
    height: calc(100vh - 10px);
    overflow-y: auto;
*/    /* optional max-width if you want to limit */
/*    max-width: 350px;
*/    /* remove padding or margin as needed */
/*    padding-right: 0;
*/}

.display-height-100 {
    height:100%;
}

.display-flex {
    display: flex;
    flex-direction: column;
}

header {
    height: 60px; /* Assuming a fixed height for the header */
}

.main-content {
    flex: 1; /* Takes up remaining space */
    display: flex; /* Ensures it stretches vertically */
    align-items: center; /* Center content vertically */
}

.footer-menu {
    display: flex;
    justify-content: center;
    list-style-type: none; /* Remove bullets */
    padding: 0;
    margin: 0; /* Remove default margins to align properly */
}

    .footer-menu li {
        padding: 0 15px;
    }

.thin-footer {
    height: 50px; /* Maintain a thin footer */
    align-items: center; /* Center content vertically */
    display: flex; /* Flexbox to align children inline */
    justify-content: center; /* Center content horizontally */
}

.bg-gray {
    background-color: #86898c;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 5px;
    border: 1px solid #888;
    width: 95%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.3rem; /* Rounded corners for the modal */
}

.modal-header {
    display: flex;
    align-items: center;
    padding: 1rem; /* Padding around the elements in the header */
}

.modal-logo {
    height: 40px; /* Set an appropriate height for your logo */
    margin-right: auto; /* Ensures the logo stays on the left */
}

.modal-header h2 {
    flex-grow: 1; /* Allows the title to expand and center-align text properly */
    margin: 0; /* Removes default margin to ensure proper alignment */
}

.btn-close {
    margin-left: auto; /* Ensures the close button stays on the right */
}

.user-avatar-container {
    width: 40px; /* Width of the circular crop */
    height: 40px; /* Height of the circular crop, same as width */
    border-radius: 50%; /* Creates the circular shape */
    overflow: hidden; /* Hides anything outside the circular shape */
    display: inline-block; /* Allows it to be sized appropriately */
    position: relative; /* Needed for positioning adjustments if necessary */
}

.user-avatar-container img {
    width: auto; /* Ensures the image maintains aspect ratio */
    height: 100%; /* Makes the image fill the container height */
    min-width: 100%; /* Ensures the image covers the width */
    position: absolute; /* Allows for centering */
    top: 50%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%); /* Offsets the image to be centered */
}

    .user-avatar-container-sm {
        width: 30px; /* Width of the circular crop */
        height: 30px; /* Height of the circular crop, same as width */
        border-radius: 50%; /* Creates the circular shape */
        overflow: hidden; /* Hides anything outside the circular shape */
        display: inline-block; /* Allows it to be sized appropriately */
        position: relative; /* Needed for positioning adjustments if necessary */
    }

    .user-avatar-container-sm img {
        width: auto; /* Ensures the image maintains aspect ratio */
        height: 100%; /* Makes the image fill the container height */
        min-width: 100%; /* Ensures the image covers the width */
        position: absolute; /* Allows for centering */
        top: 50%; /* Centers vertically */
        left: 50%; /* Centers horizontally */
        transform: translate(-50%, -50%); /* Offsets the image to be centered */
    }

.info-icon {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #ccc;
    text-align: center;
    line-height: 20px; /* Vertically center the '?' inside the circle */
    border-radius: 50%; /* Make the icon round */
}

.info-text {
    display: none; /* Initially hide the info text */
}

.info-container{
    display:inline-block;
}  

.info-container:hover .info-text {
    display: block; /* Show the info text on hover */
    position: absolute;
    background-color: #f8f9fa;
    padding: 5px;
    border-radius: 0.25rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.video-container {
    width: 100%; /* Match the width of its parent container */
    overflow: hidden; /* Hide overflow content */
}

.responsive-video {
    width: 100%; /* Make the video span the width of its parent container */
    height: auto; /* Keep the video’s aspect ratio */
}

.image-container {
    width: 100%; /* Match the width of its parent container */
    overflow: hidden; /* Hide overflow content */
}

/* Styles for the container that holds the image */
.responsive-image-wrapper {
    width: 100%; /* Ensures the wrapper fills the parent container */
    overflow: hidden; /* Hides anything outside the bounds of the container */
    border-radius: 10px; /* Adjusts the corner roundness */
    display: flex; /* Enables flexbox layout */
    justify-content: flex-start; /* Aligns the child elements to the left in case they are smaller than the container */
    align-items: center; /* Centers items vertically */
}

/* Styles for the image */
.responsive-image {
    width: 100%; /* Stretches the image to cover the width of the container */
    height: auto; /* Maintains the aspect ratio */
    border-radius: 10px; /* Ensures the image corners are also rounded */
}

.responsive-image {
    width: auto; /* Initially set width to auto */
    max-width: 100%; /* Image cannot exceed the width of its container */
    height: auto; /* Height is auto to maintain aspect ratio */
    object-fit: contain; /* Ensures the image is scaled properly to fit within dimensions */
    border-radius: 10px; /* Ensures the image corners are also rounded */
}

.responsive-logo-image-sm {
    width: 50px; /* Initially set width to auto */
    max-width: 100%; /* Image cannot exceed the width of its container */
    height: auto; /* Height is auto to maintain aspect ratio */
    object-fit: contain; /* Ensures the image is scaled properly to fit within dimensions */
    border-radius: 10px; /* Ensures the image corners are also rounded */
}

/* Custom styles for toastr */
.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-warning {
    background-color: red; /* Change the background color for warning */
    color: white; /* Change the text color */
    border-radius: 8px; /* Example for rounded corners */
    padding: 10px; /* Example for padding */
}

.toast-message {
  font-size: 14px;
}

.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}