@import url("glyphicons.css");

@font-face {
    font-family: "untitled-font-3";
    src:url("../fonts/untitled-font-3.eot");
    src:url("../fonts/untitled-font-3.eot?#iefix") format("embedded-opentype"),
        url("../fonts/untitled-font-3.woff") format("woff"),
        url("../fonts/untitled-font-3.ttf") format("truetype"),
        url("../fonts/untitled-font-3.svg#untitled-font-3") format("svg");
        font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaStdBold';
    src: url('../fonts/HelveticaLTStd-Bold.eot');
    src: url('../fonts/HelveticaLTStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaLTStd-Bold.woff') format('woff'),
        url('../fonts/HelveticaLTStd-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'HelveticaRoman';
    src: url('../fonts/HelveticaLTStd-Roman.eot');
    src: url('../fonts/HelveticaLTStd-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaLTStd-Roman.woff') format('woff'),
        url('../fonts/HelveticaLTStd-Roman.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaStd';
    src: url('..assets/css/fonts/HelveticaLTStd-Light.eot');
    src: url('../fonts/HelveticaLTStd-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaLTStd-Light.woff') format('woff'),
        url('../fonts/HelveticaLTStd-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

[data-icon]:before {
    font-family: "untitled-font-3" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "untitled-font-3" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mis:before {
    content: "a";
    margin:0px;
    padding:0px;
}


/* CSS Document */
.req { color:red; }
#content { border: 1px solid #000; display:block;  overflow:hidden; padding:10px; padding-top:20px; position:relative; top:-22px}

/* Disable certain things */
.disabled { opacity: 0.3; }

/* Login Area */
#login { text-align:center; }
#login input { margin-top: 15px; margin-bottom: 15px; }
#login h1 { margin:40px 0px 80px 0px; font-size:22px; font-weight:bold; }
#login form { width:450px; margin-left:auto; margin-right:auto; }

/* Header */
header .userinfo { text-align:right; }
#welcome  > form > select { display: inline-block; width: auto; height: auto; padding: 1px; }
#welcome  > form > select option { font-size: 13px; }
.grnbold { color: rgb(87, 161, 59); font-weight: bold; }
.navbar  { min-height:auto; margin-top:20px;}
.navbar li a  { margin-left:3px; background-color: #203b7e; color:#FFF; font-weight:bold; }
.navbar li a:hover  { color:#203b7e;}
.navbar li:first-child a { margin-left:0px }

#searchtxt { text-align: right; padding-top: 1%; font-weight: bold; margin-right:-2.5%; }

header #title { font-size:28px; margin-top:18px; }
header #welcome, #date { font-size:14px; line-height:1.5em; }

/* Front Dash */
#dash_icons { margin: 0px; padding:0px; list-style: none; overflow: hidden; }
#dash_icons li a { display:block; width:100%; height:100%; }
#dash_icons li a:hover { text-decoration:none; }
#dash_icons li a span { display:block; width:100%; height:80px; color:#000; }
#dash_icons li { float: left; width: 145px; margin: 14px; text-align: center; height: 145px;    border: 2px solid #CCC; border-radius: 80px; -moz-border-radius: 80px;}
#dash_icons li i { font-size: 60px; display: block; padding:25px 0px 10px 0px; color:#203b7e; }
#dash_icons li i.green { font-size: 60px; display: block; padding:25px 0px 10px 0px; color: rgb(87, 161, 59); }
#dash_icons li i.red { font-size: 60px; display: block; padding:25px 0px 10px 0px; color: #971515; }

.paperless { background:#57a13b;    border-radius: 20px; -moz-border-radius: 20px; padding:14px; overflow: hidden; margin-bottom: 15px; text-align:center; color:#fff;  }
.paperless i { color:#fff; font-size:28px; border: 2px solid #fff; padding:15px; border-radius: 40px; -moz-border-radius: 40px; float:left; margin: 6px; }
.paperless p { font-size:18px; font-weight:bold; }
.paperless button { margin: 0px 6px 0px 6px; }
.paperless label, .paperless input { font-weight:normal; cursor: pointer; }
.paperless label { text-align:center; font-size:11.5px; }
.paperless input { display: block; margin-right:auto; margin-left:auto; }
.paperless button { font-weight:normal; font-weight: bold; background-color:#2c7b0e; border: 1px solid #27730a; margin-top:-16px;  }

.getintouch .col-md-5 { padding: 0px; }

p.header-contact {
    width: 281px;
    margin-top: 5px;
    margin-left: 54px;
    color: #4e4e4e;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 0px;
}

.beacon{
    position:absolute;
    top:0;
    right:0;
    margin-top: 20px;
    background-color:#ff0000;
    height:1.8em;
    width:1.8em;
    border-radius:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
}

.beacon:before{
    position:absolute;
    content:"";
    height:1.8em;
    width:1.8em;
    left:0;
    top:0;
    background-color:transparent;
    border-radius:50%;
    box-shadow:0px 0px 2px 2px #ff8b8b;
    -webkit-animation:active 2s infinite linear;
    animation:active 2s infinite linear;
    z-index:999;
}

.beacon-orange{
    position:absolute;
    top:0;
    right:0;
    margin-top: 20px;
    background-color:#FFA500;
    height:1.8em;
    width:1.8em;
    border-radius:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon-orange:before{
    position:absolute;
    content:"";
    height:1.8em;
    width:1.8em;
    left:0;
    top:0;
    background-color:transparent;
    border-radius:50%;
    box-shadow:0px 0px 2px 2px #ec8111;
    -webkit-animation:active 2s infinite linear;
    animation:active 2s infinite linear;
    z-index:999;
}

@-webkit-keyframes active{
    0%{
        -webkit-transform:scale(.1);
        opacity:1;
    }

    70%{
        -webkit-transform:scale(2.5);
        opacity:0;
    }

    100%{
        opacity:0;
    }
}

@keyframes active{
    0%{
        transform:scale(.1);
        opacity:1;
    }

    70%{
        transform:scale(2.5);
        opacity:0;
    }

    100%{
        opacity:0;
    }
}

.nav-tabs .beacon { margin-top: -2px; margin-right: -5px; height:1.0em; width:1.0em; z-index:999; }
.nav-tabs .beacon:before { height:1.0em; width:1.0em; }

/* Site Logins  */
#users { margin: 0px; padding:0px; list-style: none; }
#users li { width:50%; display: block; float: left; margin-bottom: 6px;  margin-top: 6px; }
#users li a { font-size: 11px; }
#users li h3 { display: inline; margin-left: 6px; }
#users li #user_icon { font-size: 120px; color: #203b7e; }

/* Other Pages */
.holder { border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-top-width: 1px; border-bottom: 1px solid #DDDDDD  }
h2 { margin-top: 0px; margin-bottom: 15px; }
.dlrow .sign { background-color: #57a13b; color:#fff; }
.dlrow .sign  span { color:#fff; }
.nav-tabs > li > a { background-color: rgba(234,234,234,0.1); }

/* Service Log */
#servicelog .fa-check { color:#57a13b; font-size:23px; }
#servicelog .center { text-align:center; }
#download_excel { float: right; }

/* File Listings */
.expand_date { font-weight: bold; background-color: #c0c0c0 !important; font-size: 14px; -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);  }
.expand_date i { font-size: 14px; font-weight: normal; }

/* Disabled Button */
.disable_button { background-color: #d4d2cc !important; color: #848284 !important;  pointer-events: none; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); }
.disable_button i,.disable_button span {  color: #848284 !important;  }
#submenu ul.nav.nav-tabs li.disable_button, li.disable_button a {  background-color:transparent !important; color: #848284 !important; }

/* DDI System */
.direct-debit-portal {
    font-family: 'Open Sans', sans-serif;
    padding-top: 35px;
    min-height: 694px;
    border-bottom: 1px solid #25a651;
}

h2.ddi-title {
    text-align: center;
    font-size: 36px;
    padding-bottom: 16px;
    color: #505050;
    border-bottom: 1px solid #25a651;
    font-family: 'Open Sans', sans-serif;
}

p.question {
    text-align: center;
    font-size: 17px;
    margin-top: 188px;
    font-family: 'Open Sans', sans-serif;
}

p.question.smallgap {
    margin-top: 30px;
}

p.question.smallgap.inform {
    color: #dedede;
}

.two-buttons {
    width: 650px;
    margin: auto;
    margin-top: 50px;
}

.two-buttons.yesno {
    width: 343px;
    margin-top: 32px;
}

.two-buttons.yesno a .buttondefault  {
    width: 152px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group>.btn:last-child:not(:first-child) {
    border-radius: 50px;
    font-family: 'Open Sans', sans-serif;
}

div[data-toggle="buttons"] label {
    display: inline-block;
    padding: 6px 12px;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border-radius: 50px;
    color: #505050;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none !important;
    border: 1px solid #25a651;
    width: 124px;
    transition: 200ms ease;
    padding: 9px 0px;
    background-color: white;
    margin-right: 19px;
    font-family: 'Open Sans', sans-serif;
}

a .buttondefault {
    display: inline-block;
    padding: 6px 12px;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border-radius: 50px;
    color: #505050;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none !important;
    border: 1px solid #25a651;
    width: 124px;
    transition: 200ms ease;
    padding: 9px 0px;
    background-color: white;
    margin-right: 19px;
    height: 41px;
    font-family: 'Open Sans', sans-serif;
}

a .buttondefault:hover {
    background-color: #25a651;
    color: white;
}

a .buttondefault.right {
    float: right;
    margin-right: 0px;
}

a .buttondefault.centered {
    float: none;
    margin: auto;
}

a .buttondefault.left {
    float: left;
}

div[data-toggle="buttons"] label.lastbtn {
    margin-right: 0px;
}

div[data-toggle="buttons"] label:hover {
    color: #fff;
    border: 1px solid #25a651;
    outline: none;
    background-color: #25a651;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
    -webkit-box-shadow: none;
    color: #fff;
    border: 1px solid #25a651;
    outline: none;
    background-color: #25a651;
}

div[data-toggle="buttons"] label.right {
    float: right;
}

div[data-toggle="buttons"] label.left {
    float: left;
}

div[data-toggle="buttons"] label.centered {
    margin: auto;
    display: block;
    color: #dedede;
    border-color: #dedede;
}

div[data-toggle="buttons"] label.small {
    margin: auto;
    display: block;
    color: #525252;
    border-color: #25a651;
    width: 115px;
    display: inline-block;
    margin-right: 22px;
}

div[data-toggle="buttons"] label.small.last {
    margin-right: 0px;
}

input[type="radio"].buttondefault:hover {
    background-color: #25a651;
    color: #ffffff;
}

ul.progressbar {
    margin: auto;
    margin-top: 26px;
    background-color: white;
    width: 268px;
    height: 6px;
    -webkit-padding-start: 0px;
}

ul.progressbar li {
    text-align: center;
    width: 42px;
    height: 6px;
    background-color: #d4d2cc;
    float: right;
    margin-right: 10px;
    list-style-type: none;
    cursor: pointer;
}

.greensep {
    border-top: 1px solid #25a651;
    width: 100%;
    margin: 39px 0px;
}

.greensep.accountsep {
    margin-bottom: 15px;
}

form.acc-details {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

form p {
    margin-bottom: 22px;
	color: #3e3e3e;
}

label.inlinelabel {
    width: 403px;
    text-align: right;
    margin-bottom: 28px;
    margin-right: 8px;
    color: #dedede;
}

input.accdeats, select.accdeats {
    display: inline-block;
    border: none;
    border-bottom: 1px solid #d4d4d4;
    outline: none;
    width: 240px;
    color: #545454;
    transition: 300ms linear;
}

select.accdeats {
    color: #dedede;
}

input.accdeats {
    margin-right: 16px;
}

input.accdeats:focus {
    border-bottom: 1px solid #25a651;
}

input.accdeats:focus + label.inlinelabel {
    color: red;
}

.myDetails {
    text-align: center;
    font-size: 17px;
    margin-bottom: 20px;
}

.mini-sep {
    width: 100px;
    margin: auto;
    border-top: 1px solid #e6e6e6;
    margin-top: 40px;
}

p.myDetails.topline {
    margin-top: 40px;
}

p.myDetails.debit-date {
    border-bottom: 1px solid #25a651;
    width: 250px;
    margin: auto;
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #484848;
}

.buttonholder {
    width: 408px;
    margin: auto;
    margin-top: 16px;
}

p.myDetails.disclaim {
    margin-bottom: 8px;
    margin-top: -20px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

.main-sep {
    border-top: 1px solid #25a651;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 10px;
}


.confirmation-container {
    display: none;  
}

.two-buttons.smaller {
    width: 301px;
    height: 41px;
    margin-top: 24px;
}

p.myDetails.address {
    margin-bottom: 0px;
}

.ddi-half {
    width: 49.8%;
    display: inline-block;
    vertical-align: top;
    padding-left: 30px;
    box-sizing: border-box;
    height: 191px;
}

.ddi-half.righthalf {
    padding-right: 30px;
    box-sizing: border-box;
    padding-left: 0px;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}
.main-sep.both {
    margin: 0px;
}

.myDetails.topline.paddresstitle {
    margin-top: 9px;
}

.myDetails.topline.paddresscheck {
    margin-top: 39px;
}

.myDetails.topline.emailtitle {
    margin-top: 22px;
}

.myDetails.topline.emailcheck {
    margin-top: 20px;
}

.myDetails.topline.condense {
    margin-top: 15px;
    font-family: 'Open Sans', sans-serif;
}

.main-sep.thinner {
    margin-top: 19px;
}

.myDetails.topline.emailgap {
    margin-top: 101px;
}

p.myDetails.topline.addressgap {
    margin-top: 63px;
}

.main-sep.botsep {
    margin-top: 0px;
}

.ddi-half.righthalf.shorter, .ddi-half.shorter {
    height: 138px;
}

a .buttondefault.center {
    margin: auto;
    width: 285px;
    display: block;
    margin-top: 44px;
}

img.dd-img {
    width: 782px;
    margin: auto;
    display: block;
}

p.myDetails.seedetails {
    font-weight: bold;  
    margin-top: 19px;
}

p.myDetails.confirm {   
    margin-bottom: 1px;
}

.main-sep.backsep {
    margin-top: 21px;
}

a .buttondefault.center.backbtn {
    margin-top: 18px;
    margin-bottom: 18px;
}

.buttonholder.triplebtn {
    width: 418px;
}

.buttondefault.small.last {
    margin-right: 0px;
}

input.addressinput {
    display: block;
    width: 250px;
    margin: auto;
    margin-bottom: 4px;
    padding: 0px 9px;
    text-align: center;
    border: none;
    font-weight: bold;
}

input.addressinput:focus {
    outline-color: #cccccc;
    outline-width: 1px;
}

input.emailaddress {
    display: block;
    width: 250px;
    margin: auto;
    margin-bottom: 4px;
    padding: 0px 9px;
    text-align: center;
    border: none;
    font-weight: bold;
    font-size: 17px;
}

input[type="submit"].buttondefault.centered {
    display: inline-block;
    padding: 6px 12px;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border-radius: 50px;
    color: #505050;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none !important;
    border: 1px solid #25a651;
    width: 198px;
    transition: 200ms ease;
    padding: 9px 0px;
    background-color: white;
    margin-right: 19px;
    height: 41px;
    font-family: 'Open Sans', sans-serif;
}

input[type="submit"].buttondefault.centered.dd4e {
    display: block;
    padding: 6px 46px;
    width: auto;
    margin-right: none;
    margin: auto;
    margin-top: 140px;
}

input[type="submit"].buttondefault.centered.dd4p {
    display: block;
    padding: 6px 46px;
    width: auto;
    margin-right: none;
    margin: auto;
    margin-top: 93px;
}

input[type="submit"].buttondefault.centered.dd4b {
    display: block;
    padding: 6px 46px;
    width: auto;
    margin-right: none;
    margin: auto;
    margin-top: 5px;
}

input[type="submit"].buttondefault.centered:hover {
    color: #fff;
    border: 1px solid #25a651;
    outline: none;
    background-color: #25a651;
}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 30px white inset;
}

input {
    outline: none;
}

.text-muted {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

 .sa-confirm-button-container button {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

@media only screen and (max-width: 510px) {
	#login form {
		width: 100%;
	}
}

@media only screen and (max-width: 460px) {
	#dash_icons {
		margin: auto;
		width: 204px;
	}
	#dash_icons li i {
		padding: 54px 0px 10px 0px;
	}
	
	#dash_icons li {
		float: left;
		width: 200px;
		margin: auto;
		height: 200px;
		margin-top: 25px;
		border-radius: 50%;
	}
	#dash_icons li a span {
		display: block;
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 330px) {
	#login img {
		width:100%
	}
}