﻿
.head-logo img {
    height: 75px;
    padding: 10px;
}

.bg-block {
    /*background: #1d1d1d;*/
    background: #081864;
}

.error-alert {
    color: red;
    font-size: 14px;
}

.m-auto {
    margin: auto !important;
}

.bg_bx {
    padding: 20px;
    border: 0px solid #e4e6e7;
    box-shadow: 0 5px 20px 0 rgb(0 0 0 / 9%);
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border-radius: 10px;
    position: relative;
    background: #f7f9fa;
}
    .bg_bx .form-group {
        color: #000;
        margin-bottom: 15px;
    }

        .bg_bx .form-group .form-control {
            color: #000;
            background-color: #fff;
        }

            .bg_bx .form-group .form-control:read-only {
                color: #000;
                background-color: #e9ecef;
            }

.small-box p {
    font-size: 1.2rem;
}

.bg-gradient-yellow {
    background: #fd961a linear-gradient( 180deg,#ffe492,#fd961a) repeat-x !important;
    color: #1f2d3d;
}

.bg-gradient-red {
    background: #ff4667 linear-gradient( 180deg,#fff4bf,#ff4667) repeat-x !important;
    color: #1f2d3d;
}

.card-body {
    overflow: auto;
}

/*** Preloader ***/

#preloader {
    position: fixed;
    z-index: 1111111111111;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #1d1d1d;
}

    #preloader.preloader img.animation__shake {
        margin: 250px auto;
        display: block;
        text-align: center;
    }

#preloader-content {
    width: 263px;
    margin: 250px auto;
    display: block;
    text-align: center;
}

.register {
    padding: 3%;
    height: auto;
    min-height: 100vh;
}

.register-left {
    text-align: center;
    color: #000;
    margin-top: 4%;
}

    .register-left input {
        border: none;
        border-radius: 1.5rem;
        padding: 2%;
        width: 60%;
        background: #f8f9fa;
        font-weight: bold;
        color: #383d41;
        margin-top: 30%;
        margin-bottom: 3%;
        cursor: pointer;
    }

.register-right {
    /*background: #f8f9fa;*/
    /*background: #fd961a;*/ 
    background: #020c59;
    /*background: linear-gradient(to right, #f78ca0, #fe9a8b);*/
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
}

.register-left img {
    margin-top: 15%;
    margin-bottom: 5%;
    width: 200px;
    -webkit-animation: mover 2s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

.register-left p {
    font-weight: lighter;
    padding: 12%;
    margin-top: -9%;
}

.register .register-form {
    padding: 6% 6% 2% 6%;
    /*margin-top: 10%;*/
}

.btnRegister {
    float: right;
    margin-top: 10%;
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    /*background: #fff;*/
    /*background: rgba(253, 150, 26,.9);*/
    background: linear-gradient(to bottom, #9982ed 0%, #30e08e 100%);
    color: #fd961a;
    color: #fff;
    font-weight: 600;
    width: 50%;
    cursor: pointer;
}

.btnLogin {
    margin-top: 10%;
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    /*background: #fff;*/
    /*background: rgba(253, 150, 26,.9);*/
    background: linear-gradient(to bottom, #9982ed 0%, #30e08e 100%);
    color: #fd961a;
    color: #fff;
    font-weight: 600;
    width: 50%;
    cursor: pointer;
}

.btnRegister:hover {
    color: #fd961a;
    color: #fff;
}

.btnLogin:hover {
    color: #fd961a;
    color: #fff;
}

.register .nav-tabs {
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: 28%;
    float: right;
}

    .register .nav-tabs .nav-link {
        padding: 2%;
        height: 34px;
        font-weight: 600;
        color: #fff;
        border-top-right-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
    }

        .register .nav-tabs .nav-link:hover {
            border: none;
        }

        .register .nav-tabs .nav-link.active {
            width: 100px;
            color: #0062cc;
            border: 2px solid #0062cc;
            border-top-left-radius: 1.5rem;
            border-bottom-left-radius: 1.5rem;
        }

.register-left .register-heading {
    text-align: center;
    /*margin-top: 8%;*/
    /*margin-bottom: -15%;*/
    padding: 10px;
    color: #000;
}

.register-right .register-heading {
    text-align: center;
    /*margin-top: 8%;*/
    /*margin-bottom: -15%;*/
    padding: 10px;
    color: #fff;
}

.register-right p {
    color: #fff;
}

.register-right a {
    color: #000;
    color: #30e08e;
}

.register-right label {
    color: #fff;
}

.register-right small {
    color: #30e08e;
}

.error-alert {
    color: #ff0000;
}


/*------------Preloader image shake animation------------*/
.animation__shake {
    -webkit-animation: shake 1.5s;
    animation: shake 1.5s;
}

@keyframes shake {

    0% {
        -webkit-transform: translate(2px,1px) rotate(0);
        transform: translate(2px,1px) rotate(0);
    }

    10% {
        -webkit-transform: translate(-1px,-2px) rotate( -2deg );
        transform: translate(-1px,-2px) rotate( -2deg );
    }

    20% {
        -webkit-transform: translate(-3px,0) rotate( 3deg );
        transform: translate(-3px,0) rotate( 3deg );
    }

    30% {
        -webkit-transform: translate(0,2px) rotate(0);
        transform: translate(0,2px) rotate(0);
    }

    40% {
        -webkit-transform: translate(1px,-1px) rotate( 1deg );
        transform: translate(1px,-1px) rotate( 1deg );
    }

    50% {
        -webkit-transform: translate(-1px,2px) rotate( -1deg );
        transform: translate(-1px,2px) rotate( -1deg );
    }

    60% {
        -webkit-transform: translate(-3px,1px) rotate(0);
        transform: translate(-3px,1px) rotate(0);
    }

    70% {
        -webkit-transform: translate(2px,1px) rotate( -2deg );
        transform: translate(2px,1px) rotate( -2deg );
    }

    80% {
        -webkit-transform: translate(-1px,-1px) rotate( 4deg );
        transform: translate(-1px,-1px) rotate( 4deg );
    }

    90% {
        -webkit-transform: translate(2px,2px) rotate(0);
        transform: translate(2px,2px) rotate(0);
    }

    100% {
        -webkit-transform: translate(1px,-2px) rotate( -1deg );
        transform: translate(1px,-2px) rotate( -1deg );
    }
}
