/* [ PAGE ] */
/* [  padding on sides - delete for fullscreen  ] */
@media (min-width: 868px) {
  body {
    padding-left: 2%;
    padding-right: 2%;
  }
}

body {
  font-family: "Comic Sans", cursive;
  color: #db3382;
  font-weight: 900;
}

a.badge:hover,
.dropdown-item .badge:hover,
.btn:hover,
.navbar-toggler:hover {
  animation-name: hopper;
  animation-duration: 1s;
}

.characters-tag-content.btn,
a.characters-tag-control.btn {
  animation: none
}

@keyframes hopper {
  0% {
    transform: scale(1, 1) translateY(0);
  }

  10% {
    transform: scale(1.07, .9) translateY(0)
  }

  30% {
    transform: scale(.9, 1.1) translateY(-.19em);
  }

  50% {
    transform: scale(1.05, .95) translateY(0);
  }

  57% {
    transform: scale(1, 1) translateY(-.05em);
  }

  74% {
    transform: scale(1, 1) translateY(.0);
  }

  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.img-thumbnail:hover {
  animation-name: Bob;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes Bob {

  0%,
  100% {
    transform: translateY(0);
  }

  10%,
  30%,
  50%,
  70% {
    transform: translateY(-8px);
  }

  20%,
  40%,
  60% {
    transform: translateY(0px);
  }

  80% {
    transform: translateY(0px);
  }

  90% {
    transform: translateY(-6.4px);
  }
}

.bg-primary,
.badge-primary,
.btn-primary,
.side-nav li.header,
.page-item.active .page-link,
.card-primary,
.btn-outline-primary.hover,
.btn-outline-primary.active,
.nav-pills .nav-link.active,
.custom-control-input.checked~.custom-control-indicator {
  background-color: #ff75b6;
  border-color: #de5b99;
  background-image: url('https://dl.glitter-graphics.com/pub/2856/2856418tig64ck9y3.gif');
  background-blend-mode: luminosity;
  border-top: 1px solid #c03d7b;
}

a,
.page-link,
.btn-outline-primary,
.btn-link {
  color: #dd699b;
}

.text-primary {
  color: #ff75b6 !important;
}

.bg-primary,
.progress.tooltipster .progress-bar {
  background-color: #f37ab1 !important;
}

.dropdown-item:active {
  background-color: #ff75b6;
}

.card-outline-primary,
.btn-outline-primary {
  border-color: #e35095 !important;
}

.bg-primary:active,
.badge-primary:active,
.btn-primary:active,
a.badge-primary:active,
a.badge-primary:focus,
.btn-primary.active,
.btn-outline-primary:active {
  background-color: #da448b;
  border-color: #de4b90;
}

a:active,
.page-link:active,
.btn-link:hover,
.btn-link:active,
.btn-link:focus {
  color: #ee79b0;
}

.header>.btn:focus,
.btn-primary.form-control:focus,
.btn-primary:focus,
.btn-outline-primary:focus {
  box-shadow: 1 2 0 6px #ff75b6;
}

a:focus,
.page-link:focus {
  color: #f9ddea;
}

a.text-primary:focus {
  color: #fae4ee !important;
}

.bg-primary:hover,
.badge-primary:hover,
.btn-primary:hover,
a.badge-primary:hover {
  background-color: #c0457f;
  border-color: #ff75b6;
}

a:hover,
.page-link:hover {
  color: #ff75b6;
}

a.text-primary:hover {
  color: #ff75b6 !important;
}

.side-nav li.subheader,
.custom-control-input:active~.custom-control-indicator {
  background-color: #ef4d97;
}

a.badge-primary:focus {
  box-shadow: 0 0 0 .3rem #eec2d6;
}

.btn-primary.form-control:focus {
  border-color: #ff75b6;
}

.side-nav li.active>a {
  color: #fedfed !important;
}

.side-nav li.active:hover>a,
.side-nav li.active:active>a,
.side-nav li.active>a:focus {
  color: #910b48 !important;
}

.profile-info-section .bg-faded {
  background-color: #ff9fcc;
  color: #bf1764;
}

/*this is the lines for the mobile info line and the tags divider*/
.profile-info-title hr,
.profile-tags-content {
  border-color: #a41858 !important;
}

/*the actual border*/
.profile-info-section .card {
  background-color: #3a0720;
  /*you only need to color this if you over round the box on top of this*/
  border-color: #ff92c3;
}

body {
  background-image: url('https://dl.glitter-graphics.com/pub/2889/2889401nllzaxww2r.png');
  background-position: center top;
  background-size: 300px;
  background-repeat: repeat;
}

/* HEADER    - you dont need to change the color if your adding a img/link. MARGIN-TOP is for height of your header.*/
#header {
  color: #c84d7e !important;
  background-image: url('');
  margin-top: 120px;
  padding-left: 0px;
}

/* MAIN CONTENTS BACKGROUND  - your main background img/color goes here.*/
.row-offcanvas {
  background-color: #b7a6b0;
  background-image: url('https://dl.glitter-graphics.com/pub/2869/2869216am1xzyi2ns.gif');
  background-repeat: contain;
}

.navbar-right .btn:hover,
.gallery-item>.btn:hover,
.profile-tags-content a.badge:hover,
.dropdown-item .badge:hover {
  animation-name: hopper;
  animation-duration: 2s;
}

/*THE ACTUAL BARS*/
.navbar,
.footer {
  background-color: #c861a0;
}

.navbar,
.footer {
  background: #f885b9;
}

.navbar .dropdown-menu .dropdown-divider {
  background-color: #f6b4dd;
  border-top: 2px solid #e9448e;
}

/*LOGO*/
.navbar-inverse .navbar-brand {
  color: #fc95d4;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:active {
  color: #c71b69;
}

/*HEADER BAR LINKS*/
.navbar-inverse .navbar-nav .nav-link {
  color: #ffebf7;
}

.navbar-inverse .navbar-nav .nav-link:hover {
  color: #d2397e;
}

a.nav-link.dropdown-toggle:focus {
  color: #dd1773 !important;
}

/*DROPDOWNS*/
.navbar .dropdown-menu a {
  color: #a4094f !important;
}

.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:active {
  color: #f3ccdd !important;
}

.navbar .dropdown-menu a:hover {
  background-color: #ba1c5f;
}

.navbar .dropdown-menu .dropdown-header {
  color: #b52554;
}

.navbar .dropdown-menu {
  background-color: #ffcbe1;
  background-image: url('https://dl.glitter-graphics.com/pub/2856/2856418tig64ck9y3.gif');
  background-blend-mode: multiply;
  background-opacity: .5;
  border: 1px solid #ef4d97;
}

/*FOOTER TEXT*/
#footer.text-muted {
  color: #c10c5f !important;
}

/*MOBILE BUTTON*/
.navbar-inverse .navbar-toggler {
  border-color: #c10c5f;
}

.sidebar {
  background-color: #db709f;
  background-image: url("https://dl.glitter-graphics.com/pub/3200/3200460if2zttgqu7.jpg");
  background-blend-mode: ;
  /*optional, just if you want an image*/
  background-size:contain ;
}

.sidebar .divider {
  border-color: #f75ba5 !important;
  /*should be same color as the main content section background*/
}

/*hover background color*/
.side-nav li>a:hover,
.side-nav .display-user a:hover,
.side-nav .display-character a:hover {
  background-color: #fd53a451;
}

/*active background color*/
.side-nav li.active>a {
  background-color: #dc1c776d !important;
}

/*the number backgrounds*/
.side-nav li .sidebar-stat {
  background-color: #dc1c7751
}

/*header*/
.sidebar .side-nav li.header {
  background-color: #ee3e91;
  color: #ffe4f3
}

/*subheader*/
.side-nav li.subheader {
  background-color: #f0368e9b;
  /*or you can just make this a hexcode*/
}

/*the default pages buttons with the numbers and end arrow*/
.page-link {
  background-color: #ff75b6 !important;
  /*usually your profiles's background color*/
  border: 1px solid #f139a5 !important;
  /*the border of the entire page box*/
  color: #ffe4f1;
}

/*hovered over default pages buttons*/
.page-link:focus,
.page-link:hover {
  background-color: #f13990 !important;
  color: #fceef5;
}

/*current page thats primary bootstrap colored*/
/*the background and border should be the same color*/
.page-item.active .page-link {
  background-color: #e4267f !important;
  border-color: #f13990 !important;
  color: #feeef8;
  /*usually the default .page-link background color but you can use a different color*/
}

/*the arrow when you are on the first or last page so its not a link button */
.page-item.disabled .page-link {
  color: #ffa4c9;
  /*should be same color as .page-link border*/
}

.nav-mobile-menu {
  background-color: #800038;
  border-color: #2f0011;
}

.nav-mobile-menu-toggle {
  background-color: #c33d72;
  border-color: #7e1343;
  color: #250713;
}

.nav-mobile-menu-toggle:hover,
.nav-mobile-menu-toggle:active {
  background-color: #c33d7e;
  border-color: #c33d74;
  color: #c33d82;
}

.nav-mobile-menu-toggle:focus {
  box-shadow: 0 0 0 2px #c33d7d;
}

.profile-info-section>.card>.card-block,
.dropdown-menu,
.post-actions>.btn {
  border-radius: .25rem !important
}

.navbar .btn {
  margin-top: 3.5px
}

.header {
  box-shadow: inset 0px -3.1px 7px -1px #ff75b6 !important
}

.btn.btn-default {
  background-color: #ff75b6;
  color: #941f56;
  border: none;
}

/* [ Profile warning - make sure the text is visible against the background color ] */
div.alert.alert-danger,
div.alert.alert {
  background: #f267a9;
  border: none;
  color: #fee0f2 !important;
}

.alert-danger hr {
  border: none;
}

div.alert.alert-danger blockquote {
  border: none;
}

.alert-info {
  background: #fbe9f4;
  border: none;
  color: #f473b0 !important;
}

.gallery-thumb .thumb-image>a:hover {
  box-shadow: 0 0 3px;
}

.display-user-avatar {
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.navbar-brand:after {
  content: url("https://i8.glitter-graphics.org/pub/1218/1218588vk3f8rycsu.gif");
  text-indent: -0px;
  display: block;
  line-height: ;
  visibility: visible;
}

.navbar-brand {
  text-indent: -99999px;
  line-height: 0p;
  visibility: ;
}

.display-user img {
  display: block;
  margin: 1px auto !important;
  max-height: 200px;
  max-width: 200px;
}

.display-user {
  text-align: center;
}

#header {
  border-bottom: 0.5rem solid #f84197 !important;
}

#footer {
  border-top: 0.5rem solid #ff75b6 !important;
}

.gallery-row {
  justify-content: center;
}

.gallery-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*=== NEW GALLERY PREVIEW - by mrpuppychow ===*/
.mfp-wrap .mfp-close {
  background: rgba(38, 1, 19, 0.76) !important;
  border-radius: 50px;
  top: 5px;
  right: 5px !important;
}

.mfp-wrap .mfp-arrow {
  background: none !important;
  top: 0 !important;
  bottom: 0 !important;
}

.mfp-content {
  box-shadow: none !important;
  background: none !important;
  z-index: 10000;
  min-width: 0 !important;
}

.mfp-figure,
.mfp-figure>* {
  background: none !important;
}

.mfp-figure * {
  border: 0 !important;
  border-radius: 0;
}

.mfp-bottom-bar {
  background: none !important;
}

.image-characters>.mb-1 {
  display: flex !important;
  align-items: center;
}

.sidebar-li-bulletins i:before {
  content: url(https://64.media.tumblr.com/2775e5edca1aeff6fd72ae1896db7c20/02c72429231a4604-d1/s75x75_c1/aeecf02b9b8529da0136f0b379a01fd564cce493.gifv)
}

.sidebar-li-characters i:before {
  content: url(https://64.media.tumblr.com/9b7829202042235b06078d4d1a838d5f/02c72429231a4604-f5/s75x75_c1/24c9886d65b91857df427808d6325a2c749432cc.gifv)
}

.sidebar-li-links i:before {
  content: url(https://64.media.tumblr.com/5b97643ce188f02a2f50bb215a4a7c4c/02c72429231a4604-31/s75x75_c1/cf5256db811e3aa2fb8d2661b167598bf4180830.gifv)
}

.sidebar-li-worlds i:before {
  content: url(https://64.media.tumblr.com/d75b7c6b3b3e2540f091feb11ff72d6f/02c72429231a4604-47/s75x75_c1/ad942fd053bc2740be14b578da16edf2b362c554.gifv)
}

.sidebar-li-favorites i:before {
  content: url(https://64.media.tumblr.com/17de95aa2fb55fa3af94240ea5c86ba8/02c72429231a4604-00/s75x75_c1/e25be94c978e5299764b52b2ea7834ca060ab322.gifv)
}

.sidebar-li-created i:before {
  content: url(https://64.media.tumblr.com/407eadb014e6775406ae4e04e14af0c2/02c72429231a4604-1a/s75x75_c1/4643215b358a639940d43c62abf05ac2ec2b7526.gifv)
}

.sidebar-li-art i:before {
  content: url(https://64.media.tumblr.com/f062e5ddd82bc9bf08396470ef8d6d0b/102823b385953a10-16/s75x75_c1/1573c2f399944b371c476763940277d2368ef125.gifv)
}

.sidebar-li-literatures i:before {
  content: url(https://64.media.tumblr.com/90b4f5de9f981cd962ecc2847a725668/102823b385953a10-d7/s75x75_c1/17c200ab945f81c66a8c9f3b7583cf63fcc1a34a.gifv)
}

.sidebar-li-comments i:before {
  content: url(https://64.media.tumblr.com/3363435cc0fb9e180c88f8b343b353ed/102823b385953a10-54/s75x75_c1/d2b4b948c8d84630eebe7d70ff33f9b9a7f0481a.gifv)
}

.sidebar-li-stats i:before {
  content: url(https://64.media.tumblr.com/c7971ab4ccd1b478232bfe46138d2e77/102823b385953a10-34/s75x75_c1/18ed0d5110b43da5ef0ae911b70f2401bacff52f.gifv)
}

.sidebar-li-gallery i:before {
  content: url(https://64.media.tumblr.com/63fe540590c2e588929bd45f37f42666/102823b385953a10-09/s75x75_c1/8c69e7a5d51b397eecc1da0fbc95c8f0a290bed6.gifv)
}

.sidebar-li-library i:before {
  content: url(https://64.media.tumblr.com/f5c1211e3ab41bdd2f6b2623be1b3080/10b4d9397b4368b1-e4/s75x75_c1/33f8ad48f59375bd9c8d143422117dd0d7d080ec.gifv)
}

.sidebar-li-ownership i:before {
  content: url(https://64.media.tumblr.com/e61c4a95f7ea26d98a7cf3c30abf9a5a/10b4d9397b4368b1-11/s75x75_c1/2a81316dadff97bb99e939d2cda40353eca8cad1.gifv)
}

.sidebar-li-report i:before {
  content: url(https://64.media.tumblr.com/ee97bc0daf7f4e58ca2b11fb2e700f80/85d0636969c8460e-4d/s75x75_c1/90c8a25954e2e3a7582b0a4e9ecac794e36b28c4.gifv)
}

.sidebar-li-block i:before {
  content: url(https://64.media.tumblr.com/c0fbbf4615bc6cd8dd2590322e7fa965/49bef966ad7197d0-8c/s75x75_c1/7cb116dc2f599928be5c5542c9e2a7e60b9b1329.gifv)
}

*/

/* PROFILE icon */
.navbar .fa-home {
  content: url(https://64.media.tumblr.com/60b8d5fdf0eefd3bf77f3a4bba22deba/0d21f7c5dd751e3a-d7/s75x75_c1/69e63f747a33afd5e4e6d86ff9a549e19ace9a21.gifv);
  width: 43px;
}

/* FORUMS icon */
.navbar .fa-comments {
  content: url(https://64.media.tumblr.com/7a85fb00b232fefb21354a87c20b6ed1/7b7a54e1bc7a9660-31/s250x400/a55f873ceec6d19435a526a7647d989c546f5d11.webp);
  width: 43px;
}

/* BROWSE icon */
.navbar .fa-search {
  content: url(https://64.media.tumblr.com/a978a6b01b7689f37671d274bf68930f/7b7a54e1bc7a9660-d7/s250x400/15c7eb1d6db1d22f753cd8e8c6d84af822480515.webp);
  width: 43px;
}

/* SUBMIT icon */
.navbar .fa-plus {
  content: url(https://64.media.tumblr.com/afc833b02d21e74af14fbb72317208b5/7b7a54e1bc7a9660-3c/s250x400/35187ef04da4fefcf7b2086ed68203f8564d30b9.webp);
  width: 43px;
}

/*
  MAIN NAVBAR ICONS END
*/
/*
 
  Moving onto the Dropdown Icons!
 
 
 
  "BROWSE" SECTION ICONS BEGIN
 
*/
/* HOT icon */
.navbar .fa-fire {
  content: url(https://64.media.tumblr.com/777b8b8165a7badbd1d6c708bcecf0f1/e70b6b99e275a854-8a/s75x75_c1/0f45495ecd092b946fb56e33c38b33708b4c4c62.gifv);
  width: 23px;
}

/* FEED icon */
.navbar .fa-binoculars {
  content: url(https://64.media.tumblr.com/39b5d4262369a86969d709ec397bfa8b/9f84ce79b4a269cd-8e/s75x75_c1/66e07f146186e7341c9e2c90cfebe7951b29617d.gifv);
  width: 23px;
}

/* RECENT icon */
.navbar .fa-clock {
  content: url(https://64.media.tumblr.com/5820e1f95f0e56df45d05b62431fc134/bb091f13c42b2992-69/s75x75_c1/0ccb13c18cd08e66041c9228dce9c67f973990bc.gifv);
  width: 23px;
}

/*LITERATURES icon*/
.navbar .fa-book {
  content: url(https://i9.glitter-graphics.org/pub/747/747109onwazf4azh.gif);
  width: 23px;
}

/* WORLDS icon */
.navbar .fa-globe {
  content: url(https://i7.glitter-graphics.org/pub/536/536397dgj9ef6ron.gif);
  width: 23px;
}

/* "BROWSE" SECTION ICONS END */
/*
 
 
  "SUBMIT" SECTION ICONS BEGIN
 
 
*/
/* CHARACTER icon */
.navbar .fa-user {
  content: url(https://i8.glitter-graphics.org/pub/699/699258ehqnox0kww.gif);
  width: 23px;
}

/* BULLETIN icon */
.navbar .fa-newspaper {
  content: url(https://i6.glitter-graphics.org/pub/727/727566c66t051cb8.gif);
  width: 23px;
}

/* IMAGE + MULTI-IMAGES icon(s) */
.navbar .fa-image {
  content: url(https://i4.glitter-graphics.org/pub/1065/1065454by9ic17z8j.gif);
  width: 23px;
}

.side-nav li.divider {
  height: 60px;
  background-image: url('https://64.media.tumblr.com/bf689d37532c8e72198e6c156becb49d/03513f53e342d52b-75/s250x400/d79255df9c1df3ffc509cc76f9222a4c3e24bebe.gifv');
  background-size: cover;
  border: none !important;
}

.btn-success,
.btn-outline-success {
  background-color: #ffb5d8 !important;
  color: #ff75b6;
  font-weight: 600;
}

.btn,
.btn:hover {
  background-color: #eb4493;
  border: 0;
}

.btn-secondary,
.btn-outline-secondary {
  background-color: #f69ac5 !important;
  color: #fbb6d6;
  font-weight: 600;
}

.progress {
  background-color: #efafcd;
}

::-webkit-scrollbar {
  width: .75em;
}

::-webkit-scrollbar-track {
  background: #ff75b6;
}

::-webkit-scrollbar-thumb {
  background: #f8bfda;
  border: 0
}

.card,
.bg-faded {
  background-color: #ff75b6;
  border: 2px #e53387 solid;
  color: #f9e4ee;
  border-radius: 10px;
}

/* crosshair cursor */
div {
  cursor: pointer;
}

html {
  cursor: move !important
}

html a:hover {
  cursor: grab !important
}