/* Typography */
body, table, tr, td, th, h1, h2, h3, h4, h5, h6, p, a, ol, ul, li, dl, blockquote, span, input, select, textarea, pre, sup{font-family:'Roboto', Arial, sans-serif; letter-spacing:normal; font-weight:normal;}
td, th, h1, h2, h3, h4, h5, h6, p, a, ol, ul, li, span{font-size:14px;}
a, a:visited, a:hover, a:link{text-decoration:none; color:#2876C5; cursor:pointer;}
.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{font-size:14px; text-align: center;  text-decoration: none;}

/* Buttons */
button, .btn{padding:10px; border:1px solid #2876C5; border-radius:3px; display:block; width:100%; background:#2876C5; color:#ffffff; cursor:pointer; font-size:14px; text-align:center;}
.btn-pri{background:#2876C5; color:#ffffff; font-weight:bold;}
.btn-pri:hover{background:#2672bd;}
.btn-sec{color:#2876C5; background:#ffffff;}
.btn-sec:hover{background:#f4f4f4;}
.btn-ter{color:#2876C5; background:#ffffff; border:1px solid #ffffff;}

/* 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;}
.alert{display:block; padding:10px; margin-bottom:5px; width:auto; max-width:none !important; border-radius:3px; font-family: helvetica;}
.alert td{vertical-align:middle; padding:0 !important;}
.alert-fail{background: #fff1ee; color: #df1515; font-family: helvetica;}
.alert-primary{background: #eef6ff; color: #2876C5; font-family: helvetica;}
.alert-pass{background: #E2F3DD; color: #187D04; font-family: helvetica;}