body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:12px;
    margin:0px;
}

.main-body {
    padding: 20px 40px 40px 40px;
    min-height: calc(100vh - 380px);
}

.no-script {
    display:none;
}

/* Home page */
.bottom-banner {
    text-align: center;
    border: 2px solid #978778;
    border-radius: 18px;
    padding: 20px;
    margin: 15px 20%;
    font-size: 32px;
}
.bottom-banner:hover {
    color: #f5f1ee;
    background-color: #b95c00;
}

a.big-button {
    text-decoration: none;
    color: #b95c00;
}

/* End Home page */

.cursor-pointer {
    cursor: pointer;
}

.w-60 {
    width: 60px;
}

.lm-20 {
    margin-left: 20px;
}

.rm-10 {
    margin-right: 10px;
}

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

.red-text {
    color:red !important;
}
.blue-text {
    color:blue !important;
}
.green-text {
    color:green !important;
}
.dark-green-text {
    color:#526652 !important;
}
.yellow-text {
    color:yellow !important;
}
.orange-text {
    color: #b95c00 !important;
}

.yellow-bg {
    background-color:yellow !important;
}
.green-bg {
    background-color:#69aa08 !important;
}
.orange-bg {
    background-color:#b95c00 !important;
}
.red-bg {
    background-color:red !important;
}

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

.auto-overflow-x {
    overflow-x:auto;
}

/* new login_div */

#login_div {
    /* max-width: 300px; */
    /* text-align: center; */
    margin: auto;
}

.login-box {
    width: 260px;
    padding: 12px;
    margin: 8px 0;
    border: none;
    border-bottom: 2px solid #b95c00;
    background-color: transparent;
    color: #000;
    font-size: 16px;
}

button.login-but {
    margin: 30px;
}

button.login-but:hover {
    background-color: #8c4a00;
}

div.forgotten-details {
    margin-bottom: 30px;
    color: red;
}

.login-form {
    border: 2px solid #c4c2c2;
    border-radius: 18px;
    padding: 50px 90px 30px 90px;
    width: 400px;
    text-align: center;
}

#forgot_pass_div {
    border: 2px solid #c4c2c2;
    border-radius: 18px;
    padding: 50px 60px 25px 60px;
    width: 400px;
    text-align: center;
}
#reg_div {
    border: 2px solid #c4c2c2;
    border-radius: 18px;  
    padding: 50px 90px 30px 90px;
    width: 750px;
}
.reg-info {
    font-size: 14px; 
    color: #b95c00;
    text-align:center;
    margin-bottom: 10px;
    margin-top: -5px;
}

/* .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #b95c00;
    margin: 0 auto 20px;
} */
/* End login div */

.standard-button {
    font-size:18px;
    border: 1px solid #c4c2c2;
    border-radius:8px;
    padding:0px 20px 0px 20px;
    margin-left:5px;
    margin-bottom:15px;
    color:white;
    background-color:#b95c00;
    text-align:center;
    cursor: pointer;
    white-space: nowrap;
    line-height: 2em;
}
.standard-button:focus {
    border: 2px solid black;
}

.standard-input {
    height:33px;
    width:95%;
    max-width:350px;
    font-size:18px;
    border: 1px solid #c4c2c2;
    border-radius:8px;
    padding: 4px 4px 0px 4px;
    margin-left:5px;
    margin-bottom:10px;
    /* color:black; */
    background-color:white;
    display: inline-block;
}
standard-checkbox {
    width:25px;
    height:25px;
}

.standard-div {
    font-size:18px;
    margin-bottom:20px;
}

.standard-text {
    font-size:18px; 
    color:#5c5b59;
    line-height: 1.6em;
}

.standard-link {
    color:#1d70b8;
    cursor: pointer;
    text-decoration:none;
}
.standard-link:visited {
    color:#1d70b8;
}
.standard-link:hover {
    color:#b95c00;
    text-decoration:underline;
}

.standard-ul {
    line-height: 1.6;
}

.disabled {
    background-color:#f7f5f5;
    cursor: default;
    color: gray;
}

.disabled-button {
    background-color: gray;
    cursor: default;
}

.reg-help {
    margin-left: 10px;
    color: #9f796a;
}

/* .contact-form-input {
    font-family:Verdana;
} */
.contact-form-input:focus {
    outline:#b95c00;
}

.plus-button {
    height: 24px;
    margin-bottom: -8px;
    margin-left: 10px;
}
#add_client_button {
    height: 30px;
}

.menu-bar {
    font-size:16px;
    color:#bf6308;
    background-color:#ece7e7;
    padding:15px;
    line-height: 2.5em;
}

.menu-button {
    border: 1px solid #c4c2c2;
    border-radius:8px;
    font-size:17px;
    color:#b95c00;
    background-color:white;
    padding:0px 10px 0px 10px;
    margin-right:15px;
    white-space: nowrap;
    line-height: 2em;
    cursor: pointer;
}

/* dropdown */
.dropbtn {
    height: 20px;
    margin-bottom: -5px;
    margin-left: 20px;
}
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    text-align: left;
    width: 250px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    font-size: 16px;
    width: 218px;
    padding: 12px 16px;
    padding-left: 16px;
    text-decoration: none;
    cursor: pointer;
    display: block;
  }
  
  .dropdown-content a:hover {
      color:white;
      background-color: #eb7652;
  }
  
  .dropdown:hover .dropdown-content {display: block;}
  
  .dropdown:hover .dropbtn {
      color:#eb7652;
      background-color: white;
  }
  /* end dropdown */
/* #main_menu_button {
    height: 20px;
    margin-bottom: -5px;
} */

/* #page_heading {
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
    color: #4d4a4a;
    display: inline-block;
} */

.user-hello {
    font-size: 20px;
}
.last-login-div {
    font-size:14px;
}

.menu-col {
    font-size: 13px;
    margin-left: 30px;
    color: #4d4a4a;
    display: inline-block;
    line-height: 1.5em;
}

.last-refresh-span {
    font-size:11px;
}

.section-header {
    font-size: 24px;
    color: #b95c00;
    margin-bottom: 10px;
    margin-top: 30px;
}

/* .vat-actions {
    cursor: pointer;
    background-color:#ffe3c7 !important;
}
.vat-actions:hover, .vat-actions:focus {
    color:white;
    background-color:#b95c00 !important;
} */

.credits-box {
    width: 20px;
    margin-left: 30px;
}

.obligations-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0em 0em 1.5em 0em;
}                     

.obligations-row div div {
    width: 90px;
    margin: 0.2em;
    border: 1px solid #ddd;
    padding: 1.0em 1em 1.0em 0.5em ;
    font-size: 1em;
    text-align: center;
    white-space: nowrap;
    /* word-wrap: break-word; */
}

.obligations .obligations-row div div:first-child {
    border: 0px;
    font-weight: bold;
}

/* table.td-borders td {
    border: 1px solid #ddd;
    padding: 4px 10px 4px 10px;
} */

table.tr-borders {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    /* margin-bottom: 100px; */
    font-size: 15px;
}
table.tr-borders td, table.tr-borders th {
    border-bottom: 1px solid #ddd;
    padding: 12px;
    transition:background-color 1s linear;
}

table.list td, table.list th {
    border:none;
    padding: 5px;
}
.narrow-button {
    /* Use for span / div etc. Not for button */
    font-size: 12px;
    border: 1px solid #c4c2c2;
    border-radius: 8px;
    padding: 2px 10px 2px 10px;
    margin-left: 5px;
    color: white;
    background-color: #b95c00;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

/* div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: white;
    font-size: 25px;
    border-bottom: 1px solid #c4c2c2;
} */

.modal {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
.modal-content-msg {
    background-color: #fefefe;
    margin: auto;
    /* padding: 20px; */
    border: 1px solid #888;
    width: 97%;
    max-width: 400px;
    height:350px;
    max-height: 80vh;
    margin-top:140px;
}
#contact_content {
    max-width: 380px;
    width: 95%;
    margin-top: 100px;
    height: 570px;
}
.da-content {
    height: 660px;
    max-width: 530px;
}
.da-form-desc {
    max-width: 400px;
}
/* .da-form-data {
    width: 200px;
} */

.close-modal {
    color: #edf0f5;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding-right:10px;
}
  
.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

footer {
    background-color:#bdbbbb;
    text-align:center;
    width: 100%;
    line-height: 1.8em;
}
/* footer.sticky {
    background-color:#bdbbbb;
    text-align:center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 1.8em;
} */

footer nav {
    padding:40px;
}

.footer-link {
    margin-right: 6px;
    margin-left: 6px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}
.footer-link:hover {
    color: blue;
}
.footer-link:visited {
    color: black;
}

.popup-title {
    font-size:24px;
    color:white;
    font-weight: bold;
    margin-bottom:15px;
    background-color:#b95c00;
    padding: 15px 0px 15px 0px;
}
.popup-content {
    font-size:14px;
    padding: 15px 40px;
    margin-bottom:20px;
    overflow: scroll;
    overflow-wrap:break-word;
}

a,
button,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
    outline: 2px solid transparent;
    outline-offset: 5px;
    -webkit-transition: outline-offset .2s linear;
    transition: outline-offset .2s linear;      
}

a:focus,
button:focus,
input:focus,
select:focus:focus,
textarea:focus,
[tabindex]:not([tabindex="-1"]):focus {
    outline-color: #000;
    outline-offset: 2px;
}


/* Header Page: */
/* .header-shiraz-text {
    font-size: 36px;
    color: #b95c00;
    padding-left: 15px;
    display: inline-block;
    float: right;
    margin: 60px;
} */

/* .header-top-bar {
    background-color: #b95c00;
    height: 10px;
} */

.top-menu-div {
    background-color: #44392e;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.top-menu-item {
    padding: 5px 30px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    transition: all .3s;
    cursor: pointer;
}
.top-menu-item:hover {
    color: #e97908;
}

.header-div {
    margin: 10px;
    margin-left: 40px;
    text-align: left;
}

.header-div img {
    max-height: 120px;
    margin-left: 30px;
    /* margin-right: 100px; */
}
.header-logo-div {
    display: inline-block;
}
.header-text-div {
    display: inline-block;
    font-size: 22px;
    color: #b95c00;
    vertical-align: top;
    margin-left: 200px;
    margin-top: 25px;
}

.page-heading {
    text-align: center;
    font-size: 32px;
    margin-top: 35px;
    margin-bottom: 0px;
    font-weight: bold;
}

.tag-line-div {
    background-image: url("images/tag_bg.jpg");
    /* min-height: 950px; */
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 160px;
    color: white;
}
.tag-head {
    font-size: 42px;
    margin-bottom: 20px;
}
.tag-text {
    font-size: 26px;
    font-weight: normal;
}

h2.about-h2 {
    font-size: 20px;
}

h3.hp2 {
    margin: 40px 100px 20px 100px;
    font-size: 20px;
    color: #403a3a;
    font-weight: normal;
}
.hp-button {
    margin-left: 100px;
    margin-bottom: 40px;
}

.about-t1l {
    display: inline-block;
    width: 40%;
    padding: 60px 140px;
}
.about-head{
    font-size: 28px;
}
.about-text {
    font-size: 17px;
    color: #403a3a;
    vertical-align: top;
    line-height: 1.4;
}
.about-t1r {
    display: inline-block;
    margin-left: 3%;
    margin-top: 50px;
}
.about-pic {
    width: 400px;
    border-radius: 50%;
    border: 4px solid #b95c00;
    height: 200px;
}

.features-head {
    color: #b95c00;
    font-weight: bold;
    transition: background-color 1.5s;
}
.features-box {
    display: inline-block;
    width: 25%;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
    padding: 25px;
    margin: 1%;
    height: 130px;
    vertical-align: top;
    text-align: center;
    transition: background-color 1.5s;
}

/* .features-head:hover {
    background-color: #b95c00;
    color: white;
} */

/* .about-r2 {
    margin-top: 40px;
    padding: 30px 150px;
} */
.about-div {
    padding: 30px 150px;
    /* background-color: #f9c87e; */
    /* background-image: url("images/about_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
}

/* Contact Page */
#contact_error_div {
    color: red;
    display: none;
    padding-bottom: 20px;
    font-size: 18px;
}

/* #contact_form {
    display: block;
} */

#send_contact_form {
    padding-left: 30px;
    padding-right: 30px;
}

.mfa-text {
    margin-bottom: 10px;
    margin-left: 8px;
}

#declaration_row {
    display: none;
    font-size: 14px;
    color: brown
}

#info_div {
    margin-top:25px;
    margin-left: 15px;
}

#extra_buttons {
    margin-top: 20px;
    padding-top:30px;
    border-top: 1px solid #ddd;
}

/* .forgot-pass-text {
    margin-left: 10px;
    margin-bottom: 25px;
} */

#contact_msg_box {
    height:260px;
}

div.row {
    width:100%;
}

.input-title {
    margin-left:10px;
    width:12%;
    /* min-width:200px; */
    text-align:center;
    font-size:15px;
    display:inline-block;
}

#msgbox {
    z-index: 1000;
}
#confirm_box {
    z-index: 1001;
}

#conf_content {
    height: 300px;
}

#conf_body {
    height: 150px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.extra-obl-row {
    display:none;
}

#news_div {
    font-size: 16px;
    /* color: #bf102e; */
    color: #6e565a;
}

#ac_content {
    height: 360px;
}
#client_form {
    margin-top: 25px;
}

.client-enrty-title {
    display: inline-block;
    width: 110px;
    text-align: left;
}
.client-enrty-input {
    display: inline-block;
    width: 250px;
}

#buy_content {
    height: 240px;
    width: 350px;
}
.buy-form-title {
    display: inline-block;
    width: 180px;
}
.buy-form-input {
    display: inline-block;
    width: 100px;
}

.disp-inline {
    display: inline;
}
.disp-inline-block {
    display: inline-block;
}
.disp-block {
    display: block;
}
.disp-none {
    display: none;
}
.hidden {
    display:none;
}

tr.cust-data {
    background-color: rgb(237, 239, 240);
}


@media (max-width:1340px) {
    .input-title{
        display:block;
        width:auto;
        text-align: left;
    }

    .about-t1r {
        margin-left: 0px;
    }
    .about-t1l {
        padding-right: 40px;
    }

    .about-div {
        padding: 30px 70px;
    }
      }

@media (max-width:1035px) {
    .obligations-row  div:nth-child(6) {
        page-break-after: always;       /* force a break for the buttons */
    }
    
    /* Hide the empty row when it wraps */
    .obligations-row  div:nth-child(7) div:first-child,
    .obligations-row  div:nth-child(8) div:first-child, 
    .obligations-row  div:nth-child(9) div:first-child {
        display: none;
    }

    #reg_div {
        padding: 50px 10px 30px 10px;
    }

    .about-t1l {
        padding: 60px 70px;
    }

    .about-div {
        padding: 30px 100px;
    }

    .features-box {
        width: 20%;
        height: 230px;
    }
}

@media (max-width:920px) {
    .about-t1l {
        padding-right: 0px;
    }
    .features-box {
        height: 280px;
    }
}

@media (max-width:860px) {
    .features-box {
        height: 340px;
    }
    #login_div {
        margin-left: 11%;
    }

    .page-heading {
        font-size: 28px;
    }
}

@media (max-width:820px) {
    #reg_div {
        width: 360px;
    }
    #login_div {
        margin-left: 9%;
    }
}

@media (max-width:800px) {
    .features-box {
        height: 350px;
    }
    
    .about-pic {
        width: 300px;
    }
}

@media (max-width:700px) {
    .header-div {
        margin: 0px;
        text-align: center;
        padding-top: 25px;
    }
    .header-div img {
        max-width: 100%;
        float: none;
        margin: 0px;
    }

    .top-menu-item {
        padding: 5px 15px;
    }
    
    .tag-line-div {
        padding: 40px 60px;
    }
    h3.hp2 {
        margin: 40px 40px 20px 40px;
    }
    .hp-button {
        margin-left: 80px;
    }
    /* .header-shiraz-text {
        margin: 0px;
    } */
    
    .about-t1l {
        width: 90%;
        padding: 30px 30px;
    }
    .about-t1r {
        margin-left: 10px;
    }
    .about-div {
        padding: 30px 30px;
    }
    .about-pic {
        width: 400px;
        margin-left: 25%;
    }

    #login_div {
        margin-left: 2%;
    }
}

@media (max-width:650px) {
    .main-body {
        padding-left: 20px;
        min-height: calc(100vh - 460);
    }

    footer nav{
        padding: 10px;  
    }

    #contact_content {
        margin-top: 50px;
        
    }
    .standard-input {
        margin-left:0px;
    }    
    
    .modal-content-msg {
        margin-top: 70px;
    }
    .login-form {
        padding: 50px 30px 30px 30px;
    }
}

@media (max-width:540px) {
    .features-box {
        width: 86%;
        height: 130px;
    }

    .tag-line-div {
        padding: 40px 40px;
    }

    .about-pic {
        margin-left: 12%;
    }
}

@media (max-width:400px) {
    .main-body {
        padding: 10px 0px 40px 0px;
    }

    .about-pic {
        width: 300px;
        margin-left: 10%;
    }

    h3.hp2 {
        margin: 40px 40px 20px 40px;
    }

    table.tr-borders {
        margin-left: -30px;
    }

    table.tr-borders td, table.tr-borders th {
        padding: 10px;
    }
}