.Product_title{
	text-decoration:underline;
}

/* Clear btn - Start */

.search-bar {
  position: relative;
}

.search-text{
	border: none;
	outline: none;
	background: transparent;
	color: #707070;
	font: normal normal normal 16px / 18px Open Sans;
}

.processor-title{
	display:flex;
	align-items:center;
}

.search-bar input {
	color: #323232;
}


button#clear-btn, button#clear-btn-cp, button#clear-btn-portal {
    border-radius: 24px;
    background: #dbe2fb;
    font-size: 22px;
    font-weight: bold;
    color: #011ca3;
	padding-bottom: 4px;
}

#clear-btn, #clear-btn-portal, #clear-btn-cp{
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f0f0f0; /* your preferred color */
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  color: #191919;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
/*   padding-bottom: 4px; */
}

.clear_button{
	display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f0f0f0; /* updated background */
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #191919;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    padding: 0;
}


/* Clear btn - End */






/* Portal - start */

.portal-comparison-container {

  margin: 20px auto;
  font-family: sans-serif;
}

#portalSearchInput {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 15px;
}

.portal-section {
  margin-bottom: 15px;
}

.portal-section-header {
  width: 100%;
  background: #011CA3;
  color: #fff;
  padding: 12px;
  text-align: left;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

.portal-section-body {
  display: block;
  background: #f7f9fc;
  border-left: 2px solid #011CA3;
  border-right: 2px solid #011CA3;
  border-bottom: 2px solid #011CA3;
}


.main-header-title, .main-header-title-portal {
    font: normal normal bold 24px/30px Open Sans;
    color: #011CA3;
}


.portal-comparison-row {
    display: grid;
    grid-template-columns: 35% 65%;
    border-bottom: 1px solid #eee;
	background-color:#ffffff;
}

.portal-comparison-row-header {
    display: grid;
    grid-template-columns: 35% 65%;
    border-bottom: 1px solid #eee;
	background-color:#ffffff;
	padding: 24px 24px;
}

.portal-comparison-row.header {
    background-color: #f9f9f9;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.portal-comparison-row > div {
	padding: 0.92rem 0.92rem;
}

.label {
  font-weight: 600;
  color: #000;
}

.desc {
  color: #555;
}

.main-header {
	display: flex;
	justify-content:space-between;
	align-items: center;
	flex-wrap: wrap;
	background-color: #f6faff;
	padding: 12px 25px 12px 8px;
	border-radius: 16px;
}

/* Portal - End */


@media print {
  .top-header, .search-bar, select, button {
    display: none !important;
  }

  .accordion-content {
    display: table-row !important;
  }

  .sticky, [style*="position: sticky"] {
    position: static !important;
  }   

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }	
	
	
}	
	



        /* Top Section: Search and Export */ 

        .header { 
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px; 
        } 

		button.export-btn {
			padding: 12px 24px;
			background-color: #011CA3;
			color: white;
			border: none;
			border-radius: 8px;
		}

		.search-bar {
			flex: auto;
			display: flex;
			align-items: center;
			border: 2px solid #D7DAEE;
			border-radius: 5px;
			padding: 8px;
			background-color: #ffffff;
			margin-right: 32px;
    		margin-left: 8px;
		}
  

        /* Processor Section */ 

        .processor-section { 
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        } 

        .processor-section label { 
           font-weight: bold;
            font-size: 14px;
            flex: 1 100%;
        }

        .processor-section select { 
            flex: 1;
            min-width: 150px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 14px;
            cursor: pointer;
        } 

  

        /* Responsive Design */ 

        @media (max-width: 768px) {
            .header {
                flex-direction: column; 
                align-items: stretch; 
            }
 
            .processor-section {
                flex-direction: column; 
                align-items: stretch; 
            }

            .processor-section select {
                width: 100%;
            }
			
			
        }





/* CP - Start */


.feature-search-field{
	visibility: hidden;
}


.status-column:last-child {
  border: none !important;
}

.feature-comparison-row {
    display: grid;
    grid-template-columns: 20% 40% 20% 20%;
    border-bottom: 1px solid #eee;
	background-color:#ffffff;
}

.feature-comparison-row-header {
    display: grid;
    grid-template-columns: 20% 40% 20% 20%;
    border-bottom: 1px solid #eee;
	background-color:#ffffff;
	padding: 24px 24px;
}

.feature-comparison-row.header {
    background-color: #f9f9f9;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.feature-comparison-row > div {
	padding: 0.92rem 0.92rem;
}

.feature-column, .operation-column, .status-column {
  	border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

.portal-feature-column {
    border-right: 1px solid #ECECEC;
}

.feature-column {
    font-weight: bold;
}

.status-column {
    justify-content: center;
}

/* Category Styles */
.feature-category {
    margin-bottom: 0;
/* 	position: sticky; */
    top: 215px;
    z-index: 18;
    background-color: white;
}

.feature-category-header, .feature-category-header-portal {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    padding: 1rem 1rem;
    background-color: #f0f8ff;
    cursor: pointer;
    font-weight: 600;
    align-items: center;
    position: sticky;
    top: 226px;
    z-index: 24;
}

.feature-category-header:hover, .feature-category-header-portal:hover {
    background-color: #e6f2ff;
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-name {
    font-size: 16px;
}

.category-toggle {
	background-image: url("/wp-content/plugins/payment-processor-comparison/images/payment-processor-uparrow.svg");	
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.feature-category-header.collapsed .category-toggle, .feature-category-header-portal.collapsed .category-toggle  {
    transform: rotate(-180deg);
}

.feature-items {
    max-height: fit-content;
    overflow: hidden;
    transition: max-height 0.5s ease;
/* 	font: normal normal 18px / 56px Open Sans; */
}

.feature-category-header.collapsed + .feature-items, .feature-category-header-portal.collapsed + .feature-items  {
    max-height: 0;
}

/* Status Icons */
.status-icon {
    font-size: 18px;
    font-weight: bold;
     width: 16.65%;	
}

.status-icon.checkmark {
    color: #22c55e;
}

.status-icon.x-mark {
    color: #ef4444;
}

/* Zebra Striping for Rows */
.feature-items .feature-comparison-row:nth-child(even) {
    background-color: #f9f9f9;
}

.feature-items .portal-comparison-row:nth-child(even) {
    background-color: #f9f9f9;
}


/* CP - End */

/* Processor - Start */

		.main-top-header {
			background-color: #f6faff;
			border-radius: 16px;
		}


		.table>:not(caption)>*>* { 
            padding: 1.32rem 1.32rem;
        }


        select { 
            padding: 8px 8px 8px 8px; 
            background: #FFFFFF 0% 0% no-repeat padding-box; 
            border: 2px solid #D7DAEE; 
            border-radius: 8px; 
            opacity: 1; 
        } 

 
        img, 
        svg { 
            width: auto; 
            vertical-align: bottom; 
        } 


        td.terminal,
        td.features,
        td.card-type,
        td.gift-card-type, td.transaction {
			text-align: left;
			display: table-cell;
			align-items: center;
			gap: 16px;
			position: sticky;
			border-radius: 8px;
			top: 308px;
			background-color: #EEFBFF !important;
			z-index: 32;
			padding: 1rem 1rem;
        } 

         

        img#img1,
        img#img2,
        img#img3,
        img#img4 {
            width: -webkit-fill-available;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 2px solid #D7DAEE;
            border-radius: 12px;
            opacity: 1;
			padding: 1px 50px;
        }

  

        img.terminal-icon,
        img.features-icon,
        img.card-type-icon,
        img.gift-card-type-icon, img.transaction-icon{
            width: auto;
            margin-right: 24px;
        } 

         

        td.img_box1,
        td.img_box2,
        td.img_box3,
        td.img_box4 {
            border:none;
        } 

        span.terminal-text {
            font: normal normal bold 24px / 30px Open Sans;
        }

        span.features-text, span.card-type-text, 
        span.gift-card-text, span.transaction-text {
            font: normal normal bold 24px / 30px Open Sans;
        } 

		span.transaction-text {
            font: normal normal bold 24px / 30px Open Sans;
			margin-left: 24px;
        } 
    

        .img_sec{
            margin-top: -30px;
            margin-bottom: -15px;
        }

        th.sp1.sp_box.mob_ss {
            border: 1px solid #f6faff;
        }
    
    
        th.sp1 {
            width: 24%;
            border: 1px solid #f30d0d00;
            font-size: 24px;
            font-weight: bold;
        }

        th.sp2 {
            width: auto;
            border: 1px solid #f6faff;
        }     

        .legend {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 24px 12px 24px;
			margin: 0px 0 0px 0;
			position: sticky;
			bottom: 0%;
			z-index: 48;
			gap:96px;
			background-color: #EEFFF7;
			border: 1px solid #6DE3B2;
			box-shadow: 4px 4px 12px #0000003D;
			border-radius: 8px;
			width: fit-content;
    		margin: auto;
        } 

        .legend div {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #191919;
        }

        span.green {
            background-color: #06B96D;
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
        }
         
        span.blue {
            background-color: #0B1CA3;
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
        }

        span.grey {
            background-color: #BFBFBF;
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
        }
         
        span.red {
            background-color: #DC4A4A;
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
        }
    
        span.yellow {
            background-color: #EFCC0D;
            width: 13px;
            height: 13px;
            display: inline-block;
            border-radius: 50%;
        }
  
        .icon-green {
            background-image: url('<?php echo esc_url( $valor_url . '/wp-content/plugins/payment-processor-comparison/images/Available-to-Use.png' ); ?>');
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .icon-grey {
            background-image: url('<?php echo esc_url( $valor_url . '/wp-content/plugins/payment-processor-comparison/images/Not-Certified-Yet.png' ); ?>');
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }  

        .icon-red {
            background-image: url('<?php echo esc_url( $valor_url . '/wp-content/plugins/payment-processor-comparison/images/Not-Available.png' ); ?>');
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }  

        .icon-blue {
            background-image: url('<?php echo esc_url( $valor_url . '/wp-content/plugins/payment-processor-comparison/images/Under-processing.png' ); ?>');
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
         

        .icon-blue {
			background-image: url('<?php echo esc_url( $valor_url . '/wp-content/plugins/payment-processor-comparison/images/Under-processing.png' ); ?>');			
            display: inline-block;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
         
        tbody>tr>td>.icon {
            width: 18%;
            height: auto;
            padding: 0px;
            margin: 0 auto;
            display: block;
        }

        .search-filter-container { 
            display: flex;
            flex-direction: column;
            gap: 10px;
            background-color: #FFFFFF;
			/*padding: 20px; */
            border-radius: 8px;
			/* max-width: 1280px;
            margin: 15px auto;  */
        } 
        

/*         .search-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #BFBFBF;
            padding: 5px 0;
            background-color: #F6FAFF;
            margin-left: 8px;
            margin-right: 20px;
        } */


        .search-bar input {
            border: none;
            outline: none;
            font-size: 16px;
            flex: 1;
            background-color: transparent;
        } 

        .search-bar input::placeholder {
            color: #aaa;
        }

        th.valor-device {
            text-align: left;
            width: 24%;
            cursor: pointer;
            font: normal normal bold 16px / 18px Open Sans;
			padding: 0 0 0 24px;
        } 

  
        th.valor-device1 {
            font: normal normal bold 16px / 18px Open Sans
        }
  

        span.child_title{
           font: normal normal normal 14px/21px Open Sans;
        }
         

        label.valor-device {
            text-align: center;
            width: 23%;
        } 

         
        table#terminal-table {
            border: 2px solid #ffffff;
        }

        .device-image { 
            width: auto; 
/*             height: 150px; */
        }

        .VL100Pro_img,
        .VL110_img,
        .VL300_img,
        .VL500_img,
        .VL550_img,
        .VP100_img,
        .VP300_img,
        .VP500_img,
        .VP550_img,
        .VP550E_img,
		.RCKT_img,
        .VP800_img {
            position: relative;
            display: inline-block;
        } 

         

        .VL100Pro_img .VL100Pro_imgtext,
        .VL110_img .VL110_imgtext,
        .VL300_img .VL300_imgtext,
        .VL500_img .VL500_imgtext,
        .VL550_img .VL550_imgtext,
        .VP100_img .VP100_imgtext,
        .VP300_img .VP300_imgtext,
        .VP500_img .VP500_imgtext,
        .VP550_img .VP550_imgtext,
        .VP550E_img .VP550E_imgtext,
		.RCKT_img .RCKT_imgtext,
        .VP800_img .VP800_imgtext{
            visibility: hidden;
            width: 200px;
			height: 200px;
            background-color: #ffffff;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
           	position: absolute;
            z-index: 40;
            top: -78px;
            left: 141px;
			border: 2px solid #D7DAEE;			
        }
         

        .VL100Pro_img .VL100Pro_imgtext::after,
        .VL110_img .VL110_imgtext::after,
        .VL300_img .VL300_imgtext::after,
        .VL500_img .VL500_imgtext::after,
        .VL550_img .VL550_imgtext::after,
        .VP100_img .VP100_imgtext::after,
        .VP300_img .VP300_imgtext::after,
        .VP500_img .VP500_imgtext::after,
        .VP550_img .VP550_imgtext::after,
        .VP550E_img .VP550E_imgtext::after,
		.RCKT_img .RCKT_imgtext::after,
        .VP800_img .VP800_imgtext::after {
		    content: "";
			position: absolute;
			top: 30%;
			right: 92%;
			width: 48px;
			height: 70px;
			background-image: url("/wp-content/plugins/payment-processor-comparison/images/Carat.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			transform: rotate(270deg);
        }

        .VL100Pro_img:hover .VL100Pro_imgtext,
        .VL110_img:hover .VL110_imgtext,
        .VL300_img:hover .VL300_imgtext,
        .VL500_img:hover .VL500_imgtext,
        .VL550_img:hover .VL550_imgtext,
        .VP100_img:hover .VP100_imgtext,
        .VP300_img:hover .VP300_imgtext,
        .VP500_img:hover .VP500_imgtext,
        .VP550_img:hover .VP550_imgtext,
        .VP550E_img:hover .VP550E_imgtext,
		.RCKT_img:hover .RCKT_imgtext,
        .VP800_img:hover .VP800_imgtext {
            visibility: visible;
        }

        table td, table th {
            padding: 15px;
            line-height: 1.5;
            vertical-align: middle;
            border: 1px solid hsl(0deg 0% 93.85% / 50.2%);
        }  

        .header {
            background-color: #f7faff;
            border-radius: 16px 16px 0 0;
        }

        tr:hover {
            background: none;
        }

        td:hover {
            background: none;
        }

        .tr:hover {
            background: none;
        }

        .td:hover {
            background: none;
        }

        .top-header{
            position:sticky;
            top:72px;
            z-index:40;
        }

        .img_icon_sticky{
            position: sticky;
            top: 232px;
            z-index: 20;
            background-color: #ffffff;
        }

        th.valor-device, th.valor-device1 { 
            background-color: transparent !important; 
        }
         

        @media only screen and (max-width: 600px) {
			
		.search-text{
			font: normal normal normal 14px / 18px Open Sans;
		}			
			
		.feature-comparison-row-header {
			display: grid;
			grid-template-columns: 30% 37% 18% 15% !important;
			padding: 12px 8px 12px 8px !important;
		}

		.feature-comparison-row {
			display: grid;
			grid-template-columns: 30% 40% 15% 15% !important;
		}
			
		span.transaction-text {
            font: normal normal bold 18px / 27px Open Sans;
			margin-left: 24px;
        }
			
		.feature-items {
			font: normal normal 12px / 27px Open Sans !important;
		}			
		
			.main-top-header {
				padding: 1px 0px 0px 1px;
/*  			margin-bottom: 24px; */
			}			

            .sp34_mobile, 
            .legend {
                display: none;
            } 

            .legend {
                padding: 24px;
                gap: 16px;
                flex-direction: column;
            } 

            th.sp1,
            th.sp2 {
                font-size: 14px;
            } 

			th.sp1{
				width:41%;
			}
            img#img1  {
/* 				margin-top: 12px;
				margin-left: 50px; */
            }
			
             img#img2 {
/* 				margin-top: 12px;
				margin-left: 50px;				  */
/* 				width: 96px;
        		margin-left: 10px; */
            }
			img#img1, img#img2, img#img3, img#img4 {
				padding:0;
			}             
			
            td.terminal, td.features, td.card-type, td.gift-card-type { 
                top: 270px;
            }
			
			.feature-category-header-portal {
				top: 222px;
				padding: 12px 12px 12px 12px;	
			}			

			.feature-category-header{
				top: 218px;
			}
			
            .img_icon_sticky { 
                top: 207px;
            }       

            th.valor-device { 
                font-size: revert;
            }  

            th.valor-device1 { 
                font-size: revert;
			}

            span.child_title { 
                font-size: smaller;
            }

            .table>:not(caption)>*>* { 
                padding: 0.44rem 0.44rem;
            } 

            .search-filter-container { 
                padding: 0px;
            } 

            .mob_filter { 
                 margin: -13px 0px 3px 0px;
            }

            .search-bar input { 
                font-size: 12px;
            } 

            img.icon { 
                width: 24% !important;
            } 

            select { 
                padding: 8px 4px 8px 4px; 
                font-size: xx-small;
            }

            img.features-icon{ 
                width: 36px;
            }

            .mob_ss{
                display: flex;
                margin-left: 14px;
                margin-right: -12px;
            } 

            #no-result-p{
            	margin:none;
            }
			
			.main-header{
				padding:12px 12px 29px 12px;
				display: flex;
    			justify-content: center;				
			}

			.search-bar{
				margin:0px;
				margin-bottom: -16px;
			}

			.main-title{
				font: normal normal bold 16px/24px Open Sans;
				color:#011CA3;
				border: none;
			}
			
			.main-header-title{
				font: normal normal bold 10px/14px Open Sans;
			}
			
						
			.main-header-title-portal{
				font: normal normal bold 16px/24px Open Sans;
				color: #011CA3;
			}
			
			.status-icon {
				 width: 80%;
			}
			
			/* 		Hide the CP & CNP Tab	 */
			button#e-n-tab-title-956086192 {
				display: none;
			}
			
			
			/* 		Hide the EXPORT Button	 */
			button.export-btn {
				display: none;
			}

			.feature-column, .operation-column, .status-column {
				font-size: 12px;
			}
			
        span.terminal-text {
            font: normal normal bold 18px / 27px Open Sans;
        }

        span.features-text, span.card-type-text, 
        span.gift-card-text, span.transaction-text {
            font: normal normal bold 18px / 27px Open Sans;
        }			
			
		.page-id-13834 .e-n-tabs-heading {
			padding: 12px;
		}
			
		button#clear-btn, button#clear-btn-cp, button#clear-btn-portal {
			padding-bottom: 0px;
		}			
				
        }

         

        @media (min-width: 768px) and (max-width: 842px) { 
			
			
			
			img#img1, img#img2, img#img3, img#img4 {
				padding:1px 12px;
			}  

            select { 
                font-size: unset; 
            } 

            .img_sec {
/*              margin-top: -24px; */
                border: 1px #ffffff solid;
				margin-top: -20px;
    			margin-bottom: -8px;
            }    

            th.valor-device {
                font-size: 14px !important;
            } 

            .legend div { 
                gap: 8px; 
                font-size: 10px; 
            } 

            .legend { 
				padding: 14px 24px 15px 24px;
				gap: 32px;
				top: 276px;
                /* margin-top: -8px; */
            } 

            th.sp1 { 
                font-size: small;
            }

            th.sp2 {
                padding: 8px; 
            } 

            td.terminal, td.features, td.card-type, td.gift-card-type { 
                top: 296px;
            }
  
			.img_icon_sticky {
				top: 214px;
				padding: 46px 24px 24px 24px;
			}

            th.valor-device { 
                width: 23%;
            } 

            td.img_box1,
            td.img_box2,
            td.img_box3,
            td.img_box4 {
                padding: 12px 0px 14px 10px;
            }
            
            img.icon {
                width: 32% !important;
            } 


            span.green, span.blue, span.grey, span.red, span.yellow{ 
                width: 12px;
                height: 12px;
            }
			
			.main-title{
				font: normal normal bold 16px/24px Open Sans;
				color:#011CA3;
				border: none;
			}			
            
			.main-header-title{
				font: normal normal bold 15px/24px Open Sans;
			}
			
			
			.feature-category-header {
            	top: 220px;
			}

            .feature-category-header-portal {
                top: 228px;
            }
			
			.status-icon{
				width: 32%;
			}
			
			button#clear-btn, button#clear-btn-cp, button#clear-btn-portal {
				padding-bottom: 0px;
			}			
			
			
			
			
        }