/*-- Use For Custom Styling --*/

/* ===================================
Google font
====================================== */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,200,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Lato:100,200,400,500,600,700,800');


html {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #212121;
    background-color: #ffffff;
}

a {
    color: #424242;
}

a:hover, a:focus {
    color: #1565C0;
}

p {
    font-size: 14px;
    line-height: 1.5;
    color: #424242;
    text-align: justify;
}

ul {
    list-style: circle;
}

.text-primary {
    color: #1565C0 !important;
}

.text-black {
    color: #000000 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #212121;
}

.text-xl {
    font-size: 24px !important;
}

.text-l {
    font-size: 20px !important;
}

.text-medium {
    font-size: 16px !important;
}

.text-base {
    font-size: 14px !important;
}

.text-s {
    font-size: 12px !important;
}

.text-xs {
    font-size: 10px !important;
}

i.fa {
    font-size: 14px;
}

.page-wrapper {
    width: 100%;
    min-height: 480px;
    height: auto; 
    background: #FAFAFA;
}

/*===========================
	Header Rules
 ==========================*/
.header {
    width: 100%;
    background-color: #1565C0;
    border-bottom: 4px solid #DDAE11;
}


.header #top-img img {
    padding-left: 30px;
    height: 72px !important;
}

#content-header {
    margin: 0px;
    padding: 20px 0 0 10px;
}

#content-header h1 {
    font-size: 28px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    color: #FFFFFF !important
}

#content-header h3 {
    font-size: 28px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    color: #FFFFFF !important
}


/*==================================================

===================================================*/
.login-card {
    width: 100%;
    /* border-radius: 10px; */
    /* border-top: solid 5px #022859;
    border-bottom: solid 5px #1565c0; */
    /* -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0 0 2em #ccc;
    -webkit-box-shadow: 0 0 2em #ccc;
    box-shadow: 0 0 2em #ccc; */
}

.bg-login-card {
    width: 100%;
    background: #e0e0e0 url(../img/bg_hd_block.jpg) top repeat;
}

.bg-login-image {
    width: 100%;
    min-height: 360px;
    background: url("../img/LLM_building.png");
    background-position: center;
    background-size: cover;
}

/*btn colors */
.btn {
    border-radius: 0 !important;
    font-size: 13px;
    font-weight: 600;
}

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-primary {
    background: #1565C0;
    border-color: #1565C0;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #1565C0;
    border-color: #1565C0;
}

.btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn.btn-outline-primary {
    color: #1565C0;
    background-color: #FFFFFF;
    border: 1px solid #1565C0;
}

.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus, .btn.btn-outline-primary:active, .btn.btn-outline-primary.active {
    background: #1565C0;
    border: 1px solid #1565C0;
    color: #ffffff !important;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/*==================================================
Footer
===================================================*/
.footer {
    padding-top: .6rem;
    background-color: #FFFFFF;
    border-top: 5px solid goldenrod;
}

.footer span {
    font-size: 14px;
    color: #ffffff !important;
}

ul.header-social-icon li {
    display: inline;
    list-style-type: none;
    padding: 0 10px;
}

ul.header-social-icon li a {
    color: #1565C0;
    font-size: 1.4375em
}

/*==================================================
Form
===================================================*/
.form-group label {
    font-weight: 600;
    font-size: 13px;
    color: #616161;
}

.form-group span.red {
    color: red;
}

.form-group input[type=text], input[type=email], input[type=password], textarea {
    font-size: 13px;
}

/** background colors **/
.bg-primary {
    background-color: #022859 !important;
    color: #ffffff !important;
}

.bg-secondary {
    background-color: #1565c0;
    color: #ffffff;
}

.bg-success {
    background-color: #5cb85c;
    color: #ffffff;
}

.bg-yellow {
    background-color: #FCC649;
    color: #ffffff;
}

.bg-info {
    background-color: #5bc0de;
    color: #ffffff;
}

.bg-warning {
    background-color: #f0ad4e;
    color: #ffffff;
}

.bg-danger {
    background-color: #d9534f;
    color: #ffffff;
}

.bg-white {
    background-color: #ffffff;
}

.bg-grey {
    background-color: #eeeeee;
}

.bg-light-grey {
    background-color: #fafafa;
}