/*******************************
** BIBBY FINANCIAL SERVICES
** 10/2024
** GLOBAL PORTAL STYLESHEET
*******************************/

/***************************************************************************************************************
** MAIN
***************************************************************************************************************/

/*******************************
** HTML
*******************************/

html { font-size:1rem; }

/*******************************
** BODY
*******************************/

body { background:#f2f5f6 !important; }

/*******************************
** BIBBY
*******************************/
#bibby a, #bibby .a { font-size:inherit !important; }
#bibby strong, #bibby label { font-weight:500 !important; }
#bibby .form-check-label { font-weight:normal !important; }

/*******************************
** TOP
*******************************/

#bibby #top { background:#ffffff; border-top:7px solid #ef4135; box-shadow: 0 8px 15px -6px #cecece; font-weight:500; }
#bibby #top .nav-link { background:none; color:#000000; padding: .5rem 0.6rem;  }
#bibby #top .nav-link.active { color:#000000; position:relative; }
#bibby #top .nav-link.active::after { content:" "; position:absolute; width:50%; background:#ef4135; height:3px; bottom:2px; width:25px; left:37%; }
#bibby #top span { border-left:1px solid #e6e9e8; padding-left:15px; margin-left:15px; }
#bibby #top a { text-decoration:none; }
#bibby #top .navbar-toggler { background:none; }

/*******************************
** MID
*******************************/

#bibby #mid { display:flex; }

/***************************************************************************************************************
** HELPERS
***************************************************************************************************************/

/*******************************
** BOX
*******************************/

#bibby .box { background:#ffffff; border-top:7px solid #ef4135; box-shadow: 0 8px 15px -6px #cecece; border-radius:5px; }
#bibby .box.noborder { border:0px; }
#bibby .box h2 { color:#000000; font-weight:bold; font-size:21px; margin-bottom:10px; }
#bibby .box label a { color:#ef4135; }
#bibby .box small { line-height:10px; }

/*******************************
** INFORMATION BOX
*******************************/

#bibby .box.info { max-width:600px; }
#bibby .box.info h2 { margin-top:0px; }
#bibby .box.info p { margin-bottom:0px; }

/*******************************
** TABLE
*******************************/

#bibby .table { margin:0px }
#bibby .table thead th { border-bottom:2px solid #ef4135; border-top:0px; }
#bibby .table thead th a { font-weight:600;  }
#bibby .table thead th a i { font-size:13px; }
#bibby .table td a { color:#000000; text-decoration:underline; }
#bibby .table span.status { font-weight:600; text-transform:uppercase; color:#555555 !important; background:none !important; } 
#bibby .table span.status.draft { color:#7D31A0 !important; }
#bibby .table span.status.submitted { color:#7D31A0 !important; }
#bibby .table span.status.underwriting { color:#294647 !important; }
#bibby .table span.status.approved { color:#164CCA !important; }
#bibby .table span.status.declined { color:#A8281A !important; }
#bibby .table span.status.docsout { color:#294647 !important; }
#bibby .table span.status.docscompleted { color:#294647 !important;  }
#bibby .table span.status.paid { color:#296149 !important; }
#bibby .table span.status.docs-sent { color:#296149 !important; }
#bibby .table tr:last-child > td { border-bottom-width:0px;  }
#bibby .table.table-hover tbody tr:hover { background-color: #ffffff; }
#bibby .table .center-cell { text-align: center; vertical-align: middle; }

/*******************************
** STATUS
*******************************/

#bibby a.status { font-weight:600; text-transform:uppercase; } 
#bibby a.status.draft { color:#7D31A0 !important; }
#bibby a.status.submitted { color:#7D31A0 !important; }
#bibby a.status.underwriting { color:#294647 !important; }
#bibby a.status.approved { color:#164CCA !important; }
#bibby a.status.declined { color:#A8281A !important; }
#bibby a.status.docsout { color:#294647 !important; }
#bibby a.status.docscompleted { color:#294647 !important;  }

/*******************************
** DETAILS
*******************************/

#bibby .table.details th, #bibby .table.details td { padding:.5rem 0rem; }

/*******************************
** PAGING
*******************************/

#bibby .paging { padding:20px 0px; }
#bibby .paging a { color:#000000; }

/*******************************
** FORM
*******************************/

#bibby .form { padding:0px; }
#bibby .form label { font-weight:bold; }
#bibby .form fieldset { font-weight:bold; }

/*******************************
** STEPPER
*******************************/

#bibby .stepper { width:85%; margin:auto;  }
#bibby .stepper .step-circle { width:35px; height:35px; border:2px solid #dee3e8; background-color:white; border-radius:50%;  display:inline-flex; justify-content:center; align-items:center; position:relative; }
#bibby .stepper .inner-circle { width:15px; height:15px; background-color:#dee3e8; border-radius:50%; }
#bibby .stepper .active-step .step-circle { border-color: #83e1af; }
#bibby .stepper .active-step .inner-circle { background-color: #83e1af; }
#bibby .stepper .active-step .step-label{ color:#000000; font-weight:bold; }
#bibby .stepper .step-label { margin-top:2px; font-size:13px; color:#4B5971; font-weight:600; }
#bibby .stepper .step-line {  position:absolute; top:15px; left:50%; width:100%; height:2px; background:repeating-linear-gradient(to right, transparent, transparent 5px, #dee3e8 5px, #dee3e8 8px); z-index:-1; }
#bibby .stepper .position-relative:last-child .step-line { display:none; }
#bibby .stepper .position-relative .step-line { width:calc(100% + 35px); left:calc(50% + -20px); }

/******************************* 
** FILTER
*******************************/

#bibby .filter { text-align:right; margin-bottom:15px; }
#bibby .filter .dropdown {  background:#f7faf9; display:inline-block; border-radius:5px; border:2px solid #ffffff; }
#bibby .filter .dropdown span { padding:0px 10px; }
#bibby .filter .dropdown .btn {  background:#ffffff; text-transform:none; color:#000000;  }
#bibby .filter .dropdown .dropdown-item:focus, #bibby .filter .dropdown .dropdown-item:hover { padding:3px 19px; border:0px; }

/*******************************
** HR
*******************************/

#bibby hr { border-color:#bbbbbb; }

/*******************************
** TABS
*******************************/

#bibby .nav-pills .nav-link { background:#f2f5f6; color:#444444; text-transform:uppercase; min-width:200px; }
#bibby .nav-pills .nav-link.active { background:#ef4135; color:#ffffff; }

/*******************************
** BUTTONS
*******************************/

#bibby .btn { text-transform:uppercase; text-align:center; text-decoration:none; font-size:initial; font-weight:normal; border-radius:6px; color:#ffffff;  }
#bibby .btn-bibby-default, #bibby .btn-default { background:#dee3e7; border:1px solid #dee3e7; color:#000000; }
/*
#bibby .btn-bibby-primary, #bibby .btn-primary { background:#AE1A0F; border:1px solid #AE1A0F; }
*/
#bibby .btn-bibby-primary, #bibby .btn-primary { background:#005daa; border:1px solid #005daa; }
#bibby .btn-bibby:hover { opacity:0.9; }

/*******************************
** BUTTON CHECK
*******************************/

#bibby .btn-check+.btn-bibby { background:#f2f5f6; color:#444444; border:0px; text-transform:uppercase; min-width:200px;  }
#bibby .btn-check:checked+.btn-bibby { background:#dee3e7; color:#444444; }

/*******************************
** TEXT
*******************************/

#bibby .text { margin-bottom:30px; }
#bibby .text h1 { color:#000000; font-weight:bold; font-size:30px; margin-bottom:10px; }
#bibby .text p { font-family:inherit; font-weight:inherit; font-size:inherit; color:inherit; }

/*******************************
** COST
*******************************/

#bibby .cost { text-align:center; position:relative; }
#bibby .cost .price { background:#f7faf9; padding:5px; font-size:2rem; color:#dd1204; font-weight:bold; border-radius:10px; border:1px solid #cccccc; text-align:center; }
#bibby .cost .pound { position:absolute; left:15px; transform:translateY(-50%); top:30px; font-size:30px; color:#cccccc; }
#bibby .cost .label {font-size:0.8rem; }
#bibby .cost.white .price { background:#ffffff; color:#000000; }
#bibby .cost.orange .price { background:#ffffff; color:#dd1204; }

/*******************************
** FORM
*******************************/

#bibby .form .form-control { background-color: #f7faf9 !important; border-color:#c4c6c8; }
#bibby .form .form-select { background-color: #f7faf9; border-color:#c4c6c8; }
#bibby .form .form-check { padding:0px; }
#bibby .form .form-check-input { margin:3px 0px; padding:8px; margin-right:10px;}
#bibby .form .form-check-inline { margin-right:0.5rem; }
#bibby .form .col-form-label { font-weight:600; }
#bibby .form .form-range { height:10px; }
#bibby .form legend { border:0px; }

/*******************************
** MODAL
*******************************/

#bibby #bibby-modal { z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.95); z-index:100; }
#bibby #bibby-modal .modal h2 { margin-bottom:20px; }
#bibby #bibby-modal .modal h3 { color:#000000; font-weight:bold; font-size:18px; margin-bottom:20px; margin-top:10px; }
#bibby #bibby-modal .modal .modal-content {  border-top:7px solid #ef4135; box-shadow: 0 8px 15px -6px #cecece; }
#bibby #bibby-modal .modal .modal-body { padding:2rem;}

/*******************************
** TEXT-COLOURS
*******************************/

.text-green { color:#79e2af; }
.text-grey { color:#eeeeee; }
.text-orange { color:#ef4135; }

/*******************************
** ICON SIZE
*******************************/

.bi.size-2 { font-size:18px; }
.bi.size-3 { font-size:25px; }
.bi.size-4 { font-size:30px; }
.bi.size-5 { font-size:35px; }

/*******************************
** ICON CURSOR
*******************************/

.pointer {cursor: pointer;}

/*******************************
** SLIDING MENU
*******************************/

#bibby .slide-menu { position:fixed; top:0; left:0; width:75%; height:100%; background-color:rgba(0, 0, 0, 0.9); z-index:1050; transform:translateX(-100%); transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out; overflow-y:auto; opacity:0; visibility:hidden; }
#bibby .slide-menu.show { transform:translateX(0); opacity:1; visibility:visible; }
#bibby .slide-menu .side-menu-content { padding:2rem; }
#bibby .slide-menu .close-btn { background:none; border:none; font-size:2rem; color:#fff; position:absolute; top:20px; right:20px; }
#bibby .slide-menu .nav-link { color:#fff; font-size:1.2rem; padding:15px 0px; width: 60%;}
#bibby .slide-menu .nav-link:hover { color: #ddd; }
body.menu-open::before { position:fixed; left:0px; right:0px; top:0px; bottom:0px; background:rgba(255, 255, 255, 0.8); content:" "; z-index:1000; }

/*******************************
** LOADING
*******************************/

#bibby #load { position:fixed; left:0px; right:0px; top:0px; bottom:0px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.95); z-index:100; }
#bibby #load-content { text-align:center; }
#bibby #load-content svg { max-width:150px; }

/*******************************
** COMPANY LIST
*******************************/

#bibby #companyname-list { background:#ffffff; position:absolute; left:0px; right:0px; height:135px; overflow-y:scroll; margin:0px 10px; z-index:10; border:1px solid #949494; box-shadow: 0 8px 15px -6px #cecece; }
#bibby #companyname-list div { border-bottom:1px solid #f2f5f6; padding:10px; cursor:pointer; }
#bibby #companyname-list div:hover { background:#dee3e8; }

/*******************************
** PAGING
*******************************/

#bibby .paging .page-item { border-radius:0px; width:auto; height:auto; margin: 0px 4px; }
#bibby .paging .page-item .page-link { border-radius:0px; width:auto; height:auto; border:0px; }
#bibby .paging .page-item.disabled {  cursor:not-allowed; }
#bibby .paging .page-item.disabled .page-link { opacity:0.1; cursor:not-allowed; }
#bibby .paging .page-item.active .page-link { background:#dee3e7 !important; color:#000000; }

/*******************************
** DOCUMENTS
*******************************/

#bibby #documents-list .link-text { color:#ef4135; }

/*******************************
** DIRECTOR LABEL
*******************************/

#bibby .director-label { font-weight:normal !important; }

/*******************************
** VIEW HEIGHT HELPER
*******************************/

#bibby .vh-80 { height:80vh; }

/*******************************
** LOGIN SCREEN AMENDMENTS
*******************************/ 

#bibby .nav-account li:nth-child(2) { display: none; }
#bibby .portal-form .fw-bold { font-weight:normal !important; }
#bibby .portal-form .checkbox { display:none; }

/*******************************
** MOBILE STYLES
*******************************/ 

@media (max-width: 576px)
{ 

    /*******************************
    ** CALCULATOR
    *******************************/ 

    #bibby .btn-group .btn { width:100% !important; }
    #bibby .cost .price { font-size:1.5rem; }
    #bibby .cost .pound { left:10px; top:24px; }

}