.playfair-display-title{font-family:Playfair Display,serif;font-optical-sizing:auto;font-weight:700;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}html,body{height:100%}body{background:radial-gradient(circle closest-side at center,rgb(178,183,188) 10%,rgba(245,245,245,.8) 70%);background-size:200% 200%;animation:gradientAnimation 10s ease-in-out infinite;font-family:Sulphur Point,sans-serif;margin:auto;height:100vh;overflow-y:hidden}@keyframes gradientAnimation{0%{background-position:0% 0%}25%{background-position:50% 0%}50%{background-position:100% 50%}75%{background-position:50% 100%}to{background-position:0% 50%}}h1,h2,h3,h4,h5,h6,.font-heading{font-family:Playfair Display,serif;color:#000}header{background-color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 50px;box-shadow:0 2px 4px #0000001a}header img{width:150px;height:auto}header nav{display:flex;align-items:center}header nav ul{display:flex;gap:30px;list-style:none}header nav ul li{list-style:none}header a{color:#000;text-decoration:none;transition:all .3s ease-in;text-align:center}header a:hover{color:#fff;background-color:#122840;padding:10px;border-radius:10px;text-decoration:none}header nav .menu i{display:none;font-size:25px;color:#122840;cursor:pointer}header .login a{padding:5px;border-radius:10px;transition:all .3s ease-in;width:100px;text-align:center;display:inline-block;background-color:#122840;color:#fff}header .login a:hover{background-color:#c6ac6f;color:#fefefe;box-shadow:inset 0 10px 5px #c6ac6f}header .logo-court{display:none;width:60px;height:auto}header .active{margin-left:0}.welcome-section{padding-top:100px;display:flex;justify-content:center}.welcome-section .content-wrapper{display:flex;align-items:center;gap:30px;max-width:1200px;width:100%}.welcome-section .image-container{flex:1;display:flex;justify-content:center}.welcome-section .image-container img{max-width:100%;height:auto;border-top-right-radius:50px;border-bottom-left-radius:50px;box-shadow:0 4px 6px #0000001a}.welcome-section .text-container{flex:1;padding:20px}.welcome-section .text-container h1{font-family:Playfair Display,serif;color:#122840;margin-bottom:20px}.welcome-section .text-container p{font-family:Sulphur Point,sans-serif;color:#333;line-height:1.6}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006;padding-top:60px}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:80%}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.footer{background-color:#122840;color:#fff;padding:10px 0;text-align:center;position:fixed;width:100%;bottom:0}.footer .social-icons{margin-bottom:10px}.footer .social-icon{margin:0 5px;color:#fff;font-size:16px;transition:color .3s ease}.footer.social-icon:hover,.footer a:hover{color:#c6ac6f}.footer .copyright{font-size:14px}.footer a{text-decoration:none;color:#d2d2d2}.login-section{width:100%;height:100vh;display:flex;padding:15px;align-items:center;justify-content:center}.login-section .login-container{display:grid;grid-template-columns:50% auto}.login-section .login-welcome-bloc{text-align:center;padding:20px 40px;color:#fefefe;display:flex;flex-direction:column;justify-content:center;background-color:#122840}.login-section .login-welcome-bloc h4{color:#fefefe}.login-section .login-welcome-bloc h6{width:50px;margin:10px auto;border-radius:10px;border-bottom:6px solid #fefefe}.login-section .login-form{color:#fefefe;padding:80px 40px;background-color:#fefefe;box-shadow:0 0 10px #cbcaca34}.login-section .login-form h5{color:#122840;text-align:center;margin-bottom:20px;font-weight:700}.login-section .login-form form div{margin-top:7px}.login-section .login-form input,select{width:100%;border:none;outline:none;padding:10px 15px;border-radius:8px;transition:all .2s ease-in;background-color:#cfcece28;border-left:3px solid #122840}.login-section .login-form input:hover,select:hover{border-left:3px solid #c6ac6f}.login-section .login-form .login-create-account{display:flex;font-size:15px;gap:5px;margin-top:10px;color:#122840;align-items:center;-webkit-column-gap:5px}.login-section .login-form .login-create-account a{text-decoration:none;color:#122840;transition:all .3s ease-in}.login-section .login-form .login-create-account a:hover{color:#c6ac6f}.login-section .login-form h6{margin-top:25px}.login-section .login-form .form-scrolling{height:40vh;padding:10px;overflow-y:auto}.login-section .login-form .login-create-account i{font-size:25px}.login-section .login-form .profile-paragraph{color:#000}.login-section .login-form .file-input{color:#000;margin-top:-25px}.login-section .login-form .input-submit input{border:none;outline:none;width:100%;color:#fefefe;padding:10px 20px;margin-top:15px;border-radius:5px;font-weight:700;text-align:center;transition:all .5s ease-in;text-transform:uppercase;background-color:#122840}.login-section .login-form .input-submit input:hover{background-color:#c6ac6f}@media screen and (max-width: 800px){header{padding:10px 30px}header img{display:none}header .logo-court,header nav .menu .menu-icon{display:inline-block}header a:hover{color:#122840;background-color:#fefefe}header nav .menu .exit-icon{display:none}header nav ul{position:absolute;left:0;top:65px;width:100%;display:flex;text-align:center;padding:40px;margin-left:-100%;transition:all .4s ease-out;flex-direction:column;background-color:#122840}header nav ul li a{color:#fefefe}.welcome-section .content-wrapper{display:flex;flex-direction:column-reverse}.welcome-section .image-container{flex:1;display:flex;justify-content:flex-end}.welcome-section .image-container img{width:65%;display:flex;justify-content:flex-end}}@media screen and (max-width: 500px){.welcome-section .image-container img{width:85%}}@media screen and (max-width: 380px){.login-section .login-form{padding:80px 10px}.welcome-section{padding-top:20px;display:flex;justify-content:center}.welcome-section .image-container img{width:100%}.welcome-section .content-wrapper{gap:10px}}@media screen and (max-width: 700px){.login-section .login-container{grid-template-columns:auto}.login-section .login-welcome-bloc{padding:60px 20px}.login-section .login-form{padding:40px 20px}}aside .header{display:flex;justify-content:space-between;align-items:center}aside .header img{width:150px}aside .header div{text-align:right}aside h2{text-align:center}aside hr{border:1px solid black}aside .employee-info{margin-bottom:20px}aside .table-responsive{margin-top:20px}aside table{width:100%;border-collapse:collapse}aside table,aside th,aside td{border:1px solid black}aside th,aside td{padding:8px;text-align:left}aside .table-footer{font-weight:700;background-color:#f2f2f2}aside .gross-salary{background-color:#e0f7fa}aside .deductions{background-color:#ffebee}aside .number-col{width:5%}aside .description-col{width:30%}aside .amount-col{width:15%}@media print{.header{display:flex;justify-content:space-between;align-items:center}.header img{width:150px}.header div{text-align:right}h2{text-align:center}hr{border:1px solid black}.employee-info{margin-bottom:20px}.table-responsive{margin-top:20px}table{width:100%;border-collapse:collapse}table,th,td{border:1px solid black}th,td{padding:8px;text-align:left}.table-footer{font-weight:700;background-color:#f2f2f2}.gross-salary{background-color:#e0f7fa!important}.deductions{background-color:#ffebee!important}.number-col{width:5%}.description-col{width:30%}.amount-col{width:15%}}aside .page-break{page-break-before:always}.dependents-options{display:flex;gap:5px}.dependents-option{padding:5px 10px;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .3s,border-color .3s}.dependents-option:hover{background-color:#f0f0f0;border-color:#aaa}.dependents-option input[type=radio]{display:none}.dependents-option input[type=radio]:checked+.dependents-option{background-color:#122840;color:#fff;border-color:#122840}.rounded-circle{width:35px;height:35px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.modal{z-index:1090}.modal-backdrop{z-index:1040}