@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

html{
    margin: 0;
    padding: 0;
}

body{
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: var(--petals-black);
}
a{
    transition: all 500ms;
}

/*** Alert ***/
.alert{
    border-radius: 0;
    color: var(--petals-white);
    border: none;
}
.alert-primary{
    background-color: var(--petals-primary);
}
.alert-success{
    background-color: var(--petals-success);
}
.alert-info{
    background-color: var(--petals-info);
}
.alert-warning{
    background-color: var(--petals-warning);
}
.alert-danger{
    background-color: var(--petals-danger);
}

/*** General ***/
.navbar-brand{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: #777;
}
.logo {
    width: 133px;
    height: 26px;
}

.nav-item {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    padding: 5px 20px;
}
.nav-link{
    color: var(--petals-black);
}
.nav-link:hover{
    color: var(--petals-blue);
}
.nav-link.active{
    color: var(--petals-blue) !important;
}
.inner-content{
    min-height: calc(100vh - 150px);
    background-color: #EBEEF3;
    margin-bottom: 0;
    padding-bottom: 5px;
}

/*** Nav search ***/
.nav-search {
    border: 1px solid #D9D8D8;
    height: 40px;
    border-radius: 21px;
    padding: 0 24px;
    box-shadow: 0px 4px 4px 0px #00000040;
    opacity: 0.7;
    transition: all 500ms;
}
.nav-search:hover,
.nav-search:focus{
    opacity: 1;
    box-shadow: 0px 1px 1px 0px #00000040;
}
.nav-search i{
    color: #949191;
    font-size: 18px;
}
.nav-search input{
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    border: none;
    padding: 0;
}
.nav-search input:focus,
.nav-search input:focus-visible{
    box-shadow: none;
    border: none;
}

/*** Nav Auth ***/
.nav-auth {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 24px;
}
.nav-auth a{
    text-decoration: none;
    color: var(--petals-black);
    /* font-size: 16px; */
    font-weight: 700;
    line-height: 18px;
    margin: auto 10px;
}
.nav-auth a:hover{
    color: var(--petals-blue);
}

/*** Nav user ***/
.nav-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    margin-left: 24px;
}
.nav-user.ad-user{
    width: 80px;
}
.nav-user i{
    color: #615E5E;
    font-size: 18px;
}
.nav-user .wallet{
    color: var(--petals-black);
    font-weight: 600;
    font-size: 16px;
}
.nav-user .wallet i{
    color: var(--petals-black);
}
.nav-user img{
    height: 45px;
    width: 45px;
    border-radius: 50%;
}
.nav-user .dropdown-toggle::after{
    display: none;
}
.nav-user .dropdown-menu{
    padding: 10px 20px;
    border-radius: 0;
    border: 1px solid var(--petals-gray-d3);
    width: 400px;
}
.nav-user.ad-user .dropdown-menu{
    width: auto;
}
.nav-user .dropdown-menu .title{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--petals-black);
    margin-bottom: 15px;
}
.nav-user .dropdown-menu ul{
    padding-left: 0;
    list-style: none;
}
.nav-user .dropdown-menu li{
    margin-bottom: 10px;
}
.nav-user .dropdown-menu a{
    text-decoration: none;
    color: var(--petals-black);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}
.nav-user .dropdown-menu a:hover{
    color: var(--petals-blue);
}
.nav-user .dropdown-menu a.active{
    color: var(--petals-blue);
}
.nav-user .dropdown-menu i{
    font-weight: 900;
    display: inline-block;
    color: var(--petals-black);
    margin-right: 4px;
}
.nav-user .dropdown-menu .menu-footer {
    background-color: var(--petals-gray-d3);
    text-align: right;
    margin: 0 -20px -10px -20px;
    padding: 10px 20px;
}
.user-menu-container{
    max-width: 90vw;
}
/*** Has Side layout ***/
.has-side{
    margin-top: 40px;
}
.has-side .hero{
    background-image: url("../images/has-side-hero-bg.png");
    background-repeat: no-repeat;
    min-height: 100px;
    background-size: 100% auto;
    background-position: center top;
    padding: 20px;
}
.has-side .hero .back{
    font-size: 28px;
    color: var(--petals-white);
}
.has-side .hero .back:hover{
    color: var(--petals-blue);
}
.has-side .hero .membership{
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: right;
    color: var(--petals-white);
}
.has-side .hero h2{
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
    color: var(--petals-white);
    margin-bottom: 20px;
}
.has-side .hero p{
    font-size: 14px;
    font-weight: 400;
    line-height: 27px;
    color: var(--petals-white);
}
.has-side .hero img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.has-side .hero .name{
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    display: block;
    color: var(--petals-white);
}
.has-side .hero .name a{
    color: var(--petals-white);
    text-decoration: none;
    display: inline-block;
    width: 25px;
}
.has-side .hero .name a:hover{
    color: var(--petals-blue);
}
.has-side .content{
    padding: 60px 0;
}
.has-side .box {
    background-color: var(--petals-white);
    color: var(--petals-black);
    padding: 20px;
}

.has-side .box .menu{
    padding-left: 0;
    list-style: none;
}
.has-side .box .menu li{
    margin-bottom: 10px;
}
.has-side .box .menu a{
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    color: var(--petals-black);
}
.has-side .box .menu a:hover{
    color: var(--petals-blue);
}
.has-side .box .menu a.active{
    color: var(--petals-blue);
}
.has-side .box .menu i{
    color: var(--petals-blue);
    margin-right: 8px;
}
.has-side .box .box-inner{
    padding: 10px 20px;
}
.has-side .box .box-inner h3{
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
}
.has-side .box .box-inner h3 a.edit{
    text-decoration: none;
    color: var(--petals-blue);
    font-size: 16px;
}
.has-side .box .box-inner h3 a.edit:hover{
    color: var(--petals-black);
}
/*** Advertiser layout ***/
.advertiser-container{
}
.advertiser-container .side{
    background-color: var(--petals-blue);
    color: var(--petals-white);
    min-height: calc(100vh - 150px);
    padding: 20px 10px;
}

/*** Side menu ***/
.sidemenu {
    width: 100%;
    background-color: transparent;
}

/* Side menu Item */
.sidemenu-item + .sidemenu-item {
    border-top: none;
}

.sidemenu .active{
    color: var(--petals-yellow);
}

.sidemenu .active:hover{
    color: var(--petals-yellow);
}

.sidemenu-link{
    width: 100%;
    padding: 8px 0 0 0;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: var(--petals-white);
    text-decoration: none;
    display: block;
}

/* Side menu Header */
.sidemenu-header {
    width: 100%;
    padding: 8px 0 0 0;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: var(--petals-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.sidemenu-link:hover,
.sidemenu-header:hover {
    text-decoration: none;
    color: var(--petals-white);
}

.sidemenu-logout {
    color: #FFCDD2;
}

.sidemenu-logout:hover {
    color: #FF7381;
}

.sidemenu-header[aria-expanded="true"] {
    /*background-color: #ced4da;*/
}

.sidemenu i.bi {
    margin-right: 8px;
}

.sidemenu-icon {
    position: absolute;
    right: 20px;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.sidemenu-header[aria-expanded="true"] .sidemenu-icon {
    transform: rotate(45deg);
}

/* Side menu Content */
.sidemenu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out, padding 0.2s ease-out;
}

.sidemenu-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sidemenu-content ul li {
    padding: 0;
}

.sidemenu-content ul li a {
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--petals-white);
    padding: 4px 0 4px 26px;
    display: block;
}

.sidemenu-content ul li a:hover {
    color: var(--petals-white);
}

/* Expanded Side menu Content */
.sidemenu-item.expanded .sidemenu-content {
    max-height: 500px; /* Arbitrary high value to accommodate content */
    transition: max-height 0.3s ease-in, padding 0.3s ease-in;
    margin-bottom: 8px;
}

/*** Sortable ***/
.sortable-container{
    padding: 5px 0;
    border-top: 1px solid #e1e1e1;
}
.sortable-container:last-of-type{
    border-bottom: 1px solid #e1e1e1;
}
.sortable-container:hover{
    background-color: #e1e1e1;
}
.sortable-item {
    cursor: grab;
    display: block;
    width: calc(100% - 16px);
    height: 100%;
}
.sortable-item:active {
    cursor: grabbing;
}
.sortable-container .action{
    cursor: pointer;
    transition: all 0.8s ease-in-out;
}
.sortable-container .action:hover{
    text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}

/*** Pre footer ***/
.pre-footer{
    padding: 30px 0;
}

.pre-footer .title{
    color: var(--petals-black);
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
    margin-bottom: 16px;
}
.pre-footer ul{
    list-style: none;
    padding-left: 0;
}
.pre-footer li{}
.pre-footer a{
    display: inline-block;
    color: var(--petals-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-decoration: none;
    padding: 8px 0;
}
.pre-footer a.active,
.pre-footer a:hover{
    color: var(--petals-blue);
}
.pre-footer p{
    display: inline-block;
    color: var(--petals-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-decoration: none;
    padding: 8px 0;
    margin-bottom: 0;
}
.pre-footer p:last-of-type{
    margin-bottom: 20px;
}
.pre-footer .social-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.pre-footer .social-container a{
    padding: 0;
    font-size: 32px;
}

/*** Footer ***/
footer{
    border-top: 1px solid var(--petals-gray-d3);
    padding: 30px 0;
}
.footer-logo{
    width: 119px;
    height: auto;
}
footer .menu{
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
}
footer .menu li{}
footer .menu a{
    text-decoration: none;
    color: var(--petals-black);
}
footer .menu a.active,
footer .menu a:hover{
    color: var(--petals-blue);
}
/*** Buttons ***/
.btn-petals {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    padding: 8px 40px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 800ms ease-in-out;
    cursor: pointer;
    border: none;
}
.btn-petals:hover{
    opacity: 0.9;
}
.btn-petals-lg{
    padding: 15px 60px;
    font-size: 18px !important;
    line-height: 28px;
    border-radius: 8px;
}
.btn-petals-sm{
    padding: 6px 36px;
    font-size: 12px !important;
    line-height: 16px;
    border-radius: 6px;
}
.btn-purple, .btn-purple:hover, .btn-purple:active{
    color: var(--petals-white);
    background-color: var(--petals-purple);
}
.btn-outline-purple{
    color: var(--petals-purple);
    background-color: var(--petals-white);
    border: 1px solid var(--petals-purple);
}
.btn-outline-purple:hover, .btn-outline-purple:active{
    color: var(--petals-white);
    background-color: var(--petals-purple);
}
.btn-purple-2, .btn-purple-2:hover, .btn-purple-2:active{
    color: var(--petals-white);
    background-color: var(--petals-purple-2);
}
.btn-outline-purple-2{
    color: var(--petals-purple-2);
    background-color: var(--petals-white);
    border: 1px solid var(--petals-purple-2);
}
.btn-outline-purple-2:hover, .btn-outline-purple-2:active{
    color: var(--petals-white);
    background-color: var(--petals-purple-2);
}
.btn-blue, .btn-blue:hover, .btn-blue:active{
    color: var(--petals-white);
    background-color: var(--petals-blue);
    font-weight: 700;
    font-size: 16px;
}
.btn-outline-blue{
    color: var(--petals-blue);
    background-color: var(--petals-white);
    border: 1px solid var(--petals-blue);
    font-weight: 700;
    font-size: 14px;
}
.btn-outline-blue:hover, .btn-outline-blue:active{
    color: var(--petals-white);
    background-color: var(--petals-blue);
}
.btn-link{
    text-decoration: none;
    color: var(--petals-blue);
    transition: all 500ms;
}
.btn-link:hover{
    color: var(--petals-black);
}
/*** Background ***/
.bg-blue{
    background-color: var(--petals-blue) !important;;
}
.bg-purple{
    background-color: var(--petals-purple) !important;;
}
.bg-primary{
    background-color: var(--petals-primary) !important;;
}
.bg-success{
    background-color: var(--petals-success) !important;;
}
.bg-info{
    background-color: var(--petals-info) !important;;
}
.bg-warning{
    background-color: var(--petals-warning) !important;;
}
.bg-danger{
    background-color: var(--petals-danger) !important;;
}
/*** Text ***/
.text-blue{
    color: var(--petals-blue) !important;;
}
.text-purple{
    color: var(--petals-purple) !important;;
}
.text-black{
    color: var(--petals-black) !important;;
}
.text-white{
    color: var(--petals-white) !important;;
}
.text-primary{
    color: var(--petals-primary) !important;;
}
.text-success{
    color: var(--petals-success) !important;;
}
.text-info{
    color: var(--petals-info) !important;;
}
.text-warning{
    color: var(--petals-warning) !important;;
}
.text-danger{
    color: var(--petals-danger) !important;;
}
/*** Border ***/
.border-blue{
    border-color: var(--petals-blue) !important;;
}
.border-purple{
    border-color: var(--petals-purple) !important;;
}
.border-black{
    border-color: var(--petals-black) !important;;
}
.border-white{
    border-color: var(--petals-white) !important;;
}
.border-primary{
    border-color: var(--petals-primary) !important;;
}
.border-success{
    border-color: var(--petals-success) !important;;
}
.border-info{
    border-color: var(--petals-info) !important;;
}
.border-warning{
    border-color: var(--petals-warning) !important;;
}
.border-danger{
    border-color: var(--petals-danger) !important;;
}
/*** Forms ***/
.form-select,
.form-control{
    border-radius: 5px;
    border: 1px solid #949191;
    color: var(--petals-black);
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    padding: 15px 20px;
}
.form-select:focus,
.form-control:focus{
    box-shadow: none;
}
.form-label{
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--petals-black);
}
.form-select.is-invalid:focus, .was-validated .form-select:invalid:focus,
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    box-shadow: none;
}
.form-floating .error,
.form-check .error,
.form-floating-password .error{
    font-size: 12px;
    line-height: 14px;
}
.form-floating-password input{
    border-right: none;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.form-floating-icon{
    background-color: var(--petals-white);
    border: 1px solid #949191;
    border-left: none;
}
.form-floating-icon.is-invalid{
    border: 1px solid var(--petals-danger);
    border-left: none;
}
.input-required .form-label:after{
    content: "*";
    color: var(--petals-danger);
}
.form-control[type=file]:not(:disabled):not([readonly]) {
    border: 1px solid #ced4da;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
/*** pill-button ***/
.pill-button{
    background-color: var(--petals-white);
    padding: 12px 20px;
    border-radius: 35px;
    font-weight: 700;
    text-decoration: none;
    transition: all 800ms;
    -webkit-box-shadow: 3px 3px 3px 0 #aaa;
    box-shadow: 3px 3px 3px 0 #aaa;
}
.pill-button:hover{
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*** Livewire datatables ***/
[id^="datatable-"] {}
[id^="datatable-"] .form-select{
    padding: .375rem 2.25rem .375rem .75rem;;
}
[id^="datatable-"] .form-control{
    padding: 6px 12px;
}
[id^="datatable-"] .input-group .btn{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
/*** Datatable action ***/
.datatable-action .dropdown-toggle::after{
    display: none;
}
.datatable-action .dropdown-toggle i {
    font-size: 18px;
}
.datatable-action a {
    text-transform: capitalize;
    color: var(--petals-blue);
}
.datatable-action a:hover {
    background-color: var(--petals-blue);
    color: var(--petals-white);
}
.datatable-action a i{
    color: #6c757d;
    font-size: 14px;
    margin-right: 5px;
}
.datatable-action a:hover i{
    color: var(--petals-white);
}

/*** Chat floating action button ***/
#chat-floating-action{
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 99;
    background-color: var(--petals-blue);
    color: var(--petals-white);
    border-radius: 8px;
    font-weight: bold;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 24px;
}

/*** Tooltip styling ***/
.custom-tooltip {
    --bs-tooltip-bg: var(--petals-blue);
    --bs-tooltip-color: var(--bs-white);
}

/*** Variables ***/
:root {
    --petals-blue: #0D66C9;
    --petals-purple: #DA4DDE;
    --petals-purple-2: #9747FF;
    --petals-purple-2-light: #F6EFFF;
    --petals-purple-3: #5C41EE;
    --petals-white: #FFFFFF;
    --petals-black: #000000;
    --petals-gray-d3: #D3D3D3;
    --petals-gray-muted: #6c757d;
    --petals-yellow: #FFF000;
    --petals-yellow-2: #FFCB01;
    --petals-yellow-3: #FFC001;
    --petals-yellow-4: #EFA330;
    --petals-primary: #17A2B8;
    --petals-success: #28A745;
    --petals-info: #276EF1;
    --petals-warning: #FF9702;
    --petals-danger: #dc3545;
    --petals-twitter: #010101;
    --petals-linkedin: #0077B5;
}