@import url('./fontawesome/index.css');
@import url('./themes.css');

/* Typography */
body, table, tr, td, th, h1, h2, h3, h4, h5, h6, p, a, ol, ul, li, dl, blockquote, input, select, textarea, pre{ 
    font-family:'Roboto', Arial, sans-serif;
    font-weight:normal;
}

body, table, tr, td, th, p, a, ol, ul, li, dl, blockquote, input, select, textarea, pre, span{ 
    font-size: 14px;
    text-decoration: none;
    color: var(--txt-10)
}

h1{ 
    font-size:18px;
    margin:0;
}

h2{ 
    font-size:16px;
    font-weight:bold;
    margin:0;
}

h2 span{ 
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

p{ 
    margin-bottom:0;
    color:var(--txt-10);
    margin-top:0;
}

/* Buttons */
button, .btn{
    padding: 10px; 
    border: 1px solid #2876C5; 
    border-radius: 5px; 
    display: block; 
    width: 100%; 
    background: #2876C5; 
    color:#ffffff; 
    cursor: pointer; 
    text-align:center;
}

.btn-pri{
    background:#2876C5; 
    color:#ffffff; 
    font-weight:bold;
}

.btn-sec{
    color:#2876C5; 
    background:#ffffff;
}

.btn-ter{
    color:#2876C5; 
    background:#ffffff; 
    border:1px solid #ffffff;
}

.btn:hover{
    opacity: 0.9;
}

/* Links */
a, a:visited, a:hover, a:link{
    text-decoration:none; 
    color:#2876C5; 
    cursor:pointer;
}

a:hover{
    opacity: 0.9;
}

.inside-link{
    text-decoration:none !important; 
    color:#2876C5 !important; 
    cursor:pointer;
}

.forgot-password{
    font-size:12px; 
    text-decoration:none; 
    margin:2px 0 10px;
}

.create-account{
    text-align: center; 
     text-decoration: none;
}

/* Layout */
body.login{ 
    width: 100%;  
    height: 100vh;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background-position: center;  
    right: 0;  
    background-size: cover;
    background: url("../images/LDD-RealtiWeb-BG.jpg");
}

.login-overlay{ 
    width: 100%;  
    height: 100vh;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background: url(../images/ldd-bg.png);  
    background-position: right;  
    background-size: cover;
}

.half{ 
    overflow: hidden;
    height: 100vh;
}

.left{ 
    float: left;
}

.right{ 
    float: right;
}

.clear{ 
    clear: both;
}

.login-container{ 
    width:300px; 
    background-color: #ffffff;  
    padding: 40px; 
    border-radius:3px;  
    box-shadow:#1a1a1a20 5px 5px 25px;  
    transform: translate(-50%, -50%);  
    top: 50%;  
    left: 50%;  
    position: absolute;
}

.login-wrapper{ 
    width: 380px;  
    border-radius: 3px;  
    transform: translate(-50%, -50%);  
    top: 50%;  
    left: 50%;  
    position: fixed;
}

.login-wrapper-wide{ 
    width: 780px;  
}

.login-form{ 
    width: 300px;  
    background: #ffffff;  
    padding: 40px; 
    border-radius: 3px;  
}

.login-banners{ 
    width: 380px;
}

.login-banners img{ 
    width: 100%;
    cursor:pointer;
}

.login-banners a{ 
    display: block;
}

.login-banners a + a{ 
    margin-top: 20px;
}

.shadow{ 
    box-shadow: 5px 5px 25px #272626;
}

.login-header{
    font-size:22px; 
    color: #2876C5; 
    font-weight: bold; 
    margin: 0px 0px 10px 0px; 
    float: none; 
}

.login-subheader{
    font-size: 11px; 
    color: #555555; 
    float: none; 
    margin: 10px 0px 5px 0px; 
}

.field-container{
    border: solid .5px #979797; 
    border-radius: 3px; 
    height: 40px; 
    margin-top: 15px;
}

.field-container.inactive{
    background-color: #E9E9E9;
}

.province-field-container{
    border: solid .5px #979797; 
    border-radius: 3px; 
    height: 40px; 
    margin: 15px 0px 15px 0px;
}

.login-field{
    border: 0; 
    width: 266px; 
    height: 25px; 
    float: none; 
    margin: -5px 0px 0px 5px; 
    font-size:14px; 
    color: #777777; 
    box-shadow: 0 0 0px 1000px white inset; 
}

.login-field.inactive{
    border: 0; 
    width: 266px; 
    height: 25px; 
    font-size: 16px; 
    float: none; 
    margin: -5px 0px 0px 5px; 
    font-size:14px; 
    color: #777777; 
    box-shadow: none !important;
}

.province-field{
    border: 0; 
    width: 266px; 
    height: 25px; 
    font-size: 16px; 
    float: none; 
    margin: -5px 0px 0px 5px; 
    font-size:14px; 
    color: #777777;
}

.login-field:focus{
    outline: none;
}

.login-field-title{
    margin-left: 1px; 
    padding: 0.1em 0.4em; 
    font-size:12px; 
    letter-spacing:0.5px; 
    color: #777777;
}

.login-background{
    background-position: center; 
    right: 0; 
    background-size: cover; 
    height: 100vh; 
    background-repeat: no-repeat;
}

/* Footer */
footer a{
    color:#ffffff !important; 
    font-size:12px; 
    padding-left:10px; 
    margin-left:10px; 
    border-left:1px solid #ffffff;
}

.copyright{
    bottom:30px; 
    width: 540px; 
    left:30px; 
    position: fixed; 
    color: #ffffff; 
    font-size: 9px; 
    display: flex;
}

.copyright p{
    display:inline-block; 
    margin:3px 0 0 10px; 
    font-size:12px;
}

.copyright img{
    margin:0 0 -5px; 
    height: 35px;
}

.disclaimer{
    bottom:40px; 
    width:40%; 
    right:30px; 
    position: absolute; 
    color: #ffffff; 
    font-size:12px; 
    text-align: right; 
}

.signup{
    font-size:11px; 
    color: #2876C5; 
    float: none; 
    margin: 10px 0px 5px 0px; 
    text-decoration: underline; 
}

.utilities{
    margin-top: 10px; 
    padding: 20px 10px 20px 10px; 
    border-radius: 3px; 
    background-color: #ffffff; 
    width: 360px; 
    position: absolute;
}
footer{
    text-align: left;
}

.loginheader{
    font-size: 18px;  
    color: #2876C5; 
    font-weight: bold; 
    margin: 0px 0px 10px 0px; 
    float: none;
}

/* Applications Screen */
.applist{
    background-color: #ffffff; 
    height: 42px; 
    margin: 2px 2px 2px 0px; 
    box-shadow: 2px 2px 4px rgba(112, 112, 112, 0.2);
}

.appname{
    width: 100%; 
    padding: 18px 0px 10px 5px; 
    justify-content: center; 
    vertical-align: middle; 
     font-weight: bold; 
    font-size: 12px; 
    color: #555555;
}

.provinces{
    padding: 18px 0px 10px 0px; 
    justify-content: left; 
    vertical-align: middle; 
     font-size: 11px; 
    color: #555555; 
    text-align: left; 
    cursor: pointer; 
    text-align: right;
}

.open-button{
    font-family:helvetica; 
    color: #174666; 
    border: 1.5px solid #174666; 
    border-radius:3px; 
    padding: 0px 25px 2px 25px; 
    margin: 20px 15px 120px 20px; 
    text-align: center; 
    cursor: pointer; 
    transition-duration: 0.3s; 
    font-size:10px; 
    float: right;
}

.open-button:hover{
    font-family:helvetica; 
    color: #ffffff; 
    border: 1.5px solid #174666; 
    border-radius: 8px; 
    padding: 0px 25px 2px 25px; 
    margin: 20px 15px 120px 20px; 
    text-align: center; 
    cursor: pointer; 
    background-color: #174666; 
    text-align: center;
}

.blog{
    background-color: #ffffff; 
    height: 164px; 
    padding-left: 15px; 
    margin: 5px 0px 0px 0px; 
    box-shadow: 2px 2px 4px rgba(112, 112, 112, 0.2);
}

.blog-content{
     font-size: 11px; 
    color: #404040; 
    width: 70%; 
    padding-left: 5px;
}

.blog-thumbnail{
    width: 109px;
}

.admin{
    background-color: #ffffff; 
    height: 42px; 
    box-shadow: 2px 2px 4px rgba(112, 112, 112, 0.2); 
    margin: 2px 0px 2px 5px;
}

.admin2{
    background-color: #ffffff; 
    height: 85.5px; 
    padding-left: 15px; 
    margin: 0px 0px 2px 5px; 
    box-shadow: 2px 2px 4px rgba(112, 112, 112, 0.2);
}

.admin3{
    background-color: #ffffff; 
    height: 172px; 
    padding-left: 15px; 
    margin: 0px 0px 2px 5px; 
    box-shadow: 2px 2px 4px rgba(112, 112, 112, 0.2);
}

.apps-body{
    background: url('images/squares.png'); 
    background-repeat: no-repeat; 
    background-size: 60%; 
    background-color: #f5f5f5;
}

.adminheader{
     font-size: 11px; 
    color: #2876C5; 
    font-weight: bold; 
    float: left; 
    padding: 20px 0px 20px 10px;
}

.blogheader{ 
    font-size: 13px; 
    color: #2876C5; 
    font-weight: bold; 
    margin: 20px 10px 10px 5px; 
    float: none;
}

.appcontent{
    padding-left: 5px;
}

.logintool{
    width:17px; 
    margin: 19px 20px 0px 0px; 
    cursor: pointer; 
    vertical-align: middle; 
    float: right;
}

.adminopxions{
    width: 50%; 
    padding: 13px 0px 13px 13px;
}

.admincontainer{
    display: flex; 
     font-size: 11px;
}

.adminsection{
    width: 40%; 
    display: flex; 
     font-size: 11px; 
    padding-bottom: 5px;
}

.admin-content-header{
    font-weight: bold; 
    color: #555555;margin-bottom: 5px; 
}

.usertool{
    width:17px; 
    cursor: pointer; 
    vertical-align:middle; 
    padding-right: 4px;
}

.admin-list {
    list-style: none; 
    padding: 0px 0px 0px 0px;
}

.admin-item {
    padding-bottom: 5px;
}

.dashboard-body{
    width: 632px; 
    margin: 0 auto;
}

.app-logo{
    width: 40px; 
    height: 40px; 
    margin: 8px;
}

.tool-text{
    padding:4px 2px 2px 0; 
    vertical-align:middle; 
    display:inline-block; 
    cursor:pointer; 
    color:#2876C5;
}

.clear{
    clear:both; 
    padding:0; 
    margin:0; 
    height:1px; 
    overflow:hidden;
}

.new-header{
    width:auto; 
    padding:0; 
    background:var(--clr-bg-tertiary); 
    border-bottom:1px solid var(--clr-bg-primary); 
    position:fixed; 
    top:0; 
    right:0; 
    left:0; 
    z-index:100; 
    height:55px; 
    vertical-align:middle; 
    min-width:1000px;
}

.new-header .logo{
    display:inline-block; 
    height:45px; 
    width:45px; 
    margin:5px; 
    text-align:center; 
    background:var(--clr-brand-primary); 
    position:relative; 
    border-radius:3px;
}

.tool-icon{
    width:22px; 
    margin-right:1px; 
    cursor:pointer; 
    vertical-align:middle;
}

/* Alerts */
.alert{
    position: relative;
    border-radius:3px; 
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid;
    border-left: 8px solid;
}

.alert td{
    vertical-align:middle; 
    padding:0 !important;
}

.alert-primary{
    background: #cce1eb;
    color: #00405c;
    border-color: #3388ad;
}

.alert-success,
.alert-pass{
    background: #d2eddb;
    color: #12632e;
    border-color: #4bb770;
}

.alert-warning{
    background: #fff3cd;
    color: #997404;
    border-color: #ffcd39;
}

.alert-danger,
.alert-fail{
    background: #fcd9d7;
    color: #8f2820;
    border-color: #f2695d;
}

.alert *:not(button),
.alert a,
.alert b,
.alert strong,
.alert div,
.alert label,
.alert span,
.alert small{
   color: inherit;
}

/* React Styling */
.container{ 
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.row{ 
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-0.5* var(--bs-gutter-x));
    margin-left: calc(-0.5* var(--bs-gutter-x));
}

.row > * { 
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-top: var(--bs-gutter-y);
}

.col{ 
    flex: 1 0;
}

.card { 
    margin: 0 auto 7px;
    position: relative;
    max-height: 100%;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0px 5px 25px #00000030;
}

.card-header{
    padding: 10px 10px 5px;
    height: 30px;
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
}

.card-body{ 
    padding: 15px;
}

.card-footer {
    padding: 10px 20px;
}

.form-label{ 
    font-size: 12px;
    color: white;
    margin-bottom: 5px;
    display: block;
    margin-top: 10px;
}

.form-control{ 
    border-radius: 5px;
    border: 1px solid white;
    padding: 10px;
    transition: all 0.3s;
    display: block;
    outline: none;
}