.plus {
    width:5px;
    padding:3px 14px 3px 14px;
}

.minus {
    width:5px;
    padding:3px 14px 3px 14px;
}

.ydata {
  margin-left : 10px;
  }

.ydataad {
    width : 340px;
    margin-left : 20px;
}

.cg_yxdata {
    overflow: hidden;
    resize: none;
}


.sticky2 {
    position: fixed;
    top: 90px;
    z-index: 1000;
}

.cg_header {
    color: #ff8c00;
}

.cg_mainheader {
    color: #2A98C3;
    font-weight: bold;
}


.cg_tiles {
    margin:10px;
    border-radius:10px;
}

.cg_visualizers {
    margin-left : 20px;
}

.cg_btn_result {
    margin: 0 10px 15px 13px;
    width :200px;
}

.cg_btn_templates {
    margin : 18px 0 18px 0;

}

.cg_iframe_templates {
    border-radius:10px;
    width:500px;
    display : block;
}

.cg_iframe_horizontal {
    width : 1000px;
    display : block;
}

.cg_messagebox {
    margin: 20px;
    font-weight: bold;
    position: relative;
}

.cg_preview_button {
    margin:5px 10px 45px 10px;
}


th.cg_excel_header {
    background-color: #90A4AE;
    border: 1px #eeeeee solid;
    color: #0e0e0e;
    font-weight: bold;
    font-size: 16px;
}

td.cg_excel_cell {
    border: 1px #eeeeee solid;
}

.cg_excel_data {
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    width: 100%;
    font-size: 14px;
    text-align: right;
}


.cg_excel_x {
    text-align: left;

}

.cg_navbar {
    position : relative !important;
}

.cg_menulinks {
    cursor : pointer;
    margin-left : 11px;
    color : #1c99e6;
    font-weight: bold;
}
.cg_menulinks:hover {
    text-decoration: underline;
}

.material-symbols-outlined {
    cursor: pointer;
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.betahidden {
    /*display : none;*/
}

.cg_guide_header {
    color: #ff8c00; /* Existing color property */
    margin-top: 50px; /* Add this line to create space above */
}

.cg_social_media_icons {
    margin : 10px;
}


.help_img_container {
    /* border: 3px solid #ccc;
    border: 1px solid #ccc;
    display: block;
    margin-left: auto;
    margin-right: auto;
     */
    margin: 20px auto; /* Space around image */
    display: block; /* Center image */
    width: 70%; /* Maintain consistency */
}
.help_text {
    margin: 40px 0 20px 20px; /* Define top and bottom margins explicitly */
    line-height: 1.5; /* Set line spacing for readability */
    text-align: justify; /* Optional: Justify text for consistency */
}

.help_accordion {
    margin-left: 50px;
}

.guide_rounded_shadow {
        width: 60%; /* Set image width to 70% */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
        margin-bottom: 50px !important;; /* Optional: Adds spacing below the image */
}



.footer-text-right {
     float: right; /* Floats the text to the right */
     font-size: 1.00rem; /* Keeps font size consistent */
     margin-left: 15px; /* Adds some spacing between the copyright and the language links */
     color: white; /* Sets the "Languages" text to white */
 }
 
 .footer-text-right a {
     color: #1889c1; /* Sets the color of the language links to aqua blue */
     text-decoration: none; /* Removes underline from links */
 }
 
 .footer-text-right a:hover {
     text-decoration: underline; /* Adds underline on hover */
     color: #00B7B7; /* Optionally, change color on hover (darker aqua) */
 }


@media (min-width: 990px) and (max-width: 1400px)  {

    .sticky {
        position: relative;
    }


    .cg_preview_button {
        margin:5px 10px 65px 40px;
        width:250px;
    }



}



@media (max-width: 1200px) {




    .sticky {
        position: relative;
        top: 0;
        z-index: 1;
    }

    .cg_preview_button {
        margin:5px 10px 65px 40px;
        width:250px;
    }

}

@media (max-width: 990px) {




    .pin-sticky {
        display: none;
    }


}

/* Default style for large screens */
.responsive-image {
     width: 70%;
     max-width: 800px; /* Maximum width for large screens */
     height: auto; /* Maintain aspect ratio */
     margin-bottom: 20px;
     border: 2px solid #ccc;
     overflow: hidden; /* Prevents any content overflow from the card */
 }

 
 /* For screens smaller than 1200px */
 @media (max-width: 1200px) {
     .responsive-image {
         max-width: 600px; /* Shrink image for medium screens */
     }
 }
 
 /* For screens smaller than 990px (like mobile devices) */
 @media (max-width: 990px) {
     .responsive-image {
         max-width: 80%; /* Full width on small screens */
     }

     .cg_iframe_templates {
         border-radius:10px;
         width:500px;
         zoom : 0.5;
     }

     .cg_iframe_horizontal {
         width : 500px;
         zoom : 0.5;
     }
 }


/* For screens smaller than 990px (like mobile devices) */
@media (min-width: 990px) and (max-width: 1275px) {

    .cg_iframe_templates {
        border-radius:10px;
        width:500px;
        zoom : 0.6;
    }

    .cg_iframe_horizontal {
        width : 800px;
        zoom : 0.8;
    }
}
 
 /* Ensure the image is responsive and contained properly */
 .card img {
     max-width: 70%;  /* Ensures the image doesn't exceed its container width */
     height: auto;     /* Maintains the image's aspect ratio */
     display: block;   /* Ensures the image is treated as a block-level element */
     margin: 0;        /* Removes any automatic centering or extra margins */
     float: none;      /* Ensure no floating */
 }
 
 /* Ensure the text stays below the image */
 .card-body {
     clear: both;      /* Clears any floats, forcing content to appear below the image */
     margin-top: 20px; /* Add spacing between image and text */
 }



ul.share-buttons{
    list-style: none;
    padding: 0;
}

ul.share-buttons li{
    display: inline;
}

ul.share-buttons .sr-only{
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}



/* SHARE THIS CODE */
ul.share-buttons{
    list-style: none;
    padding: 0;
}

ul.share-buttons li{
    display: inline;
}

ul.share-buttons .sr-only{
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}