@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: var(--blue);
}

.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: 15px;
   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: 15px;
   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: 15px;
   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: 40%;
   border-radius: 30px;
   padding:10px 15px;
   color:var(--white);
   text-align: center;
   cursor: pointer;
   font-size: 10px;
   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: 15px;
   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: 15px;
   margin-top: 20px;
}

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

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

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

.form-container form span{
   text-align: center;
   display: block;
   margin-top: 5px;
   margin-bottom: 15px;
   font-size: 15px;
   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: 24px;
   color:var(--white);
}

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

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

.form-container from input[type=email],
.form-container from input[type=text],
.form-container from input[type=number],
.form-container from input[type=url],
.form-container from input[type=search],
.form-container from input[type=password] {
  display: block;
  margin: 0;
  padding: 0 1em 0;
  padding: 0.875em 1em 0;
  background-color: #f3fafd;
  border: solid 2px var(--white);
  border-radius: 4px;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 65px;
  font-size: 1.55em;
  color: #353538;
  font-weight: 600;
  font-family: inherit;
  transition: box-shadow 0.2s linear, border-color 0.25s ease-out;
}

.form-container from input[type=email]:focus,
.form-container from input[type=text]:focus,
.form-container from input[type=number]:focus,
.form-container from input[type=url]:focus,
.form-container from input[type=search]:focus,
.form-container from input[type=password]:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  border: solid 2px #4eb8dd;
}

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

.form-container form p{
   margin-top: 15px;
   font-size: 15px;
   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 */
}

.form-container form .svgContainer {
  position: relative;
  width: 170px;
  height: 170px;
  margin-top: 60px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  pointer-events: none;
}

.form-container form .svgContainer div {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  border-radius: 50%;
  padding-bottom: 100%;
}
.form-container form .svgContainer .mySVG {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.form-container form .svgContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: inherit;
  height: inherit;
  box-sizing: border-box;
  border: solid 2.5px transparent;
  border-radius: 50%;
}

.form-container from label {
  display: block;
  font-size: 15px;
  color: var(--white);
}

.form-container from #showPasswordToggle {
  display: block;
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 15px;
  color: var(--white);
  float: right;
}
.form-container from #showPasswordToggle input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.form-container from #showPasswordToggle .indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 13px;
  width: 13px;
  background-color: var(--white);
  border: solid 2px var(--white);
  border-radius: 5px;
}
.form-container from #showPasswordToggle .indicator:after {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.025em;
  width: 0.2em;
  height: 0.5em;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  visibility: hidden;
}
.form-container from #showPasswordToggle input:checked ~ .indicator:after {
  visibility: visible;
}
.form-container from #showPasswordToggle input:focus ~ .indicator,
.form-container from #showPasswordToggle input:hover ~ .indicator {
  border-color: var(--white);
}
.form-container from #showPasswordToggle input:disabled ~ .indicator {
  opacity: 0.25;
}
.form-container form #showPasswordToggle input:disabled ~ .indicator:after {
  visibility: hidden;
}