/****************************/
/* ORBIT site colours       */
/*                          */
/* DarkBlue        #000c25 - not in use */
/* DarkBlue        #0F1321  #50535A #000C27(from hub site) */
/* OrbitNavyBlue   #002169  */
/* OrbitLightBlue  #f1faff  */
/* OrbitViolet     #79308a  #87189d */
/* White           #fff     */
/* ExternalYellow  #f6be00  */
/* AccessOrange    #cc4518  */
/* AccentTeal      #00c0ca - from beattie dev site */
/*                          */
/****************************/

/*#region fonts*/
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../Generic_Styles/fonts/Roboto/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

.fab {
    font-family: "Font Awesome 5 Brands";
}


/*#endregion*/

/* #region generic styles*/
html, body, form {
    height: 100%;
    font-size:16px;
    color:#000C27;
    box-sizing: border-box;   
}
body{
    display: flex;
  flex-direction: column;
}

*,*:before,*:after {
  box-sizing: inherit;
}

#containerbox{
  margin: 0 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
 position:relative;
}

.container  {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

header {
  position: sticky;
  top: 0;
}
#main-content{
   clear: both;
   display: block;
   flex: 1 0 auto;
   margin: 170px auto 0 auto;
   padding: 1em;
}
.nonavbarabove{
    margin-top:-5em;
}

@media (max-width: 991px){
    #main-content {
        margin: 0px auto 0 auto;
    }
    .nonavbarabove{
     margin-top:0em;
    }
}

ul{
    list-style-type: none;
    font-weight: 300;
    /*margin-bottom: 20px;*/
}

h1 {
    color: #000C27;
    font-weight: bold;
    font-size: 2.25em;
    display: inline-block;
    margin: 0px;
    width: 100%;
}

h2 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    color: #000C27;
    font-weight: bold;
    font-size: 2em;
    line-height: 2em;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
}

a{
    text-decoration: none;
}

a:focus {outline: none!important;}
*:focus {outline: none;}
button:focus {outline:0;}

.horizontal-gradient h2{
    color:#FFF;
}

em{
    font-style: normal;
    font-weight: bold;
}
table{
    table-layout:unset;
    width: 100%;
}
#targettable, .rentChargesBreakdownTable{
    table-layout:unset;
}
#targettable td:before{
    display:block;
}

.horizontal-gradient{
    background-image: linear-gradient(to left, #87189d, #051B5B  );
}

.vertical-gradient{
    background-image: linear-gradient(to left, #87189d, #051B5B );
}


.no-text-wrap{
    white-space:nowrap;
    margin-bottom:0px;
}

.hard-coded-styling{
    display:none!important;
}

.row{
    width:100%;
}
#wrapper{
    height:100%;
}

select{
    font-family:"Roboto", Arial, Helvetica, sans-serif!important;
}
.content-after-wrapper{
    background-color:#f1faff;
    padding:2em;
}

.subtitle-color{
    color:#00c0ca;
    font-size:1.75em;
    padding-bottom:0.5em;
}

/* #endregion*/

/*#region ui overrides */
.ui-widget {
    font-size: 1rem !important;
}
.ui-widget-header{
    padding:0px;
}
.ui-widget-content {
    padding:0px;
    margin:0px;

}
.ui-widget-content p{
    margin:0px;
}

#ui-datepicker-div{
	background:white;
	padding:1em;
	border-radius:4px;
    width:230px;
    z-index:1111!important;
}
.ui-datepicker-next{
	float:right;
}
.ui-datepicker-title{
    margin:4px auto;
    text-align:center;
}
.ui-datepicker-month, .ui-datepicker-year{
    margin:7px;
    padding:4px;
}

/*#endregion*/

/*#region bootstrap & datatables overrides*/
.paginate_button.disabled {
    display: none !important;
}

.container-fluid
{
    margin-right: auto;
    margin-left: auto;
    max-width: 1272px;
    padding-left: 0px;
    padding-right: 0px;
}
.form-group label
{
    text-transform: uppercase;
    font-size: 15px;
}

.form-group input[type="text"], .form-group input[type="password"]
{
    border: solid 1px rgba(68, 78, 84, 0.15);
    height: 50px;
}

.form-group p
{
    margin-top:8px;
}

.col-md-6:first-child .col-md-12
{
    padding-left: 0px;
}

.col-md-6:last-child .col-md-12
{
    padding-right: 0px;
}

.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #f8f9fa;
}

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

.ml-auto{
    margin-left:0;
}
active.collapsing {
  transform: translateX(0%);
}

.btn-primary:not(:disabled):not(.disabled):active:focus{
    box-shadow: none;
}

table.dataTable.dtr-inline.collapsed tbody td:first-child a, table.dataTable.dtr-inline.collapsed tbody th:first-child a{
    padding-left:0px;
}



.smartphone_dataTables_filter input, .dataTables_filter input
{
    border: solid 1px  rgb(118, 118, 118)!important;
    padding: 0.3em 1em;
}
.search-bar{
    width:100%;
}
.search-bar:before{
    content:'Search';
    padding-right:0.2em;
    min-width:30px;
}

/*table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before {
   content: '\f152';
   font-family: 'Font Awesome\ 5 Free';
   cursor: pointer;
   font-size: 22px;
   color: #55a4be;
   background-color:transparent;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before {
  content: '\f150';
  color: black;
  background-color:transparent;
}*/


@media  (max-width: 768px){

    .dataTables_wrapper{
    font-size:0.95em;
}

}


/*#endregion*/

/*#region buttons or links that look like buttons*/
a.pageButton, 
.form-link,
a#SelfRegAltButton,
#switchProperty{
    color:#fff;
    border: none;
    border-radius:16px;
    white-space: nowrap;
    font-size: 1em;
    background-color:#002169;
    font-weight: bold; 
    padding: 8px 20px 8px 20px;
    font-size: 1em;
}

a.pageButton:hover, 
.form-link:hover ,
a#SelfRegAltButton:hover,
#switchProperty:hover{
    color:white;
    text-decoration: none;
    white-space: nowrap;
    font-size: 1em;
    background-color:#87189d;
}

a.pageButton:not(:disabled):not(.disabled):active, 
.form-link:not(:disabled):not(.disabled):active,
a#SelfRegAltButton:not(:disabled):not(.disabled):active,
#switchProperty:not(:disabled):not(.disabled):active,
#LoginPageLoginTable a:not(:disabled):not(.disabled):active{
    color:#40423d;
    text-decoration: none;
    border: none;
    white-space: nowrap;
    font-size: 1em;
    background-color:#d5d5d3;
}

a.pageButton:not(:disabled):not(.disabled):active:focus, 
.form-link:not(:disabled):not(.disabled):active:focus,
a#SelfRegAltButton:not(:disabled):not(.disabled):active:focus,
#LoginPageLoginTable a:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

.form-link{
    padding: 4px 20px 4px 20px;
}

.main-content input[type=submit],
button[type=submit],
button[type=submit]:hover,
button[type=submit]:not(:disabled):not(.disabled):active,
.EditContactDetailsPanel [type=button]:active,
.ConfirmContactDetailsPanel [type=button]:active {
    border: none;
    padding: 4px 20px 4px 20px;
    white-space: nowrap;
    font-size: 1em;
    color:#40423d;
    background-color:#d5d5d3;
}

button[type=submit]:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

input[type=submit],
.EditContactDetailsPanel [type=button],
.ConfirmContactDetailsPanel [type=button]{
    border: none;
    border-radius:16px;
    padding: 8px 20px 8px 20px;
    white-space: nowrap;
    font-size: 1em;
    font-weight:bold;
    color: white;
    background-color:#002169;
}



input[type=submit]:hover,
.EditContactDetailsPanel [type=button]:hover,
.ConfirmContactDetailsPanel [type=button]:hover {
    text-decoration: none;
    border: none;
    white-space: nowrap;
    font-size: 1em;
    background-color: #87189d;
}

.main-content input[type=text], .main-content input[type=password] {   
    padding: 0.5em;
}

.main-content button[type=button], 
.main-content input[type=button] {
    border: none;
    padding: 4px 20px 4px 20px;
    white-space: nowrap;
    font-size: 1em;
    color:#40423d;
    background-color:#d5d5d3;
}

.btn{
   border:none;
   box-shadow:none;
}

.btn-primary{
    color: white;
    border:none;
    border-radius: 16px;
    white-space: nowrap;
    font-size: 1em;
    background-color: #002169;
    margin-left: auto;
}

.btn-primary:hover, .btn-primary:active {
    color:white;
    text-decoration: none;
    border: none;
    white-space: nowrap;
    font-size: 1em;
    background-color:#87189d;

}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color:#40423d;
}

/*#endregion*/

/*#region page titles visible*/

.page-title,#pnlChargesBreakdownTitle, #pnlMethodsPaymentTitle {
    display:block!important;
    padding:0.5em;
    font-size:2em;
    color:#000C27;
    font-weight: bold;
    text-align: center;
    background:#00c0ca;
    color:white;
}
/*#endregion*/

/*#region back to top button */
#scroll {
    position:fixed;
    right:50%;
    margin-right: 0px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#87189d;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px;
    z-index:1001;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#87189d;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
#scroll{
    background-color:#d5d5d3;
}

/*#endregion*/

/*#region tops banners - cookies and alerts */
#AlertBanner{
    background-color: #f1faff;
    margin:0;
    color:#000C27;
    margin:0;
    clear: both;
    height: auto;
}
.alert-title{
    font-weight: 600;
}
.alert-text{
    color:#000C27;
}

.alert_content{
padding: 1em 1em 0.5em 1em;
}

.hide-notices {
    width: 70px;
    font-size: 0.8125em;
    text-align: center;
    white-space: nowrap;
}
/*#endregion*/

/* #region header*/

header{
    margin: 0px;
    padding: 0px;
    width: 100%;
    z-index: 9999;
    position:fixed;
}

#HeaderBar{
    padding:20px;
}
header.navbar{
    margin: 0px;
}

#TopNavWrapper{
    clear: both;
    background-color: #000C27;
    padding: 2.5em 1.25em;
    height: auto;
    display: block;
    margin: 0px;
    padding: 0px;
    /*position:relative;*/
    width: 100%;
}
#MainNav{
    clear: both;
    padding: 0 0em;
    height: auto;
    width: 100%;
}

#TopNavWrapper.navbar{
    margin: 0px;
    padding: 0px;
}

/*#region other links bar */
.other_links_wrapper {
    overflow: hidden;
    font-weight: normal;
    font-size: 0.9em;
    padding:0 0 0 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content:center;
    align-items:stretch;
}

.topheader-col-1{
    flex-basis: 20%;
    display: flex;
}
.topheader-col-2{
    flex-basis: 40%;
    display: flex;
    align-items:center;
    align-content:center;
    justify-content: center;
}
.topheader-col-3{
    flex-basis: 370px;
    display: flex;
    align-items:center;
    align-content:center;
    justify-content: center;
}

 #OrbitLogo{
    margin: 14px 0.3em 14px 1.0em;
    background: url(../../../App_Themes/Orbit/images/orbit-logo_white_177x55.png) no-repeat;
    background-size: 170px 55px;
    width: 170px;
    height: 55px;
    justify-content: flex-start;
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0;
}
#PortalMainTitle{
    color:white;
    font-size:2em;
    letter-spacing: 0.06em;
}
#HomeLink, #HomeLink:hover{
    color:white;
    text-decoration:none;
}

.top-links{
    display:flex;
    height:100%;
    align-items:stretch;
    background-color:#87189d;
    color:white;
    border-right: 1px solid #000C27;
    width:50%;
}

.top-links a {
    color: #000C27;
    color:white;
    text-decoration:none;
    padding: 2em 1em;
    display: block;
    width:100%;
    text-align: center;
}
.top-links a:hover, .top-links a:focus {
    color: #00c0ca;
    background:white;
}

/*#endregion*/

/*#region main menu bar */

#MainNav .navbar{
    /*min-height:85px;*/
    padding-top: 0px;
    padding-bottom: 0px;
    letter-spacing: 0.07em;
    font-weight:400;
    font-size: 0.9em;
}

#MainNavMenuList{
    height:100%;
    width:100%;
}
#MainNavMenuList{
    height:100%;
    width:100%;
    display: flex;
    align-items: stretch; 
    justify-content: space-between;
}

 #MainNavMenuList>li{    
     flex: 0 1 auto;
     display: block;
 }

 #MainNav li > a{
     height:100%;
     line-height:150%;
     word-wrap: normal;
    font-weight: 500;
     display: flex;
    align-items: center;
    justify-content: center;
    padding:1.5em 0.5em;
                   
 }
  #MainNav li:hover, #MainNav >li.dropdown:hover, #MainNav li:hover > a{
     color:#00c0ca!important;
     background:white;
 }
  #MainNav a{
    text-decoration: none;
}

.nav-link{
    line-height:0em;
    color:white!important;
}
.nav-item{
    color:white;
}

#MainNav a.nav-link:hover, #MainNav .dropdown.open{
    color: #00c0ca!important;
    background-color: #fff;
    
}


.dropdown:hover > .dropdown-menu.show {
    display: block;
    color:#00c0ca!important;
}

.dropdown-item{
   padding:0.8em 0.8em 0.3em 0.8em;
    color:#000C27;
    letter-spacing: 0;
}


.nav-item.a, .dropdown-menu.a{
    width: 100%;
    height: 1em;
    word-wrap: break-word;
    padding:1em 0.25em;
    
}
.dropdown-menu .dropdown-toggle{
 display:none;
}

.dropdown-toggle::after {
    display:none;
}

.dropdown-menu.show{
    padding:0.5em;
    margin:0px;
    font-size:1em;
    border-bottom: #00c0ca 4px solid;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-radius:0;
    min-width: 100%;
}
.dropdown-toggle::after{
	 vertical-align: 0.1em;
	 }

.nav-disabled{
    display:none;
}
.near-black-bg .nav-item{
    border-left: solid 1px white;
    line-height:0.1em;
}
.near-white-bg .nav-item{
    border-left: solid 1px #40423d;
    line-height:0.1em;
}

#NavigationBar li:first-child {
    border-left:none;
}

#NavigationBar  li:last-child {
    border-right:none;
}

.navbar-collapse.show .nav-item{
    border-left:none;
    padding: 0.5em;
}

/* Secure Message icon */

    #MobileSecureMessageLink{
        display:none!important;
    }
    #SecureMessageLinkLine{
        display:flex;
            padding-top: 0.3em;
    }

.message-roundel {
    /*position: absolute;*/
    /*display: block;
    top: 22%;
    right: 25px;*/
    width: 50px;
    height: 50px;
}

 .message-roundel a {
    background: #002169;
    color:white;
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0px;
    border: none;
}
 #MainNavMenuList i {
    margin: 14px 0px 0px 14px;
    font-size: 1.5em;
    font-size: 1.5em;
    text-align: center;
}
  .message-roundel small{
    font-size: 6px!important;
  }
  .message-roundel span{
       font-size: 11px!important;
       font-weight:400;
  }
 .message-roundel span span {
    background-color: #FFF;
    color: #000;
    border-radius: 50%;
    position: fixed;
    width: 25px;
    height: 25px;
    line-height: 1.1em;
    text-align: center;
    padding-top: 0.6em;
}

#NavigationBar ul.link-nav .logout
{
    display:none;
}


.navbar a.nav-link:hover
{
    text-decoration: underline;
}
ul.link-nav li{
    display: inline-block;
    padding: 0px;
    font-size: 1.2em;
    line-height:1em;
} 

ul.link-nav li a{
    text-align: center;
    display: inline-block;
    width: 100%;
}

.navbar-toggler{
    padding:0px;
    margin:0px 20px 0px 0px; 
    float:right;   
}

#MainNavMenuList .dropdown-item:active, #MainNavMenuList .dropdown-item:hover  {
    color: #00c0ca!important;
    text-decoration: none;
    background-color: white;
}

.active, .active a:first-child{
    text-decoration:underline;
}

#mainmenu a.lnkLogout {
    display:none;
}

.fa-bars{
    color:white;
    font-size: 2em;
}
/*#endregion*/

@media  (max-width: 991px) {

    /*top bar */
    #PortalMainTitle {
        display: none;
    }

    #OrbitLogo {
        /*margin: 0.4em 0.4em;*/
        background: url(../../../App_Themes/Orbit/images/orbit-logo_white_177x55.png) no-repeat;
        background-size: 100px 32px;
        width: 100px;
        height: 32px;
    }

    .topheader-col-3 {
        display:none!important;
    }

    .topheader-col-3 .top-links {
        display: none;
    }

    #__ba_launchpad {
        padding: 0.3em 0;
        margin-right: 4.5em;
    }

    #mobileBAbar #__ba_launchpad{
        margin:0;
    }

    /*main nav bar*/

    .navbar-toggler {
            margin-top: -52px;
    }

    .horizontal-gradient {
        background-color: #000C27;
        background-image: none;
        border-top: 1px solid #7F8594;
    }

    #MainNav {
        padding: 0em;
        width: 80%;
        width: 100%;
        float: left;
    }

    #MainNav .navbar {
        padding: 0em 0em;
        display: block !important;
        min-height: 0px;
        margin:0;
        max-width:100%;
	
    }
    .collapse.show{
        overflow-y: auto;
        max-height:300px;
    }
    #MainNav .active {
        background: #87189D;
        text-decoration: none;
    }

    .mobile-links {
        display: block !important;
        padding:0.4em 0 0.4em  1.8em;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    #mobileBAbar{
        padding:0.4em 0!important;
    }

    .mobile-links a {
        color: white;
        font-weight: 300;
    }

    #MobileSecureMessageLink {
        display: flex !important;
    }

    #SecureMessageLinkLine {
        display: none !important;
    }

.dropdown-toggle::after {
    display:inline-block;
}

    .message-roundel {
        position: relative;
        top: 0%;
    }

    .collapse {
        display: none !important;
    }

    .collapse.show {
        display: block !important;
    }

    .dropdown, .dropup {
        position: relative !important;
    }

    #navbarSupportedContent {
        height: 100%;
        width:100%;
    }

    .message-roundel {
        right: 0px;
    }

    #MainNavMenuList li {
        padding: 0em 0 0 0em;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    #MobileGetInvolvedLink {
        display: block !important;
    }

    #MainNav .nav-item a {
       padding:0.4em 0 0.4em  1.8em;
       width:100%;
       float:left;
       align-items:center;
       justify-content:flex-start;
       font-weight:normal;
    }

    .dropdown-menu.show {
    margin: 0px 0 0 -15px;
    padding:0 0 0 30px;
    font-size: 1em;
    min-width: 100%;
    background-color:#000C27;
    border:1px solid #000C27;

    }



    .dropdown-item{
    /*color:white;*/
    }

}

@media (max-height: 320px) {
    .collapse.show{
        max-height:240px;
    }
}



/*#endregion*/

/* #region footer*/


 footer{
    clear:both;   
    background-color: #000C27;
    padding: 15px 0 5px;
    height: auto; 
    flex-shrink: 0;  
    position: relative;
    z-index:100;
 }

 #footerWrapper{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between; 
 }

 footer .row{
     width:100%;
     margin:0;
     display:flex;
     justify-content:space-between;
 }
footer .footer-upper {
    padding: 0 0 70px 0;
    position: relative;
    border-bottom: 5px solid #C4D600;
}
 footer .footer-upper .footer-background {
    position: absolute;
    height: 55px;
    width: 207px;
    bottom: -10px;
    right: 28%;
}

 footer .footer-upper .footer-background:before {
    background-color: #191D23;
    content: '';
    left: 1px;
    height: 10px;
    position: absolute;
    bottom: 0px;
    width: calc(100% - 2px);
}

 footer .footer-upper .footer-background:after {
    background: url(../images/city-scape-yellow.png) no-repeat center center/100%;
    content: '';
    height: 100%;
    position: absolute;
    bottom: 4px;
    width: 100%;
}

 footer .footer-upper .footer-upper-wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    footer .footer-upper .footer-upper-wrap .footer-logos {
    display: inline-block;
    margin: 0 0 15px;
    width: 100%;
}
    footer .footer-logos {
    text-align: center;
}
    footer .footer-upper .footer-upper-wrap .footer-upper-nav .footer-nav {
    margin: 15px 0;
}
    footer .footer-nav ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
    footer .footer-nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

    footer .footer-nav ul li a {
    color: #E7E7E7;
    display: inline-block;
    font-size: 0.875em;
    padding: 5px;
    text-decoration: none;
}

#OrbitLogoFooter {
    background: url(../../../App_Themes/Orbit/images/orbit-logo_white_177x55.png) no-repeat;
    background-size: 177px 55px;
    width: 177px;
    height: 55px;
    justify-content: flex-start;
    display: inline-block;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}
 footer .social-media {
    display: block;
    text-align: center;
    margin: 15px 0 0;
}
 footer .social-media a {
    color: #25C3BF;
    display: inline-block;
    font-size: 1.3334em;
    padding: 0 10px;
}

 .fa-facebook:before {
    content: "\f09a";
}
 .fa-twitter:before {
    content: "\f099";
}
 .fa-youtube:before {
    content: "\f167";
}

 
    footer .footer-lower {
        margin: 15px 0 0;
        padding: 17px 0 0;
    }
    footer .footer-nav {
    margin: 0 0 15px;
    display:block;
}
    footer .copyright {
    font-size: 0.9375em;
    margin: 0 0 15px;
    text-align: center;
    font-weight:300;
    color: #e7e7e7;
}
/*footer media query*/
@media (min-width: 768px){
    footer{
        padding-bottom:0.5em;
        z-index:1000;
    }
    footer .footer-upper {
        padding: 0 0 15px;
    }
    footer .footer-upper .footer-upper-wrap .footer-upper-nav {
    display: inline-block;
    }


    .col-md-4 {
        width: 33.33333%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-8 {
    width: 66.66667%;
    }
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    }

    footer .footer-upper .footer-upper-wrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    }
    footer .footer-upper .footer-upper-wrap .footer-logos {
    display: inline-block;
    margin: 0 50px 0 0;
    width: auto;
    }
    footer .footer-logos {
    text-align: left;
    }
    footer .footer-upper .footer-upper-wrap .footer-upper-nav .footer-nav {
    margin: 15px 0;
    }
    footer .footer-nav ul li:first-child {
    margin-left: -13px;
    }
    footer .footer-nav ul li a {
    font-size: 0.9375em;
    }
    footer .social-media {
    display: block;
    text-align: right;
    }
    footer .social-media a {
    font-size: 1em;
    padding: 0 3px 10px;
    margin: 0 0 0 25px;
}

}

@media (min-width: 991px){
    footer .footer-nav {
    overflow: hidden;
}
    footer .footer-nav ul li {
        width: auto;
        float: left;
    }

    footer .footer-nav ul li a {
        line-height: 1em;
        padding: 0 10px 0 13px;
    }
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
}
    footer .footer-nav ul li:first-child {
    margin-left: -13px;
}
    footer .footer-nav ul li {
    width: auto;
    float: left;
}
    footer .copyright {
    color: #E7E7E7;
    text-align: right;
}
}

    /*#endregion*/

/*#region login / register*/

.loginBackgroundImage{
    background-image:url("../images/Login_background_2121x1414.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: fixed;
}

.LoginPagecontrolWrapper {
    width: 100%;
    display:flex;
    justify-content:space-around;
    flex-wrap: wrap;
}

#LoginWrapper{
    flex-basis:44%;
    flex-wrap:wrap;
    min-width:330px;
    padding:2em;
    margin: 0  0 1em 0;
    background-color: #f1faff;
    opacity: 0.8;
}

#SelfRegistrationWrapper{
    flex-basis:44%;
    flex-wrap:wrap;
    min-width:330px;
    padding:2em;
    margin: 0 0 1em 0;
    background-color: #f1faff;
    opacity: 0.8;
}
/*#SelfRegistrationWrapper h2{
    width:100%;
    height:auto;
    line-height: 1.5;
    padding-bottom:0.5em;
     margin:0px 0px 1em 0px;
}*/

.authentication
{
    margin:38px 24px 0px 24px;
    padding-top: 52px;
    padding-bottom: 52px;
    border-radius: 3px;
    background-color: #f1faff;
}

logoWrapper{
    width:100%;
    padding-bottom:1em;
}

/*.LoginPagecontrolWrapper .ui-widget-header {
    color: #40423d;
    font-weight:normal;
    font-size: 1.8em;
    line-height: 1.5;
    display: inline-block;
    margin:0px 0px 1em 0px;
    width:100%;
    height:auto;
    padding-bottom:0.5em;
}*/

#LoginPageLoginTable tbody tr td  {
  display:block;
  text-align:left;
}
#LoginPageLoginTable a{
    font-weight:400;
}

.login-links-password-td a {
    margin-bottom:1em;
    width:100%;
    clear:both;
    float:left;

}

#LoginPageLoginTable tbody tr td input[type=text] {
    width:100%;
    margin-bottom:13px;
    padding-left:0.5em;
}

#LoginPageLoginTable tbody tr td input[type=password] {
    width:100%;
    padding-left:0.5em;
}

#LoginPageLoginTable tbody tr td input[type=submit] {
    border: 1px solid;
    border-radius: 16px;
    padding: 8px 20px 8px 20px;
    white-space: nowrap;
    font-size: 14px;
    font-weight:bold;
    color: white;
    background-color:#002169;
    width:100%;
    float:left;
    text-align:center;
}
#LoginPageLoginTable tbody tr td input[type=submit]:hover  {
    color: white;
    text-decoration: none;
    white-space: nowrap;
    /*font-size: 1em;*/
    background-color: #87189d;
}

.login-links-password-td a,
.login-links-username-td a{

}

#LoginPageLoginTable .login-button-td td{
    margin-top:1em;
    margin-bottom:2em;
    padding-bottom:4em;
}


#LoginPageLoginTable  .login-links-selfreg-td {
    display:none;
}



.LoginLinkHide {
    display:none !important;
}

a#SelfRegAltButton{
    width:100%;
    padding:8px 20px 8px 20px;
    font-weight: bold;
    text-align:center;
}
._loginText{
    padding-bottom:1.5em;
}

@media (max-width: 992px) {
    #LoginWrapper, #SelfRegistrationWrapper {
        margin-top:0em;
    }
}

/*#endregion Login*/

/*#region dashboard */
.card-body{
    padding:0em;
}

.card-dashboard-subtitle, .card-item-wrapper, .card-bottom-links-wrapper{
    padding:0 0.75em;
}

.card-lite {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #f1faff;
    background-clip: border-box;
    border-radius: .25rem;
}

#DashboardWidgetDisplay{
  clear:both;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between; 
}

.dashboard-widget{
    display:flex;
    margin-bottom: 1em;
}
.withcols4{
    flex-basis:23%;
    min-width: 240px;
}
.withcols3{
    flex-basis:32%;
    min-width: 280px;
}
.withcols2{
    flex-basis:48%;
    min-width: 360px;
}
.withcols1,
.withcols{
    flex-basis:100%;
    min-width: 250px;
}
.withorder1, .withorder {
    order:1;
}
.withorder2{
    order:2;
}
.withorder3{
    order:3;
}
.withorder4{
    order:4;
}
.withorder5{
    order:5;
}
.withorder6{
    order:6;
}
.withorder7{
    order:7;
}
.withorder8{
    order:8;
}
.withorder9{
    order:9;
}
.withorder10{
    order:10;
}
.card-title{
    padding:1.5em 0 1.5em 3em;
    font-size:1.4em;
    font-weight:400;
    margin:0;
    text-align:center;
    color:white;
    background-color:#00c0ca;
    padding:1em 0.2em;
    margin-bottom:0.5em;

}


 .with-underline{
    border-bottom:2px #00c0ca solid;
    margin:0 0 1.5em 0;
}

.card-item-wrapper{
    display:flex;
    padding-bottom:0.75em;
    word-break: break-all;
    border-top:2px #00c0ca solid;
    padding-top:0.75em;
    align-items: center;
}
.card-icon{
    padding: 0em 1em 0 0;
    align-content: center;
    width:50px;
}

.card-text{
    width:100%;
    font-size:0.95em;
    overflow-wrap: anywhere;
}
.card-text div{
    overflow-wrap: anywhere;
}

.card-text span{
    margin-top:0.5em;
    float:right;
}

.card-text a{
    color: #002169;
    border: none;
    white-space: nowrap;
    font-size: 1em;
    background-color: #f1faff;
    margin-left: auto;
}
.card-item-wrapper:last-child{
    border-bottom:none;
}

#ContactDetailsSummaryCard .card-item-wrapper:first-of-type{
    border-top:none;
}

.card-dashboard-subtitle {
    padding-bottom:1em;
    font-weight:600;
    text-align:center
}

.card-bottom-links{
    padding-top:1em;
}
#ContactDetailsSummaryCard .card-text:first-of-type{
    border-top:none;
}

.card-bottom-links-wrapper{
    border-top:2px #00c0ca solid;
    padding-top:1em;
}

.card-bottom-links-wrapper a{
    margin-bottom:1em;
    width:100%;
}


.home-title-header{
    margin-right:auto;
    padding-right:0.4em;
}

.account-details.recent {
    padding:0px 0 0 0;
}

.rents-title-text{
    padding-right:1em;
}
.rent-buttons {
    margin-left: auto;
}

.rent-buttons a.pageButton{
    margin-left: 0.5em;
}

.col-heading .balance {
    font-size:2em;
    line-height: 2em;
    font-weight:bold;
    text-align: right;
}

.balance span {
	font-size:0.5em;
	display: inline-block;
    width: 100%;
    line-height: 0em;
    text-align: right;
}

@media  (max-width: 1200px) {
    a.pageButton, a.rentsButton {
        padding-top:10px;
        padding-bottom:10px;
    }

    a.pageButton.reportRepair {
        padding-top:10px;
        padding-bottom:10px;
    }
}


/*#endregion*/

/* #region rents */

.account-controls .title{
    font-size:27px;
    width:16.66%;
    padding-right:30px;
}

.account-controls .btn-icon-control{
    width:200px;
    display:inline-block;
    background-image:url(../../../App_Themes/Citizen/images/icon_print.svg);
}

.print{
    background-image:url(../../../App_Themes/Citizen/images/icon_print.svg);   
} 

.balance-heading{
    flex:50%;
    align-items: center;
    min-height: 108px;
}

.balance-heading{
    border-bottom:2px #00c0ca solid;
}

.balance-heading h2{
    flex:50%;
    order:1;
}

.balance-heading .title{
    font-size:18px;
    font-weight:600;
    order:1;
    padding-left:0px;
}

account-address .title{
    font-size:21px;
    padding-left:0px;
}

.balance-heading .balance{
    width:25%;
    font-size:2em;
    margin-left:auto;
    text-align:right;
    line-height:1;
    order:2;
}

.balance-heading .balance sub{
    display:none;
}

.col-md-6 .balance-heading .balance sub{
    display: block;
    height: 14px;
}

.col-md-6 .balance-heading .state{
    display:none;
}

.balance-name{
    border-bottom:2px #00c0ca solid;
}

section.balance-name{
    padding:16px 20px 16px 20px;
    background-color:#f1faff;
}

.balance-name .balance{
    font-size: 2em;
    padding-right: 0px;
}

.account-address .balance{   
    font-size: 2em;
    padding-right: 0px;
}

.arrears-text{
    color: #40423d;
}

.balance-heading .state
{
    width:8.33%;
    margin-left:auto;
    order:3;
    padding-left:10px;
}

.balance-text {
    font-size: 0.5em;
    display: inline-block;
    width: 100%;
    line-height: 2em;
    text-align: right;
}

@media (max-width: 768px) {

   #pnlSelectAccountBody {
    padding: 1em 0.5em!important;
    margin: auto;
    }
   .rent-charges-container{
       padding:1em 0!important;
   }
}

/*#endregion*/

/*#region account????*/
/* ==== ACCOUNT TITLE ====*/
.account-title .title
{
    font-size:27px;
}


/* ==== CONTROLS ====*/
section.account-controls
{
    font-size:15px;
    font-weight:normal;
    background-color:rgba(246, 246, 241,0.5);
}

/* ==== line-itemS ====*/
section.account-details .headings
{
    text-transform:uppercase;
}

section.account-details
{
    background-color:#FFFFFF;
}

section.account-details .line-item
{
    border-top:1px solid #d5d5d3;
}



section.account-details .headings div,
section.account-details .line-item div
{
    padding:8px 2px 8px 2px;
}


.account-details .line-item div
{    
    font-size:15px;
    font-weight:normal;
}

.account-details .line-item .date,
.account-details .line-item .charges,
.account-details .line-item .payments,
.account-details .line-item .description,
.account-details .line-item .balance
{
    text-transform:uppercase;
}

.account-details .line-item .date
{
    white-space:nowrap;
}


.account-details .line-item div
{
    padding:8px;
}


/* account statement flex table */
.account-details .date
{
    width:16.66%;
}

.account-details .charges
{
    width:8.33%;
}

.account-details .description
{
    width:25%;
}

.account-details .payments
{
    width:8.33%;
}

.account-details .type
{
    width:25%;
    padding:8px;
}

.account-details .balance
{
    width:8.33%;
    text-align:right;
}

/*.account-details .line-item .balance
{
}*/

.account-details .line-item .balance .amount
{
    width:50%;
    text-align:right;
    display:inline-block;
}

.account-details .line-item .balance .state
{
    font-size:15px;
    white-space:nowrap;
    width:50%;
    max-width:100%;
    display:inline-block;
    text-align:left;
    padding-left:10px;
}

.account-details .headings .state
{
    width:8.33%;
}

.account-details .line-item .balance
{
    width:16.66%
}


/*account breakdown flex table */
.breakdown .frequency
{
    width:25%;
}

.breakdown .description
{
    width:58.33%;
}

.breakdown .amount, .breakdown .state
{
    width:8.33%;
    text-align:right;
}


.payment-type 
{
    color:#40423d;
    font-size:inherit;
    font-size:16px;
    font-weight:normal;
}

.payment-type var::before
{
    content:': ';
    color:#40423d;
}

.payment-type var
{
    font-style:normal;
    color:#000;
}

.account-address .payment-type 
{
    margin:0px;
    margin-top:2px;
    display:inline-block;
    padding:11px;
    background-color:rgba(255,255,255,0.5);
    text-align:left;
}


.recent .date
{
    width:25%;
}

.recent .payments
{
    width:25%;
}

.recent .type
{
    width:50%;
    color:#40423d;
}


.call-to-action p
{
    font-size:18px;
    margin-bottom:20px;
}

/*#endregion*/

/* #region media queries*/

@media  (max-width: 927px){
    .withcols3, .withcols2, .withcols1, .withcols, .withcols4{
        flex-basis: 100%;
        /*text-align:center;*/
        min-width:unset;
    }
    #MainLogoLinkBottom{
        margin:auto!important;
        max-width:100%;
    }
}

@media (max-width: 1367.9px)
{
    .container-fluid
    {
        padding:0px;
        margin:0 auto;
        padding-left:50px;
        padding-right:50px;
        width:100%;
        max-width:100%;
    }                                 
}


@media (max-width: 1199.9px)
{
     
    .balance-heading .state
    {   
        font-size:14px;
    }

    .account-controls .btn-icon-control
    {
        display:inline-block;
        padding:8px;
        width:36px;
        height:39px;
        background-position:center;
        background-color:transparent;
    } 

    .account-controls .btn-icon-control span
    {
        display:none;
    } 
 
    .account-controls .btn-icon-control.print
    {
        background-image:url(../../../App_Themes/Citizen/images/icon_print_invert.svg?1);    
    }                      
}

@media  (max-width: 992px)
{
    #PortalMainTitle {
        display:none;
    }

    #containerbox{
        margin-top:130px;
     }
   /*repairs  page*/
    #RepairsAjaxPanel .assetpicker-details{
        flex-direction: column;
    }
    #lblRepairsTitle,#pnlAssetAddress{
        flex-basis:100%;
        width:100%;
        text-align:center;
    }
    .accounts-container select {
        /*width: 100%;*/
    }
    #pnlAssetAddress select, #pnlAssetAddress input {
        margin-top:0.5em;
        width:100%;
    }
    #pnlOutstanding{
        padding:0!important;
    }

    #repairsview-container {
        padding:0!important;
    }
    .image-responsive {
            margin-top:0px;
     }
     #RepairsAjaxPanel {
        padding: 0em ;
    }
}

@media  (max-width: 768px) {


    #main-content{
        margin:0em 0em 0.2em 0em;
        padding:0em;
    }
    .container{
        max-width:100%;
    }
    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .content-section{
        padding:10px;
    }
   
     /*custom form*/
     #CustomForm select{
        margin-left: 0em;
        width: 100%;
     }

}


/* #endregion*/

/*#region SelfReg*/

#pnlSelfRegistration .selfRegFieldsPanel input[type=text] {
     width:100%;
    height:3em;
    margin-bottom:13px;
    padding-left:1em;
}

#pnlSelfRegistration .selfRegFieldsPanel span {
    margin-bottom:8px;
}

#pnlSelfRegistration {
    padding:0em 0em 1em 0em;
    margin-top:0;
    background-color:#f1faff;
}

.panel-email, .panel-selfref-fields, .panel-email-warning{
    padding:1em 2em;
}

.selfRegFieldsPanel > div {
    padding: 0px;
}

.selfRegErrorContent {
    font-weight:bold;
    color:red;
}

.selfRegErrorHeader{
    display:none;
}

.selfRegFieldsPanel{
 padding-top:1em;
}

.returntologin {
    padding: 1em 0em;
}

@media (max-width: 992px) {
    #pnlSelfRegistration {
        margin-top:0em;
    }
}

/**/

/*#endregion SelfReg*/

/*#region PasswordReminder*/

#pnlPasswordReminder {
    margin: 0em 0em 0em 0em;
    padding: 0em ;
    border-radius: 3px;
    background-color: #f1faff;
}
#WidgetHeaderLabel  {
    display:inline-block;
    margin:0px 0px 0.6em 0px;
    width:100%;           
    padding-bottom: 0.5em;
    font-size: 1.8em;
    color: #000C27;
    font-weight: normal;
    text-align: center;
    background: #00c0ca;
    color: white;
    padding-top: 0.5em; 
}
#pnlPasswordReminder .ui-widget-content{
    padding:2em;
}

#pnlPasswordReminder #security-grid {
    padding:0;
    margin:1em 0;
}

#pnlPasswordReminder #security-grid input[type=text] {
    width:50%;
    height:3em;
    margin-bottom:13px;
    display:block;
}
#security-usrname{
    display:none;
}

#pnlPasswordReminder #security-usrname, 
#pnlPasswordReminder #security-email, 
#pnlPasswordReminder .continue-btn {
    padding:0;
}

#pnlPasswordReminder strong{
    display:none;
}

#pnlResetDetails .ui-widget-content{
    margin-bottom:2em;
}
#pnlResetDetails .ui-state-highlight{
    padding:0px!important;
    font-size:1em!important;
}

#pnlSupportPanel .ui-widget-header,
#pnlWebsiteSupportDetails .ui-widget-header{
    font-size:1.2em;
    font-weight:400;
}

#pnlSupportPanel .ui-widget,
#pnlWebsiteSupportDetails .ui-widget{
    font-size:1em;
}

#pnlSupportPanel .ui-widget-content,
#pnlSupportPanel .ui-widget-content div,
#pnlSupportPanel .ui-widget-content b,
#pnlWebsiteSupportDetails .ui-widget-content div,
#pnlWebsiteSupportDetails .ui-widget-content b{
    padding: 0.2em 0em;
    font-weight:400;
}

#pnlSupportPanel .ui-widget-content b,
#pnlWebsiteSupportDetails .ui-widget-content b{
    padding-right:0.2em!important;
}

@media (max-width: 992px) {
    #pnlPasswordReminder {
        margin-top:0em;
    }
}

@media  (max-width: 660px) {
    #pnlPasswordReminder #security-grid input[type=text] {
        width:100%;
    }
   #pnlPasswordReminder #WidgetHeaderLabel {
        font-size: 30px;
        line-height: 30px;
    }

    #pnlSupportPanel .ui-widget-header{
        font-size: 30px!important;
        line-height: 30px;
    }
     #pnlSupportPanel .ui-widget{
         padding:0!important;
     }
}

@media (max-width: 901px) {
#pnlPasswordReminder #security-grid input[type=text] {
    width:100%;
}
}
/*#endregion PasswordReminder*/

/*#region UsernameReminder*/

#UsernameReminderTitle{
    margin-bottom:0.5em;
}
#UsernameReminderWrapper {
    background-color: #f1faff;
    margin-top: 0em;
}

#UsernameReminderWrapper .continue-btn{
    padding-left:0px;
}

#UsernameReminderWrapper #security-grid,
#UsernameReminderWrapper #security-email{
    margin:0;
    padding:0
}

#pnlUserNameWizard{
    padding:0em 2em;
}

    #UsernameReminderGrid td {
        width:400px;
    }

#pnlUserNameWizard table {
    width:100%;
    text-align:left!important;
}

#pnlUserNameWizard #security-email {
  display:block;
  text-align:left;
}

#pnlUserNameWizard #security-email input[type=text] {
    width:100%;
    height:3em;
    margin-bottom:13px;
}

#ValidationSummary1{
    font-weight:bold;
    font-size:0.8em;
}

.username-reminder-email-label{
    display:none;
}

#UsernameReminderWrapper table{
    table-layout: fixed;
    width: 100%; 
}

.tablerowdesc{
    width:80px;
}

#Wizard1 tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

#UsernameReminderWrapper #pnlErrorWarning{
    padding:0 2em 2em 2em;
}

#UsernameReminderWrapper #pnlErrorWarning .ui-widget-header{
    font-weight:600;
    color:red;
}
@media (max-width: 992px) {
    #UsernameReminderWrapper {
        margin-top:0em;
    }
}
@media  (max-width: 660px) {

   #pnlUsernameReminder #UsernameReminderTitle {
        font-size: 30px;
        line-height: 30px;
    }

    #pnlWebsiteSupportDetails .ui-widget-header{
        font-size: 30px!important;
        line-height: 30px;
    }
     #pnlWebsiteSupportDetails .ui-widget{
         padding:0!important;
     }
}

@media (max-width: 768px) {
    #UsernameReminderGrid td {
        width:100%;
    }
    #pnlUsernameReminder .ui-widget-content{
        padding:0 1em!important;
    }

    
    #pnlUsernameReminder #pnlUserNameWizard {
        padding: 0em!important;
    }
}


@media  (max-width: 420px) {

    #usernameRemContentBefore{
	padding-left:10px;
   }
}
@media (max-width: 400px) {
    #UsernameReminderWrapper {
        padding-left:0px;
    }
}

/*#endregion UsernameReminder*/

/*#region Change Password*/
.MsoNormal{
    font-weight:bold;
    padding: 0 10px;
}

#pnlPasswordChange {
    padding:0 0 1em 0;
    background-color:#f1faff;
}
#pnlPasswordChange .page-title{
    margin-bottom:1em;
}
#pnlPasswordChange p {
    padding:0px;
    margin:0;
}

#security-grid-changepassword label {
    width:200px;
}

#pnlPasswordChange #security-message, 
#pnlPasswordChange #security-grid-changepassword,
#pnlPasswordChange #security-validation{
    padding-left:2em;
    padding-right:2em;
}

.security-validation {
    padding:1em 0;
    margin:0;
}

.newpassword{
    border: 1px solid #abadb3;
}

#pnlPasswordChange .security-validation-info{
    display:block;
    float:left;
    background-color: #f1faff;
    width:100%;
}
#pnlPasswordChange .security-validation-info input{
    display:inline-block;
    clear:both;
    float:left;
    margin: 0 1.5em;
    border: none;
    border-radius: 16px;
    padding: 8px 20px 8px 20px;
    white-space: nowrap;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #002169;
}

#pnlPasswordChange .security-validation-error{
    padding:0em;
    border: none;
    background-color: transparent;
    color:red;
}

.pstrength-minchar{
    color:grey;
}

#pnlPasswordChange .security-validation-error ul {
    padding-left: 0px;
}

#pnlPasswordChange #security-grid-changepassword ul {
    padding:0;
    font-weight:400;
}

.security-grid-changepassword-old, .security-grid-changepassword-new, .security-grid-changepassword-confirm{
    display: inline-flex;
    padding-left: 0;
    width:100%;
    margin-bottom: 0.4em;
}

.pstrength{
    display:block;
    width:100%!important;
    padding-top:3px;
    padding-left:0;
    margin:0;
}
.pstrength-bar{
    display:none;
}

.pStrengthMessage{
    border:none;
    margin-bottom:0.2em;
}

.security-grid-changepassword-right{
    padding-left:0em;
}

.security-grid-changepassword-right ul{
    padding-left:0px;
}

.security-grid-changepassword-right li{
    padding-right:1em;
}


.security-validation-info {
    border:none;
    background:rgba(0, 0, 0, 0);
    padding:2em 0;
}

.security-validation-info i{
    display:none;
}

.security-txtbox {
}

.security-grid-changepassword-old input, .security-grid-changepassword-new input{
    border: 1px solid #abadb3;
    font-size: 1em;
    width: 330px;
    padding: 0.1em 0.3em;
}

@media (max-width: 768px) {
   
    .pstrength{
        padding-left:0px!important;
    }
    #pnlPasswordChange .ui-widget-content {
        padding-right:0.5em;
        padding-left:0.5em;
    }

    security-grid-changepassword-confirm input, 
    #security-grid-changepassword label,
    .security-grid-changepassword-new input{
        width:100%;
    }
    .security-grid-changepassword-new{
        padding-bottom:1em;
    }

}

/*#endregion Change Password*/

/*#region Change Username*/
.explanatory-text {
    margin: 1em 0;
}

#confirmUsernameLabel, #confirmUsernameLabel2 {
    width: 140px;
    margin-bottom: 1em;
}

#changeusernamepanel{
    padding:0em 0em 2em 0em;
    background-color:#f1faff;
}

#changeUsernameContainer .ui-widget-content {
    padding:0 1em;
}
/*#endregion Change Username*/

/*#region Change Security Question*/
#pnlSecurityQuestionChange{
    padding: 1em 0em ;
    background-color: #f1faff;
    margin-bottom: 1em;
    display: block;
    clear: both;
}

#security-grid-changequestion label {
    display: inline-block;
    width: 200px;
}

#pnlSecurityQuestionChange .ui-widget-content{
    font-size:1em;
    margin-left: 2em;
    padding-left: 0px;    
}
#security-grid-changequestion ul{
    padding:0px;
    font-weight:400;
    margin-bottom:0;
}

.security-grid-changequestion input{
    border: 1px solid #abadb3;
    font-size: 1em;
    width: 250px;
    padding: 0.1em 0.3em;
}
.security-grid-changepassword-confirm input , .security-grid-changepassword-old select {
    border: 1px solid #abadb3;
    font-size: 1em;
    width: 330px;
    padding:0.1em 0.3em;
    height:2em;
}

@media (max-width: 768px) {
   
    #pnlSecurityQuestionChange .ui-widget-content {
        margin-left: 0.5em;
        margin-right:0.5em;
    }
    .security-grid-changepassword-old select {
        width:100%;
    }
    #security-grid-changequestion label {
    display: inline-block;
    width: 100%;
}
    .security-grid-changepassword-old{
        padding-bottom:1.5em;
    }
    .security-grid-changepassword-old input, .security-grid-changepassword-confirm input,
    #pnlPasswordChange .passwordWrapper
    {
        width:100%;
    }
}


/*#endregion*/

/*#region EditContactDetails & ConfirmContactDetails*/

#ContactDetailPanel {
    padding: 0em 1em 1em 1em;
}

.ContactDetailItem {
    border-bottom: 1px solid #d5d5d3;
    padding-top: 1em;
    padding-bottom: 1em;
}

.ContactDetailItem .detail-value-wrapper input {
    margin-bottom: 0.4em;
}

.ContactDetailItem .detail-value-wrapper span {
    color: red;
    padding-left:0.4em;
}

#ContactDetailPanel > div:last-child > .ContactDetailItem {
    border-bottom: none;
}

.ContactDetailItemTitle {
    padding: 1em 0;
}

.ContactDetailTextBox {
    border: none;
    padding: 0.5em;
    width: 50%;
}

.EditContactDetailsPanel,
.ConfirmContactDetailsPanel{
    background-color: #f1faff;
}

.EditContactDetailsPanel .ui-widget,
.ConfirmContactDetailsPanel .ui-widget{
    padding: 1em 2em;
}

.EditContactDetailsPanel .ui-widget-header,
.ConfirmContactDetailsPanel .ui-widget-header{
    font-weight:400;
    font-size:1.2em;
    padding:0.5em 0em;
}

.ConfirmContactDetailsPanel .ConfirmContactDetailsCurrentValue{
    width:100%;
}

.ConfirmContactDetailsPanel .ComfirmDetailsCurrentValueText{
    width:100%;
}

.EditContactDetailsPanel  #RepairsTitle,
.ConfirmContactDetailsPanel  #RepairsTitle{
    margin-bottom:0.2em;
}

.EditContactDetailsPanel  .ui-state-error,
.ConfirmContactDetailsPanel  .ui-state-error{
    color:red;
    padding:1em 0em;
}

.EditContactDetailsPanel  .ui-state-error ul,
.ConfirmContactDetailsPanel  .ui-state-error ul{
    padding:0em;
}

.ConfirmContactDetailsPanel .ConfirmContactDetailsItem {
    border-bottom:1px #d5d5d3 solid;
    width:100%;
    max-width:100%;
    padding-bottom:1em;
}

.EditContactDetailsPanel .ConfirmDetailsButtonPanel,
 .ConfirmContactDetailsPanel .ConfirmDetailsButtonPanel{
    margin:0px;
    border-top:2px #00c0ca solid;
    padding: 1.5em 2em  1.5em 0em;
}

.EditContactDetailsPanel .UpdateEmailRow:first-of-type,
.ConfirmContactDetailsPanel .UpdateEmailRow:first-of-type{
    padding-top:1em;
}

.ConfirmContactDetailsPanel {
    margin: 0px 24px 0px 24px;
    padding-top:15px;
    padding-bottom: 52px;
    padding-left:55px;
    padding-right: 50px;
    border-radius: 3px;
    background-color: #f1faff;
    border:1px transparent;
}

.ConfirmDetailsButtonPanel {
    padding-top:15px;
    margin-right:7px;
}

#CurrentEmailSection{
    padding-left:0px;
}

.EditContactDetailsPanel input::-webkit-outer-spin-button,
.EditContactDetailsPanel input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.EditContactDetailsPanel input[type=number] {
  -moz-appearance: textfield;
}

@media (max-width: 768px) {
    #usernameRemContentBefore {
        margin-top:0px;
        padding-right:15px;
        padding-left:15px;
    }
    .ContactDetailTextBox{
        width:100%;
    }
    .ContactDetailItem .detail-value-wrapper span {
        padding-left: 0;
    }
}

/*#endregion ConfirmContact*/

/*#region SecureMessaging*/

#grdVwMessageList_wrapper .search-bar{
    margin-bottom:1em;
}

.secure-messaging-ui-specific{
    padding:0;
    background-color:#f1faff;
}

#SecureMessageTitle{
    display:block!important;
    color:white;
    background-color:#00c0ca;
    /*padding:1em 0.2em;*/
    margin-bottom:0.5em;
}
#SecureMessageHeaderLabel{
     color: #40423d;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 1.8em;
    display: inline-block;
    height: 3em;
    margin: 0px;
    padding-bottom: 2em!important;
    clear:both;
}

#message-control-buttons{
    clear:both;
}

#SecureMessagesTitle h2{
    color: #40423d;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 1.8em;
    display: inline-block;
    height: 3em;
    margin: 0px 0px 1em 0em;
    width:100%;
}

#SecureMessagesTitle h2{
    border-bottom:2px #00c0ca solid;
}

.messagelist-singular {
    background-color:#f1faff;
}

#grdVwMessageList_wrapper .ui-widget-header{
    padding:1em 1em 1em 1em!important;
}
#grdVwMessageList{
    table-layout:unset;
}
.message-listview-no-messages{
    font-size:1.3em;
    margin: auto;
    text-align: center;
    padding:0!important;
}
.message-listview-no-messages img{
    display:none;
}

#grdVwMessageList .select-all-msg {
    right: 20px;
}

#lnkNameDownload{
    margin-left:2em;
}

@media  (max-width: 768px) {
.message-listview-no-messages {
    padding:0px!important;
    text-align: center!important;
}

#grdVwMessageAttachment td{
    width:unset!important;
}

}

@media  (min-width: 235px){
    #message-control-buttons {
        margin-top: -10px;
       margin:auto;
    }
}
@media  (min-width: 0px) {
    #message-control-buttons {
        margin-top: -10px;
        margin:auto;
    }
}


/*#endregion SecureMessaging*/

/*#region mydocuments*/

    #feTileListSwitch, #feMobSwitchButton {
       margin:46px 0 0 0;
    }

/*#endregion*/

/*#region repairs */

#RepairsAjaxPanel{
   padding:0em 0em 3em 0em;
   background-color: white;
}

#RepairsAjaxPanel .repairs-container{
   background-color: #f1faff;
}

#RepairsAjaxPanel #pnlContainer {
    padding:2.5em 1em;
    background-color: #f1faff;
    display:flex;
    align-items: center;
    align-content:center;
    justify-content:center;
}

#RepairsAjaxPanel .assetpicker-details{
    display:flex;
     align-items: center;
    align-content:center;
    justify-content:center;
    border:none;
}

.assetpicker-details  select option:hover{
    color:#00c0ca;
    background:white;
}

#lblRepairsTitle{
    padding-left:0px;
    padding-right:0.8em;
}

.accounts-container{
    padding:0px;
    position:relative;
    z-index:0;
    display:block
}

.accounts-container select{
    padding:0.3em 1em;
}
#repairsview-container{
    padding:0;
    width:100%;
    background:white;
}

#RepairsAjaxPanel #repairsview-container .rent-accounts-container{
    background:white;
    border-top:none;
}

 #pnlRepairsOustandingRentsTitle, #pnlRepairsCompletedRepairsTitle{
    padding:1em 0em 1em 0em;
    width:100%;
    text-align:center;
    color:#00c0ca;
}

 #pnlOutstanding{
     clear:both;
     padding:0.5em;
     background:white;
 }

#pnlNoOutStandingRepairs p, #pnlNoCompletedRepairs p{
    float:left;
    clear:both;
}

#outstandingtable_length,#outstandingtable_filter,
#completedtable_length, #completedtable_filter{
    display:block!important;
}

#outstandingtable, #completedtable {
    width:100%!important;
    padding-top:1em;
    word-wrap: break-word;
    table-layout:unset;
}

table.dataTable thead th{
    font-size:13px;
    padding: 8px 10px;
    white-space:normal;
    word-wrap:break-word;

} 
table.dataTable tbody td {
    padding: 8px 10px;
    font-size:14px;
    white-space: normal;
    word-wrap:break-word;
} 

/*#endregion*/

/*#region RepairsDetails*/

#RepairsDetailsTitle{
    display:block!important;
}

.repairs-details-column-desc-a {
    width: 32.7%;
}

#worksorderlinestable thead th, #worksorderlinestable thead td,
#repairs-appointments-table thead th, #repairs-appointments-table thead td{
    padding: 10px 10px;
}
#worksorderlinestable thead th:nth-child(1),
#worksorderlinestable tbody td:nth-child(1){
    width:50%!important;
}

.Calendar{
    font-size:1em;
    font-family: inherit;
}

.repair-details-appointments .accounts-container {
    width:100%
}

.image-responsive {
    margin-top:85px;
}

#RepairsIcon {
    min-width: 80px;
     max-width:80px;
}

/*important - Orbit not using appointments as normal*/
.appointment-wrapper{
    display:none;
}

.appointment-list-item{
    padding: 1.5em 1.25em;
    background-color: #f1faff;
    border-bottom:1px solid #d5d5d3;
}

.appointment-list-item i{
    padding: 0 1.25em 0 0;
}

.appointmentDetails{
    word-break: break-all; 
    overflow: hidden; 
}
.repair-details-appointments .appointmentButtons{
 background-color: rgba(255, 255, 255, 0.5); 
}

.repair-details-appointments .accounts-container {
    clear:both;
    padding-top:1.2em;
    padding-left:0;
}

.MakeAppointmentPanel {
    padding:1em 0 2em 0;
    
}

.hideRepairsDetails {
    display:none;
}

.CompleteBookingLabel {
    display:none;
}

.CompleteBookingDateLabel {
    font-weight:bold;
}

.CancelBookingLabel {
    margin:20px;
    font-weight:bold;
    font-size:1.25em;
}


.Suggested-Appointments-Error {
    width:100%;
    padding: 0.5em 0em;
    margin-left: 0;
}
#RepairsRefTitle{
    padding:0em;
}
#RepairsAppointmentsTitle{
    width:100%;
    padding:0em 0em 0.5em 0em;
}

 #RepairsAppointmentsTitle{
    background-color:#f1faff;
    color:#00c0ca;
    font-size:2em;
    text-align:center;
}

.repairs-details-wrapper, .appointment-wrapper{
        padding: 1em 2em 1em 2em;
        background-color:#f1faff;
        border-top:none;
}


.repairs-details-description{
    padding:0px;
}

.repairs-details-status{
    padding:1em 0px;
}

#worksorderlinestable{
    width:100%!important;
    border-bottom:none;
}

.copmletedbookingpanel {
    background-color: #f1faff;
}

#AppointmentCardViewPanel{
    padding:0em;
}

/*#region Calendar*/
#AppointmentsUpdatePanel {
    width:58%;
    font-size:1em;
}
@media (max-width: 768px) {
    #AppointmentsUpdatePanel {
    width:100%;
}
    .repairs-details-wrapper, .repairs-details-wrapper{
            padding: 1em;
    }
}

.AppointmentsPickerPanel table.Calendar {
    border:none;
    border-color:#fff;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.Calendar .TitleStyle {
    margin:1em 0;
}

.AppointmentsPickerPanel table.Calendar > tbody > tr:first-child > td{
    border:none;
    background-color:#fff !important;
}

.Calendar .TitleStyle {
    background-color:#fff;
}

.Calendar .TitleStyle tr {
    border:none;
}

.Calendar .TitleStyle td{
    background-color:#fff;
    color:#40423d;
}

.Calendar .TitleStyle tbody tr td a {
    color:#40423d!important;
    border: 1px solid #40423d;
    border-radius:50px;
    padding:0.5em;
    margin-bottom:0.8em;
}

table.Calendar > tbody > tr:nth-child(2n)
{
    background-color:#f1faff;
    text-align:center;
    color:#000C27;
}

table.Calendar > tbody > tr > td {
    border: 1px solid #ebebe9;
    font-size:1em;
}

.DayHeaderStyle {
    font-size:1em;
}
.AppointmentsUnavailableDay {
    background-color:rgb(239,239,239);
}

table.Calendar tbody tr td.CurrentSelectedDay {
    background-color:#00c0ca;
    color:#fff;
}

@media(max-width: 1024px) {
    .Calendar .TitleStyle tbody tr td.NextPrevStyle {
        min-width:150px;
    }
}
/*#endregion Calendar*/

/*#region SlotList*/
table.AppointmentSlotList {
    margin-top: 20px;
    margin-left:15px;
    width:90%;
}

table.AppointmentSlotList tbody tr {
    border-bottom:1.5px dotted #d5d5d3;
}

table.AppointmentSlotList tbody tr td {
    padding-top:4px;
    padding-bottom:4px;
}

table.AppointmentSlotList tbody tr td input {
    margin:0;padding:0;
    -webkit-appearance:none!important;
       -moz-appearance:none!important;
}

table.AppointmentSlotList tbody tr td input[type=radio]{
    float:right;
    margin-right:0px;
    border: 1px solid #000C27 !important;
    border-radius:100%;
    width: 2em;
    height: 2em;
}

table.AppointmentSlotList tbody tr td input[type=radio]:checked{
    background-image:url("../../../App_Themes/Citizen/images/radio_checked.png");
    background-repeat:round;   
}

table.AppointmentSlotList tbody tr td input[type=radio]:checked::-ms-check {
    background-image: url("../../../App_Themes/Citizen/images/radio_checked.png");
    background-repeat: round;
}  

.SelectSlotButtonHolder {
    width:100%;
    margin-top:1.2em;
}

.SelectSlotButtonHolder input {
    float:right;
}

.AppointmentSelectorPanel p span {
    color: #FC4E76;
    font-size: 15px;
    font-weight: bold;
}

.PreviousDayButtonHolder:after, .NextDayButtonHolder:after {
    color: #fff;

}

.AppointmentSelectorPanel p{
   left:10px;
   top:5px;
   width:100%;
}

.MakeAppointmentPanel, .AppointmentsPickerPanel {
    min-height: 0px;
}


/*#endregion SlotList*/

/*#region OldAppointments*/

#SuggestedAppointment {
    background-color:#fafaf8;
    border:none;
    border-bottom:solid 1px #d5d5d3;
    display:flex;
    padding-bottom:5px;
    padding-top:5px;
}

 .SuggestedAppointmentsPanel:last-child #SuggestedAppointment{
    margin-bottom:2em;
}

 .SuggestedAppointmentsPanel {
     width:57%;
 }


@media  (max-width: 576px) {

    .SuggestedAppointmentsPanel {
        width: 100%;
    }
}

#SuggestedAppointment div:nth-child(1){
    display:flex;
    flex-grow:1;
}

.Selected-Appointment {
    color:#000C27;
}

#SuggestedAppointment .Suggested-Appointment-DOW {
    font-size:125%;
}

#SuggestedAppointment .Suggested-Appointment-Date {
    font-size:125%;
}

#SuggestedAppointment .Suggested-Appointment-TimeSlot {
    font-size:125%;
}

#SuggestedAppointment input {
    margin:0;padding:0;
    -webkit-appearance:none!important;
       -moz-appearance:none!important;
}

#SuggestedAppointment input[type=radio]{
    float:right;
    margin-right:0px;
    border: 1px solid #000C27 !important;
    border-radius:100%;
    width: 2em;
    height: 2em;
}

#SuggestedAppointment input[type=radio]:checked{
    background-image:url("../../../App_Themes/Citizen/images/radio_checked.png");
    background-repeat:round;  
}

#SuggestedAppointment input[type=radio]:checked::-ms-check{
    background-color:#40423d;
}

#SuggestedAppointment input[type=radio]::-ms-check{
   background-color:#fff;
}





#SuggestedAppointment input[type=checkbox]{
    float:right;
    margin-right:0px;
    border: 1px solid #000C27 !important;
    border-radius:100%;
    width: 2em;
    height: 2em;
}

#SuggestedAppointment input[type=checkbox]:checked{
    background-image:url("../../../App_Themes/Citizen/images/radio_checked.png");
    background-repeat:round;  
}

#SuggestedAppointment input[type=checkbox]:checked::-ms-check{
    background-color:#40423d;
}

#SuggestedAppointment input[type=checkbox]::-ms-check{
   background-color:#fff;
}


.customRepairsError {
    color: Red;
    margin: 5px;
    width: 100%;
    font-size: 0.9em!important;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}

/*#endregion OldAppointments*/

/*#endregion RepairsDetails*/

/*#region RepairsDiagnostics*/

#repairDiagnosticAssetSelection #pnlContainer{
    padding:1em 0em;
}

#repairDiagnosticAssetSelection #lblRepairsTitle{
 font-size:1em;
 padding:0.5em 0.3em 0em 0em;
}

#switchProperty {
    margin: 10px 0px 20px 0px;
}
.form-repair-diagnostic #IntroText{
padding-bottom:1em;
font-weight:600;
display:block;
}


#repairDiagnosticContainer .assetpicker-details{
    border-top:none;
}
.form-repair-diagnostic .ui-widget-header{
    padding:0em;
}

#diagnosticContainer .accounts-container{
    width:100%;
}

#diagnosticContainer #lblRepairsTitle {
    width:100%;
    padding-bottom:0.5em;
}

#diagnosticContainer  #pnlAssetAddress {
    width:100%;
}


#diagnosticContainer  #StepSearch {
    display:block;
}

#diagnosticContainer  #stepSearchBox {
    display:inline-block;
    width:50%;
    margin-top:5px;
}


#diagnosticContainer #searchbutton {
    margin-left:10px;
    margin-bottom:5px;
}

#diagnosticContainer #StepSearch .input-after {
    margin-bottom:-17.5px;
}

#rootStepsContainer{
    justify-content: space-between;
    padding-top:1em;
    margin-top:1em;
}
#rootStepsContainer{
    border-top:2px #00c0ca solid;
}

/*#endregion */

/*#region Rents*/

#RentsAjaxPanel{
    padding:0 0 2em 0;
    margin-bottom: 1em;
}
#AJAXAccountPicker{
    background-color:#f1faff;
}
#pnlSelectAccountBody{
    padding:2em 2em;
    margin:auto;
}

#pnlSelectAccountBody p{
    padding-bottom:0.5em;
    text-align: center;
}

#pnlSelectAccountBody div{
    margin-left:0px!important;
    text-align: center;
}
.ajaxloading {
background-color:lightgrey;
padding:1em;
width:100%;
text-align:center;
}

#pnlSelectAccountTitle {
    display:none;
}

@media screen and (max-width: 768px) {

    #RentsAjaxPanel .ui-widget {
        padding: 0!important;
        clear:both;
        display:block;
    }
    #pnlChargesBreakdown{
        padding:15px!important;
        width:100%;
    }
    #pnlAccountDetails{
        display: block;
        padding:5px;
        clear:both;
        margin-bottom:2em!important;
            padding:5px!important
    }
}



/*#region AccountPicker*/
#AccountReferenceLabel {
    display:none;
}

#pnlSelectAccountBody input[type=submit]{
    margin-left:10px;
    margin-top:5px;
}

.rentAccountSelectionDropdown {
    max-width: -webkit-fill-available;
    padding:0.5em;
}

/*#endregion AccountPicker*/

/*#region AccountSummary*/

.balancetotal {
    display:none;
}

.totalAccBalance .balance-heading {
    margin-bottom:2em;
}

#pnlAccountDetails{
      padding: 16px 30px 16px 20px;
       margin-bottom:0px;
       background-color: #f1faff;
}
  
 #pnlAccountDetails,
 #pnlChargesBreakdown,
 #pnlMethodsPayment{
       margin-bottom:1em;
       background-color: white;    
}


#lblAddress {
    flex: 50%;
    font-size: 1.2em;
    font-weight: 600;
    padding-left: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#lblAddress .balancetotal {
    display:flex;
    justify-content:flex-end;
    display:none;
}

#lblAddress .balancetotal * {
    float:right;
}

#lblAddress .balancelabel {
    font-weight: 400;
    color: #212529;
    display: none;
    order:2;
}

#lblAddress .balancereading {
    color: #FD8D40;
    font-size: 1.8em;
    font-weight: 400;
    padding-bottom:0px;
    vertical-align:top;
    line-height:2em;
    padding-right:10px;  
}

.subAccountDetails {
    width:100%;
    margin-top:23px;
    margin-bottom:5px;
}
.subAccountDetails{
    border-top:2px #00c0ca solid;
}


.subaccount-content {
    float:left;
    flex: 50%;
    font-size: 1.1em;
    padding-left:0px;
    width:50%;
    margin-top:15px;
}

.subaccount-balance {
    width: 25%;
    font-size: 20px;
    margin-left: auto;
    margin-top:15px;
    text-align: right;
    line-height: 1;
    order: 2;
    padding-top:3px;
}

.subaccount-content img {
    display: none;
}

@media screen and (max-width: 768px) {
    .subaccount-content{
        padding-left:0px;
    }

    #lblAddress {
        padding-left:0px;
        padding-bottom:5px;
    }

    #lblAddress .balancereading {
            font-size: 24px;
        }

    #lblAddress .balance {
            font-size: 24px;
        }

    #lblAddress .balancelabel {
            font-size: 1rem;
        }

    .subaccount-balance {
            font-size: 16px;
        }

    #pnlRentAccountsDetail {
        /*width:90%;
        padding:1em 0!important;*/
        /*text-align: center;
        font-size:1.2em;*/
    }

    #pnlAccountStatementTools{
        /*clear:both;*/
    }

    #filterRentOptions {
        /*width:100% !important;
        display:inline!important;
        margin-bottom:10px;
        padding-left:15px;
        padding-right:20px!important;
        padding-top:10px;*/
        font-size:0.9em;
    }

    .account-statement-print {
         /*float:right;
         margin-top:-45px!important;*/
    }

     .account-statement-accounts{
        /*padding-right:0px!important;*/
    }

    .account-statement-accounts select{
        /*width:45%!important;*/
    }

    .account-statement-transactionsPeriod {
         /*width:100%!important;
         display:inline!important;
         flex:none!important;*/
    }

    .account-statement-transactionsPeriod select{
     /*width:45%!important;
     float:right!important;
     overflow:hidden!important;*/
    }

}

@media screen and (max-width: 768px) {

   .subAccountDetails {
        margin-top:20px!important;
    }
}

@media screen and (max-width: 412px) {

    #filterRentOptions {
        padding:0 1em;
    }

    .account-statement-print{
        order:1!important;
    }

    .account-statement-accounts{
        order:2!important;
        padding:0 0 1em 0!important;
        flex-basis:100%;
    }
    .account-statement-transactionsPeriod {
        order:3!important;
        flex-basis:100%;
        padding:0!important;
    }

    .account-statement-accounts select{
        padding:0.6em;
    }
    .account-statement-print img{
        padding:0.5em 0 0 0 !important;
        text-align:right;
    }
}
/*#endregion AccountSummary*/

/*#region Statement*/

@media screen and (max-width: 768px) {


   #rent-tranactions-container td:nth-child(1), #rent-tranactions-container th:nth-child(1) {
       padding-left:28px!important;
    }
   #rent-tranactions-container .dataTables_length{
       display:block;
       float:unset;
       text-align: center;
       padding-bottom:1em;
   }

}
    #rent-tranactions-container .dataTables_length select {
        padding:5px;
    }
 .rent-accounts-container {
        background-color:#f1faff;
}

.rent-accounts-container  .smartphone_dataTables_length select{

}

.rent-accounts-title {
    padding-left:20px;
    padding-right: 30px;
    padding-top:20px;
    float:left;
    font-weight: normal;
}

#pnlRentAccountsDetail{
    display: block!important;
    padding: 0.5em;
    font-size: 1.8em;
    color: #000C27;
    font-weight: normal;
    text-align: center;
    background: #00c0ca;
    color: white;
    width: 100%;
}

#lblRepairsTitle{
    padding-top:0px;
}

.show-options, #show-options {
    display:none;
}

.account-statement-transactionsPeriodOptions {
    display:none;
}

#filterRentOptions {
    display:flex;
    padding-left:20px;
    flex-wrap: wrap;
}

.account-statement-print {
    order:3;
    width: 36px;
    height: 39px;
    background-position: center;
    background-color: transparent;
    padding-right: 3px;
    vertical-align: middle;
}

.account-statement-print:after {
   /*content:'\f02f';
   font-family: "Font Awesome 5 Free";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-size:1.5em;
   font-weight: 900;*/
}

.account-statement-print img {
   opacity:1;
   padding-top:2em;
}

.account-statement-transactionsPeriod {
    padding-right:25px;
    padding-top:20px;
    order:2;
    flex-grow:1;
}

.account-statement-transactionsPeriod option[value=Between] {
    display: none;
}

.account-statement-transactionsPeriod select {
    width:100%;
    padding:0.6em;
    background-image: url("../../../App_Themes/Citizen/images/dropdown.svg");
    background-position: right 4px center;
    background-size: auto 85%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: calc(2.1em + 0.75rem + 2px);
    border: solid 1px #d5d5d3;
}

.account-statement-accounts {
    padding-right:10px;
    order:1;
    flex-grow:1;
    padding-top:20px;

}

.account-statement-accounts select {
    width:100%;
    padding:0.6em;
    background-image: url("../../../App_Themes/Citizen/images/dropdown.svg");
    background-position: right 4px center;
    background-size: auto 85%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: calc(2.1em + 0.75rem + 2px);
    border: solid 1px #d5d5d3;
}

.rent-accounts-details h2 {
    display:none;
}


/*#endregion Statement*/

/*#region Table*/
#rent-tranactions-container table .dataTables_info{
    padding-left:20px;
}

dataTables_info

#rent-tranactions-container td, 
#rent-tranactions-container th
{
    text-align:left!important;
    padding: 10px 8px;
}

#rent-tranactions-container th div{
    text-align:left!important;
}

#rent-tranactions-container .bottom{
    padding-top:1em;
}

#rent-tranactions-container .dataTables_length {
    padding:0.3em 0 0 1em;

}

#rent-tranactions-container .dataTables_paginate {
    padding:0em 0 1em 0;
}

#rent-tranactions-container  .targettable_length{
    padding:0.3em;
}

#rent-tranactions-container .dataTables_wrapper {
    padding-top:20px;
}

.main-content table.dataTable {
    border-bottom:solid 1px #d5d5d3;
}

#rent-tranactions-container table thead tr th .DataTables_sort_wrapper {
    font-weight:300;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
}

#rent-tranactions-container table.dataTable tbody tr td {
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.6;
    color: #212529;
    text-align: left!important;
}

.main-content .dataTables_filter{
    display:none;
}

.main-content .dataTables_length{
    padding-top:12px;
}

.main-content .dataTables_paginate a.ui-state-disabled {
    color:#000C27;
}

.main-content .dataTables_paginate a.previous {
    color:#FC4E76;
}

.main-content .dataTables_paginate a.next {
    color:#FC4E76;
}
/*remove default dropdown arrow in IE*/
.account-statement-accounts select::-ms-expand,
.account-statement-transactionsPeriod select::-ms-expand{
    display: none;
}

.main-content table tfoot {
    display:none;
}

/*#endregion Table*/

/*#region Charges*/

#pnlChargesBreakdown {
    padding:0;
    margin-top:3em;
}

#pnlChargesBreakdown {
    background-color:white;
}

#pnlChargesBreakdown .ui-widget-content{
    padding:0;
}

#AccountSelectionPanel p {
    margin-left:0px;
    padding:1em;
}

ul.ChargeBreakdownViewerAccountsList {
    width:60%;
    padding-left:0px;
    margin:auto;
}

ul.ChargeBreakdownViewerAccountsList li {
    padding-bottom: 20px;
}

.rentChargesBreakdownTable thead tr th {
    padding-left:10px;
    border-bottom:solid 1px #d5d5d3;
}

ul.ChargeBreakdownViewerAccountsList li input[type=submit]{
    padding:1em;
    width:100%!important;
}

@media screen and (max-width: 480px) {
    ul.ChargeBreakdownViewerAccountsList{
        width:100%!important;    
    }
    .smartphone_dataTables_length{
        width:100%;
        display:block;
        padding-bottom:1em;
    }
    .smartphone_dataTables_length div{
        float:unset!important;
        text-align:center;
    }
    .smartphone_dataTables_length select{
        padding:4px;
    }
    #targettableLengthSelect:before{
        content:"Show";
        min-width:30px;
        color:#000C27;
    }
    #targettableLengthSelect:after{
        content:"entries";
        min-width:30px;
        color:#000C27;
    }

}



.rent-charges-container {
    padding-right:30px;
    padding-top:1em;
}
#pnlRentsChargeBreakdown{
    padding:1em;
    font-size: 1em;
    clear:both;
    display:block;
}

.rents-chargebreakdown-container {
    margin-left:0px;
}

.rents-chargebreakdown-container p {
    display:flex;
    margin-left:0;
    font-size: 1em;
}
#pnlRentsChargeBreakdown p:nth-child(3){
   /*font-size:15px;*/
   padding-top:1em;
}

.rents-chargebreakdown-container input[type=radio] {
    margin-left: 20px;
    margin-right: 5px;
    margin-top: 5px;
}

.rents-chargebreakdown-container input[type=radio]:first-of-type {
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 5px;
}

.rents-chargebreakdown-container input[type=radio]:checked {
    background-image:none;
}

#pnlRentsChargeBreakdown .charge-list span{
    margin-right:0!important;
}

#pnlRentsChargeBreakdown  .charge-header{
    color:blue;
    padding: 1em 0em!important;
}
#pnlRentsChargeBreakdown  .charge-list .ui-state-active{
    text-decoration:underline;

}

.rentChargesBreakdownTable_length{
    padding-left: 0px;
}

.rentChargesBreakdownTable_length label{
    padding-top:0.5em;
}

@media screen and (max-width: 466px) {
.rents-chargebreakdown-container input[type=radio] {
    margin-top:5px;
}
}


/*#region table*/



/*#endregion table*/

/*#endregion Charges*/

/*#region MOP*/

#pnlMethodsPayment{
    padding:0em;
    background-color:white;
}

#pnlMethodsPayment .ui-widget-content{
    padding:1em;
 
}

.paymentmethod{
    padding:1em 0em;
}
/*#end region*/

/*#endregion Rents*/

/*#endregion*/

/*#region CustomForm*/
#CustomForm {
    padding:0em;
    background-color:#f1faff;
    margin-bottom:1em;
}

#CustomForm .form-header {
    display:block;
    margin:0px 0px 0.6em 0px;
    width:100%;           
}

#CustomForm span{
    display:block;  
}

#CustomForm .form-header .ui-widget-header span{
    display:block;
    width:100%;
    padding:0.5em;
    font-size: 1.8em;
    color: white;
    font-weight: normal;
    text-align: center;
    background: #00c0ca;
    word-break:break-word;
}

#CustomForm select,  #CustomForm input[type="text"]{
   padding: 0.3em;
}

#CustomForm .ui-widget-content{
    padding:1em 2em;
} 
#CustomForm .ui-widget-header>span {
    padding:1em 1.7em 0em 1.7em;
    color:#00c0ca;
    font-size:1.2em;
}

#CustomForm .form-header{
    width:100%;
    margin-bottom:0.5em;
}
#CustomForm .form-response-message .ui-widget-header span{
    display:block!important;
    padding-bottom:0.5em;
    font-size:1.2em;
    color:#000C27;
    font-weight: bold;
    width:100%;
}



#SubmitInstructionText{
    padding:1em 0em;
    float:left;
    clear:both;
}

#formTextBox .ui-rwd-content{
    width:100%;
    max-width:100%;
    margin-bottom:0.4em;
}

.form-asset-picker td{
    width: 100%;
    padding-bottom:0.4em;
}
.form-asset-picker label{
    margin-left: 1em;
    width: 90%;
}

#frameUploadPanel #file-upload-button{
    padding:0.5em 0.3em 0.7em 0.3em;
    display:block;
}
#CustomForm label {
    margin:  0  0 0.5em 0.5em;
    display:inline;
    word-break:break-word;
}

#CustomForm .checkbox td{
    padding-bottom:0.4em;
}

.user-image-01::before{
    display:inline-block!important;
    font-family: "Font Awesome 5 Free";
    content: "\f5b8";
    text-decoration: none;
    color: #f6be00; 
    font-size:3em;
    padding-right:0.5em;
}


.user-image-02:before{
    display:inline-block!important;
    font-family: "Font Awesome 5 Free";
    content: "\f5b4";
    text-decoration: none;
    color: #f6be00;
    font-size:3em;
    padding-right:1em;
   
}


.CustomFormRequiredField {
    background-color: white;
}

#FileDownloadsTitle, #FileDownloadsInstructions, .pageDownloadLinksTable{
    padding:0 0.5em;
}

#FileDownloadsInstructions {
    font-size: 1em;
    font-style: normal;
}

#AllPayDDTitle{
    display:block!important;
}

#GenericAccountPicker{
    padding:2em;
}

    #GenericAccountPicker .AccountSelected {
        font-weight: 600;
    }

/*#endregion*/

/*#region Account Unlocked*/
#AccountUnlockWrapper td{
    align-content:flex-start;
}

#UserNameLabel{
    padding-right:1em;
}

/*#endregion*/

/*#region Website Support Contact Details*/
#pnlWebsiteSupportDetails{
    padding:0em;
    margin-top:0em;
}

#pnlWebsiteSupportDetails .ui-widget-header{
    display: inline-block;
    margin: 0px 0px 0.6em 0px;
    width: 100%;
    padding-bottom: 0.5em;
    font-size: 1.8em;
    color: #000C27;
    font-weight: normal;
    text-align: center;
    background: #00c0ca;
    color: white;
    padding-top: 0.5em;
    /*letter-spacing: 0.08em;*/
}

#pnlWebsiteSupportDetails .ui-widget-content{
    display: inline-block;
    margin: 0px 0px 0.6em 0px;
    width: 100%;
    padding: 0.5em 2em;
    font-weight:400;
}

.required-field-validator-style {
    /*display:inline!important;*/
}
@media only screen and (max-width: 768px) {
    #pnlWebsiteSupportDetails  {
        /*padding:0.5em 0.5em;*/
    }
    #pnlWebsiteSupportDetails .ui-widget-content{
        padding: 0.5em;
    }
}

/*#endregion*/

/*#region session Expiry*/

.ui-dialog, .ui-dialog input .ui-dialog select, .ui-dialog textarea, .ui-dialog button {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-dialog .ui-widget-header {
    border: none;
    background-color: #051B5B!important;
    color: white!important;
    text-align:center;
    padding:1em;
}

.ui-dialog-buttonset button{
    background-color: #051B5B!important;
    color: white!important;
    border:1px solid;
    border-radius:1em;
    padding: 0.5em 1em;
}

/*#endregion*/

/*#region DirectDebit AllPay*/

#accountlistitem {
    padding:0.5em 0em;
}

/*#endregion*/