.theme-text
{
    color: var(--theme-clr) !important;
}
.theme-clr
{
    color: #5ce1e6 !important;
}
.theme-clr-2
{
    color: #05347e !important;
}

/*=============== Fonts ===================*/

.robot-fm
{
    font-family: monospace !important;
}
.fm-monospace
{
    font-family: monospace !important;
}

@font-face
{
    font-family: "HK Modular";
    src: url("/css/fonts/BOLDE.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.fm-hk-modular
{
    font-family: "HK Modular", sans-serif !important;
}

/*=============== colors ===================*/
.clr-primary
{
    color: #5ce1e6 !important;
}
.clr-lime
{
    color: #00ff00 !important;
}
.clr-yellow
{
    color: #ffff00 !important;
}
.clr-red
{
    color: #ff444f !important;
}

/*=============== background ===================*/
.bg-primary
{
    background: #5ce1e6 !important;
}
.bg-dark-azure
{
    background: var(--theme-bg-dark-azure) !important;
}
.bg-lime
{
    background: #00ff00 !important;
}
.bg-yellow
{
    background: #ffff00 !important;
}
.bg-red
{
    background: #ff444f !important;
}

.bg-gray-custom
{
    background: gray !important;
}
.bg-theme
{
    background-color: var(--theme-bg1) !important;
}
.bg-theme-2
{
    background-color: var(--theme-bg2) !important;
}
.btn-theme
{
    background-color: var(--theme-bg1) !important;
}
.btn-theme:hover
{
    opacity: 0.6;
}
/*======================= Buttons ========================*/
.btn-outline-theme-clr-main
{
    color: var(--theme-clr) !important;
    border-color: var(--theme-clr) !important;
}
.btn-theme-clr
{
    background: var(--theme-clr) !important;
    color: var(--theme-bg2) !important;
}

.error-message
{
    color: #ff444f;
    font-size: 12px;
    padding-left: 5px;
    margin-top: 4px;
    margin-bottom: -10px;
    font-family: monospace !important;
}
.strength-item
{
    color: #6c757d; /* Bootstrap's text-muted color */
}
.strength-item.text-success
{
    color: #5ce1e6 !important; /* Bootstrap's success color */
}

.custom-input
{
    background-color: transparent !important;
    color: var(--theme-clr) !important;
    border-color: var(--theme-clr) !important;
}
.pass-eye
{
    margin-top: 45px !important;
}

.custom-input::placeholder
{
    color: var(--theme-clr) !important;
    opacity: 0.5 !important;
}

#countryCode option
{
    padding: 5px 10px;
    background-repeat: no-repeat;
    background-position: left;
    text-indent: 30px;
}

#countryCode option[data-country="za"]
{
    background-image: url('https://flagcdn.com/w40/za.png'); /* South Africa flag */
}

#countryCode option[data-country="us"]
{
    background-image: url('https://flagcdn.com/w40/us.png'); /* USA flag */
}
#countryCode option
{
    padding: 5px 10px 5px 40px; /* Add padding for flag */
    background-size: 20px 20px; /* Adjust flag size */
}
.invalid-input-box
{
    border: 1px solid red !important;
}
#AppLoaderModal
{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
#AppLoaderSpinner
{
    width: 70px;
    height: 70px;
}
.custom-sm-select
{
    height: 35px !important;
    padding: 5px 33px 3px 10px !important;
}

.login-wrapper .bottom-footer
{
    position: absolute;
    bottom: 10px; /* adjust spacing from bottom */
    left: 0;
    right: 0;
    text-align: center;
}

#ApexAIImage
{
    width: 150px;
}

/* Define the wave animation */
@keyframes wave
{
    0%, 100%
    {
        opacity: 0.2;
    }

    50%
    {
        opacity: 1;
    }
}
/* Apply the animation to each circle with delays */
.wave-circle
{
    --bs-spinner-animation-speed: 0.9s !important; /* For spinner speed if needed */
    animation: wave 1s infinite ease-in-out;
    width: 14px;
    height: 14px;
}

#LoadingCircle1
{
    animation-delay: 0s;
    width: 8px;
    height: 8px;
}

#LoadingCircle2
{
    animation-delay: 0.2s;
    width: 10px;
    height: 10px;
}

#LoadingCircle3
{
    animation-delay: 0.4s;
    width: 11px;
    height: 11px;
}

#LoaderInnerModal
{
    width: 320px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--theme-bg1);
}

#AlertLoaderInnerModal
{
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--theme-bg1);
}

.btn-outline-info
{
    color: var(--theme-clr);
    border-color: var(--theme-clr);
}

@media screen and (max-width: 450px)
{
    #LoaderInnerModal
    {
       /* width: 270px;*/
    }
}


/* Nest Hub Max*/
@media screen and (max-width: 1280px) and (max-height: 800px)
{
}

/* iPad Pro */
@media screen and (max-width: 1024px) and (max-height: 1366px)
{
    
}

/* Nest Hub */
@media screen and (max-width: 1024px) and (max-height: 600px)
{
    
}

/* Surface Pro 7 */
@media screen and (max-width: 912px) and (max-height: 1368px)
{
    
}

/* iPad Air */
@media screen and (max-width: 820px) and (max-height: 1180px)
{
    
}

/* iPad Mini */
@media screen and (max-width: 768px) and (max-height: 1024px)
{
    
}

/* Surface Duo */
@media screen and (max-width: 540px) and (max-height:720px)
{
    
}

/* Mobile Phones Common */
@media screen and (max-width: 450px)
{
    .alert-modal-icon
    {
        font-size: 50px;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .footer-nav-area, .footer-nav
    {
        background: linear-gradient(90deg, #000000, #021232) !important;
    }
}

/* iPhone 14 Pro Max */
@media screen and (max-width: 430px) and (max-height:932px)
{
    .custom-form-group
    {
        margin-bottom: 20px !important;
    }
    .custom-container
    {
        width: 80% !important;
        max-width: 350px;
    }
}

/* iPhone XR */
@media screen and (max-width: 414px) and (max-height:896px)
{
    
}

/* Galazy A51/71 */
@media screen and (max-width: 412px) and (max-height:914px)
{
    
}

/* iPhone 12 Pro */
@media screen and (max-width: 390px) and (max-height:844px)
{
    
}

/* iPhone SE */
@media screen and (max-width: 375px) and (max-height: 667px)
{
    .custom-input
    {
        height: 30px !important;
    }
    .custom-form-group
    {
        margin-bottom: 20px !important;
    }
    .pass-eye
    {
        margin-top: 32px !important
    }
}

/* Samsung Galaxy S8+ */
@media screen and (max-width: 360px) and (max-height: 740px)
{

}

/* Galaxy Z Fold 5 */
@media screen and (max-width: 344px) and (max-height: 882px)
{
    
}