@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --col_Clear: rgba(0,0,0,0);
    /* Primary */
    --col_Yellow: #FECB00;

    /* Secondary */
    --col_MidBlue: #0098DB;
    --col_LightBlue: #A0CFEB;
    --col_LightGrey: #DAD7CB;
    --col_Cream: #F1E3BB;
    
    --col_Purple: #920075;
    --col_DarkGreen: #006A4D;
    --col_BrightGreen: #58A618;
    --col_MidGreen: #00B588;

    --col_White: #ffffff;
    --col_Black: #000000;

    --col_red: #911824;
    --col_light_red: #B9404F;
    --col_blue: #001F38;
    --col_orange: #A13F22;
    --col_gold: #DC9E28;

    /* Trade Colours */
    --tra_red: rgba(235, 58, 23, 1.0);

    /* Progress Colours */
    --text_complete: #3c763d; /* Bootstrap default for .list-group-item-success */
}

body, html, select, div:not(.tab-title, .fa-lock), a, td, label, table,
h1, h2:not(.tab-title, .fa-lock), h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.section-title, .status {
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important; /* Set to 45 Light */
    font-size: 17px !important;
    font-style: normal;
    color: var(--col_blue) !important;
}

.navbar {
    margin-bottom : 10px !important; 
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important; /* Set to 55 Roman */
    text-transform: uppercase !important;
    font-size: 18px !important; /* Large scale */
    color: var(--col_blue) !important;
    letter-spacing: 0.5px !important; /* Space between letters */
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > .divider-vertical{
    height: 50px !important; 
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: var(--col_blue)!important;
    color: var(--col_White) !important;
}

/* .tab-title, .fa-lock{
    color: var(--col_White) !important;
} */

.form-control {
    border-radius: 10px;
}

.xrm-attribute-value, .xrm-attribute-value > p, .faq {
    color: var(--col_blue) !important;
    font-size: 18px !important;
}
.xrm-attribute-value > h1 {
    color: var(--col_red) !important;
    font-size: 30px !important;
}

.field-label
{
    color: var(--col_red) !important;
}

/* Navigation Bar*/
.navbar.navbar-static-top
{
    background-color: var(--col_white) !important;
}

/* Practice Gateway Nav Bar */
.homelink, a.homelink:hover, a.homelink:focus {
    font-family: "Roboto", sans-serif !important;
    font-weight: 500 !important; /* Set to 55 Roman */
    font-style: normal;
    font-size: 18px !important; /* Large scale */
    text-transform: uppercase !important;
    color: var(--col_red) !important;
    letter-spacing: 0.5px !important; /* Space between letters */
}

.navbar-inverse .navbar-nav > li > ul > li > a
{
    color: var(--col_blue) !important;
}
.navbar-inverse .navbar-nav > li > a
{
    color: var(--col_White) !important;
    font-weight: bold !important;
}
.navbar-inverse .navbar-nav > li > a:hover
{
    color: var(--col_blue) !important;
}
div.action > ul.dropdown-menu
{
    background-color: var(--col_Clear) !important;
    color: var(--col_Clear) !important;
}

.navbar-inverse .navbar-nav > li > ul > li > a:hover
{
    color: var(--sec_blue) !important;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: var(--col_Clear) !important;
}

.navbar-inverse .navbar-nav > li > a:hover
{
	border-bottom-color: var(--col_red) !important;
}

.navbar-inverse .navbar-nav > li > ul > li > a, ul.dropdown-menu
{
    
    background-color: var(--col_red) !important;
    color: var(--col_White) !important;
}

div.action > ul.dropdown-menu
{
    
    background-color: var(--col_Clear) !important;
    color: var(--col_Clear) !important;
}

.navbar-inverse .navbar-nav > li > ul > li > a:hover
{
    color: var(--col_blue) !important;
}

.navbar-inverse .navbar-nav > li > ul > li > a:hover
{
    background-color: var(--col_Clear) !important;
    border-color: var(--col_blue) !important;
}

/* Progress List-Group for basic form pagination */
ol.progress.list-group > li.list-group-item.list-group-item-success > a
{
    color: var(--text_complete) !important;
}
ol.progress.list-group > li.list-group-item.active > a  /* This must be last so it takes priority */
{
    color: var(--col_White) !important;
}

/* Footer */
footer .footer-bottom
{
    background-color: var(--col_blue) !important;
}

footer .footer-bottom a
{
    color: var(--col_White) !important;
}

footer .footer-bottom a:hover
{
    color: var(--col_White) !important;
}
/** Generic Items **/
a
{
	color: var(--col_blue) !important;
}

a:hover
{
	color: var(--col_orange) !important;
}

th> a {
    color: var(--col_blue) !important;
}

.dropdown-menu > .active > a{
    background-color: var(--col_blue) !important;
    font-weight:bold !important;
}
.breadcrumb{
    background-color: var(--col_White) !important;
    font-size:16px !important;
}
.breadcrumb > .active {
    font-weight: bold !important;
    color: var(--col_blue) !important;
}
/** New rounded Buttons Requested by EP **/
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 16px; /* Reduced padding for a smaller button */
    font-size: 14px; /* Adjust font size to make it smaller */
    line-height: 1.42857143; /* Line-height consistent with font size */
    border-radius: 0; /* Ensures the corners are completely straight */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Primary Buttons */
.btn-primary {
    background: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color red */
    border: 1px solid transparent; /* To ensure border is set properly */
    border-right: 1px solid var(--col_red); /* Right side border */
    border-bottom: 1px solid var(--col_red); /* Bottom side border */
    border-top: 1px solid transparent; /* Top side border transparent */
    border-left: 1px solid transparent; /* Left side border transparent */
    font-weight: 400 !important;
    font-size: 14px !important;/* Adjust font size to make it smaller */
}

.btn-primary:hover {
    background-color: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color blue on hover */
    border: none; /* Removes all borders on hover */
}

.btn-primary > a
{
    color: var(--col_White) !important;
}
.btn-primary > a:hover
{
    background-color: var(--col_White) !important;
    background: var(--col_White) !important;
    color: var(--col_red) !important;
}
/* Default Buttons*/
.btn-default
{
    background: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color red */
    border: 1px solid transparent; /* To ensure border is set properly */
    border-right: 1px solid var(--col_red); /* Right side border */
    border-bottom: 1px solid var(--col_red); /* Bottom side border */
    border-top: 1px solid transparent; /* Top side border transparent */
    border-left: 1px solid transparent; /* Left side border transparent */
    font-weight: 400 !important;
    font-size: 14px !important;/* Adjust font size to make it smaller */
}
.btn-default:hover
{
    background-color: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color blue on hover */
    border: none; /* Removes all borders on hover */
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover
{
    background: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color red */
    border: 1px solid transparent; /* To ensure border is set properly */
    border-right: 1px solid var(--col_red); /* Right side border */
    border-bottom: 1px solid var(--col_red); /* Bottom side border */
    border-top: 1px solid transparent; /* Top side border transparent */
    border-left: 1px solid transparent; /* Left side border transparent */
    font-weight: 400 !important;
    font-size: 14px !important;/* Adjust font size to make it smaller */
}
.nav-tabs>li>a, .nav-tabs>li>a:hover, .navbar-inverse .navbar-nav>.open>a
{
    background: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color red */
    border: 1px solid transparent; /* To ensure border is set properly */
    border-right: 1px solid var(--col_red); /* Right side border */
    border-bottom: 1px solid var(--col_red); /* Bottom side border */
    border-top: 1px solid transparent; /* Top side border transparent */
    border-left: 1px solid transparent; /* Left side border transparent */
    font-weight: 400 !important;
    font-size: 14px !important;/* Adjust font size to make it smaller */
}

th> a {
    color: var(--col_red) !important;
}

.dropdown-menu > .active > a{
    background-color: var(--col_Clear) !important;
    font-weight:bold !important;
}
.breadcrumb{
    background-color: var(--col_White) !important;
    font-size:16px !important;
}
.breadcrumb > .active {
    font-weight: bold !important;
    color: var(--col_blue) !important;
}

/* Info Buttons*/
.btn-info
{
    background: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color red */
    border: 1px solid transparent; /* To ensure border is set properly */
    border-right: 1px solid var(--col_red); /* Right side border */
    border-bottom: 1px solid var(--col_red); /* Bottom side border */
    border-top: 1px solid transparent; /* Top side border transparent */
    border-left: 1px solid transparent; /* Left side border transparent */
    font-weight: 400 !important;
    font-size: 14px !important;/* Adjust font size to make it smaller */
}
.btn-info:hover
{
    background-color: var(--col_White) !important;
    color: var(--col_red) !important; /* Text color blue on hover */
    border: none; /* Removes all borders on hover */
}
.btn-info > a
{
    color:var(--col_red) !important;
}
.btn-info > a:hover
{
    color:var(--col_White) !important;
}


div.action > ul > li> a 
{
    background-color: var(--col_Clear) !important;
    border-color: var(--sec_Clear) !important;
    color:var(--col_red) !important;
}
div.action > ul > li> a:hover 
{
    background-color: var(--col_Clear) !important;
    border-color: var(--col_Clear) !important;
    color:var(--col_orange) !important;
}

/* Default Buttons on Tax Return Edit form actions*/
div.form-action-container-left > .btn-default
{
    margin-left: 5px;
}

/* Info Alert */
.alert-info
{
    background-color: var(--col_blue) !important;
    color:var(--col_White) !important;
    font-weight: bold !important;
    border-color: var(--col_blue) !important;
}
.alert-info > .xrm-attribute > .xrm-attribute-value
{
    color:var(--col_White) !important;
}

/* Danger Alert */
.alert-danger
{
    background-color: var(--col_Red) !important;
    color:var(--col_red) !important;
    font-weight: bold !important;
}

/* General panel styles */
.panel,
.panel-default {
    background: var(--col_White) !important;
    color: var(--col_Red) !important;
    border: none !important;
    border-radius: 20px;
    position: relative;
    overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Single shadow for the entire panel */
}

/* Panel heading styles */
.panel-heading-custom {
    background: var(--col_White) !important;
    border: none !important;
    border-radius: 20px 20px 0 0; /* Top rounded corners */
    position: relative; /* Ensure stacking context */
    z-index: 1; /* Lower z-index so it integrates with panel's shadow */
    padding: 10px; /* Adjust padding as needed */
    margin-top: -10px; /* Overlap heading slightly with the panel */
}

.panel-title {
    color: var(--col_blue) !important;
    font-size: 26px !important;/* Adjust font size as needed */
    font-weight: 600 !important;
    margin-top: 0; /* Reset margin to avoid spacing issues */
    padding-top: 20px; /* Ensure content doesn't touch the top */
    border-bottom: none !important; /* Remove bottom border */
    padding-left: 10px !important;
    position: relative; /* Ensure the ::after element is positioned relative to this title */
}

.panel-title::after {
    content: "";
    position: absolute;
    width: 75px; /* Adjust the width to control the line length */
    height: 2px;
    background: #9B2639;
    bottom: -5px; /* Adjust the bottom value to position the line closer or further */
    left: 10px; /* Align the line with the text by adjusting the left value */
}

/* Content padding to keep away from shadow */
.panel-body {
    padding: 20px;
    position: relative; /* Ensure it's part of the same stacking context */
    z-index: 0; /* Place behind the heading for overlap */
}

/* Optional: Remove shadow overlap between panel and body */
.panel::before {
    content: "";
    position: absolute;
    top: -10px; /* Adjust to the amount the heading overlaps */
    left: 0;
    right: 0;
    height: 10px;
    background: var(--pri_white); /* Match the panel's background */
    z-index: 0; /* Ensure it sits behind the heading */
}

.nav1 > span
{
    color: var(--col_Red) !important;
    font-size: 16px;
}
.glyphicon-envelope
{
    color: var(--col_blue) !important;
}
/* Bold Text In Panel */
b, strong {
    color: var(--col_blue) !important;
    font-size: 16px;
}
h4 > strong {
    color: var(--col_blue) !important;
}

h5
{
    color: var(--col_blue) !important;
}

h5> strong > a {
    color: var(--col_blue) !important;
}

td:nth-child(1) {
    color: var(--col_blue) !important;
}

td:nth-child(2) {
    color: var(--col_blue) !important;

}

td>a:hover, th>a:hover, .nav>li>a:hover, .breadcrumb > li a:hover
{
    color: var(--col_white) !important;
}

/*** Signed Out ***/
/*Thin bar on home page when Signed Out*/
h2.blue_border
{
	border-bottom-color: var(--col_red) !important;
}
h2.blue_border>.xrm-attribute>.xrm-attribute-value>div{
    color: var(--col_blue) !important;
    font-size: 40px !important;
    text-align: center !important;
}
.blue_border>.xrm-attribute>.xrm-attribute-value>div>h4 {
    color: var(--col_blue) !important;
  }

.blue_border {
  padding-bottom: 10px !important;
  border-bottom: 5px solid #0b80d0 !important;
  }
.page_section h2
{
    color: var(--col_red) !important;
}
.page_section h4
{
    color: var(--col_red) !important;
}

.ui-icon-triangle-1-e, .ui-icon-triangle-1-s{
    display:none !important;
}


h1, .h1{
    font-size: 30px !important;
}

.form-horizontal .control-label {
    text-align: right;
    font-size: 18px !important;
}

#ContentContainer_MainContent_MainContent_LocalLogin > .col-md-6 {
    width: 70% !important;
}

.ui-accordion .ui-accordion-icons {
    padding-left: 1.0em;
    border-radius: 20px;
}

.ui-accordion .ui-accordion-header {
    font-weight: bold;
    font-size: large;
}


#footericon
{
    height: 30px;
}

.tablecontent{
    font-size: 16px;
}

.page_section p {
    border-top: none !important; 
    padding-top: 5px !important;
}

.picklistHorizontalStatus > label
{
    width: 5% !important;
}

.picklistHorizontalStatusDA > label
{
    width: 15% !important;
}

/* Horizontal Picklist for Student Loan */
.picklistHorizontalStudent > label
{
    width: 20% !important;
}

.entitylist-filter {
    background: none !important;
}
.select-items div:hover, .same-as-selected
{
    background-color: var(--col_red) !important;
color:var(--col_White) !important;
}

.tooltip-inner {
    background-color: var(--col_White) !important;
    color: var(--col_White) !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    color: var(--col_White) !important;
    background-color: var(--col_red) !important;
}


/* Tax Information Request accordion */
#EntityFormPanel .tab-column > div > fieldset {
    margin-bottom: 10px;
}

#EntityFormPanel .required-element::after {
    content: " *";
    font-weight: "bold";
    color: var(--tra_red);
}

#EntityFormPanel fieldset > legend.ui-accordion-header > h3 {
    margin-top: 0px;
    margin-bottom: 0px;

}

/* Subgrid action buttons */
.view-grid .dropdown.action>.btn {
    display: none;
}
.view-grid .dropdown.action .dropdown-menu {
    display: block;
    position: static !important;
    position: initial !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 95px;
    min-width: 95px;
    width: 95px;
    left: auto !important;
    top: auto !important;
    padding: 0px;
}
.view-grid .dropdown.action .dropdown-menu li {
    display: inline-block;
    text-align: center;
}
.view-grid .dropdown.action .dropdown-menu li a {
    font-size: 0;
    padding: 2px;
    margin: 0;
}
.view-grid .dropdown.action .dropdown-menu li a>span {
    font-size: 18px;
}
.view-grid .dropdown.action .dropdown-menu li a:hover {
    color: var(--col_orange) !important;
    background: transparent;
}
td[aria-label="action menu"] {
    padding-top: 2px !important;
}

/* Navigation bar links on  Tax Information Request forms */
.list-group-item a {
    cursor: pointer;
}
.btn-info
div#DocumentsList > ul >li > a,
div#contactList > ul > li > a
{
    background: var(--col_red) !important;
    color: var(--col_White) !important;
    font-size: 18px !important;
    border-radius: 20px;
}
div#DocumentsList > ul >li > a:hover,
div#contactList > ul > li > a:hover
{
    background: var(--col_red) !important;
    color: var(--col_blue) !important;
    font-size: 18px !important;
    border-radius: 20px;
}
div#DocumentsList > ul >li.active > a
{
    background: var(--col_blue) !important;
    color: var(--col_White) !important;
    font-size: 18px !important;
    border-radius: 20px;
}

.nav1-ndash {
    padding-left: 15px !important;
}


div.cal-day-outmonth{
    background: var(--col_red) !important;   
    color: var(--col_White) !important;
}
div.cal-day-outmonth > span{
    background: var(--col_Clear) !important;   
    color: var(--col_White) !important;
}
div.cal-day-inmonth{
    background: var(--col_White) !important;   
    color: var(--col_White) !important;
}
div.cal-day-inmonth:hover{
    background: var(--col_LightBlue) !important;   
    color: var(--col_White) !important;
}
div.cal-day-inmonth > span{
    background: var(--col_Clear) !important;   
    color: var(--col_Black) !important;
}

div.cal-day-today {
    background: var(--col_MidBlue) !important;   
    color: var(--col_White) !important;
}
div.cal-day-today > span{
    background: var(--col_Clear) !important;   
    color: var(--col_Black) !important;
}

div.events-list > a.event-info.dayWorking{
    background-color: var(--col_red) !important;    
    color:var(--col_White) !important;
}

div.events-list > a.event-info.dayNonWorking,
div.events-list > a.event-info.dayAbsence,
div.events-list > a.event-info.dayAnnualLeave,
div.events-list > a.event-info.dayTravelling,
div.events-list > a.event-info.dayOther{
    background-color: var(--col_orange) !important;    
    color:var(--col_White) !important;
}

#MonthViewToggleButton.active, #YearViewToggleButton.active{
    background-color: var(--col_red) !important;
    color: var(--col_White) !important;
}
div#calendarGrid >div.btn-group > a.btn-primary {
    background-color: var(--col_red) !important;
    color: var(--col_White) !important;
    border-color: var(--col_Black) !important;
}
div#calendarGrid >div.btn-group > a.btn-primary:hover,
#MonthViewToggleButton:hover,#YearViewToggleButton:hover {
    background-color: var(--col_orange) !important;
    color: var(--col_White) !important;
    border-color: var(--col_Black) !important;
}
div#calendarGrid >div.btn-group > a.btn-secondary,
div.modal-body > div.btn-group > a.btn-secondary{
    background-color: var(--col_orange) !important;
    color: var(--col_White) !important;
    border-color: var(--col_Black) !important;
}
div#calendarGrid >div.btn-group > a.btn-secondary:hover,
div.modal-body > div.btn-group > a.btn-secondary:hover{
    background-color: var(--col_red) !important;
    color: var(--col_White) !important;
    border-color: var(--col_Black) !important;
}
div#calendarHelpBox, div#calendarHelpBox > span,div#calendarHelpBox > button,
div#calendarCreateHelpBox, div#calendarCreateHelpBox > span,div#calendarCreateHelpBox > button,
div#calendarEditHelpBox, div#calendarEditHelpBox > span,div#calendarEditHelpBox > button,
div#calendarSetupHelpBox, div#calendarSetupHelpBox > span,div#calendarSetupHelpBox > button,
div#calendarSubmissionHelpBox, div#calendarSubmissionHelpBox > span,div#calendarSubmissionHelpBox > button{
    color:var(--col_White) !important;
}
div#calendarErrorBox > .xrm-attribute-value-encoded.xrm-attribute-value{
    color:var(--col_White) !important;
}

a[data-attribute="Pending Signing"] {
    background-color: var(--col_MidBlue) !important;
    border-color: var(--col_MidBlue) !important;
}

a[data-attribute="Signed"] {
    background-color: var(--text_complete) !important;
    border-color: var(--text_complete) !important;
}

h5.bigger-bold{
    color: var(--col_red) !important;
}


#ClientMessage,#ClientMessage>#ClientMessageBody {
    background: var(--col_red) !important; 
    color: var(--col_White) !important;
    border: var(--col_red) !important;
}

#UserMessage,#UserMessage>#UserMessageBody {
    background: var(--col_blue) !important;
    color: var(--col_White) !important;
    border: var(--col_blue) !important;
}

/* Progress bar on Identity Verification page */
.progress.sticky, .progress-bar.sticky {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    z-index: 100;
}

#sharedDocumentsRow {
	border-bottom: 1px solid #eee !important;
}

.nav-tabs>li>a, .nav-tabs>li>a:hover, .navbar-inverse .navbar-nav>.open>a{
    font-size: 15px !important;
}