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

:root{
   --blue:#0099ff;
   --light-blue: rgba(0,190,255,.2);
   --ultra-light-blue: rgba(0,190,255,.15);
   --dark-blue:#004b7c;
   --orange: #ff5a00;
   --yellow: rgba(255,165,0,1);
   --light-orange: rgba(255,90,0,.2);
   --ultra-light-orange: rgba(255,90,0,.15);
   --red:#ff0000;
   --dark-red:#8d0d0d;
   --black: rgba(0,0,0,1);
   --white: rgba(255,255,255,1);
   --ultra-light-white: rgba(255,255,255,0.15);
   --light-white: rgba(255,255,255,0.25);
   --semi-white: rgba(255,255,255,0.35);
   --quarter-white: rgba(255,255,255,0.7);
   --light-bg:#eee;
   --box-shadow:0 5px 10px rgba(0,0,0,.1);
}

*{
   font-family: 'Poppins', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}

*::-webkit-scrollbar{
   width: 10px;
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: transparent;
}

.full-btn,
.full-delete-btn{
   width: 100%;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   display: block;
   text-align: center;
   cursor: pointer;
   font-size: 13px;
   margin-top: 10px;
}

.full-btn{
   background-color: var(--white);
   color: var(--black);
}

.full-btn:hover{
   background-color: var(--orange);
   color: var(--white);
}

.full-delete-btn{
   background-color: var(--ultra-light-white);
   color: var(--white);
}

.full-delete-btn:hover{
   background-color: var(--semi-white);
   color: var(--white);
}

.another-btn{
   width: 100%;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   display: block;
   text-align: center;
   cursor: pointer;
   font-size: 13px;
   margin-top: 15px;
   margin-bottom: 50px;
}

.another-btn{
   background-color: rgba(0,0,0,0);
}

.another-btn:hover{
   background-color: var(--ultra-light-white);
   color: var(--white);
}

.btn,
.delete-btn{
   width: 47%;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   display: inline-block;
   text-align: center;
   cursor: pointer;
   font-size: 13px;
   margin-top: 10px;
}

.btn{
   margin-right: 10px;
   background-color: var(--light-white);
}

.btn:hover{
   background-color: var(--semi-white);
}

.delete-btn{
   background-color: var(--light-white);
}

.delete-btn:hover{
   background-color: var(--semi-white);
}

.mini-btn{
   width: 27%;
   max-width: 117px;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   text-align: center;
   cursor: pointer;
   font-size: 9px;
   margin-top: 10px;
   float: right;
}

.mini-btn{
   margin-left: 10px;
   background-color: var(--light-white);
}

.mini-btn:hover{
   background-color: var(--semi-white);
}

.detailsbtn,
.detailsbg{
   width: 100%;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   display: inline-block;
   text-align: center;
   cursor: pointer;
   font-size: 13px;
   margin-top: 10px;
}

.detailsbtn{
   margin-right: 10px;
   background-color: var(--light-white);
}

.detailsbtn:hover{
   background-color: var(--semi-white);
}

.detailsbg{
   background-color: var(--light-white);
}

.message{
   margin:10px 0;
   width: 100%;
   border-radius: 20px;
   padding:10px;
   text-align: center;
   background-color: var(--ultra-light-blue);
   border: 1pt solid var(--light-blue);
   color:var(--white);
   font-size: 13px;
   margin-top: 20px;
}

.message2{
   margin:10px 0;
   width: 100%;
   border-radius: 20px;
   padding:10px;
   text-align: center;
   background-color: var(--ultra-light-blue);
   border: 1pt solid var(--light-blue);
   color:var(--white);
   font-size: 13px;
   margin-top: 50px;
}

::placeholder {
   color: var(--white);
   opacity: 1;
 }

.form-container{
   min-height: 100vh;
   background-color: rgba(0,0,0,0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}

.form-container form{
   padding:20px;
   background-color: rgba(0,0,0,0);
   text-align: center;
   width: 500px;
   border-radius: 5px;
}

.form-container form span{
   text-align: left;
   display: block;
   margin-top: 15px;
   margin-left: 15px;
   font-size: 11px;
   color:var(--white);
}

.form-container form .logo{
   width: 115px;
   margin-top: 10px;
   float: left;
}

.form-container form h3{
   margin-top: 80px;
   margin-bottom: 10px;
   font-size: 23px;
   color:var(--white);
}

.form-container form h2{
   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 18px;
   color:var(--white);
}

.form-container form .box{
   width: 100%;
   border-radius: 30px;
   padding:10px 15px;
   font-size: 13px;
   color:var(--white);
   margin:7px 0;
   background-color: var(--light-white);
}

.form-container form .box option{
   border-radius: 20px;
   font-size: 13px;
   color:var(--black);
   margin:7px 0;
   background-color: var(--quarter-white);
}

.form-container form p{
   margin-top: 15px;
   font-size: 13px;
   color:var(--white);
}

.form-container form p a{
   color:var(--orange);
}

.form-container form p a:hover{
   color: var(--yellow);
}

.fullpage{
   position: relative;
   height: 100%;
   width: 100%;
}

.bgimage{
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   filter: blur(20px); /* Apply the blur effect */
}

.container{
   min-height: 100vh;
   display: flex;
   justify-content: center;
   padding:20px;
   background-color: rgba(0,0,0,0.8);
}

.container .logo{
   width: 115px;
   margin-top: 10px;
   float: left;
}

.container .profile{
   padding:20px;
   background-color: rgba(255,255,255,0);
   text-align: center;
   justify-content: center;
   width: 100%;
   max-width: 400px;
   border-radius: 5px;
}

.container .profile .dp {
   width: 100%;
   height: 100%;
   max-width: 150px; /* To ensure it doesn't exceed 180px */
   max-height: 150px; /* To maintain aspect ratio */
   border-radius: 50%;
   object-fit: cover;
   margin-top: 20px;
   margin-bottom: 5px;
   margin-left: 25%; /* Center horizontally */
   margin-right: 25%; /* Center horizontally */
}

.container .profile .bloodg{
   width: 11%;
   max-width: 40px;
   margin-top: -35%;
   object-fit: cover;
   float: right;
}

.container .profile h3{
   margin:5px 0;
   font-size: 18px;
   color: rgba(255,255,255,1);
}

.container .profile p{
   margin-top: 20px;
   color:var(--white);
   font-size: 13px;
}

.container .profile h4{
   margin: 7px 0;
   color:var(--white);
   font-size: 13px;
   font-weight: normal;
}

.container .profile .scrollable-div {
   margin-top: 10px;
   margin-bottom: 5px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
}

.container .profile .scrollable-div .quicklinksicon {
   display: inline-block;
   width: 50px;
   height: 50px;
   margin: 7px;
}

.container .profile .details {
   width: 100%;
   border-radius: 30px;
   padding:10px 10px;
   color:var(--white);
   display: block;
   position: relative;
   cursor: pointer;
   font-size: 13px;
   margin-top: 0px;
   margin-bottom: 12px;
}

.container .profile .details {
   background-color: transparent;
}

.container .profile .details .icon {
   width: 20px;
   height: 20px;
   position: relative;
   margin-left: -275px;
   margin-top: 4px;
   margin-bottom: -4px;
   object-fit: cover;
}

.container .profile .details .value {
   width: 250px;
   position: absolute;
   margin-left: 10px;
   margin-top: 5px;
   margin-bottom: -4px;
   color:var(--white);
   text-align: left;
   font-size: 13px;
   font-weight: normal;
}

.container .profile .details .action {
   width: 20px;
   height: 20px;
   position: absolute;
   margin-left: 255px;
   margin-top: 4px;
   margin-bottom: -4px;
   object-fit: cover;
}

.container .profile .lrgdetails {
   width: 100%;
   height: 130px;
   border-radius: 20px;
   padding:10px 10px;
   color:var(--white);
   display: block;
   position: relative;
   justify-content: center;
   cursor: pointer;
   font-size: 11px;
   margin-top: 0px;
   margin-bottom: 12px;
}

.container .profile .lrgdetails {
   background-color: transparent;
}

.container .profile .lrgdetails .icon {
   width: 20px;
   height: 20px;
   position: relative;
   margin-left: -275px;
   margin-top: 4px;
   margin-bottom: -4px;
   object-fit: cover;
}

.container .profile .lrgdetails .value {
   width: 250px;
   position: absolute;
   margin-left: 10px;
   margin-top: 5px;
   margin-bottom: -4px;
   color:var(--white);
   text-align: left;
   font-size: 13px;
   font-weight: normal;
}

.container .profile .lrgdetails .action {
   width: 20px;
   height: 20px;
   position: absolute;
   margin-left: 255px;
   margin-top: 4px;
   margin-bottom: -4px;
   object-fit: cover;
}

.container .profile .lrgdetails2 {
   width: 100%;
   height: 260px;
   border-radius: 20px;
   padding:10px 10px;
   color:var(--white);
   display: block;
   position: relative;
   justify-content: center;
   cursor: pointer;
   margin-top: 0px;
   margin-bottom: 15px;
}

.container .profile .lrgdetails2 {
   background-color: var(--ultra-light-white);
}

.container .profile .lrgdetails2 .value2 {
   width: 85%;
   position: absolute;
   margin-top: 5px;
   margin-left: 4%;
   color:var(--white);
   text-align: center;
   font-size: 15px;
   font-weight: Bold;
}

.container .profile .lrgdetails2 .value {
   width: 85%;
   position: absolute;
   margin-left: 10px;
   margin-top: 35px;
   margin-bottom: -4px;
   color:var(--white);
   text-align: left;
   font-size: 13px;
   font-weight: normal;
}

.container .profile p a{
   color:var(--orange);
}

.container .profile p a:hover{
   color: var(--yellow);
}

.update-profile{
   min-height: 100vh;
   background-color: rgba(0,0,0,0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}

.update-profile form{
   padding:20px;
   background-color: rgba(0,0,0,0);
   text-align: center;
   width: 1100px;
   justify-content: center;
   border-radius: 5px;
}

.update-profile form .logo{
   width: 115px;
   margin-top: 10px;
   float: left;
}

.update-profile form h2{
   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 23px;
   color:transparent;
   display: flex;
}

.update-profile form h3{
   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 23px;
   color:var(--white);
}

.update-profile form .dp{
   height: 150px;
   width: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto;
   margin-top: 30px;
   margin-bottom: 20px;
}

.update-profile form .flex{
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   gap:15px;
}

.update-profile form .flex .inputBox{
   width: 32%;
}

.update-profile form .flex .inputBox span{
   text-align: left;
   display: block;
   margin-top: 15px;
   margin-left: 15px;
   font-size: 11px;
   color:var(--white);
}

.update-profile form .flex .inputBox option{
   border-radius: 20px;
   font-size: 13px;
   color:var(--black);
   margin:7px 0;
   background-color: var(--quarter-white);
}

.update-profile form .flex .inputBox .box{
   width: 100%;
   border-radius: 30px;
   background-color: var(--light-white);
   padding:10px 15px;
   font-size: 13px;
   color:var(--white);
   margin-top: 10px;
}

.update-profile form .flex .inputBox .boxbtn{
   width: 100%;
   border-radius: 30px;
   background-color: var(--white);
   padding:10px 15px;
   font-size: 13px;
   text-align: center;
   cursor: pointer;
   color:var(--black);
   margin-top: 10px;
}

.update-profile form .flex .inputBox .boxbtn:hover{
   background-color: var(--orange);
   color: var(--white);
}

@media (max-width:650px){
   .update-profile form .flex{
      flex-wrap: wrap;
      gap:0;
   }
   .update-profile form .flex .inputBox{
      width: 100%;
   }
}

.change-pass{
   min-height: 100vh;
   background-color: rgba(0,0,0,0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   padding:20px;
}

.change-pass form{
   padding:20px;
   background-color: rgba(255,255,255,0);
   text-align: center;
   width: 500px;
   justify-content: center;
   border-radius: 5px;
}

.change-pass form .logo{
   width: 115px;
   margin-top: 10px;
   float: left;
}

.change-pass form h3{
   margin-top: 80px;
   margin-bottom: 10px;
   font-size: 23px;
   color:var(--white);
}

.change-pass form .dp{
   height: 150px;
   width: 150px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

.change-pass form .flex{
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   gap:15px;
   width: 100%;
}

.change-pass form .flex .box{
   width: 100%;
   border-radius: 30px;
   background-color: var(--light-white);
   padding:10px 15px;
   font-size: 13px;
   color:var(--white);
   margin-top: 10px;
}

@media (max-width:650px){
   .change-pass form .flex{
      flex-wrap: wrap;
      gap:0;
      width: 100%;
   }
}