/*

Indiko Customer Portal CSS
v1.9.10
16 Apr 2024
tiki@tribesquared.com
paul@indikodata.com
*/



/*global settings   ---------  */

:root {

    --portalThemeOnColor1: #2E2E2E;
    --portalThemeOnColor2: #D2429E;
    --portalThemeOnColor3: #7120D5;
    --portalThemeOnColor4: #427EDE;
    --portalThemeOnColor5: #74BFED;


    --textcolor:var(--portalThemeOnColor1);
    --secondarylinkcolor:var(--portalThemeOnColor2);

    --level1btnbg: var(--portalThemeOnColor4);
    --level2btnbg: var(--portalThemeOnColor5);

    --buttongrey:#868686;

    --servicesCardBgOdd: #e8e8e8;

    --tableheaderbg: #7a7380;
    --tabletabrbg: #f9f9f9;
}

body {
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6, .gethelpheading h3 {
    font-family: 'Montserrat', sans-serif; font-weight:700;
    color:var(--textcolor)!important;
    text-transform:uppercase; 
}
p{color:var(--textcolor);}
a{color:var(--portalThemeOnColor3) !important}


/** DESKTOP DISPLAY RULES ONLY SO FAR **/

p {font-size:14px;}
h1{font-size:32px;}
h2{font-size:24px;}
h3{font-size:18px;}

.page-header h1 {
    padding:0;
    margin:0;
}

.page-header {
    border-bottom: none;
    background-color: rgba(248,248,248, 0.9);
    border-left:5px solid var(--portalThemeOnColor2);
    padding: 30px 20px;
    margin: 20px 0;
}


/* Layout */
/*Push Footer to bottom (disabled by PE) -----
body {
    min-height:100vh;
    margin:0;
    position:relative;
}

body::after {
  content: '';
  display: block;
  height: 200px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 200px;
}

.footer-top {min-height:120px;}
.footer-bottom {min-height:80px;}
*/





/*header settings---------*/

.navbar{
    padding-bottom:25px !important;
    padding-top:15px !important
}

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

.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
    background:var(--portalThemeOnColor3) !important; 
    color: white !important;
    margin: 0 !important;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav > .open > a  {
    color: white!important;
    background-color: var(--portalThemeOnColor3)!important;
}


/* Home */

/** Home **/
.full-width-banner {
    background: url('https://lirp.cdn-website.com/md/pexels/dms3rep/multi/opt/pexels-photo-4424355-1920w.jpeg') no-repeat top center;
    background-size: cover;
    padding: 120px 0; /* Adjust the padding to control the banner height */
    color: #fff; /* Adjust text color */
    text-shadow: 0 0 5px BLACK;
}
.portalcards, .footer {
    margin-top:60px;
}
.portalintro {
    margin-top: 0;
    padding: 30px 0;
    background-color: #f8f8f8;
}
.portalintro p {
    font-size: 18px;
    font-weight: 300;
}
.portalcards .row, .portalintro .row {
    padding:0 20px;
}
.portalcards .card {
    position: relative;
}
.portalcards p {
    font-size: 16px;
}
.portalcards a {
    background-color: var(--portalThemeOnColor2) !important;
}
.portalcards img {
    display: block;
    margin: auto;
    max-width:150px;
    max-height: 150px;
}
.portalcards .card-header {
    padding: 30px;
}
.portalcards .card-body {
    padding: 10px 30px;
}
.banner-content {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display:inline;
  }
.banner-content p.lead{
    font-weight: 600;
    font-size: 36px;
    font-family: Montserrat, sans-serif;
}
.banner-content h1{ 
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    font-size: 72px;
    color:white!important;
}
.banner-content p{
    font-size:30px;
    font-weight:500;
    line-height:1.5em;
    color:white;
}


/*button settings---------*/

.btn-primary, a.selected-view.dropdown-toggle {
    border:none!important;
    color: white!important;
}

.btn-primary, a.selected-view.dropdown-toggle {
    background: var(--level2btnbg)!important;
}

a.selected-view.dropdown-toggle {
    background: var(--level1btnbg)!important;
}

.btn.submit-btn, #WebRoles .btn, .actions .btn-primary {
    background-color:var(--level1btnbg)!important;
    border-radius:5px!important;
    font-size:18px;
    padding:7px 10px!important;
}

#WebRoles .btn {
    background-color:var(--level2btnbg)!important;
    border-radius:0!important;
    font-size:12px;
    font-weight:bold;
    padding:7px 10px!important;
    color:white!important;
    border:none;
    text-transform:uppercase;
    margin-:5px;
}



/*Pagination -----*/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: var(--level2btnbg) !important;
    color:white!important;
}

.pagination li a {
    background-color:var(--buttongrey)!important;
    color:white!important;
    font-size:12px;
    font-weight:bold;
}



/*My Services Page -----*/
#accordion .card {
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    background-color: none!important;
    border-radius: none;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: none;
}

#accordion .card-header {
    margin-bottom: 5px;
    border: none;
    border-radius:5px;
    background: var(--servicesCardBgOdd);
    box-shadow: 0px 2px 4px #e7e7e7;
}


/* Product Catalogue */
legend.section-title, h2.tab-title {
    background: var(--tableheaderbg)!important;
    border: none;
    margin-bottom: 0 !important;
    padding:10px 20px!important;
}

th {
    background: var(--tableheaderbg)!important;
}

th a, legend.section-title, .section-title h3, h2.tab-title {
    color:white!important;
    font-weight: normal!important;
}

#WebRoles th {
    padding:10px 20px!important;
    text-transform:uppercase;
}

#EntityFormPanel .tab {
    background-color:transparent!important;
    margin-bottom: 0!important;
}

#EntityFormPanel .actions, .form-custom-actions {
    border-top-color:var(--tableheaderbg)!important;
    border-top-width:5px!important;
    background-color:white;
    margin-bottom: 0;
    padding-top:10px;
    margin-top:0;
}

#EntityFormPanel, #EntityFormPanel tr {
    background-color:var(--tabletabrbg);
    border-bottom:none;
}

.grid-actions {
    border-bottom: none;
    margin-right: 10px;
    padding-bottom: 10px;
}

input {
    border: 1px solid #949494!important;
    padding:3px 5px!important;
    font-size: 14px;
}

.search-container button {
    background: var(--portalThemeOnColor3);
}

/*footer settings---------*/
.footer-top {
    background-color: #d2429e!important;
    padding: 20px;
}
.footer-top .row {
    padding:20px;
}
.footer-top h2 {
    margin: 0;
    font-size: xxx-large;
    color: white !important;
}
.footer-top h3 {
    color: white !important;
    font-size: x-large;
    margin: 0;
}
.footer-top p {
    color: white;
    font-weight: 300;
    font-size: 18px;
}
.footer-top a {
    color: white !important;
    font-weight: bolder;
    text-decoration: underline;
}
footer .footer-bottom {
    background-color: #440d7b !important;
}
footer .footerlogo {
    padding:40px;
}
footer .footerlinks, footer .menublock {
    padding:20px;
}
footer .footerlinks h6 {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 16px;
    font-weight: 600;
}
footer .footerlinks a {
    font-weight: 500;
    font-size: 16px;
    color: white !important;
    display:block;
    line-height:32px;
}
footer .footergallery {
    min-height: 100px;
    margin: 20px;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.6);
}
footer .footergallery img {
    max-width:100%;
}
footer .footercopyright p {
    font-size: 14px;
    font-weight: 500;
    color: white;
}
footer  .footer-bottom p {
    color: #ffffff !important;
}
/*Color Overrides---------*/

.alert-info {background-color: rgb(113 32 213 / 10%);