/********************************************************************************

        StyleSheet:     Baseline-Vn.nn.css

        Schematic:      XMLi5 Baseline CSS Rules

        Author:         Maurice O'Prey

        Copyright:      XMLi5 Ltd. 2018 all rights reserved

        Purpose:        This stylesheet contains PREREQUISITE rules for the styling of ALL XMLi5 applications.
                        It is the foundation style sheet and is web application agnostic. In particular this
                        stylesheet styles the CMS (In V4 the admin system does NOT have its own theme).

        Dependancies:   Requires Bootstrap CSS & Bootstrap Theme CSS loaded in MasterPage
                        Requires Z-Default.skin file in theme directory

        Section ID          Contents
        ==========          ========
        RESETS              Resets and Overrides for Bootstrap

        AJAXTOOLKIT         Ajax Toolkit Overrides

        BUTTONS             Buttons

        CMS                 Rules required specifically by CMS components
                            - CMS Default Colors
                            - CMS Sidebar Navigation (Desktop)
                            - CMS Sidebar Navigation (Mobile)
                            - CMS Body (Header)
                            - CMS Body (Header)
                            - CMS Body (Helptext)
                            - CMS Body (Filters)
                            - CMS Body (Gridview)
                            - CMS Body (Accordions)

        FLEX                Rules used for verical alignment 

        FONTAWESOME         Font Awesome Adjustments & Defaults
        
        MINIMALALECT        Overrides for Minimalect

        MISCELLANEOUS       Miscellaneous XMLi5 Styling Rules
        
        MULTI-SELECT        Overrides for Multi-Select

        REQUIRED            Required Base Utilities
                            - Error Messages
                            - Form Appearence (Basic)
                            - Form Validation
                            - ScrollToTop Arrow

*********************************************************************************/
:root { --blue: rgba(0,45,98); --blue-dark: rgba(0,32,68); --blue-light: rgba(7,123,255); --blue-lightest: rgba(235,247,255); --blue-opaque: rgba(0,45,98,0.6); --grey: rgba(114,114,114); --grey-medium: rgb(178,178,178); --grey-dark: rgba(52,52,52); --grey-light: rgba(238,238,238); --checkbox-bg: var(--grey-light); --checkbox-bg-hover: var(--grey); --checkbox-bg-checked: var(--blue-light); --checkradio-bg: var(--grey-light); --checkradio-bg-hover: var(--grey); --checkradio-bg-checked: var(--blue-light); }

body { min-height: 1000px; }

/********************************************************************************

    SECTION - RESETS (Resets and Overrides for Bootstrap)
    
********************************************************************************/
.mb-0 { margin-bottom: 0; }

/* alerts (reposition with to 20px top) */
.alert { position: relative; top: 20px; }

/* breadcrumb seperator */
.breadcrumb > li + li:before { color: #000000; content: " /  "; padding: 0 5px; font-size: 16px; font-weight: 900; position: relative; top: 1px; }

/* Remove bootstrap default padding-bottom 20px so that we can control our own spacing (15px left & right is the bootstrap default) */
.container { padding-left: 15px; padding-right: 15px; padding-top: 0; padding-bottom: 0; }

/* Remove the bottom margin from hard returns so that we can align with the bottom of the page (20px top is the default) */
hr { margin-top: 20px; margin-bottom: 0; }

/* Remove top margin 20px (default is 20px and 10px) */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 10px; }

/* Remove margin and border defaults from navbar */
.navbar { margin-bottom: 0; border-bottom: 0; }

/********************************************************************************

    SECTION - AJAXTOOLKIT (Ajax Toolkit Overrides)
    
********************************************************************************/
/* TabContainer -- all properties require !important to override AjaxToolkit defaults */
.ajax__tab_xp.ajax__tab_container.ajax__tab_default { margin-top: 10px !important; }

/* Reset individual tab styling */
.ajax__tab_xp .ajax__tab_header,
.ajax__tab_xp .ajax__tab_header .ajax__tab_outer,
.ajax__tab_xp .ajax__tab_header .ajax__tab_inner { background: none !important; height: 30px !important; }

/* Remove 1px border from tab-panel body */
.ajax__tab_xp .ajax__tab_body { border: none !important; background: none !important; font-family: inherit !important; }

/* Style tab row */
.ajax__tab_xp .ajax__tab_header { border-bottom: 1px solid #90c364 !important; margin-bottom: 20px !important; font-family: inherit !important; font-size: 14px !important; font-size: 1.4rem !important; line-height: .42857143 !important; height: 60px !important; }

/* Prevent tabs from wrapping over tab-content on mobile */
@media screen and (max-width:990px) {
    .ajax__tab_xp .ajax__tab_header { overflow-y: scroll !important; overflow-x: hidden !important; height: 50px !important; }
}

/* One consistent height per tab-pane to prevent jumping */
.ajax__tab_body.ajax__scroll_none { min-height: 500px !important; }

/* Style a normal tab */
.ajax__tab_xp .ajax__tab_tab { margin-bottom: 10px !important; height: 30px !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; transition: all 0.2s ease-in-out !important; background-image: none !important; background-repeat: no-repeat !important; background: #aad189 !important; border: 1px solid #aad189 !important; border-bottom: 1px solid #90c364 !important; text-shadow: none !important; color: #fff !important; padding: 20px !important; }

/* Style the active tab */
.ajax__tab_xp .ajax__tab_header .ajax__tab_active .ajax__tab_tab { margin-bottom: 10px !important; height: 30px !important; transition: all 0.2s ease-in-out !important; background-image: none !important; /* Old browsers */ background: linear-gradient(to bottom, #728DB5 0%, #192551 100%) !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border: 1px solid #90c364 !important; color: #fff !important; padding: 20px !important; }

/* Re-position calendar to the side of the input field */
.ajax__calendar { top: 0 !important; left: 100% !important; }

/********************************************************************************

    SECTION - BUTTONS (Miscellaneous Buttons) 
    
********************************************************************************/

.row.buttons { margin-bottom: 20px; }

/* .btn-arrow-right (animated - .active class added by js)*/
.btn-arrow-right { padding: 16px; font-size: 16px; font-size: 1.6rem; position: relative; }
.btn-arrow-right i.fa { position: absolute; right: 20px; top: 19px; transition: all 0.5s ease-out; }
.btn-arrow-right i.fa.active { position: absolute; right: 10px; }

/* .btn-arrow-right-static (not animated)*/
.btn-arrow-right-static { padding: 16px; font-size: 16px; font-size: 1.6rem; position: relative; }
.btn-arrow-right-static i.fa { position: absolute; right: 10px; top: 19px; }
.btn-arrow-right-static i.fa.active { position: absolute; right: 10px; }

/* .btn-arrow-left (animated - .active class added by js)*/
.btn-arrow-left { padding: 16px; font-size: 16px; font-size: 1.6rem; position: relative; }
.btn-arrow-left i.fa { position: absolute; left: 20px; top: 19px; transition: all 0.5s ease-out; }
.btn-arrow-left i.fa.active { position: absolute; left: 10px; }

/* .btn-arrow-down (animated - .active class added by js)*/
.btn-arrow-down { padding: 16px; position: relative; }
.btn-arrow-down i.fa { position: absolute; right: 20px; top: 19px; font-size: 16px; font-size: 1.6rem; transition: all 0.5s ease-out; }
.btn-arrow-down i.fa.active { position: absolute; top: 23px; font-size: 16px; font-size: 1.6rem; }

/* .btn-arrow-up (animated - .active class added by js)*/
.btn-arrow-up { padding: 16px; position: relative; }
.btn-arrow-up i.fa { position: absolute; right: 20px; top: 19px; font-size: 16px; font-size: 1.6rem; transition: all 0.5s ease-out; }
.btn-arrow-up i.fa.active { position: absolute; top: 10px; font-size: 16px; font-size: 1.6rem; }

/* .btn-arrow-static (not animated)*/
.btn-arrow-static { padding: 16px; position: relative; }
.btn-arrow-static i.fa { position: absolute; right: 20px; top: 19px; font-size: 16px; font-size: 1.6rem; transition: all 0.5s ease-out; }

.btn-search { background-color: white; border: none; }
.btn-stacked { margin-top: 10px; }
.btn-transparent { background-color: transparent; border: 2px solid white; border-radius: 5px; padding: 10px 20px; }

/* btn-outline */
a.btn.btn-outline { border: 2px solid #FFF; border: 2px solid rgba(0, 48, 74, 0.4); border-radius: 5px; color: #284B77; font-size: 16px; font-size: 1.6rem; padding: 13px 10px; text-decoration: none; transition: all 0.3s ease 0s; }
a.btn.btn-outline:hover { border: 2px solid #FFF; border: 2px solid rgba(0, 48, 74, 0.99); color: #00403A; }

/* btn-addon (Must be in .button-container) */
.button-container input { border: 2px solid white; }
.button-container .input-group-addon { background-color: transparent; border: 2px solid white; }

/* used on some pages like landlord insurance to move button up to align)*/
.btn-adjusted { position: relative; top: -10px; }

.message-adjusted { min-height: 265px; }
.row.adjusted-up {position: relative; top: -15px;}

/********************************************************************************

    SECTION - CMS (Rules required specifically by CMS components)
                   - CMS Default Colors
                   - CMS Sidebar Navigation (Desktop)
                   - CMS Sidebar Navigation (Mobile)
                   - CMS Body (Header)
                   - CMS Body (Content)
                   - CMS Body (Helptext)
                   - CMS Body (Filters)
                   - CMS Body (Gridview)
                   - CMS Body (Accordions)
    
********************************************************************************/
/* CMS Default Colors: 

    #666F6D - Grey/Silver - CMS Anchors
    #F2F5F4 - Greenish - CMS SideBar
    #AAD189 - Green - CMS Button Gradient From
    #90C364 - Green - CMS Button Gradient To

*/

/* .admin - (depending on the design of the site you may wish to remove the default padding of 15px left and right) */
.admin .page-sidebar { padding-left: 15px; }
.admin .page-content { padding-right: 15px; }

/* CMS SideBar Navigation (Desktop) */
.sidebar { }
.sidebar-nav { box-shadow: 0 0 1px 1px rgba(80,84,92,0.1),0 1px 2px rgba(80,84,92,0.5) !important; border-radius: 7px 7px 0 0; }
.sidebar-nav ul { list-style: none; cursor: pointer; }
.sidebar-nav ul li { clear: both; font-size: 12px; font-size: 1.2rem; }
.sidebar-nav ul > li > ul > li > a > i { font-size: 10px; font-size: 1rem; }
.sidebar-nav li a { display: block; height: 30px; padding: 10px 10px 10px; margin: 0; background: #F2F5F4; color: #666F6D; position: relative; }
.sidebar-nav li a.top-level { height: 40px; font-size: 16px; font-size: 1.6rem; }
.sidebar-nav li a.mid-level { font-size: 12px; font-size: 1.2rem; }
.sidebar-nav li a.bottom-level span::before { position: absolute; left: 18px; top: 0; height: 60%; width: 15px; content: ''; display: inline-block; border-left: 1px dotted #666F6D; border-bottom: 1px dotted #666F6D; }
.sidebar-nav li a.bottom-level span::after { position: absolute; left: 18px; bottom: 0; height: 60%; width: 15px; content: ''; display: inline-block; border-left: 1px dotted #666F6D; }
.sidebar-nav ul > li > ul li:last-of-type a:last-of-type.bottom-level span:last-of-type::after { position: absolute; left: 18px; top: 0; height: 60%; padding: 0; width: 15px; content: ''; display: inline-block; border-top: none; border-right: none; border-left: 1px dotted #666F6D; border-bottom: 1px dotted #666F6D; }
.sidebar-nav ul.top-ul > li:last-of-type a:last-of-type { margin-bottom: 0; }
.sidebar-nav li a.bottom-level { font-size: 12px; font-size: 1.2rem; }
.sidebar-nav li a.bottom-level span { margin-left: 30px; }
.sidebar-nav li a.mid-level:hover { text-decoration: underline; }
.sidebar-nav li a.bottom-level:hover span { text-decoration: underline; }
.sidebar-nav li.active a.bottom-level:hover { text-decoration: underline; }
.sidebar-nav li.active a.bottom-level span { text-decoration: underline; }
.sidebar-nav li a span { display: inline; float: left; }
.sidebar-nav li a .sidebar-label { margin-left: 10px; }
.sidebar-nav ul.top-ul { background: #F2F5F4; padding-bottom: 20px; padding-left: 0; }
.sidebar-nav ul.mid-ul { background: #F2F5F4; padding-bottom: 0; padding-left: 5px; }
.sidebar-nav li a.top-level { border-bottom: 1px solid #BDC1C1; background: linear-gradient(to bottom, #F4F6F5 0%, #D1D6D6 100%); border-radius: 0; color: #666F6D; cursor: default; }
.sidebar-nav li a.mid-level { background: #F2F5F4; }
.sidebar-nav li a.bottom-level { background: #F2F5F4; }
.sidebar-nav span.symbol { padding: 0 10px; }
/* use to adjust spacing between +/- and anchor */

#dropdown-profile, #dropdown-profile2 { padding-bottom: 0; }
#dropdown-profile .well, #dropdown-profile2 .well { border: 1px solid #F2F5F4; color: #666F6D; background: #F2F5F4; border-radius: 0 0 7px 7px; box-shadow: none; }
#dropdown-profile p, #dropdown-profile2 p { word-break: break-all; }
#dropdown-profile .well .btn.btn-danger, #dropdown-profile2 .well .btn.btn-danger { font-weight: 700; height: inherit; text-align: center; color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.35); text-shadow: 0 1px 1px rgba(0,0,0,0.3); font-weight: 700; background: #F2F5F4; /* Old browsers */ background: linear-gradient(#AAD189,#90C364); border: none; }

/* CMS SideBar Navigation (Mobile) */
nav.mobile-menu { position: absolute; width: 100%; left: -100%; top: 122px; z-index: 2500; transition: ease .3s all; }
nav.mobile-menu.mobile-menu-open { left: 0; }
nav.mobile-menu .btn-mobile-menu-open { margin-bottom: 15px; }
nav.mobile-menu .btn-holder { padding-right: 30px; }
nav.mobile-menu .btn.btn-danger.btn-mobile-menu-close { color: #FFF; width: 100%; margin-top: 34px; margin-left: 15px; }

@media screen and (max-width:480px) {
    .container.main-body { padding: 0; }

    a.intro-help { clear: left; }

    div.admin-body div.gridview { overflow-x: scroll; }

    div.header h2 { overflow: hidden; }
}

@media screen and (max-width:768px) {
    .navbar-toggle { margin-right: 15px; }
}

/* CMS Body (Header) */
div.header { border-radius: 7px 7px 0 0; border-top: 1px solid #fff; box-shadow: 0 0 1px 1px rgba(80,84,92,0.1),0 1px 2px rgba(80,84,92,0.5); border-bottom: 1px solid #BDC1C1; background: linear-gradient(to bottom, #F4F6F5 0%, #D1D6D6 100%); padding: 11px 10px 11px 10px; color: #666F6D; cursor: default; }
div.header h2 { margin: 0; font-size: 16px; font-size: 1.6rem; color: #666F6D; }

/* requirted to prevent application stylesheet from restyling admin buttons */
.admin-body a.btn { color: #4A4A4A; }
.admin-body a.btn.btn-success { color: #FFF; }
.admin-body a.btn.btn-danger { color: #FFF; }
.admin-body a.btn.btn-primary { color: #FFF; }

/* CMS Body - Style labels for form view input fields */
.admin-body div.row > .col-md-2 > label { margin-top: 6px; }

/* CMS Body - Style required field validators - CssClass=rfv-admin is assigned in the admin skin file */
.admin-body .rfv { background-color: #c12e2a; color: #fff; display: inline-block; padding: 6px 12px; margin-bottom: 0; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid #c12e2a; border-radius: 0; height: 34px; }

/* CMS Body - Pointer for help text buttons, Calendar buttons etc. */
.admin-body .input-group .input-group-addon a { cursor: pointer; text-decoration: none; }

/* CMS Body Style link buttons */
.admin-body .btn-link { cursor: pointer; text-decoration: none; }

/* CMS Body Space out Rows on details view */
.admin-body .row { padding-top: 10px; padding-bottom: 10px; }

/* CMS Body (Content) */
.admin-body { width: 100%; padding: 10px; background: #F2F5F4; border: 1px solid transparent; border-radius: 0 0 7px 7px; box-shadow: 0 0 1px 1px rgba(80,84,92,0.1),0 1px 2px rgba(80,84,92,0.5); }

/* CMS Body (Checkboxes) */
.admin-body input[type=checkbox] { margin-right: 10px; position: relative; top: 2px; }

/* CMS Body (Helptext) */
a.intro-help, a.intro-help:hover, a.intro-help:focus { border: none; background: transparent; text-shadow: none; font-weight: 700; color: #666F6D; text-decoration: none; }
.well.introwell { color: #666F6D !important; background: #F7F7F7; text-shadow: none; margin-top: 10px; margin-bottom: 10px; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: 400 !important; border: none; font-family: Arial, Helvetica, sans-serif; box-shadow: inset 0 1px 1px rgba(0,0,0,.3); }

/* CMS body (Filters) */
.filter-group { border-top: none; border-bottom: 1px solid #d1d6d6; padding: 0 0 10px 0; }
.filter-box { padding-top: 0; padding-bottom: 0; }

/* CMS Body (Gridview) */
.grv { background: #F2F5F4; color: #666F6D; border: 1px solid #D1D6D6; }
.grv-row-header { background: #90c364; /* Old browsers */ background: linear-gradient(#aad189,#90c364); border: 1px #95BC52 solid; color: #fff; height: 45px; }
.grv-row-header th { padding-left: 10px; padding-right: 5px; }
.grv-row-header a, .grv-row-header span { color: #fff; font-weight: 700; padding: 10px 0; }
.grv-row-header a:hover, .grv-row-header span:hover, .grv-row-header a:focus, .grv-row-header span:focus { color: #fff; }
.grv-row { background-color: #fff; height: 45px; }
.grv-row-alt { background-color: #fff; height: 45px; }
.grv-row-selected { background-color: #e8e8e8; height: 45px; }
.grv-row td, .grv-row-alt td, .grv-row-selected td { padding-left: 10px; }
.grv-row-pager { background-color: #fff; color: #fff; height: 28px; }
.grv-row-pager a, .grv-row-pager span { background: #90c364; /* Old browsers */ background: linear-gradient(#aad189,#90c364); border-color: #90c364; color: #fff; height: 45px; padding: 8px 6px 6px 4px; }
.grv-row-pager a:hover, .grv-row-pager span:hover, .grv-row-pager a:focus, .grv-row-pager span:focus { color: #fff; }
.grv .btn { width: 70px; }

#admin-button-bar { padding-top: 10px; padding-bottom: 10px; }
#admin-button-bar .input-group .form-control { height: 30px; font-size: 16px; font-size: 1.6rem; }

/* CMS Body (Accordions) */
/* !important required to override AjaxToolkit */

.accordion-panel { margin-bottom: 10px; border: 1px #192551 solid; background: #fff; border-radius: 0; }
.panel-primary .accordion-hdr > .panel-heading { border: none; }
.panel-primary .accordion-hdr, .panel-primary .accordion-hdr-selected { background: linear-gradient(to bottom, #728DB5 0%, #192551 100%) !important; border-radius: 0; border: none; color: #fff !important; text-shadow: none !important; box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0); cursor: pointer !important; }

/* down caret */
span.accordion-caret { display: inline-block; width: 0; height: 0; margin-left: 3px; vertical-align: middle; border-top: 6px solid; border-right: 6px solid transparent; border-left: 6px solid transparent; }

/* up caret */
.accordion-hdr-selected span.accordion-caret { border-top-width: 0; border-bottom: 6px solid #fff; }

/* full width textarea */
.panel-body textarea { width: 100%; }

/********************************************************************************

    SECTION - FLEX (Rules used for vertical Alignment)
    
********************************************************************************/
.valign-140px { height: 140px; display: flex; flex-direction: row; align-items: center; }

/********************************************************************************

    SECTION - FONTAWESOME (Font Awesome Adjustments & Defaults)
    
********************************************************************************/

.fa.fa-times { color: red; }
/* Red Cross */
.fa.fa-check { color: green; }
/* Green Tick */
.fa.fa-question-circle { color: cornflowerblue; }
.fa.fa-question-circle:hover { color: blue; }

.fa-large { font-size: 40px; padding: 0; }
.fa-green { color: green; }
.row.buttons-adjusted { position: relative; top: 20px; }
h3.adjusted { position: relative; top: 5px; left: 20px;; }

@media screen and (min-width:768px) {
    h3.adjusted { position: relative; top: 5px; left: 0; }
}

/*********************************************************

    SECTION - MINIMALECT (Overrides for Minimalect) 
    Must be applied after the minimalect stylesheet has been loaded

*********************************************************/
.minict_wrapper { height: 3.5rem; }
.minict_wrapper ul li { height: 3.5rem; }
.minict_wrapper span { font-size: 1.6rem; position: relative; display: inline-block; margin-top: 10px; }

/* Custom code */

/* set height of input */
.minict_wrapper { border-color: #DDDDDD; border-radius: 3px 0 0 3px; border-style: solid; border-width: 2px 1px 1px 2px; color: #888888; margin-bottom: 10px; height: 54px; max-width: 100%; width: 100%; }

/* postion the dropdown */
.minict_wrapper input { padding: 0 2.2rem 0 12px; }
.minict_wrapper ul { top: 54px; }
.minict_wrapper ul li { font-size: 1.6rem; }

/* postion the down caret */
.minict_wrapper:after { color: #34495E; content: "▼"; display: block; font-size: 1.2rem; height: 2.1rem; line-height: 2.9rem; position: absolute; right: 10px; text-align: center; top: 12px; width: 2.1rem; }

/********************************************************************************

    SECTION - MISCELLANEOUS (Miscellaneous XMLi5 Style Rules)
    
********************************************************************************/

/* needed to style the product cards for J4L */ .col-md-6.col-1 { padding: 0 10px 0 0; }
.col-md-6.col-2 { padding: 0 0 0 10px; }
.col-md-12.col-3 { padding: 0 0 0 0; }
.col-1 .thumbnail { padding: 15px; min-height: 540px; margin: 0; }
.col-2 .thumbnail { padding: 15px; min-height: 540px; }
.col-3 .thumbnail { padding: 15px; min-height: 480px; }
.col-1 h3, .col-2 h3, .col-3 h3 { padding-bottom: 3px; border-bottom: 2px solid #337ab7; display: inline-block; margin-bottom: 12px; }
.col-right { min-height: 556px; }

/* check box Labels */
.chk-label { position: relative; left: 10px; top: 0; margin-right: 15px; }

/* radio button labels*/
input[type=radio] + label { margin-left: 10px; position: relative; top: -1px; font-weight: normal }

/* lists with green ticks */
ul.ticks { padding-left: 0; }
ul.ticks li { padding: 5px 0; }
ul.ticks .fa.fa-check { color: green; font-size: 20px; font-size: 2.0rem; margin-right: 10px; }

/* lists nested */
ul.nested li { margin-left: 20px; }

/* navbar-flags */
.navbar .flag { width: 24px; height: auto; position: relative; top: 14px; left: 5px; }


/* notes */
.note { font-size: 16px; font-size: 1.6rem; color: crimson; font-style: normal; }

/* CSS Arrows */
.css-arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }

.css-arrow-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid black; position: relative; top: -2px; }

.css-arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid black; }

.css-arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid black; }

/*##
    ==============================================
    [Checkbox] - Custom Checkbox and Radio Buttons
    ==============================================
##*/

/* [CheckBox] 
<label class="check-container">
    <asp:Label ID="ltlRememberMe" runat="server" CssClass="txt1"/>
    <input type="checkbox" id="chkRememberMe" runat="server">
    <span class="checkmark"></span>
</label>
*/
/* Customize the label (the container) */
.check-container { display: block; position: relative; top: 5px; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; }

/* Hide the browser's default checkbox */
.check-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/* Create a custom checkbox */
.check-container .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; }

/* add a background color to the checkbox */
.check-container input ~ .checkmark { background-color: var(--checkbox-bg); }

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark { background-color: var(--checkbox-bg-hover); }

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark { background-color: var(--checkbox-bg-checked) }

/* Create the checkmark/indicator (hidden when not checked) */
.check-container .checkmark:after { content: ""; position: absolute; display: none; }

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after { display: block; }

/* Style the checkmark/indicator */
.check-container .checkmark:after { left: 9px; top: 7px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.check-container label { font-weight: normal; }

/* [Radio] 
<label class="rb-container">
    <asp:Label ID="ltlRememberMeRb" runat="server" CssClass="txt1"/>
    <input type="radio" id="rbRememberMe" runat="server">
    <span class="checkmark"></span>
</label>
*/

/* Customize the label (the container) */
.rb-container { display: block; position: relative; top: 5px; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Hide the browser's default radio button */
.rb-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/* Create a custom radio button */
.rb-container .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: var(--checkradio-bg); border-radius: 50%; }

/* On mouse-over, add a grey background color */
.rb-container:hover input ~ .checkmark { background-color: var(--checkradio-bg-hover); }

/* When the radio button is checked, add a blue background */
.rb-container input:checked ~ .checkmark { background-color: var(--checkradio-bg-checked); }

/* Create the indicator (the dot/circle - hidden when not checked) */
.rb-container .checkmark:after { content: ""; position: absolute; display: none; }

/* Show the indicator (dot/circle) when checked */
.rb-container input:checked ~ .checkmark:after { display: block; }

/* Style the indicator (dot/circle) */
.rb-container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }
/*.rb-container .checkmark:after {left: 9px; top: 7px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}*/


/********************************************************************************

    SECTION - MULTI-SELECT (Overrise rules for Multi-Select Plugin)
    
********************************************************************************/
.ms-container { width: 100%; }
/* expand container to bootstrap width */

/* set heights fpor some specific datalist boxes */
#ms-lbBrands.ms-container .ms-list, .lbBrands { height: 502px; }
#ms-lbTypes.ms-container .ms-list, .lbTypes { height: 502px; }

/* tweak the select buttons so that they align nicely with the listboxes */
a.btn-select-all { width: 95%; }
a.btn-deselect-all { width: 95%; margin-left: 5%; }

/********************************************************************************

    SECTION - REQUIRED (Required Base Utilities)
              - Form Appearance (Basic)
              - Help Messages
              - Error Messages
              
              - Form Validation (See Javascript)
              - Tooltips (See Javascript)
              - ScrollToTop Arrow (See Javascript)
 
    
********************************************************************************/

/* Form Appearance (Basic) */
.form { border: 1px solid silver; padding: 20px; border-radius: 5px; }
.form .control-label { font-weight: bold; }
.form.sub-control { margin-bottom: 25px; }
.spacer { height: 20px; }

.form-with-margin { border: 1px solid silver; padding: 20px; border-radius: 5px; margin: 0 15px; }

/* row help (vertically align to input fields) */
.help .helptext { position: relative; top: 30px; }


/* Error Messages */
.form .error-message { color: DarkRed; }
.form .error-message-line { color: DarkRed; float: right; }
.form.login-form .error-message { position: relative; top: -15px; }

/* space out register-login form */
.register-login .box { margin-top: 20px; }

/* set min height for register and login forms so they align with each other (do not use match-height) */
.register-form, .login-form { min-height: 455px; }

.register-form .form { margin-top: 20px; }

/* Form Validation */
.form .asterisk-required { display: inline-block; color: #00304A; position: relative; top: 3px; left: 2px; font-size: 16px; font-size: 1.6rem; }

/* Validation icons (add a little margin to position correctly */
.fa.form-control-feedback { font-size: 16px; font-size: 1.6rem; margin-top: 10px; margin-right: 10px; }

/* Validation icons (adjust positioning in modal forms such as login) */
.modal .fa.form-control-feedback { font-size: 16px; font-size: 1.6rem; margin-top: 10px; margin-right: 5px; }

/* Tooltips (contains element with a class of tooltips)*/
.tooltip-container { position: absolute; top: 0; right: 0; }
a.tooltipster { font-size: 2.0rem; margin-left: 10px; }

/* ScrollToTop Arrow */
.scrollToTop { width: 64px; height: 84px; padding: 0; text-align: center; font-weight: bold; color: #444; text-decoration: none; position: fixed; bottom: 15px; right: 10px; display: none; background: url('Graphics/ScrollToTop.png') no-repeat 0 20px; }
.scrollToTop:hover { text-decoration: none; }
.scrollToTop:active { outline: none; }