body {
    font-size: 14px;
}

a {
    color: #000000;
}

.bg-grey {
    background: #cccccc;
}

.login {
    opacity: 0.9;
    background: #accbf1;
}

.card-body {
    opacity: 1;
}

.btn-hud {
    border-radius: 0;
    border: 1px solid;
    color: white;
    background: #225cbf;
}

.circle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8vw; /* Adjust the size of the circle as needed */
    height: 8vw; /* Adjust the size of the circle as needed */
    background-color: #225cbf; /* Background color */
    color: #fff; /* Text color */
    border-radius: 50%; /* Make it a circle */
    text-align: center;
    font-size: 24px; /* Adjust the font size */
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    animation: blink2 3s infinite alternate;
}

.circle-button::before {
    content: "";
    position: absolute;
    width: 8vw;
    height: 8vw;
    border: 4px solid #00ccff; /* Neon color */
    border-radius: 50%;
    animation: neon-glow 1s infinite alternate, blink 1s infinite;
}

@keyframes neon-glow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

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

@keyframes blink3 {
    0%,
    100% {
        opacity: 1;
    }
    60% {
        opacity: 0.5;
    }
}

.circle-button:hover {
    color: #fff;
}

.btn1 {
    left: 25vw;
    top: 16vh;
    position: relative;
}

.click1 {
    left: 15vw;
    top: 11.5vw;
    color: #fff;
    position: relative;
    font-size: 30px;
    font-family: "Kanit";
    animation: blink3 2s infinite;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

.martix {
    font-size : 12px;
}
.card.matrix {
    border: 1px solid #00ff00;
    border-radius: 0;
    background: #000000;
    color: #00ff00;
}

.card.matrix .card-header {
    border-bottom: 1px solid #00ff00;
}

.card.matrix .card-footer {
    background: #000;
    border-bottom: 1px solid #00ff00;
}

.card.matrix .card-header,
.card.matrix .card-header a {
    color: #00ff00;
}

.card.matrix .btn {
    border-radius: 0;
    color: #00ff00;
    border: 1px solid #00ff00;
}

.card.matrix .fa {
    color: #00ff00;
}

.card.card.matrix .table {
    background: #000000;
}

.card.card.matrix .table tr,
.card.card.matrix .table td,
.card.card.matrix .table th {
    background: #000000;
    color: #00ff00;
    border: 1px solid #00ff00;
}

.card.card.matrix .table tr.even {
    background: #222;
}

.matrix a {
    color: #00ff00;
}

.matrix input,
.matrix select,.matrix option,.matrix option:focus,
.matrix .paginate_button a,
.matrix .nav-link,
.matrix input:read-only {
    background: #000000;
    border-radius: 0;
    color: #00ff00;
    border: 1px solid #00ff00;
}

.matrix input:read-only,.matrix input:placeholder {
    background: #222;
    border-radius: 0;
    color: #00ff00;
    border: 1px solid #00ff00;
}

.matrix .nav-link.active {
    border-bottom: none;
    background: #222;
    border-radius: 0;
    color: #00ff00;
    border-top: 1px solid #00ff00;
    border-left: 1px solid #00ff00;
    border-right: 1px solid #00ff00;
}

.matrix .tab-pane{
    padding: 5px;
}

.matrix .disabled,
.matrix .next,
.matrix .previous {
    display: none;
}

.matrix .active {
    background: #000000;
    border-radius: 0;
    color: #00ff00;
    border: 1px solid #00ff00;
}

.matrix .page-link {
    background: #00ff00;
    border-radius: 0;
    color: #000;
    border: 1px solid #00ff00;
}

.matrix .modal-content,
.matrix .modal-header,
.matrix .modal-body
.matrix .modal-footer,
.martrix form{
    background: #000000;
    border-color: #00ff00;
}

.text-matrix{
    color: #00ff00;
}

.martix .btn{
    background: #000000;
    border-color: #00ff00;
    color: #00ff00;
}