:root{ --text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --title-font: 'Blinker', 'Helvetica Neue', Helvetica, Arial, sans-serif; --logo-font: 'Blinker', 'Helvetica Neue', Helvetica, Arial, sans-serif; --primary: #2B434F; --primary-hover: #162227; --cta: #b74bb4; --cta-hover: #983c96; --body-color: #cacbcd; --box-color: #f2f3f4; --text-color: #001f3f; --text-color2: #fff; --person-color: #d2d7da; --gray-light: #ced4da; --gray-light-hover: #818c92; } ::-webkit-scrollbar{ width: 8px; } ::-webkit-scrollbar-track{ background: var(--box-color); } ::-webkit-scrollbar-thumb{ background: #9a9b9c; } ::-webkit-scrollbar-thumb:hover{ background: #aaabac; } @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?6'); src: url('fonts/icomoon.eot?6#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6') format('truetype'), url('fonts/icomoon.woff?6') format('woff'), url('fonts/icomoon.svg?6#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-edit:before { content: "\e915"; } .icon-driver:before { content: "\e912"; } .icon-info:before { content: "\f129"; } .icon-hint:before { content: "\f12a"; } .icon-female:before { content: "\f182"; } .icon-male:before { content: "\f183"; } .icon-customer:before { content: "\e908"; } .icon-add:before { content: "\e901"; } .icon-save:before { content: "\e900"; } .icon-radio_off:before { content: "\e90e"; } .icon-visible:before { content: "\e902"; } .icon-check:before { content: "\e906"; } .icon-person:before { content: "\e907"; } .icon-checkbox_on:before { content: "\e909"; } .icon-checkbox_off:before { content: "\e90a"; } .icon-car:before { content: "\e911"; } .icon-radio_on:before { content: "\e90f"; } .icon-delete:before { content: "\e903"; } .icon-settings:before { content: "\e90b"; } .icon-invisible:before { content: "\e904"; } .icon-filter:before { content: "\e910"; } .icon-inbox:before { content: "\e905"; } .icon-logout:before { content: "\e90c"; } .icon-login:before { content: "\e90d"; } .icon-export:before { content: "\e913"; } .icon-download:before { content: "\e914"; } .badge-primary, .btn-primary{ color: var(--text-color2); background-color: var(--primary); border-color: var(--primary); } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary:hover{ color: var(--text-color2); background-color: var(--primary-hover); border-color: var(--primary-hover); } .badge-cta, .btn-cta{ color: var(--text-color2); background-color: var(--cta); border-color: var(--cta); } .btn-cta:not(:disabled):not(.disabled).active, .btn-cta:not(:disabled):not(.disabled):active, .show>.btn-cta.dropdown-toggle, .btn-cta:hover{ color: var(--text-color2); background-color: var(--cta-hover); border-color: var(--cta-hover); } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-primary:focus, .btn-cta:not(:disabled):not(.disabled).active:focus, .btn-cta:not(:disabled):not(.disabled):active:focus, .show>.btn-cta.dropdown-toggle:focus, .btn-cta:focus, .btn-secondary.focus, .btn-secondary:focus{ box-shadow: none; } .intro{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: var(--primary); color: var(--text-color); animation: intro-out 1s 2s ease-in-out; animation-fill-mode: forwards; z-index: 99999; } @keyframes intro-out{ 0% { opacity: 1; bottom: 0; } 60% { opacity: 1; bottom: 0; } 99% { opacity: 0; bottom: 95%; height: auto; } 100% { opacity: 0; bottom: auto; height: 0; } } .intro .logo{ position: absolute; top: 50%; left: 50%; height: 102px; width: 102px; margin: -51px 0 0 -51px; animation: intro-in 3s ease-in-out; animation-fill-mode: forwards; opacity: 0; } @keyframes intro-in{ 10% { opacity: 0; transform: scale(0.5) rotateY(90deg) rotateX(90deg) } 15% { opacity: 0.5; transform: scale(0.5) rotateY(90deg) rotateX(90deg) } 60% { transform: scale(1) rotateY(0deg) rotateX(0deg); top: 50%; left: 50%; opacity: 1; } 100% { top: 12px ; left: 6px; transform: scale(0.2); opacity: 0.25; } } body{ background: var(--body-color); font-family: var(--text-font); color: var(--text-color); margin: 0; padding: 0; overflow: hidden; } a{ color: var(--text-color); } h1, h2, h3, h4{ font-family: var(--title-font); } .h3, h3 { font-size: 1.6rem; } .btn{ cursor: pointer; } .xfont{ font-family: var(--title-font); font-style: italic; } .badge{ font-family: var(--text-font); font-style: normal; font-weight: normal; } button [class^="icon-"], button [class*=" icon-"] { font-size: 20px; vertical-align: middle; margin-top: -5px; display: inline-block; margin-right: 1px; } button.btn-sm [class^="icon-"], button.btn-sm [class*=" icon-"] { font-size: 17px; margin-top: -3px; } .modal-title > [class^="icon-"], .modal-title > [class*=" icon-"] { font-size: 28px; vertical-align: middle; margin-top: -5px; margin-right: 2px; min-width: 22px; text-align: center; display: inline-block; } #modalBox.large .modal-dialog { max-width: 98%; margin: 1% auto; } .btn-group [class^="icon-"], .btn-group [class*=" icon-"] { font-size: 20px; vertical-align: middle; margin-top: -4px; margin-right: 2px; min-width: 16px; text-align: center; display: inline-block; } button .icon-login{ margin-left: -2px; margin-right: 4px; } .form-group{ margin-bottom: 0; } .form-group label{ font-family: var(--title-font); font-size: 13px; background: #fff; background: -moz-linear-gradient(top, rgba(255,255,255,1) 13px, rgba(255,255,255,0) 14px); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 13px, rgba(255,255,255,0) 14px); background: linear-gradient(to bottom, rgba(255,255,255,1) 13px, rgba(255,255,255,0) 14px); margin: 0 0 -8px 5px; vertical-align: bottom; padding: 0 4px; border-radius: 8px; color: var(--gray); color: #aeb4b8; position: relative; } .form-group:focus-within > label{ color: var(--primary); } .form-group.customer-filter-list label{ color: var(--primary); font-size: 20px; font-style: italic; line-height: 20px; padding-top: 14px; margin: 1px 1px 0px 4px; vertical-align: middle; } div.light-bg label{ background: #fbfaf9; background: -moz-linear-gradient(top, #fbfaf9 13px, #ffffff 14px); background: -webkit-linear-gradient(top, #fbfaf9 13px,#ffffff 14px); background: linear-gradient(to bottom, #fbfaf9 13px,#ffffff 14px); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfaf9', endColorstr='#ffffff',GradientType=0 ); } .form-control[readonly]{ background-color: #fff; } textarea, select, input{ border-width: 1px; border-color: var(--gray-light); } textarea:focus, select:focus, input:focus, .form-control:focus, .custom-select:focus{ box-shadow: none; outline: none; border-color: var(--primary); box-shadow: none; } input[type="checkbox"], input[type="radio"]{ vertical-align: middle; margin: 0 0px -14px 4px; width: 16px; height: 16px; } .form-group:focus-within label{ color: var(--primary); } label.error{ color: var(--red); } label.checkbox, label.radio{ margin-right: 10px; font-size: 15px; } input[type='radio']:after { font-family: 'icomoon' !important; speak: never; font-size: 21px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e90e"; top: -3px; left: -3px; position: relative; color: var(--gray-light); background-color: #fff; display: inline-block; visibility: visible; } input[type='radio']:hover:after { color: var(--gray-light-hover); } input[type='radio']:checked:after { content: "\e90f"; color: var(--primary); } input[type='radio']:hover:checked:after { color: var(--primary-hover); } input[type='checkbox']:after { font-family: 'icomoon' !important; speak: never; font-size: 21px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e90a"; top: -3px; left: -3px; position: relative; color: var(--gray-light); background-color: #fff; display: inline-block; visibility: visible; } input[type='checkbox']:hover:after { color: var(--gray-light-hover); } input[type='checkbox']:checked:after { content: "\e909"; color: var(--primary); } input[type='checkbox']:hover:checked:after { color: var(--primary-hover); } button:focus{ outline: none; } .navbar{ position: fixed; z-index: 3; top: 0; left: 0; width: 100%; height: 49px; background: var(--primary); color: var(--text-color2); padding-left: 1.22rem; padding-right: 1.5rem; } .navbar .logo{ } .navbar .weekno{ margin-left: 24px; flex: auto; font-size: 0.92rem; } .nav > div{ cursor: pointer; margin-left: 21px; font-size: 14px; vertical-align: middle; transition: opacity 100ms ease-in-out; } @media (min-width: 1120px){ .nav > div:hover{ opacity: 0.8; } .menubtn{ width: 159px; } .customersbtn:after{ content: 'übersicht' } .filterbtn:after{ content: ' anzeigen' } .menubtn:after{ content: ' einblenden' } body.menuopen .menubtn:after{ content: ' ausblenden' } .addbtn:after{ content: ' hinzufügen' } } .nav > div.shiftmarker{ opacity: 0.2; } .nav > div.shiftmarker.on{ opacity: 1; position:relative; } .nav > div.shiftmarker.on:after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; position: absolute; top: 1px; left: 3px; animation: pulse 2.5s ease 0s infinite; transform: scale(1.3); } @keyframes pulse { 0% { opacity: 0.5; transform: scale(1.3); } 80% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(3); } } body.menuopen .menubtn{ opacity: 0.5; } .nav [class^="icon-"], .nav [class*=" icon-"] { padding: 2px; font-size: 22px; margin-right: 1px; vertical-align: bottom; } .loginscreen{ position: fixed; z-index: 999; top: 0; bottom: 0; left: 0; width: 100%; margin: 0; background: var(--primary); padding-bottom: 26px; overflow: auto; opacity: : 0; transform: translateY(-100%); transition: transform 500ms ease-in-out, opacity 500ms ease-in-out; } .loginscreen.show{ opacity: : 1; transform: translateY(0); } .loginbox{ position: absolute; top: 50%; left: 50%; width: 360px; height: 310px; margin: -200px 0 0 -180px; padding: 30px 20px; background: #fff; } .loginbox .logo{ background: var(--primary); margin: -30px -20px 13px -20px; padding: 20px; text-align: center; } #login{ float: right; margin-top: 22px; } .stage{ position: fixed; z-index: 1; top: 49px; bottom: 0; left: 0; width: 100%; margin: 0; padding-bottom: 26px; overflow: auto; transition: width 300ms ease-in-out; } body.menuopen .stage{ width: 80%; } .menu{ position: fixed; z-index: 2; top: 49px; bottom: 0; right: -20%; width: 20%; margin: 0; padding: 0; overflow: auto; transition: right 300ms ease-in-out; background-color: var(--primary); } body.menuopen .menu{ right: 0%; } .menu .wrapper{ padding: 0 11px 26px 11px; } .customer{ position: relative; overflow: hidden; animation: reveal 750ms ease-in-out; animation-fill-mode: forwards; display: inline-block; vertical-align: top; } @keyframes reveal{ 0% { opacity: 0; max-height: 0%; } 100% { opacity: 1; max-height: 1000%; } } .customer.hidden{ animation: hide 750ms ease-in-out; animation-fill-mode: forwards; } @keyframes hide{ 0% { opacity: 1; max-height: 100%; } 100% { opacity: 0; max-height: 0%; max-width: 0%; flex: 0; padding: 0;} } .customer h3{ display: inline-block; margin: 32px 0 7px 0; padding: 0 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .weekno .badge, .customer .badge, .department .badge, .category .badge, .customer-card .badge, .modal-title .badge{ position: relative; vertical-align: text-top; margin-left: 2px; font-size: 10px; padding: 3px 4px 3px 4px; min-width: 15px; background: #9a9b9c; border-radius: 10px; color: #fff; box-shadow: inset 0 0 9px -4px var(--primary); } .modal-title .badge{ background: var(--primary); } .weekno .badge{ margin-top: 1px; color: var(--primary); background: #fff; box-shadow: inset 0 0 5px -4px var(--primary); } .department h4 .badge{ margin-top: 2px; } .customer h3 .badge{ margin-top: 7px; } .category h4 .badge{ margin-left: 1px; } .customer .hide-customer{ opacity: 0; transition: opacity 250ms ease-in-out; position: absolute; top: 32px; right: 12px; padding: 10px; font-size: 22px; cursor: pointer; } body.touch .hide-customer{ opacity: 0.25; } .customer:hover .hide-customer{ opacity: 0.25; } .customer:hover .hide-customer:hover{ opacity: 1; } .cardbox{ position: relative; padding: 0 12px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.2) } .box{ padding: 26px 12px 0 12px; margin-top: 2px; background: var(--box-color); } .menu .box{ margin-top: 16px; } .menu .box:first-child{ margin-top: 0; } .boxtitle{ margin-top: -6px; padding: 0 6px 8px 6px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .boxtitle h4{ display: inline-block; cursor: pointer; font-size: 1.15rem; font-weight: 100; } .shift_col{ width: 80px; padding: 6px 12px; background: var(--body-color); background-color: #e6e6e6; margin-left: -12px; margin-right: 25px; box-shadow: inset -7px 6px 14px -16px #000; } .shift{ text-align: center; font-weight: 300; line-height: 20px; } .departments{ position: relative; } .persons{ min-height: 60px; } .persons:after{ content: ' '; height: 1.5rem; display: inline-block; } .person{ position: relative; background-color: var(--person-color); color: var(--text-color); padding: 11px 10px 8px 29px; line-height: 16px; margin-bottom: 3px; min-height: 45px; overflow: hidden; text-overflow: ellipsis; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0.6; cursor: pointer; cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .person.ca{ opacity: 1; } .notice{ background-color: var(--primary); color: #fff; font-size: 13px; line-height: 17px; padding-top: 6px; padding-bottom: 6px; } .team{ display: block; width: 2px; position: absolute; top: 0; left: 0; bottom: 0; color: #fff; } .cardbox > .team{ left: -3px; z-index: 1; } .team:before{ width: 11px; height: 11px; font-size: 10px; line-height: 11px; color: #fff; text-align: center; position: absolute; bottom: 0px; left: 0px; border-top-right-radius: 3px; } .person .team{ box-shadow: 0px 0px 1px 1px #fff; } .person .team:before{ box-shadow: 0px 1px 1px 1px #fff; } .weekno .badge, .customer .badge, .category .badge{ padding-right: 5px; } .weekno .badge > div, .customer .badge > div, .category .badge > div{ display: inline-block; } .weekno .badge > div.team, .customer .badge > div.team, .category .badge > div.team{ position: unset; width: auto; margin: -4px -4px -4px -2px; padding: 1px 9px 1px 5px; border-radius: 10px 0 0 10px; border: 1px solid #fff; } .customer .badge > div.team, .category .badge > div.team{ border-color: #9a9b9c; } .weekno .badge > div.total, .customer .badge > div.total, .category .badge > div.total{ padding-left: 3px; padding-right: 1px; } .weekno .badge > div:nth-child(2), .customer .badge > div:nth-child(2), .category .badge > div:nth-child(2){ margin-left: 4px; } .weekno .badge > div:last-child, .customer .badge > div:last-child, .category .badge > div:last-child{ padding-right: 6px; border-radius: 10px; } .weekno .badge > div.team:before, .customer .badge > div.team:before, .category .badge > div.team:before{ position: unset; width: auto; margin-right: 1px; } .team-A, .team-A:before{ content: 'A'; background: #c32629; } .team-B, .team-B:before{ content: 'B'; background: #324fab; } .team-C, .team-C:before{ content: 'C'; background: #c2781b; } .team-D, .team-D:before{ content: 'D'; background: #15800d; } .role-1{ background-color: #c2d88d; } .role-2{ background-color: #cfbfe4; } .role-3{ background-color: #b0ded5; } .role-4{ background-color: #ecafaf; } .role-5{ background-color: #b3dbec; } .role-6{ background-color: #efbbd3; } .role-7{ background-color: #efe6a6; } .role-8{ background-color: #f7bd9e; } .person > [class^="icon-"], .person > [class*=" icon-"] { position: absolute; top: 4px; left: 1px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 17px; opacity: 0.78; } .person > .icon-car{ top: 21px; font-size: 14px; } .person > .icon-info{ font-size: 22px; } .person .role{ font-size: 10px; margin-left: 1px; } .person .status{ position: absolute; bottom: 0px; right: -1px; font-size: 10px; line-height: 12px; background: var(--primary); color: var(--text-color2); padding: 0 4px 2px 5px; } .person .absent{ position: absolute; top: 0px; right: -1px; font-size: 10px; line-height: 12px; background: var(--primary); color: var(--text-color2); padding: 0 4px 2px 5px; } .person.info .absent{ right: 38px; } .person.booked .absent{ right: 45px; } .person.pool .absent{ right: 18px; } .person.pool.driver .absent{ right: 35px; } .person.pool.info .absent{ right: 54px; } .person.pool.booked .absent{ right: 65px; } .person.pool.driver.info .absent{ right: 61px; } .person.pool.driver.booked .absent{ right: 73px; } .person .pool{ width: 20px; height: 20px; position: absolute; top: -1px; right: -2px; color: var(--box-color); border: 2px solid var(--box-color); font-size: 11px; text-align: center; } #person_pool_indicator{ width: 18px; height: 18px; position: absolute; top: 34px; right: 44px; color: var(--box-color); font-size: 11px; line-height: 18px; text-align: center; } .person .pool.driver:before, #person_pool_indicator.driver:before{ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e912'; width: 16px; height: 16px; position: absolute; top: 0px; right: 19px; color: var(--text-color); font-size: 12px; line-height: 16px; text-align: center; } #person_pool_indicator.driver:before{ top: 1px; } .person:hover{ opacity: 0.85; } .person.booked:not(.selectedItem):after{ content: 'nicht gebucht'; position: absolute; top: -4px; right: -16px; background: #d04141; color: var(--text-color2); font-size: 9px; width: 82px; text-align: center; line-height: 8px; padding: 2px 14px 3px 34px; transform: rotate(33deg); z-index: 2; border-radius: 0 16px 2px 0; } .person.info:before{ content: 'INFO'; position: absolute; top: 4px; right: -16px; background: #d04141; color: var(--text-color2); font-size: 9px; width: 60px; text-align: center; line-height: 8px; padding: 3px 14px 3px 14px; transform: rotate(33deg); z-index: 1; border-radius: 0 16px 2px 0; } .person.booked.pool:after, .person.info.pool:before{ right: 1px; } .person.booked.pool.driver:after, .person.info.pool.driver:before{ right: 10px; } .person.selectedItem:after{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: "\e906"; font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 46px; line-height: 40px; padding-left: 3px; color: var(--text-color2); text-shadow: 0 0 5px var(--primary); background: -moz-linear-gradient(left, rgba(43,67,79,0.5) 0%, rgba(43,67,79,0.44) 100%); background: -webkit-linear-gradient(left, rgba(43,67,79,0.5) 0%,rgba(43,67,79,0.44) 100%); background: linear-gradient(to right, rgba(43,67,79,0.5) 0%,rgba(43,67,79,0.44) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#992b434f', endColorstr='#662b434f',GradientType=1 ); z-index: 10; } .gu-mirror{ transform: rotateZ(-2deg); box-sizing: border-box; cursor: pointer; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .gu-transit{ } .persons:not([data-category_id]) .person.sync{ animation: sync 750ms ease-in-out; animation-fill-mode: forwards; } @keyframes sync{ 0% { opacity: 1; transform: rotateZ(0) scale(0.8); } 25% { transform: rotateZ(-1deg); } 50% { opacity: 0.85; } 75% { transform: rotateZ(1deg); } 100% { opacity: 1;transform: rotateZ(0) scale(1); } } .customer-list{ display: grid; grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%; } .customer-card{ display: flex; height: 59px; margin: 1%; background: var(--body-color); transition: transform 350ms; text-align: center; justify-content: center; align-items: center; cursor: pointer; position: relative; padding: 0 26px 0 10px; } .customer-card:hover{ transform: scale(1.05); color: var(--body-color); background: var(--text-color); z-index: 1; } #modalBox .modal-body .customer-card h3{ margin: auto; font-size: 1.2rem; line-height: 1.3rem } .customer-card .badge{ position: absolute; top: 0; right: 0; border-radius: 0 0 0 12px; padding: 3px 6px 5px 8px; } .customer-card .marker{ position: absolute; bottom: 4px; right: 5px; font-size: 20px; } .customer-card .icon-hint, .customer-card .icon-info{ color: #8a8b8c; margin: 0 1px; } .customer-card .icon-hint{ color: #d04141; } .datepicker.dropdown-menu{ color: var(--text-color); } .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active{ background-color: var(--text-color); border-color: var(--text-color); } #confirmBox{ z-index: 1051; } #alertBox{ z-index: 1052; } #modalBox .modal-body h1, #modalBox .modal-body h2, #modalBox .modal-body h3, #modalBox .modal-body h4, #modalBox .modal-body h5{ margin-top: 22px; margin-bottom: -1px; margin-left: 3px; } h1 small, h2 small, h3 small, h4 small, h5 small{ font-style: italic; color: #aeb4b8; font-size: 54%; margin: -4px 1px 0px 1px; vertical-align: middle; display: inline-block; } .user-list{ margin: 12px 0 0 0; padding-left: 27px; } .user-list li span{ font-size: 13px; color: #495057; } .user-list .remove{ font-size: 18px; color: #6c757d; vertical-align: text-bottom; cursor: pointer; } .provider-list{ margin: 12px 0 0 0; padding-left: 27px; } .provider-list li span{ font-size: 13px; color: #495057; } .provider-list .edit, .provider-list .remove{ font-size: 18px; color: #6c757d; vertical-align: text-bottom; cursor: pointer; } .customer-filter-list{ margin-bottom: 10px; } .croppie-container { width: 100%; height: 100%; } .croppie-container .cr-image { z-index: -1; position: absolute; top: 0; left: 0; transform-origin: 0 0; max-height: none; max-width: none; } .croppie-container .cr-boundary { position: relative; overflow: hidden; margin: 0 auto; z-index: 1; width: 100%; height: 100%; } .croppie-container .cr-viewport, .croppie-container .cr-resizer { position: absolute; border: 2px solid #fff; margin: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5); z-index: 0; } .croppie-container .cr-resizer { z-index: 2; box-shadow: none; pointer-events: none; } .croppie-container .cr-resizer-vertical, .croppie-container .cr-resizer-horisontal { position: absolute; pointer-events: all; } .croppie-container .cr-resizer-vertical::after, .croppie-container .cr-resizer-horisontal::after { display: block; position: absolute; box-sizing: border-box; border: 1px solid black; background: #fff; width: 10px; height: 10px; content: ''; } .croppie-container .cr-resizer-vertical { bottom: -5px; cursor: row-resize; width: 100%; height: 10px; } .croppie-container .cr-resizer-vertical::after { left: 50%; margin-left: -5px; } .croppie-container .cr-resizer-horisontal { right: -5px; cursor: col-resize; width: 10px; height: 100%; } .croppie-container .cr-resizer-horisontal::after { top: 50%; margin-top: -5px; } .croppie-container .cr-original-image { display: none; } .croppie-container .cr-vp-circle { border-radius: 50%; } .croppie-container .cr-overlay { z-index: 1; position: absolute; cursor: move; touch-action: none; } .croppie-container .cr-slider-wrap { width: 75%; margin: 8px auto; text-align: center; } .croppie-result { position: relative; overflow: hidden; } .croppie-result img { position: absolute; } .croppie-container .cr-image, .croppie-container .cr-overlay, .croppie-container .cr-viewport { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } #person_image_preview.standby{ opacity: 0.25; pointer-events: none; } #person_image_preview.croppie-container .cr-boundary{ margin-top: 10px; } #person_image_thumb{ margin: auto; width: 200px; height: 200px; border-radius: 100px; margin-top: 8px; position: relative; } #person_image_thumb img{ width: 100%; height: 100%; border-radius: 100px; } #person_image_thumb:hover::before{ content: 'Bild ändern'; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; color: #fff; background: rgba(0,0,0,0.35); text-align: center; padding-top: 44%; font: 18px; z-index: 1; opacity: 0.85; cursor: pointer; } .cr-slider { -webkit-appearance: none; width: 300px; max-width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: transparent; } .cr-slider::-webkit-slider-runnable-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; } .cr-slider::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; } .cr-slider:focus { outline: none; } .cr-slider::-moz-range-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; } .cr-slider::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; } .cr-slider:-moz-focusring { outline: 1px solid white; outline-offset: -1px; } .cr-slider::-ms-track { width: 100%; height: 5px; background: transparent; border-color: transparent; border-width: 6px 0; color: transparent; } .cr-slider::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); border-radius: 10px; } .cr-slider::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); border-radius: 10px; } .cr-slider::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top:1px; } .cr-slider:focus::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); } .cr-slider:focus::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); } .cr-rotate-controls { position: absolute; bottom: 5px; left: 5px; z-index: 1; } .cr-rotate-controls button { border: 0; background: none; } .cr-rotate-controls i:before { display: inline-block; font-style: normal; font-weight: 900; font-size: 22px; } .cr-rotate-l i:before { content: '↺'; } .cr-rotate-r i:before { content: '↻'; } .toast-title{font-weight:700;font-size:110%;margin-top:4px;margin-bottom:2px;}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word;line-height:19px;}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:-1px}.toast-bottom-right{right:-1px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:7px 22px 13px 56px;width:304px;-moz-border-radius:35px 0 0 35px;-webkit-border-radius:35px 0 0 35px;border-radius:35px 0 0 35px;background-position:18px center;background-repeat:no-repeat;-moz-box-shadow:0 0 1px 2px #fff;-webkit-box-shadow:0 0 1px 2px #fff;box-shadow:0 0 1px 2px #fff;color:#FFF;opacity:.85;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);filter:alpha(opacity=85)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 29px -10px #000;-webkit-box-shadow:0 0 29px -10px #000;box-shadow:0 0 29px -10px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}