@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');

:root { --brown: #CA604A; --darkgray:#868484; --lightgray: #ACACAC; --gray: #D3D3D3; --choclate: #713528; --propt:propt;}

a {text-decoration: none;all: unset;}
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
body {font-family: var(--propt); background: linear-gradient(180deg, #D3D3D3, #ACACAC);}
p{margin: 0;}


/*========= START ::: Desktop Mobile Web View Set ==========*/
@media (min-width: 769px) {
    body {
        max-width: 475px; /* Common mobile screen width */
        margin: 0 auto;
        padding-right: 0 !important;
    }
    #root {
        width: 475px;
    }
    .modal {
        max-width: 475px;
        margin: 0px auto;
        overflow: hidden;
        justify-self: anchor-center;
        padding-left: 15px;
    }
    .offcanvas_maindiv {
        max-width: 475px;
        margin: 0px auto;
        overflow: hidden;
        justify-self: anchor-center;
    }
    
    .offcanvas {
        max-width: 475px;
        margin: 0px auto;
        overflow: hidden;
        justify-self: anchor-center;
    }
  
}
/*========= END ::: Desktop Mobile Web View Set ==========*/



/*========= Custom box ==========*/
.custom_allboxback{background: linear-gradient(180deg, #D3D3D3, #FFFFFF); padding: 10px 10px;}
.allbutton_back{background: linear-gradient(180deg, #CA604A, #713528); padding: 5px 10px;cursor: pointer;}
.allpageicon_img{width: 20px;}
.back{cursor: pointer;color: #cb6955;font-weight: bold;}
/*========= Header(Sidebar) ==========*/
.nav_sidebar{font-family: var(--propt);}
.nav_sidebar .offcanvas {background: linear-gradient(180deg, #b9b8b8, #FFFFFF); color: white; overflow-x: scroll;}
.nav_sidebar .nav_box{background: linear-gradient(180deg, #CA604A, #713528);}
.nav_sidebar .btn_closeimg{background: transparent; border :none;}
.nav_sidebar .offcanvas-body li a img{padding-right: 13px;cursor: pointer;}
.nav_sidebar .offcanvas-body li a{font-size: 24px;cursor: pointer;}
.nav_sidebar .offcanvas-body li{padding: 7px 0px; font-size: 17px;}
.nav_sidebar .nav_logout{padding-top: 300px;}

.nav_sidebar .header {display: flex;justify-content: space-between;align-items: center;padding: 10px;background: linear-gradient(180deg, #b9b8b8, #FFFFFF);}
.nav_sidebar .header span{font-size: 24px; color: var(--brown);} 


/*========= Home ==========*/
.carousel-indicators [data-bs-target] { width: 20px; height: 20px; cursor: pointer; background-image: radial-gradient(circle, #D3D3D3, #868484); border-radius: 50%; opacity: 0.5; transition: opacity 0.3s ease-in-out;}
.carousel-indicators .active { background-image: radial-gradient(circle, #CA604A, #713528); opacity: 1;}

.banner .banner_content p, .package_box .package_content p, .community_box .community_content p{color: var(--brown); font-size: 16px;}
.banner{margin-bottom: 100px;}

/*========= Register ==========*/

.register_box input, .custom-select { border: none; background-color: #fff; box-shadow:inset 1.33px 4px 6.67px rgba(0, 0, 0, 0.525), 0 1px 2px rgba(0, 0, 0, 0.1);  font-size: 21px; margin-bottom: 15px; padding: 13px 12px; transition: box-shadow 0.3s ease; color: var(--darkgray);  font-weight:lighter;}
.register_box button{font-size: 22px;}
.register_box .registerlogin_link{padding: 20px 0px; padding-bottom: 80px;}

.custom-select-wrapper {position: relative;}
.custom-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 50px; font-size: 21px;}
/* Custom dropdown arrow */
.custom-select-wrapper::after { content: '▼'; position: absolute; right: 15px; top: 40%; transform: translateY(-50%); pointer-events: none; color: var(--darkgray); font-size: 30px;}

.loginbtn_space{height: 300px;}


/*========= Report ==========*/
.report_box .report_btn label, .report_box .report_btn small{color: var(--darkgray);}
.report_box .report_royalty{color: var(--brown);cursor: pointer;}
.report_box input{border: none; background-color: #fff; box-shadow:inset 1.33px 4px 6.67px rgba(0, 0, 0, 0.525), 0 1px 2px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; color: var(--darkgray);  font-weight: normal;}
.custom-date-input::-webkit-calendar-picker-indicator {filter: invert(41%) sepia(0%) saturate(0%) hue-rotate(168deg) brightness(95%) contrast(87%);}
.report_box .report_content{color: var(--brown);}

/*========= Community ==========*/
.community_box{height: 900px;}

/*========= Orders ==========*/
.order_box .order_btn{margin-top: 150px;}

/*========= deposit ==========*/
.deposit_box, .transfer_box, .withdraw_box, .address_box, .package_box{height: 800px;}

/*-------------------
    Media Query
---------------------------*/

@media (max-width: 320px) {

  
}