body {font-weight: 400; }
/* body {font-family: 'Nunito', sans-serif;font-weight: 400; } */
strong, b {font-weight: 800;}
::selection {background-color: var(--gray)}
h1,h2,h3,h4,h5,h6,p,label,td{color:var(--theme);}
.form-select, .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select{border-radius: 10px!important;}
select, textarea, input[type=text], input[type=tel], input[type=number] , input[type=email] , input[type=password] , input[type=date] {border:1px solid var(--theme)!important; border-radius: 10px!important}
select:focus, textarea:focus, input[type=text]:focus, input[type=tel]:focus, input[type=number]:focus , input[type=email]:focus , input[type=date]:focus , input[type=password]:focus {border-color:var(--theme)!important;box-shadow: 0.01em 0.01em 3px var(--theme)!important;}
.form-check-input:checked{background-color:var(--theme); border-color: var(--theme);}
label{padding-bottom: 2px;}
::placeholder{color:#b8b8b8 !important;}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.disabled, .btn-primary:disabled, .btn-primary:active {background-color: var(--theme) !important; border-color: var(--theme) !important; color: var(--background) !important; border-radius: 10px !important;}
/* .btn-primary:hover, .btn-primary:focus, .btn-primary:active {box-shadow: 0.2em 0.2em 10px var(--gray) !important;} */
li, input[type="email"],input[type="tel"], input[type="password"], input[type="date"], input[type="number"], input[type="text"], ::selection, input[type="text"]::selection, .input-group-text {color: var(--theme) !important;}
.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {color:var(--theme)}
.label-float,.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{color:var(--gray);}
.detail .row{margin-top: 70px;}
.btn-link{color: gray;}
.btn-link:hover{color: gray;}
.direction_rtl{direction: rtl;}
.verification_input{letter-spacing: 0.5em;}
.detail p {font-size: 14px !important; color: var(--theme); color: var(--gray); text-align: left;}
.detail img {border-radius: 5px; width: 100%; margin:auto; box-shadow: 0px 0px 10px -6px gray;}
.grey{color: var(--gray);}
.btn-link.register_button_active{color:black !important; font-weight: bold;}
.register-img {margin: auto; width: 25%;}
.fade-enter-active{transition: opacity 0.5s ease;}
.fade-enter-from, .fade-leave-to {opacity: 0;}
.migrant-link-in-md{display: none}
.badge-lan{border: 1px solid lightgray; color: #a8a8a8; margin: 2px; cursor: pointer;}
.footer{background-color: var(--theme); color: var(--front); font-size: 14px; width: 100%;}
.footer a{color: lightblue;}
.footer div{padding: 10px;}
.toast-header, .toast-body{background-color: var(--theme); color: lightgrey;}
.toast-body{border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.country_codes_select_option{padding: 0px 10px; border-radius: 10px 1px 1px 10px !important;}
.dropdown-menu {max-height: 200px; overflow-y: auto; width: 100%; overflow-x: hidden; }
@media (min-width: 768px) {
    .migrant-link-in-md{display: block;}
    .register-img{display: block; width: 25%; margin:auto;}
    .register-button-div button{display: block; margin: auto;}
}
@media (min-width: 600px) {
    .detail p {font-size: 18px !important;}
    .badge-lan{margin: 3px;}
}


/* Parent container styling (optional) */
#html_lans {
    display: flex;
    flex-wrap: wrap;
    /* max-width: 600px; Adjust as needed */
  }
  
  /* Basic styling for each language badge (optional) */
  #html_lans span {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    /* background-color: #eee; */
    border-radius: 4px;
    cursor: pointer; /* since they're clickable */
  }
  
  /* 
    Define several keyframes, each moving the badge either slightly 
    left or right with varying durations. 
  */
  
  @keyframes wave1 {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
  }
  
  @keyframes wave2 {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }
  
  @keyframes wave3 {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(5px); }
    100% { transform: translateX(0); }
  }
  
  @keyframes wave4 {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  
  /* 
    Assign each nth-child badge to a different wave animation. 
    This creates a pseudo-random effect as each one 
    wiggles in a slightly different way. 
  */
  
  #html_lans span:nth-child(4n + 1) {
    animation: wave1 6s ease-in-out infinite alternate;
  }
  #html_lans span:nth-child(4n + 2) {
    animation: wave2 5s ease-in-out infinite alternate;
  }
  #html_lans span:nth-child(4n + 3) {
    animation: wave3 8s ease-in-out infinite alternate;
  }
  #html_lans span:nth-child(4n + 4) {
    animation: wave4 4s ease-in-out infinite alternate;
  }