@import url(./meter.css);

:root {
    --blue: #0a275e;
    --gold: #d3b574;
    --brown:#816018;
    --green:green;
}

html {
    overflow-y: scroll;
    line-height: 1.5;font-size: 15px;
}

body {
    background-color: #0a275e;
    font-family: 'Montserrat', sans-serif !important;
    margin: 0;
}

header {
    background-color: #0a275e;
    border-bottom: 2px solid var(--gold);
    padding-top: 15px;
    padding-bottom: 15px;
    height: 46px;
    overflow: visible;
    display: block;
    box-sizing: content-box;
}

main {
    background-color: var(--blue);
    background-size: cover;
    background-image: url('../images/background-1.png');
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: content-box;
}

footer {
    background-color: #0a275e;
    border-top: 2px solid var(--gold);
    color: #fff;
    overflow: auto;
    padding: 20px 15px 60px 15px;
}

.h1-center {
    color: #403f56;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
}

.h1-left {
    color: #403f56;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-align: left;
    text-transform: uppercase;
}

.h2-footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.h2-gold {
    border-bottom: 1px solid var(--gold);
    clear: both;
    font-size: 18px;
    font-weight: 600;
    padding-top: 16px;
    padding-bottom: 10px;
    text-transform: none;
}

.h3-indent {
    border-bottom: 1px solid var(--gold);
    clear: both;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-left: 24px;
    text-transform: none;
}

.p-indent {
    margin-left: 24px;
}

.p-normal {
    font-size: 14px;
    line-height: 22px;
}

.p-highlight {
    border-left: 4px solid var(--gold);
    box-shadow: 0px 0px 8px #999;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    padding: 24px;
}

/*form {
    text-align: center;
}
*/
#mail-center-login input {
    border: 1px solid #818a91;
    border-radius: 3px;
    color: #7a7a7a;
    font-size: 15px;
    margin: 0 auto;
    padding: .5rem 1rem;
    width: 70%;
}

#sign-in, #save {
    background: var(--gold) !important;
    border: 0 !important;
    color: #0a2764 !important;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    max-width: 150px;
    padding: 12px 24px !important;
}

#sign-in:hover, #save:hover {
    background: #0a2764 !important;
    border: 0 !important;
    color: var(--gold) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    max-width: 150px;
    padding: 12px 24px !important;
}

#forgot-password {
    font-size: 15px;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

#header-center {
    margin: 0 auto;
    max-width: 1200px;
}

#main-center-login {
    background-color: #fff;
    margin: 0 auto;
    max-width: 550px;
    padding: 50px;
}

#main-center-present-values {
    background-color: #fff;
    margin: 0 auto;
    max-width: 1500px;
    padding: 50px;
}

#main-center-qa {
    background-color: #fff;
    margin: 0 auto;
    max-width: 1100px;
    padding: 50px;
}

#main-center-qa a {
    color: #000;
    text-decoration: underline;
}

#main-center-qa a:hover {
    color: #333;
    text-decoration: none;
}

#main-center {
    background-color: #fff;
    margin: 0 auto;
    max-width: 1100px;
    padding: 50px;
}

#footer-center {
    margin: 0 auto;
    max-width: 1200px;
}

.logo {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    width: 152px;
}

.logo-footer {
    float: left;
    padding-top: 45px;
    padding-bottom: 5px;
    padding-left: 15px;
    width: 152px;
}

table {
    border-spacing: 0;
    width: 100%;
}

th {
    background-color: var(--blue);
    border-right: solid 1px #fff;
    color: #fff;
    font-size: 10pt;
    font-weight: 600;
    padding: 10px;
    text-transform: uppercase;
}

.value {
    border-bottom: solid 1px #fff;
}

/*th:nth-child(10) {
    border: 0;
}*/

td {
    font-size: 11pt;
    padding: 10px;
}

/*tr:nth-child(even) {
    background-color: #e8e8e8;
}*/

.date{
    text-align: left;
}

.sum {
    text-align: right;
}

tr:hover, .gold, .gold-sm {
    background-color: var(--gold);
}
.blue-sm {
    background-color: var(--blue);

}
.yellow-sm {
    background-color: #ffeb3b!important;

}
.blue-sm a{
    color: #fff !important;
}

.gold{
    padding: 10px;
}
.gold-sm, .blue-sm, .yellow-sm{
    padding: 3px;
}

tr:hover i.fas{
    color: var(--brown);
}

.client {
    background-color: #fff;
    border-bottom: solid 1px var(--gold);
    font-weight: 600;
}

meter {
    width: 70%;
}

meter::-webkit-meter-bar {background: #e6e6e9;} /*background color of bar*/
meter::-webkit-meter-optimum-value {background: green;}
meter::-webkit-meter-suboptimum-value{background:orange;}
meter::-webkit-meter-even-less-good-value{background:red;}

#username, #password {
    margin-bottom: 1em;
}

i {
    color: var(--gold);
}

#footer-center p {
    font-weight: 400;
}

.menu {
    float: right;
    margin-top: 5px;
}

.menu a {
    color: #fff;
    font-size: 15pt;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

table a {
    color: #000;
    text-decoration: underline;
}

table a:hover {
    color: #333;
    text-decoration: none;
}

#form-personal {
    overflow: auto;
    text-align: left;
}

#form-personal input {
    border: 1px solid #818a91;
    border-radius: 3px;
    color: #222;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: .5rem 1rem;
    width: 80%;
}

#form-personal input[type="radio"] {
    width: 1em;
}




#center-change-password {
    font-size: 14px;
    margin: 16px auto;
    text-align: left;
    width: 40%;
}

#form-change-password {
    overflow: auto;
    text-align: center;
}

#form-change-password input {
    border: 1px solid #818a91;
    border-radius: 3px;
    color: #222;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: .5rem 1rem;
    width: 100%;
}




.contact-left {
    float: left;
    width: 33%;
}

.contact-middle {
    float: left;
    width: 33%;
}

.contact-right {
    float: left;
    width: 33%;
}

#main-center-login input {
    border: 1px solid #818a91;
    border-radius: 3px;
    color: #555;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: .5rem 1rem;
    width: 80%;
}

#save {
    margin-top: 16px !important;
}

nav {
    float: right;
}

#nav-top {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: content-box;
}

#nav-top li {
    float: left;
}

#nav-top li a {
    display: block;
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 13px 20px 13px 20px;
    text-decoration: none;
    text-transform: uppercase;
}

#nav-top li a:hover {
    border-bottom: 3px solid var(--gold);
}

.white {
    background-color: #fff !important;
}

.grey {
    background-color: #ccc !important;
}

.table-deal-left {
    width: 20px !important;
}

.deal-table tr {
    background-color: #fff;
}

.explanation tr {
    background-color: #fff;
}

.explanation td {
    border-bottom: 1px solid var(--gold) !important;
}

#nav-sub {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: none;
}

#nav-sub li {
    font-size: 16px;
    float: left;
    margin-bottom: 32px;

}

#nav-sub li a {
    background-color: #EFEFEF;
    border: 1px solid #CECECE;
    box-shadow: 0px 0px 2px #999;
    display: block;
    color: var(--blue);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 16px;
    text-decoration: none;
    margin-right: 16px;
}



.tabbed {
    overflow-x: hidden; /* so we could easily hide the radio inputs */
    margin: 32px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #ccc;
}

.tabbed [type="radio"] {
    /* hiding the inputs */
    display: none;
}

.tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid var(--gold);
}
.tab > label {
    display: block;
    margin-bottom: -1px;
    padding: 12px 25px;
    border: 1px solid #ccc;
    background: #eee;
    color: #666;
    font-size: 13px; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;    
    transition: all 0.3s;
}
.tab:hover label {
    border-top-color: var(--blue);
    color: var(--blue);
}

.tab-content {
    display: none;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
    border-bottom-color: #fff;
    border-top-color: var(--gold);
    border-top-width: 1px;
    background: #fff;
    color: var(--blue);
    font-weight: bold;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
    display: block;
}


.show-tab-content{
    margin-left:0;
    padding-left:0;
}

.progress-bar-success, .bar-success {
    background-image: linear-gradient(to bottom, #ff7d5e, #ff7d5e) !important;
}

.progress-bar-warning, .bar-warning {
    background-image: linear-gradient(to bottom, #fbb450, #fbb450) !important;
}

.progress-bar-danger, .bar-danger {
    background-image: linear-gradient(to bottom, #57a957, #57a957) !important;
}

.progressb {
    float: left;
    width: 75% !important;
    margin-bottom: 0 !important;
}

.progress {
    margin-bottom: 0 !important;
}

footer a {
    color: #fff;
    text-decoration: none;
}

#nav-top-minimal {
    background-color: var(--blue);
    clear: both;
    display: none;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#nav-top-minimal a {
    border-bottom: 1px solid var(--gold);
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    text-decoration: none;
    text-transform: uppercase;
}

#nav-top-minimal a:hover {
    background-color: #fff;
    color: var(--blue);
}



#minimal-icon {
    display: none;
}

.footer-p {
    margin: 6px;
}

.contact-box {
    border-left: 4px solid var(--gold);
    box-shadow: 0px 0px 8px #999;
    display: none;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 300px;
    padding: 24px;
}

.contact-box a {
    color: #000;
    text-decoration: underline;
}

.h2-contact {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

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

.contact-module {
    float: left;
    width: 33%;
}

.deal-textbox-left {
    float: left;
    width: 60%;
}

.deal-diagram {
    float: right; width: 40%; text-align: right;
}

.deal-diagram-text-heading {
    text-align: center !important;
    margin-bottom: 0;
}

.deal-diagram-text {
    text-align: left; font-size: 8pt; width: 60%; margin-left: 20%; margin-right: 20%; margin-top: 0;
}

.deal-table-left {
    float: left; width: 50%;
}

.deal-table-right {
    float: right; width: 45%;
}

tr.border-bottom-gold td {
    border-bottom: 1px solid var(--gold);
}

.th-follow-up-minimal {
    display: none;
}

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

.center {
    vertical-align: middle;
    font-size: 12px;
    margin: 0 auto;
    max-width: 95%;
}

.welcome {
    color: #fff;
    font-size: 12px;
    padding: 13px 20px;
}

#message {
    color: red;
    text-align: center;
}

#form-message {
    color: red;
    float: left;
    text-align: left;
}

#form-message-ok {
    color: green;
    float: left;
    text-align: left;
}

.p-normal a {
    color: #000;
    text-decoration: underline;
}

.p-normal a:hover {
    color: #666;
    text-decoration: none;
}

#forgot-password a {
    color: #000;
    text-decoration: underline;
}

#forgot-password a:hover {
    color: #666;
    text-decoration: none;
}


li {
    margin-bottom: 10px;
    list-style: none;
}
/*
linear-gradient(to bottom, #ee5f5b, #c43c35);

gul
background-image: linear-gradient(to bottom, #fbb450, #f89406);

grön
linear-gradient(to bottom, #62c462, #57a957);
*/
/*
CRM view 
*/
.clearfix {
   overflow: auto;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

dl{
    line-height: 1.7;

}
dt {
    float: left;
    
}
dl.form dt {
    float: none !important;
    
}
dd{
    margin-left: 25px;
    
}

div.crm-buttons-bar button i.fa,
div.crm-note i.fa {
    margin-right: 8px;
}

.crm-note form {
    text-align: center;
}
 
.w3-blue-sharpio,
.w3-hover-blue-sharpio:hover{
    color:#fff !important;
    background-color:var(--blue) !important;
}
.w3-gold-sharpio,
.w3-hover-gold-sharpio:hover,
{
    color:#000 !important;
    background-color:var(--gold) !important;
}
.w3-disabled {
    opacity: 0.6;
}

#crm-log .date{
    font-style: italic;
    color: #999;
    font-size: 13px;
    font-weight: 300;
}

.editable-crm-note > form,
.editable-crm-note > form textarea{
    text-align: left;
    border: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.editable-crm-note > form textarea{
    background:  #fdf5e6 !important;
    width: 100% !important;
    height: 100px !important;
    display: block;
    margin-bottom: 15px !important;
}
.editable-crm-note > form textarea:focus{
    outline: none;
}
/*
END CRM view 
*/


@media screen and (max-width: 1340px) {
    #table-wrapper td, #table-wrapper th {
        font-size: 12px; 
    }
}


@media screen and (max-width: 1150px) {
    .footer-module {
        margin-left: 24px;
        width: 100%;
    }
}



@media screen and (max-width: 1024px) {
    #nav-top {
        display: none;
    }

    #minimal-icon {
        color: #fff;
        cursor: pointer;
        display: block;
        float: right;
        font-size: 24px;
        padding-top: 10px;
        padding-right: 25px;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    #main-center, #main-center-login, #main-center-present-values, #main-center-qa {
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .footer-module {
        margin-left: 24px;
        width: 100%;
    }

    #nav-sub li {
        font-size: 14px;
        margin-bottom: 5px;
    }

    #nav-sub li a {
        padding: 10px;
    }

    #table-wrapper {
        overflow-x: scroll;
    }

    .contact-module {
        margin: 0 auto;
        width: 50%;
    }

    #form-personal input {
        width: 85%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .deal-textbox-left {
        width: 100%;
    }

    .deal-diagram {
        width: 100%;
    }

    .deal-diagram img {
        width: 100%;
    }

    .deal-table {
        clear: both;
    }

    .deal-table-left, .deal-table-right {
        clear: both;
        width: 100%;
    }

    .table-follow-up {
        overflow-x: scroll;
    }

    .table-follow-up th {
        font-size: 12px !important;
    }

    .table-follow-up td {
        font-size: 12px !important;
    }

    #table-contact th {
        font-size: 10px !important;
    }

    #table-contact td {
        font-size: 10px !important;
    }

    .th-follow-up-wide {
        display: none;
    }

    .th-follow-up-minimal {
        display: block;
    }

    #center-change-password {
        width: 60%;
    }
}



@media screen and (max-width: 512px) {
    #table-contact {
        display: none;
    }

    .contact-box {
        display: block;
    }

    .contact-box > p > i {
        color: #000;
    }

    .contact-module {
        clear: both;
        margin: 0 auto;
        width: 100%;
    }

    .contact-module-empty {
        display: none;
    }

    #form-change-password {
        text-align: left;
    }
    
    #center-change-password {
        margin: 0;
        width: 80%;
    }
}
.dataTables_filter{
    margin: 0 0 25px 0;
}
/*#nuvarden-table th, #nuvarden-table td { white-space: nowrap; }*/
/* stylelint-disable declaration-no-important  */
#tbl-uppdragsgivare{
    width: 160px;
}
table.dataTable thead th, table.dataTable thead td {
    padding: 8px 18px 8px 8px;
}
.type_tf {
    background-color: var(--green) !important;
    color: #fff !important;
    text-align:center !important;
}
.type_multi {
    background-color: var(--gold) !important;
    color: #000 !important;
    text-align:center !important;
}
.type_other {
    background-color: var(--blue) !important;
    color: #fff !important;
    text-align:center !important;
}
#table-wrapper table.zoom-p-4  td, 
#table-wrapper table.zoom-p-4  th{
    font-size: 16px !important;
}

#table-wrapper table.zoom-p-3  td, 
#table-wrapper table.zoom-p-3  th{
    font-size: 15px !important;
}

#table-wrapper table.zoom-p-2  td, 
#table-wrapper table.zoom-p-2  th{
    font-size: 14px !important;
}

#table-wrapper table.zoom-p-1  td, 
#table-wrapper table.zoom-p-1  th{
    font-size: 13px !important;
}

#table-wrapper table.zoom-m-0  td, 
#table-wrapper table.zoom-m-0  th,
#table-wrapper table.zoom-p-0  td, 
#table-wrapper table.zoom-p-0  th{
    font-size: 12px !important;
}


#table-wrapper table.zoom-m-1  td, 
#table-wrapper table.zoom-m-1  th{
    font-size: 11px !important;
}

#table-wrapper table.zoom-m-2  td, 
#table-wrapper table.zoom-m-2  th{
    font-size: 10px !important;
}
#table-wrapper table.zoom-m-3  td, 
#table-wrapper table.zoom-m-3  th{
    font-size: 9px !important;
}
#table-wrapper table.zoom-m-4  td, 
#table-wrapper table.zoom-m-4  th{
    font-size: 8px !important;
}


@media print {
    @page {
      size: A4 portrait;
      margin: 10px 20px 10px 0;
      background-color: transparent !important;
    }
    body{
        background-color: transparent !important;
    }
    table.dataTable thead th, table.dataTable thead td {
        padding: 1px !important;
    }
    header, #pre-table, #nuvarden-table_filter{
        display: none;
    }

    a,
    a:visited { text-decoration: underline; }

/*    a[href]:after { content: " (" attr(href) ")"; }
*/
    abbr[title]:after { content: " (" attr(title) ")"; }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

/*    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }
*/
    pre { white-space: pre-wrap !important; }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * 
     */

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 { page-break-after: avoid; }

    /**
     * HIDE certain elements completely
     */
    .site-navigation {
        display: none;
    }

    /**
     * Or go Nuclear and use this:
     * from: https://medium.com/@matuzo/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.9de6r4yhr
     *
     *   body > *:not(main) { display: none; }
     *
     */
    #nuvarden-table th:nth-child(1) {
        width: 80px !important;

    }
    #nuvarden-table th:nth-child(2) {
        width: 50px !important;
    }
    h2{
        font-size: 23px;
        margin: 0 0 20px 0;
    }
    textarea.printcomments{
        width: 100%;
        height: 150px;
    }
    form{
        margin: 0;
    }
    table { margin: 0; page-break-after: always; page-break-inside: auto;}
    thead { display: table-header-group; }
    tfoot { display: table-header-group; }
    tr { page-break-inside: avoid; page-break-after: auto; }

    th, td {
        padding: 3px 5px;
        font-size: 11px;
    }
    .type_tf {
        background-color: var(--green)  !important;
        color: #fff !important;
        text-align:center !important;
    }
    .type_multi {
        background-color: var(--gold) !important;
        color: #000 !important;
        text-align:center !important;
    }
    .type_other {
        background-color: var(--blue) !important;
        color: #fff !important;
        text-align:center !important;
    }
    .vertical-header span {
      height: 300px !important;   
    }

}

/* Info icon styles */
.fa-info-circle {
    color: var(--blue);
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px;
}

.fa-info-circle:hover {
    color: var(--gold);
}

a:has(.fa-info-circle) {
    text-decoration: none;
}

/* Secondary button style */
.btn-secondary {
    display: inline-block;
    background-color: #6c757d;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 3px;
    margin-left: 10px;
    font-size: 14px;
}

.btn-secondary:hover {
    background-color: #545b62;
    color: white;
}

/* stylelint-enable */