/* defaults */

    .hlm-alert-container, .hlm-alert-container *,
    .hlm-loader-wrapper, .hlm-loader-wrapper * {
        box-sizing: border-box;
    }
    
    .hlm-alert-container button {
        cursor: pointer;
        font-family: inherit;            
    }
    
    .hlm-alert-container button:focus {
        outline: none;
    }

/* end of defaults */

/* alert box */

    /* container */
    
    .hlm-alert-container {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #fff;
        background-color: rgba(241, 241, 241, 0.8);
        top: 0;
        left: 0;
        border-radius: 4px;
        z-index: 6;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;            
    }
    
    .hlm-alert-container.hlm-hide {
        display: none;
    }

/* end of container */

/* title */

    /* container */
    
        .hlm-alert-title-container {
            padding: 10px 16px 0;
        }
    
    /* end of container */
    
    .hlm-alert-title-container h3 {
        font-weight: 500;
        margin: 0;
        font-size: 11px;
        opacity: 0.4; 
        color: #23282d;
    }

/* end of title */

/* message */

    /* container */
    
        .hlm-alert-message-container {
            padding: 30px 30px 20px;
    
        }
    
    /* end of container */
    
    .hlm-alert-message-container p {
        margin: 0;
        font-size: 12px;
        line-height: 200%;
        color: #2F4255;             
    }

/* end of message */

/* button */

    /* container */
    
        .hlm-alert-button-container {
            padding: 0 30px 30px;
        }
    
    /* end of container */
    
    .hlm-alert-button {
        background-color: #fff;
        border: none;
        border-radius: 4px;
        box-shadow: 0 0 10px 5px rgb(0 0 0 / 4%);
        text-align: center;
        width: 100%;
        display: inline-block;
        padding: 15px 10px;
        color: #2F4255;
        font-weight: 600;
        font-size: 12px;
        transition: background-color 0.6s, color 0.6s, box-shadow 0.6s;
    }
    
    .hlm-alert-button:hover {
        background-color: #4484f4;
        color: #fff;
    }
        
    .hlm-alert-button.hlm-blue {
        background-color: #4484f4;
        color: #fff;            
    }
        
    .hlm-alert-button.hlm-blue:hover {
        background-color: #fff;
        color: #2F4255;
    }

/* end of button */

.hlm-alert {
    
    /*animation-name: hlm-animatetop;*/
    /*animation-duration: 0.4s;*/
    
    position: absolute;
    width: 350px;
    margin: auto;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 7%) 0px 1px 11px 0px;   
}

/* end of alert box */

/* loader */

    /* wrapper */

        .hlm-loader-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;            
        }

        .hlm-loader-wrapper.hlm-hide {
            display: none;
        }

    /* end of wrapper */

    /* container */

        .hlm-loader-container {
            width: 100px;
            position: relative;
            margin: auto;
            background-color: #d9d9d9;
            border-radius: 90px;
            overflow: hidden;
            height: 6px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);            
        }

    /* end of container */
    
    /* conditonal loader */
    
        .hlm-conditional-loader-container {
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
    /* end of conditional loader */
    
    /* circle loader */
    
        .hlm-circle-loader {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px #2175FF solid;
            border-left-color: transparent;            
        }
    
    /* end of circle loader */

    .hlm-loader {
        height: 100%;
        border-radius: 90px;
        background-color: #2175FF;
        width: 30px;        
    }

/* end of loader */

/* animations */

    /* animate top */

        @keyframes hlm-animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

    /* end of animate top */
    
    /* load */

        .hlm-load {
            position: relative;
            animation: hlm_load 1.5s linear infinite;
        }

        @keyframes hlm_load {
            0% {right: 30px}
            100% {right: -100%}
        }    

    /* end of load */    

/* end of animations */