Patrick
/
acaresydney_ts
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
timesheet source code
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
107 Commits
1 Rama
1.5MB
Árbol: e36adaf4e8
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'e36adaf4e8'
${ noResults }
acaresydney_ts/css/bts_office.css

1091 líneas
24KB
Original Blame Histórico 

  1. html,

  2. body {

  3.     margin: 0px !important;

  4.     overflow: hidden;

  5. }

  6. 

  7. .bts_hidden {

  8.     z-index: -1;

  9. }

  10. 

  11. .blink_me {

  12.     animation: blinker 0.3s linear infinite;

  13. }

  14. 

  15. @keyframes blinker {

  16.     50% { opacity: 0; }

  17. }

  18. 

  19. @keyframes flash {

  20. 	0% { padding-top:0px; background-color:yellow;}

  21. 	50% { padding-top:5px; color:red; background-color: lightyellow;}

  22. 	100% { padding-top:0px; background-color:yellow;}

  23. }

  24. 

  25. .titlebar_gradient {

  26.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100 */

  27.     background: rgb(246,230,180); /* Old browsers */

  28.     background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(249, 249, 249,1) 100%); /* FF3.6-15 */

  29.     background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(249, 249, 249,1) 100%); /* Chrome10-25,Safari5.1-6 */

  30.     background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(249, 249, 249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  31.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */

  32. 

  33. }

  34. 

  35. .sheettitle h1.today {

  36.     margin: 0 auto 0 auto;

  37.     color: darkgrey;

  38.     display: inline-block;

  39.     font-size: 1.1em;

  40. }

  41. 

  42. .sheettitle h1:hover {

  43.     text-decoration: underline;

  44.     font-weight: bolder;

  45.     cursor: pointer;

  46.     color: black;

  47.     font-size: 1.3em;

  48.     /* animation: blinker 1s linear infinite; */

  49. }

  50. 

  51. 

  52. .timesheets {

  53.     width: calc(100vw - 300px);

  54.     height: 100vh;

  55.     margin: 0px;

  56.     padding: 0px;

  57.     left: 150px;

  58.     position: fixed;

  59.     background-color: red;

  60.     overflow: hidden;

  61. }

  62. 

  63. .peoplebar {

  64.     position: fixed;

  65.     top: 0px;

  66.     width: 150px;

  67.     height: 100vh;

  68.     background: lightgrey;

  69.     overflow: hidden;

  70. }

  71. 

  72. .peoplebar.left {

  73.     border-radius: 5px 0px 0px 0px;

  74.     left: 0px;

  75. }

  76. 

  77. .peoplebar.right {

  78.     right: 0px;

  79.     border-radius: 0px 5px 0px 0px;

  80. }

  81. 

  82. .timesheets .sheettitle {

  83.     padding-top: 8px;

  84.     text-align: center;

  85.     background-color: lightgrey;

  86.     height: 40px;

  87.     text-shadow: 1px 1px 1px #fcfcfc;

  88. }

  89. 

  90. .timesheets .workspace {

  91.     height: calc(100vh - 190px);

  92.     background-color: white;

  93.     overflow-x: hidden;

  94.     overflow-y: scroll;

  95. }

  96. 

  97. .timesheets .workspace img {

  98.     display: block;

  99.     margin-top: 140px;

  100.     margin-left: auto;

  101.     margin-right: auto;

  102. }

  103. 

  104. .timesheets .statusbar {

  105.     position: relative;

  106.     height: 40px;

  107.     background-color: ivory;

  108.     box-shadow: 1px 1px 10px black;

  109. }

  110. 

  111. /* staff search bar*/

  112. .b_search {

  113.     position: relative;

  114.     height: 40px;

  115. }

  116. 

  117. .b_search input {

  118.     margin-top: 5px;

  119.     padding-left: 20px;

  120.     padding-right: 20px;

  121.     border-radius: 20px;

  122.     box-shadow: 1px 1px 2px grey inset;

  123.     height: 30px;

  124. }

  125. 

  126. .b_search .ticon-search {

  127.     position: absolute;

  128.     top: 15px;

  129.     left: 5px;

  130. }

  131. 

  132. .b_search .ticon-times-circle-o {

  133.     position: absolute;

  134.     top: 15px;

  135.     right: 5px;

  136. }

  137. 

  138. .peoplebar button {

  139.     width: 100%;

  140.     padding: 0px;

  141.     height: 20px;

  142. }

  143. 

  144. .peoplebar .stafflist,

  145. .peoplebar .clientlist {

  146.     height: calc(100vh - 80px);

  147.     background-color: dimgrey;

  148.     overflow: hidden;

  149.     text-align: center;

  150. 

  151.     /*    scroll-behavior: smooth;  */

  152. }

  153. 

  154. .peopleitem {

  155.     position: relative;

  156.     margin-top: 10px;

  157.     margin-bottom: 10px;

  158.     height: 100px;

  159.     background: transparent;

  160. }

  161. 

  162. /* hover box */

  163. div.peopleitem > label {

  164.     -webkit-perspective: 1000px;

  165.     perspective: 1000px;

  166.     -webkit-transform-style: preserve-3d;

  167.     transform-style: preserve-3d;

  168.     display: block;

  169.     width: 100%;

  170.     height: 100px;

  171.     position: absolute;

  172.     left: 50%;

  173.     top: 50%;

  174.     -webkit-transform: translate(-50%, -50%);

  175.     transform: translate(-50%, -50%);

  176.     cursor: pointer;

  177. }

  178. 

  179. div.peopleitem .card {

  180.     position: relative;

  181.     height: 100%;

  182.     width: 95%;

  183.     margin: auto;

  184.     -webkit-transform-style: preserve-3d;

  185.     transform-style: preserve-3d;

  186.     -webkit-transition: all 600ms;

  187.     transition: all 600ms;

  188.     z-index: 20;

  189.     border: 1px solid black;

  190.     box-shadow: 1px 1px 10px black;

  191. }

  192. 

  193. div.peopleitem .card > div {

  194.     position: absolute;

  195.     height: 100%;

  196.     width: 100%;

  197.     background: #FFF;

  198.     text-align: center;

  199. 

  200.     /* line-height: 200px; */

  201.     -webkit-backface-visibility: hidden;

  202.     backface-visibility: hidden;

  203.     border-radius: 2px;

  204. }

  205. 

  206. div.peopleitem .card .back {

  207.     background: #222;

  208.     color: #FFF;

  209.     -webkit-transform: rotateX(180deg);

  210.     transform: rotateX(180deg);

  211. }

  212. 

  213. div.peopleitem label:hover .card {

  214.     -webkit-transform: rotateX(20deg);

  215.     transform: rotateX(20deg);

  216.     box-shadow: 0 20px 20px rgba(50,50,50,.2);

  217. }

  218. 

  219. div.peopleitem input {

  220.     display: none;

  221. }

  222. 

  223. div.peopleitem :checked + .card {

  224.     transform: rotateX(180deg);

  225.     -webkit-transform: rotateX(180deg);

  226. }

  227. 

  228. div.peopleitem label:hover :checked + .card {

  229.     transform: rotateX(160deg);

  230.     -webkit-transform: rotateX(160deg);

  231.     box-shadow: 0 20px 20px rgba(255,255,255,.2);

  232. }

  233. 

  234. div.peopleitem span.notes,

  235. div.peopleitem a.notes{

  236. 	font-weight: 900;

  237. 	color: white;

  238. 	text-decoration: underline;

  239. }

  240. 

  241. /* end of hover box */

  242. .satusbar {

  243.     position: relative;

  244. }

  245. 

  246. .statusbar * {

  247.     vertical-align: top;

  248.     text-shadow: 1px 1px 1px #fcfcfc;

  249. }

  250. 

  251. .statusbar div {

  252.     position: relative;

  253.     display: inline;

  254. }

  255. 

  256. .statusbar .xero {

  257.     width: 40px;

  258.     height: 100%;

  259.     margin-left: 5px;

  260.     margin-right: 5px;

  261.     display: inline-block;

  262.     background-color: white;

  263.     box-shadow: inset 0px 0px 2px dotted white;

  264.     border-radius: 100px;

  265.     background-image: url(../img/xero.png);

  266.     background-size: 40px;

  267.     box-shadow: 0px 0px 10px white;

  268. }

  269. 

  270. .statusbar .wifi i,

  271. .statusbar .xero i,

  272. .statusbar .csv i {

  273.     font-size: 20px;

  274.     color: red;

  275.     position: absolute;

  276.     right: 0px;

  277.     top: -5px;

  278. }

  279. 

  280. .statusbar .wifi {

  281.     width: 40px;

  282.     height: 100%;

  283.     margin-left: 0px;

  284.     margin-right: 5px;

  285.     display: inline-block;

  286.     background-color: white;

  287.     box-shadow: inset 0px 0px 2px black;

  288.     border-radius: 100px;

  289.     background-image: url(../img/wnet.png);

  290.     background-size: 40px;

  291.     box-shadow: 0px 0px 10px white;

  292. }

  293. 

  294. .statusbar .csv {

  295.     width: 40px;

  296.     height: 100%;

  297.     margin-left: 0px;

  298.     margin-right: 5px;

  299.     display: inline-block;

  300.     background-color: white;

  301.     box-shadow: inset 0px 0px 2px black;

  302.     border-radius: 100px;

  303.     background-image: url(../img/csv.png);

  304.     background-size: 40px;

  305.     box-shadow: 0px 0px 10px white;

  306. }

  307. 

  308. .statusbar .xero:hover,

  309. .statusbar .wifi:hover,

  310. .statusbar .csv:hover {

  311.     box-shadow: 0px 0px 3px black;

  312. }

  313. 

  314. .statusbar .wages {

  315.     text-align: center;

  316.     width: 150px;

  317.     height: 100%;

  318.     display: inline-block;

  319.     background-color: transparent;

  320.     font-size: 24px;

  321.     font-weight: bold;

  322.     color: dimgrey;

  323.     border: 1px dotted white;

  324.     position: absolute;

  325.     right: 400px;

  326. }

  327. 

  328. .statusbar .workinghours {

  329.     background-color: transparent;

  330.     width: 175px;

  331.     height: 100%;

  332.     display: inline-block;

  333.     position: absolute;

  334.     right: 220px;

  335. }

  336. 

  337. .statusbar #woh:hover {

  338.     cursor: pointer;

  339.     animation: blinker 0.3s linear infinite;

  340. }

  341. 

  342. .workinghours label {

  343.     transform: unset;

  344.     left: 0;

  345.     top: 0;

  346.     width: 50px;

  347.     height: 100%;

  348.     padding: 0.5em;

  349.     text-align: left;

  350.     display: inline-block;

  351.     color: #A974D;

  352.     font-weight: bolder;

  353.     line-height: 15px;

  354.     background-color: transparent;

  355.     margin-right: 0px;

  356. }

  357. 

  358. .statusbar input {

  359.     margin: 0px;

  360.     width: 115px;

  361.     height: 100%;

  362.     display: inline-block;

  363.     font-size: 24px;

  364.     background: transparent;

  365.     text-align: center;

  366. }

  367. 

  368. .statusbar button[name='confirmschedule'] {

  369.     margin-top: 5px;

  370.     margin-bottom: 5px ;

  371.     text-shadow: 0px 0px 2px black;

  372.     width: 200px ;

  373.     height: calc( 100% - 10px );

  374.     font-weight: bolder;

  375.     position: absolute;

  376.     right: 10px;

  377. }

  378. 

  379. div.sheetsheader {

  380.     height: 110px;

  381.     background: darkorange;

  382.     position: relative;

  383. }

  384. 

  385. div.prevweek {

  386.     display: inline-block;

  387.     height: 70px;

  388.     width: 40px;

  389.     font-size: 36px;

  390.     padding-top: 5px;

  391.     padding-left: 2px;

  392.     float: left;

  393.     background: darkorange;

  394. }

  395. 

  396. div.prevweek span:hover,

  397. div.nextweek span:hover {

  398.     box-shadow: 1px 1px 10px black;

  399.     border-radius: 20px;

  400.     color: black;

  401. }

  402. 

  403. div.nextweek {

  404.     display: inline-block;

  405.     height: 70px;

  406.     width: 40px;

  407.     font-size: 36px;

  408.     padding-top: 5px;

  409.     padding-left: 4px;

  410.     float: right;

  411. }

  412. 

  413. div.weekly {

  414.     width: calc( 100% - 80px ) ;

  415.     display: inline-block;

  416.     background-color: black;

  417.     height: 70px;

  418. }

  419. 

  420. div.weekly div {

  421.     margin: 0px;

  422. }

  423. 

  424. div.weekly div.weekname {

  425.     position: relative;

  426.     width: 170px;

  427.     top: -5px;

  428.     border: 2px solid grey;

  429.     border-radius: 10px;

  430.     text-align: center;

  431.     color: white;

  432. 

  433.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */

  434.     background: rgb(181,189,200); /* Old browsers */

  435.     background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */

  436.     background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */

  437.     background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  438.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

  439. }

  440. 

  441. div.weekly div.weekname input{

  442.     width: 80px;

  443.     height: 20px;

  444.     border:0px;

  445.     background-color:transparent;

  446.     color: white;

  447.     padding-left:4px;

  448.     padding-right:4px;

  449. }

  450. 

  451. div.weekly div.weekname input.hasDatepicker{

  452. 	background-image:none

  453. }

  454. 

  455. div.weekly div.weekname.prev {

  456.     position: absolute;

  457.     left: 100px;

  458.     z-index: 1;

  459. }

  460. 

  461. div.weekly div.weekname.next {

  462.     position: absolute;

  463.     right: 100px;

  464.     z-index: 1;

  465. }

  466. 

  467. div.weekly >div.weekname:hover,

  468. div.weekly div[name='copyschedule']:hover {

  469.     cursor: pointer;

  470.     box-shadow: 0px 0px 10px #2c87f0;

  471. }

  472. 

  473. div.weekly div.copyprogress {

  474.     position: absolute;

  475.     display: inline-block;

  476.     width: calc(100% - 80px);

  477.     height: 15px;

  478.     top: 0px;

  479.     border-radius: 2px;

  480.     box-shadow: inset 1px 1px 2px black;

  481.     text-align: center;

  482. 

  483.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */

  484.     background: rgb(254,252,234); /* Old browsers */

  485.     background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */

  486.     background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */

  487.     background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  488.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

  489. }

  490. 

  491. div.copyprogress div[name='copyschedule'] {

  492.     position: relative;

  493.     top: -5px;

  494.     width: 150px;

  495.     height: 25px;

  496.     padding: 0px;

  497.     border-radius: 10px;

  498.     margin: auto;

  499.     z-index: 1;

  500.     color: white;

  501. 

  502.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */

  503.     background: rgb(181,189,200); /* Old browsers */

  504.     background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */

  505.     background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */

  506.     background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  507.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

  508. }

  509. 

  510. #gotoweek {

  511.     width: 50%;

  512.     background-color: transparent;

  513.     border: 0px;

  514.     color: white;

  515.     font-weight: 900;

  516. }

  517. 

  518. div.weekdays {

  519.     position: absolute;

  520.     top: 15px;

  521.     width: calc(100% - 80px);

  522.     height: 55px;

  523.     background-color: darkorange;

  524.     text-align: center;

  525. }

  526. 

  527. div.week1,

  528. div.week2 {

  529.     display: inline-block;

  530.     width: 45%;

  531.     height: 55px;

  532.     background-color: darkorange;

  533.     text-align: justify;

  534.     border: 1px dashed lightgrey;

  535.     padding-left: 10px;

  536.     padding-right: 10px;

  537. }

  538. 

  539. div.week1:hover,

  540. div.week2:Hover {

  541.     border-radius: 20px;

  542.     box-shadow: 0px 0px 2px #2c87f0 inset;

  543.     cursor: pointer;

  544. 

  545.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */

  546.     background: rgb(235,241,246); /* Old browsers */

  547.     background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */

  548.     background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */

  549.     background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  550.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */

  551. }

  552. 

  553. div.week1.filtered,

  554. div.week2.filtered {

  555.     border-radius: 20px;

  556. 

  557.     /* background:white; */

  558.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */

  559.     background: rgb(235,241,246); /* Old browsers */

  560.     background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */

  561.     background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */

  562.     background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  563.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */

  564. }

  565. 

  566. div.week1::after,

  567. div.week2::after {

  568.     content: '';

  569.     display: inline-block;

  570.     width: 100%;

  571. }

  572. 

  573. div.week1.filtered span,

  574. div.week2.filtered span,

  575. div.week1.filtered div.week1color,

  576. div.week2.filtered div.week2color

  577. {

  578. 	visibility: hidden;

  579. }

  580. 

  581. div.week1 {

  582.     position: relative;

  583.     left: -10px;

  584. }

  585. 

  586. div.week2 {

  587.     position: relative;

  588.     left: 10px;

  589. }

  590. 

  591. div.week1 > div,

  592. div.week2 > div {

  593.     display: inline-block;

  594.     text-align: center;

  595.     width: 10%;

  596.     height: 40px;

  597.     margin-top: 5px;

  598.     font-weight: bolder;

  599.     border-radius: 10px;

  600. }

  601. 

  602. div.week1 div:hover,

  603. div.week2 div:hover {

  604.     cursor: pointer;

  605.     box-shadow: 0px 0px 10px red;

  606. }

  607. 

  608. div.week1 > div {

  609.     box-shadow: 0px 0px 10px white inset;

  610. }

  611. 

  612. .week1color {

  613.     color: black;

  614. 

  615.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */

  616.     background: #ebe9f9; /* Old browsers */

  617.     background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */

  618.     background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */

  619.     background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  620.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */

  621. }

  622. 

  623. div.week2 > div {

  624.     box-shadow: 0px 0px 10px white inset;

  625. }

  626. 

  627. .week2color {

  628.     color: black;

  629. 

  630.     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a7ca8c+0,1f3b08+100;Olive+3D */

  631.     background: #a7ca8c; /* Old browsers */

  632.     background: -moz-linear-gradient(top,  #a7ca8c 0%, #9de165 100%); /* FF3.6-15 */

  633.     background: -webkit-linear-gradient(top,  #a7ca8c 0%,#9de165 100%); /* Chrome10-25,Safari5.1-6 */

  634.     background: linear-gradient(to bottom,  #a7ca8c 0%,#9de165 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  635.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7ca8c', endColorstr='#9de165',GradientType=0 ); /* IE6-9 */

  636. }

  637. 

  638. div.assignment > div {

  639.     color: navy;

  640.     background-color: white;

  641.     font-size: 20px;

  642.     font-weight: lighter;

  643.     border: 1px dotted lightgrey;

  644. }

  645. 

  646. /* peple item card*/

  647. .peopleitem div span.checked {

  648.     color: orange;

  649. }

  650. 

  651. .peopleitem div.card div.front > div[name="title"] {

  652.     height: auto;

  653.     text-align: center;

  654.     background-color: lightgrey;

  655. }

  656. 

  657. div.front > span[name='icon'] {

  658.     width: 100%;

  659.     height: 15px;

  660.     background-color: dimgrey;

  661.     color: white;

  662. }

  663. 

  664. div.back > span.icon {

  665.     width: 100%;

  666.     background-color: lightgrey;

  667.     color: dimgrey;

  668. }

  669. 

  670. div.front >  span.badge,

  671. div.back >  span.badge {

  672.     border-radius: 50%;

  673.     display: inline-block;

  674.     padding-left: 8px;

  675.     padding-right: 8px;

  676.     text-align: center;

  677.     position: absolute;

  678.     right: -5px;

  679.     top: -5px;

  680. }

  681. 

  682. span.badge.blue {

  683.     color: #fff;

  684.     box-shadow: 1px 1px 10px black;

  685.     background-color: black;

  686. }

  687. 

  688. span.badge.pink {

  689.     color: black;

  690.     box-shadow: 1px 1px 10px white;

  691.     background-color: white;

  692. }

  693. 

  694. /* div table */

  695. div.blueTable {

  696.     border: 1px solid #1C6EA4;

  697.     background-color: white;

  698.     width: 100%;

  699.     text-align: left;

  700.     border-collapse: collapse;

  701.     border: 0px;

  702. }

  703. 

  704. div.blueTable.emptyrecord {

  705.     background-color: #eeeeee;

  706. }

  707. 

  708. .divTable.blueTable .divTableCell,

  709. .divTable.blueTable .divTableHead,

  710.  {

  711.     border: 1px solid #AAAAAA;

  712.     padding: 3px 2px;

  713. }

  714. 

  715. .divTable.blueTable .divTableBody .divTableCell {

  716.     /* font-size: 15px; */

  717.     border-bottom: 1px lightgrey solid;

  718.     border-right: 1px lightgrey dotted;

  719. 	vertical-align: middle;

  720. }

  721. 

  722. .divTable.blueTable .divTableRow:nth-child(even) {

  723.     background: #D0E4F5;

  724. }

  725. 

  726. .divTable.blueTable .divTableHeading {

  727.     background: #1C6EA4;

  728.     background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  729.     background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  730.     background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);

  731.     border-bottom: 2px solid #444444;

  732. }

  733. 

  734. .divTable.blueTable .divTableHeading .divTableHead {

  735.     font-size: 15px;

  736.     font-weight: bold;

  737.     color: #FFFFFF !important;

  738.     border-left: 2px solid #D0E4F5;

  739. }

  740. 

  741. .divTable.blueTable .divTableHeading .divTableHead:first-child {

  742.     border-left: none;

  743. }

  744. 

  745. .blueTable .tableFootStyle {

  746.     font-size: 14px;

  747.     font-weight: bold;

  748.     color: #FFFFFF;

  749.     background: #D0E4F5;

  750.     background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  751.     background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  752.     background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);

  753.     border-top: 2px solid #444444;

  754. }

  755. 

  756. .blueTable .tableFootStyle {

  757.     font-size: 14px;

  758. }

  759. 

  760. .blueTable .tableFootStyle .links {

  761.     text-align: right;

  762. }

  763. 

  764. .blueTable .tableFootStyle .links a {

  765.     display: inline-block;

  766.     background: #1C6EA4;

  767.     color: #FFFFFF;

  768.     padding: 2px 8px;

  769.     border-radius: 5px;

  770. }

  771. 

  772. .blueTable.outerTableFooter {

  773.     border-top: none;

  774. }

  775. 

  776. .blueTable.outerTableFooter .tableFootStyle {

  777.     padding: 3px 5px;

  778. }

  779. 

  780. /* DivTable.com */

  781. .divTable {

  782.     display: table;

  783.     margin: 3px 0px 3px 0px;

  784. }

  785. 

  786. .divTable.highlight {

  787.     box-shadow: 0px 0px 10px green;

  788. }

  789. .divTable.highlight div {

  790. 	background-color: lightyellow !important;

  791. }

  792. 

  793. .jobTable.Editing{

  794. 	box-shadow: 0px 0px 10px green;

  795. 	animation: flash 1s linear infinite;

  796. }

  797. .Editor{

  798. 	box-shadow: 0px 0px 10px green;

  799. }

  800. .Editor select{

  801. 	color:black !important;

  802. }

  803. .jobTable.Editing div, 

  804. .Editor div {

  805. 	font-weight:900;

  806. 	background-color: lightyellow !important;

  807. }

  808. 

  809. 

  810. .divTable.invalidjob.highlight {

  811.     box-shadow: 1px 1px 10px #f50202;

  812. }

  813. 

  814. .divTable.highlight.newcopy {

  815.     box-shadow: 1px 1px 10px orange;

  816.     border: 5px orange solid;

  817. }

  818. 

  819. .divTableRow {

  820.     display: table-row;

  821. }

  822. 

  823. .divTableRow.errmsg {

  824.     background-color: white;

  825.     font-weight: bolder;

  826.     color: red;

  827. }

  828. 

  829. .divTableHeading {

  830.     display: table-header-group;

  831. }

  832. 

  833. .divTableCell,

  834. .divTableHead {

  835.     display: table-cell;

  836. }

  837. 

  838. .divTableHeading {

  839.     display: table-header-group;

  840. }

  841. 

  842. .divTableFoot {

  843.     display: table-footer-group;

  844. }

  845. 

  846. .divTableBody {

  847.     display: table-row-group;

  848. }

  849. 

  850. /* customized part of div table */

  851. div.sheettableheader {

  852.     margin-top: 0px;

  853.     height: 36px;

  854.     overflow-x: hidden;

  855.     overflow-y: scroll;

  856. }

  857. 

  858. div.btos,

  859. div.bstart,

  860. div.bfinish,

  861. div.brate,

  862. div.bstaff,

  863. div.bclient,

  864. div.bconfirmed,

  865. div.bedit,

  866. div.bsave,

  867. div.brating,

  868. div.bdelete {

  869.     width: 5%;

  870.     height: 30px;

  871. 	position:relative;

  872. }

  873. 

  874. div.btos {

  875.     width: 15%;

  876. }

  877. 

  878. div.bstart,

  879. div.bfinish {

  880.     width: 10%;

  881. }

  882. 

  883. div.bstaff,

  884. div.bclient{

  885. 	width: 10%;

  886. }

  887. 

  888. div.brate {

  889.     width: 10%;

  890.     max-width: 20px;

  891. }

  892. div.btos.error,

  893. div.bstart.error,

  894. div.bfinish.error,

  895. div.bstaff.error,

  896. div.bclient.error,

  897. div.brate.error{

  898. 	position:relative;

  899. 	background-color: yellow !important;

  900. 	/* animation: flash 1s linear infinite; */

  901. }

  902. div.error::after{

  903. 	position:absolute;

  904. 	right:0px;

  905. 	bottom:0px;

  906. 	color:red;

  907. 	font-family: "ticons"; 

  908. 	font-weight: 900; 

  909. 	content: "\f071";	

  910. 	animation: blinker 0.3s linear infinite;

  911. }

  912. 

  913. .divTable div > select {

  914.     width: 100%;

  915.     height: 100%;

  916. }

  917. 

  918. div.bdelete,

  919. div.bedit,

  920. div.bsave,

  921. div.bconfirmed {

  922.     text-align: center;

  923.     width: 3%;

  924. }

  925. 

  926. div.brating {

  927. 	width: 3%;

  928.     text-align: center;

  929.     cursor: pointer;

  930. }

  931. 

  932. div.Editor div.brating{

  933. 	min-width:110px;

  934. }

  935. 

  936. div.bedit{

  937. 	text-align:center;

  938. 	cursor: pointer;

  939. }

  940. 

  941. div.bsave span.ticon-copy {

  942.      display: none;  

  943. }

  944. 

  945. div.divTableHeading  div.bsave span.ticon,

  946. div.jobTable.saved div.bsave span.ticon-copy {

  947.     display: inline-block;

  948.     border: 3px solid orange;

  949.     padding: 5px;

  950.     border-radius: 20px;

  951.     color: orange;

  952. }

  953. 

  954. div.bsave span.ticon-save {

  955.     display: inline-block;

  956.     border: 3px solid lightgrey;

  957.     padding: 5px;

  958.     border-radius: 5px;

  959.     color: black;

  960.     cursor: pointer;

  961. }

  962. 

  963. div.jobTable.to_be_deleted_duplicate div.bsave span.ticon-save,

  964. div.jobTable.saved div.bsave span.ticon-save {

  965.     display: none;

  966. }

  967. 

  968. div.jobTable.saved div{

  969. 	background-color: transparent;

  970. }

  971. 

  972. div.jobTable.dirty div.bsave{

  973. 	background-color: lightyellow;

  974. }

  975. div.jobTable.dirty div.bsave span{

  976. 	animation-duration: 0.3s;

  977.     animation-timing-function: linear;

  978.     animation-delay: 0s;

  979.     animation-iteration-count: 5;

  980.     animation-direction: normal;

  981.     animation-fill-mode: none;

  982.     animation-play-state: running;

  983.     animation-name: blinker;	

  984. }

  985. 

  986. div.workspace div.bdelete span.ticon-trash,

  987. div.workspace div.bedit span.ticon-edit {

  988.     display: inline-block;

  989.     border: 3px solid lightgrey;

  990.     padding: 5px;

  991.     border-radius: 5px;

  992.     color: red;

  993.     cursor: pointer;

  994. }

  995. div.workspace div.bedit span.ticon-edit{

  996. 	color:blue;

  997. }

  998. 

  999. div.workspace div > span:hover {

  1000.     box-shadow: 0px 0px 10px black;

  1001. }

  1002. 

  1003. div.jobTable.to_be_deleted_duplicate{

  1004. 	color: red;

  1005. }

  1006. 

  1007. div.jobTable.to_be_deleted_duplicate span.ticon-trash

  1008. {

  1009. 	animation: blinker 0.3s linear infinite;

  1010. }

  1011. 

  1012. div.jobTable.to_be_deleted_duplicate span.ticon-copy,

  1013. div.jobTable.to_be_deleted_duplicate span.ticon-edit{

  1014. 	display:none !important;

  1015. }

  1016. div.jobTable:not(.to_be_deleted_duplicate) span.ticon-check-circle{

  1017. 	display:none !important;

  1018. }

  1019. div.jobTable.to_be_deleted_duplicate span.ticon-check-circle{

  1020.     display: inline-block;

  1021.     border: 3px solid green;

  1022.     padding: 5px;

  1023.     border-radius: 10px;

  1024.     color: green;

  1025.     cursor: pointer;

  1026. 	font-size: 1.1em;	

  1027. }

  1028. 

  1029. div.divTableHeading div > span.ticon-trash:hover,

  1030. div.divTableHeading div > span.ticon-search:hover {

  1031.     cursor: pointer;

  1032.     animation: blinker 0.3s linear infinite;

  1033. }

  1034. 

  1035. /* short code for the table */

  1036. div.btos select,

  1037. div.bstart input,

  1038. div.bfinish input {

  1039.     width: 100%;

  1040.     height: 98%;

  1041. }

  1042. 

  1043. div.divTable.validjob {

  1044.     border: 0px solid white;

  1045. }

  1046. 

  1047. div.divTable.invalidjob {

  1048.     border-left: 2px solid red;

  1049.     border-right: 2px solid red;

  1050. }

  1051. 

  1052. div.divTable .invalid {

  1053.     background-color: yellow;

  1054. }

  1055. 

  1056. 

  1057. div.blueTable.divTable.jobTable.disabled *{

  1058. 	background-color: lightgrey;

  1059. 	color:black;

  1060. }

  1061. div.blueTable.divTable.jobTable.disabled span.ticon{

  1062. 	display:none;

  1063. }

  1064. /* end of div table */

  1065. /* pop up message box */

  1066. .bts_message .ult_modal-body {

  1067.     height: 50vh;

  1068.     overflow: scroll;

  1069. }

  1070. 

  1071. .bts_message .ult_modal-body .sent {

  1072.     color: green;

  1073. }

  1074. 

  1075. .bts_message .ult_modal-body .nojob {

  1076.     color: dimgrey;

  1077. }

  1078. 

  1079. .bts_message .ult_modal-body .error {

  1080.     color: red;

  1081. }

  1082. 

  1083. .bts_message .ult_modal-body .span {

  1084.     font-weight: 900;

  1085. }

  1086. 

  1087. 

  1088. .xdsoft_datetimepicker{

  1089. 	z-index: 16777272; /* above the modal box */ 	

  1090. }