html { font-size: 62.5%; height: 100%; } @media screen and (-webkit-device-pixel-ratio: 1.5) { html { font-size: 10pt; } } @media screen and (-webkit-device-pixel-ratio: 2) { html { font-size: 10pt; } } body { padding: 0px; margin: 0px; font-size: 1.4rem; font-family: Arial,Helvetica; color: #333333; width: 100%; height: 100%; background: #fff; } #mobile_layout_wrapper { min-height: 100%; overflow-x:hidden; } div#mobile_wrapper { width: 230px; margin: 0 auto; padding: 20px 0 20px 0; } div#mobile_wrapper.agenda { width: 100%; padding: 0px; } @media only screen and (min-width: 320px) { div#mobile_wrapper { width: 310px; } } @media only screen and (min-width: 430px) { div#mobile_wrapper { width: 420px; } } div#overlay { display: none; min-height: 100%; width: 100%; background: rgba(233,233,233,0.8); overflow: hidden; position: fixed; top: 0; z-index: 900; } h1 { font-size: 18px; font-weight: bold; } h2 { font-size: 16px; font-weight: bold; } a { color: #48A3DA; } a:hover,a:active { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;  } input,textarea,select{ -moz-appearance: none; -webkit-appearance: none; appearance: none; font-family: Arial,Helvetica; border-width: 0px 0px 1px 0px; border-style: solid; border-color: #999; width: 100%; font-size: 1.4rem; margin-right: .5em; box-shadow: 0 0px 0px rgba(0,0,0,0) inset; -moz-box-shadow: 0 0px 0px rgba(0,0,0,0) inset; -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0) inset; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #fff; color: #333333; } textarea { border-width: 1px 1px 1px 1px; } input[type=radio],input[type=checkbox] { border: 0 none; width: auto; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } input[type=checkbox] { -moz-appearance: checkbox; -webkit-appearance: checkbox; appearance: checkbox; position: relative; top: 2px; } input[type=radio] { -moz-appearance: radio; -webkit-appearance: radio; appearance: radio; } input[type=submit] { -webkit-appearance: none; outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;  } textarea { width: 94%; padding: 4px 5px; margin-top: 5px; } input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=submit]):focus,textarea:focus { box-shadow: #393 0px 0px 5px; -moz-box-shadow: #393 0px 0px 5px; -webkit-box-shadow: #393 0px 0px 5px; } input{ padding: 4px 5px; width:96%; } select{ padding: 4px 0px; background: url(https://www.factuurdesk.nl/css/../images/icons/autocomplete.png) right center no-repeat; } select:focus{ padding: 4px 5px; } input#van,input#tot { width: 28%; } input#pauze { width: 40px; text-align: center; } @media only screen and (min-width: 320px) { input#van,input#tot { width: 28%; } } input#datum { width: 55%; } li#van_li,li#tot_li { display: inline; } label.time_label { font-weight: bold; padding-right: 1px; } #anonymous { height: 60px; padding-top: 20px; background-image: url(https://www.factuurdesk.nl/css/../images/mobile/factuurdesk_logo_2.png); background-repeat: no-repeat; background-position: center; } #validation_errors { background-color: #ffecec; padding: 15px 0px 15px 15px; border-bottom: 1px solid #e4434b; vertical-align: middle; } #validation_errors h6 { color: #e4434b; font-size: 1.4rem; margin: 0px 0px 0px 10px; } #validation_errors ul { padding-left: 25px; } #validation_errors li { list-style:disc; } #message { background-color: #F8EDBE; color: #000000; vertical-align: middle; padding-top: 7px; padding-bottom: 7px; text-align: center; } #tip_message { background-color: #75B24C; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px; text-align: center; line-height: 18px; } .button,fieldset.submit input { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-repeat: no-repeat; background-position: center; background-color: #F4F4F4; color: #444444; margin: 0 auto; width: 80%; height: 3em; padding-top: 1px; border: 1px solid #d9d9d9; cursor: pointer; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 1.4rem; } fieldset.submit input.annuleer { margin-top: 10px; } a.button { display: block; text-decoration: none; text-align: center; padding-top: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin: 0 auto; margin-top: 10px; width: 75%; height: 2.5em; } a.button.button_small{ width: auto; min-width: 80px; padding: 10px 10px 0px 10px; height: 2em; } a.delete { font-weight: bold; text-decoration: none; color: #d14836; display: block; margin-top: 20px; width: 100%; text-align: center; } .button_green { background-color: #69ac36; color: #ffffff; border: 1px solid #65a634; font-size: 1.4rem; font-weight: bold; } .button_red { background-color: #d14836; color: #ffffff; border: 1px solid #c94635; font-size: 1.4rem; font-weight: bold; } .button:hover { box-shadow: 0 1px 1px rgba(160,160,160,0.3); -moz-box-shadow: 0 1px 1px rgba(160,160,160,0.3); -webkit-box-shadow: 0 1px 1px rgba(160,160,160,0.3); } .button_red:hover,.button_green:hover { box-shadow: 0 1px 1px rgba(160,160,160,0.4); -moz-box-shadow: 0 1px 1px rgba(160,160,160,0.4); -webkit-box-shadow: 0 1px 1px rgba(160,160,160,0.4); } .button:active,input.submit:active { background: #f0f0f0; border: 1px solid #d0d0d0; } .button_red:active { border: 1px solid #c94635; box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; } .button_green:active { border: 1px solid #65a634; box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,1) inset; } a.button.button-square { padding: 0px; font-size: 18px; min-width: 0px; line-height: 30px; width: 30px; height: 30px; margin-top: 0px; } } div.btn-group { position: relative; } div.btn-group > a.button { margin-left: -1px; float: left; border-radius: 0px; width: 25.7%; min-width: 0; } div.btn-group > a.button:first-of-type { border-radius: 0px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; margin-left: 0px; } div.btn-group > a.button:last-of-type { border-radius: 0px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } .datum { height: 20px; width: 100%; padding: 10px 0; text-align: center; font-weight: bold; font-size: 1.4rem; border-top: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; } .datum a { color: #333333; } .datumheader { display: inline-block; } .datumheader .datumtextloading { color: #333333; } .vorigedag { float: left; padding-left: 15px; width: 25px; } .volgendedag { float: right; padding-right: 15px; width: 25px; } .vorigedag a,.volgendedag a { text-decoration: none; font-size: 1.4rem; display: block; width: 25px; height: 25px; } ol#datummenu { display: none; position: relative; width: 215px; height: auto; margin: 0; padding: 0; z-index: 902; border: 1px solid #dfdfdf; -webkit-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); -moz-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); border-radius: 3px; background: #fff; } ol#datummenu li { display: block; width: auto; height: 26px; padding: 10px 5px 15px 5px; background: #fff; } ol#datummenu input[type=date]{ width: 120px; border-width: 0px; color: #333333; } ol#datummenu .button.button_horizontal { width: 40px; height: 26px; position: relative; bottom: 1px; } ol#datummenu li.datummenu_menulist { border-bottom: 1px solid #ccc; } ol#datummenu li:active { background: #eee; } ol#datummenu li a { text-decoration: none; font-size: 1.4rem; font-weight: normal; display: block; width: auto; height: 30px; padding-top: 5px; color: #333333; } @media only screen and (max-width: 300px) { .datum { font-size: 1.2rem; } ol#datummenu { width: 155px; } ol#datummenu li { padding: 10px 2px; } ol#datummenu li a { font-size: 1.2rem; } ol#datummenu input[type=date]{ width: 80px; } } .afspraak_container { width: 100%; height: auto; overflow: hidden; position: relative; } .afspraak_datum { float: left; width: 65px; } .afspraak_datum .dagtext { position: relative; top: 20px; font-size: 14px; color: #000; text-align: center; } .afspraak_datum .dagtext span { display: block; font-weight: bold; font-size: 16px; } .afspraak { width: 71%; padding: 15px 0px 15px 0px; margin: 4px 6px; border: 1px solid #dfdfdf; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #ebf2f8; text-decoration: none; width: auto; height: auto; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); } .beschikbaarheid { width: 71%; padding: 15px 0px 15px 0px; margin: 6px; border-bottom: 1px solid #eee; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #d7eade; text-decoration: none; width: auto; height: auto; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); } .contactinfo,.contactinfo .contact { margin-top: 5px; } .contactinfo{ display: none; } .afspraak:active { background-color: #d7e2ec; -webkit-tap-highlight-color: rgba(0,0,0,0); } .afspraak .afspraaktijden,.beschikbaarheid .afspraaktijden { float: left; width: 22%; padding-left: 10px; } .afspraak .afspraakbeschrijving,.beschikbaarheid .afspraakbeschrijving{ float: left; width: 71%; padding-left: 5px; } .starttijd,.eindtijd { color: #000; } .taak_notitie { margin-top: 5px; font-style: italic; } .edit{ position: absolute; top: 15px; right: 15px; } @media only screen and (max-width: 240px) { .afspraak .afspraaktijden,.beschikbaarheid .afspraaktijden { width: 22%; } .afspraak .afspraakbeschrijving,.beschikbaarheid .afspraakbeschrijving { width: 70%; } } .afspraak .afspraaktijden .starttijd,.beschikbaarheid .afspraaktijden .starttijd { font-weight: bold; font-size: 1.4rem; } .afspraak .afspraaktijden .eindtijd,.beschikbaarheid .afspraaktijden .eindtijd { font-size: 1.2rem; padding-left: 3px; } .afspraak .afspraaktijden .dagtext,.beschikbaarheid .afspraaktijden .dagtext { font-weight: bold; } .afspraak .afspraakbeschrijving .client,.afspraak .afspraakbeschrijving .totaaltijd { font-weight: bold; } #geenafspraken { text-align: center; padding: 20px 0 20px 0; border-bottom: 1px solid #D4D4D4; } .onkosten_omschrijving { float: left; width: 100%; padding-left: 12px; } .onkosten_omschrijving .beschrijving { font-weight: bold; clear: both; } .agenda_edit{ display: none; } ol { padding: 0px 7px 0px 7px; margin: 0px; } li { list-style-type: none; } form li { padding: 7px 0px; } li#hidden_li { display: none; } div#mobilemenu_wrapper { background: #50A5CF; height: 34pt; text-align: center; } ol#mobilemenu,ol#mobilemenu_slideout { position: fixed; right: 15px; bottom: 20px; width: auto; height: auto; margin: 0; padding: 0; z-index: 902; } ol#mobilemenu_slideout { display: none; right: 130px; bottom: 80px; border: 1px solid #dfdfdf; -webkit-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); -moz-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); border-radius: 3px; background: #fff; } @media only screen and (max-width: 320px) { ol#mobilemenu_slideout{ right: 80px; } } @media only screen and (max-width: 240px) { ol#mobilemenu_slideout{ right: 15px; } } div#currentitem { float: left; position: relative; top: 10pt; left: 5pt; color: #fff; } div#currentitem a { display: inline-block; width: 30px; height: 30px; text-decoration: none; } div#currentitem a i,div#usermenutoggle a i,div#settingsicon a i { color: #fff; padding: 7px 10px; } div#settingsicon a i { font-size: 1.4rem; } div#currentitem a:focus i,div#currentitem a:active i,div#usermenutoggle a:focus i,div#usermenutoggle a:active i,div#settingsicon a:focus i,div#settingsicon a:active i,div#currentitem.loading_current a i { padding: 7px 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: rgba(255,255,255,0.2); } div#usermenutoggle,div#settingsicon { float: right; position: relative; top: 10pt; right: 10pt; color: #fff; } div#usermenutoggle a,div#settingsicon a { color: #fff; text-decoration: none; } div#usermenu { display: none; position: absolute; top: 0px; right: 0px; height: auto; background: #eaeaea; border-bottom: 1px solid #ccc; -webkit-box-shadow: 0px 4px 10px 2px rgba(97,97,97,0.51); -moz-box-shadow: 0px 4px 10px -2px rgba(97,97,97,0.51); box-shadow: 0px 4px 10px -2px rgba(97,97,97,0.51); width: 100%; } div#usermenu ol { border-top: 1px solid #ccc; padding: 20px 0px; background: #fff; } div#usermenu ol li { padding: 10px 0px 10px 80px;; } div#usermenu p { text-align: center; } div#usermenu a { text-decoration: none; } div#usermenu a:focus,div#usermenu a:active { color: #1c82b5; } div#usermenu i.usericon { font-size: 32px; } div#usermenu_close { position: absolute; top: 0; left: 0; margin: 20px 0px 0px 0px; } div#usermenu_close a i { padding: 7px 10px; } div#usermenu_close a:focus i,div#usermenu_close a:active i { padding: 7px 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: rgba(255,255,255,0.5); } ol#mobilemenu li a.menu:hover { opacity:1; filter:alpha(opacity=100); } ol#mobilemenu li { display: block; float: left; width: 56px; height: 56px; background: #50A5CF; border-radius: 50%; margin-right: 10px; text-align: center; -webkit-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); -moz-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.51); } ol#mobilemenu li:hover { background: #1c82b5; } ol#mobilemenu li:active { background: #1c82b5; -webkit-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.7); -moz-box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.7); box-shadow: 4px 4px 10px -2px rgba(97,97,97,0.7); } ol#mobilemenu li#play-sign { background: #69ac36; } ol#mobilemenu li#stop-sign { background: #d14836; } ol#mobilemenu li#play-sign:active,ol#mobilemenu li#play-sign:hover { background: #5b9d28; } ol#mobilemenu li#stop-sign:active,ol#mobilemenu li#stop-sign:hover { background: #c83d2b; } ol#mobilemenu li a { display: block; height: 56px; width: 56px; text-decoration: none; cursor: pointer; } ol#mobilemenu li a i { color: #fff; font-size: 16px; position: relative; top: 19px } ol#mobilemenu li#play-sign a i { left: 3px } ol#mobilemenu_slideout li { display: block; width: auto; height: 21px; padding: 10px 10px 12px 10px; background: #fff; } ol#mobilemenu_slideout li:first-child,ol#mobilemenu_slideout li:nth-child(2) { height: 20px; border-bottom: 1px solid #ccc; } ol#mobilemenu_slideout li:active { background: #eee; } li#type_herhaling_li,li#frequentie_li,li#dagen_li,li#tot_en_met_enable_li,li#tot_en_met_li{ display: none; } ol#mobilemenu_slideout li a { text-decoration: none; font-size: 1.4rem; display: block; width: auto; height: 35px; color: #333333; } ol#mobilemenu_slideout li a i { font-size: 18px; position: relative; top: 1px; } form > fieldset > legend { background-color: #eee; background-repeat: repeat-x; height: 20px; padding: 8px 0 4px 0; margin: 5px 0px 5px 0px; text-align: center; color: #474747; border: 1px solid #D4D4D4; font-weight: bold; width: 100%; } fieldset fieldset legend { display: inline; float: left; position: relative; top: 2px; } fieldset { border: 0 none #FFFFFF; margin: 0; padding: 0; min-width: 100%; } fieldset.submit li { text-align: center; } fieldset fieldset ol{ float: left; } fieldset fieldset ol li { padding: 0px; } fieldset fieldset ol li label { position: relative; bottom: 3px; } ol#verwijderafspraakinfo { margin-bottom: 20px; } #timetrackklok { color: #69ac36; font-size: 2.8rem; font-weight: bold; margin: 0 auto; padding: 15px 0px; width: 225px; border: 1px solid #ccc; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-align: center; } #stop_timetrack ol { margin-left: 5px; margin-top: 10px; margin-bottom: 24px; } #stop_timetrack li.statictext span#client,#save_timetrack li.statictext span#client { font-size: 1.4rem; } #stop_timetrack + fieldset { margin-top: 10px; } li.statictext.clientlistitem { padding-bottom: 6px; padding-top: 10px; padding-left: 5px; } li.statictext.listitem { padding-left: 5px; margin-top: 2px; } li.statictext.clientlistitem.timetrack,li.statictext.listitem.timetrack { padding-left: 25px; } li#listnotitie { padding-top: 10px; } .statictext + .statictext { padding-top: 0px ! important; } input#total_time,span#total_time { font-size: 2rem; font-weight: bold; padding: 15px 0px; width: 97%; display: inline-block; border: 1px solid #999; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-align: center; } #totaaltijd { font-size: 2.0rem; font-weight: bold; text-align: center; margin: 20px 0 5px 0; } #totaaltijd.afronden { font-size: 1.5rem; } #orgineletijd { text-align: center; font-size: 1.2rem; margin-bottom: 10px; } input#aantal,input#prijs{ width: 22%; } select#btw,select#type{ width: 30%; } select#ca_frequentie { width: 90%; } li#dagen_li div { display: inline-block; width: 90%; } .nieuweafspraak{ float: left; } .nieuweonkosten{ float: right; } div#no_connection { position: absolute; display: none; width: 100%; height: 100%; z-index: 903; background-color: #4A93C0; color: white; } div#no_connection div#no_connection_notice { margin: 40px auto; width: 220px; text-align: center; } div#no_connection div#no_connection_notice span { display: block; margin-top: 40px; } div#no_account{ width: 300px; margin: 0 auto; text-align:center; padding: 40px 0; } div#no_account a{ font-size: 1.6rem; } ul#about_list li{ color: #48A3DA; list-style-type: disc; font-size: 1.4rem; padding: 2px; } div#about{ display: none; } div#register{ border: 1px solid #333333; padding: 5px; } p#link{ color: #48A3DA; font-size: 1.8rem; font-weight: bold; text-align: center; } li#beschrijving_li input.ac_input{ padding: 5px; } #footer { border-top: 1px solid #75b8e0; padding-top: 4px; text-align: right; margin-top: 20px; font-size: 1rem; } #footer a { margin-right: 10px; } div#forgot_password { margin: 60px 0px 0px 0px; text-align: center; } div.ac_input_container { width: 100%; } @font-face { font-family: 'FontAwesome'; src: url(https://www.factuurdesk.nl/css/../fonts/fontawesome-webfont.eot?v=3.2.1); src: url(https://www.factuurdesk.nl/css/../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1) format('embedded-opentype'),url(https://www.factuurdesk.nl/css/../fonts/fontawesome-webfont.woff?v=3.2.1) format('woff'),url(https://www.factuurdesk.nl/css/../fonts/fontawesome-webfont.ttf?v=3.2.1) format('truetype'),url(https://www.factuurdesk.nl/css/../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1) format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before,[class*=" icon-"]:before { font-family: FontAwesome !important; font-weight: normal; font-style: normal; display: inline-block; }   .icon-plus:before { content: "\f067";} .icon-play:before { content: "\f04b"; } .icon-caret-left:before { content: "\f0d9"; } .icon-caret-right:before { content: "\f0da"; } .icon-caret-down:before { content: "\f0d7";} .icon-time:before { content: "\f017"; } .icon-stop:before { content: "\f04d";} .icon-chevron-left:before { content: "\f053";} .icon-chevron-right:before { content: "\f054";} .icon-chevron-sign-left:before {content: "\f137";} .icon-chevron-sign-right:before {content: "\f138";} .icon-angle-left:before { content: "\f104";} .icon-angle-right:before { content: "\f105";} .icon-signout:before { content: "\f08b";} .icon-user:before { content: "\f007";} .icon-question-sign:before { content: "\f059";} .icon-calendar:before { content: "\f073";} .icon-calendar-empty:before { content: "\f133";} .icon-cog:before { content: "\f013";} .icon-undo:before { content: "\f0e2";} .icon-pencil:before { content: "\f040";}