@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');


:root {
    --background-dark-primary: #1e2530;
    --background-dark-secondary: #fff;
    --color-white : rgba(255, 255, 255, 1);
    --color-black : rgb(20, 20, 20);

    --font-color-primary: #e7e7e7;
    --font-color-text-primary: #FCFDFF;
    --font-color-secondary: #b6b6b6;
    --font-color-icon-primary: #b6b6b6;

    /* LETTER SPACING BUTTON */
    --ls-h1: -1.5pt;
    --ls-h2: -0.5pt;
    --ls-h3: 0pt;
    --ls-h4: 0.25pt;
    --ls-h5: 0pt;
    --ls-h6: 0.15pt;
    --ls-btn-1-25 : 1.25pt;
    --ls-body-small: 0.25pt;
    --ls-body-medium: 0.5pt;

    /* FONT SIZE */
    --fs-small: 14px;
    --fs-medium: 16px;

    /* BUTTON PRIMARY COLOR */
    --btn-c-primary : #1278bd;

    /* FONT */
    --font-fam-secondary : 'Poppins', sans-serif;
}
html,body {
	min-height: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	content: '';
	clear: both;
	box-sizing: border-box;
    background-color: #11082b;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('../img/blurry-gradient-haikei.png');
    overflow: hidden;
}
.body {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
.wrapper {
	min-height: 100vh;
	height: 100vh;
}
/* .container-form {
     background-color: #666666;
} */
.login-container {
    padding: 24px;
    color: #ddd;
    border-radius: 12px;
	background-color: rgba(214, 167, 255, 0.05);
}
#metaanimals-logo {
    cursor: pointer;
}
div.input-container {
    border: 1px solid rgb(104, 103, 103);
    font-family: var(--font-fam-secondary);
    position: relative;
}
input.input-disabled {
    cursor: not-allowed;
}
.form-control {
    border-radius: 8px;
    border: none;
    background-color: rgba(0, 0, 0, 0.33);
    color: var(--font-color-primary);
}

.form-control:focus, .form-control:-internal-autofill-selected {
    outline: none;
    box-shadow: none;
    border-color: #9c41f7;
    background-color: rgba(0, 0, 0, 0.16);
    color: white;
}

.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #9c41f7;
}

.form-control:disabled, .form-control[readonly] {
    background-color: rgba(0, 0, 0, 0.33);
    opacity: 0.33;
}

textarea.form-control:hover {
    background-color: rgba(0, 0, 0, 0.33) !important;
    color: var(--font-color-primary);
}

textarea.form-control:active, textarea.form-control:focus {
    background-color: rgba(0, 0, 0, 0.33) !important;
    color: var(--font-color-primary);
    animation: mica-effect 0.2s cubic-bezier(0.22, 0.68, 0, 1.71);
}
span.show_pass {
    position: absolute;
    top: 7px;
    right: 11px;
    z-index: 1;
    color: #555;
}
span.show_pass:hover {
    cursor: pointer;
}
select.input-control {
    border: none;
    box-shadow: none;
    outline: none;
    font-family: var(--font-fam-secondary);
    font-size: 14px;
    letter-spacing: var(--ls-body-small);
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 1rem;
}
div.moaccount {
    font-family: var(--font-fam-secondary);
    color: #eee;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: var(--ls-body-small);
}
div.remandfpass {
    font-family: var(--font-fam-secondary);
    color: #eee;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: var(--ls-body-small);
}
a.forgot-pass {
    font-family: var(--font-fam-secondary);
    text-decoration: none;
    color: #eee;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: var(--ls-body-small);
}
button.login-btn {
    width: 100%;
    background-color: var(--btn-c-primary);
    border: 1px solid var(--btn-c-primary);
    color: #eee;
    padding: 0.6rem 0.6rem 0.6rem 0.6rem;
    font-family: var(--font-fam-secondary);
    letter-spacing: var(--ls-body-medium);
    font-size: var(--fs-small);
    font-weight: 500;
}
button.createaccount-btn {
    width: 100%;
    background-color: var(--background-dark-secondary);
    border: 1px solid var(--btn-c-primary);
    color: #eee;
    padding: 0.6rem 0.6rem 0.6rem 0.6rem;
    font-family: var(--font-fam-secondary);
    letter-spacing: var(--ls-body-medium);
    font-size: var(--fs-small);
    font-weight: 500;
}
div.createaccount-container {
    padding: 24px;
    color: #ddd;
    border-radius: 12px;
    background-color: rgba(214, 167, 255, 0.05);
    min-width: 95%;
    width: 95%;
}
div.prompt-img {
    font-size: 1.3rem;
}
div.prompt-text {
    font-size: 0.8rem;
    letter-spacing: 0.05;
    font-family: var(--font-fam-secondary);
}
div.prompt-closes {
    cursor: pointer;
}
p.text_descript {
    font-style: var(--font-fam-secondary);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-body-small);
}






button.registerpet-btn {
    width: 100%;
    background-color: var(--background-dark-secondary);
    border: 1px solid var(--btn-c-primary);
    color: var(--color-black);
    padding: 0.6rem 0.6rem 0.6rem 0.6rem;
    font-family: var(--font-fam-secondary);
    letter-spacing: var(--ls-body-medium);
    font-size: var(--fs-small);
    font-weight: 500;
}
div.registerpet-container {
    min-width: 95%;
    width: 95%;
    padding: 24px;
    color: #ddd;
    border-radius: 12px;
    background-color: rgba(214, 167, 255, 0.05);
}






.btn {
    border-radius: 24px;
    letter-spacing: 0.25px;
}
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
    box-shadow: none;
}
.btn .non-mica:focus {
    transition: none !important;
    transform: scale(1) !important;
}
.btn .non-mica:active {
    transform: scale(1) !important;
}
.btn:focus {
    transition: all 0.2s cubic-bezier(0.22, 0.68, 0, 1.71);
    transform: scale(0.9);
}
.btn:active {
    transform: scale(1.0);
}
/* .btn:active {
    transition: all 0.08s cubic-bezier(0.22, 0.68, 0, 1.71);
    transform: scale(1);
} */
.btn-primary {
    background-color: rgb(114 0 189 / 75%);
    border: 2px solid transparent;
    border-top: 1px solid rgb(135 135 135 / 25%);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: rgba(100, 1, 167, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgb(135 135 135 / 25%);
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: rgba(53, 0, 88, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgba(56, 19, 73, 0.5);
}
.btn-secondary {
    background-color: rgba(49, 44, 87, 0.5);
    border: 2px solid transparent;
    border-top: 1px solid rgba(88, 88, 88, 0.25);
    /* color: var(--font-color-family); */
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: rgba(49, 44, 87, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgba(88, 88, 88, 0.25);
}
.btn-secondary:disabled, .btn-secondary.disabled {
    background-color: rgba(49, 44, 87, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgba(49, 44, 87, 0.75);
}
.btn-ssm {
    border-radius: 8px;
    font-size: 11px;
    padding: 4px;
}

div.custom-alert {
	padding: 0.6rem 0.8rem 0.6rem 0.8rem;
	width: 100%;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
div.ca-warning {
	background-color: #ffa726;
	color: #000000;
}
div.ca-error {
	background-color: #b91400;
	color: #fafafa;
}
div.ca-success {
	background-color: #4caf50;
	color: #fafafa;
}
div.ca-secondary {
	background-color: #6c757d;
	color: #fafafa;
}


.header-registration {
	height: 75px;
}

@media (min-width: 1px) {
	.form-rowssss-l {
		padding-left: 0px;
	}
	.form-rowssss-r {
		padding-right: 0px;
	}
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {
    .login-container {
        min-width: 380px;
        width: 380px;
    }
    div.createaccount-container {
        min-width: 680px;
        width: 680px;
    }
    div.registerpet-container {
        min-width: 850px;
        width: 850px;
    }
}

@media (min-width: 992px) {
	.form-rowssss-l {
		padding-left: 10px;
	}
	.form-rowssss-r {
		padding-right: 10px;
	}
}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}

/* width */
::-webkit-scrollbar {
  width: 9px;

}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #686868;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
#loading-screen {
    position: absolute;
    top: 0px;
    min-width: 100%;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background-color: rgb(37, 37, 37);
    z-index: 999;
}
#loading-screen div div img {
    width: 100px;
}
#loading-screen div div p {
    color: white;
}

.ls-small-025 {
    letter-spacing: 0.25pt;
}
.fs-small-14px {
    font-size: 14px;
}
.ls-medium-05 {
    letter-spacing: 0.5pt;
}
.fs-medium-16px {
    font-size: 16px;
}

@keyframes mica-effect {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
    }

    50% {
        transform: scale(0.99);
        -webkit-transform: scale(0.99);
        -ms-transform: scale(0.99);
        -moz-transform: scale(0.99);
        -o-transform: scale(0.99);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
    }
}