/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0; } /* End of Reset */ @font-face { font-family: 'Dosis'; src: url('/fonts/Dosis/dosis-regular-webfont.eot'); src: url('/fonts/Dosis/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/Dosis/dosis-regular-webfont.woff') format('woff'), url('/fonts/Dosis/dosis-regular-webfont.ttf') format('truetype'), url('/fonts/Dosis/dosis-regular-webfont.svg') format('svg'); } @font-face { font-family: 'DosisBold'; src: url('/fonts/Dosis/dosis-bold-webfont.eot'); src: url('/fonts/Dosis/dosis-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/Dosis/dosis-bold-webfont.woff') format('woff'), url('/fonts/Dosis/dosis-bold-webfont.ttf') format('truetype'), url('/fonts/Dosis/dosis-bold-webfont.svg') format('svg'); } body, .ui-page {/*background: url('/ambersap/images/campus-skyline2.png');*/ background-position: center top; background-size: 740px auto; background-repeat: no-repeat; /*overflow: hidden;*/ font-family: "Open Sans", Tahoma; min-width: 75rem; background: #FFF; } header{ font-family: "Raleway", "Open Sans", Tahoma; color: #28718E; } content{ /*width: 80%;*/ /*max-width: 1280px;*/ margin: auto; display: block; } content.full-width{ width: 100%; max-width: 4040px; margin: auto; display: block; } footer{ } header{width: 100%; /*position: fixed;*/ background:white; top:0; z-index:2000; padding: 0 5%; background: url("/images/rtsched_header_bg.png"); box-sizing: border-box; width: 100%; height: auto; background-color: white; background-position: top center; background-size: cover; background-repeat: no-repeat; } header.sticky{opacity: 0.8; } content{ box-sizing: border-box; width: 100%; /*max-width: 1280px;*/ margin: auto; display: block; /*background-color: #28718E;*/ /*background-color: #fefefe;*/ padding: 0px 0px; font-family: "Open Sans", Tahoma; min-width: 75rem; position: relative; } content h3 {font-size: 1.2rem; } content .row{width: 100%; box-sizing: border-box; /*background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 20%,rgba(0, 0, 0, 0) 20%);*/ } content .row:nth-child(2) {/*background: linear-gradient(90deg, rgba(255, 255, 255, 0.58) 20%,rgba(255, 255, 255, 1) 20%);*/ background: white; background: linear-gradient(180deg, rgb(198, 198, 198) 0px, white 20px); padding-top: 15px; } .dark content .row:nth-child(2) {padding-top: 0px; } content .row:nth-child(2n+3){/*background-color: rgba(255, 255, 255, 0.1);*/ background-color: rgba(37, 37, 37, 1) } content .row:nth-child(2n+3) .col{color: #fefefe; } content .row.first{/*border-bottom: 1px solid #E0F4F8;*/ /*background-color: #94D7E4;*/ /*background-color: #A5E1EC;*/ background-color: rgb(10, 10, 10); box-shadow: 0px 6px 11px -2px rgb(80, 78, 76); z-index: 101; position: relative; } footer{ } body { padding: 0px; margin: 0px; font-size: 14px; } .notification{position: fixed; margin-left: 10%; margin-right: 10%; width: 80%; left: 100%; top: 30px; background: #efefef; padding: 10px 20px; box-shadow: 4px 4px 3px rgba(50,50,50,0.9); border-radius: 4px; color: #555;} .notification_msg{display: inline-block; border-right: 1px solid #555; padding-right: 1rem; width: 85%; box-sizing: border-box; padding: 10px; border-radius: 8px 0 0 8px; background: rgba(255,255,255,0.5);} .notification_action{display: inline-block; border-right: 1px solid #555; padding-left: 1rem; padding-right: 1rem; width: 10%; box-sizing: border-box; background: rgba(255,255,255,0.5); padding: 10px; border-radius: 0; text-align: center;} .notification_close{display: inline-block; padding-left: 1rem; width: 5%; box-sizing: border-box; background: rgba(255,255,255,0.5); padding: 10px; border-radius: 0 8px 8px 0; text-align: center;} .logo{ padding: 0px; color: #00A3B3; display: inline-block; width: 50%; box-sizing: border-box; font-size: 30px; color: #1f894e; font-family: font-family:"open_sanslight"; } .logo_cont {display: inline-block; position: relative; } .logo a { color: #1f894e; text-decoration: none; font-weight: lighter; } .logo .name { letter-spacing: 29px; text-transform: lowercase; display: block; text-align: left; font-size: 25px; padding-top: 8px; } .logo .desc { font-size: 11px; letter-spacing: 14.5px; display: block; text-align: left; text-transform: small-caps; } .logo .name a, .logo .desc a{ color: #00A3B3; text-decoration: none; } .logo_img { height: 72px; width: auto; display: inline-block; vertical-align: middle; padding-top: 8px; margin-bottom:5px; } .nav{ } .site_nav_expand {padding: 14px 19px; font-size: 1.8rem; color: #B7B7B7; /*background: #0C2D3A;*/ background: #2C2C2C; width: 4rem; box-sizing: border-box; cursor: pointer; } .site_nav_expand:hover {color: #CCC; } .site_nav {position: absolute; /*background: #0C2D3A;*/ min-height: 260px; z-index: 200; width: 0; } .site_nav .nav {margin-left: -200px; transition: margin-left 0.5s; /*background: #0C2D3A;*/ background: #000; margin-top: 0; margin-bottom: 0px; padding-bottom: 20px; display: inline-block; } .site_nav .nav.expand {margin-left: 0px; transition: margin-left 0.5s; } .site_nav .nav li {position: relative; width: 200px; } .viewer-nav ul, .nav ul{ padding-left: 0px; } .viewer-nav ul li, .nav ul li{ cursor: pointer; display: inline-block; padding: 8px 12px; border-left: 35px solid #F0880E; margin: 8px; background-color: white; box-shadow: 2px 2px 0px rgba(100,100,100,0.2); border-radius: 3px; } .nav ul li:first-child{ } .viewer-nav ul li:hover, .nav ul li:hover{ background-color: #FAFAFA; border-left-color: #3B32FF; border-left-color: #0EB1F0; } .clock-button{ cursor: pointer; background-color: #FFF; box-shadow: 2px 2px 0px rgba(100,100,100,0.2); display: inline-block; margin: 8px; padding: 10px 37px; font-size: 20px; border-radius: 3px; border-left: solid #B94E1C 45px; } .clock-button:hover{ border-left-color: #0EB1F0; } content h2 {color: #FFF; padding-left: 8px; margin-bottom: 0px; margin-top: 0px; font-size: 18px; } .viewer{ position: fixed; top: 100%; width: 100%; background: linear-gradient( 115deg, #4F4657 30%, #120D11); display: block; left: 0px; height: 100%;} .slide-down {height: 20px; display: block; text-align: center; color: white; text-shadow: none; padding: 8px; line-height: 20px; border-bottom: 1px solid #3C2B4B; box-shadow: 0px 1px 0px #70647A; background: linear-gradient(135deg, #f9f9f9 33%, transparent 30%),linear-gradient(45deg, transparent 67%, #f9f9f9 30%); } .viewer-content .section{height: 100%; width: 100%; display: block; position: absolute; left: 100%; overflow: auto; } .viewer-content .section .form{width: 80%; margin: auto; } .viewer-content .section .form h1{color: white; text-shadow: none; } .viewer-nav{ width: 80%; margin: auto; } .viewer-nav ul li{ } .row.first .col.first { /*border-right: #FFFFFF 1px solid;*/ /*background: #B4E8F2;*/ position: relative; padding: 0px; width: 4rem; } .row .col.first { /*width: 20%;*/ } .col{ display: inline-block; box-sizing: border-box; vertical-align: top; padding: 20px 40px; position: relative; } .col3{ width: 30%; margin-right: 5%; } .col3.last{ margin-right: 0; } .col{ color: #757575; /*max-width: 96%;*/ } .col h2:hover{ /*color: #00A3B3;*/ } .col p { font-size: 13px; } .col .off-screen-left { float: right; } .col .off-screen-right { float: left; } table.memberlist { width: 100%; text-align: center; margin-bottom: 15px; border: 1px solid #ddd; border-bottom: 0px; } .memberlist form{ display: inline-block; margin: 1px; } .memberlist td { vertical-align: middle; padding: 5px 5px 0px; } form input[type="text"], form input[type="password"] { border: 0px; padding: 3px 7px; border: #28718E 1px solid; } form label { width: 12rem; display: inline-block; } form label { margin-bottom: 20px; font-size: 1.1rem; vertical-align: top; } form input[type='text'], form input[type='password'], form select { background-color: #F2F2F2; border: 0px solid #fff; padding: 7px; width: 12.5rem; box-sizing: border-box;} form { margin-bottom: 7px; } span.input_sub { padding: 7px; display: inline-block; background-color: #F2F2F2; min-width: 12.5rem; box-sizing: border-box; } form .cohort_options{max-width: 300px; } form .cohort_option {padding: 7px 10px; background: rgba(100,100,100,1); color: white; margin-right: 2px; display: inline-block; } #dialog-form form label { margin-bottom: 10px; font-size: 1rem; } .fswindow input {margin-top: 0.2rem;} .theme_preview{ display: inline-block; margin-left: 1rem; max-width: 44rem; vertical-align: top;} .theme_preview span{ display: inline-block; width: 1rem; line-height: 1rem; margin-bottom: 0.2rem; } pre { word-wrap: normal; white-space: pre-wrap; max-width: 80%; display: inline-block; padding: 0px; } .nav { padding: 0px; } .nav li { list-style-type: none; } .nav li a { text-decoration: none; display: block; padding: 6px 10px; background: #2C2C2C; margin-top: 3px; font-weight: bold; /*color: #28718E;*/ color: #AFAFAF; border-left: 4px solid transparent; } /*.nav li:nth-child(2n) a { background: #F6FEFF; }*/ .nav li a:hover { text-decoration: none; /*background: #FFF;*/ /*color: #00A3B3;*/ color: #C4C4C4; border-left: 4px solid #C4C4C4; } .row:nth-child(2) .col.first { padding: 0px; background: #143948; } .row:nth-child(2) .col.first { background: #0C2D3A; } /*.nav li a { text-decoration: none; display: block; padding: 6px 10px; background: #FFF; margin-bottom: 0px; font-weight: bold; /*color: #28718E;*/ color: #979797; border-left: 4px solid transparent; background: linear-gradient(181deg, #184354, #143948); border-top: 1px solid #265C73; border-right: 1px solid #265C73; border-bottom: 1px solid #122B35; }*/ .nav li a { text-decoration: none; display: block; padding: 6px 10px; background: #FFF; margin-bottom: 0px; font-weight: bold; color: #28718E; border-left: 4px solid transparent; background: linear-gradient(181deg, #184354, #143948); /* border-top: 1px solid #265C73; */ /*border-right: 1px solid #265C73;*/ /* border-bottom: 1px solid #122B35; */ background: #0A242E; margin-bottom: 2px; } /*.nav li:nth-child(2n) a { background: linear-gradient(181deg, #184354, #143948); }*/ footer{ background-color: #010101; box-sizing: border-box; width: 100%; /* max-width: 1280px; */ margin: auto; display: block; padding: 0px 10%; overflow: hidden; font-family: "Open Sans"; color: #7A7A7A; margin-bottom: 0px; padding-top: 15px; min-height: 75px; } /* End Dce */ .logo .text-block {display: inline-block; width: 205px; } .logo-layout .settings .controls a, .logo-layout .settings .controls span { display: inline-block; text-decoration: none; color: #505050; line-height: 1.2rem; } header .settings{display: inline-block; text-align: right; width: 50%; box-sizing: border-box; vertical-align: top; position: relative; top: 0.7rem;} .logo-layout .settings .controls span i { color: #F0F0F0; } .logo-layout .settings .controls span:hover i { color: #858585; } .settings .controls {font-family: "Open Sans"; } .clock_button {color: white; background: linear-gradient(190deg, #A5E1EC, #4592A0); background: linear-gradient(190deg, #A5E1EC, #75BBC7); padding: 40px 0px; height: 100px; width: 100px; box-sizing: border-box; text-align: center; /*box-shadow: -1px 2px 4px #777;*/ position: relative; } .clock_button.clockout {color: white; background: linear-gradient(190deg, #FFB7B0, #FF7E70); } .clock_button:active {color: white; background: linear-gradient(190deg, #A5E1EC, #75BBC7); /*box-shadow: -1px 1px 1px #777;*/ top: 2px; left: -1px; } .clock_button.clockin {color: white; /*background: linear-gradient(190deg, #A8F3B9, #83CE94);*/ background: #99cc33; } .clock_button.clockin:active {color: white; /*background: linear-gradient(190deg, #A8F3B9, #83CE94);*/ } .clock_button.clockout {color: white; /*background: linear-gradient(190deg, #FFB7B0, #FF7E70);*/ background: #0099cc; } .clock_button.clockout:active {color: white; /*background: linear-gradient(190deg, #FFB7B0, #FF7E70);*/ } .lunch_button {color: white; /*background: linear-gradient(190deg, #A5E1EC, #4592A0);*/ /*background: linear-gradient(190deg, #A5E1EC, #75BBC7);*/ padding: 30px 0px; height: 80px; width: 80px; box-sizing: border-box; text-align: center; /*box-shadow: -1px 2px 4px #777;*/ position: relative; font-size: 14px; } .lunch_button:active {/*box-shadow: -1px 1px 1px #777;*/ top: 2px; left: -1px; } .lunch_button.lunchstart {/*background: linear-gradient(190deg, #A5E1EC, #75BBC7);*/ background: #f90; } .lunch_button.lunchstop {/*background: linear-gradient(190deg, #FFD7B0, #FFB670);*/ background: #c33; } .button_base {/*padding: 6px 7px 11px 10px;*/ /*background: #F0F0F0;*/ border-radius: 20px; display: inline-block; overflow: hidden; box-sizing: border-box; position: absolute; top: 0px; left: 0px; } .button_base .lunch_button { } .shadow_controls .button_base div {cursor: default; } .active_button { cursor: pointer;} .shadow_controls{ position: absolute; } .shadow_controls .clock_button, .shadow_controls .lunch_button{ background-color: lightgray; } .shadow_controls .clock_button:active, .shadow_controls .lunch_button:active{ top: 0px; left: 0px; } .shadow_controls #c1{ } .shadow_controls #l1{ left: 115px; top: 10px; } .shadow_controls #l2{ left: 210px; top: 10px; } .shadow_controls #c2{ left: 305px; } .selected_location.disabled{ background-color: rgba(211, 211, 211,1); } /*Colored Controls*/ .shadow_controls .button_base .clockin{ background-color: #E1F3BE; } .shadow_controls .button_base .lunchstart{ background-color: #FFE7C3; } .shadow_controls .button_base .lunchstop{ background-color: #F4E3E3; } .shadow_controls .button_base .clockout{ background-color: #D6EDF3; } .selected_location.disabled{ background-color: rgba(223, 209, 237,1); } tr.clockin td { /*color: #83CE94;*/ } /*tr.clockin td:nth-child(1):before { font-family: "FontAwesome"; content: "\f118"; width: 30px; display: inline-block; } tr.clockin td:nth-child(1):before { font-family: "FontAwesome"; content: "\f090"; width: 30px; display: inline-block; } tr.clockin td:nth-child(1):before { font-family: "FontAwesome"; content: "\f015 \f061 \f0b1"; width: 60px; display: inline-block; letter-spacing: 5px; }*/ tr.clockout td { /*color: #FF7E70;*/ } /*tr.clockout td:nth-child(1):before { font-family: "FontAwesome"; content: "\f119"; width: 30px; display: inline-block; } tr.clockout td:nth-child(1):before { font-family: "FontAwesome"; content: "\f08b"; width: 30px; display: inline-block; } tr.clockout td:nth-child(1):before { font-family: "FontAwesome"; content: "\f0b1 \f061 \f015"; width: 60px; display: inline-block; letter-spacing: 5px; }*/ tr.lunchstart td { /*color: #75BBC7;*/ } /*tr.lunchstart td:nth-child(1):before { font-family: "FontAwesome"; content: "\f061 \f0f5"; width: 30px; display: inline-block; } tr.lunchstart td:nth-child(1):before { font-family: "FontAwesome"; content: "\f0f5"; width: 30px; display: inline-block; } tr.lunchstart td:nth-child(1):before { font-family: "FontAwesome"; content: "\f0b1 \f061 \f0f5"; width: 60px; display: inline-block; letter-spacing: 5px; }*/ tr.lunchstop td { /*color: #FFB670;*/ } /*tr.lunchstop td:nth-child(1):before { font-family: "FontAwesome"; content: "\f061 \f1b1"; width: 30px; display: inline-block; } tr.lunchstop td:nth-child(1):before { font-family: "FontAwesome"; content: "\f0b1"; width: 30px; display: inline-block; } tr.lunchstop td:nth-child(1):before { font-family: "FontAwesome"; content: "\f0f5 \f061 \f0b1"; width: 60px; display: inline-block; letter-spacing: 5px; }*/ tr.clockin td:nth-child(1):before, tr.clockout td:nth-child(1):before, tr.lunchstart td:nth-child(1):before, tr.lunchstop td:nth-child(1):before, tr.none td:nth-child(1):before, .last_activity tr th:nth-child(1):before { font-family: "FontAwesome"; width: 2rem; display: inline-block; letter-spacing: 5px; } td.clockin:before, td.clockout:before, td.lunchstart:before, td.lunchstop:before, td.login:before, td.no_login:before, td.none:before, .last_activity tr th:nth-child(3):before { font-family: "FontAwesome"; width: 2rem; display: inline-block; letter-spacing: 5px; } .time_history tr.clockin td:nth-child(1):before, .time_history tr.clockout td:nth-child(1):before, .time_history tr.lunchstart td:nth-child(1):before, .time_history tr.lunchstop td:nth-child(1):before { width: 60px; } tr.clockin td:nth-child(1):before, td.clockin:before { content: "\f0f8"; } tr.clockout td:nth-child(1):before, td.clockout:before { content: "\f015"; } tr.lunchstart td:nth-child(1):before, td.lunchstart:before { content: "\f0f5"; } tr.lunchstop td:nth-child(1):before, td.lunchstop:before { content: "\f0f8"; } tr.login td:nth-child(1):before, td.login:before { content: "\f00c"; } tr.no_login td:nth-child(1):before, td.no_login:before { content: "\f00d"; } tr.none td:nth-child(1):before, .last_activity tr th:nth-child(1):before, td.none:before { content: " "; } .last_activity td.clockin:before { color: #99cc33 } .last_activity td.lunchstart:before { color: #f90; } .last_activity td.lunchstop:before { color: #c33; } .last_activity td.clockout:before { color: #0099cc; } .last_activity td.login:before { color: #99cc33; } .last_activity td.no_login:before { color: #c33; } .last_activity th { padding: 0px 3px; } .time_history tr.clockout { border-top: 2px solid; } select.selected_location, .timeclock_block input[type="text"] {padding: 7px 10px; border: none; background: rgb(110, 71, 153); margin-left: 0px; color: white; margin-bottom: 10px; border-radius: 10px; } .timeclock_block input[type="text"] { display: none; } .currently .at_home:before { font-family: "FontAwesome"; content: "\f015";} .currently .at_work:before { font-family: "FontAwesome"; content: "\f0f8"} .currently .at_lunch:before { font-family: "FontAwesome"; content: "\f0f5";} .timeclock_block{ display: inline-block; box-sizing: border-box; position: relative; vertical-align: top;} .timeclock_block h3{ margin-bottom: 10px; margin-top: 10px; } .timeclock_block h3:nth-of-type(2){ text-align: right; } .timeclock_block h3 a{ text-decoration: none; color: #757575; } .timeclock_block_70{ width: 70%;} .timeclock_block_50{ width: 50%;} .timeclock_block_30{ width: 30%;} .timeclock_block_first{ padding-right: 2rem;} .timeclock_block_last{ padding-right: 0;} .timeclock_block { margin-bottom: 40px; } a.link{ position: relative; } a.link:before{ font-family: 'FontAwesome'; content: '\f0c1'; position: absolute; right: 100%; padding-right: .2rem; font-size: 1rem; vertical-align: middle;} #time_clock_controls{ position: relative; margin-top: 6px;} .timeclock_right{ text-align: center; } .current_bush div { text-align: center; } .current_status{ /*display: inline-block;*/ } .currently {display: block; width: 100%; min-width: 150px; padding: 10px 0px; } .currently i{font-size: 7rem; width: 7rem;} /*time_clock_controls .button_base {display: none;}*/ .table {/*display: inline-block;*/ box-sizing: border-box; } .table th {text-align: left; } .table tr td {padding: 3px; } .table tr {border-bottom: 1px solid #ddd; } .table tr:nth-child(even) {background: #fafafa; } .table tr td:nth-child(even) {background: #F8F8F8; } .table tr:nth-child(even) td:nth-child(even) {background: #efefef; } .memberlist tr td:nth-of-type(3) { text-transform: capitalize; } .memberlist tr.director td:nth-of-type(3) { background-color: #9FB2CC; color: white; } .memberlist tr.scheduler td:nth-of-type(3) { background-color: #BDCBDD; color: white; } .time_history {margin-top: 10px; width: 100%; } .upcoming_shifts {margin-top: 20px; width: 100%; } .time_override td:nth-child(n+2) span{cursor: pointer; } .time_override td:nth-child(n+2) span:after{/*float: right;*/ display: inline-block; font-family: "FontAwesome"; content: "\f040"; padding-left: 10px; } .time_override td .update_this input{width: 100px; } /*.time_override td .update_this:after{display: inline-block; font-family: "FontAwesome"; content: "Save"; padding: 3px 10px; cursor: pointer; box-shadow: 0px 0px 2px #000; margin-left: 10px; }*/ .time_override td .save_this {display: inline-block; padding: 3px 10px; cursor: pointer; box-shadow: 0px 0px 2px #000; margin-left: 10px;} .calendar { table-layout: fixed; position: relative; } .calendar table { table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse; } .calendar .calendar-row { position: relative; } .calendar .data-row { position: absolute; top: 0px; left: 0px; } .calendar .cosmetics-row { height: 150px; border-bottom: 1px solid #00A3B3; } .calendar.week-calendar .calendar-head tr td:first-child, .calendar.week-calendar .data-row tr td:first-child, .calendar.week-calendar .cosmetics-row tr td:first-child { width: 40px; } .calendar.week-calendar .calendar-row td { border-top: 1px solid; border-right: 1px solid; } .calendar.week-calendar .calendar-row td.half-hour { border-top: 1px dotted; } .calendar.week-calendar .calendar-row td, .calendar.week-calendar .calendar-row td.half-hour { border-color: #e9e9e9; border-color: #fafafa; } .calendar.week-calendar .cosmetics-row { height: 71em;} .calendar.week-calendar .cosmetics-row td { background: none; } .calendar.week-calendar .cosmetics-row td:nth-child(2n) { background: rgba(255, 242, 174, 0.1); } .calendar.week-calendar .data-row tr:nth-child(2n) td { background: rgba(255, 242, 174, 0.1); } .calendar.week-calendar .data-row .day-hour { background: rgba(255, 242, 174, 0.1); padding: 3px; } .calendar .calendar-head { border-bottom: 1px solid #00A3B3; } .calendar .calendar-row { /*border-left: 1px solid #00A3B3;*/ } td.calendar-day, td.calendar-day-np, td.calendar-day-head { background: white; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #40B7FF #00A3B3 #00A3B3 #A4DDFF; /* border-radius: 8px; */ background: linear-gradient(140deg, #FDFDFD, #F8F8F8 ); border: none;} td.calendar-day-np { background: white; } td.calendar-day-head { background: white; border: none; } .calendar .calendar-day { vertical-align: top; position: relative; } .calendar .calendar-data { vertical-align: top; position: relative; padding: 3px; } .calendar .calendar-data .day-number { padding-left: 3px; font-family: monospace; } .calendar .calendar-data a { text-decoration: none; color: #333; } .calendar .highlight-time { border-radius: 3px; box-sizing: border-box; background-color: #EA8700; padding-left: 4px; font-size: small; text-shadow: none; color: white; margin-right: 0px; margin-left: 1px; line-height: 1.4rem; font-family: Tahoma; } /*td.calendar-day:hover .day-number { color: #fafafa; }*/ td.calendar-day p { padding-left: 3px; padding-right: 3px; color: #444; font-size: small; } /*td.calendar-day:hover p { color: #fafafa; }*/ /*td.calendar-day:hover { background: linear-gradient(140deg, #F6FCFF, #E9F7FF ); }*/ /*td.calendar-day:hover { background: linear-gradient( 170deg, #56BDF8, #2789C0 ); color: #fafafa; }*/ .calendar.week-calendar .calendar-row td, .calendar.week-calendar .calendar-row td.half-hour { border-color: #e9e9e9; border-color: #fafafa; } .calendar.week-calendar .cosmetics-row td { background: none; } .calendar.week-calendar .cosmetics-row td:nth-child(2n) { background: rgba(255, 242, 174, 0.1); } .calendar.week-calendar .data-row tr:nth-child(2n) td { background: rgba(255, 242, 174, 0.1); } .calendar.week-calendar .data-row .day-hour { background: rgba(255, 242, 174, 0.1); } td.calendar-day-np { background: white; } td.calendar-day-head { background: white; } .calendar .month-calendar-month-name {color: inherit; padding: 0px 10px 15px; font-size: 2.3rem; } .calendar .month-calendar-month-name a {color: inherit; padding: 0px 1rem; } .calendar .month-calendar-month-name a:hover {color: black; } .calendar .highlight-time { background-color: #EA8700; color: white; } td.calendar-day p { color: #444;} .calendar .cosmetics-row { height: 150px; border-bottom: 1px solid #00A3B3; } .calendar .calendar-head { border-bottom: 1px solid #00A3B3; } .calendar .calendar-row { /*border-left: 1px solid #00A3B3;*/ } td.calendar-day, td.calendar-day-np, td.calendar-day-head { background: white; border-color: #40B7FF #00A3B3 #00A3B3 #A4DDFF; background: linear-gradient(140deg, #FDFDFD, #F8F8F8 );} .scheduler-view{margin-bottom: 20px; } .scheduler-view .button{display: inline-block; padding: 0px; margin-right: 7px; cursor: pointer; } .scheduler-view .button.highlight {background-color: rgb(0, 191, 255); } .scheduler-view a { display: block; height: 100%; width: 100%; position: relative; padding: 10px 15px; box-sizing: border-box; } .scheduler-view .button.send_notifications { background-color: rgb(242, 71, 71); background-color: rgb(242, 183, 71); background-color: rgb(242, 131, 71); background-color: rgb(242, 98, 71); } .scheduler-view .button.send_notifications:hover { background-color: rgb(252, 119, 95); } .scheduler-view .button.grey { background-color: lightgrey; cursor: default; } .scheduler-view .button.addshift { background-color: rgb(57, 191, 111); } .scheduler-view .button.addshift:hover { background-color: rgb(0, 204, 121); } .round-corners{border-radius: 5px; } .round-corners.small{border-radius: 3px; } .round-corners.large{border-radius: 15px; } .shadow{box-shadow: 2px 2px 7px #ccc; } .row:nth-child(2) .col:nth-child(2) { width: 100%; min-width: 75rem; } .weekly_calendar {/*display: table;*/ width: 100%; display: block; } .viewable_days {display: inline-block; width: 95.5%; position: relative; height: 83.5rem; overflow: hidden; white-space: nowrap; overflow-x: auto; padding-left: 15px; box-sizing: border-box; } .viewable_days.loading{opacity: 0.9; } .weekly_calendar .day{display: inline-block; vertical-align: top; box-sizing: border-box; border-bottom: 1px solid #eee; margin-top: 0.7rem; white-space: normal; position: relative; } .weekly_calendar .viewable_days .day{margin-left: 0px; } .weekly_calendar.two .day{/*width: 5.6%;*/ width: 6.24%; } .weekly_calendar.one .day{width: 11.8%; } .weekly_calendar.daily .day{width: 94.7%; } .weekly_calendar .day .effective_date {height: 0.6rem; box-sizing: border-box; background-color: #eee; cursor: pointer; border-bottom: 0.25rem white solid; border-top: 0.25rem solid white; position: relative; z-index: 2; } .weekly_calendar .day .dayname, .weekly_calendar .day .month-day { background-color: #fff;} .weekly_calendar .day .effective_date.unpublished, .weekly_calendar .day .dayname.unpublished, .weekly_calendar .day .month-day.unpublished {background-color:rgb(206, 240, 255);border-color:#FFF;} .weekly_calendar .day .effective_date.published{background-color:#eee;border-color:#eee} .weekly_calendar .day .effective_date:hover{border-left: 5px solid red; } .weekly_calendar .day .dayname {padding-left: .1rem; padding-top: 0.5rem; box-sizing: border-box; height: 1.7rem; } .weekly_calendar .day .dayname span{border-bottom: 2px solid transparent; box-sizing: border-box; display: block; } .weekly_calendar .day .month-day {height: 1.2rem; box-sizing: border-box; } .weekly_calendar .day .month-day a { color: inherit; } .weekly_calendar .day.target .dayname { /*color: #F1AF60;*/ } .weekly_calendar .day.target .time { /*background-color: #FFD8A9;*/ } .weekly_calendar .day.today .dayname span { /*border-bottom-color: #F00;*/ } .weekly_calendar .day.today .time { /*background-color: #FFF;*/ } .weekly_calendar .day .month-day .month{display: inline-block; padding-left: 3px; font-size: .9rem; } .weekly_calendar .day .month-day .daynum{display: inline-block; padding-left: 3px; font-size: .9rem; } .weekly_calendar .day.labels { width: 4.5%; z-index: 3; position: relative; } .weekly_calendar .day.labels .dayname { visibility: hidden; } .weekly_calendar .day.labels .month-day { visibility: hidden; } .weekly_calendar .day.labels .time { font-size: 0.95rem; line-height: 1.65rem; border-left: 1px solid #eee; } .weekly_calendar .day .time{display: block; width: 100%; box-sizing: border-box; border-top: 1px solid #eee; border-right: 1px solid #eee; height: 1.65rem; padding-left: 3px; position: relative; } .weekly_calendar .day.unpublished .times_table, #month_calendar .calendar-day.unpublished{background: linear-gradient(140deg, #EBF9FF, #DAF2FE); border-color: rgb(206, 240, 255); } .weekly_calendar .day.unpublished .time { background-color: rgb(218, 245, 250); border-color: #fff; } .weekly_calendar .day .times .ui-selecting { background: #FECA40; } .weekly_calendar .day .times .ui-selecting .selecting_time { background: #FECA40; } .weekly_calendar .day .times .ui-selected { background: #F39814; color: white; } .weekly_calendar .day .times .ui-selected .selecting_time { background: #F39814; color: white; } .selecting_time { position: absolute; width: 100%; display: block; left: 0px; box-sizing: border-box; padding: 0px 0px 4px 5px; z-index: 2; } .weekly_calendar .day .time.half-time{border-top-style: dotted; } .weekly_calendar .day.marker{border-right: 2px solid #F00; width: 1px; z-index: 12; } .weekly_calendar .day.marker .dayname{ background-color: #F00;} .weekly_calendar .day.marker .effective_date{position: relative; border-left: none; } .weekly_calendar .day.marker .effective_date .fa{position: absolute; color: red; top: -16px; left: -14px; font-size: 2.2rem; z-index: 3; cursor: ew-resize; } .weekly_calendar .day.labels .effective_date{visibility: hidden; } .marker, .sortable-placeholder {display: inline-block; width: 1px; background: linear-gradient(180deg, transparent 0px, #ccc 2px, transparent ); cursor: pointer; } .sortable-placeholder{background: transparent; border-right: 2px solid #efefef; } .ui-dialog {background: rgba(255,255,255,0.6); } .day .times{position: relative; } .day2_calendar .dayname, .day2_calendar .month, .day2_calendar .daynum, .day2_calendar .fullyear{font-size: 2rem; display: inline-block; } table.times_table {position: absolute; width: 100%; top: 0px; left: 0px; border-collapse: collapse; } .times_table tr td {height: 1.5rem; border-top: 1px solid transparent; border-right: 1px solid transparent; line-height: 0.85rem; } .shift_block {box-sizing: border-box; border-top: 1px solid #FFF; //background: linear-gradient(230deg, rgba(241, 146, 25, 0.7), rgba(255, 214, 140, 0.5)); z-index: 2; position: relative; width: 90%; color: black; overflow: hidden; padding: 0px 5px; /* color: white; */ /*box-shadow: 1px 1px 2px 0px #868686;*/ border: 1px solid rgba(0, 0, 0, 0.22); cursor: pointer; display: inline-block; min-width: 1rem; min-width: 0.68rem; width: 0.68rem; margin-right: 2px; margin-left: 2px; max-height: 0.68rem; text-indent: -1000px; box-sizing: border-box; vertical-align: top; margin-bottom: 2px; cursor: pointer; } .day2_calendar .viewable_days{overflow: hidden; white-space: normal; } .day2_calendar .shifts {margin-top: 20px; } .day2_calendar .shift_block {width: 100%; width: 100%; max-height: 100px; border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(255,255,255,0.7); border-radius: 5px; box-shadow: 2px 2px 2px #ccc; box-sizing: border-box; padding: 0px; margin: 0px; text-indent: 0; position: relative; margin-bottom: 0.4rem; /* max-width: 400px; */ /* display: block; */ max-width: 19.375rem; display: inline-block; margin-right: 0.5rem; } .day2_calendar .shift_block .user-icon {height: 100%; display: inline-block; text-indent: 0; left: 0; top: 0; //color: white; text-align: center; box-sizing: border-box; font-weight: lighter; vertical-align: top; width: 2.4rem; /*line-height: 1.5rem;*/ font-size: 1.3rem; padding: 0.4rem 0; } .day2_calendar .shift_block .user-icon .ln {display: inline-block; font-size: 0.6rem; position: relative; top: 0.1rem; } .day2_calendar .shift_block .user-icon.large {width: 4.3rem; /* line-height: 2.3rem; */ font-size: 3.1rem; padding: 0.4rem 0.3rem; white-space: nowrap; } .day2_calendar .shift_block .user-icon.large .ln {font-size: 0.7rem; /*top: 0.1rem;*/ } .day2_calendar .shift_block .details {display: inline-block; vertical-align: top; border-left: 1px solid rgba(255,255,255,0.4); padding: 0.2rem 0.5rem; width: 12.5rem; } .day2_calendar .shift_block .details .name, .day2 .shift_block .details .clin_site, .day2 .shift_block .details .time{margin-bottom: 0rem; padding-bottom: .2rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .day2_calendar .shift_block .details .name {font-size: 1.1rem; padding-top: .2rem; } .day2_calendar .shift_block .details .clin_site {font-size: 0.9rem; } .day2_calendar .shift_block .details .time {font-size: 0.9rem; } .day2_calendar .shift_block .controls{position: absolute; top: 0; right: 0; padding: 5px; } .day2_calendar .shift_block .controls .control_button{color: rgb(240,240,240); padding: 0.1rem 0.2rem 0.2rem; box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.3); border-radius: 3px; background: linear-gradient(130deg, rgba(255,255,255,0.25) 4%, transparent, rgba(0,0,0,0.1)); margin: 0px 0px 2px 2px; display: block; } .day2_calendar .shift_block .controls .control_button:hover{box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.2); color: inherit; background: linear-gradient(130deg, rgba(0,0,0,0.15) 10%, rgba(255,255,255,0.0)); } .day2_nav {display: inline-block; font-size: 2.2rem; padding: 0px 1rem; } .day2_nav a{color: inherit; } .day2_calendar .shift_block .details .name.removed, .day2_calendar .shift_block .details .clin_site.removed { background: #FFF46D; padding: 1px 3px; color: #4E4E4E; border-radius: 2px; text-shadow: 0px 1px rgba(37, 37, 37, 0.38); margin-top: 1px; } .shader {background: linear-gradient(170deg, rgba(255,255,255,0) 10%, transparent 60%, rgba(0,0,0,0.1)); } .view_box {position: absolute; background: linear-gradient(140deg, #00BFFF, #0099CC); border: 0px solid #000; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); z-index: 13; color: rgb(255, 255, 255); border-radius: 4px; text-shadow: 1px 1px rgba(0, 0, 0, 0.42); font-size: 0.9rem; line-height: 0.9rem; } .view_box .editshift, .view_box .deleteshift {display: inline-block; padding: 4px 10px; margin-right: 9px; border: 1px solid white; cursor: pointer; border-radius: 3px; border: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.09)); box-shadow: 1px 1px 2px rgba(63, 63, 63, 0.31); } .view_box .editshift:hover, .view_box .deleteshift:hover {background: linear-gradient(140deg, rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.18)); } .view_box .corner_mark{ height: 0px; width: 0px; border: 0px; position: absolute; top: 50%; box-shadow: 0px 0px 0px #000; border-right-style: solid; border-right-color: #00B7F4; border-left-style: solid; border-left-color: #00A1D7; } .view_box .corner_mark.back{ border-bottom: 8px solid transparent; border-top: 8px solid transparent; margin-top: -8px; } .view_box .corner_mark.front{ border-bottom: 7px solid transparent; border-top: 7px solid transparent; margin-top: -7px; } .view_box .close_shift_details {position: absolute; right: 8px; top: 7px;border-radius: 2px; box-shadow: 0px 0px 2px 1px #A6E2ED; padding: 0px 4px 2px;line-height: 0.9rem; background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.09)); box-shadow: 1px 1px 2px rgba(63, 63, 63, 0.31); } .view_box .close_shift_details:hover {background: linear-gradient(140deg, rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.18)) } #month_calendar .shift_block{max-height: 100%; width: 95%; display: block; text-indent: 2px; height: 19px; font-size: 0.8rem; padding: 0px; } .time_block{background: rgba(200,200,200,.1); border: 1px solid #E0E0E0; padding: 1px 1px 2px 0px; line-height: 0.78rem; z-index: 1; } /*.shift_block.color1{ background: linear-gradient(230deg, rgba(241, 146, 25, 0.7), rgba(255, 214, 140, 0.5)); } .shift_block.color2{ background: linear-gradient(230deg, rgba(226, 177, 57, 0.7), rgba(226, 177, 57, 0.5)); } .shift_block.color3{ background: linear-gradient(230deg, rgba(226, 145, 57, 0.7), rgba(226, 145, 57, 0.5)); } .shift_block.color4{ background: linear-gradient(230deg, rgba(226, 86, 57, 0.7), rgba(226, 86, 57, 0.5)); } .shift_block.color5{ background: linear-gradient(230deg, rgba(53, 69, 155, 0.7), rgba(53, 69, 155, 0.5)); } .shift_block.color6{ background: linear-gradient(230deg, rgba(41, 164, 87, 0.7), rgba(41, 164, 87, 0.5)); } .shift_block.color7{ background: linear-gradient(230deg, rgba(86, 50, 155, 0.7), rgba(86, 50, 155, 0.5)); } .shift_block.color8{ background: linear-gradient(230deg, rgba(140, 207, 52, 0.7), rgba(140, 207, 52, 0.5)); } .shift_block.color9{ background: linear-gradient(230deg, rgba(226, 204, 57, 0.7), rgba(226, 204, 57, 0.5)); } .shift_block.color10{ background: linear-gradient(230deg, rgba(193, 48, 109, 0.7), rgba(193, 48, 109, 0.5)); } .shift_block.color11{ background: linear-gradient(230deg, rgba(206, 222, 56, 0.7), rgba(206, 222, 56, 0.5)); } .shift_block.color12{ background: linear-gradient(230deg, rgba(128, 41, 149, 0.7), rgba(128, 41, 149, 0.5)); }*/ .unpublished .shift_block {border-top: 1px solid #ddd; /*background: linear-gradient(230deg, rgba(93, 130, 145, 0.7), rgba(211, 242, 250, 0.5)); color: #444;*/ /* color: white; */ } .past .times {background: #F8F8F8; } .past .shift_block { /*background: linear-gradient(190deg, rgba(150, 150, 150, 0.34), rgba(187, 187, 187, 0.24));*/ /*border-top: 1px solid #EBEBEB;*/ /*background-color: rgb(232, 232, 232);*/ } .more_shifts_button { text-align: center; margin-bottom: -1px; margin-top: 0px; } .more_shifts_button a { text-decoration: none; color: #666; display: block; border-top: 0px dashed #ccc; height: 0.8rem; line-height: 0.5rem; /* border: 1px dashed #ccc; */ box-sizing: border-box; width: 100%; } .more_shifts_button:hover a { background-color: rgba(100,100,100,0.3); } .close_shift_details{cursor: pointer;} .calendar_block{width: 88%; display: inline-block; vertical-align: top; } .calendar_block.bp0{width: 100%; } .calendar_block.bp1{width: 95%; } .calendar_block.bp2{width: 91%; } .calendar_block.bp3{width: 87%; } .calendar_block.bp4{width: 82%; } .calendar_block.bp5{width: 78%; } .users_block{margin-bottom: 20px; width: 12%; display: inline-block; vertical-align: top; min-width: 3.5rem; position: relative; text-align: right; } .users_block.bp0{width: 0%; } .users_block.bp1{width: 5%; } .users_block.bp2{width: 9%; } .users_block.bp3{/*width: 7rem;*/ width: 12%; } .users_block.bp4{/*width: 10rem;*/ width: 10%; } .users_block.bp5{/*width: 13rem;*/ width: 10%; } .users_block .user{padding: 7px 15px; box-shadow: 1px 1px 3px #ccc; box-sizing: border-box; display: inline-block; margin-right: 10px; margin-bottom: 8px; cursor: pointer; border-radius: 5px; } .users_block .user.ui-draggable-dragging{z-index: 3; } .users_block .square_user {color:white; max-width: 40px; text-align:center; width: 2.4rem; height: 2.4rem; box-sizing: border-box; line-height: 1.5rem; font-size: 1.3rem; padding: 0.4rem 0; font-weight: lighter; overflow: hidden;} .users_block .square_user .ln{ display: inline-block; font-size: 0.6rem; position: relative; top: 0.1rem;} .users_block .user.ui-draggable-dragging {opacity: 0.4; moz-opacity: 0.4;} .users_block.bp2 .user.square_user {max-width: 36px; width: 2rem; height: 2rem; line-height: 1.3rem; font-size: 1.3rem; padding: 0.3rem 0; margin-right: 7px; margin-bottom: 5px; } .users_block.bp2 .user.square_user .ln {font-size: 0.6rem; } .users_block.bp3 .user.square_user {max-width: 36px; width: 2rem; height: 2rem; line-height: 1.3rem; font-size: 1.2rem; padding: 0.3rem 0; margin-right: 7px; margin-bottom: 5px; } .users_block.bp3 .user.square_user .ln {font-size: 0.5rem; } .users_block.bp4 .user.square_user {max-width: 29px; width: 1.8rem; height: 1.8rem; line-height: 1rem; font-size: 1rem; padding: 0.4rem 0; margin-right: 0.4rem; margin-bottom: 0.4rem; } .users_block.bp4 .user.square_user .ln {font-size: 0.4rem; } .users_block.bp5 .user.square_user {max-width: 25px; width: 1.7rem; height: 1.5rem; font-size: 0.8rem; padding: 0.3rem 0; line-height: 0.9rem; margin-right: 0.3rem; margin-bottom: 0.3rem; } .users_block.bp5 .user.square_user .ln {font-size: 0.4rem; } .navigate{ position: absolute; width: 100%; bottom: -18px; z-index: 4; } .navigate .nav-button{ display: inline-block; box-sizing: border-box; width: 50%; cursor: pointer; } .navigate .nav-button.side1{ text-align: right; } .navigate .nav-button.side2{ text-align: left; } .navigate .nav-button i{ visibility: visible; width: 100%; box-sizing: border-box; padding: 4px; background: #fff; } .navigate .nav-button i:hover{background-color: #dcdcdc; cursor: pointer;} .times .drop-hover, .times .time.drop-hover { box-shadow: 0px 0px 4px 2px #F8E509; z-index: 1; } .location_block .drop-hover { box-shadow: 0px 0px 3px 2px #F8E509; } #month_calendar .calendar-day.marker-hover { border-left: 2px solid #F00; } #month_calendar .calendar-data.today .day-number { /*border-bottom: 2px solid #F00;*/ } #month_calendar .calendar-day.past { background: linear-gradient(140deg, #F5F5F5, #F0F0F0 ); } #month_calendar .calendar-day.drop-hover { background: rgb(255, 255, 204); } #month_calendar .calendar-day .marker { height: 100%; width: 1px; border-right: 2px solid rgba(255, 0, 0, 0.5); position: absolute; left: -2px; z-index: 2; } #month_calendar .calendar-day .marker.last { left: 100%; } .locations_scheduler .dates_shown_label, .locations_scheduler .dates_shown { font-size: 1.2em; margin-bottom: 7px; position: relative; display: inline-block;} .locations_scheduler .dates_shown { padding-left: 4px;} .location_block{display: inline-block; margin-right: 15px; /*border-radius: 8px 8px 5px 5px;*/ border-radius: 0px; border: 0px solid #FFF; box-shadow: 2px 2px 8px #ccc; vertical-align: top; padding: 0px; margin-bottom: 15px; min-width: 100px; box-sizing: border-box; padding-bottom: 10px; position: relative; /*width: 24%;*/ min-width: 250px; transition: min-width 0.2s;} .location_slider{display: none;} .location_datepickers{padding: 0px 0px 20px 0px;} .location_datepicker_input {padding: 3px 11px; /* background-color: #FFFFEA; */ /* border: 1px solid #4D4D4D; */ /* color: white; */ font-weight: bold; border-radius: 3px; cursor: pointer; border: 1px solid; border-color: #373737 #C3C3C3 #ddd #999; z-index: 1; position: relative; background-color: transparent; } .location_datepickers .fa-calendar {position: relative; right: 1.6em; margin-right: -1.1rem; z-index: 0; } /*.location_datepicker_input {visibility: hidden; } */ /*.location_datepickers input{display: none;}*/ /*.location_datepicker_start{margin-right: 10px;}*/ .location_datepickers i.fa-arrow-right {padding: 0px 0.5rem; vertical-align: middle; } .ui-datepicker{ z-index: 201 !important; } .location_block .drop-to-date { display: block; /*border: 1px solid #efefef;*/ margin-top: 5px; margin-bottom: 5px; position: relative; margin: 5px; box-sizing: border-box; margin-bottom: 12px; background-color: #f4f4f4; } .location_block .drop-to-date h4 { padding: 5px 10px; margin: 0px; box-sizing: border-box; width: 100%; font-weight: bold; color: #333; } .location_block .drop-to-date .view_box h4 { color: #FFFFFF; } .location_block .drop-to-date h4:before { display: inline-block; margin-right: 5px; content: "\F073"; font-weight: normal; font-family: FontAwesome; } .location_block .shift_container{ border-radius: 8px 8px 0px 0px;} .location_block .shift_block {position: relative; width: 100%; margin-left: 0; height: 1.5em; max-height: 1.5em !important; text-indent: 0; padding: 0px; margin-bottom: 0px; display: block; border-radius: 2px; border-color: #E6E6E6 #aaa #aaa #D1D1D1; border-width: 1px 1px 1px 1px; margin-top: 1px; /* box-shadow: 0px 1px 1px 1px #D3D3D3; */ border-width: 0; /* box-sizing: border-box; */ overflow: visible;} .location_block .shader {padding: 4px 7px} .location_block h3, .location_block p{margin-top: 5px; margin-bottom: 7px;} .location_block h3 { margin-top: 5px; margin-bottom: 7px; /*background: #28718E;*/ background: rgb(81, 81, 81); padding: 10px; top: -5px; position: relative; color: white; /* left: -10px; */ /*border-radius: 8px 8px 0px 0px;*/ border-radius: 0px; width: 100%; box-sizing: border-box; } .location_block p { position: relative; width: 100%; /* display: inline-block; */ } .location_block p .label { display:none; visibility: hidden; } .location_block .shift_block.showing_details {z-index: 10;} .drop_location.drop-to-date.past {background-color: rgb(225, 225, 225); background: linear-gradient(225deg, rgba(0,0,0,1) 10px,rgb(223, 223, 223) 10px); } .location_block.full_width {min-width: 100%; transition: min-width 0.2s;} .location_block.full_width .drop-to-date {width: 18.8%; margin: 0 0 15px 1%; display: inline-block; box-sizing: border-box; vertical-align: top; transition: width 0s;} .location_block.hidden(width: 0; height: 0; opacity: 0;) .locations { margin-bottom: 30px;} .locations .location_block .button{display: inline-block; border-radius: 6px; /*box-shadow: 0px 0px 3px #aaa;*/ padding: 5px 10px; line-height: 1rem; cursor: pointer; background: white; margin-right: 6px; color: white;} .locations .location_block p { margin-left: 0px; margin-right: 0px; margin-bottom: 10px; font-size: 1rem; box-sizing: border-box; width: 100%; padding: 0px 20px; max-width: 330px;} .locations .location_note { max-width: 330px; max-height: 100px; overflow: auto; box-shadow: 0px 2px 2px -1px inset; padding-top: 5px !important; padding-bottom: 10px !important; background-color: rgba(0,0,0,0.05); } .locations .location_block div.controls { margin-left: 20px; margin-right: 20px; font-size: 1.3rem; } .location_block input[type="text"], .location_block select, .location_block textarea { margin-left: 0px; background: #efefef; border: none; width: 94%; box-sizing: border-box; padding: 5px 20px; margin-bottom: 5px; margin-left: 3%; margin-right: 3%; } .location_block textarea { padding: 5px 8px; } .location_block input:nth-of-type(1) { margin-top: 0px; /* background: #28718E; */ /* color: white; */ /* border-radius: 8px 8px 0px 0px; */ height: 34px; font-size: 1rem; margin-top: 10px; } .locations .location_block .edit_location{ background-color: rgb(0, 0, 139); } .locations .location_block .save_location{ background-color: rgb(153, 204, 51); display: none; } .locations .location_block .delete_location{ background-color: rgb(204, 51, 51); } .locations .location_block .undo_edit_location{ background-color: rgb(93, 93, 93); background-color: rgb(255, 153, 0); display: none; } .locations .location_block .edit_location i{ /*color: rgb(0, 0, 139);*/ color: rgb(255,255,255); } .locations .location_block .save_location i{ /*color: rgb(153, 204, 51);*/ color: rgb(255,255,255); } .locations .location_block .delete_location i{ /*color: rgb(204, 51, 51);*/ color: rgb(255,255,255); } .locations .location_block .undo_edit_location i{ /*color: rgb(93, 93, 93);*/ color: rgb(255,255,255); } .location_block h3:before { content: "\f0f8"; font-family: FontAwesome; display: inline-block; /* display: inherit; */ margin-right: 7px; font-size: 28px; margin-top: -20px; margin-bottom: -13px; background: white; padding: 10px 12px; border-radius: 35px; /*color: #28718E;*/ color: rgb(81, 81, 81); border: 1px solid; position: relative; top: 2px; } .location_block .expand, .location_block .compress, .location_block .print, .location_block .close, .location_block .email {padding: 2px; border: 1px solid #ccc; display: inline-block; width: 0.8rem; text-align: center; font-size: 0.8rem; vertical-align: middle; height: 0.8rem; border-radius: 2px; color: white; float: right; margin-left: 2px;} .location_block .expand { } .location_block .compress{ display: none;} .location_block .email { color: #7F7F7F; background: #fff;} .location_block .print, .location_block .close { color: #7F7F7F; background: #fff; display: none;} .location_block .close{ font-family: sans-serif; padding-top: 0px; } .location_block .drop_here { border: 1px solid #57CFFF; } /*.location_block .drop_here { background-color: #efefef; } .location_block .drop_here.drop-to-date { / background-color: #dfdfdf; }*/ .location_block .location_map { display: inline-block; vertical-align: top; height: 300px; width: 500px; margin-bottom: -10px; } .location_block .location_map.hidden { display: none; } .spreadsheet_datepickers{display: inline-block;} .spreadsheet_datepicker.spreadsheet_number_of_weeks {max-width: 50px; } .spreadsheet_weekdays {margin: 7px 16px 14px; display: inline-block; background-color: rgb(255, 255, 255); padding: 0px; box-shadow: 2px 2px 2px #ccc; border-radius: 5px; } .spreadsheet_weekdays .sday {display: inline-block; padding: 8px 13px; /* background-color: rgb(242, 242, 242); */ margin-right: 1px; cursor: pointer; /* background: linear-gradient(180deg, rgba(255,255,255, 0.2) 20%, rgba(220, 220, 220, 0) 50%, rgba(0,0,0,0.13)); */ color: white; min-width: 22px; text-align: center; background: rgb(0, 153, 204); } .spreadsheet_weekdays {padding: 0px;} .spreadsheet_weekdays .sday {padding: 5px 10px;} .spreadsheet_weekdays .sday:hover{background-color: rgb(147, 228, 255); color: rgb(53, 53, 53); } .spreadsheet_weekdays .sday.selected {background-color: rgb(0, 191, 255); color: rgb(255, 255, 255); } .spreadsheet_weekdays .sday.selected:hover{background-color: rgb(0, 78, 104); color: white; } .spreadsheet_weekdays .sday.selected:active{background-color: black; color: white; } .spreadsheet_weekdays .sday:active{background-color: white; color: black; } .spreadsheet_weekdays .sday:nth-child(1) {border-radius: 4px 0px 0px 4px; } .spreadsheet_weekdays .sday:nth-child(7) {border-radius: 0px 4px 4px 0px; } .spreadsheet_weekdays .sday:last-child {margin-right: 0px; } .spreadsheet_table h3 {font-size: 1rem; padding: 3px 10px 3px 10px; } .spreadsheet_location_block, .spreadsheet_week_header {display: table-row;} .spreadsheet_week_header .spreadsheet_week, .spreadsheet_week_header .spreadsheet_header_spacer {text-align: center; position: relative;} .spreadsheet_week_header .spreadsheet_week .spreadsheet_date_name{padding: 3px 10px;} .spreadsheet_week_header .week_day{display: inline-block; padding: 3px 3px;} .spreadsheet_week_header .wday_labels {display: table; width: 100%;} .spreadsheet_week_header .wday_labels .wday_labels_row {display: table-row;} .spreadsheet_week_header .wday_labels .wday_labels_row .week_day {display: table-cell;} .spreadsheet_week_header .wday_labels .wday_labels_row .week_day a {text-decoration: none; color: inherit;} .spreadsheet_location_name {display: table-cell; min-width: 3rem;} .spreadsheet_week {display: table-cell; min-width: 3rem; vertical-align: top; position: relative;} .spreadsheet_week .week_day, .possible_conflicts .pc_day_spot {min-height: 1rem; min-width: 1rem; display: inline-block;} .spreadsheet_week .marker, .spreadsheet_header_spacer .marker {height: 2.6rem; width: 1.3rem; margin-top: -1.2rem; margin-bottom: -1.4rem; margin-left: -0.65rem; display: block; background: none; text-align: center; position: relative;} .spreadsheet_week .marker i, .spreadsheet_header_spacer .marker i {font-size: 1.3rem; } .spreadsheet_header_spacer i.fa.fa-sort-desc {top: -1.34rem !important; left: -0.33rem; transform: rotate(90deg); font-size: 1.4rem; } .spreadsheet_week .marker.last {right: 0px; position: absolute; margin-right: -0.65rem; } .spreadsheet_header_spacer .marker {position: absolute; right: 0; } .spreadsheet_header_spacer .marker i.fa.fa-sort-desc {top: -1.34rem !important; left: -0.33rem; transform: rotate(90deg); font-size: 1.4rem; } .spreadsheet_week .marker.last i.fa.fa-sort-desc {top: -1.34rem !important; left: 0.3rem; transform: rotate(-90deg); font-size: 1.4rem; } .spreadsheet_week.hover {border-left: 2px solid red; } .spreadsheet_week .marker.marker_fade{opacity: 0.3; moz-opacity: 0.3;} .spreadsheet_week .marker.ui-draggable-dragging.marker_fade{opacity: 1;} .spreadsheet_spacer, .spreadsheet_footer, .spreadsheet_footer_summary_conflicts {display: table-row; } .spreadsheet_spacer .spreadsheet_spacer_left, .spreadsheet_footer_spacer, .spreadsheet_footer_summary_conflicts_spacer {display: table-cell; } .spreadsheet_spacer .spacer_cell, .pc_week_spot {display: table-cell; } .spreadsheet_footer_week {display: table-cell; padding-top: 0.15rem; background: rgba(0,0,0,0.05); } .spreadsheet_footer_week:nth-child(2n) {background: rgba(0,0,0,0.1); } .spreadsheet_footer_week .wday_labels, .pc_day_container {display: table; width: 100%; } .spreadsheet_footer_week .wday_labels .wday_labels_row {display: table-row; } .spreadsheet_footer_week .wday_labels .wday_labels_row .week_day {display: table-cell; text-align: center; } .spreadsheet_footer_week .wday_labels .wday_labels_row .week_day a {text-decoration: none; color: inherit; } .spreadsheet_footer .wday_date {margin-bottom: 0px; display: block; width: 100%; margin-left: 0px; } .pc_week_spot .pc_day_container .pc_day_spot{ display: table-cell;} /*color the table*/ .spreadsheet_table{/* box-shadow: 4px 0px 2px -2px rgba(154, 154, 154, 0.83); */ display: inline-block; margin-top: 0.6rem;} .spreadsheet_location_block:nth-child(2n-1) {background-color: rgba(0,0,0,0.05);} .spreadsheet_location_block .spreadsheet_week_row{display: table; width: 100%;} .spreadsheet_location_block .spreadsheet_week_row .week_day{display: table-cell;} .spreadsheet_week:nth-child(2n-1) {background-color: rgba(0,0,0,0.05);} .spreadsheet_week:nth-child(2n) {background-color: rgba(0,0,0,0.1); } /*.spreadsheet_week .week_day:nth-child(2n-1) {background-color: rgba(0,0,0,0.05);}*/ .spreadsheet_week_header{/*background-color: rgba(0,0,0,0.1);*/} .spreadsheet_location_block .spreadsheet_name_controls {background-color: rgba(0,0,0,0.05); display: table-cell;} .spreadsheet_location_block .spreadsheet_name_controls .sl_controls {display: none;} .spreadsheet_location_block .spreadsheet_name_controls .sl_controls .email {padding: 0.5rem; margin-bottom: 0.1rem;} .spreadsheet_location_block .spreadsheet_name_controls .sl_controls .email {padding: 0.1rem 0.2rem 0.1rem 0.2rem; margin: 0.2rem 0.2rem 0px 0px; margin-bottom: 0rem; border-radius: 3px; background: rgba(255,255,255,1); box-shadow: 1px 1px 2px; cursor: pointer; } .spreadsheet_location_block .spreadsheet_week {border-left: 2px solid rgb(186, 186, 186); } .spreadsheet_location_block .spreadsheet_week .week_day, .spreadsheet_table .possible_conflicts .pc_day_spot {min-width: 1.7rem; font-size: 1px; line-height: 1.5rem; position: relative; } .spreadsheet_location_block .spreadsheet_week.days-1{background: rgba(184, 213, 223, 0.34) 100%; } .spreadsheet_location_block .spreadsheet_week.days-2{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 50%, transparent 50%); } .spreadsheet_location_block .spreadsheet_week.days-3{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 33%, transparent 33%, transparent 66%, rgba(222, 223, 184, 0.34) 66%); } .spreadsheet_location_block .spreadsheet_week.days-4{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 25%, transparent 25%, transparent 50%, rgba(222, 223, 184, 0.34) 50%, rgba(222, 223, 184, 0.34) 75%, transparent 75%); } .spreadsheet_location_block .spreadsheet_week.days-5{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 20%, transparent 20%, transparent 40%, rgba(222, 223, 184, 0.34) 40%, rgba(222, 223, 184, 0.34) 60%, transparent 60%, transparent 80%, rgba(222, 223, 184, 0.34) 80%); } .spreadsheet_location_block .spreadsheet_week.days-6{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 16.6%, transparent 16.6%, transparent 33.2%, rgba(222, 223, 184, 0.34) 33.2%, rgba(222, 223, 184, 0.34) 49.8%, transparent 49.8%, transparent 66.4%, rgba(222, 223, 184, 0.34) 66.4%, rgba(222, 223, 184, 0.34) 83%, transparent 83%); } .spreadsheet_location_block .spreadsheet_week.days-7{background: linear-gradient(90deg, rgba(222, 223, 184, 0.34) 14.25%, transparent 14.25%, transparent 28.5%, rgba(222, 223, 184, 0.34) 28.5%, rgba(222, 223, 184, 0.34) 42.75%, transparent 42.75%, transparent 57%, rgba(222, 223, 184, 0.34) 57%, rgba(222, 223, 184, 0.34) 71.25%, transparent 71.25%, transparent 85.5%, rgba(222, 223, 184, 0.34) 85.5%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-1{background: rgba(184, 213, 223, 0.34) 100%; } .spreadsheet_location_block .spreadsheet_week.unpublished.days-2{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 50%, transparent 50%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-3{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 33%, transparent 33%, transparent 66%, rgba(184, 213, 223, 0.34) 66%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-4{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 25%, transparent 25%, transparent 50%, rgba(184, 213, 223, 0.34) 50%, rgba(184, 213, 223, 0.34) 75%, transparent 75%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-5{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 20%, transparent 20%, transparent 40%, rgba(184, 213, 223, 0.34) 40%, rgba(184, 213, 223, 0.34) 60%, transparent 60%, transparent 80%, rgba(184, 213, 223, 0.34) 80%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-6{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 16.6%, transparent 16.6%, transparent 33.2%, rgba(184, 213, 223, 0.34) 33.2%, rgba(184, 213, 223, 0.34) 49.8%, transparent 49.8%, transparent 66.4%, rgba(184, 213, 223, 0.34) 66.4%, rgba(184, 213, 223, 0.34) 83%, transparent 83%); } .spreadsheet_location_block .spreadsheet_week.unpublished.days-7{background: linear-gradient(90deg, rgba(184, 213, 223, 0.34) 14.25%, transparent 14.25%, transparent 28.5%, rgba(184, 213, 223, 0.34) 28.5%, rgba(184, 213, 223, 0.34) 42.75%, transparent 42.75%, transparent 57%, rgba(184, 213, 223, 0.34) 57%, rgba(184, 213, 223, 0.34) 71.25%, transparent 71.25%, transparent 85.5%, rgba(184, 213, 223, 0.34) 85.5%); } .spreadsheet_shift.shift_block {text-indent: 1px; font-size: 0.9rem; line-height: 0.9rem; width: 1.5rem; height: 1.5rem; max-height: 1.4rem; border: 0px; border-radius: 3px; box-shadow: 1px 1px 1px #A9A9A9; margin: 1px 3px 3px 0px; padding: 0; overflow: visible;} .spreadsheet_shift .shader {height: 100%; padding-left: 3px; padding-top: 3px; background: none; } .spreadsheet_shift.shift_block .shader .ln {font-size: 0.5rem; position: absolute; bottom: -2px; right: 2px; /* background-color: rgba(0, 0, 0, 0.41); */ /* color: white; */ border-radius: 2px; } .spreadsheet_location_block .week_day.drop-hover{background-color: yellow;} .spreadsheet_week_header .spreadsheet_week:nth-child(2) {border-radius: 5px 0px 0px 0px; } .spreadsheet_location_block:nth-child(2) .spreadsheet_location_name {border-radius: 5px 0px 0px 0px; } .wday_date {font-size: 0.6rem; text-align: center; padding-top: 2px; background-color: rgba(0,0,0,0.05); margin-top: 1px; line-height: 0.8rem; margin-left: -3px; margin-right: -3px; margin-bottom: -3px; border-left: 2px solid rgb(186, 186, 186); } .days-1 .wday_labels_row .week_day, .days-1 .spreadsheet_week_row .week_day, .days-1 .pc_day_container .pc_day_spot{ width: 100%; } .days-2 .wday_labels_row .week_day, .days-2 .spreadsheet_week_row .week_day, .days-2 .pc_day_container .pc_day_spot{ width: 50%; } .days-3 .wday_labels_row .week_day, .days-3 .spreadsheet_week_row .week_day, .days-3 .pc_day_container .pc_day_spot{ width: 33%; } .days-4 .wday_labels_row .week_day, .days-4 .spreadsheet_week_row .week_day, .days-4 .pc_day_container .pc_day_spot{ width: 25%; } .days-5 .wday_labels_row .week_day, .days-5 .spreadsheet_week_row .week_day, .days-5 .pc_day_container .pc_day_spot{ width: 20%; } .days-6 .wday_labels_row .week_day, .days-6 .spreadsheet_week_row .week_day, .days-6 .pc_day_container .pc_day_spot{ width: 16.5%; } .days-5 .wday_labels_row .week_day, .days-7 .spreadsheet_week_row .week_day, .days-7 .pc_day_container .pc_day_spot{ width: 14.2%; } .spreadsheet_table .spreadsheet_footer_summary_conflicts {display: table-row;} .spreadsheet_table .spreadsheet_footer_summary_conflicts .spreadsheet_footer_summary_conflicts_spacer { font-size: 1rem; vertical-align: top; padding: 6px;} .spreadsheet_table .spreadsheet_footer_summary_conflicts .pc_week_spot {display: table-cell;} .spreadsheet_table .spreadsheet_footer_summary_conflicts .pc_day_container {display: table; width: 100%; border-left: 2px solid transparent;} .spreadsheet_table .spreadsheet_footer_summary_conflicts .title {padding: 10px; } .spreadsheet_table .spreadsheet_footer_summary_conflicts .pc_day_spot {display: table-cell; font-size: 1px;} .spreadsheet_footer_summary_conflicts_spacer .button{display: block; margin-bottom: 5px; } .spreadsheet_footer_summary_conflicts_spacer .button.highlight {background-color: rgb(0, 191, 255); } .add_location_form { margin-bottom: 5px; } .add_location_form h3 { font-size: 23px; margin-bottom: 15px; } #month_calendar .calendar-day.outside-month{background: rgb(238, 238, 238);} #month_calendar .calendar-day.outside-month.unpublished { background: rgb(203, 236, 245); } .locations_scheduler {} .dashed-border{border: dashed 2px #bbb; } /*#month_calendar .calendar-data.occupied .day-number { background: linear-gradient(225deg, rgb(127, 201, 0) 0.45rem, transparent 0.3rem); background-position: -4px 3px; }*/ #month_calendar .calendar-data.occupied .day-number { /*background: linear-gradient(225deg, rgb(238, 36, 205) 6px, transparent 7px); background-position: 0px 0px; background-repeat: no-repeat;*/} #month_calendar .calendar-data.occupied .day-number:after { font-family: "FontAwesome"; content: "\f0f8"; display: inline-block; color: rgb(255,94,0); margin-left: 5px; } .today .day-number i.fa { margin-right: 4px; } /*#month_calendar .calendar-day:hover {background: rgb(255, 255, 204);}*/ #month_calendar .calendar-data .shift_count { /* text-align: right; */ padding: 0.1rem 0.5rem 0.11rem; background: #89BACA; border-radius: 0.3rem; color: white; /* display: inline-block; */ } #dialog-confirm {display: none;} .feedback_window { position: fixed; top: 80px; left: 0; margin-left: 25%; width: 50%; text-align: right; background: rgba(0, 0, 0, 0.82); /* border: 1px solid #ccc; */ /* padding: 40px 100px; */ box-sizing: border-box; z-index: 1000; box-shadow: 0px 0px 70px 0px black; background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(0,0,0,0.3) 7px, rgba(0, 0, 0, 0.3) 14px); } .feedback_window .title { text-align: left; font-weight: bold; background: rgba(97,97,97,1); padding: 8px 22px; margin-bottom: 20px; color: white; } .feedback_window .subject { display: block; width: 94%; margin: 0 3%; box-sizing: border-box; margin-bottom: 20px; border: 1px solid; padding: 1px 3px; border: 0px; background: rgba(255, 255, 255, 0.93); } .feedback_window .message { display: block; width: 94%; margin: 0 3%; height: 130px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid; background: rgba(255, 255, 255, 0.93); border: none; border: 0px; } .feedback_window .button_box { padding-top: 15px; background: black; } .feedback_window button { margin: 0; /* background: #eee; */ border: 0px; padding: 7px 16px; margin-left: 0px; margin-bottom: 20px; margin-right: 20px; } .feedback_window .cancel_feedback { } .feedback_window .send_feedback { margin-right: 10px; } .feedback_window button.error { background: rgb(241, 231, 231); } .feedback_window button:hover { background: rgb(248, 248, 248); } .feedback_window button.sent, .feedback_window button.sent:hover { background: none; color: white; } .feedback_window p { text-align: left; padding: 7px 20px 10px; border: 0px solid #CCC; margin: 0px 20px 10px; background: rgba(255, 255, 255, 0.93) } .theme_block { display: inline-block; vertical-align: top; min-width: 12.5%; box-sizing: border-box; } .theme_button{ border: 2px solid #AAA; display: inline-block; vertical-align: top; border-radius: 7px; padding: 4px 10px 4px 4px; margin-right: 10px; } .theme_block .theme_button{ display: block; } .theme_button .theme_name, .theme_button .add{ display: inline-block; } .theme_button .add{ margin-left: 7px; color: #ccc; } .button_add { border: 2px dashed #AAA; } .add_sign { display: inline-block; border: 2px solid #CCC; border-radius: 5px; padding: 0px 5px; color: #BEBEBE; } .theme_button:hover { border-color: #888; } .theme_button:hover .add_sign { border: 2px solid #AAA; color: #9E9E9E; } .theme_button:hover .add { color: #9E9E9E; } .theme_button .add:hover { color: #777; cursor: pointer; } .theme_name{ margin-left: 7px; } .theme_button .delete { cursor: pointer; padding: 6px; } .theme_colors { text-align: right; padding-left: 20px; padding-right: 11px; padding-top: 10px; } .theme_color_button { border-radius: 7px; padding: 2px 6px; margin-bottom: 7px; } .theme_color_number { display: inline-block; vertical-align: top; font-weight: bold; font-size: 1.3rem; padding: 0px 5px; } .theme_color_button.add_theme_color { border: 2px dashed #CCC; } .theme_color { background: url(/css/colorpickerimages/select.png); height: 22px; width: 22px; display: inline-block; margin-right: 8px; border: 3px black solid; background-position: -7px -7px; } .theme_color_button.color { padding-right: 27px; } .user-color-box { width: 1.6rem; height: 1.6rem; border: 1px solid rgb(112, 112, 112); /* position: relative; */ cursor: pointer; display: inline-block; } ul.pick-a-color { background: #fff; border: #000 solid 1px; padding: 3px 3px; text-align: left; z-index: 999; } ul.pick-a-color li { list-style-type: none; padding: 4px; cursor: pointer; } ul.pick-a-color li.pick-a-color-hover{ background-color: #ededed; } .color-icon{height: 15px; width: 15px; display: inline-block; padding: 8px; vertical-align: middle; } .assigned-span { padding: 6px 6px; display: inline-block; vertical-align: middle; } .color-icon .assigned-span{font-style: italic; } .dataTable td{ position: relative; } .dataTable .datatables_button{position: absolute; top: 0px; margin: 3px; padding: 5px 10px; cursor: pointer; visibility: hidden; } .dataTable tbody tr:hover .datatables_button{visibility: visible; } .dataTable .datatables_button:hover{background-color: #fff; box-shadow: 0px 0px 3px #ccc; border-radius: 3px; } .dataTable .edit:hover{color: #77f; } .dataTable .delete:hover{color: #c66; } .dataTable .activate:hover{color: #6c6; } .dataTable .deactivate:hover{color: #cc6; } .dataTable .add_user{ right: 105px; } .dataTable .delete{ right: 40px; } .dataTable .edit{ right: 10px; } .dataTable .activate, .dataTable .deactivate{ right: 70px; } .editable td.punch-date:after, .editable td.punch-time:after, .editable td.punch-explanation:after{content: "\f040"; display: inline-block; float: right; font-family: "fontAwesome"; cursor: pointer; } .update_this {position: relative; padding-right: 0.1rem; } /*.update_this:after{display: inline-block; font-family: "fontAwesome"; content: "\f00c"; padding: 3px 10px; cursor: pointer; box-shadow: 0px 0px 2px #000; margin-left: 10px; position: absolute; right: 0.3rem; top: 0.3rem; }*/ #override_div .save_this{display: inline-block; padding: 3px 10px; cursor: pointer; box-shadow: 0px 0px 2px #000; margin-left: 10px; } #override_div form {margin-bottom: 0;} td.altered {background: linear-gradient(225deg, rgb(220, 0, 255) 8px, transparent 8px) -2px 2px; } .location-date-range{margin-bottom: 15px;} .ui-slider-handle, .ui-slider-range { /*display: block;*/ position: relative;} .hidden{display: none;} /************ Login Page *************/ body.login{background: url("/images/pocket_watch_dark4.jpg"); background-size: cover; min-width: 0px; background-repeat: no-repeat; } body.login content{background-color: transparent; color: white; padding-top: 60px; text-align: center; min-width: 0px; } body.login .message{text-align: center; } body.login content h3.message .alert{padding: 10px 15px; margin: 10px; display: inline-block; border: 1px dashed white; border: 1px solid white; background: rgba(255, 255, 255, 0.13); color: rgb(213, 213, 213); border: none; /* font-weight: bold; */ min-height: 2.5rem; box-sizing: border-box; position: relative; top: -2.5rem; margin-bottom: -2.5rem; font-size: 1.1rem; } body.login content .login_layout{display: inline-block; position: relative; } body.login content .login_layout .site_logo{font-size: 30px; font-weight: lighter; padding-bottom: 10px; color: #8B8B8B; color: #ddd; position: relative; } body.login content .login_layout .site_logo a{text-decoration: none; color: inherit; } body.login content .login_layout .site_logo img{height: 76px; width: auto; display: inline-block; vertical-align: middle; margin-right: 15px; } body.login content .login_container{background-color: rgba(0,0,0,0.3); padding: 20px; border-radius: 20px; border: 1px solid #ddd; display: inline-block; position: relative; } .beta_logo_tag {font-size: 10px; position: absolute; top: 50px; right: 0px; transform: rotate(-20deg); } .logo_cont .beta_logo_tag{color: #333; font-weight: normal; top: 55px; right: 20px; } body.login content .login_page_button{padding: 10px 15px; border: 1px solid #ddd; border-radius: 7px; background: transparent; margin-bottom: 20px; line-height: 1rem; } body.login content a.login_page_button{text-decoration: none; color: #ddd; line-height: 1rem; } body.login button.login_button {width: 100%; margin-bottom: 0.4rem;} body.login content .login_page_button:hover{color: #111; background-color: #ddd; } body.login content .remember_me{position: absolute; bottom: 10px; right: 28%; height: 20px; } body.login content input[type="text"], body.login content input[type="password"]{background: transparent; color: white; border-radius: 2px; border: 1px solid #ddd; } body.login content .remember_me label{font-size: 0.8rem; margin-bottom: 10px; text-align: right; } body.login content .remember_me input[type="checkbox"]{background-color: transparent; border: 1px solid #ddd; border-radius: 2px; position: relative; display: inline-block; vertical-align: middle; } body.login footer{text-align: center; color: #ddd; background-color: transparent; } body.dark .row:nth-of-type(2) .col:nth-of-type(2) {background: url("/images/pocket_watch_dark4.jpg"); background-size: cover; min-width: 0px; background-repeat: no-repeat; } .subcols{width: 90%; margin: auto; display: inline-block; text-align: center;} .subcol{width: 30%; display: inline-block; height: 100%; content: " "; min-height: 50px; vertical-align: top; text-align: left; } .subcol:nth-of-type(1){ /*background-color: #ff9900;*/ } .subcol:nth-of-type(2){ /*background-color: #0099cc;*/ } .subcol:nth-of-type(3){ /*background-color: #6E4799;*/ } /* alternate */ body.login.alt content{ padding-top: 90px; } body.login.alt content label{ display: none; } body.login.alt content input[type="text"], body.login content input[type="password"] { background: rgba(255, 255, 255, 0.3); border: none; margin-bottom: 6px; } body.login.alt content .login_container { background-color: rgba(0,0,0,0.3); border: none; border-radius: 0px;} body.login.alt content .remember_me{ position: relative; top: 0; left: 0; text-align: right; margin-bottom: 5px; margin-top: 7px; padding-right: 10px; } body.login.alt content .remember_me label{ display: inline-block; width: auto;} /*********** End Login Page **********/ /*********** Create Account steps ****/ /* Progress Bar */ .progress_bar{ height: 1.2rem; margin-bottom: 10px; background-color: #9A9A9A; position: relative; overflow: hidden; border-radius: 7px;} .progress_position{ height: 100%; background-color: rgb(255, 153, 0);} .progress_segment{ height: 100%; border-right: 2px solid #FFF; position: absolute; top: 0; box-sizing: border-box; color: #111; padding: 0.1rem 0.5rem;} .progress_segment:last-child{ border-right: 0px solid #FFF;} .progress_finished{ float: right; color: red; } /* This is the visible area of you carousel. Set a width here to define how much items are visible. The width can be either fixed in px or flexible in %. Position must be relative! */ .screen_slider{ width: 100%; overflow: hidden; position: relative;} /* This is the container of the carousel items. You must ensure that the position is relative or absolute and that the width is big enough to contain all items. */ .screen_slider ul { width: 20000em; position: relative; /* Optional, required in this case since it's a