/*for color
https://community.kodular.io/t/colour-codes-for-best-ui-designs/74225*/

html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


@media screen and (max-width: 576px) {
    nav.mobile {
        display: none;
    }

    .menu-wrapper {
        margin: 0px !important;
    }
    .navbar {
        padding: 0px !important;
    }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    /*overflow-y: hidden;*/ /* Hide vertical scrollbar */
    /*overflow-x: hidden;*/ /* Hide horizontal scrollbar */
}
.codexoom-nav 
{
    height: 40px;
    
}
.codexoom-top-row 
{
    height: 50px;
}
.codexoom-top-row-content 
{
    padding: 6px;
}
.codexoom-bg-1 
{
    background-color: #0fa4a8;
}
.codexoom-bg-2 
{
    background-color: #AAC9CE;
}
.codexoom-bg-3 
{
    background-color: #CBE54E;
}
.codexoom-bg-4 
{
    background-color: #88CDF6;
}

.codexoom-color-1 
{
    color: #0fa4a8;
}

.codexoom-color-2 
{
    color: #AAC9CE;
}

.codexoom-color-3 
{
    color: #CBE54E;
}

.codexoom-color-4 
{
    color: #88CDF6;
}
.codexoom-color-5 
{
    color: green;
}

/*sliding top nav*/
.menu-wrapper 
{
    /*max-width: 500px;*/
    width:100%;
    height: 40px;
    padding: 0 30px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.menu-wrapper .menu-item 
{
    width: 100%;
    height: 100%;
    overflow: auto;
    white-space: nowrap;
}

.menu-wrapper .menu-item a 
{
    display: inline-block;
    padding: 5px 20px;
    color: #333;
    height: 100%;
}

.menu-wrapper .menu-item a:hover 
{
    text-decoration: none;
}

.menu-wrapper .menu-item a:first-child 
{
    padding-left: 5px;
}

.menu-wrapper .menu-item::-webkit-scrollbar 
{
    display: none;
}

.menu-wrapper .pointer 
{
    height: 40px;
    width: 30px;
    line-height: 38px;
    text-align: center;
    position: absolute;
    top: 0;
}

.menu-wrapper .pointer i 
{
    color: #333;
    cursor: pointer;
}

.menu-wrapper .left-pointer 
{
    left: 0;
}

.menu-wrapper .right-pointer 
{
    right: 0;
}

.menu-wrapper .dis i 
{
    color: #ccc;
}

a.active 
{
    color: red;
}

.show-more 
{
    color:blue;
    cursor: pointer;
    text-decoration: none;
}

.custom-dropdown-height {
    height: 38px; /* Adjust the height as needed */
    overflow-y: auto; /* Enable vertical scrolling if the content exceeds the height */
}

/*-----------toast notification start------------------------*/

.toast {
    min-width: 600px;
}

/*-----------toast notification end------------------------*/

/* For tablets and mobile and smaller devices (less than 768px) */
@media (max-width: 768px) 
{ 
    .ad-column {
        display: none;
    }

    .content-wrapper {
        margin-bottom: 120px; /* Add extra margin for smaller devices */
        
    }

    .center-align-sm-device {
        text-align:center !important;
    }

    .footer-line-height-sm-device {
        line-height:40px !important;
    }

    .toast {
        min-width: 400px;
    }

}

/* For mobile devices (less than 576px) */
@media (max-width: 575px) {
    .toast {
        min-width: 250px;
    }
}


/*------------------- layout footer adjustment start--------------*/

/*------------------- layout footer adjustment end----------------*/

    /* social Media Buttons  Style */
    .faSocial {
    position: relative;
    display: inline-block;
    padding: 8px;
    font-size: 20px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}

.fa:hover {
        opacity: 0.4;
    }

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-google {
    background: #dd4b39;
    color: white;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

.fa-pinterest {
    background: #cb2027;
    color: white;
}

.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
    background: #00aff0;
    color: white;
}

.fa-android {
    background: #a4c639;
    color: white;
}

.fa-dribbble {
    background: #ea4c89;
    color: white;
}

.fa-vimeo {
    background: #45bbff;
    color: white;
}

.fa-tumblr {
    background: #2c4762;
    color: white;
}

.fa-vine {
    background: #00b489;
    color: white;
}

.fa-foursquare {
    background: #45bbff;
    color: white;
}

.fa-stumbleupon {
    background: #eb4924;
    color: white;
}

.fa-flickr {
    background: #f40083;
    color: white;
}

.fa-yahoo {
    background: #430297;
    color: white;
}

.fa-soundcloud {
    background: #ff5500;
    color: white;
}

.fa-reddit {
    background: #ff5700;
    color: white;
}

.fa-rss {
    background: #ff6600;
    color: white;
}

.fa-whatsapp {
    background: #25D366;
    color: white;
}

.fa-telegram {
    background: #0088cc;
    color: white;
}

.fa-envelope-share {
    background: #00b489;
    color: white;
}


/*------------------- tool tip start------------------------*/
/*.faSocial::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #04AA6D;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    white-space: nowrap;
    font-size: 15px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}*/

.faSocial:hover::after {
    opacity: 1;
}
/*------------------- tool tip end------------------------*/

/*------------------- in post details selected-post-highlight start------------------------*/

.selected-post-highlight {
    background-color: #DAF7A6;
    font-weight: bold;
}

/*------------------- in post details selected-post-highlight end------------------------*/

/*------------------- menu-logo  start ------------------------*/
.menu-logo 
{
    display: inline-block;
    vertical-align: middle;
   
}

/*------------------- menu-logo  end------------------------*/

/*------------------- social media follow start--------------*/

.social-follow {
    text-align: right;
    margin-top: 5px;
}

.social-follow a {
    text-decoration: none;
}

    .social-follow img {
        height: 20px;
        width: 20px;
        margin-right: 5px;
    }

/*/*.social-follow a {
    display: inline-block;
    margin: 0 10px;
    font-size: 24px;
    color: #555;*/ /* Default color */
    /*transition: color 0.3s ease;
}

.social-follow a:hover {
    color: #000;*/ /* Color when hovered */
/*}*/

.facebook-follow {
    color: #3b5998; /* Facebook color */
    
}

.twitter-follow {
    color: #00acee; /* Twitter color */
  
}

.linkedin-follow {
    color: #0e76a8; /* LinkedIn color */
 
}

.instagram-follow {
    color: #C13584; /* Instagram color */
   
}

.youtube-follow {
    color: #FF0000; /* YouTube color */
    
}

/*------------------- social media follow end----------------*/

/*--------------------text transform start-------------------*/

.lowercase {
    text-transform: lowercase !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}
/*--------------------text transform end---------------------*/

/*--------------------post content css in PostDetails.cshtml start---------------------*/
/* Main container for the post content */
.post-content {
    font-family: 'Trebuchet MS', Arial, sans-serif; /* Body text font */
    font-size: 16px;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
}

    /* Styling for code blocks */
    .post-content pre,
    .post-content code {
        font-family: 'Fira Code', monospace; /* Monospaced font for code blocks */
        font-size: 15px;
        background-color: #f5f5f5;
        padding: 8px;
        border-radius: 4px;
        color: #2d2d2d; /* Dark color for code text */
        overflow-x: auto; /* Scrolls horizontally if code is too long */
    }

    /* Additional styling for inline code */
    .post-content code {
        background-color: #f0f0f0;
        padding: 2px 4px;
        border-radius: 3px;
        color: #d63384; /* Different color for inline code */
        font-size: 0.95em; /* Slightly smaller for inline code */
    }

/*--------------------post content css in PostDetails.cshtml end--------__-------------*/