*,
html,
body {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
       font-family: 'Roboto', sans-serif;
}

ul li {
       list-style-type: none;
       margin: 7px auto;
}

a {
       text-decoration: none;
}

select {
       field-sizing: content;
}

:root {
       --animate-duration: 1s;
       --animate-delay: 1s;
       --animate-repeat: infinite;

       --pallete1: #5271ff;
       --pallete2: #38b6ff;
       --pallete3: #5e17eb;
       --pallete4: #004aad;
       --pallete5: #F5F7F8;
       --pallete6: #F6F5F5;
       --pallete7: #d9d9d9;
       --pallete8: #a6a6a6;
       --pallete9: #737373;
       --pallete10: #100C08;
       --pallete11: #3049A5;
       --pallete12: #F5F5F5;
       --pallete13: #60A3D9;
       --pallete14: #FD49A0;
       --pallete15: #070F2B;
       --pallete16: #222831;
       --pallete17: #31363F;
       --pallete18: #ff3131;
       --pallete19: #B4B4B8;
       --pallete20: #C7C8CC;
       --pallete21: #EF7C8E;
       --pallete22: rgb(245, 245, 245, 0.9);
       --pallete23: rgb(16, 12, 8, 0.8);
       --pallete24: #d8eefe;
       --pallete25: #e3f6f5;
       --pallete26: #ff5470;
       --pallete27: #094067;
       --pallete28: #232946;
       --pallete29: #25d366;
       --pallete30: #f25c05;
       --pallete31: rgb(255, 180, 0);
       --pallete32: rgb(9, 64, 103, 0.9);
       --pallete33: rgb(255, 244, 0);
       --pallete34: rgb(244, 205, 42);
       --pallete35: rgb(253, 246, 140);
       --pallete36: #ffffff;

       --pallete1op: rgba(82, 113, 255, 0.2);
       --pallete2op: rgba(56, 182, 255, 0.2);
       --pallete11op: rgba(48, 73, 165, 0.5);
       --pallete13op: rgba(96, 163, 217, 0.3);
       --pallete24op: rgba(216, 238, 254, 0.2);
       --pallete25op: rgba(227, 246, 245, 0.3);
       --pallete27op: rgba(9, 64, 103, 0.5);
}

/* class basic adalah awal pembuatan PHP */
.basic {
       display: none;
}

.container-card {
       /* min-height: 600px; */
       height: 100vh;
       display: flex;
       margin: auto;
       justify-content: center;
       align-items: center;
       text-align: center;
       background-color: var(--pallete8);
}

.card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       background-color: var(--pallete11);
       color: white;
       font-size: 1rem;
       font-family: 'Roboto', sans-serif;
       /* font-family: 'Open Sans', sans-serif; */
}

.card-header img {
       height: 50px;
       width: 50px;
}

.card {
       max-width: 350px;
       min-height: 350px;
       position: absolute;
       top: 10%;
}

.card-body .login-button {
       background-color: var(--pallete11);
       font-family: 'Roboto', sans-serif;
}

.card-body .login-button:hover {
       background-color: var(--pallete1);
       font-family: 'Roboto', sans-serif;
}

/* PASSWORD EYE TO SHOW */
.password-toggle {
       position: relative;
}

.password-toggle .toggle-icon {
       position: absolute;
       top: 50%;
       right: 10px;
       transform: translateY(-50%);
       cursor: pointer;
}