.view-wrap {padding: 8px 0}
.view-wrap span{display:inline-block;vertical-align:middle}
.view-type{background:#F5F7FA;width:126px;height:36px;text-align:center;line-height:2.5;margin-left:20px;cursor:pointer;letter-spacing:1px}
.view-type:hover{background:#D9E8FF}
.view-type.active{background:#0B1D96;color:#fff}
.view-type-icon{background:url(/images/webgility-new-design/vector-icon/icon-sprite.svg) no-repeat;background-position:0 -40px;width:22px;height:20px;margin-right:5px;position:relative;top:-1px}
.grid-view.active .view-type-icon{background-position:0 0}
.list-view .view-type-icon{background-position:-37px -40px}
.list-view.active .view-type-icon{background-position:-37px 0}
.filter-wrap{position:relative}
.filter-wrap button{background:#F5F7FA;color:#1F2933;border:0;width:217px;height:52px;text-transform:uppercase;font-size:14px;font-family:"Open Sans Bold"!important;letter-spacing:.5px;outline:none;cursor:pointer;display: inline-block;vertical-align: middle}
.filter-wrap button i {transform: rotate(90deg);-webkit-transform: rotate(90deg);display: inline-block;position: relative;top: 1px;left: 6px;}
.filter-wrap button i:before {font-size: 9px;font-weight: bold;}
.filter-wrap.active button i {transform: rotate(-90deg);-webkit-transform: rotate(-90deg);left: 2px;top: 0;}
.filter-wrap button:not(.disabled):hover{background:#D9E8FF}
.filter-wrap.active button,.filter-has-value button{color:#fff;background:#0B1D96!important}
.filter-options-list-wrap{background:#fff;padding:46px 46px 25px;position:absolute;left:0;top:100%;width:450px;box-shadow:0 5px 15px rgba(2,7,46,0.2);-webkit-box-shadow:0 5px 15px rgba(2,7,46,0.2);z-index:3;display:none}
.filter-title{color:#7B8794;font-family:"Open Sans Bold"!important;text-transform:uppercase;letter-spacing:.5px}
.filter-options-list-wrap ul{margin:15px 0;padding: 0;list-style-type:none}
.filter-options-list-wrap ul li{font-size:16px;color:#1F2933;cursor:pointer;position:relative;padding: 7px 0}
.filter-options-list-wrap ul li .intgrations-tooltip{position:relative;right:0;top:3px;left:20px}
.filter-options-list-wrap ul li:hover{color:#0b1d96;font-family:'Open Sans Semibold'}
.filter-options-list-wrap ul li.active{color:#0b1d96;font-family:"Open Sans Bold"}
.filter-wrap.active .filter-options-list-wrap{display:block}
.clear-filter-action{cursor:pointer;vertical-align: middle}
.none-found-item{font-size:20px;padding:40px 0 0}
.integrations-parent-wrap a{outline: none;text-decoration:none}
.int-card{position: relative;display: block;box-shadow:0 1px 3px rgba(2,7,46,0.20);-webkit-box-shadow:0 1px 3px rgba(2,7,46,0.20);background:#fff;margin:15px 0;transition:all ease .3s;-webkit-transition:all ease .3s}
.int-card:hover{box-shadow:0 5px 15px rgba(2,7,46,0.20);-webkit-box-shadow:0 3px 10px rgba(2,7,46,0.20)}
.int-logo{height:90px;padding:10px}
.int-title{background:#f5f7fa;font-size:16px;color:#1f2933;font-family:"Open Sans Bold"!important;padding:11px 10px}
.intgrations-tooltip{background: url(/images/webgility-new-design/vector-icon/ic-information.svg);background-repeat: no-repeat;width: 16px;height: 16px;position:absolute;bottom: 12px;right:12px}
.tooltip-inner {font-size:16px;text-align: left;background-color: #1F2933;border: solid 1px #1F2933;box-shadow: 3px 3px 15px rgba(0,0,0,0.1);max-width: 320px;min-width: 250px;padding: 5px 15px;border-radius: 0;}
.tooltip-head{color:#7B8794;display:block;text-transform:uppercase;font-family:"Open Sans Bold"!important;font-size:14px;margin-bottom:5px;margin-top:5px}
.tooltip .tooltip-arrow {display: inline-block}
.tooltip-inner ul {padding: 0;margin: 0;list-style-type: none}
.tooltip-inner ul li {line-height: 1.5;font-size: 16px;margin-bottom: 10px}
.integrations-card:last-child{float:left!important}
.list-card{box-shadow:0 1px 3px rgba(2,7,46,0.20);-webkit-box-shadow:0 1px 3px rgba(2,7,46,0.20);background:#fff;margin-bottom:30px;transition:all ease .3s;-webkit-transition:all ease .3s}
.list-title{color:#fff;background:#1F2933;padding:15px;text-align:center;font-size:20px}
.int-list{list-style-type:none;padding:24px 24px 12px;margin:0}
.int-list li{color:#7B8794;font-size:16px;line-height:22px;margin-bottom:12px}
.int-list li a{color:#7B8794}
.int-list li a.has-link:hover {color: #F35627;}
.int-logo img{max-width: 100%;max-height:60px}
.search-wrapper{max-width:469px;position:relative;z-index:2;margin: 24px auto 0}
.integrations-search-icon{position:absolute;left:0;top:0;height:50px;width:70px;border-radius:2px 0 0 2px;line-height:50px;text-align:center}
input.search-sales{width:100%;padding:0 15px 0 70px;height:50px;border-radius:0;border:1px solid #7B8794;outline:none;color:#7B8794;font-family:OpenSans,Helvetica,Arial,"Lucida Grande",sans-serif}
::-ms-clear{display:none}
.duplicate-list{background:#fff;max-height:230px;overflow-x:hidden;border-radius:0 0 2px 2px;padding:10px 0;position:absolute;left:0;top:100%;width:100%;box-shadow:0 5px 15px rgba(2,7,46,0.2);-webkit-box-shadow:0 5px 15px rgba(2,7,46,0.2)}
.duplicate-list li:focus{background:#e9e9e9;outline:none}
.duplicate-list li{position:relative;padding-top: 8px;padding-bottom: 8px;font-size: 18px;}
.duplicate-list li:hover{background:#f5f7fa}
.search-logo-wrap{height:auto;max-width:40px;width:100%;position:absolute;left:14px;top:7px;padding:0;text-align:center}
.search-logo-wrap img{max-height:24px;max-width: 100%}
.search-name{color:#7B8794}
.clear-search{position:absolute;right:17px;top:15px;cursor:pointer}
.clear-search i:before{font-size:15px}
.duplicate-list li.ripple-surface:not(.hide) {display: block}

@media (min-width: 1400px){
.int-logo {height: 140px}
}
@media only screen and (min-width:768px) and (max-width:1200px) {
.integrations-card{width:33.33%!important}
}
@media only screen and (max-width:992px) {
.filter-wrap button{margin-right:10px}
}
@media only screen and (min-width:768px) and (max-width:992px) {
.int-title{min-height:60px;padding:8px 30px}
.intgrations-tooltip{bottom:21px}
}
@media only screen and (max-width:767px) {
.hero-integrations h1{margin-top:10px!important}
.filter-wrap{margin-bottom:20px}
.integrations-action-wrap .text-right{text-align:left}
.integrations-card{max-width:350px;margin:auto}
.display-flex{display:flex}
}
@media only screen and (max-width:500px) {
.filter-options-list-wrap{width:384px;padding:26px 26px 25px}
.filter-options-list-wrap ul li{line-height:normal}
.int-title {padding: 11px 30px}
}
@media only screen and (max-width:450px) {
.filter-options-list-wrap{width:100%}
.view-type{margin-left:5px}
.clear-filter-span{margin:15px 0}
}
@media only screen and (max-width:380px) {
.view-type{width:96px}
}