.nav-link{
    padding: 0.25rem 0.6rem;
}

.blinking-circle {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    animation: blink 1s infinite;
    position: absolute;
    top: 0px; /* Adjust position as needed */
    right: 5px; /* Adjust position as needed */
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Higher than Bootstrap modals */
}
#loading-screen .spinner-border {
    width: 3rem;
    height: 3rem;
}
/* Animate Loading*/

.top-right-icon{
    position : absolute ;
    top : 0 ;
    right : 0;
}
.card-title  {
    padding-left: 0.8rem;
}
.red {
        color: red;
        /* white-space: nowrap; */
    }

    .green {
        color: #00ff00;
        /* white-space: nowrap; */
    }

    .gray {
        color: #6b6b6b;
    }

    .orange {
        color: #ff8c00;
    }

    @keyframes rotate360 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .RotateTS {

        transition: transform 0.5s ease-in-out;
    }

    .card-theme {
        
    }

    .card-theme-white {
        background-color: #fff;
        border-radius: 26px;
        box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        -webkit-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        -moz-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        border-top: none;
    }

    .card-theme-gray {
        background-color: #c9c7c8;
        border-radius: 26px;
        box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        -webkit-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        -moz-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
        border-top: none;

    }

    .bg-white {
        background-color: #fff;
        border-radius: 26px;
        max-width: 60%;
        margin: auto;
    }

/*Seperate From Dashboard*/

.paginator{
    color : #2d2d2d;
    text-align: right;
}
.paginator a{
    color : #2d2d2d;
    text-align: right;
}   

.table-bordered td, .table-bordered th {
            border-left: 0px solid #dee2e6;
            border-right: 0px solid #dee2e6;
        }
		a:hover{
			text-decoration: none;
		}
		 .modal-content {
			background-color: #2d2d2d;
/*			background-color: white;*/
		}
        .modal-title{
            color: white;
        }
		.bg-light {
			background-color: #2d2d2d !important;
/*			background-color: #fff !important;*/
		}
        .table td,
        .table th {
            padding: .1rem;
        }
	
label{
    color: white;
}
        body {
            font-family: 'Prompt', sans-serif;
/*			font-size: 0.825rem;*/
			font-size: 0.9rem;
            color: 2d2d2d;
            /* Change the font family as desired */
/*            background-color: #e7e9f5;*/
            background-color: #f5f5f5;
        }

       
        /* Customize the sidebar */
        .sidebar {
            height: 100%;
            width: 250px;
            /* Adjust as needed */
            position: fixed;
            top: 0;
            left: 0;
            background-color: #f8f9fa;
            /* Change background color */
            padding-top: 20px;
        }

        /* Style the links inside the sidebar */
        .sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 20px;
            display: block;
            color: #333;
            /* Change link color */
        }

        /* Change color on hover */
        .sidebar a:hover {
            background-color: #e9ecef;
            /* Change hover background color */
        }

        /* Dropdown styles */
        .dropdown-menu {
            display: none;
            background-color: #f8f9fa;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }

        /* Main content */
        .content {
            margin-left: 250px;
            /* Same width as the sidebar */
            padding: 20px;
        }

        .form-control {
/*
            border-radius: 16px;
            border: 2px solid #9d62f5; 
*/
			border-radius: 10px;
            border-top: 2px solid #19d64e;

        }
		

        .input-group-text {
            color: transparent;
            border: 0px;

        }

        .card {
            border: 0px;
            border-radius: 10px;
        }

        .form-group {
/*            color: #6b6b6b;*/
            color: white;
/*            color: #2b2f3b;*/
        }

        label {
            margin-bottom: 0rem;
        }

        .login-font {
            font-size: 12px;
            margin-left: 45px;
            font-weight: 500;
        }

        .card-header {
            background-color: transparent;
            border: 0px;
        }

        .btnTeam1 {
/*            background-color: #9d62f5;*/
            background-color: #19d64e;
            color: black;
            border-radius: 10px;
        }

        .card-body {
            margin-left: 24px;
            margin-right: 24px;
            padding: 0.2rem;
        }

/* serperate from header */

body,

html {

  height: 100%;

}



/*

 * Off Canvas sidebar at medium breakpoint

 * --------------------------------------------------

 */

.row-offcanvas {

  height: 100vh;

}

@media screen and (max-width: 992px) {


  .row-offcanvas {

    position: relative;

    -webkit-transition: all 0.25s ease-out;

    -moz-transition: all 0.25s ease-out;

    transition: all 0.25s ease-out;


  }


  .row-offcanvas-left .sidebar-offcanvas {

    left: -33%;

  }



  .row-offcanvas-left.active {

    left: 33%;

    margin-left: -6px;

  }


  .sidebar-offcanvas {

    position: absolute;

    top: 0;

    width: 33%;

    height: 100%;

  }



}



/*

 * Off Canvas wider at sm breakpoint

 * --------------------------------------------------

 */

@media screen and (max-width: 34em) {

  .row-offcanvas-left .sidebar-offcanvas {

    left: -45%;

  }

 

  .row-offcanvas-left.active {

    left: 45%;

    margin-left: -6px;

  }



  .sidebar-offcanvas {

    width: 45%;

  }



}





.card {

    overflow: hidden;
    background-color: #2b2b2b;
    border-radius: 26px;
    box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
    -webkit-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
    -moz-box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.78);
    border-top: none;
}



.card-body .rotate {

  z-index: 8;

  float: right;

  height: 100%;

}



.card-body .rotate i {

  color: rgba(20, 20, 20, 0.15);

  position: absolute;

  left: 0;

  left: auto;

  right: -10px;

  bottom: 0;

  display: block;

  -webkit-transform: rotate(-44deg);

  -moz-transform: rotate(-44deg);

  -o-transform: rotate(-44deg);

  -ms-transform: rotate(-44deg);

  transform: rotate(-44deg);

}





a {

/*  color: #362c34;*/
  color: #fff;

  /* สีของลิงก์เริ่มต้น */

  text-decoration: none;

  /* ไม่มีเส้นใต้ข้อความลิงก์ */

}



 a:hover{

/*  color: #19d64e;*/
  color: #19d64e;
  background-color: #0c480d;
  /* สีของลิงก์เมื่อโฮเวอร์ */

}



a.active {

/*  color: #19d64e;*/
  color: #19d64e;

  /* สีของลิงก์ที่คลิกแล้ว */

}



a.active::before {

  content: "\007C";

  /* เพิ่มเครื่องหมายดิบิด */

  font-weight: 1000;

  /* ทำให้ตัวหนังสือหนา */

  color: #19d64e;

}



a[aria-expanded="true"]::before {

  content: "\007C";

  /* เพิ่มเครื่องหมายดิบิด */

  font-weight: 1000;

  /* ทำให้ตัวหนังสือหนา */

  color: #19d64e;

}



a[aria-expanded="false"]::before {

  content: none;

  /* ลบเครื่องหมายดิบิด */

}



a.nav-link:focus {

  /* หลีกเลี่ยงเครื่องหมายดิบิดสีม่วง */

  outline: none;

}



.list-unstyled {

/*  border: 1px solid #19d64e;*/
  border: 1px solid #19d64e;

  border-radius: 10px;


  font-size : 0.77rem;
  margin-left: 10px;
}



.btn-Tsubmit {

/*  background-color: #19d64e;*/
  background-color: #0c480d;

  border-radius: 10px;

  border: none;

}



.btn-Tsubmit:hover {

  background-color: #19d64e;

}



.btn-Tsubmit:active {

  background-color: #6e3ff5;

}



.btn-Tsubmit:focus {

  background-color: #19d64e;

}



.btn-Tsubmit:disabled {

  background-color: #b1a0ff;

  pointer-events: none;

  opacity: 0.6;

}



.btn-Tgreen {

  background-color: #58e036;

  border-radius: 16px;

  border: none;

}



/* สีเมื่อปุ่มถูกกด (active state) */

.btn-Tgreen.active {

  background-color: #4aa82b;

  /* เปลี่ยนสีเมื่อถูกกด */

}



/* สีเมื่อเม้าส์วางอยู่ (hover state) */

.btn-Tgreen:hover {

  background-color: #6ce049;

  /* เปลี่ยนสีเมื่อเม้าส์วางอยู่ */

}



/* สีเมื่อปุ่มเป็น focus */

.btn-Tgreen:focus {

  background-color: #58e036;

  /* เปลี่ยนสีเมื่อเป็น focus */

}



/* สีเมื่อปุ่มถูก disable */

.btn-Tgreen:disabled {

  background-color: #b1ff97;

  /* เปลี่ยนสีเมื่อปุ่มถูก disable */

  pointer-events: none;

  /* ปิดการทำงานเมื่อปุ่มถูก disable */

  opacity: 0.6;

  /* ปรับความโปร่งใสของปุ่มเมื่อถูก disable */

}



.btn-Tradius {

  border-radius: 16px;

}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {

  color: white;
/*  color: #2d2d2d;*/

}

h1, h2, h3, h4, h5, h6 {

/*  color: white;*/
  color: #2d2d2d;

}





@media screen and (max-width: 992px) {

  .navbar {

    background-color: #19d64e;

  }



  .main {

    padding-top: 3.125rem;

    margin-top: 0.75rem;

  }



  .bg-table-head {

    white-space: nowrap;

  }

}



@media (min-width: 1200px) {

  .modal-xl {

    max-width: 1340px;

  }

}







@media screen and (min-width: 993px) {

  .navbar {

    display: none;

  }

}



/* //.table-responsive on  horizontally scrolling table */

.table-responsive {

/*  background-color: white;*/

/*  background-color: #9ba8ab;*/

  border-radius: 5px;

}



.table-responsive::-webkit-scrollbar {

  width: 10px;

}



.table-responsive::-webkit-scrollbar-thumb {

  background-color: #19d64e;

  border-radius: 10px;

}





.input-theme label {

  margin-left: 12px;

}



.form-select {

  display: block;

  width: 100%;

  padding: .375rem 2.25rem .375rem .75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #6b6b6b;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  background-color: var(--bs-body-bg);

  background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12"%3e%3cpath fill="none" stroke="%239d62f5" stroke-width="2" d="M2 5l6 6 6-6" /%3e%3c/svg%3e');

  background-repeat: no-repeat;

  background-position: right .75rem center;

  background-size: 16px 12px;

  border: 2px solid #19d64e;

  border-radius: 16px;

}



.custom-control {

  position: relative;

  z-index: 1;

  display: block;

  min-height: 1.5rem;

  padding-left: 0rem;

}



.custom-control-input:checked~.custom-control-label::before {

  color: #fff;

  border-color: #00d54f;

  background-color: #00d54f;

}





.nav-link-sub {

  background-color: var(--bs-body-bg);

/*  background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12"%3e%3cpath fill="none" stroke="%239d62f5" stroke-width="2" d="M2 5l6 6 6-6" /%3e%3c/svg%3e');*/
  background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 12"%3e%3cpath fill="none" stroke="%2319d64e" stroke-width="2" d="M2 5l6 6 6-6" /%3e%3c/svg%3e');

  background-repeat: no-repeat;

  background-position: right .75rem;

}



.nav-item-sub a:active::before {

  content: "\007C";

  /* เพิ่มเครื่องหมายดิบิด */

}



.bg-table-head {

/*  background-color: #19d64e;*/
/*  background-color: #19d64e;*/
  background-color: #0c480d;

  color: white;
/*  color: #101010;*/

}




.rounded-pill {

  border: 1px solid #19d64e;

}



.rounded-circle {

  border: 1px solid #19d64e;

  background-color: #19d64e;

  color: white;



}



.rounded-pill-bg {

  display: none;

  background-color: #19d64e;

  color: white;

  border-radius: 16px;



}



.btn-Tred {

  background-color: #ff3d3d;

  border-radius: 16px;

  border: none;

}



.btn-Tred:hover {

  background-color: #ff3d3d;

}



.btn-Tred:active {

  background-color: #ff3d3d;

}



.btn-Tred:focus {

  background-color: #ff3d3d;

}



.btn-Tred:disabled {

  background-color: #ff9b9b;

  pointer-events: none;

  opacity: 0.6;

}



.modal-content {

  border-radius: 26px;

}



p{

/*  color: #362c34;*/
  color: #fff;

}
td {
  text-align: center;
/*  color: white;*/
/*  color: #362c34;*/
/*  background: #2d2d2d ;*/
/*  background: white ;*/

}


/* border-radius page-link-left and page-link-right  */

.page-link-left {

  border-top-left-radius: 16px;

  border-bottom-left-radius: 16px;

}



.page-link-right {

  border-top-right-radius: 16px;

  border-bottom-right-radius: 16px;

}



.page-item.active .page-link {

  z-index: 3;

  color: #fff;

  background-color: #19d64e;

  border-color: #19d64e;

}



.page-item .page-link {

  color: #6b6b6b;

}

.card-body {

  margin-left: 0px;

  margin-right: 0px;

}

.card-deposit p {

  font-size: 12px;

}



.card-deposit h4 {

  color: #19d64e;



}



.card-deposit h5 {

  color: #00d54f;

}



.h5-color {

  color: #ffad1f !important;

}