@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;

/* /cic_custom/static/src/scss/marketing_representative.scss */
 0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); *{box-sizing: border-box;}body{font-family: 'Poppins', 'Arial', 'sans-serif'; background-color: #E0E0E0; height: 100vh; padding: 20px;}input, select, button{font-family: 'Poppins', 'sans-serif';}.container{width: 100%; max-width: 400px; background-color: #FFFFFF; margin: 10px auto; padding: 20px; border-radius: 3px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); border-top: 10px solid #D02027; border-bottom: 6px solid #051D40;}form img{max-width: 210px; max-height: 70px;}form h1{color: #051D40; text-align: center;}.divider-box{width: 100%;}.divider{max-width: 49px; background-color: #051D40; opacity: 0.5; height: 2px; margin: 0 auto 15px;}.row form{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2rem;}.input-container{position: relative; margin: 7px 0; width: 300px; background: #FFFFFF;}input, select{width: 100%; padding: 9px 12px; background: white; color: #333333; border-radius: 4px; border: 1px solid #CCCCCC; transition: 0.4s; outline: none; position: relative;}input:focus, select:focus{border-color: #17A2B8; background: transparent;}input:not(:focus)::placeholder, select:not(:focus)::placeholder{color: #FFFFFF;}input[id='mobile']:not(:focus)::placeholder, select[id='mobile']:not(:focus)::placeholder{color: #333333;}input[type='file'] ~ label, select[type='file'] ~ label{z-index: 1; background: #FFFFFF; transform: translateX(-3px) translateY(-170%); transition: 0.3s; color: #17A2B8; font-size: 0.7em; padding: 0 5px;}input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:-webkit-autofill:valid{-webkit-transition-delay: 9999s; transition-delay: 9999s;}label{position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #333333; transition: transform 0.3s ease, font-size 0.3s ease; background: transparent; padding: 0 4px; pointer-events: none; font-size: 14.6px;}.input-container input:focus ~ label, .input-container input.filled ~ label, .input-container select:focus ~ label, .input-container select.filled ~ label{z-index: 1; background: #FFFFFF; transform: translateX(-3px) translateY(-150%); color: #17A2B8; font-size: 0.7em; padding: 0 5px; transition: transform 0.3s ease, font-size 0.3s ease, background-color 0.3s ease; border-radius: 4px;}.has-value:not(:focus) ~ label{z-index: 1; background: #FFFFFF; transform: translateX(-3px) translateY(-125%); transition: 0.3s; color: #17A2B8; font-size: 0.7em; padding: 0 5px 5px;}input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit--webkit-appearance: none; -moz-appearance: none; appearance: none;}input[type='number']{-moz--webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;}.pass-label{position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #333333; transition: transform 0.3s ease, font-size 0.3s ease; background: transparent; padding: 0 4px; pointer-events: none; font-size: 14.6px;}.toggle{position: absolute; top: 50%; right: 12px; transform: translateY(-50%); transition: 0.4s; cursor: pointer; font-size: 20px;}button{width: 250px; margin: 10px 0 0; padding: 10px 20px; background: #007BFF; color: white; border: none; border-radius: 4px; transition: 0.3s ease; cursor: pointer;}button:hover{background: #17A2B8; color: white;}@media (min-width: 1024px){.container{max-width: 900px; padding: 20px; margin-top: 10px;}.row form{display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px;}.row > form h1, .row > form img{display: block; width: 100%; text-align: center;}.firstrow{display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%;}.secondrow{display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%;}.input-container{position: relative; flex: 1 1 35%; margin-bottom: 15px; width: 100%;}input[id='dob']:not(:focus)::placeholder{color: #FFFFFF !important;}button{display: block;}}@media (max-width: 767px){.container{max-width: 100%; padding: 10px 20px; margin: 5px;}form h1{line-height: 1.5rem;}.firstrow, .secondrow{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100% !important;}.input-container{width: 100%;}input[type='password']{margin-bottom: 8px;}button{width: 100%;}}.backdrop{width: 100%; height: 100%; top: 0; left: 0; position: fixed; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; z-index: 1; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s ease;}.modal{max-width: 480px; width: 90%; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); padding: 25px 15px 20px; background-color: #ecf4fd; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; text-align: center; font-family: 'Poppins', 'sans-serif'; line-height: 1.2rem; outline: #333333 solid 1px; border: green solid 2px; border-radius: 4px; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;}.backdrop.visible{opacity: 1; visibility: visible;}.modal.visible{opacity: 1; visibility: visible;}h4{font-size: 1.5rem; line-height: 0.5;}.round-check{font-size: 50px; color: green; vertical-align: middle;}.loader{width: 30px; height: 30px; background-color: transparent; border: 2px solid #fff; border-radius: 50%; border-top: 5px solid #051D40; animation: spin 1s linear infinite;}@keyframes spin{100%{transform: rotate(360deg);}}