@font-face {
	font-family: 'Montserrat';
	src: url('/wp-content/themes/haunmovies/assets/font/Montserrat.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

:root {
    --bg-primary: #1c1c1c;
    --bg-secondary: #252525;
    --bg-tertiary: #2d2d2d;
    --bg-card: #252525;
    --bg-item: #1e1e1e;
    --primary-color: #00c6ff;
    --secondary-color: #ff3e6f;
    --accent-gold: #ffb627;
    --accent-teal: #0ac2c2;
    --text-primary: #f5f5f5;
    --text-secondary: #d1d1d1;
    --text-muted: #8a8a8a;
    --border-light: rgba(255, 255, 255, 0.08);
    --glow-primary: rgba(0, 198, 255, 0.25);
    --glow-secondary: rgba(255, 62, 111, 0.25);
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.4);
    --gradient-primary: linear-gradient(135deg, #00c6ff, #0ac2c2);
    --gradient-secondary: linear-gradient(135deg, #ff3e6f, #ff8e53);
    --gradient-header: linear-gradient(135deg, #252525, #1c1c1c);
    --gradient-card: linear-gradient(135deg, #252525, #2a2a2a);
    --gradient-item: linear-gradient(135deg, #1e1e1e, #252525);
    --shimmer-speed: 3s;
    --transition-speed: 0.4s;
    --dark: #1a1a1a;
    --light: #1a1a1a;
    --text: hsla(0,0%,100%,.9);
    --success: #0abf30;
    --error: #e24d4c;
    --warning: #e9bd0c;
    --info: #3498db;
    --random: #eb43ff;
    /* --btn-bg-color: linear-gradient(to right,#fb0,#e43603,#ff6290,#ff5000); */
    --btn-bg-color: linear-gradient(135deg,#3a47d5,#00d2ff);
    --text-color: #3498db;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes borderShimmer {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--glow-primary);
    }
    70% {
        box-shadow: 0 0 0 10px #fff0;
    }
    100% {
        box-shadow: 0 0 0 0 #fff0;
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-100px)
    }

    60% {
        opacity: 1;
        transform: translateY(10px)
    }

    75% {
        transform: translateY(-5px)
    }

    90% {
        transform: translateY(2px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes bounceOutUp {
    20% {
        transform: translateY(5px)
    }

    to {
        opacity: 0;
        transform: translateY(-100px)
    }
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: translate3d(-10px,0,0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

/* Main Color */
.main-navigation .navbar-nav>li>a:hover,
.main-navigation .navbar-nav>li>a:focus,
.section-title span.sortby a.active,
.item-content-toggle .show-more:hover,
.profile-usertitle-name a,
.bottom-nav__link--active,
.download-table a:hover {
    color: var(--text-color);
}

.grid-item .episode {
    background-image: var(--btn-bg-color);
}
/* End of Main Color */

.flex-column {
    flex-direction: column !important;
}

.form-control[readonly] {
    background-color: #ccc;
}

body.halimthemes,
#header,
#footer,
#footer .footer-logo,
#footer .about,
.footer-credit {
	background: #1c1c1c;
}

#footer {
	border-top: unset;
}

#footer .footer-logo {
	border-bottom: 1px solid #333;
}

#footer .textwidget {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#footer .textwidget a {
    padding: 4px;
    background-color: rgb(255 255 255/15%);
    border-radius: 6px;
    color: #fff;
}

#footer #custom_html-2 {
    width: 66%;
}

body *:not(i) {
	font-family: 'Montserrat', sans-serif;
}

#header .action-header {
	display: flex;
	justify-content: end;
	gap: 8px;
}

#header .action-header a {
	background: #2b2b2b;
	border: 1px solid rgb(84 59 59 / 8%) !important;
	padding: 7px 17px;
	color: #ccc;
	font-size: 16px;
	line-height: 1.3;
}

#header .action-header a.active {
	background: var(--btn-bg-color);
}

#header .notice-pc {
	color: #ccc;
}

#header .site-title {
    height: 60px;
}

@media (max-width: 767px) {
	#footer #custom_html-2 {
		width: 100%;
	}
}

/* Login modal */
#custom-login-modal {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s,opacity .3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0/.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center
}

#custom-login-modal.active {
    visibility: visible;
    opacity: 1
}

.custom-login-content {
    background: linear-gradient(135deg,#1c1f2a,#262b3a);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgb(0 0 0/.6);
    width: 400px;
    max-width: 90%;
    text-align: center;
    position: relative
}

.custom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #b8b8d1;
    cursor: pointer;
    background: rgb(255 255 255/.1);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease
}

.custom-close:hover {
    background: rgb(255 255 255/.3);
    color: #ff5c8a
}

.custom-login-title {
    font-size: 26px;
    font-weight: 700;
    color: #f4f4f9;
    margin-bottom: 20px
}

.custom-login-form {
    display: flex;
    flex-direction: column
}

.custom-label {
    font-size: 14px;
    color: #d1d1e9;
    margin-bottom: 5px
}

.custom-input {
    border: 1px solid #44475a;
    background: #282a36;
    color: #f8f8f2;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 15px;
    outline: none;
    transition: all .3s ease
}

.custom-input::placeholder {
    color: #848aa0;
    font-style: italic
}

.custom-input:focus {
    border-color: #8be9fd;
    box-shadow: 0 0 8px rgb(139 233 253/.8)
}

.custom-checkbox-label {
    display: flex;
    align-items: center;
    color: #b8b8d1;
    font-size: 14px;
    margin-bottom: 15px;
    gap: 10px
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #ff77b2
}

.custom-submit {
    background: linear-gradient(90deg,#ff5c8a,#ff77b2);
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease
}

.custom-submit:hover {
    background: linear-gradient(90deg,#ff77b2,#ff5c8a);
    box-shadow: 0 4px 10px rgb(255 92 138/.6)
}

.custom-submit:active {
    transform: scale(.96);
    box-shadow: 0 2px 5px rgb(255 92 138/.5)
}

.custom-message {
    margin-top: 15px;
    font-size: 14px;
    color: #f8f8f2
}

.custom-message.success {
    color: #50fa7b
}

.custom-message.error {
    color: #f55
}

.google-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    background: #2d2d2d;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all .3s ease;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgb(0 0 0/.2);
    backdrop-filter: blur(5px)
}

.google-login-button:hover {
    background: #3a3a3a;
    box-shadow: 0 3px 8px rgb(0 0 0/.3)
}

.google-login-button[disabled] {
    background: #1a1a1a;
    color: #666;
    opacity: .7;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none
}

.google-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    width: 20px;
    height: 20px
}

.google-login-button[disabled] .google-icon svg {
    opacity: .7
}

.g-recaptcha {
    margin: 5px auto
}

.google-login-button span {
    display: flex;
    align-items: center
}
/* End of login modal */

@media (max-width: 767px) {
	#header .action-header {
		justify-content: center;
		margin-top: 16px;
	}

    #main-contents {
        padding: 0 5px !important;
    }
}

.home .main-navigation .navbar-nav>.active>a,
.main-navigation .navbar-nav>li>a {
	text-transform: capitalize;
}

.main-navigation .navbar-nav>li>a i {
	font-size: 14px;
	margin-right: 4px;
}

.halim-search-form .form-control {
	border: 1px solid #333;
}

.navbar-container:has(.main-navigation),
.main-navigation {
	background: #1f2021;
	box-shadow: unset;
}

#wrapper {
	background: #1c1c1c;
    box-shadow: unset;
}

#sidebar {
	display: none;
}

/* Movie item */
.halim_box article.grid-item {
	width: 20%;
	padding: 5px;
}

.halim_box article.grid-item .status {
	display: none;
}

.halim_box article.grid-item .episode {
	bottom: unset;
    right: unset;
    top: 0px;
    left: 0px;
}

.halim_box article.grid-item .icon_overlay {
	display: none;
}

.halim_box article.grid-item .rating-container {
	position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, .8);
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    z-index: 15;
}

.halim_box article.grid-item .rating-container .rating-score {
    color: #fc0;
}

.halim_box article.grid-item .rating-container .rating-star {
    font-size: 14px;
    color: #fc0;
}

.halim_box article.grid-item .rating-container .rating-count {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
}

.ah-frame-bg {
    background: rgba(0, 0, 0, .075);
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 5px;
}
/* End of Movie item */

/* Pagination */
.page-numbers li {
    margin-right: 5px;
}

.page-numbers li a,
.page-numbers li span:not(.dots) {
	background: #333;
	padding: 10px 20px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07), 0px 1px 3px rgba(0, 0, 0, .29);
}

.page-numbers li span.current {
    background: #bf7d18;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cd881e), to(#674614));
    transition: .5s all;
    color: #fff;
}
/* End of Pagination */

@media (min-width: 1200px) {
    #main-contents {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .halim_box article.grid-item {
        width: 25%;
    }
}

@media (max-width: 767px) {
    .halim_box article.grid-item {
        width: 33%;
    }

    .halim_box article.grid-item img {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .halim_box article.grid-item {
        width: 50%;
    }
}

@media (max-width: 450px) {
    .halim_box article.grid-item {
        width: 50%;
    }

    .halim_box article.grid-item img {
        height: 250px;
    }
}

@media (max-width: 380px) {
    .halim_box article.grid-item img {
        height: 200px;
    }
}

/* Carousel Widget 2 */
#halim-carousel-widget-2 {
	margin-bottom: 36px;
}

#halim-carousel-widget-2.owl-carousel .owl-nav {
	display: none;
}

#halim-carousel-widget-2 .grid-item figure {
	position: relative;
    aspect-ratio: 3 / 4;
}

#halim-carousel-widget-2 .grid-item .halim-post-title-box {
	position: unset;
	padding: 0;
    height: 70px;
	display: flex;
	align-items: center;
	background: transparent !important;
    padding-top: 0 !important;
}

#halim-carousel-widget-2 .grid-item .halim-post-title-box {
	position: unset;
	padding: 0;
    height: 70px;
}

#halim-carousel-widget-2 .grid-item .halim-post-title-box .number {
	line-height: 1;
    font-size: 3.5em;
    font-weight: 800;
    font-style: italic;
    background: linear-gradient(39deg, #fecf59, #fff1cc);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fff0;
    margin-right: .5rem;
    flex-shrink: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#halim-carousel-widget-2 .grid-item .halim-post-title-box .halim-post-title {
	position: unset;
}

#halim-carousel-widget-2 .grid-item .halim-post-title h2 {
	font-size: 14px !important;
    line-height: 1;
	font-weight: 700;
}

#halim-carousel-widget-2 .grid-item .halim-post-title .original_title {
	color: #9ca3af;
}

#halim-carousel-widget-2 .grid-item figure .episode {
	right: 10px;
    bottom: 10px;
	background: rgb(0 0 0 / .7);
    padding: 5px 10px;
    border-radius: 20px;
	color: #ffc107;
    font-size: 14px;
    font-weight: 700;
}

#halim-carousel-widget-2 .grid-item .clip-path-odd {
	-webkit-clip-path: polygon(94.239% 100%, 5.761% 100%, 5.761% 100%, 4.826% 99.95%, 3.94% 99.803%, 3.113% 99.569%, 2.358% 99.256%, 1.687% 98.87%, 1.111% 98.421%, .643% 97.915%, .294% 97.362%, .075% 96.768%, 0 96.142%, 0 3.858%, 0 3.858%, .087% 3.185%, .338% 2.552%, .737% 1.968%, 1.269% 1.442%, 1.92% .984%, 2.672% .602%, 3.512% .306%, 4.423% .105%, 5.391% .008%, 6.4% .024%, 94.879% 6.625%, 94.879% 6.625%, 95.731% 6.732%, 96.532% 6.919%, 97.272% 7.178%, 97.942% 7.503%, 98.533% 7.887%, 99.038% 8.323%, 99.445% 8.805%, 99.747% 9.326%, 99.935% 9.88%, 100% 10.459%, 100% 96.142%, 100% 96.142%, 99.925% 96.768%, 99.706% 97.362%, 99.357% 97.915%, 98.889% 98.421%, 98.313% 98.87%, 97.642% 99.256%, 96.887% 99.569%, 96.06% 99.803%, 95.174% 99.95%, 94.239% 100%);
    clip-path: polygon(94.239% 100%, 5.761% 100%, 5.761% 100%, 4.826% 99.95%, 3.94% 99.803%, 3.113% 99.569%, 2.358% 99.256%, 1.687% 98.87%, 1.111% 98.421%, .643% 97.915%, .294% 97.362%, .075% 96.768%, 0 96.142%, 0 3.858%, 0 3.858%, .087% 3.185%, .338% 2.552%, .737% 1.968%, 1.269% 1.442%, 1.92% .984%, 2.672% .602%, 3.512% .306%, 4.423% .105%, 5.391% .008%, 6.4% .024%, 94.879% 6.625%, 94.879% 6.625%, 95.731% 6.732%, 96.532% 6.919%, 97.272% 7.178%, 97.942% 7.503%, 98.533% 7.887%, 99.038% 8.323%, 99.445% 8.805%, 99.747% 9.326%, 99.935% 9.88%, 100% 10.459%, 100% 96.142%, 100% 96.142%, 99.925% 96.768%, 99.706% 97.362%, 99.357% 97.915%, 98.889% 98.421%, 98.313% 98.87%, 97.642% 99.256%, 96.887% 99.569%, 96.06% 99.803%, 95.174% 99.95%, 94.239% 100%);
}

#halim-carousel-widget-2 .grid-item .clip-path-even {
	-webkit-clip-path: polygon(5.761% 100%, 94.239% 100%, 94.239% 100%, 95.174% 99.95%, 96.06% 99.803%, 96.887% 99.569%, 97.642% 99.256%, 98.313% 98.87%, 98.889% 98.421%, 99.357% 97.915%, 99.706% 97.362%, 99.925% 96.768%, 100% 96.142%, 100% 3.858%, 100% 3.858%, 99.913% 3.185%, 99.662% 2.552%, 99.263% 1.968%, 98.731% 1.442%, 98.08% .984%, 97.328% .602%, 96.488% .306%, 95.577% .105%, 94.609% .008%, 93.6% .024%, 5.121% 6.625%, 5.121% 6.625%, 4.269% 6.732%, 3.468% 6.919%, 2.728% 7.178%, 2.058% 7.503%, 1.467% 7.887%, .962% 8.323%, .555% 8.805%, .253% 9.326%, .065% 9.88%, 0 10.459%, 0 96.142%, 0 96.142%, .075% 96.768%, .294% 97.362%, .643% 97.915%, 1.111% 98.421%, 1.687% 98.87%, 2.358% 99.256%, 3.113% 99.569%, 3.94% 99.803%, 4.826% 99.95%, 5.761% 100%);
    clip-path: polygon(5.761% 100%, 94.239% 100%, 94.239% 100%, 95.174% 99.95%, 96.06% 99.803%, 96.887% 99.569%, 97.642% 99.256%, 98.313% 98.87%, 98.889% 98.421%, 99.357% 97.915%, 99.706% 97.362%, 99.925% 96.768%, 100% 96.142%, 100% 3.858%, 100% 3.858%, 99.913% 3.185%, 99.662% 2.552%, 99.263% 1.968%, 98.731% 1.442%, 98.08% .984%, 97.328% .602%, 96.488% .306%, 95.577% .105%, 94.609% .008%, 93.6% .024%, 5.121% 6.625%, 5.121% 6.625%, 4.269% 6.732%, 3.468% 6.919%, 2.728% 7.178%, 2.058% 7.503%, 1.467% 7.887%, .962% 8.323%, .555% 8.805%, .253% 9.326%, .065% 9.88%, 0 10.459%, 0 96.142%, 0 96.142%, .075% 96.768%, .294% 97.362%, .643% 97.915%, 1.111% 98.421%, 1.687% 98.87%, 2.358% 99.256%, 3.113% 99.569%, 3.94% 99.803%, 4.826% 99.95%, 5.761% 100%);
}

#halim-carousel-widget-2 .grid-item .halim-trending-poster-mask {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(0 0% 100% / .05);
    z-index: 1;
    transition: background-color .3s ease;
}

#halim-carousel-widget-2 .grid-item figure:hover .halim-trending-poster-mask {
	background-color: rgb(255 193 7 / .1);
}

#halim-carousel-widget-2 .grid-item figure img {
	height: 100%;
    max-height: 100%;
	object-fit: cover;
}

@media (max-width: 450px) {
	#halim-carousel-widget-2 .grid-item .halim-post-title-box .number {
		width: 45px;
        font-size: 38px;
	}

    #halim-carousel-widget-2 .grid-item .halim-post-title-box .halim-post-title {
        padding-left: 4px;
    }
}
/* End of Carousel Widget 2 */

/* Advanced Widget 2 */
#halim-advanced-widget-2 .showtime {
	display: flex;
	gap: 3px;
}

#halim-advanced-widget-2 .showtime .item {
	padding: 5px 10px;
	background: #333;
	color: #fff;
	border-radius: 4px;
	flex: 1;
}

#halim-advanced-widget-2 .showtime .item.active,
#halim-advanced-widget-2 .showtime .item:hover {
	background: linear-gradient(140deg, rgba(0, 77, 102, .8) 0%, rgba(0, 134, 179, .9) 50%, rgba(0, 191, 255, 1) 100%);
}

#halim-advanced-widget-2 .showtime .item p {
	margin-bottom: 0px;
	line-height: 1.4;
	text-transform: capitalize;
	text-align: center;
}

#halim-advanced-widget-2 .showtime .item p b {
	font-size: 16px;
}

#halim-advanced-widget-2 .mobile {
	display: none;
}

#halim-advanced-widget-2 .mobile .showtime {
	flex-wrap: wrap;
    column-gap: 8px;
}

#halim-advanced-widget-2 .mobile .showtime-tabs {
	width: 100%;
}

#halim-advanced-widget-2 .mobile .showtime-tabs .tabs {
	display: flex;
	gap: 3px;
}

#halim-advanced-widget-2 .mobile .showtime-tabs .tabs a {
	padding: 5px 10px;
	background: #333;
	color: #fff;
	border-radius: 4px;
	flex: 1;
}

#halim-advanced-widget-2 .mobile .showtime-tabs .tabs a.active {
	background: linear-gradient(140deg, rgba(0, 77, 102, .8) 0%, rgba(0, 134, 179, .9) 50%, rgba(0, 191, 255, 1) 100%);
}

#halim-advanced-widget-2 .mobile .showtime .item {
	width: 49%;
    flex: unset;
}

#halim-advanced-widget-2 .halim_box {
	margin-bottom: 0px;
}

@media (max-width: 767px) {
    #halim-advanced-widget-2 .desktop {
        display: none;
    }

    #halim-advanced-widget-2 .mobile {
        display: block;
    }

    #halim-advanced-widget-2 .halim_box .grid-item {
        width: 33%;
    }
}

@media (max-width: 576px) {
    #halim-advanced-widget-2 .halim_box .grid-item {
        width: 50%;
    }
}

@media (max-width: 450px) {
    #halim-advanced-widget-2 .mobile .showtime {
        column-gap: 3px;
    }
}
/* End of Advanced Widget 2 */

/* Notification */
.notifications {
    left: 50%;
    position: fixed;
    top: 10px;
    transform: translateX(-50%);
    width: auto;
    z-index: 999999
}

.notifications.bottom-right {
    bottom: 30px;
    left: auto;
    right: 0;
    top: auto;
    transform: none;
    z-index: 999999
}

.notifications :where(.toast,.column) {
    align-items: center;
    display: flex
}

.notifications .toast {
    animation: bounceInDown .5s cubic-bezier(.215,.61,.355,1) forwards;
    backdrop-filter: blur(15px);
    background: var(--light);
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    font-family: sans-serif;
    justify-content: space-between;
    list-style: none;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 16px 17px;
    position: relative;
    width: 320px
}

.notifications.bottom-right .toast {
    animation: bounceInRight .5s cubic-bezier(.215,.61,.355,1) forwards
}

.notifications .toast.hide {
    animation: bounceOutUp .5s cubic-bezier(.215,.61,.355,1) forwards
}

.notifications.bottom-right .toast.hide {
    animation: bounceOutRight .5s cubic-bezier(.215,.61,.355,1) forwards
}

.toast:before {
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    transition: width .1s linear;
    width: var(--progress-width)
}

.toast.success:before {
    background: var(--success)
}

.toast.error:before {
    background: var(--error)
}

.toast.warning:before {
    background: var(--warning)
}

.toast.info:before {
    background: var(--info)
}

.toast.random:before {
    background: var(--random)
}

.toast .column i {
    font-size: 1.75rem
}

.toast.success .column i {
    color: var(--success)
}

.toast.error .column i {
    color: var(--error)
}

.toast.warning .column i {
    color: var(--warning)
}

.toast.info .column i {
    color: var(--info)
}

.toast.random .column i {
    color: var(--random)
}

.toast .column span {
    font-size: 14px;
    margin-left: 12px
}

.toast i:last-child {
    color: hsla(0,0%,100%,.6);
    cursor: pointer
}

.toast i:last-child:hover {
    color: var(--text)
}

@media screen and (max-width: 530px) {
    .notifications .toast {
        font-size: 1rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

    .notifications:not(.bottom-right) .toast {
        animation: bounceInDown .5s cubic-bezier(.215,.61,.355,1) forwards
    }

    .notifications:not(.bottom-right) .toast.hide {
        animation: bounceOutUp .5s cubic-bezier(.215,.61,.355,1) forwards
    }
}
/* End Of Notification */

/* User info dropdown */
#navdrop a,#navdrop span {
    color: #fff;
    font-weight: 600
}

#navdrop .drop-btn p {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    padding: 0 12px 0 0
}

#navdrop {
    margin: auto;
    position: relative
}

#navdrop .drop-btn {
    border-radius: 5px;
    color: #b0b3b8;
    font-size: 20px;
    font-weight: 500;
    line-height: 55px;
    width: 100%
}

#navdrop .drop-btn span {
    cursor: pointer;
    float: right;
    font-size: 28px;
    line-height: 50px
}

#navdrop .tooltip {
    background: #242526;
    bottom: -22px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
    display: none;
    height: 15px;
    position: absolute;
    right: 28px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 15px
}

#navdrop .tooltip.show {
    display: block
}

#navdrop .profile-info {
    background: #242526;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
    display: none;
    height: auto;
    max-height: 450px;
    overflow: hidden;
    position: absolute;
    right: -50px;
    top: 120%;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    width: 250px;
    z-index: 999999
}

#navdrop .profile-info.show {
    display: block;
    display: flex
}

.profile-info ul {
    list-style: none;
    overflow-y: auto;
    padding: 10px 0;
    scrollbar-color: #888 #242526;
    scrollbar-width: thin;
    transition: all .25s cubic-bezier(.25,.1,.08,.93);
    width: 250px
}

.profile-info ul li {
    border-radius: 10px;
    float: inherit;
    line-height: 48px;
    margin: 0 10px;
    padding-left: 6px!important;
    -webkit-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -moz-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -ms-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -o-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    transition: .15s cubic-bezier(.25,.1,.08,.93)!important
}

.help-drop hr,.menu-bar hr,.setting-drop hr,.theme-drop hr {
    height: 1px;
    margin: 8px 20px
}

.profile-info ul li a {
    align-items: center;
    border-radius: 8px;
    color: #e4e6eb;
    -webkit-cursor: pointer;
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    font-weight: 300;
    margin-left: 0!important;
    padding: 0 3px;
    position: relative;
    text-decoration: none;
    width: 100%
}

.profile-info ul li a span {
    color: #e4e6eb;
    text-align: left
}

.profile-info ul li a .icon i {
    color: #e4e6eb;
    font-size: 18px;
}

.profile-info ul li:hover {
    background: #3a3b3c!important
}

.profile-info ul li a .icon {
    background: #ffffff1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 13px;
    height: 35px;
    width: 35px
}

.profile-info ul li a .icon span {
    color: #e4e6eb;
    font-size: 23px;
    line-height: 35px
}

.profile-info ul li a .icon img {
    margin-top: 7.6px!important
}

.profile-info ul.help-drop,.profile-info ul.setting-drop,.profile-info ul.theme-drop {
    display: none
}

.profile-info .arrow {
    align-items: center;
    color: #e4e6eb;
    display: inline-flex;
    font-size: 18px;
    font-weight: 400;
    padding-left: 14px;
    width: 100%
}

.profile-info .arrow i {
    color: #e4e6eb;
    cursor: pointer!important;
    height: 35px;
    line-height: 37px;
    margin: 13px 7px;
    -webkit-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -moz-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -ms-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    -o-transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    transition: .15s cubic-bezier(.25,.1,.08,.93)!important;
    width: 35px
}

.profile-info .arrow i,.profile-info .arrow i:hover {
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
    text-align: center
}

.profile-info .arrow i:hover {
    background: #3a3b3c;
    cursor: pointer
}

.profile-info .arrow span {
    color: #e4e6eb;
    font-size: 17px;
    font-weight: 600;
    margin-right: 15px
}

.profile-info .profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.profile-info .profile p {
    font-size: 16px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.profile-info .profile img {
    border-radius: 50%;
    height: 50px;
    object-fit: cover;
    width: 50px;
}

@media (max-width: 991px) {
    #navdrop .profile-info {
        right: 10px;
    }
}

@media (max-width: 767px) {
    #navdrop .profile-info {
        right: 50%;
        transform: translateX(50%);
    }
}
/* End of User info dropdown */

/* Confirm modal */
.custom-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0/.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.custom-confirm-modal {
    background: linear-gradient(145deg,#1a1a1a 0%,#2d2d2d 100%);
    border-radius: 12px;
    padding: 25px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 15px 30px rgb(0 0 0/.5);
    text-align: center;
    position: relative
}

.custom-confirm-title {
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px
}

.custom-confirm-text {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.5
}

.custom-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 15px
}

.custom-confirm-confirm,.custom-confirm-cancel {
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: all .3s ease;
    min-width: 100px
}

.custom-confirm-confirm {
    background: #dc2626;
    color: #fff;
    font-weight: 600;
    border: 1px solid #dc2626;
    box-shadow: 0 2px 5px rgb(220 38 38/.3)
}

.custom-confirm-confirm:hover {
    background: #b00010;
    border-color: #b00010;
    box-shadow: 0 4px 10px rgb(176 0 16/.5)
}

.custom-confirm-cancel {
    background: rgb(255 255 255/.1);
    color: var(--text-primary);
    font-weight: 500;
    border: 1px solid rgb(255 255 255/.2)
}

.custom-confirm-cancel:hover {
    background: rgb(255 255 255/.2);
    border-color: rgb(255 255 255/.3)
}

@media (max-width: 767px) {
    .custom-confirm-modal {
        width:85%;
        padding: 15px;
        max-width: 350px
    }

    .custom-confirm-title {
        font-size: 18px
    }

    .custom-confirm-text {
        font-size: 14px
    }

    .custom-confirm-confirm,.custom-confirm-cancel {
        padding: 8px 20px;
        font-size: 14px;
        min-width: 90px
    }

    .custom-confirm-actions {
        gap: 10px
    }
}
/* End of Confirm modal */