/* MAIN CSS ***********************************************************************************************************************************************/ /* Include font */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;1000&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;900&display=swap'); body {margin: 0px;padding: 0px;box-sizing: border-box;font-family: var(--font1);background-color: #f8f8f8 !important;line-height: normal !important;} * {margin: 0px;padding: 0px;box-sizing: border-box;} :root { --primary: #2c62ff; --secundary: #32aeff; --blue: #688fff; --green: #29c998; --yellow: #fcb41b; --red: #ff5d5c; --input: #e7f0fe; --title: #6e6e6e; --theme: #6d181f; --bg-color: #f8f8f8; --second: #ef305e; --bg_blocks: #f8f9fa; --text_dark: #252f4a; --boxshadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --font1: 'Nunito', sans-serif; --font2: 'Roboto', sans-serif; } html { touch-action: manipulation; } /* Input animaties */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], textarea, select {outline: none;font-family: var(--font1) !important;} /* input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, input[type=datetime-local]:focus, textarea:focus, select:focus {box-shadow: 0 0 5px var(--primary); outline: none;} */ .invalid {transition: all 0.3s ease-in-out;border: 1px solid var(--theme) !important;box-shadow: 0 0 5px var(--theme);} .error_reporting {color: red;} .container_logo_left_top { position: absolute; top: -10px; left: -10px; width: 100px;} .container_logo_right_bottom { position: fixed; bottom: -10px; right: -10px; width: 100px;} /* Trusting browser */ .main_trusting_browser { display: flex; justify-content: center; align-items: center; object-fit: cover; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(109%2c 24%2c 31%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c402.052C81.739%2c388.157%2c165.115%2c407.173%2c242.43%2c377.228C332.289%2c342.424%2c430.773%2c302.444%2c476.367%2c217.549C522.559%2c131.541%2c495.394%2c27.401%2c482.264%2c-69.339C469.035%2c-166.807%2c460.611%2c-269.118%2c399.818%2c-346.444C337.746%2c-425.397%2c242.812%2c-470.517%2c145.962%2c-497.099C50.274%2c-523.362%2c-51.272%2c-526.692%2c-145.688%2c-496.168C-238.632%2c-466.12%2c-327.888%2c-411.423%2c-378.141%2c-327.661C-425.513%2c-248.7%2c-403.624%2c-150.653%2c-408.155%2c-58.684C-412.222%2c23.87%2c-419.655%2c103.177%2c-403.361%2c184.209C-383.036%2c285.288%2c-392.612%2c420.765%2c-301.895%2c469.759C-209.276%2c519.78%2c-103.774%2c419.693%2c0%2c402.052' fill='%23571319'%3e%3c/path%3e%3cpath d='M1440 1106.124C1556.617 1129.6570000000002 1688.318 1166.396 1789.6689999999999 1104.096 1891.128 1041.729 1911.366 905.534 1949.737 792.789 1984.598 690.358 2002.676 587.346 2002.3600000000001 479.145 2001.999 355.557 2039.769 202.54199999999997 1947.774 120.012 1853.4479999999999 35.39099999999996 1702.152 109.09699999999998 1576.04 96.68900000000002 1478.812 87.12299999999999 1387.649 36.26599999999996 1291.859 55.476999999999975 1191.5149999999999 75.60199999999998 1111.959 142.836 1031.376 205.925 933.106 282.862 787.348 340.077 770.408 463.727 753.45 587.507 875.735 684.016 952.356 782.6990000000001 1013.629 861.615 1087.354 923.947 1170.616 979.1700000000001 1255.052 1035.171 1340.683 1086.0819999999999 1440 1106.124' fill='%23831d25'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); width: 100%; height: 100vh;} .main_trusting_browser_inner { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fff; text-align: center; box-shadow: var(--boxshadow); width: 100%; max-width: 1200px; margin: 0 20px; padding: 20px; border-radius: 10px; color: var(--theme); font-size: 20px; font-family: var(--font2); font-weight: 600;} .main_trusting_browser_inner button { background-color: var(--primary); padding: 10px 20px; margin-top: 20px; font-size: 25px; border-radius: 10px; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} /* button { background-color: var(--primary); padding: 10px 20px; font-size: 18px; border-radius: 10px; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} button:hover { background-color: #2c61ffce; transition: all 0.3s ease-in-out;} */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .main { margin-left: 230px; margin-top: 80px; margin-right: 30px; margin-bottom: 30px;} /* Headers from pages */ .page_header { display: flex; justify-content: center; align-items: center; width: 100%; border-bottom: 1px solid rgba(83, 82, 82, 0.35);} .page_header_inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%;} .page_header_inner h1 { font-size: 30px;font-weight: 600;font-family: var(--font2);margin-bottom: 10px; color: #071437;} .page_header_inner h1 small { font-size: 16px;font-weight: 400;font-style: italic; color: #071437;} .breadcrumb{align-items: center !important;} .page_header_inner .breadcrumb a {font-size: 15px;text-decoration: none;color: inherit;} .page_header_inner .breadcrumb .active {color: #ef305e;font-weight: bold;} /* Datatables frame */ .datatables_frame {display: flex;justify-content: center;align-items: flex-start;flex-direction: column;width: 100%;background-color: #fff;padding: 20px;border-radius: 10px;} .datatables_frame i {padding-right: 5px;color: #6d181f5a;} .datatables_frame h1 {font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 30px;} .datatables_frame_inner { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%;} .datatables_frame_inner .edit { color: var(--primary); cursor: pointer;} .datatables_frame_inner .delete { color: var(--red);} .datatables_frame_inner a { text-decoration: none; cursor: pointer;} .dataTables_scrollHeadInner { width: 100% !important;} table.display .dataTable .no-footer { width: 100% !important;} .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody > table { width: 100% !important;} /* Overwrite sweetalert style */ .swal2-styled.swal2-default-outline:focus { box-shadow: none !important;} .swal2-styled.swal2-confirm { background-color: var(--red) !important;} .swal2-styled.swal2-confirm:focus { box-shadow: none !important;} .swal2-icon.swal2-warning { border-color: var(--red) !important; color: var(--red) !important;} @media only screen and (max-width: 570px) { .page_header_inner h1 { font-size: 20px;} .page_header_inner .breadcrumb a{font-size: 12px;} div.dataTables_wrapper div.dataTables_filter input { font-size: 12px !important; height: 30px !important;} div.dataTables_wrapper div.dataTables_filter label {font-size: 12px !important;} div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {font-size: 8px;} div.dataTables_wrapper {font-size: 12px;} table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {padding: 10px !important;} } /* Global top page button */ .global_add_button { display: flex;justify-content: center;align-items: center;width: 100%;} .global_add_button_inner { display: flex; justify-content: flex-end; align-items: center; width: 100%;} /* Zoeken */ .search_results { position: absolute; display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 605px;} .search_results_inner { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; padding: 20px; width: 100%; margin-top: 5px; background-color: #fff; box-shadow: var(--boxshadow); border-radius: 0 0 15px 15px; overflow: scroll; max-height: 80vh; z-index: 1;} .search_results_inner i {color: var(--primary);} .search_results_inner h4 {font-family: var(--font2);color: var(--second);margin: 5px 0;} .search_results_inner a {width: 100%;text-decoration: none;color: inherit;} .search_results_inner span {transition: all 0.1s ease-in-out;padding: 5px;border-radius: 5px;cursor: pointer;background: #f8f9f9;margin: 3px 0;width: 100%;} .search_results_inner span:hover {transition: all 0.1s ease-in-out;background-color: #6d181f5a;} .search_results_inner .search_item {color: var(--primary); margin: 5px 0;cursor: pointer;background-color: #e9e9e9;border-radius: 5px;padding: 5px;width: 100%;} @media only screen and (max-width: 950px) { .search_results_inner { max-width: 400px;} } @media only screen and (max-width: 750px) { .search_results_inner {max-width: 300px;} } @media only screen and (max-width: 600px) { .search_results_inner {max-width: 250px;} } @media only screen and (max-width: 400px) { .search_results_inner {max-width: 150px;} } /* flashmessage */ #flashmessage { display: flex; position: fixed; bottom: 20px; right: 20px; font-size: 15px; font-family: var(--font1); color: #fff !important; padding: 20px; border-radius: 10px; z-index: 999999999;} #flashmessage i { margin-top: 3px;} .flashmessage { display: flex; position: fixed; bottom: 20px; right: 20px; font-size: 15px; font-family: var(--font1); color: #fff !important; padding: 20px; border-radius: 10px; z-index: 999999999; width: 300px;} .flashmessage i { margin-top: 3px;padding-right: 5px;} .flash_error {background-color: var(--red);} .flash_info {background-color: var(--blue);} .flash_success {background-color: var(--green);color: #fff;} .flash_warning {background-color: var(--yellow);} @media only screen and (max-width: 850px) { .page_header_inner {flex-direction: column;align-items: flex-start;} button {padding: 10px;font-size: 14px;} .change_role {font-size: 14px; padding: 8px !important;} } @media only screen and (max-width: 600px) { button {padding: 10px;font-size: 14px;} .global_add_button_inner{flex-direction: column; align-items: flex-end;} } @media only screen and (max-width: 650px) { .container_logo_left_top { display: none;} .main {margin-left: 70px; margin-right: 10px;} } /* Loader */ .loader_img_upload { width: 60px;} /* Bigmodal */ h4 {font-size: 18px !important;margin-bottom: 0px !important;} .workplace_modal { display: flex; justify-content: center; align-items: center; width: 100%;} .workplace_modal_inner { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; max-width: 100%; min-height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;} .workplace_modal_block { display: flex; justify-content: center; align-items: center; width: 100%;} .workplace_modal_block_inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 1200px; padding: 20px; margin: 20px; background-color: #fff; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} .workplace_modal_block_inner img { width: 200px;} .workplace_modal_block_inner h1 { font-family: var(--font2); margin-top: 20px; font-size: 25px; letter-spacing: 1px;} .workplace_modal_block_inner p { text-align: center; margin-bottom: 10px;} .modal { padding-top: 0px !important;} .modal-header { background-color: #6d181f5b;} .modal-header .btn_close_the_modal{color: #fff; margin: 0 10px; font-size: 28px;} .modal-header { background-color: #831d25;} .modal-title { color: #fff;} .modal-body h5 { color: #071437; margin-bottom: 0rem;} .model_body_top {display: flex;align-items: center;justify-content: center;width: 100%;} .model_body_top_inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .model_body_top_inner div { width: 23%;} .model-body .textblock { margin: 10px 0;} .modal .block_modal { display: flex; justify-content: flex-start; align-items: center; width: 100%;} .modal .block_modal_inner { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; background-color: #e9e9e9; padding: 10px; border-radius: 5px; max-width: 100%;} .modal .block_modal_inner h4{color: #071437;font-weight: 600; font-size: 16px !important;} .modal .block_modal_inner small{color: #071437;font-weight: 400; font-size: 14px !important;} .modal .block_modal_inner p{color: #464f69;font-size: 14px;font-weight: 300;} .block_modal_inner .modal_inner_between { display: flex; justify-content: center; align-items: center; width: 100%;} .block_modal_inner .modal_inner_between_inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%;} .block_modal_inner .modal_inner_between_inner img { width: 60px; height: 60px; margin: 20px; object-fit: contain;} .block_modal_inner .modal_inner_between_inner textarea {padding: 10px 10px;} .block_modal_inner .modal_inner_between_inner .modal_inner_between_inner_item { padding: 15px; border-radius: 5px; margin-left: 20px; background-color: #fff; color: var(--primary); cursor: pointer;} /*.modal .block_modal_inner p { margin-top: 3px;}*/ .delivery_done_submit { height: 120px; padding-bottom: 40px;} .wich_delivery_finish { display: flex; justify-content: center; align-items: center; width: 100%; z-index: 99999;} .wich_delivery_finish_inner { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 900px; padding: 10px 20px; margin: 0 10px;} .wich_delivery_finish_inner h3 { font-size: 22px;} .wich_delivery_finish_inner .item { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; background-color: #831d252c; border-radius: 8px; margin-bottom: 10px; padding: 10px;} .wich_delivery_finish_inner .item_inner { display: flex; justify-content: center; align-items: flex-start; flex-direction: row; width: 100%; max-width: 1200px;} .wich_delivery_finish_inner .item_inner i { padding-left: 5px; font-weight: bold;} .wich_delivery_finish_inner .btn_group { display: flex; justify-content: center; align-items: center; margin-top: 10px; width: 100%;} .wich_delivery_finish_inner .btn_group button { margin-right: 10px;} @media only screen and (max-width: 1000px) { .model_body_top_inner div { width: 48%;} } @media only screen and (max-width: 600px) { .model_body_top_inner div { width: 100%;} } .workplace_modal_block_inner form {display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;} /* Wisselmodes */ .change_role {text-decoration: none;color: #fff; background-color: var(--second);padding: 10px;border-radius: 10px; margin-top: 5px;} /* Filtering */ .filterbox {display: flex;justify-content: center;align-items: center;width: 100%;margin: 10px 0;} .filterbox_inner {display: flex;justify-content: flex-start;align-items: center;width: 100%;max-width: 100%;} .filterbox_inner label {padding: 0 15px 0 5px;} /* Main Loader */ /* Main Loader */ .main_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #2f2f2f45; z-index: 9999; display: flex; justify-content: center; align-items: center;} /* Stijlen voor de laad-animatie */ .main_loader { position: relative; width: 100px; height: 100px; border-radius: 50%; animation: rotate 1.5s infinite ease-in-out; box-shadow: 0px 0px 0px 20px var(--theme);} .main_loader::before { content: ''; position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; border-radius: 50%; animation: pulse 1.5s infinite ease-in-out; box-shadow: 0px 0px 0px 5px var(--theme);} /* Animatie voor de laad-animatie */ @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes pulse { 0% { transform: scale(0.8);} 50% {transform: scale(1.2);} 100% {transform: scale(0.8);} } /* Toggle */ .switch { position: relative; display: inline-block; width: 40px; height: 26px;} .switch input { opacity: 0; width: 0; height: 0;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 20px;} .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 20px;} input:checked + .slider { background-color: var(--second);} input:focus + .slider {box-shadow: 0 0 1px var(--second);} input:checked + .slider:before {-webkit-transform: translateX(14px);-ms-transform: translateX(14px);transform: translateX(14px);} /* Rounded sliders */ .slider.round { border-radius: 34px;} .slider.round:before {border-radius: 50%;} .modal-header {background-color: #831d25;} .modal-title {color: #fff;} .modal .block_modal_inner {background-color: #f8f8f8;} /* select, textarea {border: none;width: 100%;height: 50px;border-radius: 10px;padding: 10px;margin: 10px 0;background-color: #fff;} */ /* button {border-radius: 10px;} */ .danger {background-color: var(--red);margin-top: 20px;} /* button {margin: 5px 0 0 5px;} */ :popover-open {width: 500px;height: 200px;padding: 15px;border-radius: 10px;margin: auto;border: none;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} :popover-open p{line-height: 1.5;} ::backdrop {backdrop-filter: blur(3px);} /* popover */ .tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;} .tooltip .tooltiptext { visibility: hidden; width: 250px; background-color: black;color: #fff;text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 999999; bottom: 100%; left: 50%; margin-left: -60px;} .tooltip:hover .tooltiptext { visibility: visible;} /* NAVIGATION ***********************************************************************************************************************************************/ /* sidebar */ .set_sidebar_fixed{ position: fixed; top: 60px; left: 0; width: 200px; z-index: 1;} .sidebar{ position: fixed; display: flex; justify-content: center; align-items: flex-start; height: 100vh; width: 200px; background-color: #fff; transition: all 0.3s ease-in-out; margin-top: -10px; font-weight: 500; font-family: var(--font2);} .sidebar_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; height: calc(100vh - 60px); margin-top: 5px;} .sidebar_inner a{text-decoration: none;} .sidebar_inner .bottom a{ display: flex; text-decoration: none; color: inherit; width: 100%; justify-content: space-between; align-items: center;} .sidebar_inner .bottom{ display: flex; justify-content: flex-start; align-items: center; width: 100%;} .sidebar_inner .bottom i{ padding-left: 10px;} .sidebar_inner .bottom .item_bottom{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding: 10px; margin: 5px 10px; border-radius: 10px; color: #9D9DA6; transition: all 0.1s ease-in-out; cursor: pointer; font-size: 16px;} .sidebar_inner .item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; width: 100%; padding: 12px 10px; font-size: 16px; color: #767676; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5px solid #fff;} .sidebar_inner .top{width: 100%; height: 100vh; overflow-y: scroll;} .sidebar_inner ::-webkit-scrollbar { display: none !important; } .sidebar_inner .top .top_impersonating{display: flex; justify-content: flex-start; align-items: center; flex-direction: column; position: absolute; overflow-y: scroll; height: 80vh; left: 210px; bottom: 50px; width: 250px; padding: 10px; border-radius: 5px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .sidebar_inner .top .top_impersonating .top_impersonating_item{display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 5px; padding: 5px; border-radius: 5px;} .sidebar_inner .top .top_impersonating .top_impersonating_item:hover{background-color: #cccccc;} .sidebar_inner .top .top_impersonating .top_impersonating_item img{width: 20px; height: 20px; border-radius: 50%; margin-right: 10px;} .sidebar_inner .top .top_impersonating .top_impersonating_item p{font-size: 12px; color: var(--text_dark);} .sidebar_inner .top .top_impersonating .top_impersonating_item small{font-size: 10px; color: var(--text_dark); margin-left: 5px;} .sidebar_inner .item a{ display: flex; justify-content: flex-start; color: inherit;} .sidebar_inner .item i{ display: flex; padding-right: 30px; padding-left: 15px; width: 20%;} .sidebar_inner .item:hover{ color: #6d181f; transition: all 0.1s ease-in-out; border-left: 5px solid #6d181f; background-color: #f8f8f8;} .sidebar_inner .top .active{ border-left: 5px solid #6d181f; color: #6d181f; background-color: #f8f8f8;} .sidebar_inner .item i.active{ color: #6d181f; border-left: 0px solid #6d181f;} /* topbar */ .set_topbar_fixed{ position: fixed; top: 0; left: 0; z-index: 2; width: 100%;} .topbar{ display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; height: 50px;} .topbar_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%; max-width: 100%;} .topbar_inner .item{ display: flex; justify-content: center; align-items: center; flex-direction: row;} .topbar_inner .message{ color: var(--second); padding: 10px; margin-right: 20px; border-radius: 10px; font-size: 20px; cursor: pointer;} .topbar_inner .message_count{ position: relative; top: -10px; right: 8px; font-size: 10px; color: var(--green); animation: message_color 2s infinite;} @keyframes message_color { 0% {color: var(--theme);} 25% {color: var(--green);} 50% {color: var(--theme);} 75% {color: var(--green);} 100% {color: var(--theme);} } .topbar_inner .logout a{ display: flex; justify-content: center; align-items: center; flex-direction: row; text-decoration: none; color: #fff;} .topbar_inner .logout i{ padding-right: 5px;} .topbar_inner img.sidebar_logo{display: block;width: 200px;height: 50px;padding-right: 5px;object-fit: contain;} .sidebar_logo_mobile{display: none;width: 60px;height: 50px;padding-right: 5px;object-fit: contain;box-shadow: 0px 0 5px -2px #000000d9;} .topbar_inner form button{ background-color: #fafafa; box-shadow: none !important; padding: 5px 10px 7px 10px; margin-left: -50px; font-size: 16px; border-radius: 10px; margin-top: 1px; border: none; color: #6d181f33; cursor: pointer; transition: all 0.3s ease-in-out;} .topbar_inner form input{ width: 600px; border: none; height: 40px; border-radius: 28px; padding: 10px; background-color: #fafafa;} .topbar_inner form input:focus{ box-shadow: 0 0 2px var(--primary) !important;} /* footer */ .footer{ display: flex; justify-content: center; align-items: center; width: 100%;} .footer_inner{ display: flex; justify-content: flex-end; align-items: center; width: 100%; max-width: 100%; padding: 20px; color: rgb(164, 160, 160);} /* rightbar */ .set_rightbar_fixed{ display: none; position: fixed; top: 40px; right: 0px; width: 400px; margin-right: 30px; background-color: #fff; border-radius: 10px; box-shadow: rgba(11, 11, 12, 0.201) 0px 8px 12px; margin: 20px; height: 91vh; transition: all 0.3s ease-in-out; z-index: 9;} .rightbar{ display: none; justify-content: flex-start; align-items: flex-start; margin: 20px; height: 91vh; transition: all 0.3s ease-in-out;} i.close_rightbar{ position: absolute; top: 20px; right: 20px; color: var(--second); font-size: 25px; cursor: pointer; transition: all 0.3s ease-in-out;} i.close_rightbar:hover{ color: #983b43be; transition: all 0.3s ease-in-out;} .rightbar_inner{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: 360px; padding: 0 20px; margin-top: 20px;} .rightbar_inner .item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .rightbar_inner i{ padding-right: 5px; margin-top: 2px; color: #6d181f5a; font-size: 20px;} .rightbar_inner h1{ font-family: var(--font2); font-weight: 600; color: var(--second); font-size: 20px; margin-bottom: 20px;} /* Responsive */ @media only screen and (max-width: 950px) { .topbar_inner form input{ width: 400px;} } @media only screen and (max-width: 750px) { .topbar_inner form input{width: 300px;} } @media only screen and (max-width: 700px) { .topbar_inner .logout p{display: none;} .topbar_inner .logout i{padding-right: 0px;} } @media only screen and (max-width: 650px) { .sidebar { width: 60px;} .sidebar_inner .top .top_impersonating{left: 70px;} .sidebar_inner .top .top_impersonating p{display: block;} .sidebar_inner .top p{display: none;} .sidebar_inner .item i{width: 0px;} .sidebar_inner .item{padding: 8px 0px;} .topbar_inner img.sidebar_logo{display: none;} .sidebar_logo_mobile{display: block;} .sidebar_inner .bottom .item_bottom p{display: none;} .sidebar_inner .bottom .item_bottom i{padding-left: 0px;} .footer_inner{font-size: 12px;} } @media only screen and (max-width: 600px) { .topbar_inner form input {width: 250px;} } @media only screen and (max-width: 500px) { .set_rightbar_fixed{width: 250px;} } @media only screen and (max-width: 400px) { .topbar_inner form input {width: 150px;} } /* AUTHENTICATIE ***********************************************************************************************************************************************/ .container_login{ display: flex; justify-content: center; align-items: center; object-fit: cover; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(109%2c 24%2c 31%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c402.052C81.739%2c388.157%2c165.115%2c407.173%2c242.43%2c377.228C332.289%2c342.424%2c430.773%2c302.444%2c476.367%2c217.549C522.559%2c131.541%2c495.394%2c27.401%2c482.264%2c-69.339C469.035%2c-166.807%2c460.611%2c-269.118%2c399.818%2c-346.444C337.746%2c-425.397%2c242.812%2c-470.517%2c145.962%2c-497.099C50.274%2c-523.362%2c-51.272%2c-526.692%2c-145.688%2c-496.168C-238.632%2c-466.12%2c-327.888%2c-411.423%2c-378.141%2c-327.661C-425.513%2c-248.7%2c-403.624%2c-150.653%2c-408.155%2c-58.684C-412.222%2c23.87%2c-419.655%2c103.177%2c-403.361%2c184.209C-383.036%2c285.288%2c-392.612%2c420.765%2c-301.895%2c469.759C-209.276%2c519.78%2c-103.774%2c419.693%2c0%2c402.052' fill='%23571319'%3e%3c/path%3e%3cpath d='M1440 1106.124C1556.617 1129.6570000000002 1688.318 1166.396 1789.6689999999999 1104.096 1891.128 1041.729 1911.366 905.534 1949.737 792.789 1984.598 690.358 2002.676 587.346 2002.3600000000001 479.145 2001.999 355.557 2039.769 202.54199999999997 1947.774 120.012 1853.4479999999999 35.39099999999996 1702.152 109.09699999999998 1576.04 96.68900000000002 1478.812 87.12299999999999 1387.649 36.26599999999996 1291.859 55.476999999999975 1191.5149999999999 75.60199999999998 1111.959 142.836 1031.376 205.925 933.106 282.862 787.348 340.077 770.408 463.727 753.45 587.507 875.735 684.016 952.356 782.6990000000001 1013.629 861.615 1087.354 923.947 1170.616 979.1700000000001 1255.052 1035.171 1340.683 1086.0819999999999 1440 1106.124' fill='%23831d25'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); width: 100%; height: 100vh;} .container_login_mobile{display: none;} .container_login_mobile_blob{display: none;} .container_login_inner{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; background-color: #fff; width: 100%; max-width: 800px; padding: 50px; border-radius: 30px; margin: 0 20px;} .container_login_inner form{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%;} .container_login_inner h1{ margin-bottom: 20px; color: rgba(0, 0, 0, 0.828); font-family: var(--font2); font-size: 25px;} .container_login_inner input{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 10px 0; background-color: var(--input);} .container_login_inner label{font-weight: bold;} .container_login_password_forgot{ display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; color: var(--title); margin-bottom: 20px;} .container_button{ display: flex; justify-content: flex-end; align-items: flex-end; width: 100%;} /* .container_login_inner button{ background-color: var(--blue); padding: 10px 40px; font-size: 25px; border-radius: 30px; margin-top: 20px;border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} .container_login_inner button:hover{ transition: all 0.3s ease-in-out; background-color: var(--primary);} */ /* Pincode */ .container_login_pincode{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%;} .container_login_pincode_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%; max-width: 800px;} .container_login_pincode_inner input {border-radius: 10px;height: 100px;font-size: 35px;text-align: center;color: var(--title); -webkit-appearance: none;} /* Responsive */ @media only screen and (max-width: 650px) { .container_login{background-image: none;} .container_login_logo{display: none;} .container_login_mobile_blob{ display: block; position: absolute; left: -50px; top: -10px; z-index: -9; width: 200px;} .container_login_mobile{ position: absolute; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; object-fit: cover; bottom: 0; right: 0; width: 100%; height: 350px; z-index: -9;} .container_login h1{ margin: 15px 0 15px 0;} .container_login_inner form{ align-items: center;} .container_login_inner form label{display: none;} .container_login_inner input{ background-color: #f5f3f4;margin: 20px 0;} .container_button{justify-content: center;margin-top: 20px;} } @media only screen and (max-width: 500px) { .container_login_pincode_inner input{height: 60px;font-size: 20px;padding: 5px;} .container_login_inner{padding: 20px;} } /* DRIVER ***********************************************************************************************************************************************/ .driver_right_top{ position: absolute; right: 0px; top: 0px;} /* .driver_right_top p{ padding: 10px; background-image: linear-gradient(to right, #983b43 , #ad5f66); border-radius: 0 0 0 10px; color: #fff;} */ .driver_right_top p{ padding: 10px; background: var(--second); color: #fff;} .driver_right_top a{ color: inherit; text-decoration: none;} .driver_right_top a:hover{ color: inherit; text-decoration: none;} /* Footer Navbar */ .driver_navbar{ position: fixed; bottom: -5px; display: flex; justify-content: center; align-items: center; width: 100%; background-color: rgb(239, 237, 237); height: 80px; border-radius: 30px 30px 0 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; z-index: 1;} .driver_navbar p{ margin-bottom: 0px;} .driver_navbar_inner{ display: flex; justify-content: space-around; align-items: center; width: 100%; max-width: 100%; padding: 0 20px;} .driver_navbar_inner a{ display: flex; justify-content: center; align-items: center; flex-direction: row; text-decoration: none; color: inherit;} .driver_navbar_inner a:hover{ color: inherit;} .driver_navbar_inner i{ padding: 10px; font-size: 30px; color: var(--theme);} .driver_navbar_inner_dot{ display: flex; justify-content: center; align-items: center; width: 100%;} .driver_navbar_inner_dot_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 990px;} .driver_navbar_inner i.fa-circle{ font-size: 5px; margin-bottom: -50px;} .driver_navbar_inner_dot_inner .active{ margin-top: -15px; margin-bottom: -5px; display: block;} .non-active{ display: none;} .driver_add_icon{ position: fixed; bottom: 24px; left: 47%; display: flex; justify-content: center; align-items: center; z-index: 2;} .driver_add_icon_inner{ display: flex; justify-content: center; align-items: center;} .driver_add_icon_inner .itemAdd{ font-size: 70px; color: var(--theme);} .driver_add_icon_inner .itemAdd a{ text-decoration: none; color: inherit;} /* Responsive navbar*/ @media only screen and (max-width: 900px) { .driver_navbar_inner p{ display: none;} } @media only screen and (max-width: 550px) { .driver_add_icon{ bottom: 28px;} .driver_add_icon_inner .itemAdd{ font-size: 40px;} .driver_navbar_inner i{ font-size: 25px;} .driver_navbar{ height: 60px;} .driver_navbar_inner_dot{ margin-bottom: 15px;} .driver_navbar{ height: 70px;} .driver_navbar_inner{ padding: 0px;} } @media only screen and (max-width: 450px) { .driver_add_icon{ left: 45%; bottom: 40px;} } @media only screen and (max-width: 370px) { .driver_add_icon{ left: 44%;} } /* Header */ .driver_title{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 30px 0 20px 0; padding: 20px 0;} .driver_title_inner{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 990px; padding: 0 20px;} .driver_title_inner h1{ font-family: var(--font2); font-weight: 700; font-size: 40px; color: #11101c;} .driver_title_inner p{ margin-top: 20px;} /* Mainblock Header */ .driver_mainblock{ display: flex; justify-content: center; align-items: center; width: 100%;} .driver_mainblock_inner{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 950px; background-color: var(--primary); border-radius: 10px; padding: 20px; margin: 0 20px; color: rgba(255, 255, 255, 0.812); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px} .driver_mainblock_inner h1{ color: #fff; font-size: 24px;} .driver_mainblock_inner i{ font-size: 20px;} .driver_mainblock_inner hr{ width: 100%; height: 2px; margin: 10px 0; border-radius: 10px;} @media only screen and (max-width: 800px) { .driver_mainblock_inner h1{font-size: 20px;} .driver_mainblock_inner i{font-size: 18px;} } @media only screen and (max-width: 500px) { .driver_mainblock_inner h1{ font-size: 18px;} .driver_mainblock_inner i{font-size: 17px;} .driver_title_inner h1{font-size: 25px; margin-top: 20px;} } /* Days calender */ .driver_days{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0 0 0;} .driver_days_inner{ display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 990px;} .driver_days_inner .block{ padding: 5px 10px; font-size: 15px; border: none; color: var(--title); background-color: #fff; border-radius: 10px 10px 0 0; margin: 5px 2px 0px 0; cursor: pointer; transition: all 0.3s ease-in-out;} /* Responsive drive_days */ @media only screen and (max-width: 500px) { .driver_days_inner .block{ font-size: 13px; padding: 5px 5px;} } /* Activity */ .driver_activity{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 0 20px 0;} .driver_activity_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 950px; padding: 20px; margin: 10px 0; background-color: #fff; border-radius: 0 10px 10px 10px; margin: 0 20px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 10px} .driver_activity_inner .block{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin: 10px; padding: 20px; background-color: #ebecef; border-radius: 5p; border-radius: 5px;} .driver_activity_inner .block .block_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%;} .driver_activity_inner .block .block_inner b{font-weight: 400; font-size: .775rem; color: #344767;} .driver_activity_inner .block .block_inner small{font-size: .775rem; font-weight: 600; color: #41577d; margin-bottom: 2px;} .driver_activity_inner .block .block_inner a{ text-decoration: none; color: inherit; cursor: pointer} .driver_activity_inner .block .block_inner .center{ display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: var(--font2); width: 100%; border-radius: 10px; background-color: #fff; font-size: 15px !important; padding: 10px; margin-top: 10px; font-weight: 600;} .driver_activity_inner .block .block_inner .center p{text-align: center; margin-bottom: 0px;} .driver_activity_inner .block .block_inner .center .line_between{height: 1px; width: 100%; margin: 10px 0; background-color: var(--second);} .driver_activity_inner .block .block_inner .bottom{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0;} .driver_activity_inner .block .block_inner .bottom_inner{ display: flex; justify-content: space-evenly; align-items: center; width: 100%; max-width: 100%;} .driver_activity_inner .block .block_inner .bottom_inner .circle{ background-color: #09767e; color: #fff; padding: 20px; font-size: 30px; border-radius: 50%; width: 75px; height: 75px; text-align: center;} .driver_activity_inner .block .block_inner .bottom_inner .non_active{ background-color: #09767e9e; color: #fff; padding: 20px; font-size: 30px; border-radius: 50%; width: 75px; height: 75px; text-align: center; cursor: not-allowed;} .driver_activity_inner .block h1{ font-family: var(--font2); font-weight: 700; font-size: 25px; color: #11101c;} .driver_activity_inner .block button{ background-color: var(--yellow); padding: 10px 20px; font-size: 25px; border-radius: 10px; margin: 5px 5px 0 0; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} /* Responsive activity */ @media only screen and (max-width: 750px) { .driver_activity_inner .block .block_inner .right{ flex-direction: column;} .driver_activity_inner .block h1{font-size: 25px;} /* .driver_activity_inner .block button{ font-size: 20px;} */ } @media only screen and (max-width: 650px) { .driver_activity_inner .block h1{ font-size: 18px;} } /* Bokken */ .driver_bokken_search{ display: flex; justify-content: center; align-items: center; width: 100%;} .driver_bokken_search_inner{ display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%; max-width: 990px; padding: 20px; margin: 0 20px; background-color: var(--primary); border-radius: 10px;} .driver_bokken_search_inner form{ display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%;} /* .driver_bokken_search_inner form button{ background-color: var(--primary); padding: 10px 20px; margin-left: 20px; font-size: 25px; border-radius: 10px; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} */ .driver_bokken_search_inner form input{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 10px 0; background-color: var(--input);} .driver_bokken{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 40px 0;} .driver_bokken_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: auto; white-space: nowrap; background-color: #fff; width: 100%; max-width: 990px; margin: 0 20px; padding: 20px; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;} .driver_bokken_inner .block{ display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%;} .driver_bokken_inner .block_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%;} .driver_bokken_inner .block_inner p{ padding: 10px 20px;} .driver_bokken_inner .underline{ height: 2px; width: 100%; background-color: var(--input); margin: 5px 0;} /* Profile */ .driver_profile{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 60px 0;} .driver_profile_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 990px; padding: 20px; margin: 10px 20px 0 20px; background-color: #fff; border-radius: 10px; box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;} .driver_profile_inner h1{ font-family: var(--font2); font-weight: 700; font-size: 25px; color: #11101c; margin-bottom: 20px;} .driver_profile_inner form{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .driver_profile_inner form input{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 10px 0; background-color: var(--input);} .container_button_profile{display: flex; justify-content: flex-end; align-items: flex-end; width: 100%;} /* .driver_profile_inner form button{ background-color: var(--primary); padding: 10px 20px; font-size: 25px; border-radius: 10px; margin: 5px 5px 0 0; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #688eff9c 0px 2px 8px 0px;} */ .driver_logout{ display: flex; justify-content: center; align-items: center; width: 100%;} .driver_logout_inner{ display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 990px; margin: 0 20px;} /* .driver_logout_inner button{ background-color: var(--red); padding: 10px 20px; font-size: 18px; border-radius: 10px; margin: 5px 5px 0 0; border: none; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: #ff5c5c87 0px 2px 8px 0px;} */ /* DROPDOWNSEARCH ************************************************************************************************************************************************/ #myInput { width: 100%; box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; padding: 10px 10px 12px 10px; border: none; border-bottom: 1px solid #ddd;} #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative;} .dropdown-content { background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; border-radius: 4px;} .dropdown_search_item{ position: absolute; background-color: #e9e9e9; width: 100%; max-height: 350px; overflow-y: scroll; border-bottom: 1px solid var(--theme); border-left: 1px solid var(--theme); border-right: 1px solid var(--theme); border-radius: 0px 0px 10px 10px;} .dropdown-content a { cursor: pointer; color: black; padding: 12px 16px; text-decoration: none; display: block;} .dropdown a:hover {background-color: #ddd;} .show {display: block;} /* FORMS ************************************************************************************************************************************************/ .form{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; margin: 20px 0; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: var(--boxshadow);} .form i{ padding-right: 5px; color: #6d181f5a;} .form h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 10px;} .form p{ margin-bottom: 30px;} .form_inner{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%; border: dashed 1px var(--theme); border-radius: 10px; padding: 20px;} .form_inner form{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%;} .form_inner input[type='file']{ cursor: pointer; background-color: #6d181f46; padding: 20px; border-radius: 10px; color: #fff; cursor: pointer;} .fileupload_items{ display: flex; justify-content: center; flex-direction: column; align-items: flex-start; width: 100%; margin: 30px 0; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: var(--boxshadow);} .fileupload_items i{ padding-right: 5px; color: #6d181f5a;} .fileupload_items h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 10px;} .fileupload_items form{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .fileupload_items_inner input{ border: none; width: 100%; height: 40px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .fileupload_items_inner textarea{ border: none; width: 100%; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input); max-width: 100%;} .fileupload_items_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 27px;} .fileupload_items_inner .item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 32%;} .fileupload_items_inner label{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;} .bok_form{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: var(--boxshadow);} .bok_form i{ padding-right: 5px; color: #6d181f5a;} .bok_form h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 10px;} .bok_form p{ margin-bottom: 30px;} .bok_form_inner{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%;} .bok_form_inner .country{display: flex; justify-content: center; align-items: center; margin-right: 10px; gap: 0 5px; width: 100px; height: 40px; border-radius: 10px; background-color: #f4f4f4;} .bok_form_inner .country .country_text{font-size: 14px;} .bok_form form{ display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%;} .bok_form_inner .item{ display: flex; flex-direction: column; width: 100%;} .bok_form_inner .item span{ color: var(--theme);} .bok_form_inner .open_model_pin{ background-color: var(--primary); border-radius: 5px; padding: 10px; color: #fff; text-decoration: none; cursor: pointer;} .bok_form_inner .item input{ border: none; width: 100%; height: 40px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .bok_form_inner .item textarea{ border: none; width: 100%; height: 80px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .bok_form_inner .item select{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 10px 0; background-color: var(--input);} /* Responsive */ @media only screen and (max-width: 900px) { .fileupload_items_inner .item{ width: 48%;} } @media only screen and (max-width: 650px) { .fileupload_items_inner .item{width: 100%;} } @media only screen and (max-width: 650px) { .workplace_add_backorder_items_inner{ flex-direction: column;} .workplace_add_backorder_items_inner .item{width: 100% !important;} } /* MAIL *************************************************************************************************************************************************/ /* Mail Orderbevestiging */ .mail{ display: flex; justify-content: center; align-items: center; width: 100%;} .mail_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: column; max-width: 900px; background-color: #e4dedf3d; min-height: 100vh;} .mail_inner .top{ display: flex; justify-content: center; align-items: center; width: 100%; background-color: rgb(215, 215, 215); padding: 20px;} .mail_inner .top_inner{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 900px;} .mail_inner .top h1{ font-family: var(--font2); color: rgba(0, 0, 0, 0.189);} .mail_inner .top img{ width: 200px;} .mail_inner .center{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 940px; padding: 20px;} .mail_inner .center h1{ font-family: var(--font2); color: var(--theme); margin-top: 40px;} .mail_inner .center p{ color: rgba(0, 0, 0, 0.575);} .mail_bottom{ display: flex; justify-content: center; align-items: center; width: 100%;} .mail_bottom_inner{ display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 1040px; padding: 40px; padding-left: 50px; background-color: var(--theme); color: #fff;} @media only screen and (max-width: 650px) { .mail_inner .top h1{ font-size: 16px;} } /* Mail TWO FA */ .mail_twofa{ display: flex; justify-content: center; align-items: center; width: 100%;} .mail_inner_twofa{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 100%; background-color: #f6fbff; background-image: url("https://heijkopportaal.nl/public/images/blob_twofa.svg"); min-height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;} .mail_twofa_block{ display: flex; justify-content: center; align-items: center; width: 100%;} .mail_twofa_block_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 600px; padding: 20px; margin: 20px; background-color: #fff; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} .mail_twofa_block_inner img{width: 200px;} .mail_twofa_block_inner h1{ font-family: var(--font2); margin-top: 20px; font-size: 25px; letter-spacing: 1px;} .mail_twofa_block_inner p{ text-align: center; margin-bottom: 10px;} .mail_twofa_numbers{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 50px 0;} .mail_twofa_numbers_inner{ display: flex; justify-content: space-evenly; align-items: center; width: 100%; max-width: 500px;} .mail_twofa_numbers_inner .number{ padding: 0 10px; font-size: 30px; border-bottom: 1px solid #2c62ff5c;} .mail_twofa_block_inner .footer{ margin-top: 40px;} /* QR SCAN *************************************************************************************************************************************************/ .qr_scan_parent{ display: flex; justify-content: center; align-items: center; width: 100%;} .qr_scan_inner{ display: flex; justify-content: center; align-items: center; width: 100%; max-width: 900px; margin: 20px;} .qr_scan_inner #qr-reader{ width: 100%; box-shadow: var(--boxshadow); border-radius: 10px; border: 1px dashed #d0b3b4 !important;} .qr_scan_inner #qr-reader__status_span{ border-radius: 5px; background-color: var(--theme) !important; color: #fff !important;} .qr_scan_inner #qr-reader__header_message{ padding: 12px 10px !important; color: var(--primary) !important;} .qr_scan_inner #qr-reader__scan_region{display: flex; justify-content: center; align-items: center; margin: 10px 0;} .qr_scan_inner #qr-reader__scan_region img{ width: 200px; height: 100px; object-fit: contain;} .scanned_box{display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; padding: 50px 0; object-fit: cover; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(109%2c 24%2c 31%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c402.052C81.739%2c388.157%2c165.115%2c407.173%2c242.43%2c377.228C332.289%2c342.424%2c430.773%2c302.444%2c476.367%2c217.549C522.559%2c131.541%2c495.394%2c27.401%2c482.264%2c-69.339C469.035%2c-166.807%2c460.611%2c-269.118%2c399.818%2c-346.444C337.746%2c-425.397%2c242.812%2c-470.517%2c145.962%2c-497.099C50.274%2c-523.362%2c-51.272%2c-526.692%2c-145.688%2c-496.168C-238.632%2c-466.12%2c-327.888%2c-411.423%2c-378.141%2c-327.661C-425.513%2c-248.7%2c-403.624%2c-150.653%2c-408.155%2c-58.684C-412.222%2c23.87%2c-419.655%2c103.177%2c-403.361%2c184.209C-383.036%2c285.288%2c-392.612%2c420.765%2c-301.895%2c469.759C-209.276%2c519.78%2c-103.774%2c419.693%2c0%2c402.052' fill='%23571319'%3e%3c/path%3e%3cpath d='M1440 1106.124C1556.617 1129.6570000000002 1688.318 1166.396 1789.6689999999999 1104.096 1891.128 1041.729 1911.366 905.534 1949.737 792.789 1984.598 690.358 2002.676 587.346 2002.3600000000001 479.145 2001.999 355.557 2039.769 202.54199999999997 1947.774 120.012 1853.4479999999999 35.39099999999996 1702.152 109.09699999999998 1576.04 96.68900000000002 1478.812 87.12299999999999 1387.649 36.26599999999996 1291.859 55.476999999999975 1191.5149999999999 75.60199999999998 1111.959 142.836 1031.376 205.925 933.106 282.862 787.348 340.077 770.408 463.727 753.45 587.507 875.735 684.016 952.356 782.6990000000001 1013.629 861.615 1087.354 923.947 1170.616 979.1700000000001 1255.052 1035.171 1340.683 1086.0819999999999 1440 1106.124' fill='%23831d25'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");} .scanned_box_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 1200px; padding: 0 20px;} .scanned_box_inner h1{ font-family: var(--font2); color: #fff; margin-bottom: 20px;} .scanned_box_inner .block{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 700px; padding: 20px; border-radius: 5px; background-color: #fff; box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px; margin: 0 20px;} .scanned_box_inner .block i{ padding-right: 5px; color: #6d181f5a;} .scanned_box_inner .block h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 10px;} @media only screen and (max-width: 685px) { .scanned_box_inner .block input{width: 100%;} } /* MAIN DASHBOARD *************************************************************************************************************************************************/ .dashboard_overview_days{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin: 20px 0;} .dashboard_overview_days .count_driver{display: flex; justify-content: center; align-items: center; position: absolute; left: 2px; top: 2px; background-color: var(--second); width: 17px; border-radius: 50%; text-align: center; color: #fff;} .dashboard_overview_days i{ padding-right: 5px; color: #6d181f5a;} .dashboard_overview_days h1{ font-family: var(--font2); font-weight: 600; color: #ef305e; font-size: 20px; margin-bottom: 20px;} .dashboard_overview_days_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 100%;} .dashboard_overview_days_inner .block{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80px; max-width: 80px; padding: 20px; border: 1px solid rgba(0, 0, 0, 0.269); border-radius: 10px; margin: 10px; background-color: #fff;} .dashboard_overview_days_inner .block p{ font-size: 12px;} .dashboard_overview_days_inner a{ text-decoration: none; color: inherit;} .dashboard_overview_days_inner .count{display: flex; justify-content: center; align-items: center; position: absolute; left: 2px; top: 2px; background-color: var(--second); width: 24px; border-radius: 50%; text-align: center; color: #fff;} .dashboard_overview_days_inner .active{ border: 2px solid var(--theme); transform: scale(1.1);} .dashboard_overview_days_inner .block .day_number{ font-weight: bold; text-align: center; font-size: 12px;} /* Slider */ .gallery { background: #EEE;} .gallery-cell {width: 28%;height: 200px;margin-right: 10px;background: #8C8;counter-increment: gallery-cell;} .gallery-cell.is-selected {background: #ED2;} /* cell number */ .gallery-cell:before {display: block;text-align: center;content: counter(gallery-cell);line-height: 200px;font-size: 80px;color: white;} .main-carousel{width: 100%;} div.carousel-cell.is-selected{background: var(--second) !important;border-radius: 10px;} .dashboard_status_blocks{display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 20px;} .dashboard_status_blocks_inner{display: flex;justify-content: space-between;align-items: center;flex-direction: row;flex-wrap: wrap;width: 100%;max-width: 100%;} .dashboard_status_blocks_inner .block{display: flex;justify-content: flex-start;align-items: center;flex-direction: column;flex-wrap: nowrap;width: 22%;height: 330px;background-color: #fff;border-radius: 10px;padding: 20px;box-shadow: 15px 15px 10px -15px rgba(0, 0, 0, 0.335);transition: all 0.3s ease-in-out;} .dashboard_status_blocks_inner .block:hover{transition: all 0.3s ease-in-out;box-shadow: 15px 15px 10px -15px rgba(0, 0, 0, 0.513);} .dashboard_status_blocks_inner .block a{text-decoration: none;color: inherit;transition: all 0.3s ease-in-out;} .dashboard_status_blocks_inner .block a:hover{color: var(--theme);transform: scale(1.1);transition: all 0.3s ease-in-out;} .dashboard_status_blocks_inner .block h1{font-size: 20px;} .dashboard_status_blocks_inner .block i{font-size: 12px;} .dashboard_status_blocks_inner .block .header_block{display: flex;justify-content: center;align-items: center;width: 100%;border-bottom: 1px solid rgba(163, 158, 158, 0.425);} .dashboard_status_blocks_inner .block .header_block .header_block_inner{display: flex;justify-content: space-between;align-items: center;flex-direction: row;width: 100%;max-width: 100%;} .dashboard_status_blocks_inner .block .header_block .header_block_inner a{display: flex;justify-content: space-between;align-items: center;flex-direction: row;width: 100%;max-width: 100%;} .dashboard_status_blocks_inner .block .header_block .header_block_inner .left{display: flex;flex-direction: row;align-items: center;} .dashboard_status_blocks_inner .block .header_block .header_block_inner .left i{padding-right: 5px;color: var(--primary);} .dashboard_status_blocks_inner .block .header_block .header_block_inner .right i{font-size: 20px;} .dashboard_status_blocks_inner .block .middle_block{display: flex;justify-content: center;align-items: center;flex-direction: row;width: 100%;margin: 20px 0;border: 1px dashed var(--theme);padding: 10px;border-radius: 20px;} .dashboard_status_blocks_inner .block .middle_block_inner{display: flex;justify-content: space-between;flex-direction: row;text-align: right;width: 100%;max-width: 100%;} .dashboard_status_blocks_inner .block .middle_block_inner .right{font-size: 12px;} .dashboard_status_blocks_inner .block .middle_block_inner i{background-color: #6d181f5a;font-size: 30px;padding: 20px;border-radius: 20px;color: var(--theme);} .dashboard_status_blocks_inner .block .middle_block_inner h1{font-size: 30px;} .dashboard_status_blocks_inner .block .bottom_block{display: flex;align-items: center;justify-content: center;width: 100%;margin: 20px 0;} .dashboard_status_blocks_inner .block .bottom_block_inner{display: flex;justify-content: space-between;width: 100%;max-width: 100%;} .dashboard_status_blocks_inner .block .bottom_block_inner h5{font-weight: normal;border-bottom: 1px solid rgba(163, 158, 158, 0.425);} .dashboard_status_blocks_inner .block .bottom_block_inner p{font-size: 15px;font-weight: bold;} .dashboard_innamens{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 100%;margin: 40px 0;} .dashboard_innamens i{padding-right: 5px;color: #e7e7e8;} .dashboard_innamens h1{font-family: var(--font2);font-weight: 600;color: #000;font-size: 20px;margin-bottom: 20px;} .dashboard_innamens_inner{display: flex;justify-content: flex-start;align-items: center;width: 100%;max-width: 100%;} .dashboard_innamens_inner .block{display: flex;justify-content: space-between;align-items: center;flex-direction: row;width: 100%;background-color: #fff;border-radius: 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;padding: 20px;} .dashboard_innamens_inner .block h1{margin-bottom: 0px;font-family: var(--font2);} .dashboard_innamens_inner .block p{background-color: #ef305e;padding: 20px 30px;border: 1px solid #fff;border-radius: 10px;color: #fff;font-weight: bold;font-size: 30px;transition: all 0.3s ease-in-out;} .dashboard_innamens_inner .block p:hover{background-image: none;background-color: #fff;color: var(--theme);transition: all 0.3s ease-in-out;border: 1px solid #11101c;} .dashboard_innamens_inner .block a{text-decoration: none;} .dashboard_fast_actions{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 100%;margin: 40px 0;} .dashboard_fast_actions i{padding-right: 5px;color: #e7e7e8;} .dashboard_fast_actions h1{font-family: var(--font2);font-weight: 600;color: #000;font-size: 20px;margin-bottom: 20px;} .dashboard_fast_actions_inner{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;width: 100%;max-width: 100%;} .dashboard_fast_actions_inner .block{display: flex;justify-content: flex-start;align-items: center;flex-direction: row;width: 30%;background-color: #fff;padding: 20px;border: 1px solid rgba(163, 158, 158, 0.425);box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;border-radius: 10px;transition: all 0.3s ease-in-out;} .dashboard_fast_actions_inner .block:hover{transform: scale(1.02);transition: all 0.3s ease-in-out;} .dashboard_fast_actions_inner .block p{font-weight: bold;padding-left: 20px;} .dashboard_fast_actions_inner .block a{color: inherit;color: #ef305e;text-decoration: none;} .dashboard_fast_actions_inner .block i{padding: 20px;font-size: 30px;background-color: #ef305d19;border-radius: 20px;color: #ef305e;} .day {color: #000;display: flex;padding: 12px 0px;border-radius: 3px;justify-content: space-between;flex-direction: column;cursor: auto;} /* Responsive */ @media only screen and (max-width: 1240px) { .dashboard_status_blocks_inner .block .middle_block_inner .right{font-size: 9px;} } @media only screen and (max-width: 1200px) { .dashboard_fast_actions_inner .block{width: 48%;margin-bottom: 20px;} } @media only screen and (max-width: 1150px) { .dashboard_status_blocks_inner .block{ width: 30%;margin-bottom: 20px;} } @media only screen and (max-width: 950px) { .dashboard_status_blocks_inner .block{width: 48%;} } @media only screen and (max-width: 900px) { .dashboard_fast_actions_inner .block{width: 100%;justify-content: space-around;} } @media only screen and (max-width: 700px) { .dashboard_status_blocks_inner .block{width: 100%;} } .button_holder_dashboard{display: flex; justify-content: flex-start; align-items: center; width: 100%;} .button_holder_dashboard_inner{display: flex; justify-content: flex-start; align-items: center; padding: 5px; border-radius: 20px; background-color: #f8f9fa; font-size: 14px;} .button_holder_dashboard_inner p{display: flex; justify-content: center; align-items: center; margin: 0 10px; padding: 5px; border-radius: 50%; width: 27px; height: 27px; background-color: #262f4a; color: #fff;} .button_holder_dashboard_inner button{padding: 5px 10px;} .button_holder_dashboard_inner button:hover{background-color: #262f4a;color: #fff !important;border-radius: 20px;} /* MODAL *************************************************************************************************************************************************/ /* .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4);} */ .modal {position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4);} /* Modal Content */ .modal_content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;} .modal_body{ display: flex; justify-content: center; align-items: center; width: 100%;} .model_body_inner{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%;} .model_body_inner form{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%;} .model_body_inner form input{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 10px 0; background-color: var(--input);} .model_body_inner form textarea{ border: none; width: 100%; height: 70px; border-radius: 10px; padding: 10px 20px; margin: 10px 0; background-color: var(--input);} .model_button{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .model_button_inner{ display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; max-width: 100%;} /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;} .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer;} /* OFFICE **************************************************************************************************************************************************/ /* Planning */ .office_planning{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; background: #fff; padding: 25px; border-radius: 10px; box-shadow: var(--boxshadow);} .office_planning i{padding-right: 5px;color: #6d181f5a;} .office_planning h1{font-family: var(--font2);font-weight: 600;color: var(--second); font-size: 20px;width: 100%;padding-bottom: 20px;z-index: 1;} .office_planning_inner{display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;max-width: 100%;} .office_planning_inner form{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 100%;} .office_planning_inner input { border: none; box-sizing: border-box; outline: 0; padding: 0.75rem; position: relative; width: 100%; border-radius: 10px;} .wrapper{ width: 100%;} .wrapper .header_production{display: flex; align-items: center;} .wrapper .header_production .header_day_total{display: flex; margin-left: 10px; padding: 5px; border-radius: 5px; background-color: #fff;} .wrapper .header_production .header_day_total .item_total{margin: 0 10px; font-size: 12px; font-weight: 300; color: #071437;} /*.production_overlay_visible{position: fixed; bottom: 0; right: 0; width: 26rem; height: 32rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.92) 100%); border-radius: 50px 0 0 0; z-index: 9999999; visibility: hidden;}*/ .wrapper .item{color: #000;display: flex;padding: 12px 17px;background-color: #f8f9fa;border-radius: 3px;align-items: center;justify-content: space-between;flex-direction: column;cursor: grab;border: 1px dashed #b9b4b4;} .wrapper .day_item{ color: #000; display: flex; background-color: #fff; border-radius: 3px; cursor: grab; border: 1px dashed #b9b4b4} .wrapper .day_item_selected{ border-left: 10px solid transparent;border: 3px dashed #2c62ff;} .wrapper .item .underline{ height: 2px; background-color: #ac5c64; width: 100%; margin: 10px 0;} .wrapper .item .top{ position: relative; display: flex; justify-content: space-between; width: 100%;} .wrapper .item .top{ position: relative; display: flex; justify-content: space-between; width: 100%;} .wrapper .item .extra_desc{font-size: 14px; margin-top: 10px; text-align: center;} .wrapper .item .title_from_item{font-weight: bold;} .wrapper .item span{font-size: 14px; width: 20%;} .wrapper .item:last-child{border: none; margin-bottom: 0px; font-family: var(--font2);} .wrapper .item:last-child span{margin-bottom: 5px;} .wrapper .item .text{ font-size: 14px; font-weight: 400;} .wrapper .item i{ font-size: 18px; cursor: pointer;} @media only screen and (max-width: 1200px) { .wrapper .item:last-child{display: none;} .wrapper .item .top{flex-direction: column;align-items: center;} .wrapper .item span{ width: 100%;text-align: center; margin-bottom: 5px;} .wrapper .item .text{font-size: 14px;} } @media only screen and (max-width: 650px) { .wrapper .item{ flex-direction: column;} .wrapper .item span{ width: 100%;} .wrapper .item i{display: none;} } /* CreateEdit deliveries */ .add_delivery{ display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 20px; background-color: #fff; border-radius: 10px; box-shadow: var(--boxshadow);} .add_delivery i{ padding-right: 5px; color: #6d181f5a;} .add_delivery h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; width: 100%; padding-bottom: 20px; z-index: 2;} .add_delivery_inner{display: flex;justify-content: flex-start;align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; padding: 20px;} .add_delivery_inner form{ width: 100%;} .add_delivery_inner input { border: none; box-sizing: border-box; outline: 0; padding: .75rem; position: relative; width: 100%; border-radius: 10px;} .add_delivery_inner input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto;} .add_delivery_inner .item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; width: 100%; max-width: 100%; padding: 10px; border-radius: 10px; margin: 5px 0; background-color: #ececec;} .add_delivery_inner .item_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%;} .add_delivery_inner .item_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%;} .add_delivery_inner .item_inner button i{ color: #fff;} .add_delivery_inner .item_inner .left{ width: 60%;} .add_delivery_inner .item_inner .right{ width: 30%;} /*Sidepanel edit delivery*/ .sidepanel_edit_delivery_form{display: flex; justify-content: center; align-items: center; width: 100%;} .sidepanel_edit_delivery_form_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 20px; background-color: #fff; border-radius: 10px;} .sidepanel_edit_delivery_form_inner .form_item_holder{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 32%;} .sidepanel_edit_delivery_form_inner .form_item_holder .item_edit_delivery{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 15px;} .sidepanel_edit_delivery_form_inner .form_item_holder .item_edit_delivery input:not(.checkbox_class), .sidepanel_edit_delivery_form_inner .form_item_holder .item_edit_delivery select { background-color: rgba(204, 204, 204, 0.13) !important; } .sidepanel_edit_delivery_form_inner .form_item_holder .item_edit_delivery textarea{background-color: rgba(204, 204, 204, 0.13) !important; border-radius: 5px !important; border: 1px solid #d1d5db;} .sidepanel_edit_delivery_form_inner .form_item_holder .item_edit_delivery label{font-size: 14px;font-family: var(--font2);color: #262f4a;margin-bottom: 2px;} @media only screen and (max-width: 1000px) { .sidepanel_edit_delivery_form_inner .form_item_holder{width: 49%; margin-bottom: 20px;} } @media only screen and (max-width: 750px) { .sidepanel_edit_delivery_form_inner .form_item_holder{width: 100%;} } /* relation details OLD */ .relation_details{ display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; border-radius: 10px; box-shadow: var(--boxshadow); padding: 20px; background-color: #fff;} .relation_details i{ padding-right: 5px; color: #6d181f5a;} .relation_details h1{ font-family: var(--font2); font-weight: 600; color: var(--second); font-size: 20px; width: 100%;} .relation_details_inner{ display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 100%; background-color: #fff;} .relation_details_inner .left{width: 70%;} .relation_details_inner .left h1{ margin-bottom: 10px;} .relation_details_inner .right h1{ margin-bottom: 10px;} .relation_details_inner .right .title{ font-weight: bold; color: #9c6265;} .relation_details_inner .right .detail{ padding-bottom: 10px;} .relation_details_inner .left .title{ font-weight: bold; color: #9c6265; margin-bottom: 10px;} .relation_details_inner .left .detail{ padding-bottom: 10px;} .relation_details_inner .left .detail .block_info{ padding: 10px; background-color: #ef305e0f; border-radius: 10px;} .relation_details_inner .left .detail .block_info p{ font-size: 14px !important;} .relation_details_inner .right{ width: 25%;} .relation_details_inner .group_item .title{ color: #6d181fb0; font-weight: bold;} .relation_details_inner .group_item .detail{ color: #000;} .relation_details_inner .go_to_item{ padding: 5px 10px; border-radius: 20px; color: #2b5ef6; background-color: #d5dcf6;text-decoration: none;} .relation_details_inner .left .group_item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding-bottom: 10px;} .relation_details_inner .left .group_item .title{ font-weight: bold; font-size: 15px;} .relation_details_inner .left .group_item .detail{ margin-bottom: 5px;} .relation_details_inner img{background-position: center; background-repeat: no-repeat; background-size: contain; object-fit: contain; border-radius: 10px; height: 300px; margin: 10px;} .error_images_message{ display: flex; justify-content: center; align-items: center; width: 100%;} .error_images_message_inner{ display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 100%;} .relation_details_inner .group{ display: flex; justify-content: center; align-items: center; width: 100%;} .relation_details_inner .group_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 100%;} .relation_details_inner .group_inner .group_item{width: 23%;} .relation_details_inner .title_delivery{ color: #6d181fb0; font-weight: bold; font-size: 20px; font-family: var(--font2);} /* Responsive */ @media only screen and (max-width: 1050px) { .relation_details_inner{flex-direction: column-reverse;} .relation_details_inner .left{width: 100%;} .relation_details_inner .right{width: 100%;} } @media only screen and (max-width: 900px) { .relation_details_inner .group_inner .group_item{width: 48%;} } @media only screen and (max-width: 500px) { .relation_details_inner .group_inner .group_item{width: 100%;} } .line-container {position: relative;width: 100%;height: 1cm;display: flex;align-items: center;justify-content: center;} .plus-icon:hover {background-color:var(--second);transition: 0.7s;} .line { width: 100%;border: none;border-top: 1px solid var(--second);border-radius: 10px;margin: 0;} .line-active {border-top: 1px solid black;} .plus-icon {display: flex; justify-content: center; align-items: center; position: absolute;top: 50%;left: -1%;transform: translate(-50%, -50%);font-size: 15px;background-color: var(--second);width: 15px;height: 15px; text-align: center;color: white;border-radius: 50%;cursor: pointer;} /* RELATION PAGE DETAILS */ .relation_details_page{display: flex; justify-content: center; align-items: center; width: 100%;} .relation_details_page_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; border-radius: 10px; background-color: #fff; padding: 20px;} .relation_details_page_inner h1{font-size: 20px; font-family: var(--font2); font-weight: 400; margin-bottom: 20px;} .relation_details_page_inner .left_relation_details_page{width: 65%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2;} .relation_details_page_inner .left_relation_details_page form{display: flex; width: 100%; margin-bottom: 20px; background-color: var(--bg_blocks); padding: 20px; border-radius: 10px;} .relation_details_page_inner .left_relation_details_page form .form_relation_filter_item{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; margin-right: 20px;} .relation_details_page_inner .left_relation_details_page form .form_relation_filter_item i{margin-top: 15px;} .relation_details_page_inner .left_relation_details_page form .form_relation_filter_item label{font-size: 14px; font-weight: bold;} .relation_details_page_inner .left_relation_details_page form .relation_input{padding: 10px; background-color: #fff; border-radius: 10px; border: 2px solid transparent;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .relation_details_page_inner .left_relation_details_page form .relation_input:focus{border: 2px solid #2c62ff !important; box-shadow: none;} .relation_details_page_inner .left_relation_details_page form .relation_btn{background-color: var(--second); padding: 13px 20px; box-shadow: none; font-size: 14px; margin-top: 19px;} .relation_details_page_inner .right_relation_details_page{width: 32%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2;} .relation_details_page_inner .right_relation_details_page .top{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 250px;} .relation_details_page_inner .right_relation_details_page .top .icon{display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; background-color: #3f95ff1e;} .relation_details_page_inner .right_relation_details_page .top .icon img{width: 80px; height: 80px; object-fit: contain;} .relation_details_page_inner .right_relation_details_page .top h1{margin-top: 10px; font-family: var(--font2);} .relation_details_page_inner .right_relation_details_page .details{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .relation_details_page_inner .details_line{width: 100%; border-top: 1px dotted #d7cececb; margin: 20px 0;} .relation_details_page_inner .title{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .relation_details_page_inner .title i{font-size: 14px;} .relation_details_page_inner .right_relation_details_page .details .title .ref{font-size: 12px; padding: 5px; border-radius: 5px; background-color: #2fceb4; color: #fff;} .relation_details_page_inner .right_relation_details_page .details .data .item{margin-bottom: 10px;} .relation_details_page_inner .right_relation_details_page .details .data .item b{color: #071437; font-weight: 400;} .relation_details_page_inner .right_relation_details_page .details .data .item p{color: #78829d; font-size: 12px; font-weight: 300;} .relation_details_page_inner .right_relation_details_page .details .data .item a{color: var(--second); text-decoration: none; font-size: 12px; font-weight: 300;} @media only screen and (max-width: 1150px) { .relation_details_page_inner .left_relation_details_page{width: 100%; margin-bottom: 20px;} .relation_details_page_inner .right_relation_details_page{width: 100%;} } @media only screen and (max-width: 850px) { .relation_details_page_inner .left_relation_details_page form .form_relation_filter_item i{display: none;} .relation_details_page_inner .left_relation_details_page form .relation_input{width: 100%;} .relation_details_page_inner .left_relation_details_page form .relation_btn{margin-top: 5; margin-left: 0;} .relation_details_page_inner .left_relation_details_page form .form_relation_filter_item{margin-bottom: 5px;} .relation_details_page_inner .left_relation_details_page form{flex-direction: column;} } /* RELATIE SIDEPANEL FORM */ .add_relation_form{display: flex; justify-content: center; align-items: center; width: 100%;} .add_relation_form_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 20px; border-radius: 10px; background-color: #fff;} .add_relation_form_inner .relation_item_form{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 32%; margin-bottom: 10px;} .add_relation_form_inner .relation_item_form label{font-size: 14px; font-weight: bold;} .add_relation_form_inner .relation_item_form input{width: 100%; padding: 5px; border-radius: 5px; background-color: #eeeff1; border: 2px solid transparent;} .add_relation_form_inner .relation_item_form select{width: 100%; padding: 5px; border-radius: 5px; background-color: #eeeff1; border: 2px solid transparent;} .add_relation_form_inner .relation_item_form input:focus{border: 2px solid #2c62ff !important; box-shadow: none;} @media only screen and (max-width: 700px) { .add_relation_form_inner .relation_item_form{width: 100%;} } /* PROJECT **************************************************************************************************************************************************/ .project_show{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: var(--boxshadow);} .project_show i{ padding-right: 5px; color: #6d181f5a;} .project_show h1{ font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; margin-bottom: 10px; height: 25px;} .project_show_inner{ display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 100%;} .project_show_inner .left{ width: 65%;} .project_show_inner .right{ width: 30%;} .project_show_inner .right i{ cursor: pointer;} .project_show_inner .right .item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding-bottom: 5px;} /* product_extra_info_button button */ button.product_extra_info_button{ background-color: #fff !important; box-shadow: none !important;} .project_show_inner .item .title{ color: #000; font-weight: bold;} .project_show_inner .item .detail{ color: #000;} .project_show_inner .left .item{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding-bottom: 10px;} .project_show_inner .group{ display: flex; justify-content: center; align-items: center; width: 100%;} .project_show_inner .group_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 100%;} .project_show_inner .group_inner .group_item{ width: 23%;} /* delivery_button */ .delivery_button{ display: flex; justify-content: center; align-items: center; width: 100%;} .delivery_button_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%; max-width: 100%;} .delivery_button_inner i{ color: #fff; font-size: 20px;} /* collapse */ .collapsible { background-color: var(--bg_blocks); box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; color: white; cursor: pointer; padding: 18px; margin: 5px 0; width: 100%; text-align: left; outline: none; font-size: 15px; transition: all 0.1s ease-in-out;} .collapsible .delivery_button{color: #071437;} .collapsible .delivery_button_inner i{color: #071437;} .collapsible:focus{ background-color: #ebeef0; transition: all 0.1s ease-in-out;} .collapsible:hover{ transition: all 0.1s ease-in-out; background-color: #ebeef0;} .content { padding: 0 18px; background-color: #ebeef0; max-height: 0; overflow: hidden; font-size: 14px; width: 100%; /* transition: 0.3s ease-out; */ border-radius: 10px;} .delete_project{display: flex; justify-content: center; align-items: center; width: 100%; cursor: pointer;} .delete_project_inner{ display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; cursor: pointer;} .delete_project i{ color: var(--theme) !important;} .relation_details_page_inner .group{ display: flex; justify-content: center; align-items: center; width: 100%;} .relation_details_page_inner .group_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 100%;} .relation_details_page_inner .group_inner .group_item{ width: 23%;} @media only screen and (max-width: 1000px) { .relation_details_page_inner .group_inner .group_item{ width: 48%;} } @media only screen and (max-width: 700px) { .relation_details_page_inner .group_inner .group_item{ width: 100%;} } .relation_details_page_inner .group_inner .group_item .title{color: #344767; font-weight: 700;} .relation_details_page_inner .group_inner .group_item .detail{color: #344767; font-weight: 300;} /* Table Projects uitklapbaar */ .projects_table{ border-collapse: collapse;} .projects_table_td{ border-bottom: 0px !important;} .projects_table_th{ border-bottom: 0px !important; padding: 16px 8px} .extra_info_parent{ background-color: #fff;} .extra_open_delivery{border-radius: 10px; display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; margin-top: -21px; border: 1px solid #cccccc;} .extra_open_delivery_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; padding: 20px 10px;} .addition_item_parent{ display: flex; justify-content: center; align-items: center; width: 100%;} .addition_item_parent_inner{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; overflow-y: scroll;} .addition_item_parent_inner h5{color: #000;text-align: left;} .addition_item_parent_inner .addition_item{display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;width: 100%;background-color: whitesmoke;margin-bottom: 10px;} .addition_item_parent_inner .addition_item .item{display: flex;justify-content: flex-start;align-items: center;flex-direction: row;border: none;width: 30%;} .addition_item_parent_inner .addition_item .item_column{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;border: none;width: 30%;} .addition_item_parent_inner .addition_item .item_planning{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;border: none;width: 15%;text-align: left;} .addition_item_between{display: flex;justify-content: center;align-items: center;width: 100%;} .addition_item_between_inner{display: flex;justify-content: space-between;align-items: flex-start;width: 100%;max-width: 100%;} .addition_item_parent_inner .change_status_item_parent{margin-right: 10px;} .addition_item_between_inner .left_additions{width: 30%;} .addition_item_between_inner .left_additions .item{width: 100% !important;padding: 5px !important;} .addition_item_between_inner .right_additions{width: 68%;} .addition_item_between_inner .right_additions .item{width: 100% !important;padding: 5px !important;} @media only screen and (max-width: 960px) { .addition_item_parent_inner .addition_item .item{width: 50%;} } @media only screen and (max-width: 715px) { .addition_item_parent_inner .addition_item .item{width: 100%;} .addition_item_between_inner .left_additions{width: 100%;} .addition_item_between_inner .right_additions{width: 100%;} .addition_item_between_inner{flex-direction: column;} } .add_addition_project_button{ position: absolute; right: 10px; bottom: 25px; padding: 3px; border-radius: 4px; background-color: var(--second); margin-left: 10px; font-size: 14px; color: #fff !important;} .extra_open_delivery_inner .addition_item_parent_inner .item select{height: 30px !important;padding: 5px !important;margin: 0px !important;border-radius: 4px !important;} .extra_open_delivery_inner .addition_item_parent_inner .item input{border: none;width: 100%;border-radius: 4px;padding: 5px !important;margin: 0px 0;} .extra_open_delivery_inner .addition_item_parent_inner .item textarea{background-color: #fff;margin-top: 5px;border-radius: 4px;} .extra_open_delivery_inner .addition_item_parent_inner .item label{font-size: 14px;font-weight: bold;} .extra_open_delivery_inner .addition_item_parent_inner .item h5{margin-right: 10px;} .extra_open_delivery_inner .addition_item_parent_inner .item .rounded{width: 110px;text-align: center;padding: 5px;border-radius: 20px;} .extra_tabjes{position: relative;display: flex;justify-content: center;align-items: center;width: 100%;margin: 20px 0;} .extra_tabjes_inner{display: flex;justify-content: flex-start;align-items: center;width: 100%; margin-left: 10px;} .extra_tabjes_inner .tab{margin-right: 10px;border-radius: 10px 10px 0 0;padding: 10px 20px;color: #5048e4; cursor: pointer;} .component_tab{position: relative;width: 100%;} .item_parent_yes_or_no{cursor: pointer;padding: 5px;border-radius: 20px;background-color: #5048e446;color: #5048e4;text-align: center;width: 50px;} .panel-header h2{color: #000;} .tool_status_info{background-color: #fff;z-index: 999999;border-radius: 10px;padding: 5px;font-size: 12px;color: #11101c;} .week_addition_message{display: flex;justify-content: flex-start;align-items: center;width: 100%;background-color: #fff;padding: 5px;border-radius: 5px;} .week_addition_message input{margin-right: 10px;padding: 5px;border-radius: 5px;border: 1px solid rgba(83, 82, 82, 0.35);} /* .week_addition_message button{padding: 5px !important;background-color: #f8f8f8 !important;box-shadow: none !important;color: var(--second);} */ /* Responsive */ @media only screen and (max-width: 1050px) { .extra_open_delivery_inner .item_parent .item{margin-right: 30px;} .project_show_inner{flex-direction: column-reverse;} .project_show_inner .left{width: 100%;} .project_show_inner .right{width: 100%;} } @media only screen and (max-width: 900px) { .project_show_inner .group_inner .group_item{width: 48%;} } @media only screen and (max-width: 780px) { .extra_open_delivery_inner .item_parent .item{ margin-right: 40px;} } @media only screen and (max-width: 500px) { .project_show_inner .group_inner .group_item{width: 100%;} } /* Production */ .small_production_select{height: 40px;padding: 10px;width: 140px;border-radius: 5px;margin-right: 5px;} /* create_project_in_modal */ .create_project_in_modal{display: flex;justify-content: center;align-items: center;width: 100%;} .create_project_in_modal_inner{display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;max-width: 100%;padding: 20px;} .create_project_in_modal_inner .item{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 30%;} .create_project_in_modal_inner .item input,.create_project_in_modal_inner .item select{padding: 5px !important;border-radius: 5px !important;border: 1px solid whitesmoke;background-color: #fff;height: auto !important;margin: 5px 0 !important;width: 100% !important;} .create_project_in_modal_inner .item input,.create_project_in_modal_inner .item textarea{padding: 5px !important;border-radius: 5px !important;border: 1px solid whitesmoke;background-color: #fff;height: auto !important;margin: 5px 0 !important;width: 100% !important;} .create_project_in_modal .select_button_add_project{padding: 5px !important;height: auto;width: 100%;margin: 2px 0;} @media only screen and (max-width: 950px) { .create_project_in_modal_inner .item{width: 48%;} } @media only screen and (max-width: 650px) { .panel-header {flex-direction: column; justify-content: flex-start; align-items: flex-start;} .panel-header h2{margin-top: 10px;} .create_project_in_modal_inner .item{width: 100%;} } /* Rechtermuisklik */ .ctxmenu {background: #ededef;color: black;cursor: pointer;border: 1px #cccccc solid;padding: 5px;border-radius: 5px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} .ctxmenu > div {padding: 5px;border-radius: 5px;} .ctxmenu > .click_item:hover {color: #fff !important;} .ctxmenu input {padding: 5px;font-family: var(--font2);border-radius: 5px;border: 1px solid whitesmoke;width: 200px;} .ctxmenu select {padding: 5px !important;height: 30px !important;font-family: var(--font2);border-radius: 5px;border: 1px solid whitesmoke;} .ctxmenu .default_option{cursor: default;} .ctxmenu .default_option:hover{cursor: default;background: #ededef;color: black;} .ctxmenu > div:hover {background: rgb(35, 114, 225);} .ctxmenu > div:hover select {color: #000} .ctxmenu > div:hover input {color: #000} .sub-menu {display: none;position: absolute;left: 100%;margin-top: -35px;margin-left: -5px;z-index: 100;color: black;min-width: 350px;background: #ededef;cursor: pointer;border: 1px #cccccc solid;padding: 5px;border-radius: 5px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} .sub-menu > li {padding: 5px;border-radius: 5px;} .sub-menu > li:hover {background: rgb(35, 114, 225);color: ghostwhite} .ctxmenu .has-submenu .sub-menu .active {display: block !important;} /* sidemenu */ .panel-header {display: flex;justify-content: space-between;} .panel-header h2 {font-family: var(--font2);} .backdrop {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;cursor: default;} .side-panel {position: fixed;top: 0;right: 0;width: 85vw;height: 100vh;background-color: #f1f1f1;padding: 20px;z-index: 9999;cursor: default;} @media only screen and (max-width: 700px) { .side-panel{width: 95vw;} } /* Purchase */ .purchase{display: flex;justify-content: center;align-items: center;width: 100%;} .purchase_inner{display: flex;justify-content: flex-start;align-items: center;flex-direction: column;width: 100%;color: #000;} .purchase table{width: 100%;border-collapse: collapse;} .purchase table input{border: 1px solid #cccccc;padding: 5px;border-radius: 5px;} .purchase table select{border: 1px solid #cccccc;padding: 5px;height: auto;border-radius: 5px;} .add_purchase_table{position: sticky;bottom: 40px;background-color: #fff;width: 100%;margin-top: 50px;} .purchase_table{background-color: #fff;border-top: 1px solid #cccccc;} .purchase_table td{padding: 8px !important;} .add_project_table input{position: relative;} .add_project_table input{border: none;padding: 5px;border-radius: 5px;background-color: #fff;width: 100%;} .select2-container{z-index: 9999999999;} .hoverable {position: relative;} .hoverable > .hoverable__tooltip {display: none;} .hoverable:hover > .hoverable__tooltip {display: inline;position: absolute;top: 20px;left: 10px;width: auto;background: whitesmoke;border: 1px solid #000;border-radius: 5px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;z-index: 9;} .week_total{display: flex;justify-content: center;align-items: center;position: sticky;background-color: #fff;width: 100%;overflow: scroll;bottom: 0px;border-top: 1px solid #ececee;border-left: 1px solid #ececee;} .week_total ::-webkit-scrollbar { display: none !important; } .week_total_inner{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;width: 100%;} .week_total_inner .item{width: 15%;min-width: 15%;max-width: 15%;padding: 10px;} @media only screen and (max-width: 900px) { .week_total_inner .item{width: 30%;min-width: 30%;max-width: 30%;} } .day_total{display: flex;justify-content: center;align-items: center;width: 100%;margin-bottom: 5px;} .day_total_inner{display: flex;justify-content: center;align-items: center;width: 100%;max-width: 97%;background-color: #fff;margin-left: -10px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .day_total_inner .item_total{width: 18%;padding: 5px;border-radius: 5px;} .new_purchase_order{background-color: orange;margin-bottom: 10px;margin-top: -10px;} .pop_over_info{background-color: orange;padding: 2px 7px;box-shadow: none !important;} .pop_over_info i{color: #fff !important;} .edit_row_inkooporders{background-color: #fff;box-shadow: none;color: var(--second);padding: 2px 7px;} .small_button{padding: 2px 7px;box-shadow: none !important;margin-bottom: 5px;} /* Add delivery in model */ .add_delivery_in_modal{display: flex;justify-content: center;align-items: center;width: 100%;} .add_delivery_in_modal_inner{display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;width: 100%;} .add_delivery_in_modal_inner .item{border: none !important;width: 32%;display: flex;justify-content: flex-start !important;flex-direction: column;align-items: flex-start !important;background-color: #f1f1f1 !important;padding: 3px 17px !important;} .add_delivery_in_modal_inner .searchbar_full_width div{width: 100%;} .add_delivery_in_modal_inner .item input{width: 100%;background-color: #fff;border-radius: 5px;border: none !important;padding: 10px 10px;} .add_delivery_in_modal_inner .item select{width: 100%;background-color: #fff;border-radius: 5px;border: none !important;margin: 0 !important;height: 38px !important;padding: 10px 10px;} .add_delivery_in_modal_inner .item textarea{width: 100%;background-color: #fff;border-radius: 5px;border: none !important;padding: 10px 10px;} @media only screen and (max-width: 900px) { .add_delivery_in_modal_inner .item{width: 48%;} } @media only screen and (max-width: 600px) { .add_delivery_in_modal_inner .item{width: 100%;} } .error_reporting_hidden{position: absolute;top: 25px;left: 18px;background-color: #fff;padding: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;color: #ef305e;} .open_website_info{color: #ef305e;} /* Datepicker */ .ui-datepicker{box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px !important;border: none !important;padding: 10px !important;width: 21em !important;} .ui-state-default, .ui-widget-content .ui-state-default{background-color: #fff !important;background-image: none !important;border: none !important;border-radius: 2px !important;text-align: center !important;transition: all 0.1s ease-in-out !important;} .ui-state-default, .ui-widget-content .ui-state-default:hover{background-color: #ef305d49 !important;background-image: none !important;border: none !important;color: #ef305e !important;border-radius: 50% !important;padding: 10px !important;transition: all 0.1s ease-in-out !important;} .ui-state-highlight, .ui-widget-content .ui-state-highlight{background-color: #ef305d49 !important;background-image: none !important;border: none !important;color: #ef305e !important;border-radius: 50% !important;padding: 10px !important;} .ui-widget-header{background-color: #ef305d49 !important;background-image: none !important;border: none !important;color: #ef305e !important;} /* .ui-datepicker-week-col td, th{color: #ef305e !important;} */ .ui-datepicker-week-col td, th{color: #344767 !important;} .ui-state-hover, .ui-widget-content .ui-state-hover{background: none !important;border: none !important;} /* Project Details */ /* .project_detail_block_sidebar{display: flex;justify-content: center;align-items: center;width: 100%;} .project_detail_block_sidebar_inner{display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;width: 100%;max-width: 100%;} .project_detail_block_sidebar_inner .left{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 35%;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;padding: 10px;border-radius: 5px;} .project_detail_block_sidebar_inner .left canvas{width: 100% !important;} .project_detail_block_sidebar_inner .right canvas{width: 100% !important;} .project_detail_block_sidebar_inner .left .item_project_detail{display: flex;justify-content: flex-start;align-items: center;width: 100%;margin-bottom: 5px;padding: 5px;border-radius: 5px;background-color: #2c61ff1c;} .project_detail_block_sidebar_inner .left .item_project_detail i{font-size: 14px;margin-right: 10px;color: #2c62ff;} .project_detail_block_sidebar_inner .left .item_project_detail p{color: #2c62ff;text-align: left;} .project_detail_block_sidebar_inner .left h3{font-size: 21px;color: #000;margin-bottom: 20px;font-family: var(--font2);} .project_detail_block_sidebar_inner .right{display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 64%;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;padding: 10px;border-radius: 5px;} .project_detail_block_sidebar_inner .right h3{font-size: 21px;color: #000;margin-bottom: 20px;font-family: var(--font2);} .project_detail_block_sidebar_inner .right .item_progress{display: flex;justify-content: flex-start;align-items: center;width: 100%;padding: 0 0 20px 0;} .project_detail_block_sidebar_inner .right .progress_bar{width: 222px;margin-right: 20px;} .project_detail_block_sidebar_inner .right .progress_bar p{font-size: 14px;} @media only screen and (max-width: 950px) { .project_detail_block_sidebar_inner .right .item_progress{flex-direction: column;} .project_detail_block_sidebar_inner .right .progress_bar{margin-bottom: 20px;} } @media only screen and (max-width: 850px) { .project_detail_block_sidebar_inner .left{width: 100%;margin-bottom: 10px;} .project_detail_block_sidebar_inner .right{width: 100%;margin-bottom: 10px;} } */ .project_detail_block_sidebar{display: flex; justify-content: center; align-items: center; width: 100%;} .project_detail_block_sidebar_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left{width: 38%; border: 1px solid #F1F1F2; border-radius: 10px; padding: 20px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .top{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 300px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .top .icon{display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; background-color: #3f95ff1e;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .top .icon img{width: 80px; height: 80px; object-fit: contain;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .top h1{margin-top: 10px; font-family: var(--font2); color: #11101c;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .project_detail_block_sidebar_inner .details_line{width: 100%; border-top: 1px dotted #d7cececb; margin: 20px 0;} .project_detail_block_sidebar_inner .title{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details .title h3{color: #000;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details .title .ref{font-size: 12px; padding: 5px; border-radius: 5px; background-color: #2fceb4; color: #fff;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details .data .project_detail_block_sidebar_inner_left_item{margin-bottom: 10px; text-align: left;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details .data .project_detail_block_sidebar_inner_left_item b{color: #071437; font-weight: 400;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left .details .data .project_detail_block_sidebar_inner_left_item p{color: #78829d; font-size: 12px; font-weight: 300;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 60%;border: 1px solid #F1F1F2; border-radius: 10px; padding: 20px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .item_progress{display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 20px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .progress_bar{width: 200px; height: 200px; margin-right: 20px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .progress_bar p{font-size: 14px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .title{margin-top: 10px; font-family: var(--font2); color: #11101c;} @media only screen and (max-width: 1000px) { .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_left{width: 100%; margin-bottom: 10px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right{width: 100%; margin-bottom: 40px;} } @media only screen and (max-width: 650px) { .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .progress_bar{margin-bottom: 10px;} .project_detail_block_sidebar_inner .project_detail_block_sidebar_inner_right .item_progress{flex-direction: column;} } /* create_project_in_modal_tabs */ .create_project_in_modal_tabs{display: flex; justify-content: center; align-items: center; width: 100%;} .create_project_in_modal_tabs_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;} .create_project_in_modal_tabs_inner .item_tab{width: 32%;} .create_project_in_modal_tabs_inner .item_tab_button{cursor: pointer; display: flex; justify-content: space-between; width: 100%; padding: 10px; border-radius: 5px; background-color: #fff;} .create_project_in_modal_tabs_inner .item_tab_inner{display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; background-color: #fff; border-radius: 5px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin: 10px 0; padding: 10px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input{displayphp artisan serve: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input label{font-size: 12px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input select{background-color: #f1f1f1; border-radius: 5px; height: 30px; width: 100%; padding: 5px; margin: 0px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input input:not(.checkbox_class){background-color: #f1f1f1; border-radius: 5px; height: 30px; width: 100%; border: none; padding: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input textarea{background-color: #f1f1f1; border-radius: 5px; height: 50px; width: 100%; border: none; padding: 5px; margin: 0px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input input:focus{box-shadow: none; border: 2px solid #5c7dfd;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input select:focus{box-shadow: none; border: 2px solid #5c7dfd;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input textarea:focus{box-shadow: none; border: 2px solid #5c7dfd;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input p{background-color: #f1f1f1; border-radius: 5px; height: 30px; width: 100%; border: none; font-size: 14px; padding: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .standard_input{background-color: #2b64ff25; border-radius: 5px; height: 30px; width: 100%; border: none; font-size: 14px; padding: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .input_disabled{background-color: rgba(255, 0, 0, 0.164);} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .select_choice_backorder_inner div{margin: 0px; background-color: #ef305e !important; width: 100%; border-radius: 5px; font-size: 14px; height: 25px; margin-bottom: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .select2-container--default .select2-selection--single .select2-selection__rendered{background-color: #f1f1f1;border-radius: 5px;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .select2-container--default .select2-selection--single{border: none;} .create_project_in_modal_tabs_inner .item_tab_inner .item_input .select2-container{z-index: 0;} .create_project_in_modal_tabs_inner .item_tab_inner .split{height: 2px; background-color: rgba(255, 0, 0, 0.164); width: 100%; margin: 10px 0;} @media only screen and (max-width: 900px) { .create_project_in_modal_tabs_inner .item_tab{width: 100%;} .create_project_in_modal_tabs_inner .item_tab_button{margin-bottom: 10px;} } /* SETTINGS ***************************************************************************************************************************************************/ .settings{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .settings_inner{ display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 100%; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;} .settings_inner .left{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 20%;} .settings_inner .left a{width: 100%; text-align: center; text-decoration: none; cursor: pointer;} .settings_inner .left .item{transition: all 0.2s ease-in-out; border-radius: 8px; padding: 9px; color: #11101c; font-weight: bold; margin-bottom: 10px;} .settings_inner .left .item:hover{background-color: var(--second); color: #fff; transition: all 0.2s ease-in-out;} .settings_inner .right{width: 78%;} .settings_inner .item{ position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; background-color: #f8f8f8; margin-bottom: 10px; padding: 10px; border-radius: 10px; overflow: hidden;} .settings_inner iframe{ width: 100%; height: 100vh; border-radius: 10px; border: none;} .settings_inner .item .edit{ position: absolute; right: -6px; top: -10px;} .settings_inner .item .edit a{ color: var(--theme);} .settings_inner .item_inner .inner{ width: 25%;} .settings_inner .item_inner .description{width: 100%;text-align: center;} .settings_inner .line_between{ height: 2px; width: 100%; background-color: var(--theme); border-radius: 10px;} @media only screen and (max-width: 880px) { .settings_inner .left .item{ padding: 5px;font-size: 12px;} } @media only screen and (max-width: 520px) { .settings_inner{flex-direction: column;} .settings_inner .left{ width: 100%;} .settings_inner .right{width: 100%;} } /* WORKPLACE **************************************************************************************************************************************************/ .workplace_header{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 0px 0 10px 0;} .workplace_header_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 500px; border-radius: 0 0 20px 20px; padding: 20px;color: #11101c;} .workplace_header_inner h1{ font-family: var(--font2); font-weight: light; font-size: 20px;} .workplace_dashboard{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 95%; max-width: 1240px; padding: 40px 20px; border-radius: 0 20px 20px 0; background-color: #fff; color: var(--theme); box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px; margin-top: 40px;} .workplace_title i{ padding-right: 5px; color: var(--second);} .workplace_title_inner h1{ font-family: var(--font2); font-weight: 600; color: var(--second); font-size: 20px; width: 100%; padding: 20px 20px 20px 30px; margin-bottom: -40px;} .workplace_dashboard_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: wrap; width: 100%;} .workplace_dashboard_inner a.block{ display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px dashed var(--second); text-decoration: none;} .workplace_dashboard_inner .block{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px;} .workplace_dashboard_inner a{ text-decoration: none; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;background-color: #f8f8f8; text-decoration: none; color: #363535; width: 30%; transition: all 0.3s ease-in-out;} .workplace_dashboard_inner a:hover{ background-color: #dfdcdc; transition: all 0.3s ease-in-out;} .workplace_dashboard_inner .block h1{ display: flex; justify-content: center; align-items: center; width: 100%; font-size: 25px; font-family: var(--font2); font-weight: 400;} .workplace_dashboard_inner .block i{ display: flex; justify-content: center; align-items: center; margin-top: 20px; width: 100%; font-size: 30px;} .workplace_block{ display: flex; justify-content: center; align-items: center; width: 100%;} .workplace_block_inner{ display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1240px; padding: 0 20px;} @media only screen and (max-width: 900px) { .workplace_dashboard_inner .block h1{font-size: 20px;} .workplace_dashboard_inner .block i{font-size: 25px;} } @media only screen and (max-width: 710px) { .workplace_dashboard_inner a{width: 48%;margin-bottom: 20px;} } @media only screen and (max-width: 460px) { .workplace_dashboard_inner a{ width: 100%;} } .workplace_dashboard_right{ display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column; width: 100%;} .workplace_dashboard_right i{ padding-right: 5px; color: #6d181f5a;} .workplace_dashboard_right h1{ display: flex; justify-content: flex-end; font-family: var(--font2); font-weight: 600; color: #6d181fb0; font-size: 20px; padding: 20px 30px 20px 20px;} .workplace_dashboard_right_inner{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; width: 100%; max-width: 85%; padding: 40px 20px; border-radius: 20px 0 0 20px; background-color: #fff; color: var(--theme);} .workplace_dashboard_right_inner .block{ display: flex; justify-content: flex-start; align-items: center; flex-direction: column; text-decoration: none; border-radius: 10px; border: 1px dashed var(--theme); background-color: #f8f8f8; text-decoration: none; width: 30%; height: 150px; padding: 10px; transition: all 0.3s ease-in-out; color: #6d181fb0;} .workplace_dashboard_right_inner .block h1{ display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; font-size: 25px;} .workplace_dashboard_right_inner .block p{ display: flex; justify-content: center; align-items: flex-start; margin-top: 20px; width: 100%; font-size: 30px; font-weight: bold;} @media only screen and (max-width: 900px) { .workplace_dashboard_right_inner .block{ width: 48%;margin-bottom: 20px;} .workplace_dashboard_right_inner .block h1{font-size: 20px;} .workplace_dashboard_right_inner .block p{font-size: 25px;} } @media only screen and (max-width: 460px) { .workplace_dashboard_right_inner .block{ width: 100%;} .workplace_dashboard_right_inner{max-width: 95%;} } @media only screen and (max-width: 500px) { /* .workplace_header_inner h1 {margin-top: 20px;} */ } /* Start Productie */ .start_production_screen{ display: flex; align-items: center; justify-content: center; width: 100%;} .start_production_screen_inner{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; max-width: 1260px; padding: 20px; margin: 20px; text-align: center;} .start_production_screen_inner h1{ font-family: var(--font2); margin-bottom: 20px;} .start_production_screen_inner b{ font-weight: bold; color: var(--theme);} .start_production_screen_inner p{ color: #000; margin-bottom: 20px;} .start_production_screen_inner h1 b{color: var(--theme);} .workplace_add_backorder{ display: flex; justify-content: center; align-items: center; width: 100%;} .workplace_add_backorder_inner{ display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1200px; margin: 0 20px;} .workplace_add_backorder_items{ display: flex; justify-content: center; align-items: center; width: 100%;} .workplace_add_backorder_items_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;} .workplace_add_backorder_items_inner .item{ width: 32%;} .select_choice_backorder{display: flex; justify-content: center; align-items: center; width: 100%;} .select_choice_backorder_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .select_choice_backorder_inner div{ display: flex; justify-content: center; align-items: center; width: 48%; border: none; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 10px 0 15px 0; background-color: var(--primary); color: #fff; cursor: pointer;} @media only screen and (max-width: 500px) { .select_choice_backorder_inner div{ width: 100%;} } /* Multiple select */ .model_body_top_inner .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .model_body_top_inner .multiselect { width: 300px; font-size: 15px; padding-bottom: 4px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.1); transition: 0.2s; outline: none;} .model_body_top_inner .multiselect:hover { border: 1px solid rgba(0, 0, 0, 0.3);} .model_body_top_inner .multiselect.active { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 1px solid transparent;} .model_body_top_inner .multiselect>.title { cursor: pointer; height: 30px; padding: 6px;} .model_body_top_inner .multiselect>.title>.text { width: 300px; max-height: 25px; display: block; float: left; overflow: hidden; line-height: 1.3em;} .model_body_top_inner .multiselect>.title>.expand-icon, .model_body_top_inner .multiselect>.title>.close-icon { float: right; border-radius: 50%; padding: 0 4px; border: 1px solid rgba(0, 0, 0, 0.1); font-weight: 700; transition: 0.2s; display: none;} .model_body_top_inner .multiselect.selection>.title>.expand-icon { display: none; position: relative; top: -19px; right: -225px;} .model_body_top_inner .multiselect>.title>.expand-icon, .model_body_top_inner .multiselect.selection>.title>.close-icon { display: block; position: relative; top: -19px; right: -225px;} .model_body_top_inner .multiselect>.title>.close-icon:hover { border: 1px solid rgba(0, 0, 0, 0.3); background: rgb(203, 32, 32); color: #fff;} .model_body_top_inner .multiselect>.container { max-height: 200px; overflow: auto; margin-top: 4px; margin-left: -1px; width: 300px; transition: 0.2s; position: absolute; z-index: 99; background: #fff; border: 1px solid transparent; border-top: 1px solid rgba(0, 0, 0, 0.1);} .model_body_top_inner .multiselect.active>.container { border: 1px solid rgba(0, 0, 0, 0.1); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top: 0;} .model_body_top_inner .multiselect:hover>.container { border-top-color: rgba(0, 0, 0, 0.3);} .model_body_top_inner .multiselect.active:hover>.container { border-color: rgba(0, 0, 0, 0.3);} .model_body_top_inner .multiselect>.container>option { display: none; padding: 5px; cursor: pointer; transition: 0.2s; border-top: 1px solid transparent; border-bottom: 1px solid transparent;} .model_body_top_inner .multiselect>.container>option.selected { background: #831d25; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #fff; border-radius: 5px; margin-bottom: 2px;} .model_body_top_inner .multiselect>.container>option:hover { background: #831d25; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #fff; border-radius: 5px;} .model_body_top_inner .multiselect.active>.container>option { display: block;} @media only screen and (max-width: 1000px) { .model_body_top_inner .multiselect.selection>.title>.expand-icon { right: -150px;} .model_body_top_inner .multiselect>.title>.expand-icon, .model_body_top_inner .multiselect.selection>.title>.close-icon {right: -150px;} } @media only screen and (max-width: 710px) { .model_body_top_inner .multiselect{ width: 200px;} .model_body_top_inner .multiselect>.container{ width: 200px;} .model_body_top_inner .multiselect>.title>.text{width: 200px;} .model_body_top_inner .multiselect.selection>.title>.expand-icon {right: -140px;} .model_body_top_inner .multiselect>.title>.expand-icon, .model_body_top_inner .multiselect.selection>.title>.close-icon {right: -140px;} } @media only screen and (max-width: 600px) { .model_body_top_inner .multiselect.selection>.title>.expand-icon {right: -35px;} .model_body_top_inner .multiselect>.title>.expand-icon, .model_body_top_inner .multiselect.selection>.title>.close-icon {right: -35px;} } /* Workplace popup */ .workplace_popup_form{ display: flex; justify-content: center; align-items: center; width: 100%;} /* Workplace add delivery */ .office_add_delivery{ display: flex; justify-content: center; align-items: center; width: 100%;} .office_add_delivery_inner{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;width: 100%;} .office_add_delivery_inner .item{ width: 30%;} .office_add_delivery_inner .item input{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .office_add_delivery_inner .item select{ border: none; width: 100%; height: 50px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .office_add_delivery_inner .item textarea{ border: none; width: 100%; height: 80px; border-radius: 10px; padding: 10px 20px; margin: 5px 0 15px 0; background-color: var(--input);} .office_add_delivery_inner .select_choice_backorder{ text-align: center;} @media only screen and (max-width: 800px) { .office_add_delivery_inner .item{width: 48%;} } .last_ten_deliveries{ display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #0000002e;} .last_ten_deliveries_inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 100%; max-width: 1200px; background-color: #fff; border-radius: 10px; margin: 10px; height: 300px; overflow: scroll; z-index: 2;} .last_ten_deliveries_inner .item{ display: flex; justify-content: space-between; align-items: center; padding: 10px 10px; width: 100%; font-size: 12px; border-bottom: 1px solid #00000029; transition: all 0.1s ease-in-out; cursor: pointer;} .last_ten_deliveries_inner .item:hover{ background-color: #0000002e; transition: all 0.1s ease-in-out;} .last_ten_deliveries_inner .item .upper_item{ display: flex; justify-content: space-between; align-items: center; width: 100%;} .last_ten_deliveries_inner .item .item_inner{ display: flex; justify-content: space-between; flex-direction: column; width: 100%; margin: 0 20px; padding: 10px;} /* TABLE **************************************************************************************************************************************************/ /* Om table heen */ .default_table{ display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; border-radius: 5px; padding: 0 20px;} .default_table_title{ display: flex; justify-content: flex-start; width: 100%; font-family: var(--font2); font-weight: 600; color: #ef305e; font-size: 20px; margin: 20px 0;} .default_table_inner{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 100%;} /* Table topbar */ .default_table_inner_top{ display: flex; justify-content: center; align-items: center; width: 100%;} .default_table_inner_top_inner{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%; padding-top: 15px; z-index: 1;} .default_table_inner_top_inner .left .default_table_inner_search{ border: 1px solid rgb(216, 215, 215); padding: 10px; border-radius: 5px;} .default_table_inner_top_inner .left .default_table_inner_filter_button{ background-color: #fff; padding: 10px; border: 1px solid rgb(216, 215, 215); color: #000000ba; height: 35px; text-decoration: none; border-radius: 5px; margin-left: 10px; font-size: 14px; cursor: pointer;} .default_table_inner_top_inner .right select{ background-color: #fff; padding: 10px; border: 1px solid rgb(216, 215, 215); color: #000000ba; height: 35px; text-decoration: none; border-radius: 5px; margin-left: 10px; font-size: 14px; height: 40px;} /* Table zelf */ .main-wrapper{ width: 100%; overflow-x: auto; margin-top: 20px; border-radius: 5px 5px 0 0;} .responsive-table .color{width: 25px; height: 25px; border-radius: 5px;} .responsive-table{ display: inline-block; min-width: 100%;} .responsive-table .header{ font-weight: bold; padding: 5px 10px; border-radius: 5px; background-color: #b1b5c12b; color: #000; width: 210px; text-align: center;} .responsive-table > table {width: 100%;border-collapse: collapse;} .responsive-table > table thead {background-color: #f2f2f3;} .responsive-table > table thead i{color: #34476792;} .responsive-table > table a{color: #5048e4;text-decoration: none;cursor: pointer;} .responsive-table > table .delete{color: var(--red);text-decoration: none;cursor: pointer;} .responsive-table > table .boolean{padding: 5px 10px;background-color: #d1f9e5;border-radius: 20px;text-align: center;} .responsive-table > table .edit{padding: 5px 10px;background-color: #2c62ff2b;color: var(--primary);border-radius: 20px;text-align: center;} .responsive-table > table .disabled{padding: 5px 10px;background-color: #fee2e1;color: #9e2424;border-radius: 20px;text-align: center;} /*.responsive-table > table textarea{border: none;width: 100%;height: 70px;border-radius: 10px;padding: 10px 10px;background-color: var(--input);}*/ .responsive-table > table td, th {border-bottom: 1px solid #cccccc;padding: 16px 8px;font-size: 16px;text-align: left;} .responsive-table > table .table-row:hover {background-color: #d5d7d8aa;} .responsive-table > table .table-row .user_badge {position: relative; display: flex; justify-content: center; align-items: center; background-color: #101827; color: #fff; font-size: 14px; width: 50px; height: 50px; border-radius: 50%; margin-right: 20px;} .responsive-table > table .table-row .user_badge .fa-circle{position: absolute; top: -2px; left: 0;} @media only screen and (max-width: 1000px) { .default_table_inner_top_inner{align-items: flex-start;flex-direction: column;} .default_table_inner_top_inner .right{margin-top: 10px;} .default_table_inner_top_inner .right select{margin-left: 0px;margin-bottom: 10px;} .default_table_inner_top_inner .right #filter{width: 250px;} .responsive-table > table td, th {font-size: 12px;} } @media only screen and (max-width: 450px) { .default_table_inner_top_inner .left .default_table_inner_search{margin-bottom: 10px;} .default_table_inner_top_inner .left{display: flex;flex-direction: column;} .default_table_inner_top_inner .left .default_table_inner_filter_button{margin-left: 0px;} } /* Pagination */ .pagination{display: flex;justify-content: flex-start;align-items: center;width: 100%;padding: 10px 0;} .pagination .page-item{padding: 3px 7px;border-radius: 5px;} /* .pagination button{box-shadow: none;background-color: #fff;color: #000;} */ .pagination .disabled{padding: 10px 20px;font-size: 18px;border-radius: 10px;border: none;color: #000;cursor: pointer;transition: all 0.3s ease-in-out;cursor: no-drop;} .pagination .active{padding: 10px 15px;background-color: var(--primary);color: #fff;} .pagination li{list-style: none;} /* Popup filter */ .overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);transition: opacity 500ms;visibility: hidden;opacity: 0;z-index: 2;} .overlay:target {visibility: visible;opacity: 1;} .popup_filters {margin: 70px auto;padding: 20px;background: #fff;border-radius: 5px;width: 50%;position: relative;transition: all 0.3s ease-in-out;} .popup_filters textarea{background-color: #fff !important;} .popup_filters select{border: 1px solid whitesmoke !important;} .popup_filters label{text-align: left;} .modal-body .item input{background-color: #fff;width: 80%;border: none;padding: 10px;border-radius: 5px;} .popup_filters .head{display: flex;justify-content: center;align-items: center;width: 100%;margin-bottom: 20px;} .popup_filters .head_inner{display: flex;justify-content: space-between;align-items: center;width: 100%;max-width: 100%;} .popup_filters h1{font-family: var(--font2);color: var(--theme);} .popup_filters .close {position: absolute;top: 18px;right: 30px;transition: all 200ms;font-size: 30px;font-weight: bold;text-decoration: none;color: #333;} .popup_filters .close:hover {color: var(--primary);} .popup_filters .item{padding: 5px;margin-bottom: 5px;border-radius: 5px;background-color: whitesmoke;} @media screen and (max-width: 700px){ .popup_filters{width: 70%;} } /* Uitklaptable */ .extra-info {display: table-row;transition: height 0.4s ease;overflow: hidden;height: 0;} .extra-info.open {height: auto;} .open_table_row{display: flex;justify-content: center;align-items: center;width: 25px;height: 25px;border-radius: 50%;color: var(--theme);background-color: #f2f2f3;border: 1px solid var(--theme);cursor: pointer;} /* ADD DELIVERY TO PLANNING **************************************************************************************************************************************************/ .add_delivery_to_planning{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .add_delivery_to_planning_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; background-color: #fff; padding: 20px; border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;} .add_delivery_to_planning_inner .add_delivery_to_planning_item{position: relative; display: flex; justify-content: center; align-items: center;width: 100%;padding: 10px; border-radius: 5px; background-color: #f8f9fa; margin-bottom: 20px;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left{width: 48%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left .title{margin-bottom: 10px; color: #344767; font-weight: 400; font-size: .875rem;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left .info{font-weight: 600; font-size: .775rem; color: #41577d} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left .info b{font-weight: 400; color: #344767;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left .backorder{padding: 5px; margin-top: 10px; border-radius: 5px; background-color: #2fceb4; color: #fff; width: 70px; text-align: center; font-size: 12px;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right{width: 48%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .date{display: flex; justify-content: center; align-items: center; width: 100%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right input{padding: 10px; border-radius: 5px; border: none;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .add{display: flex; background-color: #f8f9fa !important; color: #344767 !important; box-shadow: none !important; font-size: 12px !important;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .add i{margin-right: 5px;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .delete{display: flex; background-color: #f8f9fa !important; color: red !important; box-shadow: none !important; font-size: 12px !important;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .delete i{margin-right: 5px;} .add_delivery_to_planning .alert{position: absolute; right: 20px; top: -17px; font-size: 12px; color: red; margin-top: 10px;} .add_delivery_to_planning .icon{display: none;} @media screen and (max-width: 1220px){ .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left{width: 30%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right{width: 68%;} } @media screen and (max-width: 1000px){ .add_delivery_to_planning .icon{display: flex;} .add_delivery_to_planning .alert_text{display: none;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .left{width: 60%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right{width: 38%;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .date{margin: 20px 0; align-items: flex-end; flex-direction: column;} .add_delivery_to_planning_inner .add_delivery_to_planning_item_inner .right .add{text-align: center;} } /* BOK BEKIJKEN **************************************************************************************************************************************************/ .bok_show_page{position: relative; display: flex; justify-content: center; align-items: center; width: 100%;} .bok_show_page_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 20px; background-color: #fff; border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;} .bok_show_page_inner .left_show{width: 38%; border: 1px solid #F1F1F2; border-radius: 10px; padding: 20px;} .bok_show_page_inner .left_show .top{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 300px;} .bok_show_page_inner .left_show .top .icon{display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; background-color: #3f95ff1e;} .bok_show_page_inner .left_show .top .icon img{width: 80px; height: 80px; object-fit: contain;} .bok_show_page_inner .left_show .top h1{margin-top: 10px; font-family: var(--font2);} .bok_show_page_inner .left_show .details{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .bok_show_page_inner .details_line{width: 100%; border-top: 1px dotted #d7cececb; margin: 20px 0;} .bok_show_page_inner .title{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .bok_show_page_inner .left_show .details .title .ref{font-size: 12px; padding: 5px; border-radius: 5px; background-color: #2fceb4; color: #fff;} .bok_show_page_inner .left_show .details .data .item{margin-bottom: 10px;} .bok_show_page_inner .left_show .details .data .item b{color: #071437; font-weight: 400;} .bok_show_page_inner .left_show .details .data .item p{color: #78829d; font-size: 12px; font-weight: 300;} .bok_show_page_inner .right_show{position: sticky; top: 60px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 60%; border: 1px solid #F1F1F2; border-radius: 10px; padding: 20px;} .bok_show_page_inner .right_show .item_right{width: 48%;} .bok_show_page_inner .right_show .qr_code_bok_show{width: auto;} @media screen and (max-width: 1350px){ .bok_show_page_inner .right_show .item_right{width: 100%; margin-bottom: 10px;} } @media screen and (max-width: 880px){ .bok_show_page_inner .left_show{width: 100%; margin-bottom: 20px;} .bok_show_page_inner .right_show{width: 100%;} .bok_show_page_inner .right_show .qr_code_bok_show svg{width: 100%;} .bok_show_page_inner{padding: 0px;} } /* CAMERA CHAUFFEUR **************************************************************************************************************************************************/ :root { --background: #fff; --foreground: #000; --divider: #dcdcdc; --overlay: #888; } @media (prefers-color-scheme: dark) { :root { --background: #000; --foreground: #fff; --divider: #333; } } .body_camera{display: flex; justify-content: center; background: var(--background);color: var(--foreground);overflow: hidden;line-height: 1.5;-webkit-tap-highlight-color: transparent; padding: 20px; height: 100%;} .sheet { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; visibility: visible; transition: opacity 0.5s, visibility 0.5s;} .sheet video{border-radius: 5px;} .sheet img{border-radius: 5px; width: 100%;} .sheet[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none;} .sheet .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: var(--overlay); opacity: 0.5;} .sheet .contents { display: flex; flex-direction: column; border-radius: 1rem 1rem 0 0; background: var(--background); overflow-y: hidden; --default-transitions: transform 0.5s, border-radius 0.5s; transition: var(--default-transitions); transform: translateY(0); max-width: 70rem; max-height: 100vh; height: 30vh; box-sizing: border-box;} .sheet .contents:not(.not-selectable) { transition: var(--default-transitions), height 0.5s;} .sheet .contents.fullscreen {border-radius: 0;} .sheet[aria-hidden="true"] .contents {transform: translateY(100%);} .sheet .controls { display: flex;} .sheet .draggable-area { width: 3rem; margin: auto; padding: 1rem; cursor: grab;} .sheet .draggable-thumb {width: inherit; height: 0.25rem; background: var(--divider); border-radius: 0.125rem;} .sheet .close-sheet {font-size: 28px; border: none; padding: 0.7rem;} .sheet .body { flex-grow: 1; height: 100%;display: flex;flex-direction: column;overflow-y: auto;gap: 1rem;padding: 1rem;box-sizing: border-box;} .sheet #captureBtn {display: flex; transition: all 0.2s ease-in-out; justify-content: center; align-items: center; cursor: pointer; width: 60px; height: 60px; background-color: #F1F1F2; border-radius: 50%; margin-top: 20px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .sheet #captureBtn i{color: #ff0078; font-size: 30px;} .sheet #captureBtn:active {transition: all 0.2s ease-in-out; width: 58px; height: 58px;} .sheet #retryBtn {display: flex; transition: all 0.2s ease-in-out; justify-content: center; align-items: center; cursor: pointer; width: 60px; height: 60px; background-color: #F1F1F2; border-radius: 50%; margin-top: 20px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .sheet #retryBtn i{color: #ff0078; font-size: 30px;} .sheet #retryBtn:active {transition: all 0.2s ease-in-out; width: 58px; height: 58px;} .sheet #saveBtn {display: flex; transition: all 0.2s ease-in-out; justify-content: center; align-items: center; cursor: pointer; width: 60px; height: 60px; background-color: #F1F1F2; border-radius: 50%; margin-top: 20px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .sheet #saveBtn i{color: var(--blue); font-size: 30px;} .sheet #saveBtn:active {transition: all 0.2s ease-in-out; width: 58px; height: 58px;} .sheet .center_camera{display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%;} .sheet .camera_buttons{display: flex;} .sheet .camera_buttons div{margin: 0 10px;} /*#open-sheet{border-radius: 5px; padding: 10px; background-color: #ff0078; color: #fff;}*/ /* ADDITION PLANNING **************************************************************************************************************************************************/ .addition_planning{display: flex; justify-content: center; align-items: center; width: 100%;} .addition_planning_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; flex-wrap: wrap; max-width: 100%; width: 100%;} .addition_planning_inner .addition_planning_inner_title{display: flex; justify-content: flex-start; align-items: flex-start;} .addition_planning_inner .addition_planning_inner_title h5{color: #000; font-family: var(--font2); font-size: 12px;} .addition_planning_inner .addition_planning_inner_title_line{border-top: 1px dotted #d7cececb; margin: 10px 0; width: 100px;} .addition_planning_inner .addition_planning_inner_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; background-color: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 32%; margin: 0 10px 5px 0; margin-right: 10px; margin-bottom: 5px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item h5{color: #000; font-family: var(--font2); font-weight: 300; font-size: 10px; margin-bottom: 2px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item input{width: 100%; padding: 5px; border-radius: 5px; border: none; font-size: 12px;box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item select{width: 100%; padding: 5px; border-radius: 5px; border: none; font-size: 12px;box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; height: auto; margin: 0;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left{ width: 48%; margin-top: 10px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left .addition_planning_inner_item{display: flex; flex-direction: row; align-items: center; width: 100%;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left .switch{width: 26px; height: 18px; margin-left: 5px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left .switch .slider:before{width: 10px; height: 10px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left .switch input:checked + .slider:before {transform: translateX(7px);} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_right{width: 48%; margin-right: 10px;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_right .addition_planning_inner_item{width: 100%;} .addition_planning_inner .addition_planning_inner_block .main-wrapper{margin-top: 0;} .addition_planning_inner .addition_planning_inner_block .main-wrapper .responsive-table > table td, th{font-size: 12px; color: #071437;} @media screen and (max-width: 980px){ .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item{margin-right: 0px;} .addition_planning_inner .addition_planning_inner_block{justify-content: space-between;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_item{width: 48%;} } @media screen and (max-width: 500px){ .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_left{width: 100%;} .addition_planning_inner .addition_planning_inner_block .addition_planning_inner_block_right{width: 100%;} } /* ADDITION DELIVERY ***************************************************************************************************************************************************/ .addition_delivery{display: flex; justify-content: center; align-items: center; width: 100%;} .addition_delivery_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%;} .addition_delivery_inner .addition_delivery_inner_block{position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; background-color: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 10px;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_item_right_under{display: flex; align-items: center; position: absolute; right: 20px; bottom: 10px; color: #071437; font-size: 12px; } .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_item_right_under p{font-size: 12px; margin-left: 5px;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left{display: flex; justify-content: flex-start; align-items: flex-start;flex-direction: column; width: 65%;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left .addition_delivery_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; font-size: 14px;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left .addition_delivery_inner_item p{text-align: left; margin-bottom: 10px;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left .addition_delivery_inner_item b{font-weight: bold; color: #071437;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left .addition_delivery_inner_item .rounded{padding: 5px; border-radius: 5px; color: #fff;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_right{display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column; width: 30%;} @media screen and (max-width: 520px){ .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_left{width: 100%; margin-bottom: 20px;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_block_right{width: 100%;} .addition_delivery_inner .addition_delivery_inner_block .addition_delivery_inner_item_right_under{bottom: 5px; left: 5px; right: auto;} } /* PLANNING DELIVERIES */ .planning_deliveries{position: relative; display: flex; justify-content: center; align-items: center; width: 100%;} .planning_deliveries_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;} .planning_deliveries_inner .left_planning{position: sticky; height: calc(100vh - 70px); top: 60px; width: 25%; border: 1px solid #F1F1F2; padding: 20px; border-radius: 10px; background-color: #fff;overflow-y: scroll;} .planning_deliveries_inner .left_planning .search{display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px;} .planning_deliveries_inner .left_planning .search_inner{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;} .planning_deliveries_inner .left_planning .search_inner input{width: 100%; padding: 10px; border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; border: none; background-color: #fff;} .planning_deliveries_inner .left_planning .search_inner input:focus{ background-color: #f8f9fa;} .planning_deliveries_inner .left_planning .left_planning_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; margin-bottom: 5px; width: 100%; padding: 5px; border-radius: 5px; cursor: grab; background-color: var(--bg_blocks);border: 1px solid #e1e0e0;} .planning_deliveries_inner .left_planning .left_planning_item:hover{ background-color: rgb(213, 213, 217);} .planning_deliveries_inner .left_planning .left_planning_item b{color: #344767;font-weight: 400;font-size: 13px; line-height: 1.2;} .planning_deliveries_inner .left_planning .left_planning_item .desc{color: #344767; margin-top: 5px; font-weight: 600;font-size: 11px;} .planning_deliveries_inner .title{margin-bottom: 20px; font-size: 20px; font-weight: 600; font-family: var(--font2);} .planning_deliveries_inner .sticky_title{position: sticky; top: -20px; background-color: #fff; padding: 10px 0;} .planning_deliveries_inner .planning_deliveries_line{margin-bottom: 20px; font-size: 20px; font-weight: 600; font-family: var(--font2);width: 100%; border-top: 1px dotted #d7cececb; margin: 10px 0;} .planning_deliveries_inner .right_planning{width: 74%; border: 1px solid #F1F1F2; padding: 20px; border-radius: 10px; background-color: #fff;} .planning_deliveries_inner .right_planning_items{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%;} .planning_deliveries_inner .right_planning_items .top{display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; margin-top: 10px; padding: 10px; border-radius: 5px; background-color: var(--bg_blocks);box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .planning_deliveries_inner .right_planning_items .top .header_title { width: 15%; font-weight: 500; font-size: 15px; color: #344767; font-family: var(--font2); } .planning_deliveries_inner .right_planning_items .bottom{position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; padding: 5px; border-radius: 5px; cursor: grab; background-color: var(--bg_blocks);border: 1px solid #e1e0e0; margin-bottom: 10px;} .planning_deliveries_inner .right_planning_items .bottom .action{position: absolute; right: -5px; top: -8px; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; background-color: var(--second); border-radius: 50%; cursor: pointer;} .planning_deliveries_inner .right_planning_items .bottom .action i{font-size: 10px; color: #fff;} .planning_deliveries_inner .right_planning_items .bottom .action2{position: absolute; right: 12px; top: -8px; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; background-color: red; border-radius: 50%; cursor: pointer;} .planning_deliveries_inner .right_planning_items .bottom .action2 i{font-size: 10px; color: #fff;} .planning_deliveries_inner .right_planning_items .bottom .bottom_item { width: 15%; font-weight: 300; padding: 0 5px 0 5px; font-size: 13px; color: #344767; font-family: var(--font1); } .planning_deliveries_inner .right_planning_items .right_planning_item_date{font-weight: bold; margin-top: 10px; margin-bottom: 5px; padding: 5px 10px; border-radius: 5px; background-color: #b1b5c12b; color: var(--second); font-size: 12px; width: 140px; text-align: center;} #itemList .selected b{color: #fff !important;} @media screen and (max-width: 1340px){ .planning_deliveries_inner .right_planning_items .top{display: none;} } @media screen and (max-width: 1000px){ .planning_deliveries_inner .left_planning{width: 100%; margin-bottom: 20px; height: 250px; overflow-y: scroll;} .planning_deliveries_inner .right_planning{width: 100%;} } @media screen and (max-width: 880px){ .planning_deliveries_inner .right_planning_items .bottom .bottom_item{width: 100%;} } /* DASHBOARD V2 */ .dashboardv2_block_items{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .dashboardv2_block_items_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%;} .dashboardv2_block_items_inner .block_itemv2{width: 32%; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, .02); margin-bottom: 10px;} .dashboardv2_block_items_inner .block_itemv2 .top{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .dashboardv2_block_items_inner .block_itemv2 .top_parent{display: flex; align-items: center;} .dashboardv2_block_items_inner .block_itemv2 .top .icon{position: relative; display: flex; justify-content: center; align-items: center; padding: 5px; border-radius: 5px; background-color: #f1faff; width: 50px; height: 50px; margin-right: 10px; box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, .02);} .dashboardv2_block_items_inner .block_itemv2 .top .icon .point{position: absolute; left: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background-color: #22d48a;} .dashboardv2_block_items_inner .block_itemv2 .top .icon img{width: 100%;} .dashboardv2_block_items_inner .block_itemv2 .top .title{margin-right: 10px;} .dashboardv2_block_items_inner .block_itemv2 .top .title h3{font-size: 14px; font-family: var(--font2); font-weight: 400; color: #252f4a;} .dashboardv2_block_items_inner .block_itemv2 .top .title p{font-size: 12px; font-family: var(--font1); font-weight: 300; color: #98a1b7;} .dashboardv2_block_items_inner .block_itemv2 .value {text-decoration: none; display: flex; justify-content: center; font-size: 24px; font-family: var(--font2); padding: 10px; width: 50px; height: 50px; border-radius: 50%; background-color: #22d48a2e; font-weight: 600; color: #22d48a; position: relative; overflow: hidden;} .dashboardv2_block_items_inner .block_itemv2 .value::before { content: ""; position: absolute; background-color: rgba(34, 212, 138, 0.5); border-radius: 50%; width: 200px; height: 200px; animation: flyOut 5s ease-in-out infinite;} .dashboardv2_block_items_inner .block_itemv2 .value2 {background-color: #00a3ff2b; color: #00a3ff;} .dashboardv2_block_items_inner .block_itemv2 .value2::before { background-color: #00a3ff2b;} .dashboardv2_block_items_inner .block_itemv2 .value3 {background-color: #f1416c24; color: #f1416c;} .dashboardv2_block_items_inner .block_itemv2 .value3::before { background-color: #f1416c;} .dashboardv2_block_items_inner .block_itemv2 .value4 {background-color: #fff8dd; color: #fec70b;} .dashboardv2_block_items_inner .block_itemv2 .value4::before { background-color: #fec70b;} .dashboardv2_block_items_inner .block_itemv2 .value5 {background-color: #d0bcf8b5; color: #743ae9;} .dashboardv2_block_items_inner .block_itemv2 .value5::before { background-color: #743ae9;} .dashboardv2_block_items_inner .block_itemv2 .value6 {background-color: #35444e2b; color: #35444e;} .dashboardv2_block_items_inner .block_itemv2 .value6::before { background-color: #35444e;} .selected_item_on_dashboard{background-color: #262f4a; color: #fff !important; border-radius: 20px;} @keyframes flyOut { 0% {transform: translate(0, 0) scale(0);opacity: 1;} 100% {transform: translate(-50px, -50px) scale(1);opacity: 0;} } @media screen and (max-width: 1105px){ .dashboardv2_block_items_inner .block_itemv2 .value{margin-top: 10px;} } @media screen and (max-width: 925px){ .dashboardv2_block_items_inner .block_itemv2{width: 49%;} } @media screen and (max-width: 500px){ .dashboardv2_block_items_inner .block_itemv2{width: 100%;} } @media screen and (max-width: 400px){ .dashboardv2_block_items_inner .block_itemv2 .top{flex-direction: column; align-items: flex-start;} } .dashboardv2_block_items_second{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 10px;} .dashboardv2_block_items_second_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;} .dashboardv2_block_items_second_inner .block_itemv2_second{width: 49%; height: 500px; overflow-y: scroll; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, .02); margin-bottom: 20px;} .dashboardv2_block_items_second_inner .block_itemv2_second .top{position: sticky; top: -20px; background-color: #fff; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px;} .dashboardv2_block_items_second_inner .block_itemv2_second .top h3{font-size: 14px; font-family: var(--font2); font-weight: 400; color: #252f4a;} .dashboardv2_block_items_second_inner .block_itemv2_second .top .filter{display: flex; justify-content: center; align-items: center;border-radius: 20px; background-color: var(--bg_blocks);box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;} .dashboardv2_block_items_second_inner .block_itemv2_second .top .filter p{font-size: 14px; font-family: var(--font2); font-weight: 400; color: #252f4a; padding: 5px 10px; cursor: pointer;} .dashboardv2_block_items_second_inner .block_itemv2_second .top .filter p:hover{background-color: #252f4a;color: #fff; border-radius: 20px;} .dashboardv2_block_items_second_inner .block_itemv2_second .top .filter p.active { background-color: #252f4a; color: #fff; border-radius: 20px;} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2px 10px; border-radius: 10px; background-color: #f8f9fa; margin-bottom: 5px;} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list:hover{background-color: #f0f1f3;} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list .users_list_left{display: flex; align-items: center;} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list .icon{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 10px; box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, .02);} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list i{font-size: 14px; color: #252f4a; cursor: pointer;} .dashboardv2_block_items_second_inner .block_itemv2_second .users_list i:hover{color: var(--second);} .dashboardv2_block_items_second_inner .block_itemv2_second img{width: 30px;} .dashboardv2_block_items_second_inner .block_itemv2_second .chart_container{width: 100%;} .dashboardv2_block_items_second_inner .block_itemv2_second .chart_container #timeRegistrationChartMonth{height: 400px;} @media screen and (max-width: 1000px){ .dashboardv2_block_items_second_inner .block_itemv2_second{width: 100%;} } .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block{display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid #f3f4f5; padding: 10px 10px; margin-bottom: 10px; border-radius: 10px;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block:hover{background-color: rgba(204, 204, 204, 0.13);} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_left{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 80%;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_left .title{font-size: 14px; font-family: var(--font2); font-weight: 400; color: #252f4a; margin-bottom: 3px;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_left .title:hover{color: #2c62ff;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_left p{font-size: 12px; font-family: var(--font1); font-weight: 300; color: #98a1b7; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden; margin-bottom: 3px;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_right{display: flex; justify-content: center; align-items: flex-end; width: 15%; flex-direction: column;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_right img{width: 50px; height: 50px; border-radius: 50%; object-fit: cover;} .dashboardv2_block_items_second_inner .block_itemv2_second .block_itemv2_second_list .block_itemv2_second_list_block .block_itemv2_second_list_block_right .link{font-size: 14px; font-family: var(--font2); font-weight: 400; margin-top: 5px;} /* TIME REGISTRATION */ .time_regestration_top{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; padding: 20px; border-radius: 20px; margin-top: 20px; border: 1px solid #F1F1F2;} .time_regestration_top .add_registration_button{position: absolute; right: 20px; top: 20px;} .time_regestration_top_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; flex-wrap: wrap; width: 100%;} .time_regestration_top_inner .start{display: flex;} .time_regestration_top_inner .icon{display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; padding: 20px; background-color: #f9f9f9; border-radius: 20px; margin-right: 20px;} .time_regestration_top_inner .icon img{width: 120px; object-fit: contain;} .time_regestration_top_inner .center h1{font-size: 22px; font-family: var(--font2); color: #262f4a;} .time_regestration_top_inner .center .status_blocks{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .time_regestration_top_inner .center .status_blocks_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%;} .time_regestration_top_inner .center .status_blocks_inner .status_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; border: 1px dashed #DBDFE9;padding: 10px; border-radius: 5px; margin-right: 10px; margin-bottom: 10px;} .time_regestration_top_inner .center .status_blocks_inner .status_block .top_title{font-size: 16px; font-family: var(--font2); color: #262f4a;} .time_regestration_top_inner .center .status_blocks_inner .status_block p{font-size: 14px; font-family: var(--font2); color: #B5B5C3; margin-top: 3px} .time_regestration_top_inner .end{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 20px; border-top: 1px solid #DBDFE9;} .time_regestration_top_inner .end .timeregistration_tabs{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 20px; overflow-x: scroll;} .time_regestration_top_inner .end .timeregistration_tabs_inner{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;} .time_regestration_top_inner .end .timeregistration_tabs_inner a{margin: 0 20px; padding-bottom: 10px; transition: all 0.1s ease-in-out;font-size: 16px; cursor: pointer; font-family: var(--font2); color: #262f4a;} .time_regestration_top_inner .end .timeregistration_tabs_inner .active{color: var(--second); border-bottom: 2px solid var(--second);} .time_regestration_top_inner .end .timeregistration_tabs_inner a:hover{color: var(--second); border-bottom: 2px solid var(--second); transition: all 0.1s ease-in-out;} @media screen and (max-width: 825px){ .time_regestration_top_inner .icon{display: none;} } @media screen and (max-width: 560px){ .time_regestration_top_inner .center .status_blocks_inner .status_block{width: 100%;} .time_regestration_top .add_registration_button{top: -100px; right: 0px;} } .time_regestration_bottom{display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; padding: 20px; border-radius: 20px; margin-top: 20px; border: 1px solid #F1F1F2;} .time_regestration_bottom_inner{display: flex; justify-content: center; align-items: center; width: 100%;} .time_registration_tab_title{position: sticky; top: 50px; background-color: #fff; padding: 10px; z-index: 999 !important; display: flex; justify-content: center; align-items: center; width: 100%;border-bottom: 1px solid #DBDFE9;} .time_registration_tab_title_inner{display: flex; justify-content: space-between; align-items: center; height: 40px; width: 100%;} .time_registration_tab_title_inner h1{font-size: 22px; font-family: var(--font2); color: #262f4a;} .time_registration_tab_title_inner .year{font-weight: 600; font-family: var(--font2); color: var(--text_dark);} /* MODAL */ .md-modal { position: fixed; top: 43%; left: 50%; width: 50%; min-width: 520px; overflow-y: scroll; height: 80vh; z-index: 9999999999; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; margin-top: 30px; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);} .md-modal ::-webkit-scrollbar{width: 0 !important; display: none !important;} .md-show { visibility: visible;} .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 99999999; opacity: 0; background: rgba(40, 43, 49, .8); -webkit-transition: all 0.3s; transition: all 0.3s;} .md-show~.md-overlay { opacity: 1; visibility: visible;} .md-content { color: #333; background: #fff; border-radius: 20px;} .md-effect-1 .md-content { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;} .md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;} @media screen and (max-width: 800px){ .md-content{height: 100vh; border-radius: 0;} .md-modal{min-width: 100vw; height: 100vh; top: 50%; left: 50%; margin: 0;} body.md-show { background-color: #fff !important; z-index: 9999 !important; } .md-modal .rounded-off-on-small-screen{border-radius: 0; box-shadow: none;} } .own_time_registration_modal{position: fixed; top: 0; left: 0; background-color: #fff; height: 100vh; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; overflow-y: scroll; padding-bottom: 70px; z-index: 10 !important;} .own_time_registration_modal_inner{display: flex; justify-content: center; align-items: center; width: 100%;} /* FIELMANAGER */ .file_manager{display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; padding: 20px; border-radius: 20px; margin-top: 20px; border: 1px solid #F1F1F2;} .file_manager_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .file_manager_inner .details_line{width: 100%; border-top: 1px dotted #d7cececb; margin: 20px 0;} .file_manager_inner .left{width: 25%; border: 1px solid #F1F1F2; padding: 20px; border-radius: 10px; background-color: #fff;} .file_manager_inner .left h1{font-size: 18px; font-family: var(--font2); color: #262f4a;} .file_manager_inner .left .folders{display: flex; justify-content: center; align-items: flex-start;flex-direction: column; width: 100%;} .file_manager_inner .left .folders i{color: #DBDFE9; margin-right: 5px; font-size: 14px;} .file_manager_inner .left .folders .folder{display: flex; border-radius: 5px; padding: 5px; width: 100%;} .file_manager_inner .left .folders .folder:hover{background-color: var(--bg_blocks);} .file_manager_inner .left .folders .folder img{width: 20px; height: 20px; object-fit: cover; margin-right: 10px;} .file_manager_inner .left .folders .sub_folder{display: flex; margin-bottom: 5px; margin-left: 20px;} .file_manager_inner .left .folders .sub_folder img{width: 20px; height: 20px; object-fit: cover; margin-right: 10px;} .file_manager_inner .left .folders .sub_folder2{display: flex; margin-bottom: 5px; margin-left: 30px;} .file_manager_inner .left .folders .sub_folder2 img{width: 20px; height: 20px; object-fit: cover; margin-right: 10px;} .file_manager_inner .right{width: 73%; border: 1px solid #F1F1F2; padding: 20px; border-radius: 10px; background-color: #fff;} .file_manager_inner .right h1{font-size: 18px; font-family: var(--font2); color: #262f4a;} @media screen and (max-width: 900px){ .file_manager_inner .left{width: 100%; margin-bottom: 20px;} .file_manager_inner .right{width: 100%;} } /* Employees */ .timeregistration_employees{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px} .timeregistration_employees_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .timeregistration_employees_inner .employee{position: relative; display: flex; justify-content: flex-start; align-items: center; width: 32%; margin-bottom: 20px; padding: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .timeregistration_employees_inner .employee:hover{background-color: var(--bg_blocks); cursor: pointer;} .timeregistration_employees_inner .employee .icon{display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%;margin-right: 20px;} .timeregistration_employees_inner .employee .icon img{width: 60px; height: 60px;} .timeregistration_employees_inner .employee .active_since{position: absolute; right: 5px; bottom: 5px; color: #cccccc; font-size: 12px;} .timeregistration_employees_inner .employee .name{color: var(--title); font-size: 16px; font-family: var(--font2);} .timeregistration_employees_inner .employee .role{color: var(--title); font-size: 14px; font-style: italic; margin-top: 5px;} .time_registrations_list{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .time_registrations_list_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .time_registrations_list_inner .registration{display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; padding: 10px; border-radius: 10px; background-color: var(--bg_blocks);} .time_registrations_list_inner .registration:hover{background-color: #dde6ee;} .time_registrations_list_inner .registration .title{color: #000; font-family: var(--font2); font-size: 14px;} .time_registrations_list_inner .registration .color{width: 25px; height: 25px; border-radius: 50%; margin-right: 10px;} .time_registrations_list_inner .registration .count{padding: 5px; background-color: #fff; border-radius: 5px;color: #000; font-family: var(--font2); font-size: 14px;} @media screen and (max-width: 1100px){ .timeregistration_employees_inner .employee{width: 49%;} .time_registration_tab_title_inner{flex-direction: column; justify-content: flex-start; align-items: flex-start;} .time_registration_tab_title_inner{height: 80px;} .time_registration_tab_title_inner input{margin-top: 10px; width: 200px;} } @media screen and (max-width: 800px){ .timeregistration_employees_inner .employee{width: 100%;} } /* POP-UP last deliveries */ .delivery_popup_last_deliveries{display: flex; justify-content: center; align-items: center; width: 100%;} .delivery_popup_last_deliveries_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; padding: 20px;} .delivery_popup_last_deliveries_inner .delivery_popup_last_deliveries_inner_item{width: 49%; padding: 10px; border-radius: 10px; background-color: var(--bg_blocks); box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; cursor: pointer; margin-bottom: 10px;} .delivery_popup_last_deliveries_inner .delivery_popup_last_deliveries_inner_item .delivery_popup_last_deliveries_inner_item_block{display: flex; justify-content: space-between;} .delivery_popup_last_deliveries_inner .delivery_popup_last_deliveries_inner_item .delivery_popup_last_deliveries_inner_item_block p{display: flex; justify-content: flex-start; margin-left: 10px; font-size: 12px; width: 20%;} .delivery_popup_last_deliveries_inner .delivery_popup_last_deliveries_inner_item .delivery_popup_last_deliveries_inner_item_block span{display: flex; justify-content: flex-end;font-weight: bold; font-size: 14px; width: 75%; color: #071437; font-family: var(--font2);} @media screen and (max-width: 900px){ .delivery_popup_last_deliveries_inner .delivery_popup_last_deliveries_inner_item{width: 100%;} } /* Tijdregistratie grid */ .time_registration_grid{display: flex; justify-content: center; align-items: center; width: 100%;} .time_registration_grid_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 20px;} .time_registration_grid_inner .time_registration_grid_left{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 30%;} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding: 10px; border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; margin-bottom: 10px; background-color: #fff;} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item h5{width: 100%; color: var(--text_dark); font-family: var(--font2); font-size: 16px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #cccccc;} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item p{margin-bottom: 5px; font-size: 14px;} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item .time_registration_grid_left_item_inner{display: flex; justify-content: space-between; align-items: center;width: 100%; padding: 5px; border-radius: 5px; background-color: var(--bg_blocks); margin-bottom: 10px;} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item .time_registration_grid_left_item_inner h4{font-size: 12px !important; font-family: var(--font2); color: var(--text_dark);} .time_registration_grid_inner .time_registration_grid_left .time_registration_grid_left_item .time_registration_grid_left_item_inner .count{padding: 5px 10px; background-color: #fff; border-radius: 20px; color: var(--green); font-weight: 600; font-family: var(--font2);} .time_registration_grid_inner .time_registration_grid_right{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 69%; height: calc(100vh - 180px); overflow: scroll;} .time_registration_grid_inner .time_registration_grid_right .time_registration_grid_right_item .header{margin-bottom: 10px; border-bottom: 1px solid #cccccc;padding-bottom: 10px; } .time_registration_grid_inner .time_registration_grid_right_item_color{border: 1px solid transparent; min-width: 25px; width: 25px; min-height: 25px; height: 25px; border-radius: 50%;} .time_registration_grid_inner .time_registration_grid_right_item_color_all{width: 25px; height: 25px; border-radius: 50%; border: 1px solid #cccccc;} .time_registration_grid_inner .active{border: 1px solid blue;} .time_registration_grid_inner .time_registration_grid_right .time_registration_grid_right_item .header i{font-size: 25px !important;} .time_registration_grid_inner .time_registration_grid_right .time_registration_grid_right_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding: 10px; border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; background-color: #fff;} .time_registration_grid_inner .time_registration_grid_right .time_registration_grid_right_item h5{width: 100%;color: var(--text_dark); font-family: var(--font2); font-size: 16px !important;} .time_registration_grid_inner .registrations_list{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .time_registration_grid_inner .registrations_list .center{margin: 10px 0; padding: 5px; border-radius: 5px; background-color: var(--bg_blocks);} .time_registration_grid_inner .registrations_list .registrations_list_item{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px; background-color: var(--bg_blocks); border-radius: 5px; margin-bottom: 10px;} .time_registration_grid_inner .registrations_list .registrations_list_item .color{min-width: 25px; width: 25px; min-height: 25px; height: 25px; border-radius: 50%; margin-right: 10px;} .time_registration_grid_inner .registrations_list .registrations_list_item .date{font-size: 14px !important; color: var(--text_dark); font-weight: 600;} @media screen and (max-width: 975px){ .time_registration_grid_inner .time_registration_grid_left{width: 100%;} .time_registration_grid_inner .time_registration_grid_right{width: 100%;} } @media screen and (max-width: 600px){ .time_registration_grid_inner .registrations_list .registrations_list_item{flex-direction: column; justify-content: flex-start; align-items: flex-start;} .time_registration_grid_inner .registrations_list .registrations_list_item .right{margin-top: 10px;} .time_registration_grid_inner .registrations_list .center{flex-direction: column; justify-content: flex-start; align-items: flex-start;} .time_registration_grid_inner .registrations_list .center .date{margin-top: 10px;} } /* Hourtypes modal */ .hour_types_modal{display: flex; justify-content: center; align-items: center; width: 100%;} .hour_types_modal_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; padding: 20px;} .hour_types_modal_inner .hour_types_modal_inner_item{display: flex; justify-content: flex-start; align-items: center;width: 100%; padding: 5px; border-radius: 5px; margin-bottom: 10px; background-color: var(--bg_blocks);} .hour_types_modal_inner .hour_types_modal_inner_item:hover{background-color: #E7EEF6FF;} .hour_types_modal_inner .hour_types_modal_inner_item .circle{width: 25px; height: 25px; border-radius: 50%; margin-right: 10px;} .hour_types_modal_inner .hour_types_modal_inner_item p{color: var(--text_dark); font-family: var(--font2); font-size: 14px;} /* Generate verlof */ .time_regestration_bottom_inner .left_absence{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 48%;} .time_regestration_bottom_inner .left_absence h1{color: var(--text_dark); font-size: 24px; font-family: var(--font2); margin-bottom: 20px} .time_regestration_bottom_inner .left_absence .left_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 20px;} .time_regestration_bottom_inner .left_absence .left_item label{font-size: 14px; color: var(--text_dark); font-family: var(--font2); margin-bottom: 5px;} .time_regestration_bottom_inner .left_absence .left_item select{background-color: var(--bg_blocks) !important;} .time_regestration_bottom_inner .left_absence .left_item input{background-color: var(--bg_blocks); border: none; border-radius: 5px;} .time_regestration_bottom_inner .right_absence{width: 48%; padding: 20px 0; margin-top: 40px;} .time_regestration_bottom_inner .right_absence .right_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 20px;} .time_regestration_bottom_inner .right_absence .right_item label{font-size: 14px; color: var(--text_dark); font-family: var(--font2); margin-bottom: 5px;} .time_regestration_bottom_inner .right_absence .right_item input{background-color: var(--bg_blocks); width: 100%; border-radius: 5px; border: none;} .select2-container--default .select2-selection--multiple{background-color: var(--bg_blocks) !important; border: none !important;} @media screen and (max-width: 900px){ .time_regestration_bottom_inner .left_absence {width: 100%;} .time_regestration_bottom_inner .right_absence {width: 100%;} } /* Timeregistration on project addition */ .time_registration_on_project_addition{position: relative; display: flex; justify-content: center; align-items: center; width: 100%;} .time_registration_on_project_addition .open_info{position: absolute; right: -10px; top: -25px; font-size: 20px; cursor: pointer;} .time_registration_on_project_addition_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item{display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: var(--bg_blocks); padding: 10px; border-radius: 5px; margin-bottom: 5px;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item:hover{background-color: #e8eaec;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .user{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; font-weight: 600; color: var(--text_dark); font-size: 14px;font-family: var(--font2);} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .user p{color: var(--text_dark); font-family: var(--font1); font-size: 12px; font-style: italic;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .remark{display: flex;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .remark b{font-weight: 600; color: var(--text_dark); font-family: var(--font2);} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .remark .hours{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; padding: 5px;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .remark .hours b{color: #fff;} .time_registration_on_project_addition_inner .time_registration_on_project_addition_inner_item .remark .hours .text-black{color: var(--text_dark);} /*Employee free*/ .employee_free{position: absolute; top: 20px; left: 10px; cursor: pointer;} .employee_free .employee_free_icon{display: flex; background-color: var(--second); justify-content: center; align-items: center;color: #fff; width: 35px; height: 35px; border-radius: 50%;} .employee_free_container{position: absolute; top: 60px; left: 10px; z-index: 10} .employee_free_container .employee_free_container_icon{display: flex; justify-content: flex-start; background-color: #fff; border: 1px solid #bababa; align-items: flex-start; padding: 10px; border-radius: 10px;} /* EMPLOYEES */ .employees_top{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; padding: 20px; border-radius: 20px; margin-top: 20px; border: 1px solid #F1F1F2;} .employees_top .initials_input_edit{background-color: transparent; width: 80%; padding: 5px; outline: none; border: none; text-align: center; border-radius: 5px; font-size: 20px;} .employees_top .add_registration_button{position: absolute; right: 20px; top: 20px;} .employees_top_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; flex-wrap: wrap; width: 100%;} .employees_top_inner .start{display: flex;} .employees_top_inner .icon{position: relative; display: flex; justify-content: center; align-items: center; background-color: #101827; color: #fff; font-size: 20px; border-radius: 50%; width: 80px; height: 80px; margin-right: 20px;} .employees_top_inner .icon .edit_initial_value_icon{position: absolute; right: 5px; top: 0px; font-size: 22px;} .employees_top_inner .icon img{width: 120px; object-fit: contain;} .employees_top_inner .center h1{font-size: 22px; font-family: var(--font2); color: #262f4a;} .employees_top_inner .center p{font-size: 14px; color: #262f4a; margin: 2px 0;} .employees_top_inner .center .status_blocks{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 10px;} .employees_top_inner .center .status_blocks_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%;} .employees_top_inner .center .status_blocks_inner .status_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; border: 1px dashed #DBDFE9;padding: 10px; border-radius: 5px; margin-right: 10px; margin-bottom: 10px;} .employees_top_inner .center .status_blocks_inner .status_block .top_title{font-size: 16px; font-family: var(--font2); color: #262f4a;} .employees_top_inner .center .status_blocks_inner .status_block p{font-size: 14px; font-family: var(--font2); color: #B5B5C3; margin-bottom: 5px} .employees_top_inner .end{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 20px; border-top: 1px solid #DBDFE9;} .employees_top_inner .end .employees_tabs{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 20px; overflow-x: scroll;} .employees_top_inner .end .employees_tabs_inner{display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;} .employees_top_inner .end .employees_tabs_inner a{margin: 0 20px; padding-bottom: 10px; transition: all 0.1s ease-in-out;font-size: 16px; cursor: pointer; font-family: var(--font2); color: #262f4a;} .employees_top_inner .end .employees_tabs_inner .active{color: var(--second); border-bottom: 2px solid var(--second);} .employees_top_inner .end .employees_tabs_inner a:hover{color: var(--second); border-bottom: 2px solid var(--second); transition: all 0.1s ease-in-out;} @media screen and (max-width: 825px){ .employees_top_inner .icon{display: none;} } @media screen and (max-width: 560px){ .employees_top_inner .center .status_blocks_inner .status_block{width: 100%;} .employees_top_inner .add_registration_button{top: -100px; right: 0px;} } .employees_bottom{display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; padding: 20px; border-radius: 20px; margin-top: 20px; border: 1px solid #F1F1F2;} .employees_bottom_inner{display: flex; justify-content: center; align-items: center; flex-direction: column;width: 100%;} .employees_tab_title{background-color: #fff; z-index: 999 !important; display: flex; justify-content: center; align-items: center; width: 100%;border-bottom: 1px solid #DBDFE9;} .employees_tab_title_inner{display: flex; justify-content: space-between; align-items: center; height: 40px; width: 100%;} .employees_tab_title_inner h1{font-size: 22px; font-family: var(--font2); color: #262f4a;} .employees_tab_title_inner .year{font-weight: 600; font-family: var(--font2); color: var(--text_dark);} .employee_data_form{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .employee_data_form_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .employee_data_form_inner .employee_data_form_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 49%; margin-bottom: 20px;} .employee_data_form_inner .employee_data_form_inner_item label{font-size: 16px; font-family: var(--font2); color: #262f4a; margin-bottom: 2px;} .employee_data_form_inner .employee_data_form_inner_item input{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} .employee_data_form_inner .employee_data_form_inner_item textarea{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} .employee_data_form_inner .employee_data_form_inner_item select{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} @media screen and (max-width: 625px){ .employee_data_form_inner .employee_data_form_inner_item{width: 100%;} } /*Employee Emercency contacts*/ .employee_data_emercency_blocks{display: flex; justify-content: center; align-items: center; width: 100%;} .employee_data_emercency_blocks_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 49%; margin-bottom: 20px; border: 1px solid #d1d5db; border-radius: 5px; padding: 10px;} .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block input{background-color: #f9f9f9;} .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block .title{color: red; font-weight: bold; padding: 5px; background-color: rgba(255, 0, 0, 0.09); border-radius: 5px; margin-bottom: 10px;} .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block .phone{color: #036c4e; font-weight: bold; padding: 5px; background-color: #f3faf7; border-radius: 5px; margin-bottom: 10px;} .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block b{font-size: 12px; font-family: var(--font2); margin-top: 10px;} @media screen and (max-width: 800px){ .employee_data_emercency_blocks_inner .employee_data_emercency_blocks_inner_block{width: 100%;} } /*Workplace Menu*/ .menu_header_user{display: flex; justify-content: center; align-items: center; width: 100%;} .menu_header_user_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding: 20px;} .menu_header_user_inner h1{font-family: var(--font2); font-weight: 600; font-size: 22px;} .menu_header_user_inner span{color: var(--text_dark); font-size: 14px;} .menu_bottom_items{display: flex; justify-content: center; align-items: flex-start; width: 100%; background-color: #fff;} .menu_bottom_items_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; padding: 20px;} .menu_bottom_items_inner .menu_bottom_items_inner_item{display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: inherit; width: 100%; color: var(--text_dark); cursor: pointer; padding-bottom: 15px; border-bottom: 1px solid rgba(204, 204, 204, 0.56); margin-bottom: 18px;} .menu_bottom_items_inner .menu_bottom_items_inner_item p{font-family: var(--font2); width: 100%;} .menu_bottom_items_inner .menu_bottom_items_inner_item i{min-width: 40px; width: 40px; font-size: 22px; color: #0101c2;} .menu_bottom_items_inner .menu_bottom_items_inner_item .count{display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; font-size: 12px; border-radius: 50%; background-color: red; color: #fff; font-family: var(--font2);} /*Menu user data form*/ .menu_employee_data_form{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .menu_employee_data_form_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; padding: 20px; background-color: #fff;} .menu_employee_data_form_inner .menu_employee_data_form_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 49%; margin-bottom: 20px;} .menu_employee_data_form_inner .menu_employee_data_form_inner_item label{font-size: 16px; font-family: var(--font2); color: #262f4a; margin-bottom: 2px;} .menu_employee_data_form_inner .menu_employee_data_form_inner_item input{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} .menu_employee_data_form_inner .menu_employee_data_form_inner_item textarea{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} .menu_employee_data_form_inner .menu_employee_data_form_inner_item select{background-color: rgba(204, 204, 204, 0.13); padding: 10px; width: 100%; border-radius: 5px;} @media screen and (max-width: 625px){ .menu_employee_data_form_inner .menu_employee_data_form_inner_item{width: 100%;} } .back_to_previous_page_arrow{display: flex; justify-content: center; align-items: center; width: 100%; cursor: pointer;} .back_to_previous_page_arrow_inner{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 20px; color: #0101c2;} .back_to_previous_page_arrow_inner div{display: flex; align-items: center;} .back_to_previous_page_arrow_inner i{margin-right: 5px;} .title_menu_workplace_settings{display: flex; justify-content: center; align-items: center; width: 100%; cursor: pointer;} .title_menu_workplace_settings_inner{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 20px; color: var(--text_dark); font-family: var(--font2);} .title_menu_workplace_settings_inner div{display: flex; align-items: center;} .title_menu_workplace_settings_inner i{margin-right: 5px;} /*Tijd registratie mobiel geschiedenis*/ .time_registration_history{display: flex; justify-content: center; align-items: center; width: 100%;} .time_registration_history_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; flex-wrap: wrap; width: 100%; padding-bottom: 100px;} .time_registration_history_inner .title_date { padding: 5px; border-radius: 5px; background-color: rgba(204, 204, 204, 0.2); margin: 5px; font-size: 12px; font-weight: bold; } .time_registration_history_inner .time_registration_history_inner_item{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; border-bottom: 1px solid #cccccc; padding: 15px;} .time_registration_history_inner .time_registration_history_inner_item .left{display: flex; justify-content: flex-start; align-items: center; width: 90%} .time_registration_history_inner .time_registration_history_inner_item .left .count{display: flex; justify-content: center; align-items: center; color: #fff; width: 30px; min-width: 30px; min-height: 30px; height: 30px; border-radius: 50%; margin-right: 10px; font-size: 12px; font-weight: var(--font2);} .time_registration_history_inner .time_registration_history_inner_item .left .title b{font-size: 14px; font-family: var(--font2); font-weight: 500; color: var(--text_dark);} .time_registration_history_inner .time_registration_history_inner_item .left .title p{font-size: 11px; font-family: var(--font1); line-height: 1.1; font-weight: 500; color: var(--text_dark); display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;} .time_registration_history_inner .time_registration_history_inner_item .left .title p span{font-weight: 700;} .time_registration_history_inner .time_registration_history_inner_item .right{position: relative; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; width: 8%;} .time_registration_history_inner .time_registration_history_inner_item .right i{color: #cccccc;} .time_registration_history_inner .time_registration_history_inner_item .right .check{color: #23c55e !important;} .time_registration_history_inner .time_registration_history_inner_item .right .more_info2{display: none; position: absolute; padding: 8px; border-radius: 5px; background-color: var(--text_dark); right: 20px; width: 200px !important; font-size: 11px; font-family: var(--font1); line-height: 1.1; font-weight: 500; color: #fff;} .time_registration_history_inner .time_registration_history_inner_item .right:hover .more_info2 {display: block;} .time_registration_history_inner .time_registration_history_inner_item .right .more_info{display: none; position: absolute; padding: 8px; border-radius: 5px; background-color: var(--text_dark); right: 20px; width: 200px !important; font-size: 11px; font-family: var(--font1); line-height: 1.1; font-weight: 500; color: #fff;} .time_registration_history_inner .time_registration_history_inner_item .right:hover .more_info {display: block;} .time_registration_history_inner .time_registration_history_inner_item .right .alert{color: red !important;} .time_registration_history_inner .time_registration_history_inner_item .right .more_info1{display: none; position: absolute; padding: 8px; border-radius: 5px; background-color: var(--text_dark); right: 20px; width: 200px !important; font-size: 11px; font-family: var(--font1); line-height: 1.1; font-weight: 500; color: #fff;} .time_registration_history_inner .time_registration_history_inner_item .right:hover .more_info1 {display: block;} .time_registration_history_filters{display: flex; justify-content: center; align-items: center; width: 100%; background-color: rgba(204, 204, 204, 0.34); padding-top: 8px;} .time_registration_history_filters_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; padding: 0 15px;} .leave_hours_block{display: flex; justify-content: center; align-items: center; width: 100%; padding: 15px;} .leave_hours_block_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .leave_hours_block_inner .leave_hours_block_inner_item{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 48%; border-radius: 5px; border: 1px solid rgba(204, 204, 204, 0.63); margin-bottom: 20px; padding: 10px;} .leave_hours_block_inner .leave_hours_block_inner_item .circle{display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; border-radius: 50%; background-color: rgba(35, 197, 94, 0.38);} .leave_hours_block_inner .leave_hours_block_inner_item .circle .small_top{font-size: 14px; font-weight: 500; color: var(--text_dark); margin: -5px 2px 0 0; font-family: var(--font2);} .leave_hours_block_inner .leave_hours_block_inner_item .circle span{font-size: 14px; font-weight: 500; color: var(--text_dark); margin-top: 0px; font-family: var(--font2);} .leave_hours_block_inner .leave_hours_block_inner_item .circle .big_bottom{font-size: 20px; font-weight: 500; color: var(--text_dark); margin: 10px 0 0 2px; font-family: var(--font2);} .leave_hours_block_inner .leave_hours_block_inner_item h5{font-size: 14px; font-family: var(--font2); font-weight: 500; color: var(--text_dark); margin-top: 10px;} .open_production_sidepanel_button{padding: 2px;background-color: #d1f9e5;border-radius: 10px;text-align: center;} .open_production_sidepanel_button:hover{background-color: #a0e0be;} /* USER PAGE DETAILS */ .user_details_page{display: flex; justify-content: center; align-items: center; width: 100%;} .user_details_page_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; border-radius: 10px; background-color: #fff; padding: 20px;} .user_details_page_inner h1{font-size: 20px; font-family: var(--font2); font-weight: 400; margin-bottom: 20px;} .user_details_page_inner .left_user_details_page{width: 65%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2;} .user_details_page_inner .left_user_details_page form{display: flex; width: 100%; margin-bottom: 20px; background-color: var(--bg_blocks); padding: 20px; border-radius: 10px;} .user_details_page_inner .left_user_details_page form .form_relation_filter_item{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; margin-right: 20px;} .user_details_page_inner .left_user_details_page form .form_relation_filter_item i{margin-top: 15px;} .user_details_page_inner .left_user_details_page form .form_relation_filter_item label{font-size: 14px; font-weight: bold;} .user_details_page_inner .left_user_details_page form .relation_input{padding: 10px; background-color: #fff; border-radius: 10px; border: 2px solid transparent;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .user_details_page_inner .left_user_details_page form .relation_input:focus{border: 2px solid #2c62ff !important; box-shadow: none;} .user_details_page_inner .left_user_details_page form .relation_btn{background-color: var(--second); padding: 13px 20px; box-shadow: none; font-size: 14px; margin-top: 19px;} .user_details_page_inner .right_user_details_page{width: 32%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2;} .user_details_page_inner .right_user_details_page .top{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 250px;} .user_details_page_inner .right_user_details_page .top .icon{display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; background-color: #3f95ff1e;} .user_details_page_inner .right_user_details_page .top .icon img{width: 80px; height: 80px; object-fit: contain;} .user_details_page_inner .right_user_details_page .top h1{margin-top: 10px; font-family: var(--font2);} .user_details_page_inner .right_user_details_page .details{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} .user_details_page_inner .details_line{width: 100%; border-top: 1px dotted #d7cececb; margin: 20px 0;} .user_details_page_inner .title{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .user_details_page_inner .title i{font-size: 14px;} .user_details_page_inner .right_user_details_page .details .title .ref{font-size: 12px; padding: 5px; border-radius: 5px; background-color: #2fceb4; color: #fff;} .user_details_page_inner .right_user_details_page .details .data .item{margin-bottom: 10px;} .user_details_page_inner .right_user_details_page .details .data .item b{color: #071437; font-weight: 400;} .user_details_page_inner .right_user_details_page .details .data .item p{color: #78829d; font-size: 12px; font-weight: 300;} .user_details_page_inner .right_user_details_page .details .data .item a{color: var(--second); text-decoration: none; font-size: 12px; font-weight: 300;} @media only screen and (max-width: 1150px) { .user_details_page_inner .left_user_details_page{width: 100%; margin-bottom: 20px;} .user_details_page_inner .right_user_details_page{width: 100%;} } @media only screen and (max-width: 850px) { .user_details_page_inner .left_user_details_page form .form_relation_filter_item i{display: none;} .user_details_page_inner .left_user_details_page form .relation_input{width: 100%;} .user_details_page_inner .left_user_details_page form .relation_btn{margin-top: 5px; margin-left: 0;} .user_details_page_inner .left_user_details_page form .form_relation_filter_item{margin-bottom: 5px;} .user_details_page_inner .left_user_details_page form{flex-direction: column;} } .permissions_items{display: flex; justify-content: center; align-items: center; width: 100%;} .permissions_items_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%;} .permissions_items_inner .permissions_items_inner_item{display: flex; justify-content: flex-start; align-items: center; width: 23%; margin: 0 5px 10px 5px; padding: 10px; border-radius: 10px; background-color: #F9F8F8;} .permissions_items_inner .permissions_items_inner_item b{color: #071437; font-weight: 400; font-size: 12px; margin-left: 10px;} .permissions_items_inner .category_title{width: 100%; margin: 15px 0 5px 0; font-weight: bold; font-size: 14px; font-family: var(--font1);} /*.permissions_items_inner .permissions_items_inner_item b{color: #071437; font-weight: 400; font-size: 14px; margin-left: 10px; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}*/ @media only screen and (max-width: 2200px) { .permissions_items_inner .permissions_items_inner_item{width: 30%;} } @media only screen and (max-width: 1350px) { .permissions_items_inner .permissions_items_inner_item{width: 45%;} } @media only screen and (max-width: 800px) { .permissions_items_inner .permissions_items_inner_item{width: 100%;} } .toggle_place {position: absolute; width: 180px; right: 10px; top: 10px;} .toggle_place .filter{display: flex; justify-content: center; align-items: center;border-radius: 20px; background-color: var(--bg_blocks);box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;} .toggle_place .filter a{font-size: 14px; text-decoration: none; font-family: var(--font2); font-weight: 400; color: #252f4a; padding: 5px 10px; margin: 5px; cursor: pointer;} .toggle_place .filter a:hover{background-color: #252f4a;color: #fff; border-radius: 20px;} .toggle_place .filter a.active { background-color: #252f4a; color: #fff; border-radius: 20px;} .permissions_topbar{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;} .search_permissions{width: 100%; padding: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; margin-bottom: 15px;} .activate_all{width: auto; font-size: 12px; height: 100%; margin-bottom: 15px;} /*Tasks*/ .task_layout{display: flex; justify-content: center; align-items: center; width: 100%;} .task_layout_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;border-radius: 10px;} .task_layout_inner .task_layout_inner_left{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 20%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2; background-color: #fff;} .task_layout_inner .task_layout_inner_left .task_legende{display: flex; justify-content: center; align-items: center; width: 100%;} .task_layout_inner .task_layout_inner_left .task_legende_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%;} .task_layout_inner .task_layout_inner_left .task_legende_inner p{color: #071437; font-size: 14px; font-weight: 400; margin-bottom: 10px; border-bottom: 1px solid #F1F1F2; margin-top: 20px;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_button_add{width: 100%; border-bottom: 1px solid #F1F1F2;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_button_add button{margin-bottom: 20px;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px; margin-bottom: 5px; border-radius: 5px; cursor: pointer; border-bottom: 1px solid #F1F1F2;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item:hover{background-color: #f1f5f9;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item_active{background-color: #f1f5f9;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item .title{display: flex; align-items: center; color: #071437; font-size: 14px; font-weight: 400;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item .title svg{margin-right: 10px; width: 20px; height: 20px;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item .count{color: #071437; font-size: 14px; font-weight: 400; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: #fff;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item .count .count_alert{display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: #cb2d2a; color: #fff;} .task_layout_inner .task_layout_inner_left .task_layout_inner_left_list_inner .task_layout_inner_left_list_inner_item .count .count_alert_empty{display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: #056c4f; color: #fff;} .task_layout_inner .task_layout_inner_right{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 79%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2; background-color: #fff;} .task_layout_inner .task_layout_inner_right .searchbar .searchbar_input{width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #F1F1F2; margin-bottom: 5px;} .task_layout_inner .task_layout_inner_right .task_td{color: #071437 !important; font-size: 14px !important; font-weight: 400 !important; border: 1px solid #F1F1F2;} .task_layout_inner .task_layout_inner_right .task_td .green_button_task{display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; background-color: #056c4f; cursor: pointer;} .task_layout_inner .task_layout_inner_right .task_td .green_button_task:hover{transform: scale(1.1);} .task_layout_inner .task_layout_inner_right .task_td .green_button_task i{color: #fff;} .task_layout_inner .task_layout_inner_right .task_td .grey_button_task{display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; background-color: #bcc0bd; cursor: pointer;} .task_layout_inner .task_layout_inner_right .task_td .grey_button_task i{color: #fff;} .task_layout_inner .task_layout_inner_right .task_td .grey_button_task:hover{transform: scale(1.1);} .task_layout_inner .task_layout_inner_right .task_td .red_button_task{display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; background-color: #cb2d2a; cursor: pointer;} .task_layout_inner .task_layout_inner_right .task_td .red_button_task i{color: #fff;} .task_layout_inner .task_layout_inner_right .task_td .red_button_task:hover{transform: scale(1.1);} .task_layout_inner .task_layout_inner_right .task_td .blue_button_task{display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; border-radius: 50%; background-color: #eef8fe; cursor: pointer;} .task_layout_inner .task_layout_inner_right .task_td .blue_button_task i{color: #55bbf6;} .task_layout_inner .task_layout_inner_right .task_td .blue_button_task:hover{transform: scale(1.1);} .task_layout_inner .task_layout_inner_right .task_hd{border: 1px solid #F1F1F2;} @media only screen and (max-width: 1300px) { .task_layout_inner .task_layout_inner_left{width: 100%; margin-bottom: 20px;} .task_layout_inner .task_layout_inner_right{width: 100%;} } /*Request address*/ .request_delivery_title{font-family: var(--font2); color: #000;} /*Delivery Component*/ .delivery_component_modal_header{display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; border-bottom: 1px solid #d7cececb;} .delivery_component_modal_header_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; padding: 20px;} .delivery_component_modal_header_inner .left_header{font-size: 18px; color: #071437;font-weight: 600; font-family: var(--font2);} .delivery_component_modal_header_inner a{font-size: 24px; color: #071437;font-weight: 600; font-family: var(--font2);} .delivery_component_modal{display: flex; justify-content: center; align-items: center; width: 100%;} .delivery_component_modal_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 1200px; padding: 10px; background-color: #fff; border-radius: 10px; margin: 8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;} .delivery_component_modal_inner .delivery_component_modal_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 30%;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 10px;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block h5{font-size: 18px; color: #071437;font-weight: 600; font-family: var(--font2); width: 100%; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #d7cececb;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block b{color: #071437;font-weight: 400;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block p{color: #78829d;font-size: 14px;font-weight: 300;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block .delivery_component_modal_inner_item_block_plate_container{display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block .delivery_component_modal_inner_item_block_plate_container .plate_name{width: 100%; height: 100%; background-color: whitesmoke; padding: 10px; border-radius: 5px; margin-right: 10px;} .delivery_component_modal_inner .delivery_component_modal_inner_item .delivery_component_modal_inner_item_block .delivery_component_modal_inner_item_block_plate_container button{width: 50px; height: 42px;} @media only screen and (max-width: 800px) { .delivery_component_modal_inner .delivery_component_modal_inner_item{width: 100%; margin-bottom: 20px;} } /*Delivery Show Page*/ .delivery_show_page{display: flex; justify-content: center; align-items: center; width: 100%;} .delivery_show_page_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; padding: 20px; background-color: #fff; border-radius: 10px;} .delivery_show_page_inner .delivery_show_page_inner_left h1{font-size: 20px; font-family: var(--font2); font-weight: 400; padding-bottom: 15px; width: 100%; border-bottom: 1px solid #F1F1F2;} .delivery_show_page_inner .delivery_show_page_inner_left{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 65%;padding: 20px;border-radius: 10px;border: 1px solid #F1F1F2;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 48%; margin-top: 10px;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block h5{display: flex; justify-content: flex-start; align-items: center; width: 100%; border-bottom: 1px solid #F1F1F2; margin-top: 20px; padding-bottom: 15px;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block h5 .black_title{font-size: 20px; font-family: var(--font2); font-weight: 400;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block h5 a{margin-left: 10px;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block .delivery_show_page_inner_left_block_title{color: #071437; font-weight: 400;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block .delivery_show_page_inner_left_block_info{color: #78829d; font-size: 12px; font-weight: 300;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block_images{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; margin-top: 15px;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block_images a{width: 23%; height: auto; margin: 0 10px 10px 0;} .delivery_show_page_inner .delivery_show_page_inner_left .delivery_show_page_inner_left_block_images img{width: 100%; height: auto; object-fit: contain;} .delivery_show_page_inner .delivery_show_page_inner_right{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 32%; padding: 20px; border-radius: 10px; border: 1px solid #F1F1F2;} .delivery_show_page_inner .delivery_show_page_inner_right h1{font-size: 20px; font-family: var(--font2); font-weight: 400; padding-bottom: 15px; width: 100%; border-bottom: 1px solid #F1F1F2;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-top: 10px;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block h5{display: flex; justify-content: flex-start; align-items: center; width: 100%; border-bottom: 1px solid #F1F1F2; margin-top: 20px; padding-bottom: 15px;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block h5 .black_title{font-size: 20px; font-family: var(--font2); font-weight: 400;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block .delivery_show_page_inner_right_block_title{color: #071437; font-weight: 400;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block .delivery_show_page_inner_right_block_info{color: #78829d; font-size: 12px; font-weight: 300;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block iframe{width: 100%; height: 400px; border-radius: 10px;} @media only screen and (max-width: 1200px) { .delivery_show_page_inner .delivery_show_page_inner_left{width: 100%; margin-bottom: 20px;} .delivery_show_page_inner .delivery_show_page_inner_right{width: 100%;} .delivery_show_page_inner .delivery_show_page_inner_right .delivery_show_page_inner_right_block iframe{height: 300px;} } /*Purchase order create/edit*/ .purchase_order_create{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 20px;} .purchase_order_create_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%; padding: 20px; background-color: #f3f4f6; border-radius: 10px;} .purchase_order_create_inner .form_purchase_item_holder{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 49%;} .purchase_order_create_inner .form_purchase_item_holder .item_edit_purchase{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 15px;} .purchase_order_create_inner .form_purchase_item_holder .item_edit_purchase label{font-size: 14px; font-family: var(--font2); color: #262f4a; margin-bottom: 2px;} .purchase_order_create_inner .form_purchase_item_holder .item_edit_purchase h1{border-bottom: 1px solid #F1F1F2; font-size: 30px; font-weight: 600; font-family: var(--font2); margin-bottom: 10px; color: #071437;} .purchase_order_create_inner .form_purchase_item_holder .header_files_purchases{margin-bottom: -10px !important; margin-top: 20px; font-size: 18px !important; font-family: var(--font2); color: #262f4a;} .purchase_order_tr_row:hover { border: 3px dashed blue !important; } /*Setting bar top*/ .setting_bar_at_top{border: 1px solid rgba(204, 204, 204, 0.28);} .setting_bar_at_top a{font-size: 14px !important;} .cursor-wait{cursor: wait;} .tox-tinymce{width: 100% !important;} .tox-statusbar__branding{display: none !important;} .progress {animation: progress 1s infinite linear;} .left-right {transform-origin: 0% 50%;} @keyframes progress { 0% {transform: translateX(0) scaleX(0);} 40% {transform: translateX(0) scaleX(0.4);} 100% {transform: translateX(100%) scaleX(0.5);} }