:root {
	--bs-primary: #fe8a22;
	--primary-color: #fe8a22;
	/* --primary-color: #ea8e3c; */
	--secondary-color: #d06a10;
	--primary-color-dark: #db6f10;
	--gray: #5f666d;
	--card-boder-radius: 12px;
    --color-bg-1: #f6f6ff;
    --color-grey: #d9d9df;
    --muted: #a2a2ac;

	/* Bs Variables */
	--bs-border-radius-lg: 0.9rem;
	--bs-primary-rgb: 254, 138, 34;
    --bs-border-radius: 12px;
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-btn-disabled-bg: #fe8a22;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

main {
    width: 100%;
}

body.homepage {
    /* background-image: url('/img/home/HeroDesktop.webp');
    background-image: url('/img/home/Hero Ver02 - Mobile.png');
    background-image: url('/img/home/Hero.png');
    background-position: center 0px;
    background-size: 108%;
    background-repeat: no-repeat; */
}

.btn{border-radius: var(--bs-border-radius); padding-left:17px;padding-right:17px;font-weight:500;}
.btn:not([class*="outline"]){border:0}
.btn-primary,.btn-brand{background:var(--primary-color);color:#fff}
.btn-primary:hover,.btn-brand:hover{background:var(--primary-color-dark);color:#fff}
.btn-primary:active,.btn-brand:active,.btn-primary:focus-visible,.btn-brand:focus-visible{background-color:var(--primary-color-dark) !important;color:#fff !important}
.btn-primary {
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-opacity: 0.55;
}

/* .btn{border-radius:6px;padding-left:17px;padding-right:17px;font-weight:700;}
.btn:not([class*="outline"]){border:0}
.btn-primary,.btn-brand{background:var(--primary-color);color:#fff}
.btn-primary:hover,.btn-brand:hover{background:var(--primary-color-dark);color:#fff}
.btn-primary:active,.btn-brand:active,.btn-primary:focus-visible,.btn-brand:focus-visible{background-color:var(--primary-color-dark) !important;color:#fff !important} */

.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color);}
.btn-outline-primary:hover { background: var(--primary-color); color: white; border-color: var(--primary-color);}
.btn-outline-primary:active { background: var(--primary-color-dark) !important; color: white; border-color: var(--primary-color-dark) !important;}
.btn-success{background-color:#99c432;border-color:#89b02d}
.btn-success:hover{background-color:#89b02d}
.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
}
.btn-link { text-decoration: none; color: var(--primary-color); }
.btn-block { width: 100%; }
.btn-link:hover { color: var(--primary-color-dark); }
.btn-link:active { color: var(--primary-color-dark) !important; }

.form-control, .form-select {
    border-radius: var(--bs-border-radius);
    min-height: 48px;
}

[v-cloak] { display: none !important; }

.fw-900 { font-weight: 900; }
.nav-pills {
    --bs-nav-pills-border-radius: 0.375rem;
    --bs-nav-pills-link-active-color: #000;
    /* --bs-nav-pills-link-active-bg: var(--primary-color); */
    --bs-nav-pills-link-active-bg: var(--color-grey);
}
/* Bs Reset */
.navbar {min-height: 76px; border-bottom: 1px solid rgba(0, 0, 0, .05); transition: top 0.2s;}
/* .navbar-dark { border: 0; background-color: var(--primary-color);} */
.navbar-dark { border: 0; }
.navbar-dark .nav-link { color: rgba(255,255,255,.9);}
.navbar-light .nav-link { color: rgba(0,0,0,.9);}
a {color: var(--primary-color);text-decoration: none;}
.w-90 { width: 90%; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--bs-primary);}
.progress-bar { background: var(--bs-primary);}

.nav-pills .nav-link {
    border-radius: var(--bs-border-radius) !important;
}
.modal .btn-close-fixed { position: absolute; right: 16px; top: 16px; z-index: 999;}

/* End Bs Reset */



.avatar {
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.data-label { margin-bottom: 4px; }

.color-picker {
    position: relative;
}
.color-picker--sm {
    max-width: 150px;
}

.color-picker .form-control-color {
    position: absolute;
    right: 0;
    top: 0px;
}

.timer-preview { width: 100%; display: flex; align-items: center;}

.timer {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    display: inline-flex;
    background: #fff;
    padding: 10px 10px 24px;
    width: auto;
    margin:  0 auto;
}
.timer-box {
    width: 92px;
    height: 92px;
    background: #FE8A22;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-box {
    font-size: 36px;
    font-weight: 500;
    color: white;
    position: relative;
}

.timer-box:last-child {
    margin-right: 0;
}

.timer-box>.timer-label {
    position: absolute;
    left: 50%;
    color: black;
    transform: translateX(-50%);
    bottom: -20px;
    font-size: 13px;
}

.blog-header { background-color:  var(--primary-color); }
.blog-header {color: white;}
.blog-header .lead { max-width: 700px;  margin: 10px auto;}
.blog-content { font-size: 18px; line-height: 1.7;}
.blog-content h2, .blog-content h3 { margin-top: 40px; margin-bottom: 20px; }
.blog-content ol, .blog-content ul { margin-left: 20px; }
.blog-content ol li, .blog-content ul li { margin-bottom: 8px; }

.navbar .user-profile-pic { width: 40px; height: 40px; border-radius: 20px; }
.navbar-nav { align-items: center;}
.navbar-nav .nav-item { font-weight: 500; margin-left: 25px;}

.header-container { text-align: center; padding: 100px 0;}
.header-container h1 { font-size: 38px;}
.header-container p { margin-top: 20px; color:#555f78; font-size: 18px;}

.banner-create-account { background-color: var(--primary-color); color: white; text-align: center; padding: 20px;}

footer {
    padding: 60px 0;
}

.badge.bg-success {
    background-color: #c6f2b675 !important;
    color: green;
    padding: 6px 10px;
    border-radius: 10px;
}

@media (max-width: 991px) {
    /* .navbar .navbar-collapse {
        position: absolute;
        top: 72px;
        right: 9px;
        max-width: 300px;
        width: 205px;
        background: rgba(0, 0, 0, .6);
        border-radius: 16px;
        padding: 16px 0;
        z-index: 99;
    }
    .navbar .navbar-collapse .nav-item {
        margin-left: 0px;
        font-size: 20px;
        width: 100%;
        text-align: center;
        margin: 3px 0;
    }
    .navbar .navbar-collapse .nav-item .btn.btn-brand {
        margin: 5px 0;
    } */
}