/*=============================================== Portal Main CSS File ===============================================*/

/*==== 2025 Portal Rebrand ====*/
/* Importing Custom Fonts */
@font-face {
    font-family: "Montserrat-Bold";
    src: url('../fonts/Montserrat-Bold.ttf');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "IBMPlexSans-Light";
    src: url('../fonts/IBMPlexSans-Light.ttf');
    font-style: normal;
    font-weight: normal;
}

/* Unified the color & font styles across the whole site. */
/* Use the variables below to change colors & fonts for the entire site. */
:root {
    /* Primary color used for header & footer */
    --brand-primary: #374a5b;
    /* Primary color used for title text */
    --brand-primary-title: #1da897;
    /* Secondary color (lighter color) used for secondary buttons */
    --brand-secondary-light: #828282;
    /* Secondary color (darker) used for primary buttons & some titles */
    --brand-secondary-bold: #1da897;

    /* Providing black and white in-case a dark mode needs to be implemented in the future. */
    --default-white: #FFFFFF;
    --default-black: #000000;

    /* Change the font name to the imported fonts above */
    --font-title: "Helvetica";
    --font-body: "Arial"
}


/*============================================== Applied to Entire Site ==============================================*/
html {
    position: relative;
    min-height: 100%;
}
body {

    font-family: var(--font-body);
    background-color: #FFFFFF;
}
h3 {
    color: var(--brand-primary);
}
h4 {
    color: var(--brand-primary);
}
h5 {
    color: var(--brand-primary-title);
}
/* apply wrapper to webpage and webpage content */
/* this will stick the footer to the bottom if there is not enough content on the webpage */
.webpage {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.webpage-content {
    flex: 1;
}
/* used for pages that have no margins (adds spacing between top/bottom of webpage wrapper) */
.content-spacing {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* footer background-color */
.footer {
    background-color: var(--brand-primary);
    font-family: var(--font-body);
}
/* navbar background-color */
.navbar {
    background-color: var(--brand-primary);
    padding: 5px;
    font-family: var(--font-title);
}
.navbar-brand {
    padding:0;
    width: 190px;
    overflow: hidden;
}
.navbar-logo {
    max-width: 170px;
    margin-top: 15px;
    margin-left: 10px;
}
.btn-navbar{
    margin-top: 15px;
}
.navbar-button{
    background-color: var(--brand-secondary-bold);
    padding-top: 20px;
}
/* "Scroll to Top" button */
#myBtn {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    z-index: 99;
    outline: none;
    background-color: var(--brand-secondary-bold);
    border-color: var(--brand-secondary-bold);
    color: var(--default-white);
    cursor: pointer;
}
#myBtn:hover {
    background-color: var(--default-white);
    border-color: var(--brand-secondary-bold);
    color: var(--brand-secondary-bold);
}
.myBtn-symbol {
    font-size: 25px;
}
.btn-primary {
    font-family: var(--font-title);
    background-color: var(--brand-secondary-bold);
    border-color: var(--brand-secondary-bold);
    color: var(--default-white);
}
.btn-primary:hover {
    font-family: var(--font-title);
    background-color: var(--default-white);
    border-color: var(--brand-secondary-bold);
    color: var(--brand-secondary-bold);
}
.btn-secondary {
    font-family: var(--font-title);
    background-color: var(--brand-secondary-light);
    border-color: var(--brand-secondary-light);
    color: var(--default-white);
}
.btn-secondary:hover {
    font-family: var(--font-title);
    background-color: var(--default-white);
    border-color: var(--brand-secondary-light);
    color: var(--brand-secondary-light);
}
/*============================================ Index Page (Landing Page) =============================================*/
.welcome-message{
    color: var(--brand-secondary-bold);
}
.centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.containerHomePageImage {
    position: relative;
    text-align: center;
    color: white;
    background-color: var(--default-white);
}
.front-page-image{
    width: 100%;
    height: 70vh;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;
    object-position: top;
}
.landing-page-welcome-card{
    font-family: var(--font-title);
    background-color: var(--brand-secondary-light);
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    border-radius: 20px;
}
/*=================================================== Login Page =====================================================*/
.login-section {
    padding-bottom: 40px;
}
.login-links {
    color: var(--brand-secondary-bold);
}
/*================================================ Layout View Styles ================================================*/
/*=== bottom line in footer ===*/
.btLn{
    padding: 15px;
    border-bottom: 1px solid grey;
}
.container .text-muted {margin: 10px 0;}
.text-muted{
    font-size: 11px;
    color:white !important
}
/*=== WARNING message   ===*/
.msgW{
    text-align: center;
    font-size:medium;
    color: red;
    width:100%;
    font-weight: bold;
}
body > .container {padding: 50px 15px 15px;}
div.alert.custom-warning-message{
    margin-bottom: 0px;
}
/*=== title for Content ===*/
.titleCont,.login-title{
    font-family: var(--font-title);
    font-size: large;
    color: var(--brand-primary-title);
    background-color: #e8e8e8;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 50px;
    text-align: center;
    text-transform: uppercase;
}
/*=== for Error Message ===*/
.errMsg{
    text-align: center;
    color:red;
    font-weight:bold;
}
.input-error{
    border:1px solid red !important;
}
.error{
    background: red;
    color: white;
    font-size: 19px;
    margin-bottom:15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 5px 10px #888D88;
    padding:5px;
}
/*========================================== Log In Page (Login Dashboard) ===========================================*/
.login-hero {
    margin-top: 50px;
    margin-bottom: 50px;
}
/*============================================= Sysadmin User List Page ==============================================*/
.rowHighlight-adminissue {background-color: #ffa8ff;}
.rowHighlight-accountissue {background-color: #ffff00;}
.rowHighlight-err {background-color: #ff0000;}
form ul li{color:#DB0000;}
form ul{
    padding:0;
    list-style: none;
}
/*================================================= User Admin Page ==================================================*/
.panel-primary>.panel-heading {
    background-color: var(--brand-primary-title);
    border-color: var(--brand-primary-title);
}
.panel-primary{
    border-color: var(--brand-primary-title);
}
.user-admin-dashboard{
    padding-bottom: 40px;
}
.user_management_account_status_good{
    color: #17f536;
    font-size: 20pt;
}
.user_management_account_status_bad{
    color: #fc0000;
    font-size: 20pt;
}
.user_management_table_username{
    vertical-align: middle !important;
}
.user-management-badge{
    background-color: #E8E8E8;
}
.user-management-badge-active-color{
    color: #17f536;
}
.user-management-badge-problem-color{
    color: #fc0000;
}
.user-management-input-error-highlight {
    border: 1px solid red !important;
}
.user-management-input-error-highlight:hover {
    border: 1px solid red !important;
}
#ticketing_user_table_empty {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*================================================== Other Styles ====================================================*/
/*===   Alerts  ===*/
.alert {
    font-size: 17px;
}
/*===   Alerts style fixes  ===*/
div.custom-alert-row {
    padding-left: 0px;
    padding-right: 0px;
    min-height: 0px;
}
div.custom-alert-message {
    margin-bottom: 0px;
    border-radius: 0px;
}
.custom-alert-text {
    display: flex;
    justify-content: center;
}
/*	+		important			*/
.alert-error{
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
/*	+		important			*/
.alert-info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-success {
    color: white;
    background-color: #2D8170;
    border-color: #2D8170;
}
/* this style should be in bootstrap.css but isn't */
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
a:hover,
a:focus {
    color: #005580;
}
label,
input,
select,
textarea {
    font-size: 14px;
    font-weight: normal; /*important*/
    line-height: 20px;
}
input,
select,
textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {display: block;}
/*=== from NonSerializedInventory   ===*/
.label{color:black !important}
select,
input[type="text"],
input[type="password"] {
    display: inline-block;
    height: 30px !important;
    padding: 4px 6px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #555555 !important;
    vertical-align: middle ;
}
input,
textarea {
    width: 260px;
}
textarea,
input[type="text"],
input[type="password"] {
    background-color: #ffffff;
    border: 1px solid #cccccc; /*important*/
}
/*		important			*/
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {width: auto;}

select,
input[type="file"] {
    height: 30px;
    /* In IE7, the height of the select element cannot be changed by height, only font-size */
    *margin-top: 4px;
    /* For IE7, add top margin to align select with labels */
    line-height: 30px;
}
select {
    width: 260px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
/*===   for view error 404  ===*/
dd {margin:0px;}
.page-header {
    padding-bottom: 9px;
    margin: 20px 0 30px;
    border-bottom: 1px solid #eeeeee;
}
/*===   buttons     ===*/
button.ui-button { padding: 0.4em 1em;}
.msc-btn-inverse { background:#286090; border: 1px solid #286090; }
.msc-btn-green { background:#5bb75b; border: 1px solid #51a351; color: #0A0A0A;}
.msc-btn-orange { background:#faa732; border: 1px solid #f89406; color: #0A0A0A;}
.msc-btn-red { background:#da4f49; border: 1px solid #ee5f5b; color: #0A0A0A;}
.msc-btn-info{background:#5bc0de; border: 1px solid #5bc0de;}
.msc-btn-mini,
button.msc-btn-mini,
input.msc-btn-mini {
    padding: 1px 6px 1px 5px;
    font-size: 10.5px;
}
/*===   Table           ===*/
/*	+	important				*/
.table th,
.table td {
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}
.table th {
    font-weight: bold;
    background-color: #cccccc;
    padding:6px 4px !important;
}
.table-condensed th,
.table-condensed td {
    padding: 4px 5px;
}
.table-bordered {
    border-collapse: separate;/*important*/
}
/*	+			important		*/
.table-bordered th,
.table-bordered td {
    border-left: 1px solid #dddddd; /*bootstrap22*/
}
/*=== for tables gpsDetails ===*/
.tblHeaderGPS {
    background-color: #cccccc;
    text-align: center;
    vertical-align: middle;
}
/*	+			important		*/
.decorateAsLink { cursor: pointer; color: #0088CC; }
.rowHighlight { background-color: #dcf3f9; }
/*	+	for Service Partner table   */
.rowTotal { background-color: #99ffff; }
/*	+		important			*/
.tblAuto { width:auto; }
/*=== RMA tables ===*/
/*=== for RMA Status tables view details ===*/
.tblRmaDet th{
    background-color: #445666;
    color: white;
    text-align: center;
    vertical-align: middle;
}
.tblRmaDet{background-color: #e8e8e8;}
/*===   RMA core    =================*/
/*===   for fieldset in rmacore/index/phtml ===*/
#formRmacoreCourierPicker,
#formRmacoreAddress{
    padding: 0;
    margin: 0;
    border-width: 0px;
}
/*=== style for ASNfieldreturnssearch   ===*/
.boldRight{
    font-weight:bold;
    text-align:right;
}
.container-field-returns {
    border: 4px ridge #E0E0E0;
    border-radius: 8px;
    margin-bottom: 50px;
}
/*=== style for asntech/index.phtml     ===*/
.container-round-conner {
    border: 4px ridge #E0E0E0;
    border-radius: 8px;
}
.qselect option {height: 60px;}
/*===   from SerialNumberTracking/index.phtml       ===*/
.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}
/*===   for LOTO Quebec ===*/
#type_equipement {width:50%;}
#statut_equipement {width:50%;}
#description_module {width:50%;}
.inputbox {
    border-radius: 4px;
}
.row-spacing {
    padding-top:20px;
    padding-bottom:5px;
}
.row-spacing-last {
    padding-bottom:1px;
}
.legend-styling {
    padding:0px 5px;
    font-weight:bold;
    color:black;
}
.fieldset-styling {
    border-radius: 4px;
    border: 1px solid #a0a0a0;
    margin-bottom: 15px;
    color:navy;
}
.lq-label {
    display:inline;
    padding: 0px 2px;
}
div.ui-datepicker {
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 13px;
}
.page-link{
    padding: 0px 20px;
}
/*===   Style for loto form ===*/
#loto-form{
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 13px;
    clear:both;
    min-width:1050px;
}
/*===   Style for input #numero_loto_quebec, #numero_serie_fabricant, #modele, #no_possesseur ===*/
.inputStyle{
    width: 200px;
    background-color:#f4f8fb !important;
    /*border-color:#bcd4e7 !important;/* Removing the CSS for AODA Project */
}
/*=== Style for div Buttons ===*/
.divBtnStyle{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align:center;
}
/*=== Style for div results table ===*/
.divResTbl{
    overflow: auto;
    height: 700px;/*    to fix the data table display   */
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    margin-bottom:140px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 13px;
}
/*===   ??? don't find where is used    ===*/
/*===   HTML might be in the backend     ===*/
.indent-div-red {
    margin:20px 0px 0px 30px;
    color: red;
}
.indent-div {margin:20px 0px 0px 30px;}
.section-top {margin-top:30px;}

/*===   TicketUI & Accessibility stuff     ===*/
.open_ticket_button:focus,
.change_merchant_hours_link:focus,
.change_ticket_status:focus {
    border-color:#4D4433;
    outline:1px solid black;
    text-decoration: none;
}

.open_ticket_button:hover,
.change_merchant_hours_link:hover,
.change_ticket_status:hover {
    border-color:#4D4433;
    outline:1px solid black;
    text-decoration: none;
}

.disable_focus_visible:focus {
    outline: 0px;
    text-decoration: none;
}

.focus_visible_tr:focus,
.focus_visible_tr:hover {
    outline: 0px;
    text-decoration: none;
    background-color:#f4f8fb
}

#loto-form label {
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 13px;
    padding-bottom: 6px;
    padding-top: 4px;
}

#loto-form label > div {
    padding-bottom: 4px;
}

input:required:invalid,
select:required:invalid {
    outline: none;
}

.input-hour:focus {
    border-color:black;
    border-radius:4px;
    outline: none;
    border: 2px solid;
}

.req-element {
    color:red;
}

.zoom-box {
    position:relative;
    padding-right:1px;
    display: none;
    background-color: #FFFFFF;
    text-align: right;
}

#zoomIn,
#zoomOut,
#highCont,
#normalCont {
    font-family: var(--font-body);
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    color: var(--brand-secondary-bold);
}

#zoomIn:focus,
#zoomIn:hover,
#zoomOut:focus,
#zoomOut:hover,
#highCont:hover,
#normalCont:hover,
#highCont:focus,
#normalCont:focus {
    border-color:black;
    border-radius:4px;
    outline: none;
    border: 2px solid black;
    color: black;
}

#highCont:hover {
    background-color:#a94442;
}

#normalCont:hover {
    background-color:white;
}

#zoomOut,
#highCont,
#normalCont {
    font-size:large;
}

#zoomIn {
    font-size: 22px;
}

@media (min-width:1025px) {
    .zoom-box {
        display:block;
    }
}

.asn-row {
    background-color: #F0F0F0;
}

.search-box {
    background-color:#F0F0F0;
}

.open_ticket_button,
.change_merchant_hours_link,
.change_ticket_status {
    color:#426C99 !important;
}

.h4-new-color {
    color: #208072;
}

.line-space {
    padding:15px;
    background-color: #FFFFFF;
}

.gcaptcha-space {
    margin-top:15px;
    margin-bottom:8px;
}

div.void-ticket-error-msg {
    text-align:left !important;
}

textarea.void-ticket-reason-box {
    margin-bottom: 10px;
}

/*===   TicketUI Courier Calls    ===*/

/* Ticket Window */
div.custom-modal-size {
    width: 1200px;
}

#openTicketCourier {
    overflow-x: auto;
}

.nav-link.custom-nav-link {
    color: #1DA897 !important;
}

.nav-link.custom-nav-link:hover {
    background-color: #FFFFFF !important;
}

.nav-link.custom-nav-link.selected {
    background-color: #EEEEEE;
    border-top-color: #1DA897;
    border-right-color: #1DA897;
    border-left-color: #1DA897;
}

.nav-link.custom-nav-link.disabled:hover {
    cursor: not-allowed;
}

h5.card-title {
    color: #000000;
}

/* Minimize Screen */

.courier-minimized {
    box-shadow: #1da897 0px 3px 8px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    position: fixed;
    bottom: 20px;
    right: 100px;
    width: 30rem;
    border: 2px solid #1da897;
    border-radius: 5px;
    background-color: #FFFFFF;
    z-index: 1000;
}

.courier-minimized.hidden{
    display: none;
}

/* Ticket Page */
.card-tagline {
    padding-bottom: 15px;
}

.card-body.custom-card-body {
    min-height: 500px;
}

.card-body.custom-card-body-peripheral {
    min-height: 446px;
}

div.custom-card-alert {
    position: absolute;
    width: 800px;
    bottom: 45px;
    left: 200px;
}

.ticket-nav-buttons {
    width: 150px;
}

.ticket-courierNoPeripheral-buttons {
    width: 305px;
    margin-top: 10px;
    margin-bottom: 10px;
}

label.label-align-text-left {
    text-align: left;
    line-height: 30px;
    padding-bottom: 5px;
}

tr.row-highlighting:hover {
    background-color: #E8F0FE;
}

input.card-hour-input {
    max-width: 60px;
    vertical-align: middle;
    padding: 0px;
    margin: 0px !important;
}

td.align-text-right {
    text-align: right;
}

td.card-hour-label {
    width: 60px;
}

tr.card-hour-row > * {
    vertical-align: middle !important;
}

td.card-text-bold {
    font-weight: bold;
}

tr.card-table-no-line {
    border-top: none;
}

th.card-table-info-header {
    background-color: transparent;
}

div.custom-device-card-top {
    padding-top: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 0rem;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
    border: 1px solid #eee;
    border-radius: .25rem;
}

div.custom-device-card-bottom {
    padding-top: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 0rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    border: 1px solid #eee;
    border-radius: .25rem;
}

div.custom-collapse-card-color {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-color: #1da897;
    border-left-width: .50rem;
    border-radius: .25rem;
}

div.card-header.serial-table-header {
    border-radius: 5px;
    border: 1px solid #dddddd;
    background-color: #eeeeee;
}

button.serial-table-header-button {
    padding: 10px;
    color: #1da897;
    background-color: #eeeeee;
}

button.serial-table-header-button:hover {
    color: #072a25;
}

div.card-body.serial-table-body {
    border-radius: 5px;
    border: 1px solid #dfdfdf;
    padding: 12px;
}

div.custom-card-error-message {
    text-align: center;
    color: red;
}

.courier-input-error-highlight {
    border: 2px solid red !important;
}

.courier-input-error-highlight:hover {
    border: 2px solid red !important;
}

select.serial-table-select {
    width: 80px;
}

select.serial-table-select:disabled {
    background-color: #eeeeee;
}

select.serial-table-select:disabled:hover {
    cursor: not-allowed;
}

select.serial-table-select-small {
    width: 60px;
}

select.serial-table-select-small:disabled {
    background-color: #eeeeee;
}

select.serial-table-select-small:disabled:hover {
    cursor: not-allowed;
}

button.btn.courier-add-problem-description {
    padding: 4px 32px;
}

tr.serial-table-disabled {
    background-color: #eeeeee;
}

.custom-formLabel {
    float: right;
}

button.btn-savedNotes {
    background-color: #1da83b;
}

/* Warning, Error, addNotes Pop-ups for Courier Window */
#openTicketCourier-problemBox {
    resize: vertical;
    width: 100%;
    min-height: 80px;
    max-height: 200px;
}

div.courierWindowPopup {
    z-index: 1100;
}