@charset "UTF-8";

/* CSS Document */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold
}
h3{    padding-top: 10px;}
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    color: #555;
    -webkit-font-smoothing: antialiased;
    background: url(/images/body-bg.jpg) repeat;
    background-attachment: fixed;
}
header h1{
	
    background-color: #4465f2;
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#da0202",endColorstr="#fcb045",GradientType=1);
    padding: 1rem 0.5rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0px 4px 100px 20px #fff;
}
.btn{
    background: linear-gradient(45deg, #B388EB, #8093F1);
    text-transform: uppercase;
    font-weight: bold;
    border: 0px;
    color: #000;

}

.msg{text-align: center;
    background-color: #28a745;
    padding: 25px;
    color: #fff;}
#lblmessagetop{ color: white;}	
.text-black{
    color:#000;
}
body.signin-page{
    height: 100vh;
}

#login .container #login-row #login-column #login-box {
    margin-top: 120px;
}
#login .container #login-row #login-column #login-box,
#register .container #register-row #register-column #register-box,
#datasheet .container #datasheet-row #datasheet-column #datasheet-box {
    margin-top: 2rem;
    max-width: 100%;
    border: 1px solid #ddd;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 30px 160px rgba(0, 0, 0, 0.25);
}

#login .container #login-row #login-column #login-box #login-form,
#register .container #register-row #register-column #register-box #register-form,
#datasheet .container #datasheet-row #datasheet-column #datasheet-box #datasheet-form   {
    padding: 20px;
}
#login label, #register label{
    margin-bottom: 0
}
.datasheet-page .form-group {
    margin-bottom: 1rem;
    background: #fff;
    padding: 1rem;
}
.datasheet-page .form-group p{
    margin-bottom: 0.5rem
}
.datasheet-page h6 {
    text-transform: capitalize;
    border-bottom: 1px solid #a2a2a2;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color:#d00906
}
.datasheet-page h4.inline-title {
    text-transform: capitalize;
    background: rgb(124,146,255);
background: -moz-linear-gradient(336deg, rgba(124,146,255,1) 0%, rgba(88,96,208,1) 52%, rgba(131,89,222,1) 100%);
background: -webkit-linear-gradient(336deg, rgba(124,146,255,1) 0%, rgba(88,96,208,1) 52%, rgba(131,89,222,1) 100%);
background: linear-gradient(336deg, rgba(124,146,255,1) 0%, rgba(88,96,208,1) 52%, rgba(131,89,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c92ff",endColorstr="#8359de",GradientType=1);
    color: #fff;
    text-align: center;
    padding: 0.25rem 0;
    margin-top: 1.5rem;
    margin-bottom: 0
}

.d-flex label{
    flex: 0 0 33%;
    margin-right: 0 !important;
    margin-bottom: 0.7rem
}
label{
    text-transform: capitalize;
    margin-bottom: 0.75rem;
}
/* Custom Checkbox */
.custom-checkbox label{position:relative;margin-top:0;line-height:15px;margin-right: 2rem;display: flex;}
.custom-checkbox label span{margin-left:20px;padding-left:7px;line-height:20px;text-align:left}
.custom-checkbox label span span{margin-left:0}
.custom-checkbox label span::before{font-family:'Font Awesome 5 Free'; content:"\f0c8";display:block;position:absolute;width:15px;height:15px;top:-2px;left:0;border:1px solid transparent;}
.custom-checkbox label span::after{display:block;position:absolute;width:15px;height:15px;top:-2px;left:0;line-height:20px;text-align:center}
.custom-checkbox label input[type="checkbox"]{opacity:0;z-index:-1;position:absolute}
.custom-checkbox label input[type="checkbox"]:checked + span::after{font-family:'Font Awesome 5 Free'; content:"\f14a";;border:1px solid transparent;font-weight: bold;color:green}

/* Custom Radio */
.custom-radio label{position:relative;margin-top:0;line-height:15px;margin-right: 2rem;display: flex}
.custom-radio label span{margin-left:20px;padding-left:7px;line-height:20px;text-align:left}
.custom-radio label span::before{font-family:'Font Awesome 5 Free'; content:'\f111';display:block;position:absolute;width:15px;height:15px;left:0;top: -2px;border:1px solid transparent;}
.custom-radio label span::after{display:block;position:absolute;width:15px;height:15px;left:0;top: -2px;text-align:center}
.custom-radio label input[type="radio"]{opacity:0;z-index:-1;position:absolute}
.custom-radio label input[type="radio"]:checked + span::after{font-family:'Font Awesome 5 Free'; content:"\f058";border:1px solid transparent;font-weight: bold;color: green}


/** MEDIA QUERIES **/

/* Custom, iPhone Retina */
@media only screen and (max-width : 1200px) {}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 992px) {
    body{
        font-size: 0.9rem
    }
    h1{
        font-size: 2rem
    }
    .d-flex label{
        flex: 0 0 50%;
        margin-bottom: 0.5rem
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    h1{
        font-size: 1.8rem
    }
    #login .container #login-row #login-column #login-box,
    #register .container #register-row #register-column #register-box,
    #datasheet .container #datasheet-row #datasheet-column #datasheet-box {
        margin-top: 1rem;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 576px) {
    body{
        font-size: 0.8rem
    }
    h1{
        font-size: 1.6rem
    }
    .d-flex label{
        flex: 0 0 100%;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 480px) {
    h1{
        font-size: 1.2rem
    }
}

/* Very Large Devices, Wide Screens */
@media only screen and (max-width : 320px) {}