:root {
    --vh: 1;
    --scale: 100;
    --px-2: calc(2px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-5: calc(5px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-17: calc(17px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-26: calc(26px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-44: calc(44px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-68: calc(68px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-89: calc(89px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-115: calc(115px * var(--scale-keyboard) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-122: calc(122px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-136: calc(136px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-168: calc(168px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-225: calc(225px * var(--scale-keyboard) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-255: calc(255px * var(--scale) / 100);
    --px-260: calc(260px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-820: calc(820px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-988: calc(988px * var(--scale) / 100);
    --px-998: calc(998px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
    --shadow-1: 0px 0px 2px 0px rgb(196 196 196 / 30%),0px 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-5: 0px 4px 4px 0px rgba(60,64,67,0.3),0px 8px 12px 6px rgba(60,64,67,0.15);
    /**/
    --s-8: calc(8px * var(--scale) / 100) / calc(11px * var(--scale) / 100) "Muli", sans-serif;
    --s-10: calc(10px * var(--scale) / 100) / calc(13px * var(--scale) / 100) "Muli", sans-serif;
    --s-11: calc(11px * var(--scale) / 100) / calc(14px * var(--scale) / 100) "Muli", sans-serif;
    --s-12: calc(12px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Muli", sans-serif;
    --s-13: calc(13px * var(--scale) / 100) / calc(16px * var(--scale) / 100) "Muli", sans-serif;
    --s-14: calc(14px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Muli", sans-serif;
    --s-15: calc(15px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Muli", sans-serif;
    --s-16: calc(16px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Muli", sans-serif;
    --s-17: calc(17px * var(--scale) / 100) / calc(20px * var(--scale) / 100) "Muli", sans-serif;
    --s-18: calc(18px * var(--scale) / 100) / calc(22px * var(--scale) / 100) "Muli", sans-serif;
    --s-19: calc(19px * var(--scale) / 100) / calc(23px * var(--scale) / 100) "Muli", sans-serif;
    --s-20: calc(20px * var(--scale) / 100) / calc(24px * var(--scale) / 100) "Muli", sans-serif;
    --s-22: calc(22px * var(--scale) / 100) / calc(27px * var(--scale) / 100) "Muli", sans-serif;
    --s-24: calc(24px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Muli", sans-serif;
    --s-25: calc(25px * var(--scale) / 100) / calc(30px * var(--scale) / 100) "Muli", sans-serif;
    --s-26: calc(26px * var(--scale) / 100) / calc(32px * var(--scale) / 100) "Muli", sans-serif;
    --s-28: calc(28px * var(--scale) / 100) / calc(34px * var(--scale) / 100) "Muli", sans-serif;
    --s-30: calc(30px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Muli", sans-serif;
    --s-32: calc(32px * var(--scale) / 100) / calc(39px * var(--scale) / 100) "Muli", sans-serif;
    --s-45: calc(45px * var(--scale) / 100) / calc(55px * var(--scale) / 100) "Muli", sans-serif;
    --s-50: calc(50px * var(--scale) / 100) / calc(61px * var(--scale) / 100) "Muli", sans-serif;
    --s-54: calc(54px * var(--scale) / 100) / calc(66px * var(--scale) / 100) "Muli", sans-serif;
    --s-80: calc(80px * var(--scale) / 100) / calc(98px * var(--scale) / 100) "Muli", sans-serif;
    --s-color: #FF843F;
    --s-color-o: #FFE4D6;
    --left-angle: 60%;
}

div,
p,
span,
a,
b,
button,
input,
h1, h2, h3, h4, h5, h6 {
    font-family: "Muli", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.container.body-content {
    padding: 0
}

.login-page {
    position: relative;
    background: rgb(255,203,130);
    background: linear-gradient(90deg, rgba(255,203,130,1) 0%, rgba(254,131,91,1) 50%);
}

.navbar, nav, footer {
    display: none !important;
}

.container {
    width: 100vw;
    height: 100vh;
    max-width: unset;
    max-height: unset;
    overflow: hidden;
}

.login-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    max-width: 580px;
    border-radius: 12px;
}

.panel.panel-default {
    width: 80%;
    max-width: 460px;
    min-width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0,0,0, 0.4);
    padding: 2rem;
    border-radius: 16px;
    color: whitesmoke;
}

.page-header span, label, input {
    font-size: 1.1rem;
}

.password-container {
    position: relative;
}

    .password-container .toggle-password {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 36px;
        width: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #555555
    }


.footer {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

    .footer span {
        font-size: 14px;
        color: whitesmoke;
    }

.banner {
    background-color: whitesmoke;
}

    .banner img {
        width: 100%;
        height: 100%;
    }

/* REFACTER*/
body {
    padding: 0;
    overflow: hidden;
}

.form-login-store {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: end;
    flex-direction: column;
    justify-content: center;
    padding: var(--px-20) var(--px-100);
}

.form-back-bg {
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: var(--px-20);
    align-items: center;
    border-radius: var(--px-20);
    min-width: var(--px-380);
    gap: var(--px-50);
}

.logo-ctn {
    position: absolute;
    top: var(--px-16);
    left: var(--px-16);
    display: flex;
    gap: var(--px-10);
    align-items: center;
}

    .logo-ctn img {
        background: #FFF;
        width: var(--px-68);
        height: var(--px-68);
        border-radius: var(--px-68);
    }

    .logo-ctn span.name {
        color: #FFF;
        font: normal normal 600 var(--s-45);
    }

.page-header {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

    .page-header h1 {
        font: normal normal 600 var(--s-32);
    }

    .page-header span {
        color: #979797;
        font: normal normal 500 var(--s-16);
    }

.panel-body {
    width: 100%;
}

    .panel-body input:not([type=checkbox]) {
        width: 100%;
        height: var(--px-44);
        border-radius: var(--px-8);
        border: 1px solid #EEEEEE;
        box-shadow: 0 2px 20px #d1d1d160;
    }

        .panel-body input:not([type=checkbox]):hover,
        .panel-body input:not([type=checkbox]):focus {
            border: 2px solid var(--s-color);
            box-shadow: 0 2px 20px var(--s-color-o);
        }
        
        .panel-body input:not([type=checkbox])::placeholder {
            color: #979797;
            font: normal normal 500 var(--s-13);
        }

    .panel-body label[for="RememberLogin"] {
        display: flex;
        gap: var(--px-10);
        align-items: center;
    }

    .panel-body strong {
        font: normal normal 500 var(--s-12);
    }

.btn {
    color: #FFF;
    border: unset;
    height: var(--px-50);
    background: var(--s-color);
    border-radius: var(--px-12);
    font: normal normal 600 var(--s-20);
}

.btn:hover {
    background: var(--s-color)!important;
    outline: 2px solid;
}

.login-page .angle {
    z-index: 1;
    width: 100vh;
    height: 100vh;
    background: #FFF;
    position: absolute;
    left: var(--left-angle);
    transform: rotate(45deg);
    border-radius: var(--px-12);
}

    .login-page .angle.angle-2 {
        background: #FFFFFF40;
        top: calc(var(--px-50) * -1);
        left: calc(var(--left-angle) + var(--px-10));
    }

.img-nail {
    position: absolute;
    left: var(--px-100);
    height: 100%;
    display: flex;
    align-items: center;
}

    .img-nail img {
        width: var(--px-600);
        height: var(--px-380);
    }