@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700,500italic);
@import url(https://fonts.googleapis.com/css?family=Oleo+Script:400,700);
@import url(https://fonts.googleapis.com/css?family=Passion+One);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,300i,400,400i,600,700);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url("compass/css3");


.status.open:before {
    background-color: #94e185;
    border-color: #78d965;
    box-shadow: 0px 0px 4px 1px #94e185;
}

.status.accepted:before {
    background-color: #fc5f00;
    border-color: #fc5f00;
    box-shadow: 0px 0px 4px 1px #fc5f00;
}
.status.in-progress:before {
    background-color: #ffc182;
    border-color: #ffb161;
    box-shadow: 0px 0px 4px 1px #ffc182;
}
.status.canceled:before {
    background-color: #c9404d;
    border-color: #c42c3b;
    box-shadow: 0px 0px 4px 1px #c9404d;
}
.status.completed:before {
    background-color: #4890fc;
    border-color: #2984ec;
    box-shadow: 0px 0px 4px 1px #33549b;
}
.status.waiting:before {
    background-color: #7e7e7e;
    border-color: #858585;
    box-shadow: 0px 0px 1px 1px #626262;
    margin-top: 7px;
}
.status:before {
    content: " ";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right:5px;
    border: 1px solid #4b4b4b;
    border-radius: 7px;
}


body {
    background-image: url('../media/bg.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;

}

#loadingPassingFiles {
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: none;
    top: 0px;
    color: #222222;
    text-align: center;
}

#loadingPassingFiles p {
    text-align: center;
}

.heading {
    margin-top: 50px!important;
}

.heading h1 {
    font-weight: 600;
}

html * {
    font-family: 'Titillium Web';
}

.divider {
    display: block;
    margin:15px 0px 15px 0px;
}

span.required {
    font-size: 14px;
    padding: 0px 0px 10px 5px;
}

p,h1,h2,h3 {
    font-family: 'Titillium Web';
}

.input_files {
    display: none;
}


.header {
    /*background-image: url(https://www.staaltjevakwerk.nl/wp-content/themes/staaltjevakwerk/images/nav_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
}

.header img {
    margin:15px;
}
#tableHeader, #show_first_row {
    display: none;
}

input.warning {
    border-color: #ff0000!important;
}

select.warning {
    border-color: #ff0000!important;
}

label {
    margin-top: 15px;
}



h3 {
    line-height: 30px;
    text-align: center;
}

.spacer {
    margin-top: 400px!important;
}

#drop_file_area {
    height: 230px;
    border: 4px dashed #f26726!important;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    background-image: url('../media/nav_bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.drag_over {
    color: #000;
    border: 4px dashed #f26726!important;
    background-color: #337ab7!important;
}

.thumbnail {
    width: 100px;
    height: 100px;
    padding: 2px;
    margin: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
}

#upload_file, input[type=file] {
    display: none!important;
}

.alert {
    background-color: #ffe0e0!important;
    border: 2px solid #FF0000!important;
    margin-top: 10px;
}


.warning {
    background-color: rgba(255, 168, 5, 0.71) !important;
    border: 2px solid #ffa700 !important;
    margin-top: 10px;
}



.melding_goedkeurenofferte {
    max-width: 80%;
    margin-top: 50px;
    margin-left: 10%;
    padding: 25px;
}


.uploadPdfByOrderConfirm {
    max-width: 80%;
    border-color: #ffa700!important;
    border-top: 0px;
    border-right: 2px;
    border-bottom: 2px;
    border-left: 2px;
    border-style: solid;
    margin-left: 10%;
    padding: 25px;
}

.success {
    background-color: #b6ffc9 !important;
    border: 2px solid #00af17 !important;
    margin-top: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.messageSent {
    margin-top: 25px!important;
}


.success p {
    margin:0!important;
}


#removeRow {
    text-align: right;
}

#removeRow span.glyphicon {
    font-size: 18px!important;
    color: #FF0000!important;
    padding:5px 6px 0px 0px!important;
}


.btn-success {
    color: #222222!important;
    background-color: #DDDDDD!important;
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.btn-particulier {
    border-right:1px #CCCCCC solid!important;
    border-left:0px!important;
    border-top:0px!important;
    border-bottom:0px!important;
    box-shadow: none!important;
}


.btn-bedrijf {
    border-right:1px #CCCCCC solid!important;
    border-left:0px!important;
    border-top:0px!important;
    border-bottom:0px!important;
    box-shadow: none!important;
}


.btn-particulier:hover {
    border-right:1px #222222 solid!important;
    border-left:0px!important;
    border-top:0px!important;
    border-bottom:0px!important;
    padding: 10px 55px 10px 55px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}


.btn-bedrijf:hover {
    border-right:1px #222222 solid!important;
    border-left:0px!important;
    border-top:0px!important;
    border-bottom:0px!important;
    padding: 10px 55px 10px 55px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}


.btn-particulier:active {
    box-shadow: none!important;
}


.btn-bedrijf:active {
   box-shadow: none!important;
}


input[type="button"] {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    border: 0px;
    padding: 15px 30px 15px 30px;
    margin-top: 25px;
}

.addMaterialToAll {
    padding: 6px 6px 6px 6px!important;
    margin-left: 10px;
}

.popupContainer {
    position: fixed;
    z-index: 999999;
    bottom: 0px;
    right: 50%;
    margin-right: -250px;
    width: 500px;
    background-color: #f5f5f5;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 25px;
    -webkit-box-shadow: -1px 1px 12px 3px rgb(0 0 0 / 28%);
    box-shadow: -1px 1px 12px 3px rgb(0 0 0 / 28%);
}


.popupContainer p {
    margin-bottom: 20px;
}

.addToAll {
    padding: 12px 25px 12px 25px!important;
    background-color: #5cb85c;
    margin-right: 14px;
}

.btnNew {
    background-color: #5cb85c;
    padding: 15px;
    color: #FFFFFF;
}

.outputBtnNew {
    margin-top: 25px!important;
}

.cancelToAll {
    padding: 12px 25px 12px 25px!important;
    background-color: #e2462c;
    margin-right: 14px;
}


select > option {
    padding:0px 25px 0px 25px!important;
}




.materialList {
    background-color: #265883;
    color: #FFFFFF;
    min-height: auto!important;
}


.materialList .dropdown-menu>li {
    padding: 5px 20px 5px 0px!important;
    border-bottom: 1px #f3f3f3 solid;
}

.materialList .dropdown-menu>li:hover {
    background-color: #cecece;
}

.materialList .dropdown-menu>li a:hover {
    background-color: #cecece;
}


.materialList .dropdown-menu>li:last-child{
    border-bottom:0px!important;
}

.materialListWarning {
    border: #FF0000 solid 2px!important;
}


.materialList .navbar-nav .nav-link {
    color: #FFFFFF!important;
    padding: 5px!important;
}

.materialList .titleThickness {
    padding: 8px 0px;
    display: block;
    font-weight: bold;
    text-align: center;
}



#main {
    font-size: 16px!important;
}

.pushMainToRight {
    margin-left: 250px;
}

.closebtn, .opennav_btn {
    display: none!important;
}

.dropdown-menu {
    border: 1px solid #ccc!important;
    border-radius: 4px!important;
    -webkit-box-shadow: 0 17px 26px rgb(0 0 0 / 39%)!important;
    min-width: 180px!important;
}


.nav-item .submenu {
    top: 2px!important;
}

.navbar {
margin-bottom: 0px!important;
}

@media all and (min-width: 992px) {
    .dropdown-menu li {
        position: relative;
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 96%;
        top: -7px;
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover {
        background-color: #f1f1f1
    }

    .dropdown-menu > li:hover > .submenu {
        display: block;
    }
}
    
@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu{
        margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
    }
}

.form-group, .input-group {
    margin-bottom: 10px!important;
}

.form-group input[type="text"], .input-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group select, .form-group textarea {
    min-height: 45px!important;
    background-color: rgba(0,0,0,.125)!important;
}


.register_container, .login_container {
    max-width: 400px;
    margin: auto;

}


.order_container {
    max-width: 700px;
    margin: auto;
    padding-bottom: 150px;

}


.user_header {
    background-image: url('../media/header_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.user_header img {
    margin: 25px 0px 25px 0px;
}


.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

a.btn-logout {
    /*background-color: #F00;*/
    color: #FFFFFF !important;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

a.btn-logout i.fa-power-off {
    color: #FFFFFF;
    margin-right: 9px;
    font-size: smaller;
    background-color: #FF0000;
    padding: 7px 7px 5px 7px;
    border-radius: 3px;
    display: inline-block;
}

.member_welcome {
    position: absolute;
    right: 20px;
    top: 150px;
}


.member_container_list_header,.order_container_list_header {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 50px!important;
}


.member_container {
    position: relative;
}

.member_container_list_header .edit, .member_container_list .edit,
.order_container_list_header .edit, .order_container_list .edit{
    text-align: right;
}
/*.edit {
    display: flex;
    justify-content: right;

}*/

.edit a i {
    padding: 4px 3px 0px 3px;
}

.member_container .btn-content {
    position: absolute;
    right: 0px;
    top: 0px;
}


.loginBtn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: auto;
}

.member_container .btn-content span.btn-icon, .loginBtn i {
    float: left;
    background: #222222;
    color: #FFFFFF;
    padding: 8px 9px 9px 15px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.member_container .btn-content span.btn-text, .loginBtn span {
    float: right;
    background: #3a82c0;
    color: #FFFFFF;
    padding: 5px 15px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    text-decoration: none!important;
}

.member_container .btn-content span.btn-text:hover {
    background: #25547b;
    text-decoration: none!important;
}

.member_container .btn-content span.btn-text a {
    color: #FFFFFF;
    text-decoration: none!important;
}


.order_item:hover {
    background-color: #c4c4c4 !important;
}

.order_container .order_container_list .order_detail_row {
    margin-left: 0px;
    border: 1px solid #999999;
    margin-bottom: 10px;
}

.order_container_list {
    padding-bottom: 4px;
    padding-top: 4px;
}

.order_container_list .downloadTab {
    background-color: #EEEEEE;
    border: 1px solid #666666;
    border-radius: 3px;
    padding: 5px 8px;
    color: #333333;
    margin-bottom: 15px;
    position: relative;
    font-size: 14px;
}

.order_container_list .downloadTab .button a {
      color: #FFFFFF;
}

.order_container_list .downloadTab .button a i {
    font-size: 14px;
}

.order_container_list .downloadTab .button {
    z-index: 999;
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: block;
    background-color: coral;
    color: #FFFFFF;
    padding: 7px 10px;
}

.order_container_list .downloadTab .button:hover {
    background-color: orange;
    color: #222222;
    padding: 7px 10px;
}

.order_container_list .downloadTab span.title {
    position: absolute;
    background-color: #337ab7;
    color: #FFFFFF!important;
    left: 0px;
    right: 0px;
    top: 0px;
    padding: 3px 5px;
    margin-bottom: 10px;
}

.order_container_list .downloadTab span.title a {
    color: #FFFFFF;
}

.order_container_list .downloadTab span.detail {
    font-size: 13px;
    display: block;
    margin-top: 5px;
}
.order_container_list .downloadTab span.detail span.subtitle {
    font-weight: 600;
}

.order_container_list .downloadTab span.acceptOffer a, .copyLinkOnedrive {
    background-color: #0ed176;
    color: #FFFFFF;
    padding: 5px 8px;
    display: inline-block;
    border-radius: 3px;
    font-size: 13px;
    border: 0px!important;
}

.order_container_list .downloadTab span.acceptOffer a:hover {
    background-color: #13b266;
    text-decoration: none;
}


.order_container_list .downloadTab span.rejectOffer a {
    background-color: #f3380f;
    color: #FFFFFF;
    padding: 5px 8px;
    display: inline-block;
    border-radius: 3px;
    font-size: 13px;
}

.order_container_list .downloadTab span.rejectOffer a:hover {
    background-color: #d53c1c;
    text-decoration: none;
}


@media print {

    .member_welcome, .opennav_btn, .sidenav, .order_container_list .downloadTab .button {
        display: none!important;
    }
    .sidenav {
        width:0px!important;
        margin-left: 0px!important;
    }
    #main {
        margin-left:0px!important;
    }
}

#spoedbestelling {
    display: none;
}

i.order_rush {
    color: #3a82c0!important;
}

.confirm_conditions {
    border: #a40514 1px dashed;
    margin-top: 20px!important;
    padding: 0px!important;
}

.searchField {
    position: absolute;
    top: 20px;
    right: 20px;
}

.btn-zoeken {
    background-image: url(../media/search-icon.png);
    border: medium none;
    cursor: pointer;
    height: 25px!important;
    margin-left: 10px;
    margin-top: 0px;
    width: 25px!important;
    /* display: block; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    float: right;
}

.orders_container {
    margin-top: 150px;
}

.admin_unseen {
    background-color: #d9d9d9;
    font-weight: 600;
}


.copyLinkOnedrive {
    margin-top: 10px;
}

.disabled {
    background-color: #5e5e5e!important;
}

.columnHide {
    display: none!important;
}


.order_container_list  .edit a, .order_container_list .edit button {
    float: left;
}


.smartselect {
    position: relative;
    margin: 0px -10px 0px 0px;
    float: right;
    display: block;
}
i.ss-caret {
    display: none;
}

.filterStatusContainer {
    margin-bottom: 65px;
    float: right;
}


.searchfieldAjaxContainer {
    float: left;
}

table {
    width: 100%;
}

th.vertical_text {

}

div.order_list_table {
    width: 80%;
    margin:0 auto;
}

th, td {
    border-right: 1px solid #989898!important;
    padding-left: 10px!important;
}

i.finished {
    color: #25547b!important;
}

i.closed {
    color: #1e1e1e !important;
}

i.fa-circle-check {
    color: #0e9d59;
}

i.fa-circle-xmark {
    color: #cc0213;
}

.mouseoverCaption {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;

}

.mouseoverCaption .tooltiptext {
    width: 450px;
    background-color: #313131;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 15px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    right: 125%!important;
    margin-right: 25px;
    top: -25px;

}

.col_comments {
    display: none;
}


.buttonConfirmOffer {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    border: 0px;
    padding: 15px 30px 15px 30px;
    margin-top: 25px;
    display: inline-block;
}

input.fileConfirmOffer {
    display: block!important;
}

.passant_reference_quote_container,
.passant_reference_order_container {
    display: none;
}


.formDraganddrop, .controlAndSend, .outputBtnNew, .messageSent {
    display: none;
}


.allOrders table td:nth-child(2) {
    width: 120px;
}

.allOrders table td:nth-child(3) {
    width: 100px;
}

td.status_6_purple > i.fa-circle-check {
    color: #ce00ff;
    border: 3px solid #FFFFFF;
    border-radius: 11px;
}