/*
Fonts:
Open Sans 400 + 700 (bold)

Colours:
Main blue   #294167 
Pink        #e73164 
Font grey   #7a7a7a
Bg panel    #efefef
*/

/* General */
html {box-sizing: border-box;margin: 0; padding:0;}
*, *:before, *:after {box-sizing: inherit;}
body { color: #294167; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size:18px;margin: 0; padding:0;background-color: #EBEBEB }
a {color: #294167;}
a:hover, a:active {color: #e73164;}
p {margin:0 0 1em 0;padding:0;}
p.error {background-color:#e73164;color:#fff;font-weight:700;padding:10px 20px;border-radius: 10px;}

/* login */
body.login {background: url('/images/login_bg.jpg') center center no-repeat; background-size: cover; height: 100%; }
.fflogo {margin:40px;}
.logincontents {display:flex; justify-content: center;align-items: center;height: 100%;flex-direction: column;}
.loginbox {
    padding:50px;
    margin-left:15px;
    margin-right:15px;
    background-color: #fff;
    box-shadow: 0px 0px 50px -3px rgba(0,0,0,0.5);
    max-width: 490px;
}
.loginbox h1 {color: #e73164;}
.loginbox p {font-size:16px;}
.loginbox form {padding-top:15px;}
.loginbox input {
    width: 100%;
    padding: 15px 20px;
    background-color: #efefef;
    color: #294167;
    font-weight: 700;
    margin-bottom: 20px;
    border-radius: 30px;
    border: 1px solid #efefef;
}
#loginsubmit {
    width:auto;
    text-transform: uppercase;
    padding: 15px 45px;
    background-color: #294167;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    border: 1px solid #294167;
}
#loginsubmit:hover, #loginsubmit:active {
    background-color: #e73164;
    color: #fff;
    border: 1px solid #e73164;
    cursor:pointer;
}
.forgottenpassword {text-align: right; font-size: 12px;}

/* Page layout*/
.wrapper {max-width:1600px;margin-left:auto;margin-right:auto;padding-left:0px;padding-right:0px;}
.topbar {background-color: #294167;color:#fff; }
.topbar .wrapper {display:flex;align-items: center;height:84px;
    background:url('/images/topbar_bg2.jpg') right top no-repeat;
    background-position: calc(70%) top;
    padding-left:40px; padding-right:40px;}
.topbar .wrapper span {flex-grow:1;}
.topbar .wrapper div {padding-left:55px;}
.referalmanager a {font-size:14px;font-weight: 700;text-transform:uppercase;text-decoration:none;color:#fff;display:flex;align-items:center;}
.referalmanager a img {margin-right:10px;}
.logout {  
    display: block; 
    font-size:14px;text-decoration: none;
    text-transform: uppercase;
    padding: 10px 15px;
    background-color: #738297;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    border: 1px solid #738297;}
.logout:hover, .logout:active {background-color: #e73164;border: 1px solid #e73164;color:#fff;text-decoration: none;}
.pagecolumns {display:flex;align-items: stretch;}

#leftcol {width:400px;background-color:#fff;color: #294167;}
.leftcolheader {padding:40px;border-bottom:1px solid #E1E1E1;}
.leftcollogo {padding-bottom:40px;}
.leftcolnav {padding:40px 0;}
.leftcolnav ul {list-style: none;padding:0 15px 0 0;margin:0;}
.leftcolnav ul li {border-left:6px solid #fff;}
.leftcolnav ul li.active {border-left:6px solid #e73164;}
.leftcolnav ul li a {display: flex;align-items: center;height: 54px; background-position: 10px center; background-repeat: no-repeat;padding-left:50px; text-decoration: none;}
.leftcolnav ul li a.dash {background-image: url('/images/nav-icon-dash.png');}
.leftcolnav ul li a.dash:hover, 
.leftcolnav ul li a.dash:active,
.leftcolnav ul li.active a.dash {background-image: url('/images/nav-icon-dash-on.png');color: #e73164}
.leftcolnav ul li a.newops {background-image: url('/images/nav-icon-new-ops.png');}
.leftcolnav ul li a.newops:hover, 
.leftcolnav ul li a.newops:active,
.leftcolnav ul li.active a.newops {background-image: url('/images/nav-icon-new-ops-on.png');color: #e73164}
.leftcolnav ul li a.activeops {background-image: url('/images/nav-icon-active-ops.png');}
.leftcolnav ul li a.activeops:hover, 
.leftcolnav ul li a.activeops:active,
.leftcolnav ul li.active a.activeops {background-image: url('/images/nav-icon-active-ops-on.png');color: #e73164}
.leftcolnav ul li a.addops {background-image: url('/images/nav-icon-add-ops.png');}
.leftcolnav ul li a.addops:hover, 
.leftcolnav ul li a.addops:active,
.leftcolnav ul li.active a.addops {background-image: url('/images/nav-icon-add-ops-on.png');color: #e73164}

#rightcol {width: calc(100% - 400px);flex-grow:1;padding:40px;background-color:#EBEBEB;}
#rightcol .header {background-color:#e73164; border-top-left-radius:10px;border-top-right-radius:10px;padding:25px 40px;}
#rightcol .header h1 {margin:0;padding:0;color:#ffffff;text-transform: uppercase;font-size: 30px;}
#rightcol .content {background-color:#ffffff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.formdivider {padding:20px 40px;border-bottom:1px solid #E1E1E1;}
.formdivider:last-child {border-bottom:none;}
.row {display: flex; flex-wrap: wrap;}
.col-one-third {width:30%;margin-right:3.333%;margin-bottom:10px;}
.col-two-third {width:63.333%;margin-right:3.333%;margin-bottom:10px;}
.col-half {width:48%;margin-right:2%;margin-bottom:10px;min-width: 180px;}
.col-full {width:100%; margin-right:0;margin-bottom:10px;}
.center {text-align: center;}

/* form fields */
label {margin-right:40px; color: #294167; font-weight: 700;font-size:18px;}
#rightcol h2 {margin:0 0 10px 0;} 
#rightcol h3 {font-weight: normal;margin:0 0 10px 0;font-size:18px;text-transform: uppercase; letter-spacing: 1px;}
#rightcol h4 {margin:0px 0 10px 0;padding-top: 20px;} 
#rightcol h4 span.h4pink {color:#e73164;font-weight: normal;letter-spacing: 1px;}
#rightcol input[type="text"], 
#rightcol input[type="email"], 
#rightcol input[type="tel"], 
#rightcol select,
#rightcol textarea {
    font-size:18px;
    width: 100%;
    padding: 10px 20px;
    background-color: #fff;
    color: #294167;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 30px;
    border: 2px solid #294167;
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;
}
#rightcol textarea {border-radius: 20px;border: 2px solid #E1E1E1;}
#rightcol select { text-transform: uppercase;}
#rightcol input[type="submit"],
button.button-blue {
    width:auto;
    text-transform: uppercase;
    padding: 15px 45px;
    background-color: #294167;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 30px;
    border: 1px solid #294167;
    margin:0 20px 20px 0;
}
#rightcol input[type="submit"]:hover, #rightcol input[type="submit"]:active,
button.button-blue:hover, button.button-blue:active {
    background-color: #e73164;
    color: #fff;
    border: 1px solid #e73164;
    cursor:pointer;
}
#rightcol input[type="submit"].pink {
    background-color: #e73164;
    border: 1px solid #e73164;
}
#rightcol input[type="submit"].pink:hover, #rightcol input[type="submit"].pink:active {
    background-color: #294167;
    border: 1px solid #294167;
}
.regulartext {font-weight: normal;}
.extraspacing {margin-bottom: 20px;}
.text-right {text-align:right;}
.smallprint {font-size: 14px;}
#rightcol select.inline {width:auto;}

.messagebox {padding:20px; border-radius: 10px;margin-bottom:20px;color: #fff; font-weight: 700;}
.messagebox.success {background-color:#294167;}
.messagebox.error {background-color:#e73164;}

@media screen and (max-width: 1024px) {
    #leftcol {width:25%;}
    #rightcol {width: 75%;}
    .leftcolheader {padding: 20px;}
    .leftcollogo img {max-width: 100%;}
    .leftcollogo {padding-bottom:20px;}
    .leftcolnav {padding:20px 0;}
    .col-one-third {width:48%;margin-right:2%; }
    .col-two-third {width:100%;margin-right:0; }
    .full-width-on-ipad {width:100%;margin-right:0; }
}

@media screen and (max-width: 768px) {
    #rightcol {padding:20px;}
    #rightcol .header {padding:15px 20px;}
    .formdivider {padding:20px 20px;}
    .text-right {text-align:left;}
}

@media screen and (max-width: 767px) {
    .topbar .wrapper {height: auto;padding:10px;flex-wrap:wrap; width:100%;justify-content: center;background-position: calc(100% + 350px) top;}
    .topbar .wrapper span {text-align: center;width:100%;}
    .topbar .wrapper div {padding:10px 10px 0 10px;}
    .pagecolumns {display:block;}
    #leftcol, #rightcol  {width:100%}
    .leftcolheader {padding:20px;text-align: center;}
    .leftcollogo { padding-bottom: 10px; }
    .leftcolnav ul {padding-left:20px;}
    .formdivider {padding:10px 20px;}
    .col-one-third, .col-half {width:100%;margin-right:0; }
}

/* Tables
================================== */
.Rtable {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    padding: 0;
}
.Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;  /* Default to full width */
    padding: 0.8em 1.0em;
    overflow: hidden; /* Or flex might break */
    list-style: none;
    background: fade(slategrey,20%);
}
.Rtable-cell h3 { margin: 0; }

.Rtable-header {background-color: #294167;color: #fff;}

.Rtable-header, .last-row, .first-col, .col1, .last-col {border:none;}
.Rtable-cell {border-bottom: solid 1px #E1E1E1;}
.Rtable-header {border-top-width: 2px; border-top-style: solid;border-bottom:none;}
.last-row {border-bottom-width: 2px; border-bottom-style: solid;}
.first-col, .col1 {border-left-width: 2px; border-left-style: solid;}
.last-col {border-right-width: 2px; border-right-style: solid;}
.Rtable-header.first-col, .Rtable-header.col1, .Rtable-header, .Rtable-header.last-col {border-color: #294167;}
.first-col, .col1, .last-col, .last-row {border-color: #E1E1E1;}

.Rtable-header.first-col, .Rtable-header.col1 {border-top-left-radius:20px;}
.Rtable-header.last-col {border-top-right-radius:20px;}
.last-row.first-col, .last-row.col1 {border-bottom-left-radius:20px;}
.last-row.last-col {border-bottom-right-radius:20px;}
  
/* Table column sizing & tweaks
================================== */
.Rtable--2cols > .Rtable-cell  { width: 50%; }
.Rtable--3cols > .Rtable-cell  { width: 33.33%; }
.Rtable--4cols > .Rtable-cell  { width: 25%; }
.Rtable--5cols > .Rtable-cell  { width: 20%; }
.Rtable--6cols > .Rtable-cell  { width: 16.6%; }
.Rtable--7cols > .Rtable-cell  { width: 14.25%; }

.table-contact-details .col1 {width: 28%;}
.table-contact-details .col2 {width: 20%;}
.table-contact-details .col3 {width: 20%;}
.table-contact-details .col4 {width: 16%;}
.table-contact-details .col5 {width: 16%;text-align: center;}

.table-active-ops .col1 {width: 23%;}
.table-active-ops .col2 {width: 5%;padding: 0.8em 0.2em;}
.table-active-ops .col3 {width: 15%;}
.table-active-ops .col4 {width: 15%;}
.table-active-ops .col5 {width: 14%;}
.table-active-ops .col6 {width: 14%;}
.table-active-ops .col7 {width: 14%;text-align: center;}

.table-active-ops2 .col1 {width: 23%;}
.table-active-ops2 .col2 {width: 5%;padding: 0.8em 0.2em;}
.table-active-ops2 .col3 {width: 15%;}
.table-active-ops2 .col4 {width: 15%;}
.table-active-ops2 .col5 {width: 14%;}
.table-active-ops2 .col6 {width: 14%;}
.table-active-ops2 .col7 {width: 14%;}

/* Responsive
==================================== */
@media all and (max-width: 1200px) {
    #rightcol .Rtable-cell h3 {font-size:14px;word-wrap: break-word;}
    .Rtable-cell {font-size:14px;padding: 0.8em 1vw;}
}
@media all and (max-width: 500px) {
    .Rtable--collapse  { display: block; }
    .Rtable--collapse .Rtable-cell { width: 100% !important; }
    .Rtable--collapse .Rtable-cell--foot { margin-bottom: 1em; }
    .Rtable-header {display:none;}
    .last-row.first-col, .last-row.col1 {border-bottom-left-radius:0px;}
    .last-row.last-col {border-bottom-right-radius:0px;}
    .col1 {border-top-left-radius:10px;border-top-right-radius:10px;}
    .last-col {border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
    .Rtable-cell {border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;border-bottom:1px solid #E1E1E1;padding: 0.8em 1.2em;}
    .col1 {border-top:1px solid #E1E1E1;}
    .last-col {margin-bottom:20px;}

    .table-contact-details .col1::before {content:'Date added: ';}
    .table-contact-details .col2::before {content:'Network: ';}
    .table-contact-details .col3::before {content:'Type: ';}
    .table-contact-details .col4::before {content:'Package: ';}
    .table-contact-details .col5 {text-align:left;}

    .table-active-ops .col1::before {content:'Date added: ';}
    .table-active-ops .col3::before {content:'Days remaining: ';}
    .table-active-ops .col4::before {content:'Network: ';}
    .table-active-ops .col5::before {content:'Type: ';}
    .table-active-ops .col6::before {content:'Package: ';}
    .table-active-ops .col7 {text-align:left;}

    .table-active-ops2 .col1::before {content:'Date added: ';}
    .table-active-ops2 .col3::before {content:'Days remaining: ';}
    .table-active-ops2 .col4::before {content:'Network: ';}
    .table-active-ops2 .col5::before {content:'Type: ';}
    .table-active-ops2 .col6::before {content:'Package: ';}
    .table-active-ops2 .col7::before {content:'Status: ';}
}
  
/* Non-Flex modernizer fallback
.no-flexbox .Rtable {  display: block;}
.no-flexbox .Rtable  .Rtable-cell { width: 100%; }
.no-flexbox .Rtable  .Rtable-cell--foot { margin-bottom: 1em; }
*/

#rightcol .button-pink,
#rightcol input[type="submit"].button-pink {   width:auto;
    background-color: #e73164;
    border: 1px solid #e73164;
    text-transform: uppercase;
    padding: 8px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    margin:0 0px 0px 0;
    text-decoration: none;
}
#rightcol .button-pink:hover, #rightcol .button-pink:active,
#rightcol input[type="submit"].button-pink:hover, #rightcol input[type="submit"].button-pink:active {
    border: 1px solid #294167;
    background-color: #294167;
    color: #fff;
}
.dot {position: relative; top: 8px;  margin-top: -8px;}
@media all and (max-width: 1200px) {
    #rightcol .button-pink, #rightcol input[type="submit"].button-pink {font-size:12px;padding: 2px 4px;}
    .dot {width:100%;max-width:30px;}
}

/* pop-up */
.popup-overlay {visibility:hidden;display: none;width:100vw;height: 100vh; background-color:rgba(41,65,103,0.75); 
    position: fixed; top:0;left:0;z-index: 10;}
.popup-content {
    visibility:hidden;
    display: none;
    width: 50%;
    top: 5%;
    position: relative;
    left: 25%;
    background: #fff;
    border-radius:10px;
    padding: 20px;
    z-index: 20;
    max-height: 90vh;
}
.popup-overlay.active{visibility:visible;display:block;}
.popup-content.active {visibility:visible;display:block;}
.popup-content img {max-width:100%; max-height:calc(90vh - 60px);}
.buttonbox {position: absolute;top:7px; right:7px;}
.closepopup {cursor:pointer}
button.openpopup {border: 1px solid #fff;border-radius:30px;color: #294167;background-color: #fff;font-size: 18px;}
@media all and (max-width: 1024px) {
    .popup-content {
        width: 90%;
        left: 5%;
    }
}