@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');

:root { --yellow: #FAEC42; --mont:mont; --blue:#42C8FA}

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 { background-color: #10100C; color: white; font-family: var(--mont);}
p{margin: 0;}

.input-box {
  background-color: #3C3A32;
  border: none;
  padding: 15px 15px;
  color: white;
  font-size: 16px;
  box-shadow: inset 1pt 3pt 5pt #0000006C;
  width: 100%;
  font-weight: bold;
}

/*========= 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;
        overflow: scroll !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-allbox{ position: relative; padding: 5px; border: 2px solid var(--yellow);} 
.custom-allboxback{ position: relative; background-image: linear-gradient(to right,  #6c6411 ,  #151303); padding: 10px 10px; box-shadow: 1pt 2pt 5pt #AFAFAF5A;}
.custom-allbox::before, .custom-allbox::after { content: ""; position: absolute; width: 20px; height: 30px; border: 8px solid var(--yellow); }
.custom-allbox::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.custom-allbox::after {bottom: -6px;right: -6px;border-left: none;border-top: none;}
.custom-allbox .corner-top-right, .custom-allbox .corner-bottom-left { content: ""; position: absolute; width: 28px; height: 20px; border: 8px solid var(--yellow); }
.custom-allbox .corner-top-right { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.custom-allbox .corner-bottom-left {bottom: -6px;left: -4px;border-right: none;border-top: none;}

.nav_sidebar .language_box .custom-allboxback li a{color: var(--yellow); font-weight:600; font-size: 15px;}
.nav_sidebar .language_box .custom-allboxback2 li a{color: var(--blue); font-weight:600; font-size: 15px;}
.custom-allbox2{ position: relative; padding: 5px; border: 2px solid var(--blue);} 
.custom-allboxback2{ position: relative; background-image: linear-gradient(to right,  #6c6411 ,  #151303); padding: 10px 10px; box-shadow:  0px 2px 5px 0px  rgba(168, 160, 16, 0.5);}
.custom-allbox2::before, .custom-allbox2::after { content: ""; position: absolute; width: 20px; height: 30px; border: 8px solid var(--blue); }
.custom-allbox2::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.custom-allbox2::after {bottom: -6px;right: -6px;border-left: none;border-top: none;}
.custom-allbox2 .corner-top-right2, .custom-allbox2 .corner-bottom-left2 { content: ""; position: absolute; width: 28px; height: 20px; border: 8px solid var(--blue); }
.custom-allbox2 .corner-top-right2 { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.custom-allbox2 .corner-bottom-left2 {bottom: -6px;left: -4px;border-right: none;border-top: none;}

.allbutton_design{ cursor: pointer;background-image: linear-gradient(180deg, #FAEC42, #6A641E); border: 3px solid #42C8FA; padding: 10px 0; min-width: 120px; text-align: center; font-size: 13px; border-radius: 10px; font-weight: bold; display: inline-block; box-shadow: 1pt 2pt 5pt #AFAFAF5A;}
a,.offcanvas-title{cursor: pointer;}
.announcebtn_design{background-image: linear-gradient(180deg, #FAEC42, #6A641E); border: 3px solid #42C8FA; padding: 4px 0; min-width: 139px; text-align: center; font-size: 13px; border-radius: 10px; font-weight: bold; display: inline-block; box-shadow: 1pt 2pt 5pt #0000006C;}

/*========= Header(Sidebar) ==========*/
.nav_sidebar{font-family: var(--mont);}
.nav_sidebar .header {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #3C3A32;}
.nav_sidebar .header span{font-size: 16px; color: var(--yellow);}

.nav_sidebar .offcanvas-start{width: 320px;}
.nav_sidebar .offcanvas {background-color: #3C3A32; color: white; overflow-x: scroll;}
.nav_sidebar .offcanvas .offcanvas-title{background-image: linear-gradient(180deg,#42C8FA, #279A9A); box-shadow: inset 1pt 3pt 5pt #0000006C; color: var(--yellow); box-shadow: 0pt 3pt 6pt #AFAFAF5A;}
.nav_sidebar .btn_closeimg{background: transparent; border :none;}
.nav_sidebar .offcanvas-body li{ font-size: 17px; color: var(--yellow);}
.nav_sidebar .offcanvas-body li a img{padding-right: 15px; height: 35px;}
.nav_sidebar .offcanvas-body{padding-bottom: 150px;}

.modal-content { background-color: #9B9899; }
.nav_sidebar .language_box img {border-radius: 100px; width: 35px; height: 35px;}

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

.banner .bannercustombox_text p, .banner .bannercustombox_text strong{color: var(--yellow); font-size: 17px;}

.banner .amount-input {width: 120px; background-color: #6A641E; color: #9B9899; padding: 11px 0px; border: none; box-shadow: inset 1pt 3pt 5pt #0000006C; font-size: 14px; outline: none;}
.amount-input::placeholder {color: #9B9899;}


/*========= annoucement ==========*/

.announcement_box img{border:1px solid #707070;}
.announcement_box input{background: transparent; border: none; color: white;}
.announcement_box input::placeholder{color: white;}

/*========= login ==========*/

.login_box{padding: 120px 0px;}
.login_box input{background-color: #6A641E; color: #9B9899; padding: 18px 0px; border: none; box-shadow: inset 1pt 3pt 5pt #0000006C; font-size: 16px; outline: none; text-align: center;}
.login_box input::placeholder {color: #9B9899;}
.login_box .login_user::placeholder{color: white;}

/*========= Withdraw ==========*/

.withdraw_box .withdrawback_btn{font-size: 13px;}
.withdraw_box .input-box { background-color: #3C3A32; border: none; padding: 15px 15px; color: white; font-size: 16px; box-shadow: inset 1pt 3pt 5pt #0000006C; width: 100%; font-weight: bold;}

.withdraw_box .form-label { font-weight: bold; margin-bottom: 6px; color: #FFD700;}
.withdraw_box  .withdraw_disclaimer {font-size: 12px;color: #FFFFFF; margin-bottom: 200px;}

/*========= report ==========*/
.report_box .custom-dropdown { position: relative; display: inline-block;}
.report_box .dropdown-toggle::after{display: none;}
.report_box .custom-dropdown .dropdown-toggle { background-image: linear-gradient(180deg, #6A641E, #3C3A32); color: var(--yellow);  font-weight: bold; font-size: 13px; border: none; width: 200px; height: 40px; display: flex; justify-content: space-between; align-items: center;}
.report_box .custom-dropdown .arrow { font-size: 2rem; color: var(--yellow); transition: transform 0.3s ease;}
.report_box  .custom-dropdown.show .arrow {transform: rotate(180deg);}
.report_box .dropdown-menu, .report_box .custom-dropdown.show .dropdown-toggle{width: 200px; background-image: linear-gradient(180deg, #3C3A32, #3C3A32); font-size: 13px;}
.report_box .dropdown-menu{margin-top: -3px !important;}
.dropdown-item:active{background: transparent;}

.report_box .reportdatebtn label, small{font-size: 13px; color: var(--yellow);}
.report_box .reportdatebtn input{background-image: linear-gradient(180deg, #6A641E, #3C3A32); box-shadow: 1pt 3pt 5pt #0000006C; border: none; color: white; font-size: 13px; font-weight: bold; padding: 12px 5px;}
.custom-date-input {color: white;background-color: transparent;text-transform: uppercase;}
/* .custom-date-input::-webkit-calendar-picker-indicator {filter: invert(1);} */

.report_box .report_table strong{font-size: 14px;}
.report_box .custom-table{border: 2px solid #42C8FA; font-size: 13px; font-weight: bold;}
.report_box .custom-table thead { background-color: #3C3A32;}
.report_box .custom-table thead th { border-bottom: 2px solid #42C8FA; padding: 10px;}
.report_box .custom-table thead th{border-left: none;  border-right:none;}
.report_box .custom-table tbody tr {background-color: #6A641E;}
.report_box .custom-table tbody td { border-left: none; border-right:none; border-bottom: 2px solid #42C8FA; padding: 10px;}
.report_box .custom-table tbody tr:last-child td {border-bottom: 1px solid #555;}
.report_box{padding-bottom: 200px;}  

/*========= cazeassetreport ==========*/

.cazassetreport_box .cazbutton_box img{width: 20px;}
.cazassetreport_box .cazdatebtn label, small{font-size: 13px; color: var(--crimson);}
.cazassetreport_box .cazdatebtn input{background-color: #972733; border: none; color: white;}
.custom-date-input {color: white; background-color: transparent;text-transform: uppercase;}
.custom-date-input::-webkit-calendar-picker-indicator {filter: invert(1);}

.clicked-button { background-image: linear-gradient(180deg, #6A641E, #3C3A32); color:white;}
 
/*-------------------
    Media Query
---------------------------*/

@media (max-width: 320px) {
.nav_sidebar .offcanvas .offcanvas-title{font-size: 12px;}
.nav_sidebar .offcanvas-header img{width: 30px;}
.nav_sidebar .nav_user{padding: 7px 5px;}
.nav_sidebar .offcanvas-body li{padding: 5px 0px; font-size: 14px;}
.nav_sidebar .offcanvas-body li a img{padding-right: 10px;}
  
}