@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
@import url('../fonts/all.css');

body, p, a,li, span {
    font-family: "Segoe UI","Helvetica Neue",Helveticca,Arial,sans-serif;
    font-size: 16px;
    line-height: 24px;

}

body.site {
    padding: 0;
}

body.site,
body.site.fluid {
    background-color: rgb(245, 245, 245);
}

p {margin-bottom: 24px;}

p {
    line-height: 24px;
    margin-bottom: 24px;
}

h1, h1 a, h2, h2 a, .site-description {
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #000;
}

p {color: #374151;}
a {color: #DC2626;}

footer {opacity: 0.7;}

/* Basic ------------------------------------------------------------------------ */
body.site {border-top: 0 !important;}

h1 {margin: 24px 0 24px 0;}

.site-description {font-size: 26px; font-weight: 700; line-height: 28px; text-align: right; margin-top: 20px;}

a.brand, a.brand:hover {color: #001a27;}



/* Modals */

div.modal.fade {top: -75%;}


/* Buttons */
.btn {
    min-width: 15px;
    padding: 5px !important;
    margin-right: 0;
}


/* No frontend editing --------------------------------------------------- */

.item-page .icons {display: none;}

/* Topheader ------------------------------------------------------------- */
.topheader {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: rgba(245, 245, 245, 1);
    text-align: right;
    border-top: 4px solid rgb(220, 38, 38);
}

.topheader p, .topheader a {
    color: rgb(31, 41, 55);
    font-family: Segoe UI, Helvetica Neue, Arial, sans-serif;
font-feature-settings: normal;
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
line-height: 24px;
    margin-bottom: 0;
}

.topheader a:hover,
.topheader a:active {text-decoration: none;}
/* Header ----------------------------------------------------------------- */

.header {
    border-top: 1px solid rgb(182,182,182);
    background-color: #fff;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}

/* Menu ------------------------------------------------------------------- */

.nav {margin-bottom: 0;}

.navigation {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    background-color: rgb(245, 245, 245);
    border-bottom: 1px solid rgb(182,182,182);
    margin-bottom: 0;
}

.navigation .nav {
    display: block;
    float: left;
}

.navigation .nav li {
    width: fit-content;
    float: left;
    margin-left: .5rem;
    margin-right: .5rem;
    border-bottom: 2px solid transparent;
}

.navigation .nav li:hover {
    border-bottom: 2px solid rgb(185, 28, 28);
}

.navigation .nav li a:hover {
    background-color: transparent;
}

.navigation .nav li a,
.navigation .nav li .nav-header {
    line-height: 1.25rem;
    text-transform: uppercase;
    padding: 0.75rem;
    color: rgb(0, 0, 0);
    font-family: Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-feature-settings: normal;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 20px;
}

.navigation .nav li .nav-header {
    padding-right: 1.5rem;
}

.navigation .nav li .nav-header::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    position: absolute;
    top: 0.75rem;
    right: 0;
    height: 6px;
    content: '\f078';
    color: rgb(239,68,68);
}

/* Submenu's ---------------------------------------------------------------------- */

.navigation .nav-child li {width: 94%;}

.navigation .nav-child li > a:hover, .navigation .nav-child li > a:focus, .navigation .nav-child:hover > a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  background-color: transparent;
  background-image: none;
}

/* row fluid (content) ------------------------------------------------------------ */
.row-fluid {
    background-color: #fff;
}

/* Footer ------------------------------------------------------------------------- */

footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid rgb(182,182,182);
    border-bottom: 1px solid rgb(182,182,182);
    background-color: #fff;
}

footer p, footer a {margin-bottom: 0;}

/* Popups (Modals) ---------------------------------------------------------------- */

.modal {padding: 30px;}
.modal .modal-body {overflow: auto;}


/* Overzichten adressen ---------------------------------------------------------- */

#addressList tr:nth-child(1) th:first-child {width: 60px;}


/* Individuele pagina's --------------------------------------------------------- */



/* Diverse paginas -------------------------------------------------------- */



.js-stools.clearfix {margin-bottom: 30px;}

.create_button {display: inline-block; margin-right: 30px;}

.search_button {display: inline-block; margin-left: 30px !important;}

#limit_chzn {display: inline-block; margin-left: 30px !important;}

/* Invoeren nieuwe reparatieorder */

#form-repairfrontend .row {Margin-left: 0;}

#form-repair .row {margin-left: 0;}

.repair-form-block {
    width: 100% !important;
    clear: both;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}


/* Alle reparaties -------------------------------------------------------------- */

.new-order {display: none;}

.alle-reparaties .new-order {display: none;}

#repairList .item-column .inner {
    width: 100%;
  }


/* Eindgebruiker - Mijn reparaties ---------------------------------------------- */

#repairList a.btn,
#repairList a.btn-primary {float: left; margin-right: 8px; }

.icon-checkedout {display: none;}

.btn.btn-micro.disabled {display: none;}

.invalid + .chzn-container {
    border: 1px solid #9d261d;
}

.footer-1,
.footer-2,
.footer-3 {text-align: center;}



/* Aanpassingen voor fluid ------------------------------------------------------ */

.topheader-inner,
.header-inner,
.nav-collapse,
footer .container-fluid,
.row-fluid #content {
    display: block;
    max-width: 1643px;
    margin: 0 auto;
    float: none;
}

.row-fluid {
    width: 100%;
    display: block;
    float: left;
}

.container-fluid {
    /* max-width: 1643px; */
    padding-left: 0;
    padding-right: 0;
    /* margin: 0 auto; */
}

.row-fluid #content {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* Media Queries ---------------------------------------------------------------- */



/* Large desktop ---------------------------------------------------------------- */

@media (min-width: 1200px) { 

    .container {width: 1140px; max-width: 1140px;}

    /* Modals ------------------------------------------------------------------- */
    div.modal {
        position: fixed;
        top: 5%;
        max-height: 90%;
        left: 50%;
        z-index: -1;
        width: 50%;
        margin-left: -25%;
    }

}

 
/* Xtra large desktop ---------------------------------------------------------------- */

@media (min-width: 979px) { 

    .container {width: 95%; max-width: 95%;}

    .span4 {width: 33%; margin: 0;}
    .footer-1 {text-align: left;}
    .footer-3 {text-align: right;}

    /* Modals ------------------------------------------------------------------- */
    div.modal {
        position: fixed;
        top: 5%;
        max-height: 90%;
        left: 50%;
        z-index: -1;
        width: 50%;
        margin-left: -25%;
    }

}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) { 





}

     

/* Landscape phone to portrait tablet */

@media (max-width: 767px) { 

    .span4 {width: 100%; margin: 0;}



}

     

/* Landscape phones and down */

@media (max-width: 480px) { 





}



/* CSS SIMON ------------------------------------------------------------------------*/

.js-stools .shown  {
    display: inline-block !important;
    width: 100%;
}

/* END CSS SIMON ------------------------------------------------------------------------*/