/*!
Theme Name: CodeHap RingTones WP
Theme URI: http://codehap.com/
Author: codehap.com
Author URI: http://codehap.com/
Description: Ringtone Website Wordpress Theme For Ringtone Or Music Wordpress Site
Version: 1.3.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: codehap_tones_wp
Tags: Ringtone, Tones, Ringtone Wordpress, Ringtone Theme, Codehap
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
  --pc: #f64ea3;
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--pc);
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #f2f5fc;
}

.ringtones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px 10px;
}

.details {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 9px;
  align-items: center;
  margin-bottom: 1px;
}

.tags {
  height: 32px;
  overflow: hidden;
}

.type-post .data .title {
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
  font-size: 16px;
}

.type-post .data a {
  text-decoration: none;
}

.type-post .data .info {
  text-decoration: none;
  color: #747474;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-post .button {
  cursor: pointer;
  width: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  margin: 10px 10px 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #f54ea2, #ff7676);
}

.type-post .player {
  position: relative;
  float: none;
  display: inline-block;
  margin: 0;
  height: 58px;
  width: 58px;
  --rotation: 45deg;
}

.type-post .player .icon {
  width: 100%;
  color: #fff;
  margin-top: 12px;
  margin-left: 4px;
  width: 34px;
  height: 34px;
}

.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  height: 14px;
  width: 14px;
  margin-bottom: -2px;
}

.spin {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.share-button,
.download-button {
  height: 30px;
  width: 30px;
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  padding: 5px;
}

.share-button svg {
  width: 100%;
  height: 100%;
  fill: #999;
}

.download-button svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

.share-button {
  background: #fff;
}

.download-button {
  background: #52565e;
}

.download-button2 {
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 30px;
  background: var(--pc);
  padding: 8px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
}

.homeh1,
.page-title {
  text-transform: capitalize;
  color: #f54ea2;
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
  text-align: center;
  text-transform: capitalize;
  font-size: 20px;
  margin: 10px;
}

.home_info,
.tagcloud {
  background: #fff;
  padding: 10px;
  text-align: justify;
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);
  font-size: 14px;
  margin-bottom: 1em;
}

.tagcloud {
  padding: 1em;
}

.widgettitle {
  margin: 0px;
}
.widget_recent_entries ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

.widget_recent_entries ul li {
  background: #fff;
  padding: 10px;
  margin: 5px 0px;
}

.codehap-pagination {
  margin: 10px auto;
  text-align: center;
  background-color: #ffffff;
  padding: 1em;
  border-radius: 10px;
}

.codehap-pagination a,
.codehap-pagination span {
  color: #000;
  display: inline-block;
  text-decoration: none;
  background-color: #ffe0f9;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
  padding: 5px 10px;
  font-weight: 600;
}

.codehap-pagination a:hover,
.codehap-pagination span.current {
  background: linear-gradient(135deg, #f54ea2, #ff7676);
  color: #fff;
}

.codehap-pagination span.current {
  cursor: default;
}

.codehap-pagination-info {
  color: #000;
  display: inline-block;
  text-decoration: none;
  background-color: none;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 5px;
  padding: 0 10px;
  line-height: 32px;
}

.ringtones .type-post {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 15px;
  color: #000;
  border: 1px solid #eee;
}

.ringtones .type-post:hover {
  background-color: #e6e6e6;
}

.CODEHAP_main_content .entry-header {
  max-width: 700px;
  margin: auto;
  padding: 5px 16px 16px 16px;
  color: #fff;
  background: linear-gradient(135deg, #f54ea2, #ff7676);
}

.cat-links a {
  color: #fff;
  text-transform: capitalize;
}

.posted-on .updated {
  display: none;
}

.CODEHAP_main_content .content2,
.CODEHAP_main_content .entry-title {
  text-align: center;
  font-size: 18px;
}

.entry-title {
  text-align: center;
   
}

.CodeHapcontent {
  max-width: 500px;
  margin: 5px auto;
  background: #fff;
  padding: 16px;
}

.CodeHapDmca {
  max-width: 500px;
  margin: 5px auto;
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);
}

.CodeHapINFo {
  max-width: 700px;
  margin: 5px auto;
  background: #fff;
  padding: 16px;
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);
}

.CodeHapDmca span {
  color: var(--pc);
  font-weight: bold;
}

.CodeHaptags {
  max-width: 700px;
  margin: 5px auto;
  background: #fff;
  padding: 16px;
  text-align: center;
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);
}

.CodeHaptags .tags-links a {
  margin: 5px;
  border-radius: 5px;
  padding: 5px 12px;
  display: inline-block;
  color: #000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  background: azure;
}

.CodeHaptags .tags-links a:hover {
  background: #ffedf6;
}

.CodeHapDL {
  max-width: 280px;
  margin: 5px auto;
  padding: 16px 5px;
  text-align: center;
}

.CodeHapDL .btn1 {
  color: #fff;
  background: #f64ea3;
  padding: 10px 16px;
  text-align: center;
  max-width: 100%;
  margin: 5px auto;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-around;
  border-radius: 5px;
  font-weight: 600;
}

.CodeHapDL .btn1:hover {
  color: #000;
  background: #ffffff;
}

.CodeHapDL .btn2 {
  color: #fff;
  background: #fe7676;
  padding: 10px 16px;
  text-align: center;
  max-width: 100%;
  margin: 5px auto;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-around;
  border-radius: 5px;
  font-weight: 600;
}

.CodeHapDL .btn2:hover {
  color: #000;
  background: #ffffff;
}

.content2.button {
  cursor: pointer;
  width: 42px;
  height: 42px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  margin: 10px 10px 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}

.content2 .player {
  border: 5px solid white;
  position: relative;
  float: none;
  display: inline-block;
  margin: 10px;
  height: 100px;
  width: 100px;
  --rotation: 45deg;
}

.content2 .player .icon {
  width: 100%;
  color: #fff;
  margin-top: 19px;
  margin-left: 6px;
  width: 60px;
  height: 60px;
}

.content2.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  height: 60px;
  width: 60px;
  margin-bottom: -2px;
}

.CODEHAP_main_content {
  margin-top: 15px;
}

.CODEHAP_main_content .entry-meta span {
  display: block;
}

.entry-codehap {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CODEHAP_main_content .author {
  font-weight: bolder;
  font-size: 18px;
}

.CODEHAP_main_content .posted-on {
  font-size: 13px;
}

#info-codehap,
#codehapPost {
  display: none;
}

.entry-buttons {
  column-gap: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entry-buttons .info {
  cursor: pointer;
}

.entry-buttons .info svg {
  width: 100%;
  height: 100%;
  fill: #999;
}

.site-header {
  background-color: #fff;
  padding: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.sh {
  max-width: 800px;
  margin: 5px auto;
  padding: 1em;
  background-color: #fff;
}

.site-branding {
  column-gap: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-branding a {
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: var(--pc);
}

.site-branding p {
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: var(--pc);
}

.codehap_sidebar {
  width: 50px;
}

.site-branding {
  width: 250px;
}

.codehap_search .search-form .search-input {
  border: 1px solid var(--pc);
  padding: 4px 8px;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.codehap_search .search-form .search-input input {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  border: 0;
}

.codehap_search .search-form .search-input input:focus {
  outline: 0;
}

.codehap_search .search-form .search-input .icon {
  padding-left: 8px;
  width: 45px;
  height: 30px;
}

.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#search_btn {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
}

#search_btn svg {
  fill: var(--pc);
  width: 25px;
  height: 25px;
  margin: 0px;
  padding: 0px;
}

.sidenav .closebtn {
  padding: 0px 8px;
  color: #000;
  font-size: 40px;
  cursor: pointer;
}

.main-navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  padding: 5px 30px;
  display: block;
  color: #000;
  margin-bottom: 5px;
}

.menu_button_box {
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-navigation a:hover {
  background-color: #fff;
  color: var(--pc);
}

.codehap_sidebar_menu {
  color: var(--pc);
  cursor: pointer;
}

.codehap_sidebar_menu svg {
  fill: var(--pc);
  width: 35px;
  height: 35px;
}

.page-header .page-title {
  margin: 0 0 5px 0;
  padding: 8px;
  text-align: center;
  font-size: 26px;
}

.page-header h1 {
  margin: 0;
  padding: 0;
}

.codehap_page_content {
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);

  max-width: 1100px;
  margin: auto;
  background: #fff;
  padding: 16px;
}

.site-branding-logo {
  padding: 4px;
  width: 150px;
  height: auto;
}

.site-title,
.site-description {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer {
  background-color: #fff;
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  color: #1d1d1d;
}

.site-footer a {
  color: #231f20;
}

.codehap_H2 {
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  border-bottom: 1px solid #dadada;
  height: 40px;
}

.nav_title {
  color: #000;
  font-size: 20px;
  font-weight: bolder;
}

.tagsCodehap {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.tagsCodehap li {
  padding: 5px 9px;
  margin: 2px;
  border-radius: 10px;
  border: 1px dashed var(--pc);
  display: inline-block;
}

.tagsCodehapBox {
  padding: 10px;
  margin-top: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
}

.tagsCodehapBox h2 {
  padding: 0 0 5px 0;
  margin: 0 0 8px 0;
  border-bottom: 1px solid #f3f4f7;
}

.custom-logo {
  width: 100%;
  height: 100%;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
}

@media only screen and (max-width: 600px) {
  .site-branding-text {
    display: none;
  }
}

.codehap_container {
  margin: auto;
  max-width: 1100px;
  padding: 2px 10px;
}

.div-sticky-class {
  width: 250px;
  list-style: none;
  padding: 10px;
}

.div-sticky-class ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  column-gap: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.div-sticky-class ul li {
  display: block;
  padding: 2px 10px;
}

.comments-area {
  margin: 15px 0px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 5px 10px -5px rgb(0 0 0 / 20%);
}

.comments-area .submit {
  margin: 5px 0px;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  background: var(--pc);
  cursor: pointer;
}

.comments-area input,
.comments-area textarea {
  margin: 10px 0px;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
  border: 1px solid var(--pc);
}

.comments-area .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comments-area .comment-form-cookies-consent input {
  flex: 0 0 50px;
}

.comments-area .comment-form-cookies-consent label {
  flex: 1;
}
.comments-area.submit {
  cursor: pointer;
}

.comment-list {
  border: 1px solid #caccd1;
  background: #fefefe;
  border-radius: 10px;
}

.comment-list li {
  padding: 15px;
}

.comments-area ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.comment-meta,
.comment-author {
  column-gap: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-thumbnail img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  margin: 5px 0px;
}

.post-thumbnail {
  max-width: 500px;
  margin: auto;
}

.footer-menu-container ul {
  padding: 0;
  margin: 1em 0;
  list-style: none;

  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-menu-container li a {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px 15px;
}

.footer-menu-container li a:hover {
  background-color: #fceefb;
}
.sidenav {
  overflow-y: auto; /* Enable vertical scrollbar */
  scrollbar-width: thin; /* "auto" is an option as well */
  scrollbar-color: #333333 #f0f0f0; /* thumb and track color */
}

/* Customize scrollbar track */
.sidenav::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

/* Customize scrollbar thumb */
.sidenav::-webkit-scrollbar-thumb {
  background-color: #333333; /* Color of the thumb */
  border-radius: 10px; /* Roundness of the thumb */
}

/* Customize scrollbar track */
.sidenav::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* Color of the track */
}

.tc {
  text-align: center;
}