body {
    padding-top: 60px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 250px;
}



/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.bigText {
    font-size: large;
    font-weight: bold;
}
.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

/* Nic Start */

#home .jumbotron {
    /*background: #670a51;*/
    background-image: url("/img/computershare-splash.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

    #home .jumbotron p {
        text-transform: uppercase;
        font-weight: 300;
    }

#bank .jumbotron {
    height: 160px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn {
    border-width: 2px;
    font-weight: 400;
}

span.copyright {
    clear: both;
    width: auto;
    display: block;
    text-align: center;
}

span.disclaimer {
    clear: both;
    width: auto;
    display: block;
    text-align: right;
}

.navbar-default .navbar-toggle {
    border-color: #f0f0f0;
    border-width: 2px;
}

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #f0f0f0;
    }

    .navbar-default .navbar-toggle:hover .icon-bar {
        background-color: #670a51;
    }

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #f0f0f0;
    }

.table {
    border-bottom: solid #ddd 1px;
}

    .table th {
        background: #f0f0f0;
    }

#spanMessage {
    padding: 0 0 0 15px;
    line-height: 22px;
}

#IssueDate, #MaturityDate, #StartDate, #EndDate, #HolidayDate1 {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-control {
    height: 36px;
}

    .form-control.file {
        height: auto;
    }

.alert-warning svg {
    margin: 0 15px 0 0;
}

/* Nic End */
/*
 * --------------------------------------------------
 * Variables
 *-------------------------------------------------- 
 */
/*:root {
    --header-height: 75px;
}*/
.row {
    margin-right: 10px;
    margin-left: 10px;
}

/*
 * --------------------------------------------------
 * Responsiveness/media queries
 *--------------------------------------------------
 */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

@media (min-width: 576px) {
    /* Small devices (576px and up). Mixin: media-breakpoint-up(sm) */
}

@media (min-width: 768px) {
    /* Medium devices (768px and up). Mixin: media-breakpoint-up(md) */

    .hide-above-md {
        display: none;
    }
}

@media (min-width: 992px) {
    /* Large devices (992px and up). Mixin: media-breakpoint-up(lg) */
    .hide-above-lg {
        display: none;
    }
}

@media (min-width: 1200px) {
    /* X-Large devices (1200px and up). Mixin: media-breakpoint-up(xl) */
    .hide-above-xl {
        display: none;
    }
}

/* max-width */
@media (max-width: 500px) {
    /* xs devices (500px and down). Mixin: media-breakpoint-down(xs) */
    .hide-below-xs {
        display: none;
    }
}

@media (max-width: 575px) {
    /* Small devices (575px and down). Mixin: media-breakpoint-down(xs) */
    .hide-below-sm {
        display: none;
    }

    .body-content {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 767px) {
    /* Medium devices (767px and down). Mixin: media-breakpoint-down(sm) */
    .hide-below-md {
        display: none;
    }

    span.copyright, span.disclaimer {
        text-align: center;
    }

    span.disclaimer {
        padding: 10px 0 0 0;
    }
}

@media (max-width: 991px) {
    /* Large devices (992px and down). Mixin: media-breakpoint-down(md) */
    #right-side {
        border: 1px solid #e1e1e1;
        border-top: none;
    }

    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }

    span.m-padding {
        clear: both;
        width: auto;
        display: block;
        padding: 10px 0;
    }
}

@media (max-width: 1199px) {
    /* X-Large devices (1200px and down). Mixin: media-breakpoint-down(lg) */
}

/* target one breakpoint */
@media (min-width: 576px) and (max-width: 767px) {
    /* Small devices (between 576px and 767px). Mixin: media-breakpoint-only(sm) */

}

@media (min-width: 768px) and (max-width: 991px) {
    /* Medium devices (tablets, between 768px and 991px). Mixin: media-breakpoint-only(md) */
    .isin-label {
        clear: both;
        width: auto;
        display: block;
        text-align: left;
    }

    .navbar-right {
        margin-top: -5px;
        float: left !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Large devices (desktops, between 992px and 1199px). Mixin: media-breakpoint-only(lg) */

}


/*
 * --------------------------------------------------
 * Misc
 * Other stuff
 *--------------------------------------------------
 */

.body-content {
    padding-top: 20px;
}


img.responsive {
    width: 100%;
    height: 100%;
}

.remove-text-decoration, .remove-text-decoration:hover {
    text-decoration: none;
}

.input-padding {
    padding: 0.2rem;
}


.red {
    color: #990000;
}

.anchor-fa {
    /*color: #670a51;*/
    font-size: 1.6rem;
}

.anchor-fa-bg {
    /*color: #670a51;*/
    font-size: 1.6rem;
}


.anchor-fa-sm {
    /*color: #670a51;*/
    font-size: 1.3rem;
}

/*.anchor-fa:hover {
    color: #990000;
}*/

.green {
    color: #009933;
}

.lightgrey {
    color: lightgrey;
}

.opacity-half {
    opacity: 0.5;
}


.no-padding {
    padding: 0px;
}

.table-responsive {
    border: none;
}

ul.pagination > li > a {
    cursor: pointer;
}


/*Bootstrap overrides*/
.navbar, .btn {
    background-color: #670a51;
    border-color: #670a51;
}

/*colour of navbar links*/
.navbar-default .navbar-nav > li > a, .btn {
    color: #fff;
}

    /*colour of navbar links hover and focus*/
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .btn.hover, .btn.focus {
        color: silver;
    }

/*center logo in nav*/
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important; /* 50% of your logo width */
    display: block;
}

.btn {
    background-color: #670a51;
    border-color: #913685;
}

    .btn:hover,
    .btn:active,
    .btn:focus {
        background-color: #670a51;
        color: silver;
    }

hr {
    clear: both;
    width: auto;
    height: 3px;
    display: block;
    background: #e5e5e5;
}

    hr.grey {
        clear: both;
        width: auto;
        height: 3px;
        display: block;
        background: #e5e5e5;
    }


.greyout {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
}

dt {
    padding: 5px;
}

dd {
    padding: 5px;
}

.set-max-responsive {
    max-width: 150px;
    max-height: 150px;
}
/*HTML 5 date picker - most browsers except IE */
::-webkit-datetime-edit {
    padding: 0.4em;
}

/*::-webkit-datetime-edit-fields-wrapper {
    background: silver;
}*/

::-webkit-datetime-edit-text {
    padding: 0 0.3em;
}

::-webkit-inner-spin-button {
    display: none;
}

.html5-date-picker {
    width: 18em;
}


::-webkit-calendar-picker-indicator {
    background: lightgray;
}
/*IE only jquery date picker styles*/
/*!
 * jQuery UI Datepicker 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker {
    display: none;
    padding: .4em .4em 0;
    width: 18em;
    background-color: white;
}

    .ui-datepicker .ui-datepicker-header {
        padding: .2em 0;
        position: relative;
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        height: 1.8em;
        position: absolute;
        top: 2px;
        width: 1.8em;
    }

    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
        top: 1px;
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 2px;
    }

    .ui-datepicker .ui-datepicker-next {
        right: 2px;
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px;
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px;
    }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        display: block;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
    }

    .ui-datepicker .ui-datepicker-title {
        line-height: 1.8em;
        margin: 0 2.3em;
        text-align: center;
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0;
        }

    .ui-datepicker select.ui-datepicker-month-year {
        width: 100%;
    }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 49%;
    }

    .ui-datepicker table {
        border-collapse: collapse;
        font-size: .9em;
        margin: 0 0 .4em;
        width: 100%;
    }

    .ui-datepicker th {
        border: 0;
        font-weight: bold;
        padding: .7em .3em;
        text-align: center;
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px;
    }

        .ui-datepicker td span, .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none;
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        margin: .7em 0 0 0;
        padding: 0 .2em;
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            cursor: pointer;
            float: right;
            margin: .5em .2em .4em;
            overflow: visible;
            padding: .2em .6em .3em .6em;
            width: auto;
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left;
            }

    /* with multiple calendars */

    .ui-datepicker.ui-datepicker-multi {
        width: auto;
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

    .ui-datepicker-multi .ui-datepicker-group table {
        margin: 0 auto .4em;
        width: 95%;
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    font-size: 0em;
    width: 100%;
}

/* RTL support */

.ui-datepicker-rtl {
    direction: rtl;
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        left: auto;
        right: 2px;
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover {
        left: auto;
        right: 1px;
    }

    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right;
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left;
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: right;
            }

    .ui-datepicker-rtl .ui-datepicker-group {
        float: right;
    }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
        border-left-width: 1px;
        border-right-width: 0;
    }

    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-left-width: 1px;
        border-right-width: 0;
    }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

.ui-datepicker-cover {
    filter: mask(); /*must have*/
    height: 200px; /*must have*/
    left: -4px; /*must have*/
    position: absolute; /*must have*/
    top: -4px; /*must have*/
    width: 200px; /*must have*/
    z-index: -1; /*must have*/
}