.d-none
{
	display:none;
}

#message-box-ok{
     position: fixed;
    top: 50%;
    left: 50%;
    padding:5px;
    min-width:200px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--green);
    color: white;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    opacity: 0.7;
    z-index: 999999;
}

#message-box-error {
     position: fixed;
    top: 50%;
    left: 50%;
    padding:5px;
    min-width:200px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--red);
    color: white;
    text-align: center;
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    opacity: 0.7;
    z-index: 999999;
}

#message-box-ok.box-hidden , #message-box-error.box-hidden {
    display: none;
}

#message-box-ok.box-visible, #message-box-error.box-visible {
    display: block;
    animation: fadeInOut 4s;
}
.initial-hidden
{
	display:none;
    transition: transform 0.5s ease-in-out;
}
/* Form validation and more */
.error-border {
     border: 2px solid red;
 }
 
 input[type="checkbox"].error-border {
    outline: 2px solid red;
    outline-offset: 2px;
}

 .error-message {
     color: red;
     font-size: 12px;
 }
 
 .dateinput{
 min-width:0 !important;
 padding-right: 5px;
 padding-left:5px;
 margin-left:5px;
 margin-right:5px;
 }
 

        

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

      .loading {
             display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100%; /* Optional: to center it within the full viewport */
        }
      .loading .loading-text {
               /*padding: 20px;*/
  text-align: center;
        }

        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #000;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
 .iti-mobile .iti--container {
    z-index: 99999999999999999999999;
}