﻿:root {
    --blue: #3e74ab;
    --turquoise: #b4e3f5;
}

html {
    position: relative;
    min-height: 100%;
}

.bg {
    height: 100%;
}

.background-image{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.cc-btn:hover {
    color: black !important;
}

.bg p.supportMsg {
    display: none;
}

body {
    background-color: var(--turquoise);
}

body > .container {
    padding: 100px 15px 0;
}

body > .container-fluid {
    padding: 100px 15px 0;
    padding-right: 50px;
}

.spinner {
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
}

#body_content {
    background-color: rgb(255 255 255 / 85%);
}

.main-layout .badge.env {
    font-size: 9px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1031;
}

@media (min-width: 1400px) {
    .container {
        max-width: 90%;
    }
}

h1, h2, h3, h4, h5 h6 {
    font-family: Open Sans, sans-serif;
}

hr {
    border-top: 1px solid rgba(255, 255, 255, 0.9);
}

.dl-horizontal dt {
    white-space: normal;
}

.navbar-brand {
    padding: 0 15px;
    height: 100px;
    line-height: 100px;
}

.navbar-nav li {
    padding-left: 10px;
}

.dropdown-menu li {
    padding-left: 0;
}

.dropdown-menu li a.dropdown-item {
    color: #fff;
}
    .dropdown-menu li a.dropdown-item:hover, .dropdown-menu li a.dropdown-item:focus {
        background: var(--blue);
        color: #fff;
    }

.dropdown-menu {
    border-radius: 0;
    background-color: #212833;
}

.nav-link {
    color: #fff !important;
    margin-bottom:4px;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.5);
    text-decoration:underline;
}

.navbar-nav li.active > a {
    color: #fff;
    text-decoration: underline;
}

.navbar-right li a {
    color: #262D39;
    padding-left: 10px;
}

.residential-tbl, .flats-tbl, .housing-tbl, .plotTable, .MDTable {
    background: #fff;
}

#applicationForm fieldset{
    display: none;
}

.plotTable {
    display: none;
}

#commercialElementOption, #planningPermission, #planningPermissionOptions, #optionalRequirements, #assignedToPlots, #upload-btn, #localAuthorityDetailsBox,
#publicSewer, #publicSewer2, #dischargeDetailsBox, #localEnactmentsDetailsBox, #drainagePlan, #MDother-textbox, #MD-referral, #LocalAuthorityDropdown {
    display: none;
}

#BCSitePostcode {
    text-transform: uppercase;
}

p.red {
    color: #ff0000;
}

.form-control {
    /*TODO: This will be fixed properly on IP-90*/
    width: 100% !important;
}

    iframe.form-control {
        height: auto;
    }

.dark-grey {
    color: #525966;
}

#listViewSubjectivities {
    overflow: auto;
}

.residential-tbl {
    margin-bottom: 0 !important;
}

#dropdown {
    z-index: 100;
}

input#searchbox {
    text-transform: uppercase;
}

/* --- styling for upload --- */
.k-clear-selected,
.k-upload-selected {
    display: none !important;
}

footer {
    margin-bottom: 14px;
    margin-top: 20px;
    text-align: center;
}

.card, .btn {
    border-radius: 0;
}

ul.navbar-right li.dropdown {
    border: 1px solid var(--blue);
    padding-right: 10px;
}

.bg-dark {
    background-color: #1E2A38 !important;
}

.btn-primary {
    background-color: #6DC9EC;
    border-color: #6DC9EC;
    text-transform: uppercase;
}
    .btn-primary:hover {
        color: #fff;
        background-color: var(--blue);
        border-color: var(--blue);
    }

.btn-dark, .btn-success {
    text-transform: uppercase;
}

.hr-white {
    border-top: 1px solid #fff;
}

.vertical-buttons {
    position: fixed;
    right: 0;
    top: 15%;
    z-index: 1000;
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}

.blue-btn {
    background: var(--blue);
    color: #fff;
    font-size: 13px;
}
    .blue-btn a {
        text-decoration: none;
        color: #fff;
    }

.icw-blue-btn {
    text-transform: uppercase;
    background: #3890B3;
    color: #fff;
}
    .icw-blue-btn a {
        text-decoration: none;
        color: #fff;
    }

.vertical-buttons__button {
    width: 220px;
    text-align: center;
    padding: 10px;
    display: inline-block;
    text-transform: uppercase;
}

#MyAccountForm .form-group input.k-textbox {
    width: 100%;
}

.cb {
    display: none;
}

label.cb {
    display: inline-block;
    width: auto;
    padding: 1px;
    margin: 1px;
    cursor: pointer;
    user-select: none;
}

.box {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    background-color: #fff;
    cursor: pointer;
    border-radius: 0.25rem;
    top: -2px;
    margin-right: 5px;
}

.cb:checked ~ .box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 10px;
    transform: rotate(40deg);
    border-right: 2px solid #045acf;
    border-bottom: 2px solid #045acf;
}

/* Validation */
.help-block, .error {
    color: #a94442;
}

input.error {
    border: solid 1px #a94442;
}

.k-header > .k-header-column-menu {
    background: inherit;
}

/* Kendo Grid alt row bg color */
.k-alt, .k-pivot-layout > tbody > tr:first-child > td:first-child, .k-resource.k-alt, .k-separator {
    background-color: rgba(0,0,0,.08) !important;
}

.k-state-selected {
    background-color: #1984c8 !important;
}

.k-header, .k-treemap-title, .k-header:not(.k-dialog-titlebar) {
    background-color: var(--blue);
}

.k-grid .k-filtercell label {
    color: #fff;
}

.k-grid-header .k-header > .k-link, .k-header:not(.k-dialog-titlebar), .k-treemap-title {
    background: var(--blue) !important;
    color: #fff !important;
    padding: .5em;
}

.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched {
    display: flex !important;
}

    .k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button {
        flex: 1 0 0 !important;
    }

.k-grid-header .k-header {
    background-color: var(--blue);
}

.k-grid tbody tr:hover, .k-alt:hover {
    background: var(--blue) !important;
    color: #fff;
}

.k-grid th {
    background-color: var(--blue);
}

.k-grid tr:hover {
    cursor: default;
}

.k-grid .k-header {
    padding: .5em;
}

.k-grid .k-animation-container li {
    color: #535b6a;
}

/* Projects & Applications */
#details-container {
    padding: 10px;
}

#details-container h2 {
    margin: 0;
}

#details-container em {
    color: #8c8c8c;
}

#details-container dt {
    margin: 0;
    display: inline;
}
/* Postcode lookup */
#dropdown1, #dropdown2 {
    z-index: 100;
}

.k-i-question {
    color: #FF6915!important;
}
    .k-i-question:hover {
        color: var(--blue) !important;
    }

a {
    color: #31B7BC;
}

.search-input {
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 15px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

.terms-box {
    padding: 10px;
    height: 450px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: ghostwhite;
}

.vertical-center {
    min-height: 50%;
    min-height: 50vh; 
    display: flex;
    align-items: center;
}

.curtain {
    display: none;
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
}

#chooseOrganisationCard {
    display: none;
    position: absolute;
    z-index: 2;
    top: 30%;
}

.pe-none {
    pointer-events: none;
    opacity: 0.4 !important;
}

#searchBtn {
    height: 39px;
    width: 39px;
    margin-top: 1px;
}

.btn-highlight {
    border-radius: 4px;
}
    .btn-highlight:hover {
        background-color: #49BABF;
        color: #fff;
    }

/* Files Request */
.requirement .card {
    background-repeat: no-repeat;
    background-position: top;
    background-size: 10%;
    height: 20vh;
    border: dotted 2px var(--turquoise);
    transition: all linear 0.2s;
}
    .requirement .card .files {
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #f7f7f7;
        transition: all linear 0.2s;
    }

@media (min-width: 1200px) {
    .requirement.empty .card {
        background-image: url("https://mandoncdnstorage.blob.core.windows.net/images/upload-with-text.png");
    }
}

.uploadBtn {
    transition: all linear 0.2s;
}
.requirement .card.dragover .uploadBtn {
    opacity: 0.1;
}
.requirement .card.dragover {
    background-image: url("https://mandoncdnstorage.blob.core.windows.net/images/upload-with-text.png");
    background-color: #57c7e7;
}
        .requirement .card.dragover .files, .requirement.empty .card .files {
            opacity: 0.1;
        }

.requirement .file-details {
    cursor: default;
    align-items: center;
}

.requirement .file {
    padding: 8px;
    transition: all linear 0.2s;
}
    .requirement .file:hover {
        background-color: var(--turquoise);
    }

.requirement input[type="file"] {
    display: none;
}

.requirement .title {
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 12px;
    height: 77px;
    font-size: 22px;    
}

#submitFiles {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1.3rem;
    border: 1px solid #FFF;
}
/* ========================== */