/* #region Base variables*/

:root {
    --white: #ffffff;
    --black: #000000;
    --orange: #FF5205;
    --dark-orange: #d94503;
    --light-blue: #0085AD;
    --dark-blue: #002F6C;
    --dark-blue-hover: #00295e;
    --dark-blue-apave: #030f40;
    --gold: #FFAA00;
    --gray9: #63666A;
    --gray8: #626366;
    --gray7: #77787B;
    --gray6: #898B8D;
    --gray5: #9C9EA1;
    --gray4: #ABB3B5;
    --gray3: #C5C7C9;
    --gray2: #DBDCDD;
    --gray: #F1F1F2;
    --green: #008800;
    --red: #ff0000;
    --light-red: #ff7676;
    --muted-green: #00CC63;
    --muted-green-dark: #00AE55;
    --muted-red: #E75E5E;
    --muted-red-dark: #E90000;
}

@font-face {
    font-family: 'Aleo';
    src: url('webfonts/Aleo-Regular.ttf');
}

@font-face {
    font-family: 'Proxima-Nova';
    src: url('webfonts/Proxima-Nova.ttf');
}

/* #endregion */

/* #region Dom and layout */

html {
    position: relative;
    height: 100vh;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: var(--dark-blue-apave);
    height: 100vh;
    font-size: 13px;
    font-family: Arial, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Aleo;
    margin:0 10px 8px 0 !important;
}

h1, h2 {
    color: var(--dark-blue);
}

h2{
    height:50px;
}

h3, h4, h5, h6 {
    color: var(--gray7);
}

.deleteAlert {
    position:relative;
    margin-top:15%;
}

.t-150{
    padding-top:150px;
}

.systemLoader{
    z-index:99999 !important;
}

/* #endregion */

/* #region Bootstrap overrides */

#nonEditAlert{
    margin:30px 0 30px 0;
    padding:8px;
}

a.navbar-brand {
    white-space: normal;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 70px;
    padding: 0;
    margin: 0;
}

.navbar-brand {
    color: var(--white);
}

.navbar-brand:hover {
    color: var(--white);
    cursor: pointer;
}

.col-form-label {
    text-align: left;
}

.form-control, .input-group-text {
    border: 1px solid var(--gray4);
}

.dropdown-item {
    color: var(--dark-blue);
}

.dropdown-item:hover {
    cursor: pointer;
    color: var(--dark-orange);
}

.navbar-brand {
    margin-top:-6px;
    margin-left:1%;
}

.navbar-brand img {
    width: 200px;
    position:absolute;
    top:8px;
}

.input-group-text, .input-group-prepend {
    margin: 0;
    height: 33.5px;
    border-radius: 0;
}

.input-group-append {
    border-radius: 0;
}

button.btn.btn-primary, input[type=file] {
    background-color: var(--orange);
    color: white;
}

button.btn.btn-primary:hover, input[type=file]:hover {
    color: white;
}

.nav-link{
    float:right;
    padding-right: 20px;
    color: var(--white);
}

.nav-link:hover{
    color: var(--gold);
    cursor: pointer;
}

.nav-link-active, .nav-link .dropdown-toggle .show {
    color: var(--gold);
}

.navbar-toggler-icon {
    z-index: 1000;
    position: absolute !important;
    right: 10px !important;
    z-index: 1001;
    border: 0;
}

.navbar-toggler, .navbar-toggler:active {
    color: var(--white);
    border: 0;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* #endregion */

/* #region Positional */

.gridButtonRightSpacer{
    margin-right:75px;
}

.bottomControls {
    text-align: right !important;
    position: absolute !important;
    padding: 100px 10px 10px 10px;
    bottom: 0;
    left: 0;
    width: 100%;
}

.tabStrip{
   height:100%
}

.landingPageTabs {
    height: 100%;
}

.bottom {
    position: absolute !important;
    bottom: 10px;
}

.fullHeight{
    height:100% !important;
}

.bottomContainer{
    position:relative;
    min-height:60px;
    margin-top:90px;
}

.leftBottom {
    position: absolute !important;
    bottom: 10px;
    left: 10px;
    text-align: left;
}

#formSideButtonContainer {
    position: absolute !important;
    width: 180px !important;
    bottom: 10px;
}

.rightBottom {
    position: absolute !important;
    bottom: 10px;
    right: 10px;
    text-align: right;
}

.buttonBox{
    position: absolute;
    bottom:5px;
    right:5px;
}

.manualValidationItem{
    padding-left:13px;
}
.manualValidationItem > span{
    display:inline-block;
    margin-left:-4px;
}

.leftPadding {
    padding-left: 30px;
}
.topPadding{
    padding-top:30px;
}

.reportsHeader {
    padding:50px 0 25px 0;
}

.top10pad {
    margin-top: 10%;
}

.center-text{
    text-align:center;
}

.topNavigationBuffer{
    margin-top:110px;
}

.right{
    float:right;
}

/* #endregion */

/* #region Images, logos, custom headers */

#loginAppTitle{ margin:0;}

/* #endregion */

/* #region Navigation */

#mainNavigation {
    height: 87px !important;
    background-color: var(--dark-blue-apave) !important;
}

.navIcon {
    margin-right: 8px;
    font-size: 24px;
}

/* #endregion*/

/* #region Buttons, icons & form controls*/


.hiddenField{
    display:none;
}

.inputField{
    border:0 !important;
    width:100% !important;
}

.w-100{
    width:100% !important;
}

.leftButtonPad{
    margin-left:10px;
}

.normalButton{
    width:155px !important;
}

.mediumButton {
    width: 225px !important;
}

.largeButton {
    width: 250px !important;
}

.markSelectedButton {
    padding:8px 15px !important;
    width: 200px !important;
}

.k-checkbox{
    border: 1px solid #acacac;
}

button {
    font-family: Arial, Helvetica, sans-serif;
}

.noSideMargins{
    margin:3px 0;
}

ul.gridOptionSelector {
    margin-left: 30px;
}
ul.gridOptionSelector li, ul.horizontalList li{
    float:left;
    font-size:15px;
    margin-right:10px;
}
ul.gridOptionSelector li input, ul.horizontalList li input{
    margin-right:5px;
}

#acknowledgementColumn {
    display: inline-block;
    text-align: center;
}

.gridCommandGreenButton {
    width: auto !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--muted-green) !important;
    color: white !important;
    border: 1px solid var(--muted-green-dark) !important;
    margin: 3px;
}

.gridCommandGreenButton:hover {
    background: var(--muted-green-dark) !important;
}

.gridCommandRedButton {
    width: auto !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--muted-red) !important;
    color: white !important;
    border: 1px solid var(--muted-red-dark) !important;
    margin:3px !important;
}

.gridCommandRedButton:hover {
    background: var(--muted-red-dark) !important;
}

.gridIcon {
    display: block;
    width: 100%;
    color: var(--light-blue);
    text-align: center;
    font-size: 26px !important;
}

.gridIcon .k-icon {
    font-size: 26px;
}

.gridCommandButton {
    width: auto !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--light-blue) !important;
    color: white !important;
    border: 1px solid var(--dark-blue) !important;
    margin:3px !important;
}

.gridCommandButtonGreen {
    width: auto !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--green) !important;
    color: white !important;
    border: 1px solid var(--dark-blue) !important;
    margin: 3px !important;
}

.gridCommandButtonGold {
    width: auto !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--gold) !important;
    color: white !important;
    border: 1px solid var(--dark-blue) !important;
    margin: 3px !important;
}

.plGridButtonContainer .sicdPlButton {
    width: 40px !important;
    padding: 2px !important;
    height: 22px !important;
    background: var(--orange) !important;
    color: white !important;
    border: 1px solid var(--dark-orange) !important;
    margin: auto 30% !important;
}

.gridTemplateData{
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:11px;
    color:#acacac;
}

.gridCommandButton:hover {
    background: var(--dark-blue) !important;
    border: 1px solid var(--light-blue) !important;
}

.k-grid-edit-cell select {
    height: 34px;
    border: 1px solid #dedede;
    border-radius: 3px;
}

.helpText {
    font-size: 12px;
    font-style: italic;
    color: var(--light-blue);
}

#mainNavigation > div > button {
    position: absolute;
    right: 8px;
    z-index: 99999 !important;
}

#mainNavigation > div > button > span{
    color: var(--white);
}

.rightAlignButton {
    position: absolute !important;
    right: 10px !important;
    font-size: 14px;
}

.buttonContainer{
    text-align:right;
    float:right;
    margin: 8px 0;
}

.reportButtonContainer{
    width:100%;
    position:absolute;
    bottom:25px;
    right:25px;
}

.tabbedFormButtonContainer {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

div.buttonContainer > button.right.btn.btn-reset.k-button.telerik-blazor {
    border: 1px solid var(--gray8);
    background-color: var(--gray3) !important;
    color: black !important;
}

div.buttonContainer > button.right.btn.btn-reset.k-button.telerik-blazor
{
    background-color: var(--gray8) !important;
}

.controlButton, .rightAlignButton {
    height: 28px !important;
    padding: 4px 8px !important;
    background: var(--orange);
    color: white;
    float: right;
}

.gridAddButton {
    height: 32px !important;
    padding: 4px 8px !important;
    background: var(--orange);
    color: white;
    font-size: 14px;
    position: absolute;
    right: 190px;
    top: 10px;
}

.formBackground {
    padding: 20px;
    border-radius: 10px;
    background: #ffffff;
}

.sicdHelp{
    width:100%;
    display:inline-block;
    font-size:11px;
    text-align:center;
    color:#dedede;
}

#checklistPlNumber{
    display:table-cell;
    text-align:center;
}
/* #endregion */

/* #region Notifications, errors and validation */
.toastrAlert {
    right: 8px !important;
    z-index: 99999;
}

#blazor-error-ui {
    display: none;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 30vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    color: #856404;
    background-color: #fff3cd;
}

#blazor-error-ui > div {
    padding: 1rem 0 .3rem 0;
}

#blazor-error-ui .reload {
    padding: .5rem;
    color: #212529;
    background-color: #ffc107;
    text-decoration: none;
}

.validationSummary {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--red);
}

.redAlert {
    font-size: 16px;
    color: var(--red);
}

#notificationCount {
    font-size: 9px;
    position: absolute;
    padding: 2px 3px;
    margin: -3px 0 0 -6px;
}

/* #endregion */

/* #region Misc */

.signature-pad--body canvas {
    position:absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

label {
    height:20px;
    font-weight:bold;
}

span.text-only-display-data{
    display:inline-block;
    margin-left:10px;
    height:20px;
}

.alertBar{
    font-size:16px;
}

.breadcrumbs{
    font-size:22px !important;
}

.gridVendorLocationPin{
    display:inline-block;
    width:100%;
    text-align:center;
}

.passwordRuleError {
    font-size: 14px;
    color: var(--red);
}

.passwordRule {
    font-size: 14px;
    color: var(--black);
}

#appSubHeader {
    display:block;
    margin:3px 0;
    color:white;
    font-family:aleo;
    font-size:18px;
    font-weight:bold;
    letter-spacing:2px;
}

.orange {
    color: var(--orange);
}

.gray {
    background-color: var(--gray3);
}

.lightblue {
    color: var(--light-blue);
}

.grayIcon {
    color: var(--gray5);
}

.green {
    color: var(--green);
}

.boldGray {
    color: var(--gray5);
    font-weight: bold;
}

.error {
    color: var(--red);
}

.alertErrorLink{
    color: var(--red);
    text-decoration:underline;
}

.alertLink{
    color: var(--dark-blue);
    text-decoration:underline;
}

.gridText{
    color:inherit;
}

.paleRed {
    color: var(--light-red);
}

.gridLink{
    color:var(--light-blue) !important;
    text-decoration:underline !important;
}

.gridLinkWithLeadingIcon{
    margin-left:8px;
    color:var(--light-blue);
}

.gridLink:hover {
    cursor: pointer;
}

label.textOnly {
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    width: 150px;
}

/* #endregion */

/* #region Telerik overrides */

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active{
    background: var(--orange) !important;
    color:white !important;
}

.k-grid .k-edit-cell > input {
    border: 1px solid var(--gray4);
}


.k-numerictextbox, .k-dateinput, k.dropdownlist, .k-textarea, .k-textbox {
    height: 34px !important;
    border: 1px solid #dedede;
}

.k-textarea, .textarea.k-input-inner {
    height: 190px !important;
    overflow-y: auto !important;
}

#notificationBody{

}

.k-animation-container .telerik-blazor .form-control .w-100 .k-animation-container-shown {
    width: auto !important;
}

div.k-calendar-header.k-hstack > button {
    width: auto;
}

button.telerik-blazor.k-button.k-prev-view.k-button-flat.k-rounded-md.k-button-rectangle.k-button-md.k-button-flat-base.k-icon-button {
    width: 20px;
    margin-right: 8px;
}

button.telerik-blazor.k-button.k-next-view.k-button-flat.k-rounded-md.k-button-rectangle.k-button-md.k-button-flat-base.k-icon-button {
    width: 20px;
    margin-left: 8px;
}

div.k-calendar-header.k-hstack > button > span,
div.k-calendar-header.k-hstack > button,
button.telerik-blazor.k-button.k-prev-view.k-button-flat.k-rounded-md.k-button-rectangle.k-button-md.k-button-flat-base.k-icon-button,
button.telerik-blazor.k-button.k-next-view.k-button-flat.k-rounded-md.k-button-rectangle.k-button-md.k-button-flat-base.k-icon-button
{
    background: var(--orange) !important;
}

.k-button-group button.k-button.selectedGroupButton,
.k-button-group button.k-button.selectedGroupButton:hover {
    color: white;
    background-color: var(--dark-orange);
}

.k-button-group button.k-button.unselectedGroupButton {
    background-color: var(--white);
    color: var(--dark-orange);
}
.k-button-group button.k-button.unselectedGroupButton:hover {
    background-color: var(--orange);
    color: var(--white);
}


.verticalButtonGroup {
    flex-flow: column;
}

.verticalButtonGroup .k-button {
    margin: 5px 0;
    width:180px;
}

.verticalButtonGroup.k-button-group > .k-button:first-child:not(:only-child) {
    border-radius: 2px 2px 0 0;
}

.verticalButtonGroup.k-button-group > .k-button:last-child:not(:only-child) {
    border-radius: 0 0 2px 2px;
}

.verticalButtonGroup.k-button-group > .k-button + .k-button {
    margin-inline-start: 0;
}

#app > div.k-dialog-wrapper > div.k-window.k-window-wrapper.telerik-blazor.k-centered.demo-window > div.k-window-titlebar.k-dialog-titlebar.k-header > div.k-window-actions > button {
    width: 25px;
}

.k-input-md .k-input-button, .k-input-md .k-spinner-increase, .k-input-md .k-spinner-decrease, .k-picker-md .k-input-button, .k-picker-md .k-spinner-increase, .k-picker-md .k-spinner-decrease {
    width: 20px;
}

li[role="tab"], div[role="tabpanel"] {
    border: 1px solid #efefef !important;
}

span.k-textarea {
    width: 100%;
    height: 175px;
}

.k-tabstrip-items li {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

button.telerik-blazor {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: white;
    width: 100px;
    padding: 8px;
}

button.input-group-append {
    background: var(--white);
    border: 1px solid var(--orange);
    color: var(--orange);
}

button.telerik-blazor:hover {
    background: var(--dark-orange) !important;
    border: 1px solid var(--dark-orange) !important;
}


.k-tabstrip > .k-content, .k-tabstrip-items, li.k-item.k-state-active.k-tab-on-top, li.k-item.k-state-default {
    border-color: var(--gray5);
}

.k-tabstrip > .k-content {
    overflow-y: auto;
    overflow-x: hidden;
}

li.k-item.k-state-active.k-tab-on-top {
    color: var(--white);
    background: var(--orange) !important;
}

.grid {
    border: 1px solid;
    border-color: var(--gray4);
}

tr.k-grid-edit-row {
    background-color: var(--gray3);
    border: 1px solid var(--light-blue) !important;
}

.k-command-cell {
    padding: 0px;
    align-items: flex-start;
}

/* #endregion */

#loginLogo {
    width: 450px;
}