/* RESPONSIVE CHANGES ------------------------------------------------------------------------------------------ */
/* Note: Bootstrap will handle its own elements automatically */

@media(min-width:1201px){
	.maddos-content-scroll{max-height:360px;overflow-y:auto;}
}

@media(max-width:1200px){
	.maddos-post-linktext{font-size:22px;}
.maddos-grid-container p{height:200px;}
}

@media(min-width:993px) and (max-width:1200px){
	.maddos-content-scroll{max-height:280px;overflow-y:auto;}
}

@media(max-width:992px){
	.maddos-review{display:block !important;}
.maddos-review img{display:inline !important;}
.maddos-single-left{border-bottom:1px solid;padding-bottom:20px;margin-bottom:20px;}
.maddos-post-linktext{font-size:28px;}
.maddos-link-thumbnail img{width:100%;}
.maddos-grid-container p{height:120px;}
}

@media(max-width:768px){
	.maddos-search{display:none;}
#maddos-site-title a{font-size:75%;}
#maddos-site-desc{font-size:75%;}
}

@media(max-width:480px){
	.maddos-post-header{font-size:1.5em;}
.maddos-link-header-back{font-size:1.0em;}
.maddos-headline{font-size:0.9em;}
.maddos-infobar{font-size:0.9em;}
.maddos-link-thumbnail a{font-size:1.6em;}
}

@media(max-width:320px){
	.maddos-post-header{font-size:1.3em;}
.maddos-link-header-back{font-size:0.8em;}
.maddos-headline{font-size:0.8em;}
.maddos-infobar{font-size:0.8em;}
.maddos-link-thumbnail a{font-size:1.4em;}
}

@media(max-width:240px){
	.maddos-post-header{font-size:1.1em;}
.maddos-link-header-back{font-size:0.7em;}
.maddos-headline{font-size:0.7em;}
.maddos-infobar{font-size:0.7em;}
.maddos-link-thumbnail a{font-size:1.2em;}
}
/*
 *  Theme Name:     The AI Fella Theme
 *  Template:       maddos
 */


.maddos-category-wrapper ol li{margin:2px 10px 2px 0px;}
.maddos-taxonomy-description{text-align:center;}
.maddos-post-title a{font-size:28px;}
/* Align the category icon and breadcrumbs inline */
.breadcrumb-category-icon{display:inline-block;vertical-align:middle;/* Align them vertically if needed */ font-family:"JetBrains Mono";}
.breadcrumb-category-icon img{width:22px;height:22px;}
.breadcrumb-category-icon, #breadcrumbs a{}
/* Custom color for the category title in breadcrumbs */
#breadcrumbs{font-family:"JetBrains Mono";font-size:16px;font-weight:500;color:#979797;/* Change to the desired color */ vertical-align:middle;/* Align them vertically if needed */ display:inline;}
#breadcrumbs a{font-family:"JetBrains Mono";font-size:16px;font-weight:500;color:#FF5733;/* Change to the desired color */}
#breadcrumbs a:hover{text-decoration:none;}
.breadcrumb_last{color:#979797;}
.breadcrumb-category-icon::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:50%;/* This color should be dynamic, based on category */ background-color:#FF0000;}
.breadcrumb-category-icon:hover::before{animation:pulse 1s 1;}
@keyframes pulse {
    0%{box-shadow:0 0 0 0 rgba(0,0,0, 0.4);}
  70%{box-shadow:0 0 0 10px rgba(0,0,0, 0);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0, 0);}
}

.breadcrumb-category-icon.pulse::before{animation:pulse 1s 1;}
.breadcrumb-home-text{font-family:"JetBrains Mono";}
.breadcrumb-home-text a{font-family:"JetBrains Mono";font-size:16px;font-weight:500;color:#0be5ff;}
.breadcrumb-home-icon{margin-right:5px;}
.breadcrumb-home-icon:before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:50%;background-color:#7af1ff;}
.breadcrumb-home-icon:hover::before{animation:pulse 1s 1;}
.breadcrumb-home-icon.pulse::before{animation:pulse 1s 1;}

.breadcrumb-category-text{margin-left:5px;}
.maddos-link-header.nocenter{padding:10px;}
/* video container */ 
.embed-container{position:relative;padding-bottom:56.25%;/* 16:9 aspect ratio */ overflow:hidden;max-width:100%;height:360px;text-align:center;}
.youtube-video iframe{position:absolute;top:0;left:0;width:100%;height:360px;}
.youtube-video{position:relative;cursor:pointer;text-align:center;}
.youtube-video img{width:532px;height:360px;}
.play-button{width:60px;height:60px;background:url(https://ai.theaifella.com/tools/2023/08/yt-play-button.png) no-repeat;background-size:contain;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;/* So it doesn't interfere with the click event */}
h1.hometitle{font-size:14px;display:inline;font-weight:400;}
.maddos-infobar{border-bottom:3px solid #7af1ff;background:#fdfdfd;font-size:14px;padding:6px 5px 2px 0;text-align:left;}
.maddos-header{box-shadow:none;min-height:100px;}
.header-mascot img{width:100%;max-width:230px;height:auto;margin-bottom:-28px;margin-top:-60px;}
.header-left{display:flex;/* Use flexbox for the container */ align-items:center;/* Align items vertically in the center */}
.mascot-tablet{display:none;}
.mascot-tablet img{max-width:230px;/* Set the maximum width for the image */}
.logo-search-container{width:100%;max-width:800px;/* You can adjust the max-width to your desired value */ margin:0 auto;/* Center the container horizontally */}

.logo img{width:100%;max-width:456px;height:auto;margin-top:25px;}
.logo{margin-bottom:20px;}
.maddos-search{position:unset;}
.maddos-search input[type="text"]{background:url(https://ai.theaifella.com/wp-content/themes/maddos/images/search.png) no-repeat scroll 10px 7px #ffffff;border-radius:10px;border:3px solid #7af1ff;color:#7d7d7d;font-size:14px;padding:6px 10px 6px 30px;width:100%;max-width:456px;}
.icon-bar{background-color:#7af1ff;}
.maddos-link-header-back, .maddos-link-header-back a{font-family:'JetBrains Mono';color:#7af1ff;text-decoration:none;text-align:center;display:none;}
.maddos-menu{border-radius:10px;border:3px solid #7af1ff;}
a.maddos-link:hover{color:#49b3d5 !important;}
.maddos-link-header{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom:0px solid #7af1ff;}
.maddos-link-container{border-radius:10px;border:3px solid #7af1ff;}
.maddos-category-header .no-bottom-border, .maddos-link-container .no-bottom-border, .no-bottom-border{border-bottom:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.maddos-archive, .maddos-search-results{color:#4e4e4e;font-family:'JetBrains Mono';}
.maddos-widget{border-radius:10px;}
.maddos-widget-title{border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px;border-top:3px solid #7af1ff;border-left:3px solid #7af1ff;border-right:3px solid #7af1ff;}
.maddos-category-wrapper{border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-bottom:3px solid #7af1ff;border-left:3px solid #7af1ff;border-right:3px solid #7af1ff;}
.maddos-category-wrapper::after{content:"";position:absolute;bottom:0;/* Position it at the bottom */ left:0;right:0;height:40px;/* Set height to 50px */ background-image:linear-gradient(transparent, white);pointer-events:none;/* Ensures the pseudo-element doesn't interfere with any interactions */ z-index:10;/* This ensures the gradient is above the content;adjust as necessary */}
.maddos-widget-title:before{content:'';display:block;position:absolute;z-index:5;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:3px;width:-webkit-calc(100% - 25px);width:calc(100% - 25px);border-radius:2px;background-color:#d5d5d582;}
.maddos-widget-title:after{content:'';display:block;position:absolute;z-index:5;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:3px;width:55px;border-radius:2px;background-color:#7af1ff;-webkit-transition:width .3s;transition:width .3s;will-change:transform;}
.maddos-widget-title:hover:after{width:calc(100% - 25px);transition:width .3s;}
.maddos-search input:focus-visible{outline:none;}
.maddos-search input[type="text"]{background-color:white;}
.maddos-search input[type="text"]:focus,
.maddos-search input[type="text"]::selection{background-color:white;}
.maddos-search input[type="text"]:-webkit-autofill{/* Add your desired background color and other styles here */ background-color:white !important;color:black;/* You may need to change text color to ensure readability */}
.features, .pricing_plan, .product-categories{margin-top:20px;/* Adjust this value as needed */ margin-bottom:20px;/* Adjust this value as needed */}
.seo-title{margin-top:10px;margin-bottom:40px;font-size:16px;color:#000000;font-style:italic;}
.seo-title h2{font-size:16px;}
.seo-title h2:before{content:'"';margin-right:-10px;}
.seo-title h2:after{content:'"';margin-left:-10px;}
.social{margin-top:20px;/* Adjust this value as needed */ margin-bottom:20px;/* Adjust this value as needed */ font-size:26px;text-align:center;}
.post-ratings{min-height:40px;font-size:10px;}
.comments-views{margin:40px 0px 20px 0px;}
.comments-views > div{box-sizing:border-box;/* Ensures that padding and borders are included in total width */}
.komentari-gore{float:left;width:58.33333%;/* Roughly equivalent to 7 out of 12 columns */}
.pregledi{float:right;}
.comments-views:after{content:"";display:table;clear:both;}
input:-internal-autofill-selected{background-color:-internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;color:fieldtext !important;}
.maddos-category-icon img{width:30px;height:30px;}
/* Apply CSS to the specific .socials-column class */
.socials-column{display:flex;align-items:flex-end;/* Align the items at the bottom of the column */ min-height:142px;}
.socials-container{display:flex;align-items:flex-end;/* Align the items at the bottom of the container */}
/* Remove any gaps/margins between the row and the container */
.maddos-header-container .row{margin-bottom:0;}
/* Define common styles for all buttons */
.maddos-buttons{display:flex;}
.maddos-button{display:flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:50%;background-color:grey;transition:transform 0.3s ease;margin-right:10px;position:relative;perspective:1000px;/* Add perspective for 3D effect */}
.maddos-button-ring{position:absolute;width:100%;height:3px;/* Thickness of the ring */ border-radius:50%;background-color:#000;/* Color of the ring */ top:50%;left:50%;transform:translate(-50%, -50%) rotateX(90deg);/* Rotate the ring */}
.maddos-button-icon{display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1;/* Place the icon above the ring */}
.maddos-button-icon img{width:40px;height:40px;}
/* Define unique styles for each button */
.maddos-button-1{background-color:#1b5f93;}
.maddos-button-2{background-color:#7af1ff;}
.maddos-button-3{background-color:#ffffff;}
.maddos-button-4{background-color:unset;border:solid #c1c1c1;}
.maddos-button-5{background-color:#ffffff;border:solid #4f6fc4;}
.maddos-button-6{background-color:unset;}
.maddos-button-7{background-color:unset;}
/* Description cloud on hover */
.maddos-button .hover-block{font-size:12px;position:absolute;padding:8px 10px;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:block;visibility:hidden;opacity:0;z-index:2;color:#767676;text-transform:none;transition:opacity 0.3s ease, visibility 0.3s ease;width:200px;/* Maximum width of the hover block */ white-space:normal;/* Allow the text to wrap to the next line */}
.maddos-button .hover-block:before{content:'';display:inline-block;position:absolute;height:calc(100% - 0px);z-index:-1;width:100%;border-radius:11px;background-color:#fdfdfd;border:3px solid #7af1ff;top:0;left:50%;transform:translateX(-50%);}
.maddos-button .hover-block:after{content:'';display:inline-block;position:absolute;bottom:-4px;left:50%;width:11px;height:10px;transform:translateX(-50%) rotate(-45deg);background:#fdfdfd;border-style:solid;border-color:transparent transparent #7af1ff #7af1ff;border-width:0 0 3px 3px;}
.maddos-button:hover .hover-block{visibility:visible;opacity:1;}
/* Button hover effect - slight clockwise rotation of the icon only */
.maddos-button:hover .maddos-button-icon{transform:rotate(10deg);}
.maddos-button:hover .hover-block{visibility:visible;/* Set visibility to visible on hover */ opacity:1;/* Set the opacity to 1 on hover to make it visible */}
.maddos-category-wrapper li{position:relative;}
#maddos-legend-mobile-friendly-icon{display:none;}
#maddos-legend-site-review-icon{display:none;}
/* call to action button */
.cta-widget{background-color:rgb(209 200 200 / 30%);width:100%;margin:-30px 0px 0px 0px;max-width:400px;text-align:center;border-radius:5px 5px 10px 10px;border:3px solid #f1eeee;overflow:hidden;}
.cta-image img{width:100%;height:auto;display:block;}
.cta-button{margin:28px;position:relative;font-size:16px;}
.cta-button a{background-color:#002;color:#7af1ff;padding:8px 20px;text-decoration:none;border-radius:5px;position:relative;overflow:hidden;width:fit-content;/* Ensures the button width fits content */ display:inline-block;/* Required for width to be set */ z-index:1;overflow:visible;}
.cta-button a .arrow{transition:all 0.3s ease;display:inline-block;}
.cta-button a:hover .arrow{animation:bounceRight 1s infinite;/* Slower bounce speed */}
/* Bounce right animation keyframes */
@keyframes bounceRight {
  0%, 100%{transform:translateX(0);}
50%{transform:translateX(10px);}
}

/* Pulse effect around the button */
.cta-button a:before{content:'';position:absolute;top:0px;right:0px;bottom:0px;left:0px;/* background:rgba(0, 0, 0, 0.2);*/ border-radius:inherit;z-index:-1;opacity:0;transform:scale(0.9);transition:all 0.3s ease;}
.cta-button a:hover:before{opacity:1;transform:scale(1.0);animation:cta-pulse 1s;/* Removed 'infinite' to make it pulse only once */ z-index:0;/* Change to non-negative z-index on hover to make pulse visible */}
/* Pulse animation keyframes */
@keyframes cta-pulse {
  0%{-webkit-box-shadow:0 0 0 0 rgba(153, 153, 153, 0.7);box-shadow:0 0 0 0 rgba(153,153,153,0.7);}
 70%{-webkit-box-shadow:0 0 0 10px rgba(153, 153, 153, 0);box-shadow:0 0 0 10px rgba(153,153,153,0);}
 100%{-webkit-box-shadow:0 0 0 0 rgba(153, 153, 153, 0);box-shadow:0 0 0 0 rgba(153,153,153,0);}
}


.copyright-message{line-height:1.8em;font-size:15px;color:#dbd9d9;padding:0;border:none;position:relative;background-color:#00ccff00;background-image:-webkit-gradient(linear, left top, left bottom, from(#00ccff00), color-stop(41%, #017acf), to(#017acf));background-image:-webkit-linear-gradient(top, #00ccff00 0%, #017acf 41%, #017acf 100%);background-image:linear-gradient(to bottom, #00ccff00 0%, #017acf 41%, #017acf 100%);}
.copyright-message .inner-footer{margin:0px auto;max-width:1150px;padding:15px 10px 35px;margin-top:50px;position:relative;}
.copyright-message .inner-footer .copyright-message-headline{margin-bottom:10px;font-size:24px;color:#fff;font-weight:500;}
.copyright-message.with-bg>img, .copyright-message.with-bg>svg{position:absolute;display:inline-block;width:100%;max-width:initial;margin:0px auto;bottom:-webkit-calc(100% - 1px);bottom:calc(100% - 1px);left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
svg:not(:root){overflow:hidden;}
footer{margin:0px 0;}
.footer-section{background-color:#0bbf32;min-height:100px;padding-top:85px;padding-bottom:55px;position:relative;}
.footer-section:before{content:'';width:97px;/* Width of the container */ height:110px;/* Height of the container */ display:inline-block;background:url(https://ai.theaifella.com/tools/2023/08/ai-fella-head-144-100.png) no-repeat center center;/* Center the background image */ background-size:contain;/* Scale the image to fit within the container, maintaining its aspect ratio */ position:absolute;top:0%;left:50%;transform:translate(-50%, -50%);-webkit-backface-visibility:hidden;backface-visibility:hidden;image-rendering:-webkit-optimize-contrast;}
.maddos-copyright{border-top:0px solid #7af1ff;padding:25px;}
.footer-bottom{display:flex;justify-content:center;}
.maddos-buttons.footer-bottom{margin-bottom:15px;}
.row.footer-bottom a{color:white;text-transform:uppercase;margin-left:10px;margin-right:10px;}
/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar{width:5px;/* Width of the scrollbar */}::-webkit-scrollbar-thumb{background:#888;/* Color of the 'thumb' or the actual scroll handle */ border-radius:5px;/* Rounded corners */}::-webkit-scrollbar-thumb:hover{background:#555;/* Color when hovered */}
/* For Firefox */ *{scrollbar-width:thin;/* Set the width of the scrollbar to 'thin' */ scrollbar-color:#888 transparent;/* Color of the scroll thumb and track */}
a:focus, a:hover{text-decoration:none;}
.maddos-single-left .maddos-link-thumbnail img{box-shadow:unset;}
/* The outer wrapper for the tool preview */
.tool-preview{position:relative;max-width:400px;margin:0 auto;position:relative;border:solid 3px #cecece;border-radius:10px;box-shadow:0 0 10px rgba(0, 0, 0, 0.1);overflow:hidden;transition:all 0.3s ease-in-out;}
/* The favicon bar */
.favicon-bar-wrapper{width:100%;height:44px;background:#f3f3f3 url(https://ai.theaifella.com/tools/2023/08/url-bar-1.png) no-repeat;background-position:50% 25%;background-size:contain;}
.favicon-bar-addressbar{top:13px;left:62%;transform:translateX(-50%);text-align:center;padding-left:5px;position:relative;display:flex;align-items:center;justify-content:left;}
.link-icon-base{margin:-4px 1px 0 0;}
.link-icon-base img{box-shadow:unset;}

.favicon-bar-addressbar .favicon-bar-domain{top:0;left:5px;color:#000;font-size:12px;position:relative;display:inline-block;font-weight:400;text-decoration:none;text-transform:lowercase;padding-top:0;}
/* The tool thumbnail */
.tool-thumbnail{width:100%;padding:0px;position:relative;/* This is needed to position the button relative to this div */ z-index:0;}
.thumbnail-shadow{content:'';/* This property is not required unless using pseudo-elements */ position:absolute;display:block;top:55%;left:50%;transform:translate3d(-50%, -50%, 0);height:140px;width:100%;z-index:1;background:#000;background:-moz-linear-gradient( 0deg ,rgba(255,255,255,0) 0,rgba(0,0,0,.3) 25%, rgba(0, 0, 0, .4), rgba(0,0,0,.3) 75%,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient( 0deg ,rgba(255,255,255,0) 0,rgba(0,0,0,.3) 25%, rgba(0, 0, 0, .4), rgba(0,0,0,.3) 75%,rgba(255,255,255,0) 100%);background:linear-gradient( 0deg ,rgba(255,255,255,0) 0,rgba(0,0,0,.3) 25%, rgba(0, 0, 0, .4), rgba(0,0,0,.3) 75%,rgba(255,255,255,0) 100%);}
.tool-preview:hover .tool-thumbnail{animation:scaleAnimation 0.3s 1;transform-origin:top left;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;}
@keyframes scaleAnimation {
  0%{transform:scale(1);}
 100%{transform:scale(1.1);}
}
.tool-thumbnail .img-responsive{width:100%;height:auto;}
/* The tool button */
.tool-button{position:absolute;top:55%;left:50%;transform:translate(-50%, -50%);display:block;width:90%;padding:8px 8px;background-color:#0bbf32;color:#fff;text-align:center;text-decoration:none;border:none;cursor:pointer;transition:background-color 0.3s ease-in-out;z-index:2;border-radius:10px;line-height:23px;display:flex;justify-content:space-between;align-items:center;}
.tool-button .button-content{display:flex;align-items:center;}
.button-content img{width:auto;height:auto;}
.tool-button .button-title{margin-right:5px;margin-left:5px;font-size:16px;font-weight:700;margin-bottom:2px;/* Adjust if necessary for alignment */ vertical-align:middle;display:inline-block;}
@keyframes buttonleftpulse {
    0%{box-shadow:0 0 0 0 rgba(11, 191, 50, 0.7);/* Adjust the color as needed */}
  70%{box-shadow:0 0 0 10px rgba(11, 191, 50, 0);/* Adjust the color as needed */}
  100%{box-shadow:0 0 0 0 rgba(11, 191, 50, 0);/* Adjust the color as needed */}
}

.tool-button:hover{animation:buttonleftpulse 1.5s 1;}
.tool-button img, .tool-button .fas{vertical-align:middle;display:inline-block;}
.tool-button img{margin-top:-2px;/* Adjust this based on your specific image if there's any misalignment */}
.fas.fa-external-link-alt{font-size:24px;margin-left:5px;}
/* Styles for title and icon color */
.tool-button .button-title, .tool-button .fas.fa-external-link-alt{color:#fff;/* Setting color to white */}
/* Ensure color doesn't change on hover */
.tool-button:hover .button-title, .tool-button:hover .fas.fa-external-link-alt{color:#fff;/* Ensure it stays white even on hover */}
.new-cta-button{position:relative;font-size:19px;max-width:400px;margin:40px auto 20px auto;}
.new-cta-button a{background-color:white;color:#6b6b6b;padding:5px 10px;text-decoration:none;border:2px solid #6b6b6b;border-radius:10px;position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;/* This ensures vertical alignment of flex items */ z-index:2;transition:all 0.3s ease;}
.new-cta-button a .category-content{display:flex;align-items:center;/* Vertical alignment of icon and title */ flex-grow:1;/* allow this section to take up available space */}
.new-cta-button a .category-icon{margin-right:5px;/* Adjust the gap between icon and title */ display:inline-flex;}
.new-cta-button a .category-title{display:inline-flex;margin:0;/* Ensure no additional margin */ flex-grow:1;}
.new-cta-button a .arrow{transition:all 0.3s ease;font-size:30px;}
.new-cta-button a:hover .arrow{animation:bounceDown 1s infinite;}
@keyframes bounceDown {
  0%, 100%{transform:translateY(0);}
50%{transform:translateY(10px);}
}

.new-cta-button a:before{content:'';position:absolute;top:0px;right:2px;bottom:0px;left:2px;border-radius:inherit;z-index:1;opacity:0;transform:scale(0.98);transition:all 0.3s ease;box-shadow:0 0 0 rgba(153, 153, 153, 0);}
.new-cta-button a:hover:before{opacity:1;transform:scale(1.02);animation:new-cta-pulse 1s;box-shadow:0 0 0 0px rgba(153,153,153,0.7);}
@keyframes new-cta-pulse {
  0%{box-shadow:0 0 0 2px rgba(153,153,153,0.7);}
 70%{box-shadow:0 0 0 10px rgba(153, 153, 153, 0);}
 100%{box-shadow:0 0 0 0 rgba(153, 153, 153, 0);}
}

.flagcontent-reveal-button::before{content:"\f024";/* Unicode for the regular flag icon in FontAwesome 5 */ font-family:'Font Awesome 5 Free';/* Assuming you're using FA5, otherwise adjust this */ font-weight:400;/* Regular weight */ padding-right:8px;/* Adds some spacing between the icon and the text */}
.flagcontent-reveal-button, .flagcontent-submit-button{text-transform:none;border:0px;background-color:white;margin-top:5px;font-size:15px;}
/* Single above the title */

.sat-row-sites{display:flex;justify-content:space-between;align-items:center;padding:7px;/* border:1px solid #e5e5e5;*/ margin-bottom:20px;text-align:left;transition:all 0.3s ease;cursor:pointer;margin-left:-15px;margin-right:-15px;border-radius:10px;background-color:#f1eeee;}
.sat-title-content{display:flex;align-items:center;color:black;}
.sat-title{font-size:13px;margin:0;display:inline-block;}
.sat-svg-icon{font-size:16px;margin-right:5px;}
.sat-list-sites{display:flex;gap:2px;font-size:9px;align-items:end;}
.sat-list-sites:after{content:"...";}
.sat-item-site img{width:16px;height:16px;border-radius:50%;box-shadow:0px 2px 5px rgba(0, 0, 0, 0.1);}
.maddos-link-content{padding:0px 20px 20px 20px;}
.single-tool-url{color:#0bbf32;font-size:12px;}
.title-single-left{padding:0;}
.title-single-right{padding:7px 0px 0px 0px;text-align:right;}
.title-single-views{padding:0px 0px 0px 0px;text-align:right;}
.long-desc-section{margin-top:40px;}
.above-content-field{display:flex;flex-wrap:wrap;/* Allow the items to wrap when there isn't enough space */ align-items:center;font-size:25px;text-transform:uppercase;letter-spacing:-2px;margin-bottom:15px;}
.above-content-field img{margin-right:5px;margin-left:5px;}
.above-content-field b{margin-right:10px;margin-left:10px;}
.above-content-field i{margin-right:5px;margin-left:5px;font-size:20px;}
.maddos-content-scroll{max-height:inherit;margin-top:0px;}
.maddos-content-scroll p{font-size:13px;letter-spacing:-0.7px;}
.maddos-content-scroll h3{font-size:18px;letter-spacing:-1px;}
.maddos-content-scroll h2{font-size:21px;letter-spacing:-1px;}
.maddos-content-wrapper{position:relative;max-height:360px;overflow:hidden;padding:10px 0px 10px 0px;margin:0px 15px 0px 15px;}
/* Shadows using pseudo elements */
.maddos-content-wrapper::before, .maddos-content-wrapper::after{content:"";position:absolute;left:0;right:0;height:40px;/* Adjust this for shadow size */ pointer-events:none;/* Ensure the shadow doesn't interfere with scrolling or any other pointer events */ z-index:10;/* Puts shadows on top */ opacity:0;/* by default the shadows are hidden */ transition:opacity 0.3s;}
.maddos-content-wrapper::before{top:10px;background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));}
.maddos-content-wrapper::after{bottom:0;background:linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));}
.maddos-content-wrapper.top-shadow::before{opacity:1;}
.maddos-content-wrapper.bottom-shadow::after{opacity:1;}
.comment-area{display:none;}
#custom-show-comments-btn{cursor:pointer;/* Any other styling you'd like to apply */}
#show-comments-btn{cursor:pointer;border:none;// Ensure no border styling. background-color:transparent;// Ensure no background color.}
span#show-comments-btn{font-size:25px;letter-spacing:-1px;}
.maddos-comments-container{padding:10px 10px;}
.flagcontent-form-container{margin:10px auto 0px auto;max-width:400px;}
.related-maddos-yarpp{padding:0px 20px 20px 20px;}
.related-tools-container{display:inline-block;vertical-align:top;padding:10px 5px 0;font-size:14px;position:relative;box-sizing:border-box;overflow:hidden;}
.related-tool-thumb{position:relative;padding-bottom:100%;/* 1:1 Aspect Ratio */ border-radius:5px;overflow:hidden;}
.related-tool-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;/* keep it below the gradient */ margin:0px;}
.related-tool-thumb:after, .related-tools-container.active .related-tool-thumb:after, .related-tools-container:hover .related-tool-thumb:after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;/* keep it above the image */ background:linear-gradient(0deg,#000 0,rgba(0,0,0,.58) 25%,rgba(107,107,107,0) 50%,rgba(255,255,255,0) 100%);}
.related-tools-container.active .related-tool-thumb:before, .related-tools-container:hover .related-tool-thumb:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.6);/* black with 60% opacity */ z-index:1;/* above the image, below the title */}
.related-tools-container.active .related-tool-thumb img, .related-tools-container:hover .related-tool-thumb img{animation:scaleAnimation 0.3s 1;transform-origin:top left;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;}
.related-tool-title{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:2;/* Above the image and the gradient overlay */}
.related-tool-title a{color:white;}
.related-tool-title img{width:16px;height:16px;background:white;}
.related-tool-buttons{display:none;position:absolute;top:calc(50% + 5px);left:calc(50% - 5px);transform:translate(-50%, -50%);flex-direction:column;align-items:flex-start;z-index:3;width:80%;}
.related-tool-buttons a.related-btn{width:100%;/* sets the button width to fill the container */ text-align:center;/* centers the text in the button */ margin-bottom:5px;/* space between buttons */ border-radius:5px;}
.related-tools-container.active .related-tool-buttons, .related-tools-container:hover .related-tool-buttons{display:flex;}
.related-btn{min-width:100px;/* Ensures buttons are the same width */ text-align:center;padding:10px;margin:5px;cursor:pointer;border:none;}
.related-btn.read-review{background-color:white;color:black;}
.related-btn.visit-site{background-color:#0bbf32;color:white;}
.related-btn.visit-site i.fas.fa-external-link-alt{font-size:15px;}
/* Keyframe animation for white button */
@keyframes buttonWhitePulse {
    0%{box-shadow:0 0 0 0 rgba(255, 255, 255, 0.7);}
  70%{box-shadow:0 0 0 10px rgba(255, 255, 255, 0);}
  100%{box-shadow:0 0 0 0 rgba(255, 255, 255, 0);}
}

/* Applying animations on hover */
.related-btn.read-review:hover{animation:buttonWhitePulse 1s ease;}
.related-btn.visit-site:hover{animation:buttonleftpulse 1s ease;}
/* WEBSITE RANKING */
div.formbox__title a:hover{color:#6db738 !important;}


/* SCREEN SIZE CONDITIONS */

@media only screen and (min-width: 992px) and (max-width: 1200px) {
.logo img{margin-top:24px;}
.header-mascot img{margin-bottom:-26px;}
.socials-column{min-height:124px;}
.youtube-video img{width:100%;height:360px;}
}

@media(max-width:1200px){
.maddos-infobar{font-size:13px;}
.maddos-infobar h1{font-size:13px;}
}

@media(max-width:991px){
.header-mascot img{display:none;}
.maddos-infobar{text-align:center;}
.hover-block{display:none;}
 .maddos-button:hover{transform:none;}
.above-content-field{display:unset;font-size:20px;}
span#show-comments-btn{font-size:20px;}
.maddos-content-scroll h2{font-size:18px;letter-spacing:-1px;}
.maddos-single-left{border-bottom:0px solid;}
.cta-widget{margin:0 auto;}
.favicon-bar-addressbar{left:66%;}
}


/* Tablet screen size media query */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-left{flex-direction:row;/* Change to horizontal arrangement for tablets */ justify-content:space-between;/* Distribute elements to both ends */ margin-top:-25px;margin-bottom:0px;}
.logo, .maddos-search{margin-right:10px;/* Add some spacing between logo and search */}
.mascot-tablet{margin-left:-20px;display:block;margin-bottom:-88px;margin-top:-30px;}
.socials-column{min-height:60px;}
.title-single-left{float:left;}
}


@media(max-width:768px){
.maddos-search{display:unset;}
.header-left{text-align:center;}
.socials-column{justify-content:center;/* Center the buttons on smaller screens */ min-height:60px;overflow:hidden;}
.footer-bottom{overflow:hidden;}
.title-single-left{float:left;}
.youtube-video img{width:100%;height:auto;}
}

@media(max-width:480px){

.new-cta-button{font-size:12px;margin:25px auto 20px auto;}
.favicon-bar-addressbar{left:66%;}
.maddos-single-left{padding-bottom:20px;margin-bottom:0px;}
.title-single-left{text-align:center;float:unset;}
.title-single-right{text-align:center;}
.new-cta-button, .sat-row-sites, .cta-widget{display:none;}
.youtube-video iframe{height:220px;}
.embed-container{height:220px;}
.youtube-video img{width:auto;height:220px;}
}

@media(max-width:480px){
.related-tools-container{width:100%;}
}