/**************************************
***Sets the rendering for the navbar***
**************************************/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');

.nav-div {
    width: 100%;
    background-color: #194879 !important;
    font-family: arial;
    position: fixed;
    z-index: 100;
}

nav.navbar.navbar-default {
    background-color: #194879 !important;
    border: none !important;
    border-radius: 0 !important;
    height: 48px;
    /*max-width: 1750px;*/
    min-width: 20em;
    margin: 0 auto;
}

nav.navbar {
    min-height: 48px;
    margin-bottom: 0 !important;
}

/*************************************************
***Branding images for TVG, 4NJBets, and PABets***
*************************************************/

.navbar-brand {
    background-image: url('https://promos.tvgresources.com/assets/newtvg/css/images/tvg-logo-hor-white.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-brand.brand-4njbets {
    background-image: url('https://promos.tvgresources.com/assets/img/Logo_4nj.png');
    background-size: 85%;
}

.navbar-brand.brand-pabets {
    background-image: url('https://promos.tvgresources.com/assets/img/Logo_pab.png');
    background-size: 85%;
}


/**************************************************************************
*                                                                         *
*    Sets the style rendering for the left handed navbar components       *
*                                                                         *
**************************************************************************/


/*******************************************************************
***Disables the left handed navbar links for smaller screen sizes***
*******************************************************************/

@media only screen and (max-width: 916px){
    .tvgMenus {
        display: none;
    }
}

/*******************************************
***Sets the rendering for the brand image***
*******************************************/

.navbar-brand {
    width: 128px;
    height: 48px;
    margin: 0 7.5px;
}

@media only screen and (max-width: 375px){
    .navbar-brand {
    width: 40%;
}
}

/********************************************
***Sets the rendering for the menu toggles***
********************************************/

.dropdown-toggle {
    font-size: 11px;
    height: 48px;
}

.dropdown-toggle.hover {
    background-color: #27609b;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus {
    background-color: #27609b;
}

.nav>li>a {
    padding: 18px 8px;
    line-height: 12px;
}

.navbar-nav>li>.dropdown-menu {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

ul.dropdown-menu {
    padding: 8px 0;
    border: 0;
}

.dropdown-menu>li>a {
    padding: 0px 24px;
    margin: 17px 0px;
    clear: both;
    font-weight: bold;
    white-space: nowrap;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.new-greyhound {
    color: #ffb80c!important;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    padding-top: 6px;
    padding-left: 10px;
}


/******************************************
***Sets the location of the unique menus***
******************************************/

#schedule-menu {
    left: -52px;
}

#greyhound-menu {
    left: -34px;
}

#contest-menu {
    left: -42px;
}

#handicap-menu {
    left: -54px;
}

#promotions-menu {
    left: -34px;
}

#help-menu {
    left: -62px;
}

li>a.tvg-links {
    color: #27609b !important;
    font-size: 12px;
    font-family: arial;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    float: left;
}


/***********************************************
***Renders the arrow above the dropdown menus***
***********************************************/

.arrow_box {
    position: absolute;
    background: #fff;
}

.arrow_box:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}

li>a.tvg-links:hover {
    color: #5c9de0 !important;
    background-color: transparent;
}


/***************************************
***Custom widths for the toggle menus***
***************************************/

#schedule-toggle {
    width: 102px;
    pointer-events: none;
}

#greyhound-toggle {
    width: 95px;
    pointer-events: none;
}

#contest-toggle {
    width: 76px;
    pointer-events: none;
}

#handicapping-toggle {
    width: 101px;
    pointer-events: none;
}

#promotions-toggle {
    width: 91px;
    pointer-events: none;
}

#help-toggle {
    width: 46px;
    pointer-events: none;
}


/**************************************************************************
*                                                                         *
*    Sets the style rendering for the right handed navbar components      *
*                                                                         *
**************************************************************************/

/*************************************************************************
***Disables the margin for smaller devices on the right hand components***
*************************************************************************/

@media only screen and (min-width: 767px)
and (max-width: 1142px) {
    .navbar-right {
        margin-right: 0 !important;
    }
}

/*********************************************
***Toggles the login dropdown or the modal ***
*********************************************/
@media only screen
and (min-width: 768px) {
    #loginButtonMobile {
        display: none;
    }
}

@media only screen
and (max-width: 767px) {
    #loginButtonMobile {
        display: block;
    }

    #loginButton {
        display: none;
    }
}

/**********************************************************************************
***Enables the padding for the right handing navbar components for desktop views***
**********************************************************************************/

@media only screen and (min-width: 1143px) {
    nav.navbar.navbar-default {
        padding: 0 8px 0 0;
    }
}

/*************************************************************************************
***Disables the padding for the right handing navbar components for smaller devices***
*************************************************************************************/

@media only screen and (max-width: 1142px)
and (min-width: 917px){
    nav.navbar.navbar-default {
        padding: 0;
    }
}

/*************************************************
***Styling for the Watch TVG link on the navbar***
*************************************************/

#watch-link {
    padding: 11px 8px 11px 10px;
}

#watch-div {
    display: flex;
    align-items: center;
}

#play-logo {
    margin-right: 8px;
}

#watchLiveButton {
    font-size: 11px;
    /*width: 113px;*/
    text-align: center;
    height: 48px;
}

/***********************************************************
***Disables the Watch TVG link for smaller sized devices***
***********************************************************/

@media only screen and (max-width: 475px) {
    #watchLiveButton {
        display: none;
    }
}

/*************************************************************************************
***Ensures the brand logo, logon, and sign up links are visible in smaller devices***
*************************************************************************************/

@media only screen and (min-width: 300px) and
(max-width: 1024px) {
    .nav-div {
        display: none;
    }

    .non-mobile-app {
        display: block
    }

    .navbar-nav {
        margin: 0 !important;
    }

    .navbar-header:after {
        content: inherit;
        display: none !important;
    }

    .navbar-right {
        display: inline-flex !important;
        float: right;
    }
}

@media screen and (max-width: 1366px)
and (orientation: landscape) {
    .nav-div {
        display: none;
    }
    
    .non-mobile-app {
        display: block
    }
}

/***********************************************
***Styling for the login button on the navbar***
***********************************************/



#login-div {
    display: flex;
    align-items: center;
}

.loginBtn {
    background-color: rgba(255, 255, 255, 0.2) !important;
    width: 71px;
    padding: 0;
    margin-right: 8px;
    margin-left: 8px;
}

.loginBtnSolo {
    background-color: rgba(255, 255, 255, 0.2) !important;
    width: 71px;
    padding: 0;
    margin-right: 15px;
    margin-left: 8px;
}

.loginBtn:active,
.loginBtn:focus,
.loginBtnSolo:active,
.loginBtnSolo:focus {
    color: #fff !important;
}

.loginBtn:hover {
    color: rgb(211, 223, 236) !important;
}

.open>.dropdown-toggle.btn-default {
    color: #fff;
}

#lock-image {
    margin-right: 4px;
    margin-left: 8px;
}

#lock-image-logout {
    margin-left: 3px;
    margin-right: 1px;
}

@media screen
and (min-device-width: 500px)
and (max-device-width: 1336px) {
    #lock-image {
        margin: 0 0 0 9px;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #lock-image {
        margin: 0 0 0 4px;
    }
}

.loginBtn:focus {
    outline: inherit;
}

button:hover div svg #lock-color {
    fill: rgb(211, 223, 236);
}


/****************************************
***Styling for the login dropdown form***
****************************************/

#login-dropdown {
    right: 7px;
    font-family: Arial,Helvetica,sans-serif!important;;
}

#login-dropdown.arrow_box:after {
    left: 61%;
}

#login-dropdown.arrow_box_solo:after {
    left: 87%!important;
}

ul.dropdown-form {
    border-radius: 0;
    width: 272px;
    min-height: 376px;
    background-color: #fff;
    padding: 0;
    border: 0;
    margin: 0;
}

form div.loginDiv {
    width: 240px;
    font-family: Helvetica,Arial,sans-serif!important;
    position: relative;
}

.loginDiv {
    margin: 16px 16px 0 16px;
}

.loginLabelDiv {
    margin: 0 0 4px 0;
    width: 100%;
    height: 16px;
}

div label.login-label {
    color: #333333 !important;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 4px;
    display: inline;
}

.errorMessages {
    font-size: 12px;
    color: #de3232!important;
    line-height: 14px;
    margin: 4px 0 0 16px;
}

.noError {
    display: none!important;
}

.warningSymbolNavBar {
    width: 16px;
    height: 16px;
    fill: #de3232;
    margin: 0 0 4px 0;
}

.userWarningDiv {
    display: inline;
}

.warningOutline {
    box-shadow: inset 0 -2px 0 0 #de3232;
}

.loginFailureMsg {
    font-size: 12px;
    margin: 0;
    display: inline-block;
    line-height: 1.33;
    display: table-cell;
    width: auto;
}

.loginFailureSym {
    display: inline;
    width: 32px;
    vertical-align: middle;
    display: table-cell;
}

.errorSymbolNavBar {
    width: 32px;
    height: 32px;
    fill: #de3232;
    margin: 0 16px 0 0;
}

.form-control::-webkit-input-placeholder {
    color: #666666;
}

#password-div {
    margin: 0;
    width: 100%;
}

#passwordToggle {
    color: #5c9de0;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    width: 69px;
    position: absolute;
    right: 1px;
    top: 5px;
    border-left: 1px solid #ddd;
    border-radius: 0;
    z-index: 1000;
    background-color: transparent;
}

div input.login-input, div select.login-input {
    border-radius: 2px;
    font-size: 12px;
    height: 40px;
    padding: 12px 8px;
    /*box-shadow: inset 0 0 0 1px #cccccc;*/
    color: #666666;
}

.login-input:focus {
    border: 1px solid #5c9de0;
    outline: none;
    box-shadow: none;
}

.pwdInput {
    position: relative;
}

.pwdInputToggle,
.pwdInputToggle:focus {
    z-index: 1000;
}

.defaultToggleState {
    display: none;
}

select.form-control.login-input {
    border-radius: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    z-index: 2;
    background: none;
}

.inputSelectArrow {
    fill: #666;
    width: 16px;
    height: 40px;
    position: absolute;
    z-index: 1;
    color: #333;
    right: 8px;
    bottom: 0;
}

.modalSelectArrow {
    position: absolute;
    right: 16px;
}

p#login-text {
    font-size: 12px;
    line-height: 1.33;
    margin: 8px 16px 0 16px;
}

/*****************************************************
***Styling for the dropdown menu checkbox component***
*****************************************************/

.login-checkbox {
    width: 24px;
    margin: 16px 0 0 16px;
    position: relative;
    display: inline-block;
}

.login-checkbox label {
    cursor: pointer;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 2px;
}

.login-checkbox label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 15px;
    height: 6px;
    background: transparent;
    top: 7px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.login-checkbox label:hover::after {
    opacity: 0.5;
}

.login-checkbox input[type=checkbox]:checked+label:after {
    opacity: 1;
}

.loginCheckboxText {
    display: inline-block;
    font-size: 12px;
    color: #333333;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    margin-left: 8px;
}


/*****************************************************
***Styling for the login button and the forgot     ***
***crendentialds text under the login dropdown form***
*****************************************************/

.login-submit-div {
    margin: 16px 0 0 0;
    height: 96px;
    width: 272px;
    background-color: #f6f7fa;
    box-shadow: inset 0 1px 0 0 #e6e9ef;
    position: absolute;
    bottom: 0;
    left: 0;
}

#navBarLoginSubmitBtn {
    width: 240.3px;
    height: 40px;
    border: 0;
    border-radius: 2px;
    background-color: #5c9de0;
    color: #ffffff;
    font-size: 11px;
    margin: 16px 16px 0 16px;
    margin-top: 16px;
}

#login-forget {
    margin: 0 16px 0 16px;
    font-size: 11px;
    font-weight: 700;
    color: #5c9de0 !important;
    position: absolute;
    bottom: 13px;
}

#signUpButton {
    background-color: #38ab50;
    width: 62px;
    padding: 10px 8px;
    margin-right: 15px;
}

.signUpBtnDisabled {
    display: none!important;
}

a#signUpButton {
    color: white !important;
}

#signUpButton:hover {
    color: rgb(211, 223, 236) !important;
}

/************************************
***Login error message on dropdown***
************************************/

.navBarLoginError {
    background-color: #fceded;
    border-bottom: 2px solid #de3232;
    width: 100%;
    padding: 16px;
    margin: 0;
    display: table;
}

/**********************************
***General navbar button styling***
**********************************/

.navbar-btn {
    border-radius: 2px;
    font-size: 11px;
    display: block;
    float: left;
}

.navbar-btn:hover {
    color: rgb(211, 223, 236);
}

.btn-default {
    color: #fff;
    border: 0px;
    font-size: 11px;
    height: 32px;
}

.navbar-default .navbar-nav>li>a {
    color: #fff !important;
    /*height: 48px;*/
}

.mobileBackNavBar {
    height: 48px;
    width: 100%;
    background-color: #f6f7fa;
    color: #333333;
    padding-left: 8px;
    line-height: 48px;
    flex: 0 0 auto;
}

#mobileBackBtn {
    display: inline-block;
    align-items: center;
}

#mobileBackBtn svg {
    margin-bottom: 3px;
}

.mobileBackNavBar span {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    font-style: normal;
    font-stretch: condensed;
    letter-spacing: normal;
    text-align: left;
    margin-left: 6px;
}