/* input(1290,8): run-time error CSS1036: Expected expression, found ';'
input(1291,8): run-time error CSS1036: Expected expression, found ';'
input(1292,8): run-time error CSS1036: Expected expression, found ';'
input(1293,8): run-time error CSS1036: Expected expression, found ';'
input(1299,8): run-time error CSS1036: Expected expression, found ';'
input(1300,8): run-time error CSS1036: Expected expression, found ';'
input(1301,8): run-time error CSS1036: Expected expression, found ';'
input(1302,8): run-time error CSS1036: Expected expression, found ';'
input(1305,8): run-time error CSS1036: Expected expression, found ';'
input(1306,8): run-time error CSS1036: Expected expression, found ';'
input(1307,8): run-time error CSS1036: Expected expression, found ';'
input(1308,8): run-time error CSS1036: Expected expression, found ';'
input(1326,8): run-time error CSS1036: Expected expression, found ';'
input(1327,8): run-time error CSS1036: Expected expression, found ';'
input(1328,8): run-time error CSS1036: Expected expression, found ';'
input(1329,8): run-time error CSS1036: Expected expression, found ';'
input(4269,8): run-time error CSS1036: Expected expression, found ';'
input(4270,8): run-time error CSS1036: Expected expression, found ';'
input(4271,8): run-time error CSS1036: Expected expression, found ';'
input(4272,8): run-time error CSS1036: Expected expression, found ';' */
/*10/30/2025 11:30:20 AM*/

/* 
 This project follows Inverted Triangle CSS (ITCSS) by 
 Harry "CSS Wizardry" Roberts. Files should be organized 
 by groups. As you go 
 down the list of files you should go from: 
  
   Generic to explicit 
   Far-reaching to localised 
   Low specificity to high specificity 
  
 */

/*
    <h2>Contents</h2>
    <div class="TOC">
    <ol>
        <li><a href='#global'>Global</a>
        <ol>
            <li><a href='#globalcolours'>Colours</a></li>
            <li><a href='#globalimages'>Images</a></li>
            <li><a href='#globaltype'>Typography</a></li>
            <li><a href='#globalflow'>Flow</a></li>
            <li><a href='#breakpoints'>Responsive breakpoints</a></li>
        </ol>
        </li>
        <li><a href='#header'>Page header</a></li>
        <li><a href='#footer'>Page footer</a></li>
        <li><a href='#planning'>Planning pages</a></li>
        <li><a href='#myaccounts'>My account pages</a></li>
        <li><a href='#licensing'>Licensing pages</a></li>
        <li><a href='#ctaxwid'>Council Tax Widget</a></li>
        <li><a href='#findaddwid'>Find Address Widget</a></li>
        <li><a href='#mysrlistwid'>My Service Request Widget</a></li>
        <li><a href='#refusewid'>Refuse Collection Dates Widget</a></li>
        <li><a href='#kovwid'>Key Object Viewer Widget</a></li>
        <li><a href='#mypropwid'>MyProperty and MyNeighbourhood Widgets</a></li>
        <li><a href='#ftsearchwid'>Full Text Search Widget</a></li>
        <li><a hef='#cssfile'>Styling Files</a>
        <ol>
            <li><a href='#eleall'>Elements - All</a></li>
            <li><a href='#elehead'>Header Element</a></li>
            <li><a href='#elefoot'>Footer Element</a></li>
            <li><a href='#eleform'>Form Elements</a></li>
            <li><a href='#elebody'>Body Elements</a></li>
            <li><a href='#elelink'>Links</a></li>
            <li><a href='#elequotes'>Quotes</a></li>
            <li><a href='#eletab'>Tables and List</a></li>
            <li><a href='#pagLay'>Page Layout</a></li>
            <li><a href='#fontawe'>Font Awesome Icons</a></li>
            <li><a href='#qtips'>Qtips</a></li>
            <li><a href='#datepick'>Datepicker</a></li>
            <li><a href='#addpick'>Address Picker</a></li>
            <li><a href='#accord'>Accordions</a></li>
            <li><a href='#alert'>Alerts</a></li>
            <li><a href='#bread'>Breadcrumbs</a></li>
            <li><a href='#civmen'>Civica Menu</a></li>
            <li><a href='#help'>Help</a></li>
            <li><a href='#search'>Search</a></li>
            <li><a href='#advsearch'>Advanced Search</a></li>
            <li><a href='#busy'>Busy Indicator</a></li>
            <li><a href='#kov'>Keyobject Viewer</a></li>
            <li><a href='#docv'>Document Viewer</a></li>
            <li><a href='#docl'>Document List</a></li>
            <li><a href='#openlay'>Open Layers</a></li>
            <li><a href='#myprop'>My Property Styling</a></li>
            <li><a href='#home'>Home Page Styling</a></li>
            <li><a href='#login'>Login Page Styling</a></li>
            <li><a href='#myacc'>MyAccounts Page Styling</a></li>
            <li><a href='#plan'>Planning Page Styling</a></li>
            <li><a href='#licensing'>Licensing Page Styling</a></li>
            <li><a href='#lists'>List Styling</a></li>
        </ol>
       </li>
    </ol>    
*/
/*
   <h2 id='global'>Global</h2>
*/
/*    
    <h3 id='globalcolours'>Global colours</h3>
*/
/*
<h3 id="globalimages">Images</h3>

    <p>For the logo use an image with the same height as the header</p>
<div>
*/
/*
</div>
<script>
    $("script").last().prev("div").find(".civica-content img").css("background-color",$("header").css("background-color"));
</script>

*/
/*
<h3 id="globaltype">Typography</h3>
*/
/*  
    <h3 id='globalflow'>Global flow</h3>
*/
/* 
    <p>Control the spacing round certain elements.</p>

    <p>The civica-content class can be used to denote seperate sections of content, for example some instructions, or a button group.</p>
    <p>The content class will have the default spacing applied to the base.</p>

    <div class="civica-content" style="border: 1px dotted lightgrey">Example text in civica-content.  Below are some standard buttons</div>
    <div class="civica-content">
        <input type="button" value="example button" />
        <input type="button" value="example button 2" />
    </div>
*/
/* 
    <h2 id="header">Page Header</h2>
*/
/* 
    <h2 id="footer">Page footer</h2>
*/
/*
    <div class="civica-content">
    <h2 id="breakpoints">Responsive breakpoints</h2>
    <ul>
<li>Phones < @breakpoint-small</li>
<li>Small device tables >= breakpoint small</li>
<li>Medium device desktops >= breakpoint medium</li>
<li>Large device desktops >= breakpoint large</li>
    </ul>
    </div>
*/
/* 
    <h2 id="planning">Planning</h2>
    <p>For best results use an image with a ratio of 4:1 (width:height)</p>
    <p>E.g. 1380px by 345px</p>
*/
/* 
    <h2 id="myaccounts">My Accounts</h2>
    <p>For best results use an image with a ratio of 4:1 (width:height)</p>
    <p>E.g. 1380px by 345px</p>
*/
/* 
    <h2 id="licensing">Licencing</h2>
    <p>For best results use an image with a ratio of 4:1 (width:height)</p>
    <p>E.g. 1380px by 345px</p>
*/
/* 
    <h2 id="booking">Booking</h2>
    <p>For best results use an image with a ratio of 4:1 (width:height)</p>
    <p>E.g. 1380px by 345px</p>
*/
/* 
    <h2 id="blue-badge">Blue Badges</h2>
    <p>For best results use an image with a ratio of 4:1 (width:height)</p>
    <p>E.g. 1380px by 345px</p>
*/
/*
    <h2 id="ctaxwid">Council Tax Widget</h2>
    <p>Default styling for the Council Tax Widget.  This widget displays generic band/charge data only.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
     <div id="mycounciltaxwidget" class="civica-loading"><h4>Band</h4>  D  <h4>Current Council Tax Annual Charge (£)</h4>  £175  </div>
    </div>  
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="findaddwid">Find Address Widget</h2>
    <p>Default styling for the Find Address Widget.  This widget searches for addresses based on the supplied search criteria, allows for the selection from anm address list and provides the ability to add new address.</p>
    <p><a href="#addpick">Address Finder Example</a><p> 
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="mysrlistwid">My Service Request List Widget</h2>
    <p>Default styling for the My Service Request List Widget.  TThis widget displays a list of Service Requests (processes) associated with the current authenticated user.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
     <div class="serviceRequestsWidget civica-filter-and-results-page" data-bind="showbusy: IsLoading">
    <div id="serviceRequestsFilterDiv" class="serviceRequestsFilterDiv" data-bind="if: Config().showFilter">
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.list.filterhead'">Filter Options</div>
        <ul id="serviceRequestsFilterProcessStatusUl" class="serviceRequestsFilterUl" data-bind="foreach: Filters">
            <li>
                <input type="checkbox" data-bind="attr: { id : 'processStatusInput' + $index() }, checked: Selected">
                <label data-bind="attr: { for : 'processStatusInput' + $index() }, text: Description" for="">Active</label>
            </li>
        
            <li>
                <input type="checkbox" data-bind="attr: { id : 'processStatusInput' + $index() }, checked: Selected">
                <label data-bind="attr: { for : 'processStatusInput' + $index() }, text: Description" for="">Complete</label>
            </li>
        
            <li>
                <input type="checkbox" data-bind="attr: { id : 'processStatusInput' + $index() }, checked: Selected">
                <label data-bind="attr: { for : 'processStatusInput' + $index() }, text: Description" for="">With Me</label>
            </li>
        
            <li>
                <input type="checkbox" data-bind="attr: { id : 'processStatusInput' + $index() }, checked: Selected">
                <label data-bind="attr: { for : 'processStatusInput' + $index() }, text: Description" for="">Bookings</label>
            </li>
        
            <li>
                <input type="checkbox" data-bind="attr: { id : 'processStatusInput' + $index() }, checked: Selected">
                <label data-bind="attr: { for : 'processStatusInput' + $index() }, text: Description" for="">Report it</label>
            </li>
        </ul>
    </div><div>
        <div id="resultCount" class="resultCount">
            <div class="civicasubheader">
                <span class="civica-servicerequestcountpre" data-bind="msg: 'serviceRequest.list.countprefix'">Showing</span>
                <span class="civica-servicerequestcount" data-bind="text: CountText">1-2 of 2 </span>
                <span class="civica-servicerequestcountpost" data-bind="msg: 'serviceRequest.list.countpostfix'">Results</span>
            </div>
        </div>
        <div id="sortBy" class="sortBy" data-bind="if: HasSortItems">
            <label for="sort" class="sortByLabel" data-bind="msg: 'serviceRequest.list.sortlabel'">Sort by</label>
            <select class="sortByDropdown" data-bind="value: SelectedSort,  options: SortOptions, optionsValue: 'Code', optionsText: 'Desc'"><option value="ProcessStartDate:Desc">Newest Service Requests</option><option value="ProcessStartDate:Asc">Oldest Service Requests</option></select>
        </div>
        <!-- ko with: List -->
        <div class="civica-servicerequests ui-accordion ui-widget ui-helper-reset" data-bind="foreach: ServiceRequests" role="tablist">
            <div class="civica-servicerequestitem" data-bind="controller: SubController, controllerElement: 'div', controllerOptions: $root.Config().model"><div><div class="civica-servicerequest">
    <div class="civicaaccordionheader WithMe ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" data-bind="css: {WithMe: WithMe}" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
        <div data-bind="text: ProcessName, attr: {title: ProcessName}" title="Report It Noise Nuisance">Report It Noise Nuisance</div>
        <div>
            <span data-bind="text: Reference">Mrs Susan Thomas (14 Esmond Terrace, Leeds, West Yorkshire, LS12 1XE)</span>
        </div>
        <div>
            <span data-bind="date: ProcessStartDate">01/02/2016</span>
        </div>
        <div>
            <span data-bind="text: WebAlias">Awaiting Noise Diary Entry 1</span>
        </div>
    </div>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: table;">
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.contact.duedate'">Request Due Date</div>
        <span data-bind="datedefault: ProcessDueDate">01/02/2016</span>
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.contact.completedate'">Request Completion Date</div>
        <span data-bind="datedefault: CompDate">-</span>
        <div>
            <a class="civicakeyobjectviewerlink" data-bind="msg: 'serviceRequest.reportit.documents', attr: { href: ViewKeyObjectUrl }" href="">Click here for more information and related documents</a>
        </div>
        <!-- ko if: WithMe()-->
        <div class="civicaprocessviewerdiv" data-bind="if: IsActive">
            <a class="civicaprocessviewerlink" data-bind="msg: 'serviceRequest.contact.open', attr: { href: ViewProcessUrl }" href="">Click here to open the form</a>
        </div>
        <!-- /ko -->
    </div>
</div>
</div></div>
        
            <div class="civica-servicerequestitem" data-bind="controller: SubController, controllerElement: 'div', controllerOptions: $root.Config().model"><div><div class="civica-servicerequest">
    <div class="civicaaccordionheader ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons ui-state-hover" data-bind="css: {WithMe: WithMe}" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <div data-bind="text: ProcessName, attr: {title: ProcessName}" title="Missed Waste Collection">Missed Waste Collection</div>
        <!-- ko with: KeyObject -->
        <div>
            <span data-bind="KeyObjectField: 'CaseReference'">2016/01/00001</span>
        </div>
        <!-- /ko -->
        <div>
            <span data-bind="date: ProcessStartDate">31/01/2016</span>
        </div>
        <div>
            <span data-bind="text: WebAlias">Pending response from Kier</span>
        </div>
    </div>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;">
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.reportit.duedate'">Request Due Date</div>
        <span data-bind="datedefault: ProcessDueDate">09/02/2016</span>
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.reportit.completedate'">Request Completion Date</div>
        <span data-bind="datedefault: CompDate">-</span>
        <!-- ko with: KeyObject -->
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.reportit.casetype'">Case Type</div>
        <span data-bind="KeyObjectField: 'CaseType'">MISCOL</span>
        <div class="civicasubheader" data-bind="msg: 'serviceRequest.reportit.description'">Case Description</div>
        <span data-bind="KeyObjectField: 'CaseDescription'">Timespan: TodayContainer: Garden waste - communalAdditional Info:</span>
        <!-- /ko -->
        <div>
            <a class="civicakeyobjectviewerlink" data-bind="msg: 'serviceRequest.reportit.documents', attr: { href: ViewKeyObjectUrl }" href="/my-requests/keyobject-viewer/?RefType=ReportItCase&amp;KeyNo=107">Click here for more information and related documents</a>
        </div>
        <!-- ko if: WithMe()--><!-- /ko -->
    </div>
</div>
</div></div>      
        </div>
        <div class="civica-servicerequestspager" style="height: 0px;"></div>
        <!-- /ko -->
    </div>
</div>
    </div>  
    <p><a href="#top">Back to top of page</a></p>

*/
/*
    <h2 id="refusewid">Refuse Collection Dates Widget</h2>
    <p>Default styling for the Refuse Collection Dates Widget.  The widget displays the different refuse collection dates associated with the logged in user.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
     <div id="myrefusewidget" class="civica-loading"><h4>Normal collection day</h4>  Wednesday  <h4>Next black bin collection</h4>  03-02-2016  <h4>Next green recycling collection</h4>  10-02-2016  <h4>Normal garden waste collection day</h4>  Tuesday  <h4>Next garden waste collection</h4>  02-02-2016  </div>
    </div>  
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="kovwid">Key Object Viewer Widget</h2>
    <p>Default styling for the Key Object Viewer Widget.  This widget displays KeyObject (Case) Information.</p>
    <p><a href='#kov'>Key Object Viewer Example</a></p>  
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="mypropwid">MyProperty and MyNeighbourhood Widget</h2>
    <p>Default styling for the both these widgets.  The MyProperty widget displays the property and map information of the logged in user.  The MyNeighbourhood Widget displays information regarding conservation areas, listed buildings, etc.</p>
    <p><a href='#myprop'>Widget Examples</a></p>  
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="ftsearchwid">Full Text Widget</h2>
    <p>Default styling for the Free Text Widget.  This is how the free text field for searching can be rendered.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
      For example
    <div class="fulltextsearchwidget"><div class="civicafulltextsearch">
    <input type="text" class="searchbox" data-bind="value: SearchText, valueUpdate: 'afterkeydown', enterKey: EnterPressed, placeholder: 'widget.forms.fulltextsearch.defaulttext', msgapp: 'Core'" placeholder="E.g. Name / Address"><button type="button" class="searchbutton" data-bind="click: onSearch" value="Search"><i class="fa fa-search"></i></button>  
    </div></div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/
/*
    <h2 id="lists">List Styling</h2>
    <p>Default styling for Lists.  In this section we specify the styling we have created for lists.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
      For example
     <p>Thumbnail List - This is a list with an image of the left and text on the right of the image.  Please note the border has been added here placeholder purposes</p>
    <ul class="civica-thumbnaillist" aria-atomic="true" aria-live="polite" aria-relevant="all"><li class="civica-thumbnailitem"><div class="civica-thumbnailrow"><canvas width="125" height="125" style="border: 1px solid;"></canvas><div class="civica-thumbnailtext"><button>Remove</button></div></div></li></ul>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/
/* END */
/* This file needs the END bit at the end*/
/* 
 Settings store all variables, config switches, etc. 
 Split up into logical sections, the smaller and simpler the better. 
 */

/*
    //<h2>Settings - Fonts</h2>
    //<p style ='color:red'>Need more information on what this is for</p> 
    //<p><a href="#top">Back to top of page</a></p>

*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Regular/OpenSans-Regular.eot?v=QlPr7jZhfWc6T4wTdoksdbBbWjs&v=1.1.0");
  src: url("../fonts/Regular/OpenSans-Regular.eot?v=QlPr7jZhfWc6T4wTdoksdbBbWjs&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Regular/OpenSans-Regular.woff2?v=idvwOeYnDgk9lz1J7jFgx0PgVAg&v=1.1.0") format("woff2"), url("../fonts/Regular/OpenSans-Regular.woff?v=63mALDBpwunpu1ILscEQZt07h_E&v=1.1.0") format("woff"), url("../fonts/Regular/OpenSans-Regular.ttf?v=AFaLC07Zucy5Gvd03jAb3aSz7QQ&v=1.1.0") format("truetype"), url("../fonts/Regular/OpenSans-Regular.svg?v=S8mgiImaQee3cRVyoFxe6nd_F7U&v=1.1.0#Regular") format("svg");
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Semibold/OpenSans-Semibold.eot?v=efwlBaMlkul8s_ZxkIEpWtvDxtU&v=1.1.0");
  src: url("../fonts/Semibold/OpenSans-Semibold.eot?v=efwlBaMlkul8s_ZxkIEpWtvDxtU&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Semibold/OpenSans-Semibold.woff2?v=AtUrbGFiJu3_xig04ZXT9jv2Gr0&v=1.1.0") format("woff2"), url("../fonts/Semibold/OpenSans-Semibold.woff?v=qJ9VWR-41uFGyaGU38M8C9qlasA&v=1.1.0") format("woff"), url("../fonts/Semibold/OpenSans-Semibold.ttf?v=oh-ryNJqS5MjdnVdEQFFbQ8gztc&v=1.1.0") format("truetype"), url("../fonts/Semibold/OpenSans-Semibold.svg?v=JXOLsHmmH1i7ZqZQupLX4K0U3Bs&v=1.1.0#Semibold") format("svg");
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.eot?v=ImkBsOUtOiDJk2AeM25hmX-QgK0&v=1.1.0");
  src: url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.eot?v=ImkBsOUtOiDJk2AeM25hmX-QgK0&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.woff2?v=UBBdFNYnaaLrsg1ZmVUUalBfdcY&v=1.1.0") format("woff2"), url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.woff?v=3NWhNRbXwAaSxMeBWn7_9MU3Uk8&v=1.1.0") format("woff"), url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.ttf?v=J02uJn53_8UpBJAc-OqY_RKpVUc&v=1.1.0") format("truetype"), url("../fonts/SemiBoldItalic/OpenSans-SemiBoldItalic.svg?v=LkqTxrwbcfa1t6rR-jizE9j2XY0&v=1.1.0#SemiBoldItalic") format("svg");
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Bold/OpenSans-Bold.eot?v=n2bTY03RNIE1_Ui0SY0F-yj9S8A&v=1.1.0");
  src: url("../fonts/Bold/OpenSans-Bold.eot?v=n2bTY03RNIE1_Ui0SY0F-yj9S8A&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Bold/OpenSans-Bold.woff2?v=F5MUDJEYzsq_BhwYyiL24Uk2Nw8&v=1.1.0") format("woff2"), url("../fonts/Bold/OpenSans-Bold.woff?v=d7i6jkz9h-g4ZIrSTKtCIUCgQZQ&v=1.1.0") format("woff"), url("../fonts/Bold/OpenSans-Bold.ttf?v=hPBsYNk_G380VC53bE08k9vzs-s&v=1.1.0") format("truetype"), url("../fonts/Bold/OpenSans-Bold.svg?v=4yGoOCJrvu2UlT_6UupNM-oH75A&v=1.1.0#Bold") format("svg");
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/BoldItalic/OpenSans-BoldItalic.eot?v=lb821BspcQbKuGLWhYNBVuMoJfg&v=1.1.0");
  src: url("../fonts/BoldItalic/OpenSans-BoldItalic.eot?v=lb821BspcQbKuGLWhYNBVuMoJfg&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/BoldItalic/OpenSans-BoldItalic.woff2?v=KdIF4gQ90K69kSuQVwEeVcAV38w&v=1.1.0") format("woff2"), url("../fonts/BoldItalic/OpenSans-BoldItalic.woff?v=St3AYK-1Dh9g6PTH2opaOSU5eVM&v=1.1.0") format("woff"), url("../fonts/BoldItalic/OpenSans-BoldItalic.ttf?v=wroLujSFGMbyXnSnv5E6claNI-U&v=1.1.0") format("truetype"), url("../fonts/BoldItalic/OpenSans-BoldItalic.svg?v=H8oaiYYN7dz-gXx8-mb3tdqQPCI&v=1.1.0#BoldItalic") format("svg");
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Italic/OpenSans-Italic.eot?v=x8azgNYOwBFa6KfqoPyPuYZ-L64&v=1.1.0");
  src: url("../fonts/Italic/OpenSans-Italic.eot?v=x8azgNYOwBFa6KfqoPyPuYZ-L64&#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Italic/OpenSans-Italic.woff2?v=szMqWbOUsSq7QLOD6RjTxD14ssY&v=1.1.0") format("woff2"), url("../fonts/Italic/OpenSans-Italic.woff?v=MmpfODOOEOsbQws_22zmIRADY-I&v=1.1.0") format("woff"), url("../fonts/Italic/OpenSans-Italic.ttf?v=SQHbn5J3XtHkQj9B0ynyXpG5fpo&v=1.1.0") format("truetype"), url("../fonts/Italic/OpenSans-Italic.svg?v=JHWAmf899WV5qBhadZpRPnX9jB8&v=1.1.0#Italic") format("svg");
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("../fonts/Ubuntu-Regular.eot?v=pbvXcKMG5Mo1CWNqvI1h8YHhDDY") format("embedded-opentype"), url("../fonts/Ubuntu-Regular.woff2?v=Oh7IqTPZZGo0PwsTEquDkF8znH0") format("woff2"), url("../fonts/Ubuntu-Regular.woff?v=oZ4-iSyvX7ScTdIdu8DvxpNqTTU") format("woff"), url("../fonts/Ubuntu-Regular.ttf?v=7ai4OBh7QlsK05n7lHWxQfmrRVI") format("truetype"), url("../fonts/Ubuntu-Regular.svg?v=vW7sE26Z-XV842Ba6iuHzBmEEzs") format("svg");
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), url("../fonts/Ubuntu-Medium.eot?v=NUfRlJciZuI0Jq-9dmw06yuUNm4") format("embedded-opentype"), url("../fonts/Ubuntu-Medium.woff2?v=74e329VPeecsmsvSodg3HRZxgJ0") format("woff2"), url("../fonts/Ubuntu-Medium.woff?v=NiRbTnmrAyaIFSQ86Sx_ulwLiCw") format("woff"), url("../fonts/Ubuntu-Medium.ttf?v=9t2xlXE-z1pRQJ4Kjol5ZPpYKgo") format("truetype"), url("../fonts/Ubuntu-Medium.svg?v=gsMDa19lyXEJdl4T18E6yDreBgw") format("svg");
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), url("../fonts/Ubuntu-Bold.eot?v=G5azt5TBAs8oKRT41LOBLkUxdKs") format("embedded-opentype"), url("../fonts/Ubuntu-Bold.woff2?v=qCfVnPBXQWP7KNVxOMPoGTwPg4s") format("woff2"), url("../fonts/Ubuntu-Bold.woff?v=IGdTYiaOxX6EeE76NXx_Ff2XXs4") format("woff"), url("../fonts/Ubuntu-Bold.ttf?v=B1BcnDKOxHDxhCpeWt3TWLLEuHI") format("truetype"), url("../fonts/Ubuntu-Bold.svg?v=zQmPHchJv6x_kcmOA4c2YXFIQJg") format("svg");
}
/*
    Tools stores all the mixins
*/

/*
Generic rules are resets
*/

/* 
 Elements are rules for classless HTML tags. 
 There should be no classes at this layer, only further into down triangle. 
 */

/*
    <h2 id='eleall'>General Elements</h2>
    <p>CSS File:<strong>element.all.less</strong></p>
    <p>General element placeholder</p>  
*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*
    <h2 id='elebody'>Body Elements</h2>
    <p>CSS File:<strong>element.body.less</strong></p>
    <p>This file contains the element styles for html and body. Here the font family, colour,font size and margins styles are specified.</p>
    <p><a href="#top">Back to top of page</a></p>
*/

html,
body {
  height: 100%;
  margin: 0;
}
body {
  font-family: "Open Sans", sans-serif;
  background: #FFFFFF;
  color: #3a3a3a;
  font-size: 18px;
}
/* Wrapper for page content to push down footer */

body > div:first-of-type {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -75px;
  /* Pad bottom by footer height */
  padding: 0 0 75px;
}
/*
    <h2 id='elehead'>Header Element</h2>
    <p>CSS File: <strong>element.header.less</strong></p>
    <p>This file contains the styling for the header element.</p> 
    <div style='border: 1px solid #000000;padding:15px'>
     For example
    <p></p>
    <header>
            
            <a href="/">
                <img src="/media/logo.png" alt="Home Page">
            </a>
            
            <a class="hidden-medium-upwards" onclick="if ($(this).next('nav').hasClass('hidden-small-only')) { $(this).next('nav').hide().toggleClass('hidden-small-only').slideDown(); } else { $(this).next('nav').slideUp(function () { $(this).show().toggleClass('hidden-small-only'); }) }; $('i', this).toggleClass('fa-flip-vertical');">Menu<i class="fa fa-caret-down"></i></a>
            <nav class="hidden-small-only">
                                    <a href="/planning/">Planning</a>
                <a href="/taxi-licensing/">Taxi Licensing</a>
                <a href="/my-property/">My Property</a>
                <a href="/my-accounts/">My Accounts</a>
                <a href="/my-requests/">My Requests</a>

            </nav>
            <div class="civica-authentication"></div>
        </header>
    </div>
    <p><a href="#top">Back to top of page</a></p>

*/

header {
  background-color: #6D2077;
  width: 100%;
  position: relative;
  padding: 5px 0 5px 30px;
  display: flex;
  justify-content: space-between;
}
header > nav,
header a {
  display: inline;
  margin-bottom: 0;
}
header a,
header a:visited {
  color: #FFFFFF;
}
header a:visited {
  text-decoration: none;
}
header > a {
  display: inline;
  margin-right: 15px;
}
header > nav {
  display: inline;
  display: flex;
  flex-grow: 1;
  margin-left: 5%;
  margin-right: 15px;
  align-items: center;
  flex-wrap: wrap;
}
header > nav a {
  font-size: 16px;
  white-space: nowrap;
  margin-right: 15px;
  flex-grow: 1;
  max-width: 120px;
  text-align: center;
}
header a:hover {
  color: #b3b3b3;
  text-decoration: none;
}
header > nav a.selected {
  color: #f7619a;
}
header > nav a.selected {
  font-weight: 700;
}
header > div.civica-authentication {
  display: inline;
  margin-top: 12px;
  margin-right: 15px;
  color: #FFFFFF;
}
header > div.civica-authentication div {
  display: block;
}
header > div.civica-authentication .btn {
  margin-top: 0;
}
header > div.civica-authentication .civica-hello {
  padding: 7px 10px 7px 20px;
  background-color: #093e52;
  border-radius: 3px;
  cursor: pointer;
}
header > div.civica-authentication .civica-hellotext {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header > div.civica-authentication .civica-hellotext::after {
  font-family: FontAwesome;
  content: "\f0d7";
  padding-left: 15px;
}
header > div.civica-authentication .civica-logout {
  position: absolute;
  right: 0px;
  z-index: 2;
  display: none;
  background-color: #6D2077;
}
header > div.civica-authentication .civica-login i {
  display: none;
}
header > div.civica-authentication .civica-login a span {
  padding-left: 0px;
}
header > div.civica-authentication .civica-logout a[role="button"],
header > div.civica-authentication .civica-logout button {
  padding: 5px 15px;
  margin: 0;
  white-space: nowrap;
  background-color: #6D2077;
  width: 100%;
  border-bottom: 1px inset #b3b3b3;
}
header > a.skip-to-content {
  position: absolute;
  bottom: 4px;
  font-size: 9pt;
  left: 45px;
  text-decoration: underline;
  color: transparent;
}
header > a.skip-to-content:focus {
  color: white;
}
@media (max-width: 767px) {
  header {
    padding: 5px 5px;
    flex-wrap: wrap;
  }
  header > a:nth-of-type(2) {
    flex-basis: 100%;
    order: 3;
  }
  header > nav {
    margin-left: 0;
    margin-right: 0;
    flex-grow: 1;
    order: 4;
    display: block;
  }
  header > nav a {
    margin-top: 15px;
    display: block;
    text-align: inherit;
  }
  header > div.civica-authentication {
    order: 2;
    margin-right: 0;
  }
}
/*
    <h2 id='elefoot'>Element - Footer</h2>
    <p>CSS File:<strong>element.footer.less</strong></p>
    <p>This file contains the styles used for the footer element</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
     <footer>
            <ul>
                <li>©Civica 2015</li>
            </ul>
            <ul>
                <li><a href="">Contact us</a></li>
                <li><a href="">Accessibility</a></li>
                <li><a href="">Terms</a></li>
                <li><a href="">Privacy and Cookies</a></li>
                <li><a href="/styles">Styles</a></li>

            </ul>
    </footer>
    </div>
    <p><a href="#top">Back to top of page</a></p>

*/

footer {
  color: #FFFFFF;
  background-color: #6D2077;
  padding: 15px 0;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer a {
  text-decoration: none;
}
footer a,
footer a:visited,
footer a:hover {
  color: #FFFFFF;
}
footer li {
  margin-right: 15px;
  white-space: nowrap;
}
footer ul {
  margin-left: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer ul,
footer li {
  display: inline-block;
}
@media (min-width: 768px) {
  footer ul {
    margin-left: 30px;
  }
}
/*
    <h2 id='eleform'>Form Elements</h2>
    <p>CSS File:<strong>element.form.less</strong></p>
    <p>This file contains the styles for form elements - e.g input, textarea, select, button. These should only be overridden if there is a great need for it. </p>  
    <div style='border: 1px solid #000000;padding:15px'>
     For Example
    <h3>Select Box</h3>
    <div class="civicaformfield civicainputfield" data-fieldname="title"><div class="civicaQuestion"><label for="view81" id="CivicaFormLabel-1">Title *</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><select id="view81" data-bind="value: Value,  options: PickListItems, optionsText: 'Desc', optionsValue: 'Code', optionsCaption: ' ', attr: { disabled: IsDisabled, 'aria-labelledby': 'CivicaFormLabel-'  + GlobalID()  }, style: { width: Width}" aria-labelledby="CivicaFormLabel-1"><option value=""> </option><option value="MR">Mr</option><option value="MRS">Mrs</option><option value="MISS">Miss</option><option value="MS">Ms</option><option value="DR">Doctor</option><option value="SIR">Sir</option></select></div></div>
    <h3>Multi-Select Box</h3>
    <p>Displays four rows</p>
    <div data-bind="controller: $data.getDefaultViewModel(), css: inputClass" class="civica-input civicakeyobjectsearch-appplancase-decisionlevelcode"><div><div class="civicaQuestion"><label for="view757" id="CivicaFormLabel-16">Decision level</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><select multiple="multiple" id="view757" data-bind="options:PickListItems, optionsText: 'Desc', selectedOptions: SelectedItems, attr: { disabled: IsDisabled, 'aria-labelledby': 'CivicaFormLabel-'  + GlobalID()  }, style: { width: Width}" aria-labelledby="CivicaFormLabel-16"><option value="">Area Committee</option><option value="">Committee</option><option value="">DC Sub Committee</option><option value="">Delegated</option><option value="">Full Committee</option><option value="">Senior Officer</option></select></div></div></div>
    <h3>Input Field</h3>
    <div class="civicaformfield civicainputfield" data-fieldname="firstname"><div class="civicaQuestion"><label for="view82" id="CivicaFormLabel-2">Forename *</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><input type="text" id="view82" data-bind="value: Value, valueUpdate: 'afterkeydown', enterKey: EnterPressed, attr: { disabled: Disabled, 'aria-labelledby': 'CivicaFormLabel-'  + GlobalID() }, style: { width: Width}, placeholder: PlaceholderText" aria-labelledby="CivicaFormLabel-2" placeholder=""></div></div>
     <h3>Buttons</h3>
     <p>All button styling should be consistent.  Use a[role="button"], input[type="submit"], input[type="button"], button, .btn </p>
     <p><a href="javascript:void(0)" data-bind="css: {'ui-state-disabled': Disabled }, hoverToggle: 'ui-state-hover'" role="button"><span class="ui-button-text" data-bind="text: LinkText">Next</span></a></p>
     <h3>Textarea Field</h3>
     <div class="civicaformfield civicainputfield" data-fieldname="CONTFU2"><div class="civicaQuestion"><label for="view118" id="CivicaFormLabel-5">Please give us a few details about what happened:</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><textarea id="view118" type="text" data-bind="value: Value, valueUpdate: 'afterkeydown', attr: { disabled: IsDisabled, 'aria-labelledby': 'CivicaFormLabel-'  + GlobalID() }, style: { width: Width, height: Height}" aria-labelledby="CivicaFormLabel-5"></textarea></div></div>
    <h3>Radio Button</h3>
    <div class="civicaformfield civicainputfield" data-fieldname="Asylumseeker"><div class="civicaQuestion"><label for="view81" id="CivicaFormLabel-3">Are you an asylum seeker or have been sponsored to be in the UK? *</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><div class="civicaRadioList" data-bind="foreach: PickListItems">
    <!-- ko if: $root.RenderHorizontal()==false -->
    <div>
        <input type="radio" data-bind="attr: { disabled: $root.Disabled, id: $root.FieldName() + $index(), name: $root.FieldName, value: Code, 'aria-labelledby': 'CivicaFormLabel-' + $root.GlobalID() + '-' + $index(), 'data-radionname': Desc }, checked: $root.Value" id="Asylumseeker0" name="Asylumseeker" value="N" aria-labelledby="CivicaFormLabel-3-0" data-radionname="No">
        <label data-bind="text: Desc, attr: { 'for': $root.FieldName() + $index(), id: 'CivicaFormLabel-' + $root.GlobalID() + '-' + $index() }" for="Asylumseeker0" id="CivicaFormLabel-3-0">No</label>
    </div>
    <!-- /ko -->    
    <!-- ko if: $root.RenderHorizontal()==true --><!-- /ko -->    

    <!-- ko if: $root.RenderHorizontal()==false -->
    <div>
        <input type="radio" data-bind="attr: { disabled: $root.Disabled, id: $root.FieldName() + $index(), name: $root.FieldName, value: Code, 'aria-labelledby': 'CivicaFormLabel-' + $root.GlobalID() + '-' + $index(), 'data-radionname': Desc }, checked: $root.Value" id="Asylumseeker1" name="Asylumseeker" value="Y" aria-labelledby="CivicaFormLabel-3-1" data-radionname="Yes">
        <label data-bind="text: Desc, attr: { 'for': $root.FieldName() + $index(), id: 'CivicaFormLabel-' + $root.GlobalID() + '-' + $index() }" for="Asylumseeker1" id="CivicaFormLabel-3-1">Yes</label>
    </div>
    <!-- /ko -->    
    <!-- ko if: $root.RenderHorizontal()==true --><!-- /ko -->    
</div>
</div></div>
    <h3>Labels</h3>
    <label for="view73" id="CivicaFormLabel-2">Which part of the building is the problem located? *</label>
    </div>
    <p><a href="#top">Back to top of page</a></p>


*/

input,
textarea,
keygen,
select,
button {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  min-width: 250px;
  min-height: 40px;
  padding-left: 15px;
  width: 80%;
  max-width: 500px;
}
textarea {
  min-height: 100px;
}
input[type=radio] {
  min-width: 30px;
  width: 30px;
  vertical-align: middle;
}
input[type=radio] + label {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 15px;
  vertical-align: sub;
}
input[type=checkbox] {
  min-width: 30px;
  width: 30px;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
}
a[role="button"],
input[type="submit"],
input[type="button"],
button,
.btn {
  background: #093e52;
  color: #ffffff;
  box-sizing: border-box;
  line-height: 40px;
  min-height: 40px;
  display: inline-block;
  border: none;
  cursor: pointer;
  padding: 0 15px;
  margin-right: 5px;
  margin-top: 15px;
  text-align: center;
  width: auto;
  min-width: auto;
}
a[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.btn:hover {
  background: #041b24;
  color: #ffffff;
}
input[disabled="disabled"],
.disabled-btn {
  word-break: break-all;
  max-height: 100px;
  background-color: #626e73;
  cursor: default;
}
input[disabled="disabled"]:hover,
.disabled-btn:hover {
  background: #626e73;
  color: #FFFFFF;
}
.buttongroup {
  display: flex;
}
button.searchbutton {
  min-width: 60px;
  width: 60px;
  margin: 0;
}
input[type="color"] {
  vertical-align: top;
  min-width: 40px;
  width: 40px;
  padding: 0 5px;
}
form {
  min-width: 320px;
}
label {
  clear: left;
  display: block;
  margin-bottom: 5px;
  margin-top: 15px;
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  padding-left: 0;
}
@media (max-width: 767px) {
  a[role="button"],
  input,
  select,
  textarea {
    width: 100%;
  }
}
h1 + p,
h2 + p {
  margin-top: 0;
}
input[type=checkbox],
input[type=radio] {
  margin-left: 0px;
}
input[type=CheckBox] + label,
input[type=radio] + label {
  display: inline;
  position: relative;
  padding-left: 10px;
}
input[type=CheckBox] + label {
  top: 8px;
}
/*
    <h2>Heading Elements</h2>
    <p>CSS File:<strong>element.headings.less</strong></p>
    <p>This file contains the element styles for headings e.g h1, h2.  It defines the size, weight and font.  H1 and H2 should not be used within the widgets.  These elements should be handled by the page content management system.  So H2 should be used to introduce the widget on the page and then H3, H4 can be used within the widgets.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
     <h1>H1</h1>
     <h2>H2</h2>
     <h3>H3</h3>
     <h4>H4</h4>
     <h5>H5</h5>
    </div>  
    <p><a href="#top">Back to top of page</a></p>

*/

h1,
h2,
h3,
h4,
h5,
h6,
.civicamainheader,
.civicasubheader {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  color: #093e52;
  font-size: 26px;
  margin: 30px 0 15px 0;
}
h1,
h2,
.civicamainheader {
  margin: 30px 0 15px 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
  margin-top: 15px;
}
h3,
h4,
h5,
h6,
.civicasubheader {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}
h3,
.civicasubheader {
  margin: 15px 0 5px 0;
  font-size: 20px;
}
h4,
h5,
h6 {
  margin: 15px 0 0 0;
  font-size: 18px;
  font-weight: 600;
}
h1 {
  font-size: 38px;
}
/*
    <h2 id='elelink'>Elements - Links</h2>
    <p>CSS File:<strong>element.links.less</strong></p>
    <p>This file contains the element styles for html links.  Links should all be consistent therefore should use the styling defined here. </p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
    <p></p>
    <a href="">Search for applications</a>
    </div>  
    <p><a href="#top">Back to top of page</a></p>

*/

a {
  color: #1c5571;
  text-decoration: none;
  margin-bottom: 5px;
  display: inline-block;
}
a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.civica-content a {
  text-decoration: underline;
}
/*
    <h2 id='elequotes'>Elements - quotes</h2>
    <p>CSS File:<strong>element.quotes.less</strong></p>
    <p>This file contains the element styles for quotes and citations</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
    <p></p>
    
    <blockquote><h2>Aren’t all these quotes the same?</h2><p>No. First of all: quote ≠ block quote ≠ pull quote.</p><a href="https://www.smashingmagazine.com/2008/06/block-quotes-and-pull-quotes-examples-and-good-practices/">Sven Lennartz, Block Quotes and Pull Quotes: Examples and Good Practices</a>

    </div>  
    <p><a href="#top">Back to top of page</a></p>

*/

blockquote {
  margin-left: 60px;
}
blockquote:before {
  display: block;
  height: 0;
  content: "“";
  margin-left: -60px;
  font-size: 400%;
  font-family: Cochin, Georgia, "Times New Roman", serif;
  color: #b3b3b3;
}
blockquote a:before {
  content: "- ";
}
/*
    <h2 id='elequotes'>Elements - Emphasized</h2>
    <p>CSS File:<strong>element.emphasized.less</strong></p>
    <p>This file contains the element styles for emphasized elements</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
     For Example
    <p></p>
    
   <em>this is emphasized</em>

    </div>  
    <p><a href="#top">Back to top of page</a></p>

*/

em {
  color: #6a6a6a;
  font-weight: bold;
}
/*
    <h2 id='eletab'>Elements - Tables and List</h2>
    <p>CSS File:<strong>element.tables-and-lists.less</strong></p>
    <p>This file contains the element styles for tables and list.</p> 
    <div style='border: 1px solid #000000;padding:15px'>
     For example
    <p>List</p>
    <ul>
     <li>List 1</li>
     <li>List 2</li>
    </ul>
    <p>Table</p>
    <table>
        <tr>
           <th>Col 1</th>
           <th>Col 2</th>
        </tr>
        <tr>
            <td>Some</td>
            <td>Notes</td>
        </tr>
    </table>
    </div>
    <p><a href="#top">Back to top of page</a></p>


*/

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  color: #3a3a3a;
  padding: 5px;
  text-align: left;
  vertical-align: top;
}
th {
  padding-top: 15px;
}
.pipe-separated li {
  display: inline;
  white-space: nowrap;
}
.pipe-separated li:after {
  content: '|';
  padding-left: 5px;
}
.pipe-separated li:last-of-type::after {
  content: none;
}
.bulletted li {
  font-family: "FontAwesome";
}
.bulletted li > * {
  font-family: "Open Sans", sans-serif;
}
.bulletted li {
  display: table;
}
.bulletted li::before {
  content: '\f054';
  font-family: "FontAwesome";
  padding-right: 15px;
  font-size: 16px;
  display: table-cell;
}
.time-line {
  list-style: none;
  padding: 0;
  padding-left: 1.5em;
  margin-bottom: 60px;
}
.time-line p {
  font-family: "nta", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
}
@media (max-width: 640px) {
  .time-line p {
    font-size: 14px;
    line-height: 1.14286;
  }
}
.time-line > * {
  display: block;
  padding: 0 0 0.7em 2em;
  margin: 0;
  text-transform: none;
  border-left: dotted 0.6em;
}
.time-line > *:before {
  content: "";
  display: block;
  border: 0.3em solid;
  background: white;
  width: 33px;
  margin: 0.5em -3.2em;
}
.time-line > *:first-child {
  padding-top: 0.5em;
  margin-top: 5em;
}
.time-line > *:first-child:before {
  border: 10px solid;
  height: 42px;
  width: 42px;
  border-radius: 1.2em;
  margin: -2.8em -3.45em;
}
.time-line > *:first-child h3 {
  margin-top: 1em;
}
.time-line > *:nth-child(1),
.time-line > *:nth-child(1):before {
  border-color: #f6c21d;
}
.time-line > *:nth-child(2),
.time-line > *:nth-child(2):before {
  border-color: #093e52;
}
.time-line > *:nth-child(3),
.time-line > *:nth-child(3):before {
  border-color: #f7619a;
}
.time-line > *:nth-child(4),
.time-line > *:nth-child(4):before {
  border-color: #f7619a;
}
.time-line > *:nth-child(5),
.time-line > *:nth-child(5):before {
  border-color: #093e52;
}
.time-line > *:nth-child(6),
.time-line > *:nth-child(6):before {
  border-color: #f7619a;
}
.time-line > *:nth-child(7),
.time-line > *:nth-child(7):before {
  border-color: #f7619a;
}
.time-line > * p {
  margin: 0.75em 0;
}
.time-line > * h3 {
  margin-top: -1.3em;
  border-bottom: 0;
}
.time-line > * h3 a {
  color: #0b0c0c;
  text-decoration: none;
}
.time-line > * h3 a:hover {
  text-decoration: underline;
}
.time-line .link-list h3 {
  margin-top: 1em;
}
/* 
 Objects are "formless", in other words invisible to the user, no cosmetics 
    Eg. wrappers, grid systems, etc. 
 This is the first layer of classes 
   Eg. list-inline, ui-list, etc. 
*/

/*
    <h2 id='paglay'>Object - Page Layout</h2>
    <p>CSS File:<strong>object.page-layouts.less</strong></p>
    <p>This file gives a bunch of classes to use for responsive layouts</p>
    <p>Layouts tend to be grouped into the following sizes</p>
    <p>Phones less than 768px  @breakpoint-phone</p>
    <p>Small device tablets greater than or equal to 768px @breakpoint-small</p>
    <p>Medium device desktops greater than or equal to 992px @breakpoint-medium</p>
    <p>Large device desktops greater than or equal 1200px @breakpoint-large</p>  
    <p><a href="#top">Back to top of page</a></p>

*/

.civica-content,
.civica-content-with-menu {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
div.civica-menu {
  margin-left: 15px;
  padding: 0 15px 15px 15px;
}
@media (max-width: 767px) {
  div.civica-menu {
    margin-right: 15px;
  }
}
@media (min-width: 768px) {
  div.civica-content,
  .civica-content-with-menu {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  div.civica-menu {
    padding: 0 30px 15px 30px;
    margin-top: 15px;
    margin-left: 30px;
  }
}
@media (min-width: 992px) {
  div.civica-content-with-menu {
    width: 72%;
    display: inline-block;
    vertical-align: top;
  }
  div.civica-menu {
    width: calc(28% - 15px);
    display: inline-block;
    margin-top: 15px;
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  div.civica-content-with-menu {
    width: 77%;
  }
  div.civica-menu {
    width: calc(23% - 15px);
  }
}
.civica-search-and-results-page {
  margin: 15px;
}
.civica-search-and-results-page > div:nth-child(2) > h2:first-of-type {
  margin-top: 0px;
}
@media (min-width: 768px) {
  .civica-search-and-results-page > div:nth-child(1) {
    width: 50%;
    display: inline-block;
    vertical-align: top;
  }
  .civica-search-and-results-page > div:nth-child(2) {
    width: 50%;
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .civica-search-and-results-page > div:nth-child(1) {
    width: 50%;
  }
  .civica-search-and-results-page > div:nth-child(2) {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .civica-search-and-results-page > div:nth-child(1) {
    width: 40%;
  }
  .civica-search-and-results-page > div:nth-child(2) {
    width: 60%;
  }
}
.civica-content-in-columns {
  margin: 0 5px;
}
@media (min-width: 768px) {
  .civica-content-in-columns {
    margin: 0 30px;
  }
}
@media (min-width: 992px) {
  .civica-content-in-columns {
    _: ; -webkit-column-count: 2;
    _: ; -khtml-column-count: 2;
    _: ; -moz-column-count: 2;
    _: ; column-count: 2;
    margin: 15px 30px;
  }
}
@media (min-width: 1200px) {
  .civica-content-in-columns {
    _: ; -webkit-column-count: 3;
    _: ; -khtml-column-count: 3;
    _: ; -moz-column-count: 3;
    _: ; column-count: 3;
  }
  .civica-content-in-columns-max-2 {
    _: ; -webkit-column-count: 2;
    _: ; -khtml-column-count: 2;
    _: ; -moz-column-count: 2;
    _: ; column-count: 2;
  }
}
.civica-mainpage + * + .civica-content-in-columns h2:first-child,
.civica-mainpage + .civica-content-in-columns h2:first-child {
  margin-top: 0;
}
.civica-mainpage + * + .civica-content-in-columns ul,
.civica-mainpage + .civica-content-in-columns ul {
  margin-bottom: 15px;
}
.civica-content-with-menu .civica-content-in-columns,
.civica-content-with-menu.civica-content-in-columns {
  margin: 0;
}
@media (min-width: 1200px) {
  .civica-content-with-menu .civica-content-in-columns,
  .civica-content-with-menu.civica-content-in-columns {
    _: ; -webkit-column-count: 2;
    _: ; -khtml-column-count: 2;
    _: ; -moz-column-count: 2;
    _: ; column-count: 2;
  }
}
.civica-content-with-menu > h1 {
  margin-top: 0px;
}
.civica-content-in-columns > * {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari */
  page-break-inside: avoid;
  /* Theoretically FF 20+ */
  break-inside: avoid-column;
  /* IE 11 */
  display: table;
  /* Actually FF 20+ */

  width: 100%;
}
.civica-mainpage {
  margin: 0 5px;
  text-align: center;
}
.civica-mainpage input.searchbox {
  max-width: initial;
}
.civica-mainpage > div > a {
  margin-top: 15px;
}
@media (min-width: 768px) {
  .civica-mainpage {
    margin: 0 30px;
  }
}
@media (min-width: 992px) {
  .civica-mainpage {
    position: relative;
    height: 25vw;
    background: url("/media/main-page.jpg?v=6KWq54SRmNoKqC3hIlpQxNxEsSA") no-repeat;
    background-size: cover;
    width: 100%;
    margin: 0;
    color: #F2F2F1;
  }
  .civica-mainpage > div {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    background: rgba(30, 30, 30, 0.8);
    padding: 0px 15px 15px 15px;
    border-radius: 5px;
  }
  .civica-mainpage > div a {
    color: #F2F2F1;
    text-decoration: underline;
  }
  .civica-mainpage > div h1 {
    font-size: 4vw;
    text-align: center;
    color: white;
  }
  .civica-mainpage .civicafulltextsearch input {
    padding-left: 1vw;
    padding-right: 1vw;
    height: 4vw;
    font-size: 2vw;
    line-height: inherit;
    margin: 0;
    width: 90%;
  }
  .civica-mainpage .civicafulltextsearch {
    position: relative;
  }
  .civica-mainpage .civicafulltextsearch button {
    height: 100%;
    position: absolute;
    width: 10%;
  }
  .civica-mainpage .civicafulltextsearch button i {
    font-size: 2vw;
  }
  .civica-mainpage .civicafulltextsearch button {
    width: 5vw;
    line-height: inherit;
  }
}
@media (min-width: 1200px) {
  .civica-mainpage + div {
    width: 90%;
  }
  .civica-mainpage > div a {
    color: #F2F2F1;
  }
}
.civica-mainpage + div li {
  margin: 0;
}
.civica-mainpage .civicabusy > div {
  margin-top: 0;
}
.civica-mainpage .civica-loading {
  min-height: initial;
}
.civica-mainpage .busytext {
  color: transparent;
}
.civica-filter-and-results-page {
  margin: 15px;
}
@media (min-width: 768px) {
  .civica-filter-and-results-page > div:nth-child(1) {
    width: 14%;
    display: inline-block;
    vertical-align: top;
  }
  .civica-filter-and-results-page > div:nth-child(2) {
    width: 85%;
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .civica-filter-and-results-page > div:nth-child(1) {
    width: 14%;
  }
  .civica-filter-and-results-page > div:nth-child(2) {
    width: 85%;
  }
}
@media (min-width: 1200px) {
  .civica-filter-and-results-page > div:nth-child(1) {
    width: 14%;
  }
  .civica-filter-and-results-page > div:nth-child(2) {
    width: 85%;
  }
}
.offpage {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.offpage.focusable:active,
.offpage.focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
}
/* 
 Components are the stuff of UI. Eg. buttons, special titles, etc. 
 These get much more explicitly named: eg. products-list, etc. 
 */

.TOC ol {
  list-style-type: none;
  counter-reset: toc1;
}
.TOC ol li::before {
  content: counter(toc1);
  counter-increment: toc1;
  padding-right: 30px;
}
.TOC ol li ol {
  counter-reset: toc2;
}
.TOC ol li ol li::before {
  content: counter(toc1) ' .' counter(toc2);
  counter-increment: toc2;
  padding-right: 30px;
}
.TOC ol li ol li ol {
  counter-reset: toc3;
}
.TOC ol li ol li ol li::before {
  content: counter(toc1) ' .' counter(toc2) ' .' counter(toc3);
  counter-increment: toc3;
  padding-right: 30px;
}
/*
    <h2 id='fontawe'>Font Awesome Icons</h2>
    <p>CSS File:<strong>component.fontawesome.less</strong></p>
    <p>This file contains styling associated with font awesome icons used within the Civica widgets.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
    <p></p>
    <i class="fa fa-search"></i>
    </div>
    <p><a href="#top">Back to top of page</a></p>
   
*/

/*!
 *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

/* FONT PATH
 * -------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=IRtmqwFmrQJYpAI0ZS0P8m67aRk');
  src: url('../fonts/fontawesome-webfont.eot?v=IRtmqwFmrQJYpAI0ZS0P8m67aRk&#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=gcGyzREcVftefnBoMHsHoW0dfQo&v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=ShGqqGreZTVeNoA2k2oA5KaUcBI&v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=Zj4qEn_zTtgvQRsemGmCrCUD5rU&v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  padding: 0 5px;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */

.fa-lg {
  font-size: 1.333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.285714286em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.142857143em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.142857143em;
  width: 2.142857143em;
  top: 0.142857143em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.857142857em;
}
.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eeeeee;
  border-radius: 0.1em;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}
.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  transform: scale(1, -1);
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */

.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-asc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-desc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-reply-all:before {
  content: "\f122";
}
.fa-mail-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
/*
    <h2 id='qtips'>Qtip</h2>
    <p>CSS File:<strong>component.qtip.less</strong></p>
    <p>This file contains the styling for the qtips.  These are used mostly in forms to identify mandatory fields.</p>  
    <p><a href="#top">Back to top of page</a></p>
  
*/

/*
 * qTip2 - Pretty powerful tooltips - v2.2.1
 * http://qtip2.com
 *
 * Copyright (c) 2014 
 * Released under the MIT licenses
 * http://jquery.org/license
 *
 * Date: Sat Sep 6 2014 09:55 EDT-0400
 * Plugins: tips viewport
 * Styles: core basic css3
 */

.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  display: none;
  max-width: 280px;
  min-width: 50px;
  font-size: 10.5px;
  line-height: 12px;
  direction: ltr;
  box-shadow: none;
  padding: 0;
}
.qtip-content {
  position: relative;
  padding: 5px 9px;
  overflow: hidden;
  text-align: left;
  word-wrap: break-word;
}
.qtip-titlebar {
  position: relative;
  padding: 5px 35px 5px 10px;
  overflow: hidden;
  border-width: 0 0 1px;
  font-weight: bold;
}
.qtip-titlebar + .qtip-content {
  border-top-width: 0 !important;
}
/* Default close button class */

.qtip-close {
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 11;
  /* Overlap .qtip-tip */
  cursor: pointer;
  outline: medium none;
  border: 1px solid transparent;
}
.qtip-titlebar .qtip-close {
  right: 4px;
  top: 50%;
  margin-top: -9px;
}
* html .qtip-titlebar .qtip-close {
  top: 16px;
}
/* IE fix */

.qtip-titlebar .ui-icon,
.qtip-icon .ui-icon {
  display: block;
  text-indent: -1000em;
  direction: ltr;
}
.qtip-icon,
.qtip-icon .ui-icon {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}
.qtip-icon .ui-icon {
  width: 18px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  text-indent: 0;
  font: normal bold 10px/13px Tahoma, sans-serif;
  color: inherit;
  background: transparent none no-repeat -100em -100em;
}
/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */

/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */

/* Default tooltip style */

.qtip-default {
  border: 1px solid #F1D031;
  background-color: #FFFFA3;
  color: #555;
}
.qtip-default .qtip-titlebar {
  background-color: #FFEF93;
}
.qtip-default .qtip-icon {
  border-color: #CCC;
  background: #F1F1F1;
  color: #777;
}
.qtip-default .qtip-titlebar .qtip-close {
  border-color: #AAA;
  color: #111;
}
/*! Light tooltip style */

.qtip-light {
  background-color: white;
  border-color: #E2E2E2;
  color: #454545;
}
.qtip-light .qtip-titlebar {
  background-color: #f1f1f1;
}
/*! Dark tooltip style */

.qtip-dark {
  background-color: #505050;
  border-color: #303030;
  color: #f3f3f3;
}
.qtip-dark .qtip-titlebar {
  background-color: #404040;
}
.qtip-dark .qtip-icon {
  border-color: #444;
}
.qtip-dark .qtip-titlebar .ui-state-hover {
  border-color: #303030;
}
/*! Cream tooltip style */

.qtip-cream {
  background-color: #FBF7AA;
  border-color: #F9E98E;
  color: #A27D35;
}
.qtip-cream .qtip-titlebar {
  background-color: #F0DE7D;
}
.qtip-cream .qtip-close .qtip-icon {
  background-position: -82px 0;
}
/*! Red tooltip style */

.qtip-red {
  background-color: #F78B83;
  border-color: #D95252;
  color: #912323;
}
.qtip-red .qtip-titlebar {
  background-color: #F06D65;
}
.qtip-red .qtip-close .qtip-icon {
  background-position: -102px 0;
}
.qtip-red .qtip-icon {
  border-color: #D95252;
}
.qtip-red .qtip-titlebar .ui-state-hover {
  border-color: #D95252;
}
/*! Green tooltip style */

.qtip-green {
  background-color: #CAED9E;
  border-color: #90D93F;
  color: #3F6219;
}
.qtip-green .qtip-titlebar {
  background-color: #B0DE78;
}
.qtip-green .qtip-close .qtip-icon {
  background-position: -42px 0;
}
/*! Blue tooltip style */

.qtip-blue {
  background-color: #E5F6FE;
  border-color: #ADD9ED;
  color: #5E99BD;
}
.qtip-blue .qtip-titlebar {
  background-color: #D0E9F5;
}
.qtip-blue .qtip-close .qtip-icon {
  background-position: -2px 0;
}
.qtip-shadow {
  -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}
/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */

.qtip-rounded,
.qtip-tipsy,
.qtip-bootstrap {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.qtip-rounded .qtip-titlebar {
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
/* Youtube tooltip style */

.qtip-youtube {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 3px #333;
  -moz-box-shadow: 0 0 3px #333;
  box-shadow: 0 0 3px #333;
  color: white;
  border: 0 solid transparent;
  background: #4A4A4A;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A4A4A), color-stop(100%, black));
  background-image: -webkit-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -moz-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -ms-linear-gradient(top, #4A4A4A 0, black 100%);
  background-image: -o-linear-gradient(top, #4A4A4A 0, black 100%);
}
.qtip-youtube .qtip-titlebar {
  background-color: #4A4A4A;
  background-color: rgba(0, 0, 0, 0);
}
.qtip-youtube .qtip-content {
  padding: 0.75em;
  font: 12px arial, sans-serif;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
}
.qtip-youtube .qtip-icon {
  border-color: #222;
}
.qtip-youtube .qtip-titlebar .ui-state-hover {
  border-color: #303030;
}
/* jQuery TOOLS Tooltip style */

.qtip-jtools {
  background: #232323;
  background: rgba(0, 0, 0, 0.7);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
  background-image: -moz-linear-gradient(top, #717171, #232323);
  background-image: -webkit-linear-gradient(top, #717171, #232323);
  background-image: -ms-linear-gradient(top, #717171, #232323);
  background-image: -o-linear-gradient(top, #717171, #232323);
  border: 2px solid #ddd;
  border: 2px solid #f1f1f1;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 12px #333;
  -moz-box-shadow: 0 0 12px #333;
  box-shadow: 0 0 12px #333;
}
/* IE Specific */

.qtip-jtools .qtip-titlebar {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
}
.qtip-jtools .qtip-content {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
}
.qtip-jtools .qtip-titlebar,
.qtip-jtools .qtip-content {
  background: transparent;
  color: white;
  border: 0 dashed transparent;
}
.qtip-jtools .qtip-icon {
  border-color: #555;
}
.qtip-jtools .qtip-titlebar .ui-state-hover {
  border-color: #333;
}
/* Cluetip style */

.qtip-cluetip {
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  background-color: #D9D9C2;
  color: #111;
  border: 0 dashed transparent;
}
.qtip-cluetip .qtip-titlebar {
  background-color: #87876A;
  color: white;
  border: 0 dashed transparent;
}
.qtip-cluetip .qtip-icon {
  border-color: #808064;
}
.qtip-cluetip .qtip-titlebar .ui-state-hover {
  border-color: #696952;
  color: #696952;
}
/* Tipsy style */

.qtip-tipsy {
  background: black;
  background: rgba(0, 0, 0, 0.87);
  color: white;
  border: 0 solid transparent;
  font-size: 11px;
  font-family: 'Lucida Grande', sans-serif;
  font-weight: bold;
  line-height: 16px;
  text-shadow: 0 1px black;
}
.qtip-tipsy .qtip-titlebar {
  padding: 6px 35px 0 10px;
  background-color: transparent;
}
.qtip-tipsy .qtip-content {
  padding: 6px 10px;
}
.qtip-tipsy .qtip-icon {
  border-color: #222;
  text-shadow: none;
}
.qtip-tipsy .qtip-titlebar .ui-state-hover {
  border-color: #303030;
}
/* Tipped style */

.qtip-tipped {
  border: 3px solid #959FA9;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #F9F9F9;
  color: #454545;
  font-weight: normal;
  font-family: serif;
}
.qtip-tipped .qtip-titlebar {
  border-bottom-width: 0;
  color: white;
  background: #3A79B8;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
  background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
  background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
}
.qtip-tipped .qtip-icon {
  border: 2px solid #285589;
  background: #285589;
}
.qtip-tipped .qtip-icon .ui-icon {
  background-color: #FBFBFB;
  color: #555;
}
/**
 * Twitter Bootstrap style.
 *
 * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
 * Does not work with IE 7.
 */

.qtip-bootstrap {
  /** Taken from Bootstrap body */
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  /** Taken from Bootstrap .popover */
  padding: 1px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.qtip-bootstrap .qtip-titlebar {
  /** Taken from Bootstrap .popover-title */
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.qtip-bootstrap .qtip-titlebar .qtip-close {
  /**
			 * Overrides qTip2:
			 * .qtip-titlebar .qtip-close{
			 *   [...]
			 *   right: 4px;
			 *   top: 50%;
			 *   [...]
			 *   border-style: solid;
			 * }
			 */
  right: 11px;
  top: 45%;
  border-style: none;
}
.qtip-bootstrap .qtip-content {
  /** Taken from Bootstrap .popover-content */
  padding: 9px 14px;
}
.qtip-bootstrap .qtip-icon {
  /**
		 * Overrides qTip2:
		 * .qtip-default .qtip-icon {
		 *   border-color: #CCC;
		 *   background: #F1F1F1;
		 *   color: #777;
		 * }
		 */
  background: transparent;
}
.qtip-bootstrap .qtip-icon .ui-icon {
  /**
			 * Overrides qTip2:
			 * .qtip-icon .ui-icon{
			 *   width: 18px;
			 *   height: 14px;
			 * }
			 */
  width: auto;
  height: auto;
  /* Taken from Bootstrap .close */
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.qtip-bootstrap .qtip-icon .ui-icon:hover {
  /* Taken from Bootstrap .close:hover */
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
/* IE9 fix - removes all filters */

.qtip:not(.ie9haxors) div.qtip-content,
.qtip:not(.ie9haxors) div.qtip-titlebar {
  filter: none;
  -ms-filter: none;
}
.qtip .qtip-tip {
  margin: 0 auto;
  overflow: hidden;
  z-index: 10;
}
/* Opera bug #357 - Incorrect tip position
	https://github.com/Craga89/qTip2/issues/367 */

x:-o-prefocus,
.qtip .qtip-tip {
  visibility: hidden;
}
.qtip .qtip-tip,
.qtip .qtip-tip .qtip-vml,
.qtip .qtip-tip canvas {
  position: absolute;
  color: #123456;
  background: transparent;
  border: 0 dashed transparent;
}
.qtip .qtip-tip canvas {
  top: 0;
  left: 0;
}
.qtip .qtip-tip .qtip-vml {
  behavior: url(../#default#VML);
  display: inline-block;
  visibility: visible;
}
/*
    <h2 id='datepick'>Datepicker</h2>
    <p>CSS File:<strong>component.datepicker.less</strong></p>
    <p>The styling here relates to the date picker used on forms.  The position should be absolute and not like in the example below.</p>
    <div style='border: 1px solid #000000 ;padding:15px'>
       For Example
        <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: relative; left: 30px; z-index: 1; display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><select class="ui-datepicker-month" data-handler="selectMonth" data-event="change"><option value="0">Jan</option><option value="1" selected="selected">Feb</option><option value="2">Mar</option><option value="3">Apr</option><option value="4">May</option><option value="5">Jun</option><option value="6">Jul</option><option value="7">Aug</option><option value="8">Sep</option><option value="9">Oct</option><option value="10">Nov</option><option value="11">Dec</option></select><select class="ui-datepicker-year" data-handler="selectYear" data-event="change"><option value="1866">1866</option><option value="1867">1867</option><option value="1868">1868</option><option value="1869">1869</option><option value="1870">1870</option><option value="1871">1871</option><option value="1872">1872</option><option value="1873">1873</option><option value="1874">1874</option><option value="1875">1875</option><option value="1876">1876</option><option value="1877">1877</option><option value="1878">1878</option><option value="1879">1879</option><option value="1880">1880</option><option value="1881">1881</option><option value="1882">1882</option><option value="1883">1883</option><option value="1884">1884</option><option value="1885">1885</option><option value="1886">1886</option><option value="1887">1887</option><option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option><option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option><option value="1898">1898</option><option value="1899">1899</option><option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016" selected="selected">2016</option></select></div></div><table class="ui-datepicker-calendar"><thead><tr><th scope="col" class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th scope="col"><span title="Monday">Mo</span></th><th scope="col"><span title="Tuesday">Tu</span></th><th scope="col"><span title="Wednesday">We</span></th><th scope="col"><span title="Thursday">Th</span></th><th scope="col"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-days-cell-over  ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default ui-state-highlight ui-state-hover" href="#">1</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">2</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">3</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">4</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">5</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">6</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">7</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">8</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">9</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">10</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">11</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">12</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">13</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">14</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">15</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">16</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">17</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">18</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">19</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">20</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">21</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">22</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">23</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">24</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">25</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">26</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">27</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">28</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2016"><a class="ui-state-default" href="#">29</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/

.ui-datepicker-div > .ui-dialog-titlebar {
  background: #F2F2F1;
}
.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
  background: white;
  opacity: 1;
  border: 1px solid #3a3a3a;
}
.ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}
.ui-datepicker-next {
  right: 5px;
}
.ui-datepicker-prev:before {
  left: 5px;
  content: '\f137';
  font-family: "FontAwesome";
  color: #3a3a3a;
  font-size: 23px;
  top: 7px;
  position: absolute;
}
.ui-datepicker-next:before {
  right: 2px;
  content: '\f138';
  font-family: "FontAwesome";
  color: #3a3a3a;
  font-size: 23px;
  top: 7px;
  position: absolute;
}
.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 25%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}
.ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}
.ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
  min-width: 20px;
}
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  display: none;
}
select.ui-datepicker-month-year {
  width: 100%;
}
select.ui-datepicker-month,
select.ui-datepicker-year {
  width: 50%;
  padding: 5px 0;
  display: inline-block;
}
.ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}
.ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}
.ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
/* 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 {
  width: 95%;
  margin: 0 auto 0.4em;
}
.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,
.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;
  width: 100%;
  font-size: 0;
}
/* RTL support */

.ui-datepicker-rtl {
  direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}
.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,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}
.ui-datepicker-trigger {
  display: inline;
  background-color: transparent;
  color: #1c5571;
  padding-left: 0px;
  padding-right: 0px;
  min-width: 35px;
}
.ui-datepicker-trigger i {
  font-size: 150%;
}
.ui-datepicker-trigger:hover {
  background-color: transparent;
  color: #0d2734;
}
.ui-datepicker-unselectable span.ui-state-default {
  text-decoration: line-through;
}
/*
    <h2 id='addpick'>Address Picker</h2>
    <p>CSS File: <strong>component.addresspicker.less</strong></p>
    <p>This file describes the styling used for the address picker. The widget displays the number of matches, the list of address and an option to add a new address.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
    <div class="civicaaddressfinder">
    <div class="civicaaddressfinderheader">
        <div data-bind="if: HasNoResults"></div>
        <div data-bind="ifnot: HasNoResults">
            Matching addresses found: <span data-bind="text: Addresses().length">1</span>
        </div>
    </div>
    <div class="civicaaddressfinderresults" data-bind="foreach: DisplayedAddresses">
        <a class="addresserowlink ui-widget ui-state-defaultui-button-text-only" href="javascript:void(0);" data-bind="click: SelectAddress">
            <div class="ui-button-text" data-bind="text: FullAddress">Taxi House, Sovereign Road, Leeds, West Yorkshire, LS11 5DD</div>
        </a>
    </div>
    <div class="civicaaddressfinderpager" style="height: 0px;"></div>
    <div class="civicaaddressfinderaddbtn"><div data-bind="if: IsVisible"><a href="javascript:void(0)" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" data-bind="css: {'ui-state-disabled': Disabled }, hoverToggle: 'ui-state-hover'" role="button"><span class="ui-button-text" data-bind="text: LinkText">Add a new address</span></a></div></div>
</div>
</div>
    <p><a href="#top">Back to top of page</a></p>
*/

.CivicaAddressQuerySearch {
  margin-right: 5px;
}
.CivicaAddressQuerySearch input {
  width: 100%;
  margin: 10px 0 10px 0;
}
.civicaaddressfinder a.addresserowlink {
  display: block;
}
/*
    <h2 id='accord'>Accordions</h2>
    <p>CSS File: <strong>component.accordian.less</strong></p>
    <p>This file describes the styling for the civica accordions.</p>
    <p>Accodions are used when large amounts of content needs to be displayed but there is a limited space on the screen.
    <div style='border: 1px solid #000000;padding:15px'>
     For example
    <div class="civicaaccordionheader ui-accordion-header ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-id-11" aria-controls="ui-id-12" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <div class="civicasubheader" data-bind="msg: 'keyobject.CTXAccount.payment'">Payments</div>
    </div>
    </div>

    <p><a href="#top">Back to top of page</a></p>

*/

.civicaaccordionheader {
  border: 1px solid #b3b3b3;
  background-color: #F2F2F1;
  padding: 15px;
  display: flex;
  width: 100%;
  margin-top: 15px;
  cursor: pointer;
  align-items: baseline;
  flex-wrap: wrap;
}
.civicaaccordionheader > div {
  margin-left: 30px;
  white-space: nowrap;
}
.civicaaccordionheader > div:first-of-type {
  margin-left: 0;
}
.civicaaccordionheader .civicasubheader {
  margin: 0;
}
.civicaaccordionheader .civicaellipsisheader {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.civicaaccordionheader {
  font-family: "FontAwesome";
}
.civicaaccordionheader > div {
  font-family: "Open Sans", sans-serif;
}
.civicaaccordionheader:before {
  font-family: "FontAwesome";
  content: '\f054';
  color: #093e52;
  display: table-cell;
  width: 30px;
}
.civicaaccordionheader.ui-accordion-header-active:before {
  content: '\f078';
}
.civicaaccordionheader.ui-accordion-header-active .civicaellipsisheader {
  text-overflow: inherit;
  white-space: inherit;
  overflow: inherit;
}
.civica-panel-group,
.civica-servicerequestitem .ui-accordion-content {
  border: 1px solid #b3b3b3;
  border-top: none;
  padding: 0 15px 15px 15px;
  display: table;
  width: 100%;
}
.civica-panel-group .civicasubheader {
  margin-top: 0;
  padding-top: 15px;
}
.ui-dialog[style] {
  border: 5px solid #1c5571;
  padding: 5px;
  position: fixed;
  box-sizing: border-box;
  background: #FFFFFF;
}
@media (max-width: 768px) {
  .ui-dialog[style] {
    max-height: 400px;
  }
}
.ui-dialog span.ui-button-text {
  display: none;
}
.ui-dialog button[title="close"] {
  position: absolute;
  right: 0px;
  background: #FFFFFF;
  color: #1c5571;
  line-height: 26px;
  height: 26px;
}
.ui-dialog button[title="close"]:hover {
  color: #123648;
}
.ui-dialog button[title="close"]:after {
  font-family: "FontAwesome";
  content: '\f00d';
}
/*
    <h2 id='alert'>Alerts</h2>
    <p>CSS File: <strong>component.alerts.less</strong></p>
    <p>These are the styles used for alerts. These alerts can be warning, errors and successful outcomes.</p>
    <div style='border: 1px solid #000000;padding:15px'>
     For Example - civica-error-alert styling
    <ul class="civica-alert"><li class="civica-error-alert">Password and Password Confirm must match</li><li class="civica-error-alert">Email Address and Email Address Confirm must match</li></ul>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/

.civica-alert {
  margin: 15px 0;
}
.civica-alert i {
  padding-left: 15px;
}
.civica-success-alert {
  color: #00ff00;
}
civica-warning-alert {
  color: #FFA500;
}
.civica-error-alert {
  color: #ff0000;
}
/*
    <h2 id='bread'>Breadcrumbs</h2>
    <p>CSS File: <strong>component.breadcrumb.less</strong></p>
    <p>Describes styling used for the breadcrumbs.</p>
    <div style='border: 1px solid #000000;padding:15px'>
     For Example
    <div class="hidden-small-only breadcrumb">
                <a href="/planning/">Planning</a>
                <span>/</span>
Search applications        </div>
</div>
    <p><a href="#top">Back to top of page</a></p>
*/

.breadcrumb {
  color: #3a3a3a;
  background-color: #F2F2F1;
  padding: 15px 0px 15px 30px;
}
.breadcrumb span {
  padding: 0 15px;
}
@media (max-width: 767px) {
  .breadcrumb a:after {
    display: block;
  }
}
/*
    <h2 id='civmenu'>Civica Menu</h2>
    <p>CSS File:<strong>component.civica-menu.less</strong></p>
    <p>The styling here relates to the "In this Section" (right side) Menu</p>
    <div style='border: 1px solid #000000;padding:15px'>
     <p>For Example</p>
    <div class="civica-menu">
	<h3>In this section</h3>
	    <ul>
		    <li><a href="">Pay now</a></li>
	    </ul>
    </div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/

div.civica-menu {
  background-color: #1c5571;
  border-radius: 2px;
  display: inline-block;
}
.civica-menu h3 {
  color: #FFFFFF;
}
.civica-menu a {
  color: #FFFFFF;
  display: table;
}
.civica-menu a:hover,
.civica-menu a:visited {
  text-decoration: none;
}
.civica-menu a:hover {
  color: #b3b3b3;
}
.civica-menu li {
  position: relative;
}
.civica-menu li:before {
  color: #f6c21d;
  font-family: "FontAwesome";
  content: '\f054';
  top: 5px;
  position: absolute;
}
.civica-menu a::before {
  content: '';
  font-family: "FontAwesome";
  color: #f6c21d;
  padding-right: 30px;
  font-size: 16px;
  display: table-cell;
}
@media (max-width: 767px) {
  
}
.myaccountpanel .btn {
  width: 200px;
}
.civica-lg2hrepair-keyno {
  display: none;
}
.civica-lg2hrent-keyno {
  display: none;
}
.civica-lg2hrent-title1,
.civica-lg2hrent-title2,
.civica-lg2hrent-title3,
.civica-lg2hrent-title4 {
  display: none;
}
.civica-lg2hrent-initial1,
.civica-lg2hrent-initial2,
.civica-lg2hrent-initial3,
.civica-lg2hrent-initial4 {
  display: none;
}
.civica-lg2hrent-forename1,
.civica-lg2hrent-forename2,
.civica-lg2hrent-forename3,
.civica-lg2hrent-forename4 {
  display: none;
}
.civica-lg2hrent-surname1,
.civica-lg2hrent-surname2,
.civica-lg2hrent-surname3,
.civica-lg2hrent-surname4 {
  display: none;
}
.civica-lg2hrent-personref1,
.civica-lg2hrent-personref2,
.civica-lg2hrent-personref3,
.civica-lg2hrent-personref4 {
  display: none;
}
.civica-lg2hrent-contact1dob,
.civica-lg2hrent-notesind,
.civica-lg2hrent-rentaccounttype,
.civica-lg2hrent-estateref,
.civica-lg2hrent-blockref {
  display: none;
}
.civica-lg2hrent-contact1name,
.civica-lg2hrent-contact2name,
.civica-lg2hrent-contact3name,
.civica-lg2hrent-contact4name {
  display: none;
}
.civica-lg2hrent-rebate,
.civica-lg2hrent-netrent,
.civica-lg2hrent-lastbalancedate,
.civica-lg2hrent-partyreference {
  display: none;
}
.civica-lg2hrent-rentaccountopened,
.civica-lg2hrent-rentaccountclosed {
  display: none;
}
.civica-servicerequestitem .content {
  padding-left: 15px;
}
/*
    <h2 id='help'>Help</h2>
    <p>CSS File:<strong>component.help.less</strong></p>
    <p>This file contains the styles for the help functionality (for instance on callscripts).  It requires the qtip styling to be included first.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
    <div class="civicaQuestion"><label for="view85" id="CivicaFormLabel-6">Email address (used for login) *</label><a href="javascript:void(0);" data-hasqtip="0"><i class="fa fa-question-circle"></i></a></div>
    <div id="qtip-1" class="qtip qtip-default ui-tooltip-light qtip-pos-tl qtip-focus" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-1-content" aria-hidden="false" data-qtip-id="1" style="position:relative; z-index: 15001; top: initial; left: 356.766px; opacity: 1; display: block;"><div class="qtip-tip" style="border: 0px !important; width: 8px; height: 8px; line-height: 8px; left: -1px; top: -8px; background-color: transparent !important;"><canvas width="8" height="8" style="border: 0px !important; width: 8px; height: 8px; background-color: transparent !important;"></canvas></div><div class="qtip-titlebar"><div id="qtip-1-title" class="qtip-title" aria-atomic="true">Help</div><a class="qtip-close qtip-icon" title="Close tooltip" aria-label="Close tooltip" role="button"><span class="ui-icon ui-icon-close">×</span></a></div><div class="qtip-content" id="qtip-1-content" aria-atomic="true"><div class="helpprompttext" style="display: block; visibility: visible;">This is the number that updates will be sent to if you selected text message as your preferred method of contact.</div></div></div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/

.ui-helper-hidden {
  display: none;
}
.helpprompttext,
.qtip-title {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: normal;
}
.helpprompttext {
  white-space: pre-wrap;
}
a.qtip-close,
a.qtip-close:hover,
.qtip-close .ui-icon-close,
.qtip-close .ui-icon-close:hover,
.qtip-default .qtip-icon {
  padding: 0;
  background: none;
  color: black;
  top: 5px;
  right: 5px;
  position: absolute;
}
.qtip-close .ui-icon-close {
  font-size: 26px;
  line-height: normal;
  background: none;
  padding: 0;
}
/*
    <h2 id='advsearch'>Advanced Search</h2>
    <p>CSS File:<strong>component.keyobject-advanced-search.less</strong></p>
    <p>This file contains the styles for the advance keyobject search functionality</p>
    <p>All available keyobject search fields are displayed as default.  If a search field needs to be hidden, it can be done by following the steps belows:</p>
    <ol>
    <li>From the advance search page, right click on the label of the field and select "Inspect" in Chome or "Inspect Element" in IE.</li>
    <li>This will open up the developer tools. In the elements tab you will see the label highlighed. Above the label you will see a div with class 'civicaQuestion'. Two divs above this is a div that has two class names. One of the class name is "civica-input" and the other class name is unique to the search field.</li>
    <li>At this div level a style can be added to hide the search fields (e.g. display:none;) using the unique class name e.g. civicakeyobjectsearch-appplancase-appealref.</li>
    </ol>
    <p><a href="#top">Back to top of page</a></p>
   
*/

.civicakeyobjectadvancedsearch button:first-of-type {
  margin-top: 0px;
}
.civicakeyobjectadvancedsearch {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.civicakeyobjectadvancedsearch > div {
  flex-basis: 100%;
}
@media (min-width: 992px) {
  .civicakeyobjectadvancedsearch > div[class$="datefrom"],
  .civicakeyobjectadvancedsearch > div[class$="dateto"] {
    flex-basis: auto;
  }
  .civicakeyobjectadvancedsearch > div[class$="datefrom"] label {
    max-width: 170px;
    width: 170px;
    white-space: nowrap;
  }
  .civicakeyobjectadvancedsearch > div[class$="datefrom"] input {
    width: 120px;
    min-width: 120px;
  }
  .civicakeyobjectadvancedsearch > div[class$="dateto"] label {
    display: none;
  }
  .civicakeyobjectadvancedsearch > div[class$="dateto"] input {
    width: 120px;
    min-width: 120px;
  }
  .civicakeyobjectadvancedsearch > div[class$="dateto"] div.civicaQuestion {
    height: 44px;
  }
  .civicakeyobjectadvancedsearch > div[class$="dateto"] .civicaAnswer::before {
    content: "to";
    padding-right: 15px;
  }
}
/*
    <h2 id='busy'>Busy indicator</h2>
    <p>CSS File:<strong>component.busy-indicator.less</strong></p>
    <p>This file contains the styling associated with the busy icon.</p>
    <p><a href="#top">Back to top of page</a></p>
*/

.civicabusy {
  background-color: white;
  text-align: center;
  z-index: 999999;
  display: none;
}
.civicabusy > div {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}
.civicabusy > div > p {
  margin-top: 0px;
}
.civica-loading {
  min-height: 60px;
  min-width: 100px;
  overflow: hidden;
}
/*
    <h2>Civica Form</h2>
    <p>CSS File:<strong>component.civica-form.less</strong></p>
    <p>This is extra specific styling for civica forms.  The file holds styling overrides.  For example the date field length - it has a class of hasDatepicker.</p>
    <div div style='border: 1px solid #000000;padding:15px'>
     For Example
    <div class="civicaformfield civicainputfield" data-fieldname="date1"><div class="civicaQuestion"><label for="view194" id="CivicaFormLabel-13">Date</label></div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><input id="view194" type="text" maxlength="11" data-bind="value: Value, valueUpdate: 'afterkeydown',enterKey: EnterPressed, attr: { disabled: IsDisabled, 'aria-labelledby': 'CivicaFormLabel-'  + GlobalID()}, style: { width: Width, 'padding-left':'3px'}, placeholder: PlaceholderText" aria-labelledby="CivicaFormLabel-13" placeholder="" class="hasDatepicker" style="padding-left: 3px;"><button type="button" class="ui-datepicker-trigger"><i class="fa fa-calendar fa-2x"></i></button></div></div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
*/

.hasDatepicker {
  width: 190px;
  min-width: 140px;
}
.civicaaddressfinderheader {
  margin: 15px 0;
}
.civicaformfields fieldset legend {
  display: none;
}
.civicaQuestion > p,
.civicaQuestion > label {
  font-weight: 600;
  display: inline;
}
.civicaAnswer > label {
  margin-top: 5px;
}
.civicaformfield > div[disabled='disabled']::after {
  content: url(/css/images/ajax-loader.gif?v=iZ4igTKi2V4ocW-sHUEWVoKvVBA);
  padding-left: 10px;
}
.civicaforminlinefield {
  display: inline-block;
}
.civicaFormSpacer {
  margin-bottom: 30px;
}
.civicafileuploadinput {
  display: none !important;
}
.civicafileupload .civicafileuploadinputdiv a {
  z-index: 2;
}
.civicafileupload .civicafileactionbutton {
  overflow: hidden;
  margin-bottom: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.civicafileupload .civicafileprogress {
  height: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  overflow: hidden;
  max-width: 500px;
  background-color: #b3b3b3;
}
.civicafileupload .civicafileprogress .civicafileprogressbar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 16px;
  line-height: 20px;
  color: #093e52;
  text-align: center;
  background-color: #093e52;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.civicafileupload .civicafileprogress .civicafileprogressbarsuccess {
  background-color: #093e52;
}
.civicafileupload .civicafile {
  clear: left;
  padding-top: 8px;
  margin-bottom: 5px;
  margin-top: 5px;
}
/*
    <h2 id='kov'>KeyObject Viewer</h2>
    <p>CSS File: <strong>component-civica-keyobject-viewer.less</strong></p>
    <p>This file contains styling associated with the keyobject viewer.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
      <div class="civicakeyobjectviewer" data-bind="showbusy: ShowBusyEnabled">
    <!-- ko ifnot:HasKeyObject --><!-- /ko -->
    <!-- ko if: HasKeyObject-->
    <div class="civica-keyobject-details">
        <!-- ko if:ShowHeader -->
        <div class="civicamainheader" data-bind="text: HeaderText">Report it case</div>
        <!-- /ko -->
        <div class="row">
            <div class="col-md-9 col-sm-9 ui-accordion ui-widget ui-helper-reset" data-bind="civicaaccordion: { 'header': '.civicaaccordionheader', 'heightStyle': 'Content', 'active': ActiveAccordian(), collapsible : true}" role="tablist">
                <!-- ko foreach: Components-->
                <!-- ko if:Title --><!-- /ko -->
                <!-- ko if:ControllerName -->
                <div data-bind="controller: ControllerName, controllerOptions: {KeyObject: $root.KeyObject().model()}, controllerModel: ControllerModel(), css: {'civica-panel-group': IsCollapsible()}"><div><div data-bind="css: DetailsClass" class="civica-keyobject-fulldetails">        
    <!-- ko if:(KeyObjectTypeDescription()!=null) --><!-- /ko -->
    <!-- ko foreach:DisplayItems-->
    <div class="civicadetail">
        <!-- ko if: Label() -->
        <div class="civicasubheader civica-reportitcase-casereference" data-bind="css: CssClass, text: Label"><div></div>Reference</div>
        <!-- /ko -->
        <!-- ko ifnot:($index()===1 && $parent.KeyObjectTypeDescription()!=null) -->
        <div class="civicadetailtext civica-reportitcase-casereference" data-bind="css: CssClass, textwithdefault: Value, defaultValue: '-'">2014/08/00106</div>
        <!-- /ko -->
        <!-- ko if:AlertClass --><!-- /ko -->
    </div>
    
    <div class="civicadetail">
        <!-- ko if: Label() -->
        <div class="civicasubheader civica-reportitcase-casetype" data-bind="css: CssClass, text: Label">Type</div>
        <!-- /ko -->
        <!-- ko ifnot:($index()===1 && $parent.KeyObjectTypeDescription()!=null) -->
        <div class="civicadetailtext civica-reportitcase-casetype" data-bind="css: CssClass, textwithdefault: Value, defaultValue: '-'">Graffiti - Offensive</div>
        <!-- /ko -->
        <!-- ko if:AlertClass --><!-- /ko -->
    </div>
    
    <div class="civicadetail">
        <!-- ko if: Label() -->
        <div class="civicasubheader civica-reportitcase-casestatus" data-bind="css: CssClass, text: Label">Status</div>
        <!-- /ko -->
        <!-- ko ifnot:($index()===1 && $parent.KeyObjectTypeDescription()!=null) -->
        <div class="civicadetailtext civica-reportitcase-casestatus" data-bind="css: CssClass, textwithdefault: Value, defaultValue: '-'">Active</div>
        <!-- /ko -->
        <!-- ko if:AlertClass --><!-- /ko -->
    </div>
    
    <div class="civicadetail">
        <!-- ko if: Label() -->
        <div class="civicasubheader civica-reportitcase-casedescription" data-bind="css: CssClass, text: Label">Description</div>
        <!-- /ko -->
        <!-- ko ifnot:($index()===1 && $parent.KeyObjectTypeDescription()!=null) -->
        <div class="civicadetailtext civica-reportitcase-casedescription" data-bind="css: CssClass, textwithdefault: Value, defaultValue: '-'">Someone has written some graffiti on the gable end of my house</div>
        <!-- /ko -->
        <!-- ko if:AlertClass --><!-- /ko -->
    </div>
    <!-- /ko -->              
</div>
</div></div>
                <!-- /ko -->
                <!-- ko if:WidgetName --><!-- /ko -->
                
                <!-- ko if:Title -->
                <div data-bind="css: {civicaaccordionheader: Collapsible()}" class="civicaaccordionheader ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-5" aria-controls="ui-id-6" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
                    <!-- ko if: Collapsible() -->
                    
                    <!-- /ko -->
                    <div class="civicasubheader civicahideheader" data-bind="text: Title, attr: { 'data-civicatitle': Title }" data-civicatitle="Location">Location</div>
                </div>
                <!-- /ko -->
                <!-- ko if:ControllerName -->
                <div data-bind="controller: ControllerName, controllerOptions: {KeyObject: $root.KeyObject().model()}, controllerModel: ControllerModel(), css: {'civica-panel-group': IsCollapsible()}" class="civica-panel-group ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-6" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="true" style="display: none;"><div><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><div class="civicagis">
    <input id="caseLocation" type="text" data-bind="value: Value" style="display:none;">
    <div id="civica-gis-viewer-openlayersviewer">
        <div id="map" class="map" style="display: block;">
        <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;"><canvas class="ol-unselectable" style="width: 100%; height: 100%; display: none;" width="979" height="494"></canvas><div class="ol-overlaycontainer"></div><div class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container" style="position: absolute; display: none;"><div id="popup-existing" class="ol-popup">
            <a href="#" id="popup-closer-existing" class="ol-popup-closer"></a>
            <div id="popup-content-existing"></div>
        </div></div><div class="ol-overlay-container" style="position: absolute; display: none;"><div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"><p>Your Pin</p>
                <a href="#" id="popup-deleter" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" data-bind="hoverToggle: 'ui-state-hover'" role="button">
                    <span class="ui-button-text">Remove</span>
                </a>
            </div>            
        </div></div><div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">−</button></div><div class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button></div></div></div></div>
        
        
    </div>
</div>
</div></div></div>
                <!-- /ko -->
                <!-- ko if:WidgetName --><!-- /ko -->
                
                <!-- ko if:Title -->
                <div data-bind="css: {civicaaccordionheader: Collapsible()}" class="civicaaccordionheader ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-7" aria-controls="ui-id-8" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
                    <!-- ko if: Collapsible() -->
                    
                    <!-- /ko -->
                    <div class="civicasubheader civicahideheader" data-bind="text: Title, attr: { 'data-civicatitle': Title }" data-civicatitle="Related Documents">Related Documents</div>
                </div>
                <!-- /ko -->
                <!-- ko if:ControllerName --><!-- /ko -->
                <!-- ko if:WidgetName -->
                <div data-bind="widget:  Civica.jQuery.extend({ widgetName: WidgetName() }, WidgetOptions()), css: {'civica-panel-group': IsCollapsible()}" class="civica-panel-group ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-8" aria-labelledby="ui-id-7" role="tabpanel" aria-hidden="true" style="display: none;"><div class="civicadocumentlist"><!--<div class="civica-doclisthead civicasubheader">Documents</div>-->
<div data-bind="showbusy: ShowBusyEnabled" class="">
    <div data-bind="if: HasDocuments"></div>
    <!-- ko ifnot: HasDocuments() -->
    <div data-bind="if: HasError">
        <div data-bind="msg: 'widget.documentlist.error'">An error occured getting the documents for this item.</div>
    </div>
    <div data-bind="ifnot: HasError"></div>
    <!-- /ko -->
</div>
</div></div>
                <!-- /ko -->
                <!-- /ko -->
            </div>                       
            <!-- ko if: ShowKeyObjectActionLinks--><!-- /ko -->
        </div>
    </div>
    <!-- /ko -->    
</div>

    </div>

<p><a href="#top">Back to top of page</a></p>
*/

.civicakeyobjectlistcount {
  margin-bottom: 5px;
}
.civicakeyobjectctxaccountalert {
  display: none;
}
.civica-ctxaccount-account-alertstatus + div.fa {
  display: none;
}
.civicakeyobjectnndraccalertsymbols {
  display: none;
}
a.civica-listentry-accountlistentry {
  margin-top: 15px;
  padding: 0;
  display: block;
}
a.civica-listentry-accountlistentry.tenancy {
  display: inline-block;
}
p.civica-listentry-accountlistentry {
  margin-top: 5px;
  margin-bottom: 15px;
}
.myaccountpanel .civica-keyobject-details .civicamainheader:first-child {
  display: none;
}
.civica-keyobject-details .civicamainheader:first-child {
  margin-top: 0px;
}
.civicadetail {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari */
  page-break-inside: avoid;
  /* Theoretically FF 20+ */
  break-inside: avoid-column;
  /* IE 11 */
  display: table;
  /* Actually FF 20+ */

}
@media (min-width: 992px) {
  .civica-keyobject-fulldetails {
    _: ; -webkit-column-width: 300px;
    _: ; -khtml-column-width: 300px;
    _: ; -moz-column-width: 300px;
    _: ; column-width: 300px;
  }
}
@media (max-width: 767px) {
  .civica-keyobject-details thead {
    display: none;
  }
  .civica-keyobject-details tr td {
    display: block;
    padding: 0;
  }
  .civica-keyobject-details tr td:first-child {
    padding-top: 15px;
  }
}
.civicakeyobjectviewer a {
  margin-top: 15px;
}
.civicakeyobjectviewer .map {
  height: 300px;
}
/*
    <h2 id='docv'>Document Viewer</h2>
    <p>CSS File:<strong>component.document-viewer.less</strong></p>
    <p>This file contains the style associated with the document viewer.</p>
    <p><a href="#top">Back to top of page</a></p>
   
*/

.documentviewerhead {
  margin-bottom: 15px;
}
.documentviewerviewer {
  background: #F2F2F1;
}
.documentviewerplanemail {
  background-color: #FFFFFF;
  min-height: 300px;
  padding: 5px;
}
.documentviewerplanemailbody {
  padding: 0;
  margin: 0;
}
.documentvieweremailframe {
  border: none;
  width: 100%;
  border-top: 1px solid black;
}
.CivicaDocViewer-tb-scale {
  margin-left: 10px;
}
.CivicaDocViewer-dzco {
  z-index: 5000;
  position: absolute;
}
.civica-carousel {
  width: 50%;
  height: 250px;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.civica-carouselslider {
  width: 30%;
  margin-left: 10%;
  position: relative;
  border-bottom-color: grey;
  z-index: 100;
  opacity: 0.5;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}
.documentviewerviewer {
  background: #FFFFFF;
}
.documentviewerviewer canvas {
  background: #b3b3b3;
}
.documentviewerviewer embed {
  height: 600px;
  width: 100%;
}
.documentviewerplanemail {
  background-color: #FFFFFF;
  min-height: 300px;
  padding: 5px;
}
.documentviewerplanemailbody {
  padding: 0px;
  margin: 0px;
}
.documentvieweremailframe {
  border: none;
  width: 100%;
  border-top: 1px solid #b3b3b3;
}
/*
    <h2 id='docl'>Document List</h2>
    <p>CSS File:<strong>component.document-list.less</strong></p>
    <p>The styling here relates to the document list widget.  Different icons are used to represent different doc types.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example

    <div class="civicadocumentlist">
<div data-bind="showbusy: ShowBusyEnabled" class="">
    <div data-bind="if: HasDocuments">
        <!-- ko if: ShowFilter --><!-- /ko -->
        <!-- ko ifnot: HasDisplayedDocuments() --><!-- /ko -->
        <div class="civica-doclist">
                <ul class="fa-ul" data-bind="foreach: CompleteDocument">
                    <li class="civica-doclistitem" data-bind="visible: Display">
                        <i data-bind="css: IconCSS" class="fa-li fa fa-file-text-o fa-2x"></i><a href="javascript:void(0)" data-bind="click: OpenDocument"><span data-bind="text: DisplayTitle">Council Tax Bill</span></a>
                        <div><span data-bind="text: DisplayDate">1 November 2013</span></div>
                    </li>
                </ul>
        </div>
    </div>
</div>
</div>
</div>
    <p><a href="#top">Back to top of page</a></p>
*/

.civicadocumentlist {
  margin-top: 5px;
}
.civica-doclisthead {
  border-bottom: 1px solid #b3b3b3;
  padding: 10px;
}
.civica-doclisthead span {
  margin-left: 15px;
}
.civica-doclist {
  margin: 0 15px;
}
.civica-doclist ul {
  list-style-type: none;
}
.civica-doclist li i {
  margin-top: 15px;
}
.civicadocumentlist input[type="text"].civica-doclisttextfilter {
  margin: 0px;
}
.civicadocumentlist input[type="text"].civica-doclisttextfilter::-ms-clear {
  display: none;
}
.civica-doclisttextfilter {
  width: 250px;
}
.civica-doclisttitlelabel,
.civica-doclisttitletext,
.civica-doclisttitlerow,
.civica-doclistdetaillabel,
.civica-doclistdetailtext,
.civica-doclistdetailrow {
  display: inline-block;
}
.civica-doclistdetaillabel {
  font-weight: 600;
  padding-right: 5px;
}
.civica-doclistdetailrow {
  padding-right: 15px;
}
.civica-doclistsort {
  margin-left: 15px;
}
@media (max-width: 598px) {
  .civica-doclistsort {
    margin-left: 0px;
    margin-top: 5px;
  }
}
/*
    <h2 id='openlay'>Open Layers</h2>
    <p>CSS File:<strong>component.openlayers.less</strong></p>
    <p>This file contains the styles used for OpenLayers (rendering the maps).</p>
    <p><a href="#top">Back to top of page</a></p>
   
*/

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}
.ol-scale-line {
  background: #95b9e6;
  background: rgba(0, 60, 136, 0.3);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}
.ol-scale-line-inner {
  border: 1px solid #eee;
  border-top: none;
  color: #eee;
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
}
.ol-overlay-container {
  will-change: left, right, top, bottom;
}
.ol-unsupported {
  display: none;
}
.ol-viewport .ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ol-control {
  position: absolute;
  background-color: #eee;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2px;
}
.ol-control:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.ol-zoom {
  top: 0.5em;
  left: 0.5em;
}
.ol-rotate {
  top: 0.5em;
  right: 0.5em;
  -moz-transition: opacity 0.25s linear, visibility 0s linear;
  -o-transition: opacity 0.25s linear, visibility 0s linear;
  -webkit-transition: opacity 0.25s linear, visibility 0s linear;
  transition: opacity 0.25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  -moz-transition: opacity 0.25s linear, visibility 0s linear 0.25s;
  -o-transition: opacity 0.25s linear, visibility 0s linear 0.25s;
  -webkit-transition: opacity 0.25s linear, visibility 0s linear 0.25s;
  transition: opacity 0.25s linear, visibility 0s linear 0.25s;
}
.ol-zoom-extent {
  top: 4.643em;
  left: 0.5em;
}
.ol-full-screen {
  right: 0.5em;
  top: 0.5em;
}
@media print {
  .ol-control {
    display: none;
  }
}
.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  height: 25px;
  min-width: 25px;
  line-height: 25px;
  background-color: #7b98bc;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}
.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}
.ol-zoom-extent button {
  line-height: 1.4em;
}
.ol-compass {
  display: block;
  font-weight: 400;
  font-size: 1.2em;
  will-change: transform;
}
.ol-touch .ol-control button {
  font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
  top: 5.5em;
}
.ol-control button:focus,
.ol-control button:hover {
  text-decoration: none;
  background-color: #4c6079;
  background-color: rgba(0, 60, 136, 0.7);
}
.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}
.ol-attribution {
  text-align: right;
  bottom: 0.5em;
  right: 0.5em;
  max-width: calc(98.7%);
}
.ol-attribution ul {
  margin: 0;
  padding: 0 0.5em;
  font-size: 0.7rem;
  line-height: 1.375em;
  color: #000;
  text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
  display: inline;
  list-style: none;
  line-height: inherit;
}
.ol-attribution li:not(:last-child):after {
  content: " ";
}
.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
}
.ol-attribution button,
.ol-attribution ul {
  display: inline-block;
}
.ol-attribution.ol-collapsed ul {
  display: none;
}
.ol-attribution.ol-logo-only ul {
  display: block;
}
.ol-attribution:not(.ol-collapsed) {
  background: rgba(255, 255, 255, 0.8);
}
.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
  height: 1.1em;
  line-height: 1em;
}
.ol-attribution.ol-logo-only {
  background: 0 0;
  bottom: 0.4em;
  height: 1.1em;
  line-height: 1em;
}
.ol-attribution.ol-uncollapsible img {
  margin-top: -0.2em;
  max-height: 1.6em;
}
.ol-attribution.ol-logo-only button,
.ol-attribution.ol-uncollapsible button {
  display: none;
}
.ol-zoomslider {
  top: 4.5em;
  left: 0.5em;
  width: 24px;
  height: 200px;
}
.ol-zoomslider-thumb {
  position: absolute;
  background: #7b98bc;
  background: rgba(0, 60, 136, 0.5);
  border-radius: 2px;
  cursor: pointer;
  height: 10px;
  width: 22px;
  margin: 3px;
}
.ol-touch .ol-zoomslider {
  top: 5.5em;
  width: 2.052em;
}
.ol-touch .ol-zoomslider-thumb {
  width: 1.8em;
}
.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}
.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: inline-block;
}
.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid #7b98bc;
  height: 150px;
  margin: 2px;
  width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 1px;
  left: 2px;
  position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
  background: rgba(255, 255, 255, 0.8);
}
.ol-overviewmap-box {
  border: 2px dotted rgba(0, 60, 136, 0.7);
}
.civica-document-viewer-rotateright {
  position: relative;
  float: left;
  clear: left;
}
.civica-document-viewer-setscale {
  position: relative;
  float: left;
  clear: left;
  display: flex;
}
.civica-document-viewer-measurearea {
  position: relative;
  float: left;
  clear: left;
}
.civica-document-viewer-measureline {
  position: relative;
  float: left;
  clear: left;
}
.civica-document-viewer-rotatebutton {
  position: relative;
  float: left;
  clear: left;
}
.ol-touch .civica-document-viewer-rotateright {
  position: relative;
  float: left;
  clear: left;
}
.civica-document-viewer-fullscreen {
  position: relative;
  float: left;
  clear: left;
}
.civica-document-viewer-fullscreen {
  position: relative;
  float: left;
  clear: left;
}
.ol-zoom {
  top: 45px;
  left: 9px;
}
.ol-zoom-extent {
  top: 65px;
}
@media (min-height: 320px) {
  /* smartphones, iPhone, portrait 480x320 phones */
  
  .civica-document-viewer-openlayersviewer {
    height: 256px;
  }
}
@media (min-height: 481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  
  .civica-document-viewer-openlayersviewer {
    height: 384px;
  }
}
@media (min-height: 641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  
  .civica-document-viewer-openlayersviewer {
    height: 512px;
  }
}
@media (min-height: 961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  
  .civica-document-viewer-openlayersviewer {
    height: 768px;
  }
}
@media (min-height: 1025px) {
  /* big landscape tablets, laptops, and desktops */
  
  .civica-document-viewer-openlayersviewer {
    height: 816px;
  }
}
@media (min-height: 1281px) {
  /* hi-res laptops and desktops */
  
  .civica-document-viewer-openlayersviewer {
    height: 1024px;
  }
}
.civica-document-viewer-openlayersviewer {
  width: 100%;
}
.civica-document-viewer-openlayersviewer:-moz-full-screen {
  height: 100%;
  width: 100%;
}
.civica-document-viewer-openlayersviewer:-moz-full-screen .civica-document-viewer-openlayersviewer {
  height: 100%;
}
.civica-document-viewer-openlayers:-webkit-full-screen {
  height: 100%;
  width: 100%;
}
.civica-document-viewer-openlayers:-webkit-full-screen .civica-document-viewer-openlayersviewer {
  height: 100%;
}
.civica-document-viewer-openlayers:-ms-fullscreen {
  height: 100%;
  width: 100%;
}
.civica-document-viewer-openlayers:-ms-fullscreen .civica-document-viewer-openlayersviewer {
  height: 100%;
}
.civica-document-viewer-openlayers:fullscreen {
  height: 100%;
  width: 100%;
}
.civica-document-viewer-openlayers:fullscreen .civica-document-viewer-openlayersviewer {
  height: 100%;
}
.civica-document-viewer-openlayers:full-screen {
  height: 100%;
  width: 100%;
}
.civica-document-viewer-openlayers:full-screen .civica-document-viewer-openlayersviewer {
  height: 100%;
}
.civica-document-viewer-openlayers {
  background: #b3b3b3;
  height: 100%;
}
.civica-document-viewer-progress {
  height: 5px;
  background: rgba(0, 60, 136, 0.4);
  width: 0;
  -moz-transition: width 250ms;
  -o-transition: width 250ms;
  -webkit-transition: width 250ms;
  transition: width 250ms;
}
.civica-document-viewer-pages-container {
  position: relative;
}
.civica-document-viewer-pages {
  width: 100%;
}
.civica-document-viewer-pages.unreal-focus {
  outline-width: 1px;
  outline-style: solid;
  outline-color: Highlight;
}
/* WebKit gets its native focus styles.
 */

@media (-webkit-min-device-pixel-ratio: 0) {
  .civica-document-viewer-pages.unreal-focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}
.civica-document-viewer-pages ul {
  list-style: none;
}
.civica-document-viewer-pages li {
  display: inline;
}
.civica-document-viewer-pages li label {
  margin: 0;
  display: inline-block;
}
.civica-document-viewer-pages li label > input {
  opacity: 0;
  position: absolute;
}
.civica-document-viewer-pages li label > input + img {
  cursor: pointer;
  border: 2px solid transparent;
}
.civica-document-viewer-pages li label > input:checked + img {
  border: 2px solid #0d2734;
}
.ol-rotate {
  top: 39px;
}
.set-scale {
  top: 127px;
  left: 0.5em;
}
.ol-touch .set-scale {
  top: 127px;
}
.civica-document-viewer-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  white-space: nowrap;
}
.civica-document-viewer-tooltip-measure {
  opacity: 1;
  font-weight: bold;
  z-index: 2;
}
.civica-document-viewer-tooltip-help {
  z-index: 2;
}
.civica-document-viewer-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
  z-index: 0;
}
.civica-document-viewer-tooltip-measure:before,
.civica-document-viewer-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.civica-document-viewer-tooltip-static:before {
  border-top-color: #ffcc33;
}
.civica-document-viewer-openlayers canvas {
  border: none;
}
.civica-document-viewer-tooltip .closebtn {
  float: right;
  right: 4px;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  padding: 0px;
}
.civica-document-viewer-tooltip .closebtn:before {
  content: "\f00d";
}
.ol-control {
  background-color: inherit;
}
.ol-control:hover {
  background-color: inherit;
}
.civica-document-viewer-menu-collapsible {
  overflow: hidden;
}
.civica-document-viewer-menu-wrapper {
  -webkit-transition-duration: 1000ms;
  -moz-transition-duration: 1000ms;
  -o-transition-duration: 1000ms;
  transition-duration: 1000ms;
  -moz-transform: translate(0%);
  -ms-transform: translate(0%);
  -o-transform: translate(0%);
  transform: translate(0%);
  -webkit-transform: translate(0%);
}
.civica-document-viewer-menu-wrapper.collapsed {
  -moz-transform: translate(-100%);
  -ms-transform: translate(-100%);
  -o-transform: translate(-100%);
  transform: translate(-100%);
  -webkit-transform: translate(-100%);
}
.civica-document-viewer-menu {
  display: inline-block;
  margin: auto;
  width: 100%;
}
.civica-document-viewer-menu-control {
  float: left;
  display: block;
  margin-right: 2px;
  padding: 0px;
  color: white;
  min-height: 30px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.civica-document-viewer-menu-control i {
  background-color: #7b98bc;
  background-color: #1c5571;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: white;
  height: 25px;
  width: 25px;
  padding: 0px;
  line-height: inherit;
}
.civica-document-viewer-menu-control i:hover {
  text-decoration: none;
  background-color: #4c6079;
  background-color: #0d2734;
}
.civica-document-viewer-menu-expander {
  float: left;
  display: block;
  margin-right: 2px;
  margin-left: 1px;
  padding-left: 0px;
  color: white;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: inherit;
  background-color: #7b98bc;
  background-color: #1c5571;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.civica-document-viewer-menu-expander button {
  height: 30px;
  width: 30px;
  padding: 0px;
  line-height: 30px;
  margin: 0px;
  font-size: 23px;
}
.civica-document-viewer-menu-expander:hover {
  text-decoration: none;
  background-color: #4c6079;
  background-color: #0d2734;
}
.civica-document-viewer-zoomtoextent button:before {
  content: "\f07e";
}
.civica-document-viewer-zoomtoextent button {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 5px;
  font-size: inherit;
  color: white;
  padding: 0px;
  background-color: #1c5571;
  height: 30px;
  width: 30px;
  margin: 0px;
}
.civica-document-viewer-rotateright button {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: inherit;
  height: 30px;
  width: 30px;
}
.civica-document-viewer-rotateright button:before {
  content: "\f01e";
}
.civica-document-viewer-fullscreen button {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: inherit;
  height: 30px;
  width: 30px;
}
.civica-document-viewer-fullscreen .ol-full-screen-false:before {
  content: "\f065";
}
.civica-document-viewer-fullscreen .ol-full-screen-true:before {
  content: "\f066";
}
@media (max-width: 768px) {
  .civica-document-viewer-menu-container {
    display: none;
  }
}
.civica-document-viewer-menu-container {
  line-height: 25px;
  float: left;
  position: relative;
}
.civica-document-viewer-menu .ol-scale-line-inner {
  border: 1px solid white;
  border-top: none;
  font-size: 0;
  color: #1c5571;
  height: 10px;
  margin-top: 10px;
}
.civica-document-viewer-menu .ol-scale-line-text-inner {
  color: white;
  margin: 0px;
  width: 100px !important;
  font-weight: normal;
  text-decoration: underline;
  min-height: 30px;
  line-height: 30px;
}
.civica-document-viewer-menu .ol-scale-line-text-inner:hover {
  color: white;
  margin: 0px;
  width: 100px !important;
  font-weight: normal;
  text-decoration: underline;
  background-color: #0d2734;
  border-radius: 2px;
}
.civica-document-viewer-scaleline .ol-scale-line-inner {
  border: 3px solid #093e52;
  border-top: none;
  margin: 6px;
  color: #093e52;
  font-size: 14px;
  font-weight: bold;
}
.civica-document-viewer-menu .civica-document-viewer-scalecontainer {
  background-color: #1c5571;
  opacity: 0.95;
  border-radius: 2px;
}
.civica-document-viewer-menu .civica-document-viewer-scaleanchor {
  cursor: pointer;
}
.ol-rotate .ol-rotate-reset {
  display: none;
}
.ol-control button {
  background-color: #1c5571;
  opacity: 0.95;
  min-width: 30px;
  min-height: 30px;
  font-size: 23px;
}
.ol-control button:focus,
.ol-control button:hover {
  background-color: #0d2734;
}
.civica-document-viewer-measurecontainer button:hover {
  text-decoration: underline;
}
.civica-document-viewer-measurecontainer {
  background-color: #1c5571;
  border-radius: 2px;
  opacity: 0.95;
}
.civica-document-viewer-measurecontainer .civica-document-viewer-measurebutton {
  display: inline-block;
  padding: 0 5px;
  color: white;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 15px;
  padding-left: 15px;
  font-size: inherit;
  background-color: #1c5571;
  height: 30px;
  text-decoration: underline;
  margin: 0px 2px 0px 0px;
  font-weight: normal;
}
.civica-document-viewer-measurecontainer .civica-document-viewer-measurebutton.toggle {
  background-color: #0d2734;
}
.civica-document-viewer-measurecontainer select {
  display: inline-block;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: normal;
  color: black;
  border-radius: 2px;
  min-height: 20px;
  line-height: inherit;
  height: 26px;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-right: 15px;
  margin-left: 0px;
  min-width: inherit;
  border: none;
  opacity: 0.95;
}
.civica-document-viewer-setscale .civica-document-viewer-setscaleinput {
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: normal;
  color: black;
  border-radius: 2px;
  min-height: 20px;
  line-height: 26px;
  height: 22px;
  margin-top: 4px;
  margin-bottom: 0;
  margin-right: 5px;
  margin-left: 0;
  min-width: inherit;
  border: none;
  opacity: 0.95;
  max-width: 42px;
  font-size: 14px;
}
.civica-document-viewer-setscale .civica-document-viewer-setscaletext {
  display: inline-block;
  font-weight: bold;
  padding-left: 5px;
  line-height: 29px;
  color: #093e52;
  font-size: 15px;
}
.civica-document-viewer-setscale .civica-document-viewer-menu-control.civica-document-viewer-setscalebutton {
  /*
     font-size:inherit;
    margin:0px;
    */
  display: inline-block;
  padding: 0 5px;
  color: white;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  font-size: inherit;
  height: 30px;
  text-decoration: underline;
  margin: 0px 0px 0px 0px;
  font-weight: normal;
}
.civica-document-viewer-setscale .civica-document-viewer-menu-control.civica-document-viewer-setscalebutton:hover {
  background-color: #0d2734;
}
.civica-document-viewer-setscale .civica-document-viewer-menu-control.civica-document-viewer-setscalebutton.toggle {
  background-color: #0d2734;
}
.civica-document-viewer-openlayers input[type="text"] {
  width: auto;
  width: initial;
}
.civica-document-viewer-openlayers option select {
  width: auto;
  width: initial;
}
.civica-document-viewer-openlayers select {
  width: auto;
  width: initial;
}
.civica-document-viewer-setscaletooltip input[type="text"] {
  line-height: inherit;
  height: inherit;
  margin-bottom: 0px;
  margin-top: 2px;
  margin-right: 0px;
  margin-left: 0px;
  display: block;
}
.civica-document-viewer-setscaletooltip label {
  line-height: 28px;
  height: 28px;
  margin: 0px;
  font-size: 14px;
}
.civica-document-viewer-setscaletooltip .closediv:hover {
  background-color: red;
}
.civica-document-viewer-setscaletooltip {
  opacity: 1;
  display: inline-block;
  z-index: 1;
  background-color: #FFFFFF;
  border: 1px solid #b3b3b3;
}
.civica-document-viewer-setscaletooltip:before {
  border-top-color: #b3b3b3;
}
.ol-attribution {
  display: none;
}
.ol-overlaycontainer-stopevent {
  width: 100%;
  top: 0%;
  position: absolute;
  height: 0%;
}
.ol-zoom {
  position: relative;
  float: left;
  clear: left;
  top: inherit;
  left: inherit;
}
.civica-gis-viewer-search-container {
  line-height: 25px;
  float: left;
  position: relative;
}
.civica-gis-viewer-search-control i {
  background-color: #7b98bc;
  background-color: #1c5571;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: white;
  height: 25px;
  width: 25px;
  padding: 0px;
  line-height: inherit;
}
.civica-gis-viewer-search-control i:hover {
  text-decoration: none;
  background-color: #4c6079;
  background-color: #0d2734;
}
.civica-gis-viewer-search-control {
  float: left;
  display: block;
  margin-right: 2px;
  padding: 0px;
  color: white;
  min-height: 30px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.civica-gis-viewer-setsearch .civica-gis-viewer-setsearchinput {
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 5px;
  padding-left: 5px;
  font-weight: normal;
  color: black;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  float: left;
  width: inherit !important;
  min-height: 20px;
  line-height: 30px;
  height: 30px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  min-width: 60px;
  border: none;
  opacity: 0.95;
  text-align: left;
  border-bottom: 1px solid #b3b3b3;
}
.civica-gis-viewer-setsearch .civica-gis-viewer-search-control.civica-gis-viewer-setsearchbutton {
  /*
     font-size:inherit;
    margin:0px;
    */
  display: inline-block;
  padding: 0 5px;
  color: white;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  font-size: inherit;
  height: 30px;
  margin: 0px 0px 0px 0px;
  font-weight: normal;
}
.civica-gis-viewer-setsearch .civica-gis-viewer-search-control.civica-gis-viewer-setsearchbutton button {
  margin: 0px 0px 0px 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  font-size: inherit;
  float: left;
}
.civica-gis-viewer-results-wrapper {
  clear: left;
  float: left;
  -webkit-transition-duration: 1000ms;
  -moz-transition-duration: 1000ms;
  -o-transition-duration: 1000ms;
  transition-duration: 1000ms;
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
  background-color: white;
  opacity: 0.95;
  min-width: 250px;
}
.civica-gis-viewer-results-wrapper.collapsed {
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  display: none;
}
.civica-gis-viewer-results-wrapper a:focus {
  background-color: #1c5571;
  color: white;
}
.civica-gis-viewer-results-wrapper a {
  display: inline-block;
  /* modified to support vertical-align */
  width: 100%;
  height: 100%;
}
.civica-gis-viewer-results-wrapper a span {
  padding-right: 5px;
  padding-left: 5px;
}
.civica-gis-viewer-results-wrapper a:hover {
  display: block;
  background-color: #1c5571;
  color: white;
}
.civica-gis-viewer-results-wrapper li {
  width: 100%;
  display: block;
  text-align: center;
  vertical-align: middle;
  /* to position contents in middle of nav bar */
  line-height: 40px;
  /* added */
  border-bottom: 1px solid #b3b3b3;
}
.civica-gis-viewer-results-count p {
  width: 100%;
  display: block;
  text-align: center;
  padding-right: 20px;
  padding-left: 20px;
  vertical-align: middle;
  /* to position contents in middle of nav bar */
  line-height: 40px;
  /* added */

}
.civica-gis-viewer-results-wrapper ul {
  display: block;
}
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  padding-top: 3px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 70px;
  left: -50px;
}
.ol-popup-detailtitle {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  max-width: 300px;
}
.ol-popup-itemvalue {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  max-width: 300px;
}
.ol-popup-link {
  white-space: nowrap;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
.ol-popup-deleter {
  text-decoration: none;
  position: absolute;
  top: 20px;
  right: 8px;
}
.ol-popup-deleter:after {
  content: "✖";
}
.civica-gis-mapkey > div > * {
  vertical-align: middle;
}
.civica-gis-mapkey > div > span {
  padding-left: 15px;
}
select.civica-document-viewer-measureselect {
  width: inherit;
}
.civicadocviewerinlineDocument {
  width: 100%;
  min-height: 600px;
}
/*
Override open layers styling 
*/

/*.ol-scale-line-inner {
    border: 3px solid #093e52; 
    margin: 6px;
    color: #093e52;
    font-size: 14px;
    font-weight: bold;  
}*/

/*!
 * ol3-geocoder - v2.5.0
 * A geocoder extension for OpenLayers.
 * https://github.com/jonataswalker/ol3-geocoder
 * Built: Tue Feb 21 2017 08:59:32 GMT-0300 (BRT)
 */

.ol-geocoder.gcd-gl-container {
  position: absolute;
  top: 4.875em;
  left: 0.5em;
  box-sizing: border-box;
}
.ol-geocoder.gcd-gl-container *,
.ol-geocoder.gcd-gl-container *::before,
.ol-geocoder.gcd-gl-container *::after {
  box-sizing: inherit;
}
.ol-geocoder .gcd-gl-control {
  width: 2.1875em;
  height: 2.1875em;
  overflow: hidden;
  -webkit-transition: width 200ms, height 200ms;
  transition: width 200ms, height 200ms;
}
.ol-geocoder .gcd-gl-expanded {
  width: 15.625em;
  height: 2.1875em;
}
.ol-geocoder .gcd-gl-input {
  position: absolute;
  z-index: 99;
  top: 0.25em;
  left: 2.5em;
  width: 14.84375em;
  padding: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 0.875em;
  background-color: #fff;
  color: #222;
}
.ol-geocoder .gcd-gl-input:focus {
  border: none;
  outline: none;
  box-shadow: inset 0 0 0 1px #4d90fe, inset 0 0 5px #4d90fe;
}
.ol-geocoder .gcd-gl-reset {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  width: 1.5625em;
  height: 100%;
  line-height: 1.4;
  border: none;
  background-color: transparent;
  display: inline-block;
  outline: 0;
  cursor: pointer;
}
.ol-geocoder .gcd-gl-reset::after {
  content: "\d7";
  display: inline-block;
  color: #333;
  font-size: 1.5em;
  cursor: pointer;
}
.ol-geocoder .gcd-gl-btn {
  position: absolute;
  width: 1.5625em;
  height: 1.5625em;
  top: 0.125em;
  left: 0.125em;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQoU41SwXHCQAzUHh58eoUOIBWEDkI6oAToIKkg7iAuwakgpAIowXRACcnrzp6BzchjMx4wE/S6kW5XK60gvQghzJIkmVoqSZI9gJ9+/fINS5Cc1HX9QXIlIr/tpwcRyb33b7cIGnAIYQdg4pxbjcfj0nJ1Xc+Px+PGObdN03Q9RIAQwgpAnqbp7FKmjQGgJLlU1d2V7BjjRkQO3vvXIXarkyxVNbsCm2QR2Q0V7XOMMReRmfd+OQQubN6hYgs22ZtbnRcAtiRfLueqqmpJ8ovko6oeBq0KIWQA3gFkzrlmMafTaUEyI/mpqmbhVTRWWbRdbClPbeobQNES5KPRqOxs7DBn8K1DsAOKMZYApiTXqlrcDe4d0XN7jWeCfzt351tVle2iGalTcBd4gGDvvZ/fDe4RmCOFLe8Pr7mvEP2N9PQAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: center center;
}
.ol-geocoder ul.gcd-gl-result {
  position: absolute;
  top: 2.1875em;
  left: 2em;
  width: 16.25em;
  max-height: 18.75em;
  white-space: normal;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: white;
  border-radius: 4px;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
  -webkit-transition: max-height 300ms ease-in;
  transition: max-height 300ms ease-in;
}
.ol-geocoder ul.gcd-gl-result > li {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding: 0;
  line-height: 0.875rem;
}
.ol-geocoder ul.gcd-gl-result > li > a {
  display: block;
  text-decoration: none;
  padding: 3px 5px;
}
.ol-geocoder ul.gcd-gl-result > li > a:hover {
  background-color: #d4d4d4;
}
.ol-geocoder ul.gcd-gl-result > li:nth-child(odd) {
  background-color: #e0ffe0;
}
.ol-geocoder.gcd-txt-container {
  position: absolute;
  width: 25em;
  height: 4.375em;
  top: 0.5em;
  left: calc(37.5%);
  box-sizing: border-box;
}
.ol-geocoder.gcd-txt-container *,
.ol-geocoder.gcd-txt-container *::before,
.ol-geocoder.gcd-txt-container *::after {
  box-sizing: inherit;
}
.ol-geocoder .gcd-txt-control {
  position: relative;
  width: 100%;
  height: 4.375em;
  border: 1px solid #ccc;
  background-color: #fff;
  overflow: hidden;
}
.ol-geocoder .gcd-txt-input {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5px 30px 5px 40px;
  border: none;
  text-indent: 6px;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.875em;
}
.ol-geocoder .gcd-txt-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px #4d90fe, inset 0 0 6px #4d90fe;
}
.ol-geocoder .gcd-txt-reset {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  width: 2.5em;
  height: 100%;
  line-height: 100%;
  border: none;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.ol-geocoder .gcd-txt-reset::after {
  content: "\d7";
  display: inline-block;
  color: #333;
  font-size: 2em;
  cursor: pointer;
}
.ol-geocoder .gcd-txt-glass {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: inline-block;
  width: 2.5em;
  height: 100%;
  background-size: 1.38889em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' d='M29.156 29.961l-.709.709a2.006 2.006 0 0 1-2.838 0l-5.676-5.674c-.656-.658-.729-1.644-.281-2.412l-3.104-3.102a9.975 9.975 0 0 1-5.965 1.979C5.043 21.461.552 16.97.552 11.43S5.043 1.398 10.583 1.398c5.541 0 10.031 4.491 10.031 10.032 0 2.579-.98 4.923-2.58 6.7l3.035 3.035c.768-.447 1.754-.375 2.41.283l5.676 5.674c.784.785.784 2.056.001 2.839zM18.088 11.389c0-4.155-3.369-7.523-7.524-7.523a7.523 7.523 0 1 0-.001 15.046 7.525 7.525 0 0 0 7.525-7.523z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}
.ol-geocoder ul.gcd-txt-result {
  position: absolute;
  top: 4.575em;
  left: 0;
  width: 25em;
  max-height: 18.75em;
  white-space: normal;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: white;
  border-radius: 4px;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
  -webkit-transition: max-height 300ms ease-in;
  transition: max-height 300ms ease-in;
}
.ol-geocoder ul.gcd-txt-result > li {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding: 0;
  line-height: 0.875rem;
}
.ol-geocoder ul.gcd-txt-result > li > a {
  display: block;
  text-decoration: none;
  padding: 3px 5px;
}
.ol-geocoder ul.gcd-txt-result > li > a:hover {
  background-color: #d4d4d4;
}
.ol-geocoder ul.gcd-txt-result > li:nth-child(odd) {
  background-color: #e0ffe0;
}
.ol-geocoder .gcd-hidden {
  opacity: 0;
  visibility: hidden;
}
.ol-geocoder .gcd-pseudo-rotate::after {
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.gcd-road {
  font-size: 0.875em;
  font-weight: 500;
  color: #000;
}
.gcd-city {
  font-size: 0.75em;
  font-weight: normal;
  color: #000;
}
.gcd-country {
  font-size: 0.75em;
  font-weight: lighter;
  color: #444;
}
.contextpane-close,
.contextpane-expand {
  cursor: pointer;
  border: 0;
  background-color: transparent;
  margin: 0;
  transition: background 0.2s ease-out;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 0;
}
.contextpane-close svg,
.contextpane-expand svg {
  display: block;
  height: 16px;
  width: 16px;
  margin-left: 7px;
  margin-top: 7px;
}
.contextpane-close {
  right: 0;
}
.contextpane-close:hover {
  background: #093e52;
  color: white;
}
/*
    <h2 id='myprop'>My Property</h2>
    <p>CSS File:<strong>component.myproperty.less</strong></p>
    <p>This file contains styling for the MyNeighbourhood widget and MyProperty widget. </p>
    <div style='border: 1px solid #000000;padding:15px'>
     For Example - MyProperty widget
    <div id="mypropertywidget" class=""><ul class="civicaMyPropertyAddress">      <li>14 Esmond Terrace</li>      <li>Leeds</li>      <li>West Yorkshire</li>      <li></li>      <li></li>      <li>LS12 1XE</li>  </ul>  <a href="javascript:void(0)" class="changeAddressLink">Choose alternative</a>  <div class="civicaAddressMapContainer"><div class="civicaAnswer" data-bind="attr: { disabled: IsRefreshing} "><div class="civicagis">
    <input id="caseLocation" type="text" data-bind="value: Value" style="display:none;">
    <div id="civica-gis-viewer-openlayersviewer">
        <div id="map" class="map" style="display: block;">
        <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;"><canvas class="ol-unselectable" width="430" height="220"></canvas>Map will go here<div class="ol-overlaycontainer"></div><div class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container" style="position: absolute; display: none;"><div id="popup-existing" class="ol-popup">
            <a href="#" id="popup-closer-existing" class="ol-popup-closer"></a>
            <div id="popup-content-existing"></div>
        </div></div><div class="ol-overlay-container" style="position: absolute; display: none;"><div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"><p>Your Pin</p>
                <a href="#" id="popup-deleter" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" data-bind="hoverToggle: 'ui-state-hover'" role="button">
                    <span class="ui-button-text">Remove</span>
                </a>
            </div>            
        </div></div><div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">−</button></div><div class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button></div></div></div></div>
        
        
    </div>
</div>
</div></div>  <div class="dialog" title="Alternative address">      <div id="civicachangeAddressWidget"></div>  </div>  </div>
    
    <p>For Example - MyNeighbourhood Widget</p>
    <div id="myneighbourhoodwidget" class="civica-loading"><div><img src="/civica/Resource/images/Civica/cross.png" alt="Not in a conservation area."><span>in a conservation area<!--#l--></span></div>  <div><img src="/civica/Resource/images/Civica/cross.png" alt="Is not a listed building."><span>a listed building</span></div>  <div><img src="/civica/Resource/images/Civica/cross.png" alt="Is not covered by a tree preservation order."><span>covered by a tree preservation order</span></div>  <div><img src="/civica/Resource/images/Civica/cross.png" alt="Does not fall within the South Downs National Park."><span>in a designated area of natural beauty</span></div>  </div>
    </div>
    <p><a href="#top">Back to top of page</a></p>
    
*/

.civicaMyPropertyAddress {
  margin-bottom: 15px;
}
#myneighbourhoodwidget > div > img {
  vertical-align: top;
}
#myneighbourhoodwidget > div > img {
  display: none;
}
#myneighbourhoodwidget > div > img + span::before {
  content: "Is ";
}
#myneighbourhoodwidget > div > img[src$="cross.png"] + span::before {
  content: "Not ";
}
#myneighbourhoodwidget > div {
  margin-bottom: 5px;
}
#mypropertywidget {
  min-width: 430px;
}
.civicaKeyObjectsMap {
  float: left;
  width: 75%;
}
.civicaKeyObjectsKey {
  width: 25%;
  display: inline-block;
}
/*
    <h2 id='search'>Search</h2>
    <p>CSS File:<strong>component.search.less</strong></p>
    <p>This file contains the styles for the search functionality.</p>
    <div style='border: 1px solid #000000;padding:15px'>
      For Example
        <div class="fulltextsearchwidget"><div class="civicafulltextsearch">    
            <input type="text" class="searchbox" data-bind="value: SearchText, valueUpdate: 'afterkeydown', enterKey: EnterPressed, placeholder: 'widget.forms.fulltextsearch.defaulttext', msgapp: 'Core'" placeholder="E.g. Name / Address"><button type="button" class="searchbutton" data-bind="click: onSearch" value="Search"><i class="fa fa-search"></i></button>
        </div></div> 
    </div>   
    <p><a href="#top">Back to top of page</a></p>
*/

@media (max-width: 767px) {
  .searchbox {
    width: 80%;
  }
  .searchbutton {
    width: 20%;
  }
}
.civica-thumbnaillist {
  margin-top: 15px;
}
.civica-thumbnailitem {
  margin-bottom: 15px;
}
.civica-thumbnailrow {
  min-height: 125px;
  display: flex;
  flex-direction: row;
}
.civica-thumbnailtext {
  display: flex;
  flex-direction: column;
}
.civica-thumbnailtext label {
  margin-top: 0px;
}
.civica-thumbnailtext button {
  width: 100px;
}
.civica-thumbnailrow canvas {
  margin-right: 15px;
  max-height: 125px;
  min-height: 125px;
}
/* 
 Theme-specific styles split up by pages 
 */

/*
    <h2 id='plan'>Planning Page</h2>
    <p>CSS File: <strong>theme.planning.less</strong></p>
    <p>This file contains the styling for the Planning page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

.civica-planning-homepage {
  margin: 0 5px;
}
.civica-planning-homepage input.searchbox {
  max-width: initial;
}
.civica-planning-homepage > div > a {
  margin-top: 15px;
}
@media (min-width: 768px) {
  .civica-planning-homepage {
    margin: 0 30px;
  }
}
@media (min-width: 992px) {
  .civica-planning-homepage {
    position: relative;
    height: 25vw;
    background: url("/media/Planning/home.jpg?v=K7i2JNaWhwWY1HYbTjKxdSqFcyQ") no-repeat;
    background-size: cover;
    width: 100%;
    margin: 0;
  }
  .civica-planning-homepage > div {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    background: rgba(50, 50, 50, 0.7);
    padding: 0px 15px 15px 15px;
    border-radius: 5px;
  }
  .civica-planning-homepage > div h1 {
    font-size: 4vw;
    text-align: center;
    color: white;
  }
  .civica-planning-homepage .civicafulltextsearch input {
    padding-left: 1vw;
    padding-right: 1vw;
    height: 4vw;
    font-size: 2vw;
    line-height: inherit;
    margin: 0;
    width: 90%;
  }
  .civica-planning-homepage .civicafulltextsearch {
    position: relative;
  }
  .civica-planning-homepage .civicafulltextsearch button {
    height: 100%;
    position: absolute;
    width: 10%;
  }
  .civica-planning-homepage .civicafulltextsearch button i {
    font-size: 2vw;
  }
  .civica-planning-homepage .civicafulltextsearch button {
    width: 5vw;
    line-height: inherit;
  }
  .civica-planning-homepage > div > a {
    color: #F2F2F1;
  }
}
@media (min-width: 1200px) {
  .civica-planning-homepage + div {
    width: 90%;
  }
}
.civica-planning-homepage + div li {
  margin: 0;
}
/* GF Planning uniform style */

.civica-keyobject-fulldetails .civica-gfplanning-description,
.civica-keyobject-fulldetails .civica-gfplanning-stext4,
.civica-keyobject-fulldetails .civica-gfplanning-snumeric4,
.civica-keyobject-fulldetails .civica-gfplanning-sdate6,
.civica-keyobject-fulldetails .civica-gfplanning-stext9,
.civica-keyobject-fulldetails .civica-gfplanning-atext1,
.civica-keyobject-fulldetails .civica-gfplanning-atext2,
.civica-keyobject-fulldetails .civica-gfplanning-atext3,
.civica-keyobject-fulldetails .civica-gfplanning-atext4,
.civica-keyobject-fulldetails .civica-gfplanning-atext5,
.civica-keyobject-fulldetails .civica-gfplanning-atext6,
.civica-keyobject-fulldetails .civica-gfplanning-moddate,
.civica-keyobject-fulldetails .civica-gfplanning-anumeric1 {
  display: none;
}
.ui-autocomplete {
  max-height: 350px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  margin: 0;
  float: left;
}
.ui-autocomplete li.ui-state-hover,
.ui-autocomplete li.ui-state-focus,
.ui-autocomplete li.ui-state-active {
  background: #b3b3b3;
  border: none;
  color: #000;
  border-radius: 0;
  font-weight: normal;
}
ul.ui-autocomplete.ui-menu {
  background-color: white;
}
.civicadetailtext.civica-pbdc-internetdesc,
.civicadetailtext.civica-gfplanning-internetdesc,
.civicadetailtext.civica-appplancase-internetdesc {
  display: none;
}
/*
    <h2 id='taxi'>Taxi Licence</h2>
    <p>CSS File: <strong>theme.taxi-licence.less</strong></p>
    <p>This file contains the styling for the taxi licence page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

@media (min-width: 992px) {
  .civica-licence-homepage {
    background: url("/media/licensing/gambling.jpg?v=E0lRFHVqKXNb898KBTse1C95C0w") no-repeat;
    background-size: cover;
  }
}
@media (min-width: 992px) {
  .civica-taxi-licence-homepage {
    background: url("/media/licensing/taxi.jpg?v=yv1OVSM7hsMjD9rDZ0nQe7pk8NM") no-repeat;
    background-size: cover;
  }
}
@media (min-width: 992px) {
  .civica-alcohol-licence-homepage {
    background: url("/media/licensing/alcohol.jpg?v=ad2v5SuhbiJv-HXRHcd9FCgu6sw") no-repeat;
    background-size: cover;
  }
}
/*
    <h2 id='myacc'>MyAccount Page</h2>
    <p>CSS File: <strong>theme.myaccounts.less</strong></p>
    <p>This file contains the styling for the My Accounts page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

@media (min-width: 992px) {
  .civica-myaccounts-homepage {
    background: url("/media/Accounts/home.jpg?v=Dmcqp7rGxF8ptecFlofNMqKm6F8") no-repeat;
    background-size: cover;
  }
}
/*
    <h2 id='home'>Home Page Styling</h2>
    <p>CSS File: <strong>theme.home.less</strong></p>
    <p>This file contains the styling for the home page.</p>
    <p><a href="#top">Back to top of page</a></p>
*/

.home-hero {
  position: relative;
  width: 100%;
  color: #FFFFFF;
}
.home-hero img {
  width: 100%;
}
.home-hero > div {
  position: absolute;
  left: 0;
  right: 0;
  width: 40%;
  bottom: 25%;
  background: rgba(20, 20, 20, 0.8);
  text-align: center;
  margin: 0 auto;
  padding: 15px 30px;
}
.home-hero h1 {
  color: #FFFFFF;
  font-size: 40px;
  font-size: 3vw;
}
.home-hero nav {
  position: absolute;
  background-color: rgba(54, 25, 25, 0.5);
  top: 0px;
  z-index: 1;
  width: 100%;
}
.home-hero nav a,
.home-hero nav a:visited {
  color: #FFFFFF;
}
.home-hero nav a:hover,
.home-hero nav a:focus {
  cursor: pointer;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.3);
  color: #0d2734;
  transition: background-color 500ms linear;
}
@media screen and (min-width: 768px) {
  .home-hero nav a {
    float: left;
    display: inline-block;
    width: 25%;
    text-align: center;
    padding: 15px;
    cursor: pointer;
    font-size: 36px;
    font-size: 2.6vw;
    font-family: "Ubuntu", sans-serif;
    margin: 0;
  }
}
@media screen and (min-width: 1100px) {
  .home-hero nav a {
    font-size: 36px;
  }
}
@media screen and (max-width: 767px) {
  .home-hero nav {
    position: relative;
    background-color: #072438;
    text-align: center;
  }
  .home-hero nav a {
    padding: 10px 15px;
    position: relative;
    display: block;
    margin-bottom: 5px;
  }
  .home-hero img {
    display: none;
  }
}
/*
    <h2 id='login'>Login Page</h2>
    <p>CSS File: <strong>theme.login.less</strong></p>
    <p>This file contains the styling needed for the login page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

.login-form {
  max-width: 450px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}
.login-form input,
.login-form input[type="password"],
.login-form input[type="text"] {
  width: 100%;
  display: block;
}
.login-form > div:first-child {
  min-height: 230px;
}
.civica-login > a {
  white-space: nowrap;
}
h1 {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
/*
    <h2 id='book'>Booking Page</h2>
    <p>CSS File: <strong>theme.booking.less</strong></p>
    <p>This file contains the styling for the Booking page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

@media (min-width: 992px) {
  .civica-booking-homepage {
    background: url("/media/Booking/home.jpg?v=JvvfxTcD6wOyePYuyWtUNG_5qDA") no-repeat;
    background-size: cover;
  }
}
/*
    <h2 id='blueb'>Blue Badges Page</h2>
    <p>CSS File: <strong>theme.bluebadges.less</strong></p>
    <p>This file contains the styling for the Blue Badges page.</p>
    <p><a href="#top">Back to top of page</a></p>

*/

@media (min-width: 992px) {
  .civica-bluebadges-homepage {
    background: url("/media/BlueBadges/home.jpg?v=6yGZycmMLn3K7C56HFHVBj5cZ44") no-repeat;
    background-size: cover;
  }
}
/* 
 Trumps are overrides, helpers, utilities. They should only affect 
 one piece of DOM at a time and usually carry !important 
 */

/*
    <h2>Responsive</h2>
    <p>CSS File: <strong>trumps.responsive.less</strong></p>
    <p>These styles are overrides for responsive functionality.</p>  
    <p><a href="#top">Back to top of page</a></p>

*/

@media (max-width: 767px) {
  .hidden-small-only {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .hidden-medium-upwards {
    display: none !important;
  }
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 753px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 962px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
/*

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: @default-spacing;
    padding-right: @default-spacing;
}

@media (min-width:768px) {
    .container {
        width: 750px;
    }
}

@media (min-width:992px) {
    .container {
        width: 970px;
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: @default-spacing;
    padding-right: @default-spacing;
}

.row {
    margin-left: -@default-spacing;
    margin-right: -@default-spacing;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: @default-spacing;
    padding-right: @default-spacing;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-pull-11 {
    right: 91.66666667%;
}

.col-xs-pull-10 {
    right: 83.33333333%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-8 {
    right: 66.66666667%;
}

.col-xs-pull-7 {
    right: 58.33333333%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-5 {
    right: 41.66666667%;
}

.col-xs-pull-4 {
    right: 33.33333333%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-2 {
    right: 16.66666667%;
}

.col-xs-pull-1 {
    right: 8.33333333%;
}

.col-xs-pull-0 {
    right: 0;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-push-11 {
    left: 91.66666667%;
}

.col-xs-push-10 {
    left: 83.33333333%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-8 {
    left: 66.66666667%;
}

.col-xs-push-7 {
    left: 58.33333333%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-5 {
    left: 41.66666667%;
}

.col-xs-push-4 {
    left: 33.33333333%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-2 {
    left: 16.66666667%;
}

.col-xs-push-1 {
    left: 8.33333333%;
}

.col-xs-push-0 {
    left: 0;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

@media (min-width:768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: 0;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: 0;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }
}

@media (min-width:992px) {
    .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;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-pull-11 {
        right: 91.66666667%;
    }

    .col-md-pull-10 {
        right: 83.33333333%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-8 {
        right: 66.66666667%;
    }

    .col-md-pull-7 {
        right: 58.33333333%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-5 {
        right: 41.66666667%;
    }

    .col-md-pull-4 {
        right: 33.33333333%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-2 {
        right: 16.66666667%;
    }

    .col-md-pull-1 {
        right: 8.33333333%;
    }

    .col-md-pull-0 {
        right: 0;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-push-11 {
        left: 91.66666667%;
    }

    .col-md-push-10 {
        left: 83.33333333%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-8 {
        left: 66.66666667%;
    }

    .col-md-push-7 {
        left: 58.33333333%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-5 {
        left: 41.66666667%;
    }

    .col-md-push-4 {
        left: 33.33333333%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-2 {
        left: 16.66666667%;
    }

    .col-md-push-1 {
        left: 8.33333333%;
    }

    .col-md-push-0 {
        left: 0;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }
}

@media (min-width:1200px) {
    .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;
    }

    .col-lg-12 {
        width: 100%;
    }

    .col-lg-11 {
        width: 91.66666667%;
    }

    .col-lg-10 {
        width: 83.33333333%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-7 {
        width: 58.33333333%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-5 {
        width: 41.66666667%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-2 {
        width: 16.66666667%;
    }

    .col-lg-1 {
        width: 8.33333333%;
    }

    .col-lg-pull-12 {
        right: 100%;
    }

    .col-lg-pull-11 {
        right: 91.66666667%;
    }

    .col-lg-pull-10 {
        right: 83.33333333%;
    }

    .col-lg-pull-9 {
        right: 75%;
    }

    .col-lg-pull-8 {
        right: 66.66666667%;
    }

    .col-lg-pull-7 {
        right: 58.33333333%;
    }

    .col-lg-pull-6 {
        right: 50%;
    }

    .col-lg-pull-5 {
        right: 41.66666667%;
    }

    .col-lg-pull-4 {
        right: 33.33333333%;
    }

    .col-lg-pull-3 {
        right: 25%;
    }

    .col-lg-pull-2 {
        right: 16.66666667%;
    }

    .col-lg-pull-1 {
        right: 8.33333333%;
    }

    .col-lg-pull-0 {
        right: 0;
    }

    .col-lg-push-12 {
        left: 100%;
    }

    .col-lg-push-11 {
        left: 91.66666667%;
    }

    .col-lg-push-10 {
        left: 83.33333333%;
    }

    .col-lg-push-9 {
        left: 75%;
    }

    .col-lg-push-8 {
        left: 66.66666667%;
    }

    .col-lg-push-7 {
        left: 58.33333333%;
    }

    .col-lg-push-6 {
        left: 50%;
    }

    .col-lg-push-5 {
        left: 41.66666667%;
    }

    .col-lg-push-4 {
        left: 33.33333333%;
    }

    .col-lg-push-3 {
        left: 25%;
    }

    .col-lg-push-2 {
        left: 16.66666667%;
    }

    .col-lg-push-1 {
        left: 8.33333333%;
    }

    .col-lg-push-0 {
        left: 0;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-0 {
        margin-left: 0;
    }
}


.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .modal-footer:before, .modal-footer:after {
    content: " ";
    display: table;
}

.clearfix:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .modal-footer:after {
    clear: both;
}


@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}

    */

/*
    <h2>Authentication State</h2>
    <p>CSS File:<strong>trumps.authentication-state.less</strong></p>
    <p>You can use these styles to show / hide according to the logged in contacts authentication status.</p>
    <p>They are set in the masterpage after the authentication widget has run.</p>  
    <p><a href="#top">Back to top of page</a></p>

*/

.hidden-authenticated {
  display: block !important;
}
.hidden-anonymous {
  display: none !important;
}
.display-authlevel0,
.display-authlevel1,
.display-authlevel2,
.display-authlevel3,
.display-authlevel4,
.display-authlevel5,
.display-authlevel6,
.display-authlevel7,
.display-authlevel8 {
  display: none !important;
}