@font-face { font-family: 'SantanderText'; src: url('../fonts/SantanderText-Regular.bf509714.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SantanderMicroText'; src: url('../fonts/SantanderMicroTextW05-Rg.23bf5fda.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SantanderMicroText'; src: url('../fonts/SantanderMicroTextW05-Rg.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SantanderMicroText'; src: url('../fonts/SantanderMicroTextW05-Bold.025b01e5.woff') format('woff'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'SantanderMicroText'; src: url('../fonts/SantanderMicroTextW05-Bold.woff') format('woff'); font-weight: bold; font-style: normal; }

:root {
    --theme-color-1: #9e3667;
    --theme-color-2: #cedee7;
    --white: #FFFFFF;
    --black: #000000;
}

a {color: var(--theme-color-1);}
a:hover {text-decoration: none;}
body {font-family: SantanderMicroText; font-size: 15px; box-sizing: border-box;}
header {height: 100px; border-top: solid 5px var(--theme-color-1); border-bottom: solid 4px var(--theme-color-2);    box-shadow: 0px 2px 15px #deedf2; padding-left: 25px; display: flex; align-items: center; justify-content: start; gap: 15px;}
header p {margin: 0px; padding: 0px; font-size: 21px; color: #444444; font-weight: 600;}

section.sign-in-wrapper {padding: 60px;}
section.sign-in-wrapper p.sign-in-title {font-size: 32px; color: #444444; font-weight: bold;}
section.sign-in-wrapper p.sign-in-text {font-size: 12px; color: #767676;}


section.sign-in-wrapper div.sign-in-form div.form-input-wrapper { margin: 23px 0px;}
section.sign-in-wrapper div.sign-in-form div.form-input { min-width: 0px; padding: 0px; vertical-align: top; border: 1px solid rgb(222, 237, 242); border-radius: 6px 6px 0px 0px; background: rgb(255, 255, 255); position: relative; }
section.sign-in-wrapper div.sign-in-form div.form-input label { position: absolute; left: 10px; top: 14px; font-size: 15px; color: #818181; pointer-events: none; transition: 0.25s ease; }
section.sign-in-wrapper div.sign-in-form div.form-input svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
section.sign-in-wrapper div.sign-in-form div.form-input input { width: 100%; border: none; border-bottom: solid 1px var(--theme-color-1); outline: none; padding: 16px 10px 10px 10px; background: linear-gradient(var(--theme-color-1), var(--theme-color-1)) no-repeat center bottom; background-size: 0 2px; transition: background-size 0.3s ease; }
section.sign-in-wrapper div.sign-in-form div.form-input input:focus { background-size: 100% 2px; }
section.sign-in-wrapper div.sign-in-form div.form-input input:focus + label, 
section.sign-in-wrapper div.sign-in-form div.form-input input:not(:placeholder-shown) + label { top: 1px; font-size: 12px; color: var(--theme-color-1); }
section.sign-in-wrapper div.sign-in-form div.form-input small {font-size: 11px; color: #444; display: none;}
section.sign-in-wrapper div.sign-in-form div.forgot-password { color: var(--theme-color-1); font-size: 14px; font-weight: 600;}
section.sign-in-wrapper div.sign-in-form button {margin-top: 20px; background-color: var(--theme-color-1); color: var(--white); width: 100%; padding: 12px 8px; text-align: center; border: none; outline: none; border-radius: 4px;}
section.sign-in-wrapper div.sign-in-form div.form-link {margin-top: 20px; padding-bottom: 15px; border-bottom: solid 1px #EEE; text-align: center; color: var(--theme-color-1); font-size: 14px; font-weight: 600;}
section.sign-in-wrapper div.sign-in-form div.sign-up-area {margin-top: 20px;}
section.sign-in-wrapper div.sign-in-form div.sign-up-area p.title {font-size: 13px; margin: 0px; padding: 0px; font-weight: 600; color: #444444;;}
section.sign-in-wrapper div.sign-in-form div.sign-up-area p.text {font-size: 12px; margin: 0px; padding: 0px; color: #767676; line-height: 15px;}
section.sign-in-wrapper div.sign-in-form div.sign-up-area a {display: block; margin-top: 20px; color: var(--theme-color-1);  width: 100%; padding: 12px 8px; text-align: center; border: solid 1px var(--theme-color-1); outline: none; border-radius: 4px;}

footer {background-color: #f9fcfd; padding: 50px 0px;}
footer div.footer-top h5 {color: #444444; font-size: 14px; font-weight: 600;}
footer div.footer-top p {font-size: 12px; color: #767676;}
footer div.footer-top a {color: var(--theme-color-1); font-weight: 600;}
footer div.footer-bottom {display: flex; justify-content: space-between; margin-top: 30px;}
footer div.footer-bottom ul {display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0px !important; padding: 0px !important;}
footer div.footer-bottom ul li a {font-size: 12px; color: var(--theme-color-1);}
footer div.footer-bottom ul li::marker {font-size: 8px;color: var(--theme-color-1);}
footer div.footer-bottom span {font-size: 12px; color: var(--theme-color-1);}

@media (max-width: 991px) {
    footer div.footer-bottom  {flex-direction: column; gap: 10px; align-items: center;}
    footer div.footer-bottom ul {display: block; text-align: center;}
    footer div.footer-bottom ul li {list-style: none; display: inline-block; margin: 0px 10px;}
}

div.alert-danger {background-color: var(--theme-color-1); color: var(--white); font-size: 13px;}

section.contract { padding: 60px;}
section.contract iframe { width: 100%; height: 80vh; border: none !important;}
section.contract a.user-agreement {display: inline-block; background-color: var(--theme-color-1); color: var(--white); padding: 12px; text-align: center; border: none; outline: none; border-radius: 4px;}