@charset "UTF-8"; .materialize-red { background-color: #e51c23 !important; } .materialize-red-text { color: #e51c23 !important; } .materialize-red.lighten-5 { background-color: #fdeaeb !important; } .materialize-red-text.text-lighten-5 { color: #fdeaeb !important; } .materialize-red.lighten-4 { background-color: #f8c1c3 !important; } .materialize-red-text.text-lighten-4 { color: #f8c1c3 !important; } .materialize-red.lighten-3 { background-color: #f3989b !important; } .materialize-red-text.text-lighten-3 { color: #f3989b !important; } .materialize-red.lighten-2 { background-color: #ee6e73 !important; } .materialize-red-text.text-lighten-2 { color: #ee6e73 !important; } .materialize-red.lighten-1 { background-color: #ea454b !important; } .materialize-red-text.text-lighten-1 { color: #ea454b !important; } .materialize-red.darken-1 { background-color: #d0181e !important; } .materialize-red-text.text-darken-1 { color: #d0181e !important; } .materialize-red.darken-2 { background-color: #b9151b !important; } .materialize-red-text.text-darken-2 { color: #b9151b !important; } .materialize-red.darken-3 { background-color: #a21318 !important; } .materialize-red-text.text-darken-3 { color: #a21318 !important; } .materialize-red.darken-4 { background-color: #8b1014 !important; } .materialize-red-text.text-darken-4 { color: #8b1014 !important; } .red { background-color: #f44336 !important; } .red-text { color: #f44336 !important; } .red.lighten-5 { background-color: #ffebee !important; } .red-text.text-lighten-5 { color: #ffebee !important; } .red.lighten-4 { background-color: #ffcdd2 !important; } .red-text.text-lighten-4 { color: #ffcdd2 !important; } .red.lighten-3 { background-color: #ef9a9a !important; } .red-text.text-lighten-3 { color: #ef9a9a !important; } .red.lighten-2 { background-color: #e57373 !important; } .red-text.text-lighten-2 { color: #e57373 !important; } .red.lighten-1 { background-color: #ef5350 !important; } .red-text.text-lighten-1 { color: #ef5350 !important; } .red.darken-1 { background-color: #e53935 !important; } .red-text.text-darken-1 { color: #e53935 !important; } .red.darken-2 { background-color: #d32f2f !important; } .red-text.text-darken-2 { color: #d32f2f !important; } .red.darken-3 { background-color: #c62828 !important; } .red-text.text-darken-3 { color: #c62828 !important; } .red.darken-4 { background-color: #b71c1c !important; } .red-text.text-darken-4 { color: #b71c1c !important; } .red.accent-1 { background-color: #ff8a80 !important; } .red-text.text-accent-1 { color: #ff8a80 !important; } .red.accent-2 { background-color: #ff5252 !important; } .red-text.text-accent-2 { color: #ff5252 !important; } .red.accent-3 { background-color: #ff1744 !important; } .red-text.text-accent-3 { color: #ff1744 !important; } .red.accent-4 { background-color: #d50000 !important; } .red-text.text-accent-4 { color: #d50000 !important; } .pink { background-color: #e91e63 !important; } .pink-text { color: #e91e63 !important; } .pink.lighten-5 { background-color: #fce4ec !important; } .pink-text.text-lighten-5 { color: #fce4ec !important; } .pink.lighten-4 { background-color: #f8bbd0 !important; } .pink-text.text-lighten-4 { color: #f8bbd0 !important; } .pink.lighten-3 { background-color: #f48fb1 !important; } .pink-text.text-lighten-3 { color: #f48fb1 !important; } .pink.lighten-2 { background-color: #f06292 !important; } .pink-text.text-lighten-2 { color: #f06292 !important; } .pink.lighten-1 { background-color: #ec407a !important; } .pink-text.text-lighten-1 { color: #ec407a !important; } .pink.darken-1 { background-color: #d81b60 !important; } .pink-text.text-darken-1 { color: #d81b60 !important; } .pink.darken-2 { background-color: #c2185b !important; } .pink-text.text-darken-2 { color: #c2185b !important; } .pink.darken-3 { background-color: #ad1457 !important; } .pink-text.text-darken-3 { color: #ad1457 !important; } .pink.darken-4 { background-color: #880e4f !important; } .pink-text.text-darken-4 { color: #880e4f !important; } .pink.accent-1 { background-color: #ff80ab !important; } .pink-text.text-accent-1 { color: #ff80ab !important; } .pink.accent-2 { background-color: #ff4081 !important; } .pink-text.text-accent-2 { color: #ff4081 !important; } .pink.accent-3 { background-color: #f50057 !important; } .pink-text.text-accent-3 { color: #f50057 !important; } .pink.accent-4 { background-color: #c51162 !important; } .pink-text.text-accent-4 { color: #c51162 !important; } .purple { background-color: #9c27b0 !important; } .purple-text { color: #9c27b0 !important; } .purple.lighten-5 { background-color: #f3e5f5 !important; } .purple-text.text-lighten-5 { color: #f3e5f5 !important; } .purple.lighten-4 { background-color: #e1bee7 !important; } .purple-text.text-lighten-4 { color: #e1bee7 !important; } .purple.lighten-3 { background-color: #ce93d8 !important; } .purple-text.text-lighten-3 { color: #ce93d8 !important; } .purple.lighten-2 { background-color: #ba68c8 !important; } .purple-text.text-lighten-2 { color: #ba68c8 !important; } .purple.lighten-1 { background-color: #ab47bc !important; } .purple-text.text-lighten-1 { color: #ab47bc !important; } .purple.darken-1 { background-color: #8e24aa !important; } .purple-text.text-darken-1 { color: #8e24aa !important; } .purple.darken-2 { background-color: #7b1fa2 !important; } .purple-text.text-darken-2 { color: #7b1fa2 !important; } .purple.darken-3 { background-color: #6a1b9a !important; } .purple-text.text-darken-3 { color: #6a1b9a !important; } .purple.darken-4 { background-color: #4a148c !important; } .purple-text.text-darken-4 { color: #4a148c !important; } .purple.accent-1 { background-color: #ea80fc !important; } .purple-text.text-accent-1 { color: #ea80fc !important; } .purple.accent-2 { background-color: #e040fb !important; } .purple-text.text-accent-2 { color: #e040fb !important; } .purple.accent-3 { background-color: #d500f9 !important; } .purple-text.text-accent-3 { color: #d500f9 !important; } .purple.accent-4 { background-color: #a0f !important; } .purple-text.text-accent-4 { color: #a0f !important; } .deep-purple { background-color: #673ab7 !important; } .deep-purple-text { color: #673ab7 !important; } .deep-purple.lighten-5 { background-color: #ede7f6 !important; } .deep-purple-text.text-lighten-5 { color: #ede7f6 !important; } .deep-purple.lighten-4 { background-color: #d1c4e9 !important; } .deep-purple-text.text-lighten-4 { color: #d1c4e9 !important; } .deep-purple.lighten-3 { background-color: #b39ddb !important; } .deep-purple-text.text-lighten-3 { color: #b39ddb !important; } .deep-purple.lighten-2 { background-color: #9575cd !important; } .deep-purple-text.text-lighten-2 { color: #9575cd !important; } .deep-purple.lighten-1 { background-color: #7e57c2 !important; } .deep-purple-text.text-lighten-1 { color: #7e57c2 !important; } .deep-purple.darken-1 { background-color: #5e35b1 !important; } .deep-purple-text.text-darken-1 { color: #5e35b1 !important; } .deep-purple.darken-2 { background-color: #512da8 !important; } .deep-purple-text.text-darken-2 { color: #512da8 !important; } .deep-purple.darken-3 { background-color: #4527a0 !important; } .deep-purple-text.text-darken-3 { color: #4527a0 !important; } .deep-purple.darken-4 { background-color: #311b92 !important; } .deep-purple-text.text-darken-4 { color: #311b92 !important; } .deep-purple.accent-1 { background-color: #b388ff !important; } .deep-purple-text.text-accent-1 { color: #b388ff !important; } .deep-purple.accent-2 { background-color: #7c4dff !important; } .deep-purple-text.text-accent-2 { color: #7c4dff !important; } .deep-purple.accent-3 { background-color: #651fff !important; } .deep-purple-text.text-accent-3 { color: #651fff !important; } .deep-purple.accent-4 { background-color: #6200ea !important; } .deep-purple-text.text-accent-4 { color: #6200ea !important; } .indigo { background-color: #3f51b5 !important; } .indigo-text { color: #3f51b5 !important; } .indigo.lighten-5 { background-color: #e8eaf6 !important; } .indigo-text.text-lighten-5 { color: #e8eaf6 !important; } .indigo.lighten-4 { background-color: #c5cae9 !important; } .indigo-text.text-lighten-4 { color: #c5cae9 !important; } .indigo.lighten-3 { background-color: #9fa8da !important; } .indigo-text.text-lighten-3 { color: #9fa8da !important; } .indigo.lighten-2 { background-color: #7986cb !important; } .indigo-text.text-lighten-2 { color: #7986cb !important; } .indigo.lighten-1 { background-color: #5c6bc0 !important; } .indigo-text.text-lighten-1 { color: #5c6bc0 !important; } .indigo.darken-1 { background-color: #3949ab !important; } .indigo-text.text-darken-1 { color: #3949ab !important; } .indigo.darken-2 { background-color: #303f9f !important; } .indigo-text.text-darken-2 { color: #303f9f !important; } .indigo.darken-3 { background-color: #283593 !important; } .indigo-text.text-darken-3 { color: #283593 !important; } .indigo.darken-4 { background-color: #1a237e !important; } .indigo-text.text-darken-4 { color: #1a237e !important; } .indigo.accent-1 { background-color: #8c9eff !important; } .indigo-text.text-accent-1 { color: #8c9eff !important; } .indigo.accent-2 { background-color: #536dfe !important; } .indigo-text.text-accent-2 { color: #536dfe !important; } .indigo.accent-3 { background-color: #3d5afe !important; } .indigo-text.text-accent-3 { color: #3d5afe !important; } .indigo.accent-4 { background-color: #304ffe !important; } .indigo-text.text-accent-4 { color: #304ffe !important; } .blue { background-color: #2196f3 !important; } .blue-text { color: #2196f3 !important; } .blue.lighten-5 { background-color: #e3f2fd !important; } .blue-text.text-lighten-5 { color: #e3f2fd !important; } .blue.lighten-4 { background-color: #bbdefb !important; } .blue-text.text-lighten-4 { color: #bbdefb !important; } .blue.lighten-3 { background-color: #90caf9 !important; } .blue-text.text-lighten-3 { color: #90caf9 !important; } .blue.lighten-2 { background-color: #64b5f6 !important; } .blue-text.text-lighten-2 { color: #64b5f6 !important; } .blue.lighten-1 { background-color: #42a5f5 !important; } .blue-text.text-lighten-1 { color: #42a5f5 !important; } .blue.darken-1 { background-color: #1e88e5 !important; } .blue-text.text-darken-1 { color: #1e88e5 !important; } .blue.darken-2 { background-color: #1976d2 !important; } .blue-text.text-darken-2 { color: #1976d2 !important; } .blue.darken-3 { background-color: #1565c0 !important; } .blue-text.text-darken-3 { color: #1565c0 !important; } .blue.darken-4 { background-color: #0d47a1 !important; } .blue-text.text-darken-4 { color: #0d47a1 !important; } .blue.accent-1 { background-color: #82b1ff !important; } .blue-text.text-accent-1 { color: #82b1ff !important; } .blue.accent-2 { background-color: #448aff !important; } .blue-text.text-accent-2 { color: #448aff !important; } .blue.accent-3 { background-color: #2979ff !important; } .blue-text.text-accent-3 { color: #2979ff !important; } .blue.accent-4 { background-color: #2962ff !important; } .blue-text.text-accent-4 { color: #2962ff !important; } .light-blue { background-color: #03a9f4 !important; } .light-blue-text { color: #03a9f4 !important; } .light-blue.lighten-5 { background-color: #e1f5fe !important; } .light-blue-text.text-lighten-5 { color: #e1f5fe !important; } .light-blue.lighten-4 { background-color: #b3e5fc !important; } .light-blue-text.text-lighten-4 { color: #b3e5fc !important; } .light-blue.lighten-3 { background-color: #81d4fa !important; } .light-blue-text.text-lighten-3 { color: #81d4fa !important; } .light-blue.lighten-2 { background-color: #4fc3f7 !important; } .light-blue-text.text-lighten-2 { color: #4fc3f7 !important; } .light-blue.lighten-1 { background-color: #29b6f6 !important; } .light-blue-text.text-lighten-1 { color: #29b6f6 !important; } .light-blue.darken-1 { background-color: #039be5 !important; } .light-blue-text.text-darken-1 { color: #039be5 !important; } .light-blue.darken-2 { background-color: #0288d1 !important; } .light-blue-text.text-darken-2 { color: #0288d1 !important; } .light-blue.darken-3 { background-color: #0277bd !important; } .light-blue-text.text-darken-3 { color: #0277bd !important; } .light-blue.darken-4 { background-color: #01579b !important; } .light-blue-text.text-darken-4 { color: #01579b !important; } .light-blue.accent-1 { background-color: #80d8ff !important; } .light-blue-text.text-accent-1 { color: #80d8ff !important; } .light-blue.accent-2 { background-color: #40c4ff !important; } .light-blue-text.text-accent-2 { color: #40c4ff !important; } .light-blue.accent-3 { background-color: #00b0ff !important; } .light-blue-text.text-accent-3 { color: #00b0ff !important; } .light-blue.accent-4 { background-color: #0091ea !important; } .light-blue-text.text-accent-4 { color: #0091ea !important; } .cyan { background-color: #00bcd4 !important; } .cyan-text { color: #00bcd4 !important; } .cyan.lighten-5 { background-color: #e0f7fa !important; } .cyan-text.text-lighten-5 { color: #e0f7fa !important; } .cyan.lighten-4 { background-color: #b2ebf2 !important; } .cyan-text.text-lighten-4 { color: #b2ebf2 !important; } .cyan.lighten-3 { background-color: #80deea !important; } .cyan-text.text-lighten-3 { color: #80deea !important; } .cyan.lighten-2 { background-color: #4dd0e1 !important; } .cyan-text.text-lighten-2 { color: #4dd0e1 !important; } .cyan.lighten-1 { background-color: #26c6da !important; } .cyan-text.text-lighten-1 { color: #26c6da !important; } .cyan.darken-1 { background-color: #00acc1 !important; } .cyan-text.text-darken-1 { color: #00acc1 !important; } .cyan.darken-2 { background-color: #0097a7 !important; } .cyan-text.text-darken-2 { color: #0097a7 !important; } .cyan.darken-3 { background-color: #00838f !important; } .cyan-text.text-darken-3 { color: #00838f !important; } .cyan.darken-4 { background-color: #006064 !important; } .cyan-text.text-darken-4 { color: #006064 !important; } .cyan.accent-1 { background-color: #84ffff !important; } .cyan-text.text-accent-1 { color: #84ffff !important; } .cyan.accent-2 { background-color: #18ffff !important; } .cyan-text.text-accent-2 { color: #18ffff !important; } .cyan.accent-3 { background-color: #00e5ff !important; } .cyan-text.text-accent-3 { color: #00e5ff !important; } .cyan.accent-4 { background-color: #00b8d4 !important; } .cyan-text.text-accent-4 { color: #00b8d4 !important; } .teal { background-color: #009688 !important; } .teal-text { color: #009688 !important; } .teal.lighten-5 { background-color: #e0f2f1 !important; } .teal-text.text-lighten-5 { color: #e0f2f1 !important; } .teal.lighten-4 { background-color: #b2dfdb !important; } .teal-text.text-lighten-4 { color: #b2dfdb !important; } .teal.lighten-3 { background-color: #80cbc4 !important; } .teal-text.text-lighten-3 { color: #80cbc4 !important; } .teal.lighten-2 { background-color: #4db6ac !important; } .teal-text.text-lighten-2 { color: #4db6ac !important; } .teal.lighten-1 { background-color: #26a69a !important; } .teal-text.text-lighten-1 { color: #26a69a !important; } .teal.darken-1 { background-color: #00897b !important; } .teal-text.text-darken-1 { color: #00897b !important; } .teal.darken-2 { background-color: #00796b !important; } .teal-text.text-darken-2 { color: #00796b !important; } .teal.darken-3 { background-color: #00695c !important; } .teal-text.text-darken-3 { color: #00695c !important; } .teal.darken-4 { background-color: #004d40 !important; } .teal-text.text-darken-4 { color: #004d40 !important; } .teal.accent-1 { background-color: #a7ffeb !important; } .teal-text.text-accent-1 { color: #a7ffeb !important; } .teal.accent-2 { background-color: #64ffda !important; } .teal-text.text-accent-2 { color: #64ffda !important; } .teal.accent-3 { background-color: #1de9b6 !important; } .teal-text.text-accent-3 { color: #1de9b6 !important; } .teal.accent-4 { background-color: #00bfa5 !important; } .teal-text.text-accent-4 { color: #00bfa5 !important; } .green { background-color: #4caf50 !important; } .green-text { color: #4caf50 !important; } .green.lighten-5 { background-color: #e8f5e9 !important; } .green-text.text-lighten-5 { color: #e8f5e9 !important; } .green.lighten-4 { background-color: #c8e6c9 !important; } .green-text.text-lighten-4 { color: #c8e6c9 !important; } .green.lighten-3 { background-color: #a5d6a7 !important; } .green-text.text-lighten-3 { color: #a5d6a7 !important; } .green.lighten-2 { background-color: #81c784 !important; } .green-text.text-lighten-2 { color: #81c784 !important; } .green.lighten-1 { background-color: #66bb6a !important; } .green-text.text-lighten-1 { color: #66bb6a !important; } .green.darken-1 { background-color: #43a047 !important; } .green-text.text-darken-1 { color: #43a047 !important; } .green.darken-2 { background-color: #388e3c !important; } .green-text.text-darken-2 { color: #388e3c !important; } .green.darken-3 { background-color: #2e7d32 !important; } .green-text.text-darken-3 { color: #2e7d32 !important; } .green.darken-4 { background-color: #1b5e20 !important; } .green-text.text-darken-4 { color: #1b5e20 !important; } .green.accent-1 { background-color: #b9f6ca !important; } .green-text.text-accent-1 { color: #b9f6ca !important; } .green.accent-2 { background-color: #69f0ae !important; } .green-text.text-accent-2 { color: #69f0ae !important; } .green.accent-3 { background-color: #00e676 !important; } .green-text.text-accent-3 { color: #00e676 !important; } .green.accent-4 { background-color: #00c853 !important; } .green-text.text-accent-4 { color: #00c853 !important; } .light-green { background-color: #8bc34a !important; } .light-green-text { color: #8bc34a !important; } .light-green.lighten-5 { background-color: #f1f8e9 !important; } .light-green-text.text-lighten-5 { color: #f1f8e9 !important; } .light-green.lighten-4 { background-color: #dcedc8 !important; } .light-green-text.text-lighten-4 { color: #dcedc8 !important; } .light-green.lighten-3 { background-color: #c5e1a5 !important; } .light-green-text.text-lighten-3 { color: #c5e1a5 !important; } .light-green.lighten-2 { background-color: #aed581 !important; } .light-green-text.text-lighten-2 { color: #aed581 !important; } .light-green.lighten-1 { background-color: #9ccc65 !important; } .light-green-text.text-lighten-1 { color: #9ccc65 !important; } .light-green.darken-1 { background-color: #7cb342 !important; } .light-green-text.text-darken-1 { color: #7cb342 !important; } .light-green.darken-2 { background-color: #689f38 !important; } .light-green-text.text-darken-2 { color: #689f38 !important; } .light-green.darken-3 { background-color: #558b2f !important; } .light-green-text.text-darken-3 { color: #558b2f !important; } .light-green.darken-4 { background-color: #33691e !important; } .light-green-text.text-darken-4 { color: #33691e !important; } .light-green.accent-1 { background-color: #ccff90 !important; } .light-green-text.text-accent-1 { color: #ccff90 !important; } .light-green.accent-2 { background-color: #b2ff59 !important; } .light-green-text.text-accent-2 { color: #b2ff59 !important; } .light-green.accent-3 { background-color: #76ff03 !important; } .light-green-text.text-accent-3 { color: #76ff03 !important; } .light-green.accent-4 { background-color: #64dd17 !important; } .light-green-text.text-accent-4 { color: #64dd17 !important; } .lime { background-color: #cddc39 !important; } .lime-text { color: #cddc39 !important; } .lime.lighten-5 { background-color: #f9fbe7 !important; } .lime-text.text-lighten-5 { color: #f9fbe7 !important; } .lime.lighten-4 { background-color: #f0f4c3 !important; } .lime-text.text-lighten-4 { color: #f0f4c3 !important; } .lime.lighten-3 { background-color: #e6ee9c !important; } .lime-text.text-lighten-3 { color: #e6ee9c !important; } .lime.lighten-2 { background-color: #dce775 !important; } .lime-text.text-lighten-2 { color: #dce775 !important; } .lime.lighten-1 { background-color: #d4e157 !important; } .lime-text.text-lighten-1 { color: #d4e157 !important; } .lime.darken-1 { background-color: #c0ca33 !important; } .lime-text.text-darken-1 { color: #c0ca33 !important; } .lime.darken-2 { background-color: #afb42b !important; } .lime-text.text-darken-2 { color: #afb42b !important; } .lime.darken-3 { background-color: #9e9d24 !important; } .lime-text.text-darken-3 { color: #9e9d24 !important; } .lime.darken-4 { background-color: #827717 !important; } .lime-text.text-darken-4 { color: #827717 !important; } .lime.accent-1 { background-color: #f4ff81 !important; } .lime-text.text-accent-1 { color: #f4ff81 !important; } .lime.accent-2 { background-color: #eeff41 !important; } .lime-text.text-accent-2 { color: #eeff41 !important; } .lime.accent-3 { background-color: #c6ff00 !important; } .lime-text.text-accent-3 { color: #c6ff00 !important; } .lime.accent-4 { background-color: #aeea00 !important; } .lime-text.text-accent-4 { color: #aeea00 !important; } .yellow { background-color: #ffeb3b !important; } .yellow-text { color: #ffeb3b !important; } .yellow.lighten-5 { background-color: #fffde7 !important; } .yellow-text.text-lighten-5 { color: #fffde7 !important; } .yellow.lighten-4 { background-color: #fff9c4 !important; } .yellow-text.text-lighten-4 { color: #fff9c4 !important; } .yellow.lighten-3 { background-color: #fff59d !important; } .yellow-text.text-lighten-3 { color: #fff59d !important; } .yellow.lighten-2 { background-color: #fff176 !important; } .yellow-text.text-lighten-2 { color: #fff176 !important; } .yellow.lighten-1 { background-color: #ffee58 !important; } .yellow-text.text-lighten-1 { color: #ffee58 !important; } .yellow.darken-1 { background-color: #fdd835 !important; } .yellow-text.text-darken-1 { color: #fdd835 !important; } .yellow.darken-2 { background-color: #fbc02d !important; } .yellow-text.text-darken-2 { color: #fbc02d !important; } .yellow.darken-3 { background-color: #f9a825 !important; } .yellow-text.text-darken-3 { color: #f9a825 !important; } .yellow.darken-4 { background-color: #f57f17 !important; } .yellow-text.text-darken-4 { color: #f57f17 !important; } .yellow.accent-1 { background-color: #ffff8d !important; } .yellow-text.text-accent-1 { color: #ffff8d !important; } .yellow.accent-2 { background-color: #ff0 !important; } .yellow-text.text-accent-2 { color: #ff0 !important; } .yellow.accent-3 { background-color: #ffea00 !important; } .yellow-text.text-accent-3 { color: #ffea00 !important; } .yellow.accent-4 { background-color: #ffd600 !important; } .yellow-text.text-accent-4 { color: #ffd600 !important; } .amber { background-color: #ffc107 !important; } .amber-text { color: #ffc107 !important; } .amber.lighten-5 { background-color: #fff8e1 !important; } .amber-text.text-lighten-5 { color: #fff8e1 !important; } .amber.lighten-4 { background-color: #ffecb3 !important; } .amber-text.text-lighten-4 { color: #ffecb3 !important; } .amber.lighten-3 { background-color: #ffe082 !important; } .amber-text.text-lighten-3 { color: #ffe082 !important; } .amber.lighten-2 { background-color: #ffd54f !important; } .amber-text.text-lighten-2 { color: #ffd54f !important; } .amber.lighten-1 { background-color: #ffca28 !important; } .amber-text.text-lighten-1 { color: #ffca28 !important; } .amber.darken-1 { background-color: #ffb300 !important; } .amber-text.text-darken-1 { color: #ffb300 !important; } .amber.darken-2 { background-color: #ffa000 !important; } .amber-text.text-darken-2 { color: #ffa000 !important; } .amber.darken-3 { background-color: #ff8f00 !important; } .amber-text.text-darken-3 { color: #ff8f00 !important; } .amber.darken-4 { background-color: #ff6f00 !important; } .amber-text.text-darken-4 { color: #ff6f00 !important; } .amber.accent-1 { background-color: #ffe57f !important; } .amber-text.text-accent-1 { color: #ffe57f !important; } .amber.accent-2 { background-color: #ffd740 !important; } .amber-text.text-accent-2 { color: #ffd740 !important; } .amber.accent-3 { background-color: #ffc400 !important; } .amber-text.text-accent-3 { color: #ffc400 !important; } .amber.accent-4 { background-color: #ffab00 !important; } .amber-text.text-accent-4 { color: #ffab00 !important; } .orange { background-color: #ff9800 !important; } .orange-text { color: #ff9800 !important; } .orange.lighten-5 { background-color: #fff3e0 !important; } .orange-text.text-lighten-5 { color: #fff3e0 !important; } .orange.lighten-4 { background-color: #ffe0b2 !important; } .orange-text.text-lighten-4 { color: #ffe0b2 !important; } .orange.lighten-3 { background-color: #ffcc80 !important; } .orange-text.text-lighten-3 { color: #ffcc80 !important; } .orange.lighten-2 { background-color: #ffb74d !important; } .orange-text.text-lighten-2 { color: #ffb74d !important; } .orange.lighten-1 { background-color: #ffa726 !important; } .orange-text.text-lighten-1 { color: #ffa726 !important; } .orange.darken-1 { background-color: #fb8c00 !important; } .orange-text.text-darken-1 { color: #fb8c00 !important; } .orange.darken-2 { background-color: #f57c00 !important; } .orange-text.text-darken-2 { color: #f57c00 !important; } .orange.darken-3 { background-color: #ef6c00 !important; } .orange-text.text-darken-3 { color: #ef6c00 !important; } .orange.darken-4 { background-color: #e65100 !important; } .orange-text.text-darken-4 { color: #e65100 !important; } .orange.accent-1 { background-color: #ffd180 !important; } .orange-text.text-accent-1 { color: #ffd180 !important; } .orange.accent-2 { background-color: #ffab40 !important; } .orange-text.text-accent-2 { color: #ffab40 !important; } .orange.accent-3 { background-color: #ff9100 !important; } .orange-text.text-accent-3 { color: #ff9100 !important; } .orange.accent-4 { background-color: #ff6d00 !important; } .orange-text.text-accent-4 { color: #ff6d00 !important; } .deep-orange { background-color: #ff5722 !important; } .deep-orange-text { color: #ff5722 !important; } .deep-orange.lighten-5 { background-color: #fbe9e7 !important; } .deep-orange-text.text-lighten-5 { color: #fbe9e7 !important; } .deep-orange.lighten-4 { background-color: #ffccbc !important; } .deep-orange-text.text-lighten-4 { color: #ffccbc !important; } .deep-orange.lighten-3 { background-color: #ffab91 !important; } .deep-orange-text.text-lighten-3 { color: #ffab91 !important; } .deep-orange.lighten-2 { background-color: #ff8a65 !important; } .deep-orange-text.text-lighten-2 { color: #ff8a65 !important; } .deep-orange.lighten-1 { background-color: #ff7043 !important; } .deep-orange-text.text-lighten-1 { color: #ff7043 !important; } .deep-orange.darken-1 { background-color: #f4511e !important; } .deep-orange-text.text-darken-1 { color: #f4511e !important; } .deep-orange.darken-2 { background-color: #e64a19 !important; } .deep-orange-text.text-darken-2 { color: #e64a19 !important; } .deep-orange.darken-3 { background-color: #d84315 !important; } .deep-orange-text.text-darken-3 { color: #d84315 !important; } .deep-orange.darken-4 { background-color: #bf360c !important; } .deep-orange-text.text-darken-4 { color: #bf360c !important; } .deep-orange.accent-1 { background-color: #ff9e80 !important; } .deep-orange-text.text-accent-1 { color: #ff9e80 !important; } .deep-orange.accent-2 { background-color: #ff6e40 !important; } .deep-orange-text.text-accent-2 { color: #ff6e40 !important; } .deep-orange.accent-3 { background-color: #ff3d00 !important; } .deep-orange-text.text-accent-3 { color: #ff3d00 !important; } .deep-orange.accent-4 { background-color: #dd2c00 !important; } .deep-orange-text.text-accent-4 { color: #dd2c00 !important; } .brown { background-color: #795548 !important; } .brown-text { color: #795548 !important; } .brown.lighten-5 { background-color: #efebe9 !important; } .brown-text.text-lighten-5 { color: #efebe9 !important; } .brown.lighten-4 { background-color: #d7ccc8 !important; } .brown-text.text-lighten-4 { color: #d7ccc8 !important; } .brown.lighten-3 { background-color: #bcaaa4 !important; } .brown-text.text-lighten-3 { color: #bcaaa4 !important; } .brown.lighten-2 { background-color: #a1887f !important; } .brown-text.text-lighten-2 { color: #a1887f !important; } .brown.lighten-1 { background-color: #8d6e63 !important; } .brown-text.text-lighten-1 { color: #8d6e63 !important; } .brown.darken-1 { background-color: #6d4c41 !important; } .brown-text.text-darken-1 { color: #6d4c41 !important; } .brown.darken-2 { background-color: #5d4037 !important; } .brown-text.text-darken-2 { color: #5d4037 !important; } .brown.darken-3 { background-color: #4e342e !important; } .brown-text.text-darken-3 { color: #4e342e !important; } .brown.darken-4 { background-color: #3e2723 !important; } .brown-text.text-darken-4 { color: #3e2723 !important; } .blue-grey { background-color: #607d8b !important; } .blue-grey-text { color: #607d8b !important; } .blue-grey.lighten-5 { background-color: #eceff1 !important; } .blue-grey-text.text-lighten-5 { color: #eceff1 !important; } .blue-grey.lighten-4 { background-color: #cfd8dc !important; } .blue-grey-text.text-lighten-4 { color: #cfd8dc !important; } .blue-grey.lighten-3 { background-color: #b0bec5 !important; } .blue-grey-text.text-lighten-3 { color: #b0bec5 !important; } .blue-grey.lighten-2 { background-color: #90a4ae !important; } .blue-grey-text.text-lighten-2 { color: #90a4ae !important; } .blue-grey.lighten-1 { background-color: #78909c !important; } .blue-grey-text.text-lighten-1 { color: #78909c !important; } .blue-grey.darken-1 { background-color: #546e7a !important; } .blue-grey-text.text-darken-1 { color: #546e7a !important; } .blue-grey.darken-2 { background-color: #455a64 !important; } .blue-grey-text.text-darken-2 { color: #455a64 !important; } .blue-grey.darken-3 { background-color: #37474f !important; } .blue-grey-text.text-darken-3 { color: #37474f !important; } .blue-grey.darken-4 { background-color: #263238 !important; } .blue-grey-text.text-darken-4 { color: #263238 !important; } .grey { background-color: #9e9e9e !important; } .grey-text { color: #9e9e9e !important; } .grey.lighten-5 { background-color: #fafafa !important; } .grey-text.text-lighten-5 { color: #fafafa !important; } .grey.lighten-4 { background-color: #f5f5f5 !important; } .grey-text.text-lighten-4 { color: #f5f5f5 !important; } .grey.lighten-3 { background-color: #eee !important; } .grey-text.text-lighten-3 { color: #eee !important; } .grey.lighten-2 { background-color: #e0e0e0 !important; } .grey-text.text-lighten-2 { color: #e0e0e0 !important; } .grey.lighten-1 { background-color: #bdbdbd !important; } .grey-text.text-lighten-1 { color: #bdbdbd !important; } .grey.darken-1 { background-color: #757575 !important; } .grey-text.text-darken-1 { color: #757575 !important; } .grey.darken-2 { background-color: #616161 !important; } .grey-text.text-darken-2 { color: #616161 !important; } .grey.darken-3 { background-color: #424242 !important; } .grey-text.text-darken-3 { color: #424242 !important; } .grey.darken-4 { background-color: #212121 !important; } .grey-text.text-darken-4 { color: #212121 !important; } .black { background-color: #000 !important; } .black-text { color: #000 !important; } .white { background-color: #fff !important; } .white-text { color: #fff !important; } .transparent { background-color: transparent !important; } .transparent-text { color: transparent !important; } /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; font-family: sans-serif; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { margin: .67em 0; font-size: 2em; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { /* 2 */ margin: 0; color: inherit; /* 1 */ font: inherit; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type=search] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { margin: 0 2px; padding: .35em .625em .75em; border: 1px solid #c0c0c0; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { /* 1 */ padding: 0; border: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } ul:not(.browser-default) { padding-left: 0; list-style-type: none; } ul:not(.browser-default) li { list-style-type: none; } a { -webkit-tap-highlight-color: transparent; color: #039be5; text-decoration: none; } .valign-wrapper { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .valign-wrapper .valign { display: block; } .clearfix, body.sd-notice-detail .notice-detail-head__data, .notice-detail__header__data, .book-detail-block__comments__item__operation__rightside, .book-detail-block__comments__item__operation, .modal-abo-general .modal-footer, .mypage-block__footer, .login-form--confirm .form-group { clear: both; } .z-depth-0 { box-shadow: none !important; } .z-depth-1, .side-nav, .collapsible, .dropdown-content, .btn-floating, .btn, .btn-large, .toast, .card, .card-panel, nav { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2); } .z-depth-1-half, .btn-floating:hover, .btn:hover, .btn-large:hover { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2); } .z-depth-2 { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3); } .z-depth-3 { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .3); } .z-depth-4, .modal { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .3); } .z-depth-5 { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .3); } .hoverable { box-shadow: 0; transition: box-shadow .25s; } .hoverable:hover { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19); transition: box-shadow .25s; } .divider { height: 1px; overflow: hidden; background-color: #e0e0e0; } blockquote { margin: 20px 0; padding-left: 24px; padding-left: 1.5rem; border-left: 5px solid #ee6e73; } i { line-height: inherit; } i.left { margin-right: 15px; float: left; } i.right { margin-left: 15px; float: right; } i.tiny { font-size: 16px; font-size: 1rem; } i.small { font-size: 32px; font-size: 2rem; } i.medium { font-size: 64px; font-size: 4rem; } i.large { font-size: 96px; font-size: 6rem; } img.responsive-img, video.responsive-video { max-width: 100%; height: auto; } .pagination li { display: inline-block; height: 30px; border-radius: 2px; text-align: center; vertical-align: top; } .pagination li a { display: inline-block; padding: 0 10px; color: #444; font-size: 19.2px; font-size: 1.2rem; line-height: 30px; } .pagination li.active a { color: #fff; } .pagination li.active { background-color: #ee6e73; } .pagination li.disabled a { color: #999; cursor: default; } .pagination li i { font-size: 32px; font-size: 2rem; } .pagination li.pages ul li { display: inline-block; float: none; } @media only screen and (max-width : 992px) { .pagination { width: 100%; } .pagination li.prev, .pagination li.next { width: 10%; } .pagination li.pages { width: 80%; overflow: hidden; white-space: nowrap; } } .breadcrumb { color: rgba(255, 255, 255, .7); font-size: 18px; } .breadcrumb i, .breadcrumb [class^=mdi-], .breadcrumb [class*=mdi-], .breadcrumb i.material-icons { display: inline-block; float: left; font-size: 24px; } .breadcrumb:before { -webkit-font-smoothing: antialiased; display: inline-block; margin: 0 10px 0 8px; color: rgba(255, 255, 255, .7); font-family: "Material Icons"; font-size: 25px; font-style: normal; font-weight: normal; vertical-align: top; content: ""; } .breadcrumb:first-child:before { display: none; } .breadcrumb:last-child { color: #fff; } .parallax-container { position: relative; height: 500px; overflow: hidden; } .parallax { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax img { -webkit-transform: translate3d(0, 0, 0); display: none; position: absolute; bottom: 0; left: 50%; min-width: 100%; min-height: 100%; transform: translate3d(0, 0, 0); transform: translateX(-50%); } .pin-top, .pin-bottom { position: relative; } .pinned { position: fixed !important; } /********************* Transition Classes **********************/ ul.staggered-list li { opacity: 0; } .fade-in { transform-origin: 0 50%; opacity: 0; } /********************* Media Query Classes **********************/ @media only screen and (max-width : 600px) { .hide-on-small-only, .hide-on-small-and-down { display: none !important; } } @media only screen and (max-width : 992px) { .hide-on-med-and-down { display: none !important; } } @media only screen and (min-width : 601px) { .hide-on-med-and-up { display: none !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .hide-on-med-only { display: none !important; } } @media only screen and (min-width : 993px) { .hide-on-large-only { display: none !important; } } @media only screen and (min-width : 993px) { .show-on-large { display: block !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .show-on-medium { display: block !important; } } @media only screen and (max-width : 600px) { .show-on-small { display: block !important; } } @media only screen and (min-width : 601px) { .show-on-medium-and-up { display: block !important; } } @media only screen and (max-width : 992px) { .show-on-medium-and-down { display: block !important; } } @media only screen and (max-width : 600px) { .center-on-small-only { text-align: center; } } .page-footer { padding-top: 20px; background-color: #ee6e73; } .page-footer .footer-copyright { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: 50px; padding: 10px 0px; overflow: hidden; background-color: rgba(51, 51, 51, .08); color: rgba(255, 255, 255, .8); } table, th, td { border: none; } table { display: table; width: 100%; } table.bordered > thead > tr, table.bordered > tbody > tr { border-bottom: 1px solid #d0d0d0; } table.striped > tbody > tr:nth-child(odd) { background-color: #f2f2f2; } table.striped > tbody > tr > td { border-radius: 0; } table.highlight > tbody > tr { transition: background-color .25s ease; } table.highlight > tbody > tr:hover { background-color: #f2f2f2; } table.centered thead tr th, table.centered tbody tr td { text-align: center; } thead { border-bottom: 1px solid #d0d0d0; } td, th { display: table-cell; padding: 15px 5px; border-radius: 2px; text-align: left; vertical-align: middle; } @media only screen and (max-width : 992px) { table.responsive-table { display: block; position: relative; width: 100%; border-collapse: collapse; border-spacing: 0; /* sort out borders */ } table.responsive-table td:empty:before { content: " "; } table.responsive-table th, table.responsive-table td { margin: 0; vertical-align: top; } table.responsive-table th { text-align: left; } table.responsive-table thead { display: block; float: left; } table.responsive-table thead tr { display: block; padding: 0 10px 0 0; } table.responsive-table thead tr th:before { content: " "; } table.responsive-table tbody { display: block; position: relative; width: auto; overflow-x: auto; white-space: nowrap; } table.responsive-table tbody tr { display: inline-block; vertical-align: top; } table.responsive-table th { display: block; text-align: right; } table.responsive-table td { display: block; min-height: 1.25em; text-align: left; } table.responsive-table tr { padding: 0 10px; } table.responsive-table thead { border: 0; border-right: 1px solid #d0d0d0; } table.responsive-table.bordered th { border-bottom: 0; border-left: 0; } table.responsive-table.bordered td { border-right: 0; border-bottom: 0; border-left: 0; } table.responsive-table.bordered tr { border: 0; } table.responsive-table.bordered tbody tr { border-right: 1px solid #d0d0d0; } } .collection { position: relative; margin: 8px 0 16px 0; margin: .5rem 0 1rem 0; overflow: hidden; border: 1px solid #e0e0e0; border-radius: 2px; } .collection .collection-item { margin: 0; padding: 10px 20px; border-bottom: 1px solid #e0e0e0; background-color: #fff; line-height: 24px; line-height: 1.5rem; } .collection .collection-item.avatar { position: relative; min-height: 84px; padding-left: 72px; } .collection .collection-item.avatar .circle { display: inline-block; position: absolute; left: 15px; width: 42px; height: 42px; overflow: hidden; vertical-align: middle; } .collection .collection-item.avatar i.circle { background-color: #999; color: #fff; font-size: 18px; line-height: 42px; text-align: center; } .collection .collection-item.avatar .title { font-size: 16px; } .collection .collection-item.avatar p { margin: 0; } .collection .collection-item.avatar .secondary-content { position: absolute; top: 16px; right: 16px; } .collection .collection-item:last-child { border-bottom: none; } .collection .collection-item.active { background-color: #26a69a; color: #eafaf9; } .collection .collection-item.active .secondary-content { color: #fff; } .collection a.collection-item { display: block; color: #26a69a; transition: .25s; } .collection a.collection-item:not(.active):hover { background-color: #ddd; } .collection.with-header .collection-header { padding: 10px 20px; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .collection.with-header .collection-item { padding-left: 30px; } .collection.with-header .collection-item.avatar { padding-left: 72px; } .secondary-content { float: right; color: #26a69a; } .collapsible .collection { margin: 0; border: none; } .video-container { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .progress { display: block; position: relative; width: 100%; height: 4px; margin: 8px 0 16px 0; margin: .5rem 0 1rem 0; overflow: hidden; border-radius: 2px; background-color: #acece6; } .progress .determinate { position: absolute; top: 0; bottom: 0; left: 0; background-color: #26a69a; transition: width .3s linear; } .progress .indeterminate { background-color: #26a69a; } .progress .indeterminate:before { position: absolute; top: 0; bottom: 0; left: 0; background-color: inherit; animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite; content: ""; will-change: left, right; } .progress .indeterminate:after { position: absolute; top: 0; bottom: 0; left: 0; background-color: inherit; animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite; animation-delay: 1.15s; content: ""; will-change: left, right; } @keyframes indeterminate { 0% { right: 100%; left: -35%; } 60% { right: -90%; left: 100%; } 100% { right: -90%; left: 100%; } } @keyframes indeterminate-short { 0% { right: 100%; left: -200%; } 60% { right: -8%; left: 107%; } 100% { right: -8%; left: 107%; } } /******************* Utility Classes *******************/ .hide { display: none !important; } .left-align { text-align: left; } .right-align { text-align: right; } .center, .center-align { text-align: center; } .left { float: left !important; } .right { float: right !important; } .no-select, input[type=range], input[type=range] + .thumb { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .circle { border-radius: 50%; } .center-block { display: block; margin-right: auto; margin-left: auto; } .truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .no-padding { padding: 0 !important; } span.badge { box-sizing: border-box; min-width: 48px; min-width: 3rem; height: 22px; margin-left: 14px; padding: 0 6px; float: right; color: #757575; font-size: 16px; font-size: 1rem; line-height: 22px; text-align: center; } span.badge.new { border-radius: 2px; background-color: #26a69a; color: #fff; font-size: 12.8px; font-size: .8rem; font-weight: 300; } span.badge.new:after { content: " new"; } span.badge[data-badge-caption]:after { content: " " attr(data-badge-caption); } nav ul a span.badge { display: inline-block; height: 22px; margin-left: 4px; float: none; line-height: 22px; } .collection-item span.badge { margin-top: calc(.75rem - 11px); } .collapsible span.badge { margin-top: calc(1.5rem - 11px); } .side-nav span.badge { margin-top: calc(24px - 11px); } /* This is needed for some mobile phones to display the Google Icon font properly */ .material-icons { -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; text-rendering: optimizeLegibility; } .container { width: 90%; max-width: 1280px; margin: 0 auto; } @media only screen and (min-width : 601px) { .container { width: 85%; } } @media only screen and (min-width : 993px) { .container { width: 70%; } } .container .row { margin-right: -12px; margin-right: -.75rem; margin-left: -12px; margin-left: -.75rem; } .section { padding-top: 16px; padding-top: 1rem; padding-bottom: 16px; padding-bottom: 1rem; } .section.no-pad { padding: 0; } .section.no-pad-bot { padding-bottom: 0; } .section.no-pad-top { padding-top: 0; } .row { margin-right: auto; margin-bottom: 20px; margin-left: auto; } .row:after { display: table; clear: both; content: ""; } .row .col { box-sizing: border-box; min-height: 1px; padding: 0 12px; padding: 0 .75rem; float: left; } .row .col[class*=push-], .row .col[class*=pull-] { position: relative; } .row .col.s1, .row .col.m1, .row .col.l1, .row .col.xl1 { right: auto; left: auto; margin-left: auto; } .row .col.s2, .row .col.m2, .row .col.l2, .row .col.xl2 { right: auto; left: auto; margin-left: auto; } .row .col.s3, .row .col.m3, .row .col.l3, .row .col.xl3 { right: auto; left: auto; margin-left: auto; } .row .col.s4, .row .col.m4, .row .col.l4, .row .col.xl4 { right: auto; left: auto; margin-left: auto; } .row .col.s5, .row .col.m5, .row .col.l5, .row .col.xl5 { right: auto; left: auto; margin-left: auto; } .row .col.s6, .row .col.m6, .row .col.l6, .row .col.xl6 { right: auto; left: auto; margin-left: auto; } .row .col.s7, .row .col.m7, .row .col.l7, .row .col.xl7 { right: auto; left: auto; margin-left: auto; } .row .col.s8, .row .col.m8, .row .col.l8, .row .col.xl8 { right: auto; left: auto; margin-left: auto; } .row .col.s9, .row .col.m9, .row .col.l9, .row .col.xl9 { right: auto; left: auto; margin-left: auto; } .row .col.s10, .row .col.m10, .row .col.l10, .row .col.xl10 { right: auto; left: auto; margin-left: auto; } .row .col.s11, .row .col.m11, .row .col.l11, .row .col.xl11 { right: auto; left: auto; margin-left: auto; } .row .col.s12, .row .col.m12, .row .col.l12, .row .col.xl12 { right: auto; left: auto; margin-left: auto; } .row .col.s1 { width: 8.3333333333%; } .row .col.s2 { width: 16.6666666667%; } .row .col.s3 { width: 25%; } .row .col.s4 { width: 33.3333333333%; } .row .col.s5 { width: 41.6666666667%; } .row .col.s6 { width: 50%; } .row .col.s7 { width: 58.3333333333%; } .row .col.s8 { width: 66.6666666667%; } .row .col.s9 { width: 75%; } .row .col.s10 { width: 83.3333333333%; } .row .col.s11 { width: 91.6666666667%; } .row .col.s12 { width: 100%; } .row .col.offset-s1 { margin-left: 8.3333333333%; } .row .col.pull-s1 { right: 8.3333333333%; } .row .col.push-s1 { left: 8.3333333333%; } .row .col.offset-s2 { margin-left: 16.6666666667%; } .row .col.pull-s2 { right: 16.6666666667%; } .row .col.push-s2 { left: 16.6666666667%; } .row .col.offset-s3 { margin-left: 25%; } .row .col.pull-s3 { right: 25%; } .row .col.push-s3 { left: 25%; } .row .col.offset-s4 { margin-left: 33.3333333333%; } .row .col.pull-s4 { right: 33.3333333333%; } .row .col.push-s4 { left: 33.3333333333%; } .row .col.offset-s5 { margin-left: 41.6666666667%; } .row .col.pull-s5 { right: 41.6666666667%; } .row .col.push-s5 { left: 41.6666666667%; } .row .col.offset-s6 { margin-left: 50%; } .row .col.pull-s6 { right: 50%; } .row .col.push-s6 { left: 50%; } .row .col.offset-s7 { margin-left: 58.3333333333%; } .row .col.pull-s7 { right: 58.3333333333%; } .row .col.push-s7 { left: 58.3333333333%; } .row .col.offset-s8 { margin-left: 66.6666666667%; } .row .col.pull-s8 { right: 66.6666666667%; } .row .col.push-s8 { left: 66.6666666667%; } .row .col.offset-s9 { margin-left: 75%; } .row .col.pull-s9 { right: 75%; } .row .col.push-s9 { left: 75%; } .row .col.offset-s10 { margin-left: 83.3333333333%; } .row .col.pull-s10 { right: 83.3333333333%; } .row .col.push-s10 { left: 83.3333333333%; } .row .col.offset-s11 { margin-left: 91.6666666667%; } .row .col.pull-s11 { right: 91.6666666667%; } .row .col.push-s11 { left: 91.6666666667%; } .row .col.offset-s12 { margin-left: 100%; } .row .col.pull-s12 { right: 100%; } .row .col.push-s12 { left: 100%; } @media only screen and (min-width : 601px) { .row .col.m1 { width: 8.3333333333%; } .row .col.m2 { width: 16.6666666667%; } .row .col.m3 { width: 25%; } .row .col.m4 { width: 33.3333333333%; } .row .col.m5 { width: 41.6666666667%; } .row .col.m6 { width: 50%; } .row .col.m7 { width: 58.3333333333%; } .row .col.m8 { width: 66.6666666667%; } .row .col.m9 { width: 75%; } .row .col.m10 { width: 83.3333333333%; } .row .col.m11 { width: 91.6666666667%; } .row .col.m12 { width: 100%; } .row .col.offset-m1 { margin-left: 8.3333333333%; } .row .col.pull-m1 { right: 8.3333333333%; } .row .col.push-m1 { left: 8.3333333333%; } .row .col.offset-m2 { margin-left: 16.6666666667%; } .row .col.pull-m2 { right: 16.6666666667%; } .row .col.push-m2 { left: 16.6666666667%; } .row .col.offset-m3 { margin-left: 25%; } .row .col.pull-m3 { right: 25%; } .row .col.push-m3 { left: 25%; } .row .col.offset-m4 { margin-left: 33.3333333333%; } .row .col.pull-m4 { right: 33.3333333333%; } .row .col.push-m4 { left: 33.3333333333%; } .row .col.offset-m5 { margin-left: 41.6666666667%; } .row .col.pull-m5 { right: 41.6666666667%; } .row .col.push-m5 { left: 41.6666666667%; } .row .col.offset-m6 { margin-left: 50%; } .row .col.pull-m6 { right: 50%; } .row .col.push-m6 { left: 50%; } .row .col.offset-m7 { margin-left: 58.3333333333%; } .row .col.pull-m7 { right: 58.3333333333%; } .row .col.push-m7 { left: 58.3333333333%; } .row .col.offset-m8 { margin-left: 66.6666666667%; } .row .col.pull-m8 { right: 66.6666666667%; } .row .col.push-m8 { left: 66.6666666667%; } .row .col.offset-m9 { margin-left: 75%; } .row .col.pull-m9 { right: 75%; } .row .col.push-m9 { left: 75%; } .row .col.offset-m10 { margin-left: 83.3333333333%; } .row .col.pull-m10 { right: 83.3333333333%; } .row .col.push-m10 { left: 83.3333333333%; } .row .col.offset-m11 { margin-left: 91.6666666667%; } .row .col.pull-m11 { right: 91.6666666667%; } .row .col.push-m11 { left: 91.6666666667%; } .row .col.offset-m12 { margin-left: 100%; } .row .col.pull-m12 { right: 100%; } .row .col.push-m12 { left: 100%; } } @media only screen and (min-width : 993px) { .row .col.l1 { width: 8.3333333333%; } .row .col.l2 { width: 16.6666666667%; } .row .col.l3 { width: 25%; } .row .col.l4 { width: 33.3333333333%; } .row .col.l5 { width: 41.6666666667%; } .row .col.l6 { width: 50%; } .row .col.l7 { width: 58.3333333333%; } .row .col.l8 { width: 66.6666666667%; } .row .col.l9 { width: 75%; } .row .col.l10 { width: 83.3333333333%; } .row .col.l11 { width: 91.6666666667%; } .row .col.l12 { width: 100%; } .row .col.offset-l1 { margin-left: 8.3333333333%; } .row .col.pull-l1 { right: 8.3333333333%; } .row .col.push-l1 { left: 8.3333333333%; } .row .col.offset-l2 { margin-left: 16.6666666667%; } .row .col.pull-l2 { right: 16.6666666667%; } .row .col.push-l2 { left: 16.6666666667%; } .row .col.offset-l3 { margin-left: 25%; } .row .col.pull-l3 { right: 25%; } .row .col.push-l3 { left: 25%; } .row .col.offset-l4 { margin-left: 33.3333333333%; } .row .col.pull-l4 { right: 33.3333333333%; } .row .col.push-l4 { left: 33.3333333333%; } .row .col.offset-l5 { margin-left: 41.6666666667%; } .row .col.pull-l5 { right: 41.6666666667%; } .row .col.push-l5 { left: 41.6666666667%; } .row .col.offset-l6 { margin-left: 50%; } .row .col.pull-l6 { right: 50%; } .row .col.push-l6 { left: 50%; } .row .col.offset-l7 { margin-left: 58.3333333333%; } .row .col.pull-l7 { right: 58.3333333333%; } .row .col.push-l7 { left: 58.3333333333%; } .row .col.offset-l8 { margin-left: 66.6666666667%; } .row .col.pull-l8 { right: 66.6666666667%; } .row .col.push-l8 { left: 66.6666666667%; } .row .col.offset-l9 { margin-left: 75%; } .row .col.pull-l9 { right: 75%; } .row .col.push-l9 { left: 75%; } .row .col.offset-l10 { margin-left: 83.3333333333%; } .row .col.pull-l10 { right: 83.3333333333%; } .row .col.push-l10 { left: 83.3333333333%; } .row .col.offset-l11 { margin-left: 91.6666666667%; } .row .col.pull-l11 { right: 91.6666666667%; } .row .col.push-l11 { left: 91.6666666667%; } .row .col.offset-l12 { margin-left: 100%; } .row .col.pull-l12 { right: 100%; } .row .col.push-l12 { left: 100%; } } @media only screen and (min-width : 1201px) { .row .col.xl1 { width: 8.3333333333%; } .row .col.xl2 { width: 16.6666666667%; } .row .col.xl3 { width: 25%; } .row .col.xl4 { width: 33.3333333333%; } .row .col.xl5 { width: 41.6666666667%; } .row .col.xl6 { width: 50%; } .row .col.xl7 { width: 58.3333333333%; } .row .col.xl8 { width: 66.6666666667%; } .row .col.xl9 { width: 75%; } .row .col.xl10 { width: 83.3333333333%; } .row .col.xl11 { width: 91.6666666667%; } .row .col.xl12 { width: 100%; } .row .col.offset-xl1 { margin-left: 8.3333333333%; } .row .col.pull-xl1 { right: 8.3333333333%; } .row .col.push-xl1 { left: 8.3333333333%; } .row .col.offset-xl2 { margin-left: 16.6666666667%; } .row .col.pull-xl2 { right: 16.6666666667%; } .row .col.push-xl2 { left: 16.6666666667%; } .row .col.offset-xl3 { margin-left: 25%; } .row .col.pull-xl3 { right: 25%; } .row .col.push-xl3 { left: 25%; } .row .col.offset-xl4 { margin-left: 33.3333333333%; } .row .col.pull-xl4 { right: 33.3333333333%; } .row .col.push-xl4 { left: 33.3333333333%; } .row .col.offset-xl5 { margin-left: 41.6666666667%; } .row .col.pull-xl5 { right: 41.6666666667%; } .row .col.push-xl5 { left: 41.6666666667%; } .row .col.offset-xl6 { margin-left: 50%; } .row .col.pull-xl6 { right: 50%; } .row .col.push-xl6 { left: 50%; } .row .col.offset-xl7 { margin-left: 58.3333333333%; } .row .col.pull-xl7 { right: 58.3333333333%; } .row .col.push-xl7 { left: 58.3333333333%; } .row .col.offset-xl8 { margin-left: 66.6666666667%; } .row .col.pull-xl8 { right: 66.6666666667%; } .row .col.push-xl8 { left: 66.6666666667%; } .row .col.offset-xl9 { margin-left: 75%; } .row .col.pull-xl9 { right: 75%; } .row .col.push-xl9 { left: 75%; } .row .col.offset-xl10 { margin-left: 83.3333333333%; } .row .col.pull-xl10 { right: 83.3333333333%; } .row .col.push-xl10 { left: 83.3333333333%; } .row .col.offset-xl11 { margin-left: 91.6666666667%; } .row .col.pull-xl11 { right: 91.6666666667%; } .row .col.push-xl11 { left: 91.6666666667%; } .row .col.offset-xl12 { margin-left: 100%; } .row .col.pull-xl12 { right: 100%; } .row .col.push-xl12 { left: 100%; } } nav { width: 100%; height: 56px; background-color: #ee6e73; color: #fff; line-height: 56px; } nav.nav-extended { height: auto; } nav.nav-extended .nav-wrapper { height: auto; min-height: 56px; } nav.nav-extended .nav-content { position: relative; line-height: normal; } nav a { color: #fff; } nav i, nav [class^=mdi-], nav [class*=mdi-], nav i.material-icons { display: block; height: 56px; font-size: 24px; line-height: 56px; } nav .nav-wrapper { position: relative; height: 100%; } @media only screen and (min-width : 993px) { nav a.button-collapse { display: none; } } nav .button-collapse { z-index: 1; position: relative; height: 56px; margin: 0 18px; float: left; } nav .button-collapse i { height: 56px; line-height: 56px; } nav .brand-logo { display: inline-block; position: absolute; padding: 0; color: #fff; font-size: 33.6px; font-size: 2.1rem; white-space: nowrap; } nav .brand-logo.center { left: 50%; transform: translateX(-50%); } @media only screen and (max-width : 992px) { nav .brand-logo { left: 50%; transform: translateX(-50%); } nav .brand-logo.left, nav .brand-logo.right { padding: 0; transform: none; } nav .brand-logo.left { left: .5rem; } nav .brand-logo.right { right: .5rem; left: auto; } } nav .brand-logo.right { right: 8px; right: .5rem; padding: 0; } nav .brand-logo i, nav .brand-logo [class^=mdi-], nav .brand-logo [class*=mdi-], nav .brand-logo i.material-icons { margin-right: 15px; float: left; } nav .nav-title { display: inline-block; padding: 28px 0; font-size: 32px; } nav ul { margin: 0; } nav ul li { padding: 0; float: left; transition: background-color .3s; } nav ul li.active { background-color: rgba(0, 0, 0, .1); } nav ul a { display: block; padding: 0 15px; color: #fff; font-size: 16px; font-size: 1rem; cursor: pointer; transition: background-color .3s; } nav ul a.btn, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating { margin-top: -2px; margin-right: 15px; margin-left: 15px; } nav ul a.btn > .material-icons, nav ul a.btn-large > .material-icons, nav ul a.btn-flat > .material-icons, nav ul a.btn-floating > .material-icons { height: inherit; line-height: inherit; } nav ul a:hover { background-color: rgba(0, 0, 0, .1); } nav ul.left { float: left; } nav form { height: 100%; } nav .input-field { height: 100%; margin: 0; } nav .input-field input { height: 100%; padding-left: 32px; padding-left: 2rem; border: none; font-size: 19.2px; font-size: 1.2rem; } nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid { border: none; box-shadow: none; } nav .input-field label { top: 0; left: 0; } nav .input-field label i { color: rgba(255, 255, 255, .7); transition: color .3s; } nav .input-field label.active i { color: #fff; } .navbar-fixed { z-index: 997; position: relative; height: 56px; } .navbar-fixed nav { position: fixed; } @media only screen and (min-width : 601px) { nav.nav-extended .nav-wrapper { min-height: 64px; } nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { height: 64px; line-height: 64px; } .navbar-fixed { height: 64px; } } @font-face { src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.eot"); src: url("../fonts/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff"), url("../fonts/roboto/Roboto-Thin.ttf") format("truetype"); font-family: "Roboto"; font-weight: 200; } @font-face { src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.eot"); src: url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff"), url("../fonts/roboto/Roboto-Light.ttf") format("truetype"); font-family: "Roboto"; font-weight: 300; } @font-face { src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.eot"); src: url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../fonts/roboto/Roboto-Regular.ttf") format("truetype"); font-family: "Roboto"; font-weight: 400; } @font-face { src: url("../fonts/roboto/Roboto-Medium.eot"); src: url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff"), url("../fonts/roboto/Roboto-Medium.ttf") format("truetype"); font-family: "Roboto"; font-weight: 500; } @font-face { src: url("../fonts/roboto/Roboto-Bold.eot"); src: url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../fonts/roboto/Roboto-Bold.ttf") format("truetype"); font-family: "Roboto"; font-weight: 700; } a { text-decoration: none; } html { color: rgba(0, 0, 0, .87); font-family: "Roboto", sans-serif; font-weight: normal; line-height: 1.5; } @media only screen and (min-width: 0) { html { font-size: 14px; } } @media only screen and (min-width: 992px) { html { font-size: 14.5px; } } @media only screen and (min-width: 1200px) { html { font-size: 15px; } } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { margin: 33.6px 0 26.88px 0; margin: 2.1rem 0 1.68rem 0; font-size: 67.2px; font-size: 4.2rem; line-height: 110%; } h2 { margin: 28.48px 0 22.784px 0; margin: 1.78rem 0 1.424rem 0; font-size: 56.96px; font-size: 3.56rem; line-height: 110%; } h3 { margin: 23.36px 0 18.688px 0; margin: 1.46rem 0 1.168rem 0; font-size: 46.72px; font-size: 2.92rem; line-height: 110%; } h4 { margin: 18.24px 0 14.592px 0; margin: 1.14rem 0 .912rem 0; font-size: 36.48px; font-size: 2.28rem; line-height: 110%; } h5 { margin: 13.12px 0 10.496px 0; margin: .82rem 0 .656rem 0; font-size: 26.24px; font-size: 1.64rem; line-height: 110%; } h6 { margin: 8px 0 6.4px 0; margin: .5rem 0 .4rem 0; font-size: 16px; font-size: 1rem; line-height: 110%; } em { font-style: italic; } strong { font-weight: 500; } small { font-size: 75%; } .light, .page-footer .footer-copyright { font-weight: 300; } .thin { font-weight: 200; } .flow-text { font-weight: 300; } @media only screen and (min-width: 360px) { .flow-text { font-size: 1.2rem; } } @media only screen and (min-width: 390px) { .flow-text { font-size: 1.224rem; } } @media only screen and (min-width: 420px) { .flow-text { font-size: 1.248rem; } } @media only screen and (min-width: 450px) { .flow-text { font-size: 1.272rem; } } @media only screen and (min-width: 480px) { .flow-text { font-size: 1.296rem; } } @media only screen and (min-width: 510px) { .flow-text { font-size: 1.32rem; } } @media only screen and (min-width: 540px) { .flow-text { font-size: 1.344rem; } } @media only screen and (min-width: 570px) { .flow-text { font-size: 1.368rem; } } @media only screen and (min-width: 600px) { .flow-text { font-size: 1.392rem; } } @media only screen and (min-width: 630px) { .flow-text { font-size: 1.416rem; } } @media only screen and (min-width: 660px) { .flow-text { font-size: 1.44rem; } } @media only screen and (min-width: 690px) { .flow-text { font-size: 1.464rem; } } @media only screen and (min-width: 720px) { .flow-text { font-size: 1.488rem; } } @media only screen and (min-width: 750px) { .flow-text { font-size: 1.512rem; } } @media only screen and (min-width: 780px) { .flow-text { font-size: 1.536rem; } } @media only screen and (min-width: 810px) { .flow-text { font-size: 1.56rem; } } @media only screen and (min-width: 840px) { .flow-text { font-size: 1.584rem; } } @media only screen and (min-width: 870px) { .flow-text { font-size: 1.608rem; } } @media only screen and (min-width: 900px) { .flow-text { font-size: 1.632rem; } } @media only screen and (min-width: 930px) { .flow-text { font-size: 1.656rem; } } @media only screen and (min-width: 960px) { .flow-text { font-size: 1.68rem; } } @media only screen and (max-width: 360px) { .flow-text { font-size: 1.2rem; } } .scale-transition { transition: transform .3s cubic-bezier(.53, .01, .36, 1.63) !important; } .scale-transition.scale-out { transform: scale(0); transition: transform .2s !important; } .scale-transition.scale-in { transform: scale(1); } .card-panel { margin: 8px 0 16px 0; margin: .5rem 0 1rem 0; padding: 24px; border-radius: 2px; background-color: #fff; transition: box-shadow .25s; } .card { position: relative; margin: 8px 0 16px 0; margin: .5rem 0 1rem 0; border-radius: 2px; background-color: #fff; transition: box-shadow .25s; } .card .card-title { font-size: 24px; font-weight: 300; } .card .card-title.activator { cursor: pointer; } .card.small, .card.medium, .card.large { position: relative; } .card.small .card-image, .card.medium .card-image, .card.large .card-image { max-height: 60%; overflow: hidden; } .card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content { max-height: 40%; } .card.small .card-content, .card.medium .card-content, .card.large .card-content { max-height: 100%; overflow: hidden; } .card.small .card-action, .card.medium .card-action, .card.large .card-action { position: absolute; right: 0; bottom: 0; left: 0; } .card.small { height: 300px; } .card.medium { height: 400px; } .card.large { height: 500px; } .card.horizontal { display: -ms-flexbox; display: flex; } .card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image { height: 100%; max-height: none; overflow: visible; } .card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img { height: 100%; } .card.horizontal .card-image { max-width: 50%; } .card.horizontal .card-image img { width: auto; max-width: 100%; border-radius: 2px 0 0 2px; } .card.horizontal .card-stacked { display: -ms-flexbox; display: flex; position: relative; -ms-flex: 1; flex: 1; -ms-flex-direction: column; flex-direction: column; } .card.horizontal .card-stacked .card-content { -ms-flex-positive: 1; flex-grow: 1; } .card.sticky-action .card-action { z-index: 2; } .card.sticky-action .card-reveal { z-index: 1; padding-bottom: 64px; } .card .card-image { position: relative; } .card .card-image img { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 2px 2px 0 0; } .card .card-image .card-title { position: absolute; bottom: 0; left: 0; max-width: 100%; padding: 24px; color: #fff; } .card .card-content { padding: 24px; border-radius: 0 0 2px 2px; } .card .card-content p { margin: 0; color: inherit; } .card .card-content .card-title { display: block; margin-bottom: 8px; line-height: 32px; } .card .card-content .card-title i { line-height: 32px; } .card .card-action { position: relative; padding: 16px 24px; border-top: 1px solid rgba(160, 160, 160, .2); background-color: inherit; } .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) { margin-right: 24px; color: #ffab40; text-transform: uppercase; transition: color .3s ease; } .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover { color: #ffd8a6; } .card .card-reveal { display: none; z-index: 3; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; padding: 24px; overflow-y: auto; background-color: #fff; } .card .card-reveal .card-title { display: block; cursor: pointer; } #toast-container { display: block; z-index: 10000; position: fixed; } @media only screen and (max-width : 600px) { #toast-container { bottom: 0%; min-width: 100%; } } @media only screen and (min-width : 601px) and (max-width : 992px) { #toast-container { bottom: 7%; left: 5%; max-width: 90%; } } @media only screen and (min-width : 993px) { #toast-container { top: 10%; right: 7%; max-width: 86%; } } .toast { display: -ms-flexbox; display: flex; position: relative; top: 35px; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; width: auto; max-width: 100%; height: auto; min-height: 48px; margin-top: 10px; padding: 10px 25px; clear: both; border-radius: 2px; background-color: #323232; color: #fff; font-size: 17.6px; font-size: 1.1rem; font-weight: 300; line-height: 1.5em; word-break: break-all; } .toast .btn, .toast .btn-large, .toast .btn-flat { margin: 0; margin-left: 48px; margin-left: 3rem; } .toast.rounded { border-radius: 24px; } @media only screen and (max-width : 600px) { .toast { width: 100%; border-radius: 0; } } @media only screen and (min-width : 601px) and (max-width : 992px) { .toast { float: left; } } @media only screen and (min-width : 993px) { .toast { float: right; } } .tabs { position: relative; width: 100%; height: 48px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; background-color: #fff; white-space: nowrap; } .tabs.tabs-transparent { background-color: transparent; } .tabs.tabs-transparent .tab a, .tabs.tabs-transparent .tab.disabled a, .tabs.tabs-transparent .tab.disabled a:hover { color: rgba(255, 255, 255, .7); } .tabs.tabs-transparent .tab a:hover, .tabs.tabs-transparent .tab a.active { color: #fff; } .tabs.tabs-transparent .indicator { background-color: #fff; } .tabs.tabs-fixed-width { display: -ms-flexbox; display: flex; } .tabs.tabs-fixed-width .tab { -ms-flex-positive: 1; flex-grow: 1; } .tabs .tab { display: inline-block; height: 48px; margin: 0; padding: 0; line-height: 48px; text-align: center; text-transform: uppercase; } .tabs .tab a { display: block; width: 100%; height: 100%; padding: 0 24px; overflow: hidden; color: rgba(238, 110, 115, .7); font-size: 14px; text-overflow: ellipsis; transition: color .28s ease; } .tabs .tab a:hover, .tabs .tab a.active { background-color: transparent; color: #ee6e73; } .tabs .tab.disabled a, .tabs .tab.disabled a:hover { color: rgba(238, 110, 115, .7); cursor: default; } .tabs .indicator { position: absolute; bottom: 0; height: 2px; background-color: #f6b2b5; will-change: left, right; } @media only screen and (max-width : 992px) { .tabs { display: -ms-flexbox; display: flex; } .tabs .tab { -ms-flex-positive: 1; flex-grow: 1; } .tabs .tab a { padding: 0 12px; } } .material-tooltip { visibility: hidden; z-index: 2000; position: absolute; top: 0; left: 0; max-width: calc(100% - 4px); min-height: 36px; padding: 10px 8px; overflow: hidden; border-radius: 2px; background-color: transparent; color: #fff; font-size: 16px; font-size: 1rem; line-height: 120%; text-align: center; opacity: 0; pointer-events: none; } .backdrop { visibility: hidden; z-index: -1; position: absolute; width: 14px; height: 7px; transform-origin: 50% 0%; border-radius: 0 0 50% 50%; background-color: #323232; opacity: 0; } .btn, .btn-large, .btn-flat { -webkit-tap-highlight-color: transparent; display: inline-block; height: 36px; padding: 0 32px; padding: 0 2rem; border: none; border-radius: 2px; line-height: 36px; text-transform: uppercase; vertical-align: middle; } .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-flat.disabled, .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-flat:disabled, .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-flat[disabled] { background-color: #dfdfdf !important; box-shadow: none; color: #9f9f9f !important; cursor: default; pointer-events: none; } .btn.disabled:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn-flat.disabled:hover, .btn:disabled:hover, .btn-floating:disabled:hover, .btn-large:disabled:hover, .btn-flat:disabled:hover, .btn[disabled]:hover, .btn-floating[disabled]:hover, .btn-large[disabled]:hover, .btn-flat[disabled]:hover { background-color: #dfdfdf !important; color: #9f9f9f !important; } .btn, .btn-floating, .btn-large, .btn-flat { outline: 0; } .btn i, .btn-floating i, .btn-large i, .btn-flat i { font-size: 20.8px; font-size: 1.3rem; line-height: inherit; } .btn:focus, .btn-large:focus, .btn-floating:focus { background-color: #1d7d74; } .btn, .btn-large { background-color: #26a69a; color: #fff; letter-spacing: .5px; text-align: center; text-decoration: none; cursor: pointer; transition: .2s ease-out; } .btn:hover, .btn-large:hover { background-color: #2bbbad; } .btn-floating { display: inline-block; z-index: 1; position: relative; width: 40px; height: 40px; padding: 0; overflow: hidden; border-radius: 50%; background-color: #26a69a; color: #fff; line-height: 40px; vertical-align: middle; cursor: pointer; transition: .3s; } .btn-floating:hover { background-color: #26a69a; } .btn-floating:before { border-radius: 0; } .btn-floating.btn-large { width: 56px; height: 56px; } .btn-floating.btn-large.halfway-fab { bottom: -28px; } .btn-floating.btn-large i { line-height: 56px; } .btn-floating.halfway-fab { position: absolute; right: 24px; bottom: -20px; } .btn-floating.halfway-fab.left { right: auto; left: 24px; } .btn-floating i { display: inline-block; width: inherit; color: #fff; font-size: 25.6px; font-size: 1.6rem; line-height: 40px; text-align: center; } button.btn-floating { border: none; } .fixed-action-btn { z-index: 998; position: fixed; right: 23px; bottom: 23px; margin-bottom: 0; padding-top: 15px; } .fixed-action-btn.active ul { visibility: visible; } .fixed-action-btn.horizontal { padding: 0 0 0 15px; } .fixed-action-btn.horizontal ul { top: 50%; right: 64px; left: auto; width: 500px; height: 100%; transform: translateY(-50%); text-align: right; /*width 100% only goes to width of button container */ } .fixed-action-btn.horizontal ul li { display: inline-block; margin: 15px 15px 0 0; } .fixed-action-btn.toolbar { height: 56px; padding: 0; } .fixed-action-btn.toolbar.active > a i { opacity: 0; } .fixed-action-btn.toolbar ul { display: -ms-flexbox; display: flex; top: 0; bottom: 0; } .fixed-action-btn.toolbar ul li { display: inline-block; -ms-flex: 1; flex: 1; height: 100%; margin: 0; transition: none; } .fixed-action-btn.toolbar ul li a { display: block; z-index: 1; position: relative; width: 100%; height: 100%; overflow: hidden; background-color: transparent; box-shadow: none; color: #fff; line-height: 56px; } .fixed-action-btn.toolbar ul li a i { line-height: inherit; } .fixed-action-btn ul { visibility: hidden; position: absolute; right: 0; bottom: 64px; left: 0; margin: 0; text-align: center; } .fixed-action-btn ul li { margin-bottom: 15px; } .fixed-action-btn ul a.btn-floating { opacity: 0; } .fixed-action-btn .fab-backdrop { z-index: -1; position: absolute; top: 0; left: 0; width: 40px; height: 40px; transform: scale(0); border-radius: 50%; background-color: #26a69a; } .btn-flat { background-color: transparent; box-shadow: none; color: #343434; cursor: pointer; transition: background-color .2s; } .btn-flat:focus, .btn-flat:active { background-color: transparent; } .btn-flat:focus, .btn-flat:hover { background-color: rgba(0, 0, 0, .1); box-shadow: none; } .btn-flat:active { background-color: rgba(0, 0, 0, .2); } .btn-flat.disabled { background-color: transparent !important; color: #b3b3b3 !important; cursor: default; } .btn-large { height: 54px; line-height: 54px; } .btn-large i { font-size: 25.6px; font-size: 1.6rem; } .btn-block { display: block; } .dropdown-content { display: none; z-index: 999; position: absolute; min-width: 100px; max-height: 650px; margin: 0; overflow-y: auto; background-color: #fff; opacity: 0; will-change: width, height; } .dropdown-content li { width: 100%; min-height: 50px; clear: both; color: rgba(0, 0, 0, .87); line-height: 24px; line-height: 1.5rem; text-align: left; text-transform: none; cursor: pointer; } .dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected { background-color: #eee; } .dropdown-content li.active.selected { background-color: #e1e1e1; } .dropdown-content li.divider { height: 1px; min-height: 0; } .dropdown-content li > a, .dropdown-content li > span { display: block; padding: 14px 16px; color: #26a69a; font-size: 16px; line-height: 22px; } .dropdown-content li > span > label { top: 1px; left: 0; height: 18px; } .dropdown-content li > a > i { width: 24px; height: inherit; margin: 0 24px 0 0; float: left; line-height: inherit; } .input-field.col .dropdown-content [type=checkbox] + label { top: 1px; left: 0; height: 18px; } /*! * Waves v0.6.0 * http://fian.my.id/Waves * * Copyright 2014 Alfiana E. Sibuea and other contributors * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */ .waves-effect { -webkit-tap-highlight-color: transparent; display: inline-block; z-index: 1; position: relative; overflow: hidden; vertical-align: middle; cursor: pointer; transition: .3s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .waves-effect .waves-ripple { position: absolute; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; transform: scale(0); border-radius: 50%; background: rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: all .7s ease-out; transition-property: transform, opacity; } .waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, .45); } .waves-effect.waves-red .waves-ripple { background-color: rgba(244, 67, 54, .7); } .waves-effect.waves-yellow .waves-ripple { background-color: rgba(255, 235, 59, .7); } .waves-effect.waves-orange .waves-ripple { background-color: rgba(255, 152, 0, .7); } .waves-effect.waves-purple .waves-ripple { background-color: rgba(156, 39, 176, .7); } .waves-effect.waves-green .waves-ripple { background-color: rgba(76, 175, 80, .7); } .waves-effect.waves-teal .waves-ripple { background-color: rgba(0, 150, 136, .7); } .waves-effect input[type=button], .waves-effect input[type=reset], .waves-effect input[type=submit] { border: 0; background: none; font-size: inherit; font-style: normal; text-transform: inherit; } .waves-effect img { z-index: -1; position: relative; } .waves-notransition { transition: none !important; } .waves-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); transform: translateZ(0); } .waves-input-wrapper { border-radius: .2em; vertical-align: bottom; } .waves-input-wrapper .waves-button-input { z-index: 1; position: relative; top: 0; left: 0; } .waves-circle { -webkit-mask-image: none; width: 2.5em; height: 2.5em; border-radius: 50%; line-height: 2.5em; text-align: center; } .waves-block { display: block; } /* Firefox Bug: link not triggered */ .waves-effect .waves-ripple { z-index: -1; } .modal { display: none; position: fixed; right: 0; left: 0; width: 55%; max-height: 70%; margin: auto; padding: 0; overflow-y: auto; border-radius: 2px; background-color: #fafafa; will-change: top, opacity; } @media only screen and (max-width : 992px) { .modal { width: 80%; } } .modal h1, .modal h2, .modal h3, .modal h4 { margin-top: 0; } .modal .modal-content { padding: 24px; } .modal .modal-close { cursor: pointer; } .modal .modal-footer { width: 100%; height: 56px; padding: 4px 6px; border-radius: 0 0 2px 2px; background-color: #fafafa; } .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat { margin: 6px 0; float: right; } .modal-overlay { display: none; z-index: 999; position: fixed; top: -100px; right: 0; bottom: 0; left: 0; width: 100%; height: 125%; background: #000; will-change: opacity; } .modal.modal-fixed-footer { height: 70%; padding: 0; } .modal.modal-fixed-footer .modal-content { position: absolute; width: 100%; height: calc(100% - 56px); max-height: 100%; overflow-y: auto; } .modal.modal-fixed-footer .modal-footer { position: absolute; bottom: 0; border-top: 1px solid rgba(0, 0, 0, .1); } .modal.bottom-sheet { top: auto; bottom: -100%; width: 100%; max-height: 45%; margin: 0; border-radius: 0; will-change: bottom, opacity; } .collapsible { margin: 8px 0 16px 0; margin: .5rem 0 1rem 0; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } .collapsible-header { display: block; min-height: 48px; min-height: 3rem; padding: 0 16px; padding: 0 1rem; border-bottom: 1px solid #ddd; background-color: #fff; line-height: 48px; line-height: 3rem; cursor: pointer; } .collapsible-header i { display: block; width: 32px; width: 2rem; margin-right: 16px; margin-right: 1rem; float: left; font-size: 25.6px; font-size: 1.6rem; line-height: 48px; line-height: 3rem; text-align: center; } .collapsible-body { box-sizing: border-box; display: none; padding: 32px; padding: 2rem; border-bottom: 1px solid #ddd; } .side-nav .collapsible, .side-nav.fixed .collapsible { border: none; box-shadow: none; } .side-nav .collapsible li, .side-nav.fixed .collapsible li { padding: 0; } .side-nav .collapsible-header, .side-nav.fixed .collapsible-header { height: inherit; padding: 0 16px; border: none; background-color: transparent; line-height: inherit; } .side-nav .collapsible-header:hover, .side-nav.fixed .collapsible-header:hover { background-color: rgba(0, 0, 0, .05); } .side-nav .collapsible-header i, .side-nav.fixed .collapsible-header i { line-height: inherit; } .side-nav .collapsible-body, .side-nav.fixed .collapsible-body { border: 0; background-color: #fff; } .side-nav .collapsible-body li a, .side-nav.fixed .collapsible-body li a { padding: 0 23.5px 0 31px; } .collapsible.popout { border: none; box-shadow: none; } .collapsible.popout > li { margin: 0 24px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); transition: margin .35s cubic-bezier(.25, .46, .45, .94); } .collapsible.popout > li.active { margin: 16px 0; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15); } .chip { display: inline-block; height: 32px; margin-right: 5px; margin-bottom: 5px; padding: 0 12px; border-radius: 16px; background-color: #e4e4e4; color: rgba(0, 0, 0, .6); font-size: 13px; font-weight: 500; line-height: 32px; } .chip img { width: 32px; height: 32px; margin: 0 8px 0 -12px; float: left; border-radius: 50%; } .chip .close { padding-left: 8px; float: right; font-size: 16px; line-height: 32px; cursor: pointer; } .chips { min-height: 45px; margin: 0 0 20px 0; border: none; border-bottom: 1px solid #9e9e9e; outline: none; box-shadow: none; transition: all .3s; } .chips.focus { border-bottom: 1px solid #26a69a; box-shadow: 0 1px 0 0 #26a69a; } .chips:hover { cursor: text; } .chips .chip.selected { background-color: #26a69a; color: #fff; } .chips .input { display: inline-block; width: 120px !important; height: 48px; height: 3rem; margin: 0; padding: 0 !important; border: 0; outline: 0; background: none; color: rgba(0, 0, 0, .6); font-size: 16px; font-size: 1rem; line-height: 32px; } .chips .input:focus { border: 0 !important; box-shadow: none !important; } .chips .autocomplete-content { margin-top: 0; } .prefix ~ .chips { width: 92%; width: calc(100% - 3rem); margin-left: 48px; margin-left: 3rem; } .chips:empty ~ label { transform: translateY(-140%); font-size: 12.8px; font-size: .8rem; } .materialboxed { -webkit-backface-visibility: hidden; display: block; position: relative; cursor: zoom-in; transition: opacity .4s; } .materialboxed:hover:not(.active) { opacity: .8; } .materialboxed.active { cursor: zoom-out; } #materialbox-overlay { z-index: 1000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #292929; will-change: opacity; } .materialbox-caption { -webkit-font-smoothing: antialiased; display: none; z-index: 1000; position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; padding: 0% 15%; color: #fff; line-height: 50px; text-align: center; } select:focus { outline: 1px solid #c9f3ef; } button:focus { outline: none; background-color: #2ab7a9; } label { color: #9e9e9e; font-size: 12.8px; font-size: .8rem; } /* Text Inputs + Textarea ========================================================================== */ /* Style Placeholders */ ::-webkit-input-placeholder { color: #d1d1d1; } :-moz-placeholder { /* Firefox 18- */ color: #d1d1d1; } ::-moz-placeholder { /* Firefox 19+ */ color: #d1d1d1; } :-ms-input-placeholder { color: #d1d1d1; } /* Text inputs */ input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { box-sizing: content-box; width: 100%; height: 48px; height: 3rem; margin: 0 0 20px 0; padding: 0; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; outline: none; background-color: transparent; box-shadow: none; font-size: 16px; font-size: 1rem; transition: all .3s; } input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime]:disabled, input[type=datetime][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] { border-bottom: 1px dotted rgba(0, 0, 0, .26); color: rgba(0, 0, 0, .26); } input:not([type]):disabled + label, input:not([type])[readonly=readonly] + label, input[type=text]:disabled + label, input[type=text][readonly=readonly] + label, input[type=password]:disabled + label, input[type=password][readonly=readonly] + label, input[type=email]:disabled + label, input[type=email][readonly=readonly] + label, input[type=url]:disabled + label, input[type=url][readonly=readonly] + label, input[type=time]:disabled + label, input[type=time][readonly=readonly] + label, input[type=date]:disabled + label, input[type=date][readonly=readonly] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly=readonly] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly=readonly] + label, input[type=tel]:disabled + label, input[type=tel][readonly=readonly] + label, input[type=number]:disabled + label, input[type=number][readonly=readonly] + label, input[type=search]:disabled + label, input[type=search][readonly=readonly] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly=readonly] + label { color: rgba(0, 0, 0, .26); } input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #26a69a; box-shadow: 0 1px 0 0 #26a69a; } input:not([type]):focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label { color: #26a69a; } input:not([type]).valid, input:not([type]):focus.valid, input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime].valid, input[type=datetime]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid { border-bottom: 1px solid #4caf50; box-shadow: 0 1px 0 0 #4caf50; } input:not([type]).valid + label:after, input:not([type]):focus.valid + label:after, input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime].valid + label:after, input[type=datetime]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after { color: #4caf50; content: attr(data-success); opacity: 1; } input:not([type]).invalid, input:not([type]):focus.invalid, input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime].invalid, input[type=datetime]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid { border-bottom: 1px solid #f44336; box-shadow: 0 1px 0 0 #f44336; } input:not([type]).invalid + label:after, input:not([type]):focus.invalid + label:after, input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime].invalid + label:after, input[type=datetime]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after { color: #f44336; content: attr(data-error); opacity: 1; } input:not([type]).validate + label, input[type=text].validate + label, input[type=password].validate + label, input[type=email].validate + label, input[type=url].validate + label, input[type=time].validate + label, input[type=date].validate + label, input[type=datetime].validate + label, input[type=datetime-local].validate + label, input[type=tel].validate + label, input[type=number].validate + label, input[type=search].validate + label, textarea.materialize-textarea.validate + label { width: 100%; pointer-events: none; } input:not([type]) + label:after, input[type=text] + label:after, input[type=password] + label:after, input[type=email] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after, textarea.materialize-textarea + label:after { display: block; position: absolute; top: 60px; content: ""; opacity: 0; transition: .2s opacity ease-out, .2s color ease-out; } .input-field { position: relative; margin-top: 16px; margin-top: 1rem; } .input-field.inline { display: inline-block; margin-left: 5px; vertical-align: middle; } .input-field.inline input, .input-field.inline .select-dropdown { margin-bottom: 16px; margin-bottom: 1rem; } .input-field.col label { left: 12px; left: .75rem; } .input-field.col .prefix ~ label, .input-field.col .prefix ~ .validate ~ label { width: calc(100% - 3rem - 1.5rem); } .input-field label { position: absolute; top: 12.8px; top: .8rem; left: 0; color: #9e9e9e; font-size: 16px; font-size: 1rem; cursor: text; transition: .2s ease-out; } .input-field label:not(.label-icon).active { transform: translateY(-140%); font-size: 12.8px; font-size: .8rem; } .input-field .prefix { position: absolute; width: 48px; width: 3rem; font-size: 32px; font-size: 2rem; transition: color .2s; } .input-field .prefix.active { color: #26a69a; } .input-field .prefix ~ input, .input-field .prefix ~ textarea, .input-field .prefix ~ label, .input-field .prefix ~ .validate ~ label, .input-field .prefix ~ .autocomplete-content { width: 92%; width: calc(100% - 3rem); margin-left: 48px; margin-left: 3rem; } .input-field .prefix ~ label { margin-left: 48px; margin-left: 3rem; } @media only screen and (max-width : 992px) { .input-field .prefix ~ input { width: 86%; width: calc(100% - 3rem); } } @media only screen and (max-width : 600px) { .input-field .prefix ~ input { width: 80%; width: calc(100% - 3rem); } } /* Search Field */ .input-field input[type=search] { display: block; width: calc(100% - 4rem); padding-left: 64px; padding-left: 4rem; line-height: inherit; } .input-field input[type=search]:focus { border: 0; background-color: #fff; box-shadow: none; color: #444; } .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close, .input-field input[type=search]:focus ~ .material-icons { color: #444; } .input-field input[type=search] + label { left: 16px; left: 1rem; } .input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons { position: absolute; top: 0; right: 16px; right: 1rem; color: transparent; font-size: 32px; font-size: 2rem; cursor: pointer; transition: .3s color; } /* Textarea */ textarea { width: 100%; height: 48px; height: 3rem; background-color: transparent; } textarea.materialize-textarea { min-height: 48px; min-height: 3rem; /* prevents scroll bar flash */ padding: 12.8px 0 25.6px 0; padding: .8rem 0 1.6rem 0; overflow-y: hidden; /* prevents text jump on Enter keypress */ resize: none; } .hiddendiv { word-wrap: break-word; display: none; /* future version of deprecated 'word-wrap' */ padding-top: 19.2px; padding-top: 1.2rem; white-space: pre-wrap; overflow-wrap: break-word; /* prevents text jump on Enter keypress */ } /* Autocomplete */ .autocomplete-content { display: block; position: static; margin-top: -20px; opacity: 1; } .autocomplete-content li .highlight { color: #444; } .autocomplete-content li img { width: 40px; height: 40px; margin: 5px 15px; } /* Radio Buttons ========================================================================== */ [type=radio]:not(:checked), [type=radio]:checked { position: absolute; left: -9999px; opacity: 0; } [type=radio]:not(:checked) + label, [type=radio]:checked + label { -khtml-user-select: none; display: inline-block; position: relative; height: 25px; padding-left: 35px; font-size: 16px; font-size: 1rem; line-height: 25px; cursor: pointer; transition: .28s ease; /* webkit (konqueror) browsers */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [type=radio] + label:before, [type=radio] + label:after { z-index: 0; position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: 4px; content: ""; transition: .28s ease; } /* Unchecked styles */ [type=radio]:not(:checked) + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:checked + label:before, [type=radio]:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio].with-gap:checked + label:after { border-radius: 50%; } [type=radio]:not(:checked) + label:before, [type=radio]:not(:checked) + label:after { border: 2px solid #5a5a5a; } [type=radio]:not(:checked) + label:after { transform: scale(0); } /* Checked styles */ [type=radio]:checked + label:before { border: 2px solid transparent; } [type=radio]:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio].with-gap:checked + label:after { border: 2px solid #26a69a; } [type=radio]:checked + label:after, [type=radio].with-gap:checked + label:after { background-color: #26a69a; } [type=radio]:checked + label:after { transform: scale(1.02); } /* Radio With gap */ [type=radio].with-gap:checked + label:after { transform: scale(.5); } /* Focused styles */ [type=radio].tabbed:focus + label:before { box-shadow: 0 0 0 10px rgba(0, 0, 0, .1); } /* Disabled Radio With gap */ [type=radio].with-gap:disabled:checked + label:before { border: 2px solid rgba(0, 0, 0, .26); } [type=radio].with-gap:disabled:checked + label:after { border: none; background-color: rgba(0, 0, 0, .26); } /* Disabled style */ [type=radio]:disabled:not(:checked) + label:before, [type=radio]:disabled:checked + label:before { border-color: rgba(0, 0, 0, .26); background-color: transparent; } [type=radio]:disabled + label { color: rgba(0, 0, 0, .26); } [type=radio]:disabled:not(:checked) + label:before { border-color: rgba(0, 0, 0, .26); } [type=radio]:disabled:checked + label:after { border-color: #bdbdbd; background-color: rgba(0, 0, 0, .26); } /* Checkboxes ========================================================================== */ /* CUSTOM CSS CHECKBOXES */ form p { margin-bottom: 10px; text-align: left; } form p:last-child { margin-bottom: 0; } /* Remove default checkbox */ [type=checkbox]:not(:checked), [type=checkbox]:checked { position: absolute; left: -9999px; opacity: 0; } [type=checkbox] { /* checkbox aspect */ } [type=checkbox] + label { -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; display: inline-block; position: relative; height: 25px; padding-left: 35px; font-size: 16px; font-size: 1rem; line-height: 25px; cursor: pointer; /* IE10+ */ } [type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after { z-index: 0; position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin-top: 2px; border: 2px solid #5a5a5a; border-radius: 1px; content: ""; transition: .2s; } [type=checkbox]:not(.filled-in) + label:after { transform: scale(0); border: 0; } [type=checkbox]:not(:checked):disabled + label:before { border: none; background-color: rgba(0, 0, 0, .26); } [type=checkbox].tabbed:focus + label:after { transform: scale(1); border: 0; border-radius: 50%; background-color: rgba(0, 0, 0, .1); box-shadow: 0 0 0 10px rgba(0, 0, 0, .1); } [type=checkbox]:checked + label:before { top: -4px; left: -5px; width: 12px; height: 22px; transform: rotate(40deg); transform-origin: 100% 100%; border-top: 2px solid transparent; border-right: 2px solid #26a69a; border-bottom: 2px solid #26a69a; border-left: 2px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } [type=checkbox]:checked:disabled + label:before { border-right: 2px solid rgba(0, 0, 0, .26); border-bottom: 2px solid rgba(0, 0, 0, .26); } /* Indeterminate checkbox */ [type=checkbox]:indeterminate + label:before { top: -11px; left: -12px; width: 10px; height: 22px; transform: rotate(90deg); transform-origin: 100% 100%; border-top: none; border-right: 2px solid #26a69a; border-bottom: none; border-left: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } [type=checkbox]:indeterminate:disabled + label:before { border-right: 2px solid rgba(0, 0, 0, .26); background-color: transparent; } [type=checkbox].filled-in + label:after { border-radius: 2px; } [type=checkbox].filled-in + label:before, [type=checkbox].filled-in + label:after { z-index: 1; position: absolute; left: 0; content: ""; /* .1s delay is for check animation */ transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s; } [type=checkbox].filled-in:not(:checked) + label:before { -webkit-transform: rotateZ(37deg); -webkit-transform-origin: 20% 40%; top: 10px; left: 6px; width: 0; height: 0; transform: rotateZ(37deg); transform-origin: 100% 100%; border: 3px solid transparent; } [type=checkbox].filled-in:not(:checked) + label:after { z-index: 0; top: 0px; width: 20px; height: 20px; border: 2px solid #5a5a5a; background-color: transparent; } [type=checkbox].filled-in:checked + label:before { -webkit-transform: rotateZ(37deg); -webkit-transform-origin: 100% 100%; top: 0; left: 1px; width: 8px; height: 13px; transform: rotateZ(37deg); transform-origin: 100% 100%; border-top: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; border-left: 2px solid transparent; } [type=checkbox].filled-in:checked + label:after { z-index: 0; top: 0; width: 20px; height: 20px; border: 2px solid #26a69a; background-color: #26a69a; } [type=checkbox].filled-in.tabbed:focus + label:after { border-radius: 2px; border-color: #5a5a5a; background-color: rgba(0, 0, 0, .1); } [type=checkbox].filled-in.tabbed:checked:focus + label:after { border-radius: 2px; border-color: #26a69a; background-color: #26a69a; } [type=checkbox].filled-in:disabled:not(:checked) + label:before { border: 2px solid transparent; background-color: transparent; } [type=checkbox].filled-in:disabled:not(:checked) + label:after { border-color: transparent; background-color: #bdbdbd; } [type=checkbox].filled-in:disabled:checked + label:before { background-color: transparent; } [type=checkbox].filled-in:disabled:checked + label:after { border-color: #bdbdbd; background-color: #bdbdbd; } /* Switch ========================================================================== */ .switch, .switch * { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; } .switch label { cursor: pointer; } .switch label input[type=checkbox] { width: 0; height: 0; opacity: 0; } .switch label input[type=checkbox]:checked + .lever { background-color: #84c7c1; } .switch label input[type=checkbox]:checked + .lever:after { left: 24px; background-color: #26a69a; } .switch label .lever { display: inline-block; position: relative; width: 40px; height: 15px; margin: 0 16px; margin-right: 10px; border-radius: 15px; background-color: #818181; vertical-align: middle; content: ""; transition: background .3s ease; } .switch label .lever:after { display: inline-block; position: absolute; top: -3px; left: -5px; width: 21px; height: 21px; border-radius: 21px; background-color: #f1f1f1; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4); content: ""; transition: left .3s ease, background .3s ease, box-shadow .1s ease; } input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after, input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(38, 166, 154, .1); } input[type=checkbox]:not(:disabled) ~ .lever:active:after, input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever:after { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(0, 0, 0, .08); } .switch input[type=checkbox][disabled] + .lever { cursor: default; } .switch label input[type=checkbox][disabled] + .lever:after, .switch label input[type=checkbox][disabled]:checked + .lever:after { background-color: #bdbdbd; } /* Select Field ========================================================================== */ select { display: none; } select.browser-default { display: block; } select { width: 100%; height: 48px; height: 3rem; padding: 5px; border: 1px solid #f2f2f2; border-radius: 2px; background-color: rgba(255, 255, 255, .9); } .select-label { position: absolute; } .select-wrapper { position: relative; } .select-wrapper input.select-dropdown { display: block; position: relative; width: 100%; height: 48px; height: 3rem; margin: 0 0 20px 0; padding: 0; border: none; border-bottom: 1px solid #9e9e9e; outline: none; background-color: transparent; font-size: 16px; font-size: 1rem; line-height: 48px; line-height: 3rem; cursor: pointer; } .select-wrapper span.caret { position: absolute; top: 0; right: 0; bottom: 0; height: 10px; margin: auto 0; color: initial; font-size: 10px; line-height: 10px; } .select-wrapper span.caret.disabled { color: rgba(0, 0, 0, .26); } .select-wrapper + label { position: absolute; top: -14px; font-size: 12.8px; font-size: .8rem; } select:disabled { color: rgba(0, 0, 0, .3); } .select-wrapper input.select-dropdown:disabled { -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -ms-user-select: none; /* IE10+ */ border-bottom: 1px solid rgba(0, 0, 0, .3); color: rgba(0, 0, 0, .3); cursor: default; } .select-wrapper i { color: rgba(0, 0, 0, .3); } .select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup { background-color: transparent; color: rgba(0, 0, 0, .3); } .prefix ~ .select-wrapper { width: 92%; width: calc(100% - 3rem); margin-left: 48px; margin-left: 3rem; } .prefix ~ label { margin-left: 48px; margin-left: 3rem; } .select-dropdown li img { width: 40px; height: 40px; margin: 5px 15px; float: right; } .select-dropdown li.optgroup { border-top: 1px solid #eee; } .select-dropdown li.optgroup.selected > span { color: rgba(0, 0, 0, .7); } .select-dropdown li.optgroup > span { color: rgba(0, 0, 0, .4); } .select-dropdown li.optgroup ~ li.optgroup-option { padding-left: 16px; padding-left: 1rem; } /* File Input ========================================================================== */ .file-field { position: relative; } .file-field .file-path-wrapper { padding-left: 10px; overflow: hidden; } .file-field input.file-path { width: 100%; } .file-field .btn, .file-field .btn-large { height: 48px; height: 3rem; float: left; line-height: 48px; line-height: 3rem; } .file-field span { cursor: pointer; } .file-field input[type=file] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; font-size: 20px; cursor: pointer; filter: alpha(opacity=0); opacity: 0; } /* Range ========================================================================== */ .range-field { position: relative; } input[type=range], input[type=range] + .thumb { cursor: pointer; } input[type=range] { position: relative; width: 100%; margin: 15px 0; padding: 0; border: none; outline: none; background-color: transparent; } input[type=range]:focus { outline: none; } input[type=range] + .thumb { position: absolute; top: 10px; width: 0; height: 0; margin-left: -6px; transform: rotate(-45deg); transform-origin: 50% 50%; border: none; border-radius: 50%; background-color: #26a69a; } input[type=range] + .thumb .value { display: block; width: 30px; transform: rotate(45deg); color: #26a69a; font-size: 0; text-align: center; } input[type=range] + .thumb.active { border-radius: 50% 50% 50% 0; } input[type=range] + .thumb.active .value { margin-top: 8px; margin-left: -1px; color: #fff; font-size: 10px; } input[type=range] { -webkit-appearance: none; } input[type=range]::-webkit-slider-runnable-track { height: 3px; border: none; background: #c2c0c2; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin: -5px 0 0 0; transform-origin: 50% 50%; border: none; border-radius: 50%; background-color: #26a69a; transition: .3s; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; } input[type=range] { /* fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/ } input[type=range]::-moz-range-track { height: 3px; border: none; background: #ddd; } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; margin-top: -5px; border: none; border-radius: 50%; background: #26a69a; } input[type=range]:-moz-focusring { outline: 1px solid #fff; outline-offset: -1px; } input[type=range]:focus::-moz-range-track { background: #ccc; } input[type=range]::-ms-track { height: 3px; border-width: 6px 0; border-color: transparent; background: transparent; /*remove default tick marks*/ color: transparent; } input[type=range]::-ms-fill-lower { background: #777; } input[type=range]::-ms-fill-upper { background: #ddd; } input[type=range]::-ms-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #26a69a; } input[type=range]:focus::-ms-fill-lower { background: #888; } input[type=range]:focus::-ms-fill-upper { background: #ccc; } /*************** Nav List ***************/ .table-of-contents.fixed { position: fixed; } .table-of-contents li { padding: 2px 0; } .table-of-contents a { display: inline-block; display: inline-block; height: 24px; height: 1.5rem; padding-left: 20px; color: #757575; font-weight: 300; letter-spacing: .4; line-height: 24px; line-height: 1.5rem; } .table-of-contents a:hover { padding-left: 19px; border-left: 1px solid #ee6e73; color: #a8a8a8; } .table-of-contents a.active { padding-left: 18px; border-left: 2px solid #ee6e73; font-weight: 500; } .side-nav { z-index: 999; position: fixed; top: 0; left: 0; width: 300px; height: 100%; height: calc(100% + 60px); height: -moz-calc(100%); margin: 0; padding-bottom: 60px; overflow-y: auto; transform: translateX(-100%); transform: translateX(-105%); -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #fff; will-change: transform; } .side-nav.right-aligned { right: 0; left: auto; transform: translateX(105%); transform: translateX(100%); } .side-nav .collapsible { margin: 0; } .side-nav li { float: none; line-height: 48px; } .side-nav li.active { background-color: rgba(0, 0, 0, .05); } .side-nav li > a { display: block; height: 48px; padding: 0 32px; color: rgba(0, 0, 0, .87); font-size: 14px; font-weight: 500; line-height: 48px; } .side-nav li > a:hover { background-color: rgba(0, 0, 0, .05); } .side-nav li > a.btn, .side-nav li > a.btn-large, .side-nav li > a.btn-flat, .side-nav li > a.btn-floating { margin: 10px 15px; } .side-nav li > a.btn, .side-nav li > a.btn-large, .side-nav li > a.btn-floating { color: #fff; } .side-nav li > a.btn-flat { color: #343434; } .side-nav li > a.btn:hover, .side-nav li > a.btn-large:hover { background-color: #2bbbad; } .side-nav li > a.btn-floating:hover { background-color: #26a69a; } .side-nav li > a > i, .side-nav li > a > [class^=mdi-], .side-nav li > a li > a > [class*=mdi-], .side-nav li > a > i.material-icons { width: 24px; height: 48px; margin: 0 32px 0 0; float: left; color: rgba(0, 0, 0, .54); line-height: 48px; } .side-nav .divider { margin: 8px 0 0 0; } .side-nav .subheader { color: rgba(0, 0, 0, .54); font-size: 14px; font-weight: 500; line-height: 48px; cursor: initial; pointer-events: none; } .side-nav .subheader:hover { background-color: transparent; } .side-nav .userView { position: relative; margin-bottom: 8px; padding: 32px 32px 0; } .side-nav .userView > a { height: auto; padding: 0; } .side-nav .userView > a:hover { background-color: transparent; } .side-nav .userView .background { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .side-nav .userView .circle, .side-nav .userView .name, .side-nav .userView .email { display: block; } .side-nav .userView .circle { width: 64px; height: 64px; } .side-nav .userView .name, .side-nav .userView .email { font-size: 14px; line-height: 24px; } .side-nav .userView .name { margin-top: 16px; font-weight: 500; } .side-nav .userView .email { padding-bottom: 16px; font-weight: 400; } .drag-target { z-index: 998; position: fixed; top: 0; width: 10px; height: 100%; } .side-nav.fixed { position: fixed; left: 0; transform: translateX(0); } .side-nav.fixed.right-aligned { right: 0; left: auto; } @media only screen and (max-width : 992px) { .side-nav.fixed { transform: translateX(-105%); } .side-nav.fixed.right-aligned { transform: translateX(105%); } .side-nav a { padding: 0 16px; } .side-nav .userView { padding: 16px 16px 0; } } .side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active { background-color: #ee6e73; } .side-nav .collapsible-body > ul:not(.collapsible) > li.active a, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active a { color: #fff; } .side-nav .collapsible-body { padding: 0; } #sidenav-overlay { z-index: 997; position: fixed; top: 0; right: 0; left: 0; height: 120vh; background-color: rgba(0, 0, 0, .5); will-change: opacity; } /* @license Copyright (c) 2014 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ /**************************/ /* STYLES FOR THE SPINNER */ /**************************/ /* * Constants: * STROKEWIDTH = 3px * ARCSIZE = 270 degrees (amount of circle the arc takes up) * ARCTIME = 1333ms (time it takes to expand and contract arc) * ARCSTARTROT = 216 degrees (how much the start location of the arc * should rotate each time, 216 gives us a * 5 pointed star shape (it's 360/5 * 3). * For a 7 pointed star, we might do * 360/7 * 3 = 154.286) * CONTAINERWIDTH = 28px * SHRINK_TIME = 400ms */ .preloader-wrapper { display: inline-block; position: relative; width: 48px; height: 48px; } .preloader-wrapper.exsmall { width: 20px; height: 20px; } .preloader-wrapper.exsmall .circle-clipper .circle { border-width: 3px; } .preloader-wrapper.small { width: 36px; height: 36px; } .preloader-wrapper.small .circle-clipper .circle { border-width: 4px; } .preloader-wrapper.big { width: 64px; height: 64px; } .preloader-wrapper.big .circle-clipper .circle { border-width: 6px; } .preloader-wrapper.active { /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ animation: container-rotate 1568ms linear infinite; } @keyframes container-rotate { to { transform: rotate(360deg); } } .spinner-layer { position: absolute; width: 100%; height: 100%; border-color: #26a69a; opacity: 0; } .spinner-blue, .spinner-blue-only { border-color: #4285f4; } .spinner-red, .spinner-red-only { border-color: #db4437; } .spinner-yellow, .spinner-yellow-only { border-color: #f4b400; } .spinner-green, .spinner-green-only { border-color: #0f9d58; } /** * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): * * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't * guarantee that the animation will start _exactly_ after that value. So we avoid using * animation-delay and instead set custom keyframes for each color (as redundant as it * seems). * * We write out each animation in full (instead of separating animation-name, * animation-duration, etc.) because under the polyfill, Safari does not recognize those * specific properties properly, treats them as -webkit-animation, and overrides the * other animation rules. See https://github.com/Polymer/platform/issues/53. */ .active .spinner-layer.spinner-blue { /* durations: 4 * ARCTIME */ animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } .active .spinner-layer.spinner-red { /* durations: 4 * ARCTIME */ animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } .active .spinner-layer.spinner-yellow { /* durations: 4 * ARCTIME */ animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } .active .spinner-layer.spinner-green { /* durations: 4 * ARCTIME */ animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } .active .spinner-layer, .active .spinner-layer.spinner-blue-only, .active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only, .active .spinner-layer.spinner-green-only { animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; /* durations: 4 * ARCTIME */ opacity: 1; } @keyframes fill-unfill-rotate { 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ } @keyframes blue-fade-in-out { from { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes red-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } } @keyframes yellow-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } } @keyframes green-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } /** * Patch the gap that appear between the two adjacent div.circle-clipper while the * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). */ .gap-patch { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } .gap-patch .circle { left: -450%; width: 1000%; } .circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } .circle-clipper .circle { -webkit-animation: none; position: absolute; top: 0; right: 0; bottom: 0; width: 200%; height: 100%; border-width: 5px; /* STROKEWIDTH */ border-style: solid; border-radius: 50%; border-color: inherit; border-bottom-color: transparent !important; animation: none; } .circle-clipper.left .circle { -webkit-transform: rotate(129deg); left: 0; transform: rotate(129deg); border-right-color: transparent !important; } .circle-clipper.right .circle { -webkit-transform: rotate(-129deg); left: -100%; transform: rotate(-129deg); border-left-color: transparent !important; } .active .circle-clipper.left .circle { /* duration: ARCTIME */ animation: left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; } .active .circle-clipper.right .circle { /* duration: ARCTIME */ animation: right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; } @keyframes left-spin { from { transform: rotate(130deg); } 50% { transform: rotate(-5deg); } to { transform: rotate(130deg); } } @keyframes right-spin { from { transform: rotate(-130deg); } 50% { transform: rotate(5deg); } to { transform: rotate(-130deg); } } #spinnerContainer.cooldown { /* duration: SHRINK_TIME */ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(.4, 0, .2, 1); } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .slider { position: relative; width: 100%; height: 400px; } .slider.fullscreen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .slider.fullscreen ul.slides { height: 100%; } .slider.fullscreen ul.indicators { z-index: 2; bottom: 30px; } .slider .slides { height: 400px; margin: 0; background-color: #9e9e9e; } .slider .slides li { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: inherit; overflow: hidden; opacity: 0; } .slider .slides li img { width: 100%; height: 100%; background-position: center; background-size: cover; } .slider .slides li .caption { position: absolute; top: 15%; left: 15%; width: 70%; color: #fff; opacity: 0; } .slider .slides li .caption p { color: #e0e0e0; } .slider .slides li.active { z-index: 2; } .slider .indicators { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; text-align: center; } .slider .indicators .indicator-item { display: inline-block; position: relative; width: 16px; height: 16px; margin: 0 12px; border-radius: 50%; background-color: #e0e0e0; cursor: pointer; transition: background-color .3s; } .slider .indicators .indicator-item.active { background-color: #4caf50; } .carousel { position: relative; width: 100%; height: 400px; overflow: hidden; transform-origin: 0% 50%; transform-style: preserve-3d; perspective: 500px; } .carousel.carousel-slider { top: 0; left: 0; height: 0; } .carousel.carousel-slider .carousel-fixed-item { z-index: 1; position: absolute; right: 0; bottom: 20px; left: 0; } .carousel.carousel-slider .carousel-fixed-item.with-indicators { bottom: 68px; } .carousel.carousel-slider .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 400px; } .carousel.carousel-slider .carousel-item h2 { font-size: 24px; font-weight: 500; line-height: 32px; } .carousel.carousel-slider .carousel-item p { font-size: 15px; } .carousel .carousel-item { display: none; position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .carousel .carousel-item img { width: 100%; } .carousel .indicators { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; text-align: center; } .carousel .indicators .indicator-item { display: inline-block; position: relative; width: 8px; height: 8px; margin: 24px 4px; border-radius: 50%; background-color: rgba(255, 255, 255, .5); cursor: pointer; transition: background-color .3s; } .carousel .indicators .indicator-item.active { background-color: #fff; } .tap-target-wrapper { visibility: hidden; z-index: 1000; position: fixed; width: 800px; height: 800px; transition: visibility 0s .3s; } .tap-target-wrapper.open { visibility: visible; transition: visibility 0s; } .tap-target-wrapper.open .tap-target { transform: scale(1); opacity: .95; transition: transform .3s cubic-bezier(.42, 0, .58, 1), opacity .3s cubic-bezier(.42, 0, .58, 1); } .tap-target-wrapper.open .tap-target-wave:before { transform: scale(1); } .tap-target-wrapper.open .tap-target-wave:after { visibility: visible; animation: pulse-animation 1s cubic-bezier(.24, 0, .38, 1) infinite; transition: opacity .3s, transform .3s, visibility 0s 1s; } .tap-target { position: absolute; width: 100%; height: 100%; transform: scale(0); border-radius: 50%; background-color: #ee6e73; box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .14), 0 10px 50px 0 rgba(0, 0, 0, .12), 0 30px 10px -20px rgba(0, 0, 0, .2); font-size: 16px; font-size: 1rem; opacity: 0; transition: transform .3s cubic-bezier(.42, 0, .58, 1), opacity .3s cubic-bezier(.42, 0, .58, 1); } @media only screen and (max-width: 600px) { .tap-target { width: 600px; height: 600px; } } .tap-target-content { display: table-cell; position: relative; } .tap-target-wave { z-index: 10001; position: absolute; border-radius: 50%; } .tap-target-wave:before, .tap-target-wave:after { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; content: ""; } .tap-target-wave:before { transform: scale(0); transition: transform .3s; } .tap-target-wave:after { visibility: hidden; z-index: -1; transition: opacity .3s, transform .3s, visibility 0s; } .tap-target-origin { z-index: 10002; position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tap-target-origin:not(.btn):not(.btn-large), .tap-target-origin:not(.btn):not(.btn-large):hover { background: none; } .pulse { overflow: initial; } .pulse:before { display: block; z-index: -1; position: absolute; width: 100%; height: 100%; border-radius: inherit; background-color: inherit; animation: pulse-animation 1s cubic-bezier(.24, 0, .38, 1) infinite; content: ""; transition: opacity .3s, transform .3s; } @keyframes pulse-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } /* ========================================================================== $BASE-PICKER ========================================================================== */ /** * Note: the root picker element should *NOT* be styled more than what's here. */ .picker { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; z-index: 10000; position: absolute; color: #000; font-size: 16px; line-height: 1.2; text-align: left; user-select: none; } /** * The picker input element. */ .picker__input { cursor: default; } /** * When the picker is opened, the input element is "activated". */ .picker__input.picker__input--active { border-color: #0089ec; } /** * The holder is the only "scrollable" top-level container element. */ .picker__holder { -webkit-overflow-scrolling: touch; width: 100%; overflow-y: auto; } /*! * Default mobile-first, responsive styling for pickadate.js * Demo: http://amsul.github.io/pickadate.js */ /** * Note: the root picker element should *NOT* be styled more than what's here. */ /** * Make the holder and frame fullscreen. */ .picker__holder, .picker__frame { top: 100%; right: 0; bottom: 0; left: 0; } /** * The holder should overlay the entire screen. */ .picker__holder { -webkit-transition: background .15s ease-out, top 0s .15s; -moz-transition: background .15s ease-out, top 0s .15s; -webkit-backface-visibility: hidden; position: fixed; transition: background .15s ease-out, top 0s .15s; } /** * The frame that bounds the box contents of the picker. */ .picker__frame { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -webkit-transition: all .15s ease-out; -moz-transition: all .15s ease-out; position: absolute; width: 300px; min-width: 256px; max-height: 350px; margin: 0 auto; filter: alpha(opacity=0); opacity: 0; transition: all .15s ease-out; } @media (min-height: 28.875em) { .picker__frame { top: auto; bottom: -100%; max-height: 80%; overflow: visible; } } @media (min-height: 40.125em) { .picker__frame { margin-bottom: 7.5%; } } /** * The wrapper sets the stage to vertically align the box contents. */ .picker__wrap { display: table; width: 100%; height: 100%; } @media (min-height: 28.875em) { .picker__wrap { display: block; } } /** * The box contains all the picker contents. */ .picker__box { display: table-cell; background: #fff; vertical-align: middle; } @media (min-height: 28.875em) { .picker__box { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24); -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24); display: block; border: 1px solid #777; border-bottom-width: 0; border-radius: 5px 5px 0 0; border-top-color: #898989; box-shadow: 0 12px 36px 16px rgba(0, 0, 0, .24); } } /** * When the picker opens... */ .picker--opened .picker__holder { -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"; zoom: 1; -webkit-transition: background .15s ease-out; -moz-transition: background .15s ease-out; top: 0; background: transparent; background: rgba(0, 0, 0, .32); transition: background .15s ease-out; } .picker--opened .picker__frame { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; top: 0; filter: alpha(opacity=100); opacity: 1; } @media (min-height: 35.875em) { .picker--opened .picker__frame { top: 10%; bottom: auto; } } /** * For `large` screens, transform into an inline picker. */ /* ========================================================================== CUSTOM MATERIALIZE STYLES ========================================================================== */ .picker__input.picker__input--active { border-color: #e3f2fd; } .picker__frame { max-width: 325px; margin: 0 auto; } @media (min-height: 38.875em) { .picker--opened .picker__frame { top: 10%; bottom: auto; } } /* ========================================================================== $BASE-DATE-PICKER ========================================================================== */ /** * The picker box. */ .picker__box { padding: 0 1em; } /** * The header containing the month and year stuff. */ .picker__header { position: relative; margin-top: .75em; text-align: center; } /** * The month and year labels. */ .picker__month, .picker__year { display: inline-block; margin-right: .25em; margin-left: .25em; } /** * The month and year selectors. */ .picker__select--month, .picker__select--year { height: 2em; margin-right: .25em; margin-left: .25em; padding: 0; } .picker__select--month.browser-default { display: inline; width: 40%; background-color: #fff; } .picker__select--year.browser-default { display: inline; width: 26%; background-color: #fff; } .picker__select--month:focus, .picker__select--year:focus { border-color: rgba(0, 0, 0, .05); } /** * The month navigation buttons. */ .picker__nav--prev, .picker__nav--next { box-sizing: content-box; position: absolute; top: -.25em; width: 1em; height: 1em; padding: .5em 1.25em; } .picker__nav--prev { left: -1em; padding-right: 1.25em; } .picker__nav--next { right: -1em; padding-left: 1.25em; } .picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover { border-right-color: #f5f5f5; border-left-color: #f5f5f5; background: none; cursor: default; } /** * The calendar table of dates */ .picker__table { width: 100%; margin-top: .75em; margin-bottom: .5em; border-collapse: collapse; border-spacing: 0; font-size: 16px; font-size: 1rem; text-align: center; table-layout: fixed; } .picker__table th, .picker__table td { text-align: center; } .picker__table td { margin: 0; padding: 0; } /** * The weekday labels */ .picker__weekday { width: 14.285714286%; padding-bottom: .25em; color: #999; font-size: .75em; font-weight: 500; /* Increase the spacing a tad */ } @media (min-height: 33.875em) { .picker__weekday { padding-bottom: .5em; } } /** * The days on the calendar */ .picker__day--today { position: relative; padding: 12px 0; padding: .75rem 0; border: 1px solid transparent; color: #595959; font-weight: 400; letter-spacing: -.3; } .picker__day--disabled:before { border-top-color: #aaa; } .picker__day--infocus:hover { color: #000; font-weight: 500; cursor: pointer; } .picker__day--outfocus { display: none; padding: 12px 0; padding: .75rem 0; color: #fff; } .picker__day--outfocus:hover { color: #ddd; font-weight: 500; cursor: pointer; } .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { cursor: pointer; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { transform: scale(.75); border-radius: 50%; background: #0089ec; color: #fff; } .picker__day--disabled, .picker__day--disabled:hover, .picker--focused .picker__day--disabled { border-color: #f5f5f5; background: #f5f5f5; color: #ddd; cursor: default; } .picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover { background: #bbb; } /** * The footer containing the "today", "clear", and "close" buttons. */ .picker__footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; text-align: center; } .picker__button--today, .picker__button--clear, .picker__button--close { display: inline-block; width: 33%; padding: .66em 0; border: 1px solid #fff; background: #fff; font-size: .8em; font-weight: bold; vertical-align: bottom; } .picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover { border-bottom-color: #b1dcfb; background: #b1dcfb; color: #000; cursor: pointer; } .picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus { border-color: rgba(0, 0, 0, .05); outline: none; background: #b1dcfb; } .picker__button--today:before, .picker__button--clear:before, .picker__button--close:before { display: inline-block; position: relative; height: 0; } .picker__button--today:before, .picker__button--clear:before { margin-right: .45em; content: " "; } .picker__button--today:before { top: -.05em; width: 0; border-top: .66em solid #0059bc; border-left: .66em solid transparent; } .picker__button--clear:before { top: -.25em; width: .66em; border-top: 3px solid #e20; } .picker__button--close:before { top: -.1em; margin-right: .35em; color: #777; font-size: 1.1em; vertical-align: top; content: "×"; } .picker__button--today[disabled], .picker__button--today[disabled]:hover { border-color: #f5f5f5; background: #f5f5f5; color: #ddd; cursor: default; } .picker__button--today[disabled]:before { border-top-color: #aaa; } /* ========================================================================== CUSTOM MATERIALIZE STYLES ========================================================================== */ .picker__box { overflow: hidden; border-radius: 2px; } .picker__date-display { padding-bottom: 15px; background-color: #26a69a; color: #fff; font-weight: 300; text-align: center; } .picker__nav--prev:hover, .picker__nav--next:hover { background: #a1ded8; color: #000; cursor: pointer; } .picker__weekday-display { margin-bottom: 15px; padding: 10px; background-color: #1f897f; font-size: 16px; font-size: 1rem; font-weight: 200; letter-spacing: .5; } .picker__month-display { font-size: 32px; font-size: 2rem; text-transform: uppercase; } .picker__day-display { font-size: 72px; font-size: 4.5rem; font-weight: 400; } .picker__year-display { color: rgba(255, 255, 255, .4); font-size: 28.8px; font-size: 1.8rem; } .picker__box { padding: 0; } .picker__calendar-container { padding: 0 16px; padding: 0 1rem; } .picker__calendar-container thead { border: none; } .picker__table { margin-top: 0; margin-bottom: .5em; } .picker__day--infocus { padding: 12px 0; padding: .75rem 0; border: 1px solid transparent; color: #595959; font-weight: 400; letter-spacing: -.3; } .picker__day.picker__day--today { color: #26a69a; } .picker__day.picker__day--today.picker__day--selected { color: #fff; } .picker__weekday { font-size: 14.4px; font-size: .9rem; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { transform: scale(.9); border-radius: 50%; background-color: #26a69a; color: #fff; } .picker__day--selected.picker__day--outfocus, .picker__day--selected:hover.picker__day--outfocus, .picker--focused .picker__day--selected.picker__day--outfocus { background-color: #a1ded8; } .picker__footer { padding: 5px 10px; text-align: right; } .picker__close, .picker__today { padding: 0 16px; padding: 0 1rem; color: #26a69a; font-size: 17.6px; font-size: 1.1rem; } .picker__nav--prev:before, .picker__nav--next:before { display: block; width: 0; height: 0; margin: 0 auto; border-top: .5em solid transparent; border-right: .75em solid #676767; border-bottom: .5em solid transparent; content: " "; } .picker__nav--next:before { border-right: 0; border-left: .75em solid #676767; } button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus { background-color: #a1ded8; } /* ========================================================================== $BASE-TIME-PICKER ========================================================================== */ /** * The list of times. */ .picker__list { margin: 0; padding: .75em 0 4.2em; list-style: none; } /** * The times on the clock. */ .picker__list-item { position: relative; margin-bottom: -1px; padding: .75em 1.25em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; } @media (min-height: 46.75em) { .picker__list-item { padding: .5em 1em; } } /* Hovered time */ .picker__list-item:hover { z-index: 10; border-color: #0089ec; background: #b1dcfb; color: #000; cursor: pointer; } /* Highlighted and hovered/focused time */ .picker__list-item--highlighted { z-index: 10; border-color: #0089ec; } .picker__list-item--highlighted:hover, .picker--focused .picker__list-item--highlighted { background: #b1dcfb; color: #000; cursor: pointer; } /* Selected and hovered/focused time */ .picker__list-item--selected, .picker__list-item--selected:hover, .picker--focused .picker__list-item--selected { z-index: 10; background: #0089ec; color: #fff; } /* Disabled time */ .picker__list-item--disabled, .picker__list-item--disabled:hover, .picker--focused .picker__list-item--disabled { z-index: auto; border-color: #f5f5f5; border-color: #ddd; background: #f5f5f5; color: #ddd; cursor: default; } /** * The clear button */ .picker--time .picker__button--clear { display: block; width: 80%; margin: 1em auto 0; padding: 1em 1.25em; border: 0; background: none; color: #666; font-size: .67em; font-weight: 500; text-align: center; text-transform: uppercase; } .picker--time .picker__button--clear:hover, .picker--time .picker__button--clear:focus { border-color: #e20; outline: none; background: #b1dcfb; background: #e20; color: #000; color: #fff; cursor: pointer; } .picker--time .picker__button--clear:before { top: -.25em; color: #666; font-size: 1.25em; font-weight: bold; } .picker--time .picker__button--clear:hover:before, .picker--time .picker__button--clear:focus:before { color: #fff; } /* ========================================================================== $DEFAULT-TIME-PICKER ========================================================================== */ /** * The frame the bounds the time picker. */ .picker--time .picker__frame { min-width: 256px; max-width: 320px; } /** * The picker box. */ .picker--time .picker__box { padding: 0; background: #f2f2f2; font-size: 1em; } @media (min-height: 40.125em) { .picker--time .picker__box { margin-bottom: 5em; } } .red { background-color: #f44336; } .red.hoverable:hover { background-color: #f55a4e; } .red.color-50 { background-color: #ffebee; } .red.color-50.hoverable:hover { background-color: white; } .red.color-100 { background-color: #ffcdd2; } .red.color-100.hoverable:hover { background-color: #ffe7e9; } .red.color-200 { background-color: #ef9a9a; } .red.color-200.hoverable:hover { background-color: #f2b0b0; } .red.color-300 { background-color: #e57373; } .red.color-300.hoverable:hover { background-color: #e98989; } .red.color-400 { background-color: #ef5350; } .red.color-400.hoverable:hover { background-color: #f16a67; } .red.color-600 { background-color: #e53935; } .red.color-600.hoverable:hover { background-color: #e84f4c; } .red.color-700 { background-color: #d32f2f; } .red.color-700.hoverable:hover { background-color: #d74444; } .red.color-800 { background-color: #c62828; } .red.color-800.hoverable:hover { background-color: #d63232; } .red.color-900 { background-color: #b71c1c; } .red.color-900.hoverable:hover { background-color: #cd1f1f; } .red.color-a100 { background-color: #ff8a80; } .red.color-a100.hoverable:hover { background-color: #ffa19a; } .red.color-a200 { background-color: #ff5252; } .red.color-a200.hoverable:hover { background-color: #ff6c6c; } .red.color-a400 { background-color: #ff1744; } .red.color-a400.hoverable:hover { background-color: #ff3159; } .red.color-a700 { background-color: #d50000; } .red.color-a700.hoverable:hover { background-color: #ef0000; } .red-text { color: #f44336; } .red-text.color-50 { color: #ffebee; } .red-text.color-100 { color: #ffcdd2; } .red-text.color-200 { color: #ef9a9a; } .red-text.color-300 { color: #e57373; } .red-text.color-400 { color: #ef5350; } .red-text.color-600 { color: #e53935; } .red-text.color-700 { color: #d32f2f; } .red-text.color-800 { color: #c62828; } .red-text.color-900 { color: #b71c1c; } .red-text.color-a100 { color: #ff8a80; } .red-text.color-a200 { color: #ff5252; } .red-text.color-a400 { color: #ff1744; } .red-text.color-a700 { color: #d50000; } .pink { background-color: #e91e63; } .pink.hoverable:hover { background-color: #eb3573; } .pink.color-50 { background-color: #fce4ec; } .pink.color-50.hoverable:hover { background-color: #fffbfc; } .pink.color-100 { background-color: #f8bbd0; } .pink.color-100.hoverable:hover { background-color: #fad2e0; } .pink.color-200 { background-color: #f48fb1; } .pink.color-200.hoverable:hover { background-color: #f6a6c1; } .pink.color-300 { background-color: #f06292; } .pink.color-300.hoverable:hover { background-color: #f279a2; } .pink.color-400 { background-color: #ec407a; } .pink.color-400.hoverable:hover { background-color: #ee578a; } .pink.color-600 { background-color: #d81b60; } .pink.color-600.hoverable:hover { background-color: #e4286d; } .pink.color-700 { background-color: #c2185b; } .pink.color-700.hoverable:hover { background-color: #d91b66; } .pink.color-800 { background-color: #ad1457; } .pink.color-800.hoverable:hover { background-color: #c41762; } .pink.color-900 { background-color: #880e4f; } .pink.color-900.hoverable:hover { background-color: #9f105c; } .pink.color-a100 { background-color: #ff80ab; } .pink.color-a100.hoverable:hover { background-color: #ff9abc; } .pink.color-a200 { background-color: #ff4081; } .pink.color-a200.hoverable:hover { background-color: #ff5a92; } .pink.color-a400 { background-color: #f50057; } .pink.color-a400.hoverable:hover { background-color: #ff1065; } .pink.color-a700 { background-color: #c51162; } .pink.color-a700.hoverable:hover { background-color: #dc136e; } .pink-text { color: #e91e63; } .pink-text.color-50 { color: #fce4ec; } .pink-text.color-100 { color: #f8bbd0; } .pink-text.color-200 { color: #f48fb1; } .pink-text.color-300 { color: #f06292; } .pink-text.color-400 { color: #ec407a; } .pink-text.color-600 { color: #d81b60; } .pink-text.color-700 { color: #c2185b; } .pink-text.color-800 { color: #ad1457; } .pink-text.color-900 { color: #880e4f; } .pink-text.color-a100 { color: #ff80ab; } .pink-text.color-a200 { color: #ff4081; } .pink-text.color-a400 { color: #f50057; } .pink-text.color-a700 { color: #c51162; } .purple { background-color: #9c27b0; } .purple.hoverable:hover { background-color: #af2cc5; } .purple.color-50 { background-color: #f3e5f5; } .purple.color-50.hoverable:hover { background-color: #fcf7fc; } .purple.color-100 { background-color: #e1bee7; } .purple.color-100.hoverable:hover { background-color: #ead1ee; } .purple.color-200 { background-color: #ce93d8; } .purple.color-200.hoverable:hover { background-color: #d7a6df; } .purple.color-300 { background-color: #ba68c8; } .purple.color-300.hoverable:hover { background-color: #c37bcf; } .purple.color-400 { background-color: #ab47bc; } .purple.color-400.hoverable:hover { background-color: #b45ac3; } .purple.color-600 { background-color: #8e24aa; } .purple.color-600.hoverable:hover { background-color: #a028bf; } .purple.color-700 { background-color: #7b1fa2; } .purple.color-700.hoverable:hover { background-color: #8b23b7; } .purple.color-800 { background-color: #6a1b9a; } .purple.color-800.hoverable:hover { background-color: #791fb0; } .purple.color-900 { background-color: #4a148c; } .purple.color-900.hoverable:hover { background-color: #5617a2; } .purple.color-a100 { background-color: #ea80fc; } .purple.color-a100.hoverable:hover { background-color: #ee99fd; } .purple.color-a200 { background-color: #e040fb; } .purple.color-a200.hoverable:hover { background-color: #e459fc; } .purple.color-a400 { background-color: #d500f9; } .purple.color-a400.hoverable:hover { background-color: #dd14ff; } .purple.color-a700 { background-color: #a0f; } .purple.color-a700.hoverable:hover { background-color: #b31aff; } .purple-text { color: #9c27b0; } .purple-text.color-50 { color: #f3e5f5; } .purple-text.color-100 { color: #e1bee7; } .purple-text.color-200 { color: #ce93d8; } .purple-text.color-300 { color: #ba68c8; } .purple-text.color-400 { color: #ab47bc; } .purple-text.color-600 { color: #8e24aa; } .purple-text.color-700 { color: #7b1fa2; } .purple-text.color-800 { color: #6a1b9a; } .purple-text.color-900 { color: #4a148c; } .purple-text.color-a100 { color: #ea80fc; } .purple-text.color-a200 { color: #e040fb; } .purple-text.color-a400 { color: #d500f9; } .purple-text.color-a700 { color: #a0f; } .deeppurple { background-color: #673ab7; } .deeppurple.hoverable:hover { background-color: #7446c4; } .deeppurple.color-50 { background-color: #ede7f6; } .deeppurple.color-50.hoverable:hover { background-color: #fbfafd; } .deeppurple.color-100 { background-color: #d1c4e9; } .deeppurple.color-100.hoverable:hover { background-color: #dfd7f0; } .deeppurple.color-200 { background-color: #b39ddb; } .deeppurple.color-200.hoverable:hover { background-color: #c1b0e2; } .deeppurple.color-300 { background-color: #9575cd; } .deeppurple.color-300.hoverable:hover { background-color: #a388d4; } .deeppurple.color-400 { background-color: #7e57c2; } .deeppurple.color-400.hoverable:hover { background-color: #8c6ac9; } .deeppurple.color-600 { background-color: #5e35b1; } .deeppurple.color-600.hoverable:hover { background-color: #693bc4; } .deeppurple.color-700 { background-color: #512da8; } .deeppurple.color-700.hoverable:hover { background-color: #5b32bc; } .deeppurple.color-800 { background-color: #4527a0; } .deeppurple.color-800.hoverable:hover { background-color: #4e2cb5; } .deeppurple.color-900 { background-color: #311b92; } .deeppurple.color-900.hoverable:hover { background-color: #381fa8; } .deeppurple.color-a100 { background-color: #b388ff; } .deeppurple.color-a100.hoverable:hover { background-color: #c3a2ff; } .deeppurple.color-a200 { background-color: #7c4dff; } .deeppurple.color-a200.hoverable:hover { background-color: #8f67ff; } .deeppurple.color-a400 { background-color: #651fff; } .deeppurple.color-a400.hoverable:hover { background-color: #7739ff; } .deeppurple.color-a700 { background-color: #6200ea; } .deeppurple.color-a700.hoverable:hover { background-color: #6d05ff; } .deeppurple-text { color: #673ab7; } .deeppurple-text.color-50 { color: #ede7f6; } .deeppurple-text.color-100 { color: #d1c4e9; } .deeppurple-text.color-200 { color: #b39ddb; } .deeppurple-text.color-300 { color: #9575cd; } .deeppurple-text.color-400 { color: #7e57c2; } .deeppurple-text.color-600 { color: #5e35b1; } .deeppurple-text.color-700 { color: #512da8; } .deeppurple-text.color-800 { color: #4527a0; } .deeppurple-text.color-900 { color: #311b92; } .deeppurple-text.color-a100 { color: #b388ff; } .deeppurple-text.color-a200 { color: #7c4dff; } .deeppurple-text.color-a400 { color: #651fff; } .deeppurple-text.color-a700 { color: #6200ea; } .indigo { background-color: #3f51b5; } .indigo.hoverable:hover { background-color: #4d5ec1; } .indigo.color-50 { background-color: #e8eaf6; } .indigo.color-50.hoverable:hover { background-color: #fafbfd; } .indigo.color-100 { background-color: #c5cae9; } .indigo.color-100.hoverable:hover { background-color: #d7dbf0; } .indigo.color-200 { background-color: #9fa8da; } .indigo.color-200.hoverable:hover { background-color: #b1b9e1; } .indigo.color-300 { background-color: #7986cb; } .indigo.color-300.hoverable:hover { background-color: #8b97d2; } .indigo.color-400 { background-color: #5c6bc0; } .indigo.color-400.hoverable:hover { background-color: #6e7cc7; } .indigo.color-600 { background-color: #3949ab; } .indigo.color-600.hoverable:hover { background-color: #3f51be; } .indigo.color-700 { background-color: #303f9f; } .indigo.color-700.hoverable:hover { background-color: #3647b3; } .indigo.color-800 { background-color: #283593; } .indigo.color-800.hoverable:hover { background-color: #2d3ca7; } .indigo.color-900 { background-color: #1a237e; } .indigo.color-900.hoverable:hover { background-color: #1e2993; } .indigo.color-a100 { background-color: #8c9eff; } .indigo.color-a100.hoverable:hover { background-color: #a6b4ff; } .indigo.color-a200 { background-color: #536dfe; } .indigo.color-a200.hoverable:hover { background-color: #6c83fe; } .indigo.color-a400 { background-color: #3d5afe; } .indigo.color-a400.hoverable:hover { background-color: #5670fe; } .indigo.color-a700 { background-color: #304ffe; } .indigo.color-a700.hoverable:hover { background-color: #4965fe; } .indigo-text { color: #3f51b5; } .indigo-text.color-50 { color: #e8eaf6; } .indigo-text.color-100 { color: #c5cae9; } .indigo-text.color-200 { color: #9fa8da; } .indigo-text.color-300 { color: #7986cb; } .indigo-text.color-400 { color: #5c6bc0; } .indigo-text.color-600 { color: #3949ab; } .indigo-text.color-700 { color: #303f9f; } .indigo-text.color-800 { color: #283593; } .indigo-text.color-900 { color: #1a237e; } .indigo-text.color-a100 { color: #8c9eff; } .indigo-text.color-a200 { color: #536dfe; } .indigo-text.color-a400 { color: #3d5afe; } .indigo-text.color-a700 { color: #304ffe; } .blue { background-color: #2196f3; } .blue.hoverable:hover { background-color: #39a1f4; } .blue.color-50 { background-color: #e3f2fd; } .blue.color-50.hoverable:hover { background-color: #fbfdff; } .blue.color-100 { background-color: #bbdefb; } .blue.color-100.hoverable:hover { background-color: #d3eafc; } .blue.color-200 { background-color: #90caf9; } .blue.color-200.hoverable:hover { background-color: #a8d6fa; } .blue.color-300 { background-color: #64b5f6; } .blue.color-300.hoverable:hover { background-color: #7cc1f7; } .blue.color-400 { background-color: #42a5f5; } .blue.color-400.hoverable:hover { background-color: #5ab1f6; } .blue.color-600 { background-color: #1e88e5; } .blue.color-600.hoverable:hover { background-color: #3594e8; } .blue.color-700 { background-color: #1976d2; } .blue.color-700.hoverable:hover { background-color: #2083e4; } .blue.color-800 { background-color: #1565c0; } .blue.color-800.hoverable:hover { background-color: #1871d7; } .blue.color-900 { background-color: #0d47a1; } .blue.color-900.hoverable:hover { background-color: #0f51b9; } .blue.color-a100 { background-color: #82b1ff; } .blue.color-a100.hoverable:hover { background-color: #9cc1ff; } .blue.color-a200 { background-color: #448aff; } .blue.color-a200.hoverable:hover { background-color: #5e9aff; } .blue.color-a400 { background-color: #2979ff; } .blue.color-a400.hoverable:hover { background-color: #4389ff; } .blue.color-a700 { background-color: #2962ff; } .blue.color-a700.hoverable:hover { background-color: #4375ff; } .blue-text { color: #2196f3; } .blue-text.color-50 { color: #e3f2fd; } .blue-text.color-100 { color: #bbdefb; } .blue-text.color-200 { color: #90caf9; } .blue-text.color-300 { color: #64b5f6; } .blue-text.color-400 { color: #42a5f5; } .blue-text.color-600 { color: #1e88e5; } .blue-text.color-700 { color: #1976d2; } .blue-text.color-800 { color: #1565c0; } .blue-text.color-900 { color: #0d47a1; } .blue-text.color-a100 { color: #82b1ff; } .blue-text.color-a200 { color: #448aff; } .blue-text.color-a400 { color: #2979ff; } .blue-text.color-a700 { color: #2962ff; } .lightblue { background-color: #03a9f4; } .lightblue.hoverable:hover { background-color: #14b4fc; } .lightblue.color-50 { background-color: #e1f5fe; } .lightblue.color-50.hoverable:hover { background-color: #fafdff; } .lightblue.color-100 { background-color: #b3e5fc; } .lightblue.color-100.hoverable:hover { background-color: #ccedfd; } .lightblue.color-200 { background-color: #81d4fa; } .lightblue.color-200.hoverable:hover { background-color: #9adcfb; } .lightblue.color-300 { background-color: #4fc3f7; } .lightblue.color-300.hoverable:hover { background-color: #67cbf8; } .lightblue.color-400 { background-color: #29b6f6; } .lightblue.color-400.hoverable:hover { background-color: #41bef7; } .lightblue.color-600 { background-color: #039be5; } .lightblue.color-600.hoverable:hover { background-color: #06abfc; } .lightblue.color-700 { background-color: #0288d1; } .lightblue.color-700.hoverable:hover { background-color: #0298ea; } .lightblue.color-800 { background-color: #0277bd; } .lightblue.color-800.hoverable:hover { background-color: #0287d6; } .lightblue.color-900 { background-color: #01579b; } .lightblue.color-900.hoverable:hover { background-color: #0165b4; } .lightblue.color-a100 { background-color: #80d8ff; } .lightblue.color-a100.hoverable:hover { background-color: #9ae0ff; } .lightblue.color-a200 { background-color: #40c4ff; } .lightblue.color-a200.hoverable:hover { background-color: #5accff; } .lightblue.color-a400 { background-color: #00b0ff; } .lightblue.color-a400.hoverable:hover { background-color: #1ab8ff; } .lightblue.color-a700 { background-color: #0091ea; } .lightblue.color-a700.hoverable:hover { background-color: #05a0ff; } .lightblue-text { color: #03a9f4; } .lightblue-text.color-50 { color: #e1f5fe; } .lightblue-text.color-100 { color: #b3e5fc; } .lightblue-text.color-200 { color: #81d4fa; } .lightblue-text.color-300 { color: #4fc3f7; } .lightblue-text.color-400 { color: #29b6f6; } .lightblue-text.color-600 { color: #039be5; } .lightblue-text.color-700 { color: #0288d1; } .lightblue-text.color-800 { color: #0277bd; } .lightblue-text.color-900 { color: #01579b; } .lightblue-text.color-a100 { color: #80d8ff; } .lightblue-text.color-a200 { color: #40c4ff; } .lightblue-text.color-a400 { color: #00b0ff; } .lightblue-text.color-a700 { color: #0091ea; } .cyan { background-color: #00bcd4; } .cyan.hoverable:hover { background-color: #00d3ee; } .cyan.color-50 { background-color: #e0f7fa; } .cyan.color-50.hoverable:hover { background-color: #f6fdfe; } .cyan.color-100 { background-color: #b2ebf2; } .cyan.color-100.hoverable:hover { background-color: #c8f1f6; } .cyan.color-200 { background-color: #80deea; } .cyan.color-200.hoverable:hover { background-color: #96e4ee; } .cyan.color-300 { background-color: #4dd0e1; } .cyan.color-300.hoverable:hover { background-color: #63d6e5; } .cyan.color-400 { background-color: #26c6da; } .cyan.color-400.hoverable:hover { background-color: #3cccde; } .cyan.color-600 { background-color: #00acc1; } .cyan.color-600.hoverable:hover { background-color: #00c3db; } .cyan.color-700 { background-color: #0097a7; } .cyan.color-700.hoverable:hover { background-color: #00aec1; } .cyan.color-800 { background-color: #00838f; } .cyan.color-800.hoverable:hover { background-color: #009aa9; } .cyan.color-900 { background-color: #006064; } .cyan.color-900.hoverable:hover { background-color: #00787e; } .cyan.color-a100 { background-color: #84ffff; } .cyan.color-a100.hoverable:hover { background-color: #9effff; } .cyan.color-a200 { background-color: #18ffff; } .cyan.color-a200.hoverable:hover { background-color: #32ffff; } .cyan.color-a400 { background-color: #00e5ff; } .cyan.color-a400.hoverable:hover { background-color: #1ae8ff; } .cyan.color-a700 { background-color: #00b8d4; } .cyan.color-a700.hoverable:hover { background-color: #00ceee; } .cyan-text { color: #00bcd4; } .cyan-text.color-50 { color: #e0f7fa; } .cyan-text.color-100 { color: #b2ebf2; } .cyan-text.color-200 { color: #80deea; } .cyan-text.color-300 { color: #4dd0e1; } .cyan-text.color-400 { color: #26c6da; } .cyan-text.color-600 { color: #00acc1; } .cyan-text.color-700 { color: #0097a7; } .cyan-text.color-800 { color: #00838f; } .cyan-text.color-900 { color: #006064; } .cyan-text.color-a100 { color: #84ffff; } .cyan-text.color-a200 { color: #18ffff; } .cyan-text.color-a400 { color: #00e5ff; } .cyan-text.color-a700 { color: #00b8d4; } .teal { background-color: #009688; } .teal.hoverable:hover { background-color: #00b09f; } .teal.color-50 { background-color: #e0f2f1; } .teal.color-50.hoverable:hover { background-color: #f2faf9; } .teal.color-100 { background-color: #b2dfdb; } .teal.color-100.hoverable:hover { background-color: #c4e6e3; } .teal.color-200 { background-color: #80cbc4; } .teal.color-200.hoverable:hover { background-color: #92d2cc; } .teal.color-300 { background-color: #4db6ac; } .teal.color-300.hoverable:hover { background-color: #5fbdb4; } .teal.color-400 { background-color: #26a69a; } .teal.color-400.hoverable:hover { background-color: #2bbbad; } .teal.color-600 { background-color: #00897b; } .teal.color-600.hoverable:hover { background-color: #00a392; } .teal.color-700 { background-color: #00796b; } .teal.color-700.hoverable:hover { background-color: #009382; } .teal.color-800 { background-color: #00695c; } .teal.color-800.hoverable:hover { background-color: #008372; } .teal.color-900 { background-color: #004d40; } .teal.color-900.hoverable:hover { background-color: #006755; } .teal.color-a100 { background-color: #a7ffeb; } .teal.color-a100.hoverable:hover { background-color: #c1fff1; } .teal.color-a200 { background-color: #64ffda; } .teal.color-a200.hoverable:hover { background-color: #7effe0; } .teal.color-a400 { background-color: #1de9b6; } .teal.color-a400.hoverable:hover { background-color: #34ebbe; } .teal.color-a700 { background-color: #00bfa5; } .teal.color-a700.hoverable:hover { background-color: #00d9bb; } .teal-text { color: #009688; } .teal-text.color-50 { color: #e0f2f1; } .teal-text.color-100 { color: #b2dfdb; } .teal-text.color-200 { color: #80cbc4; } .teal-text.color-300 { color: #4db6ac; } .teal-text.color-400 { color: #26a69a; } .teal-text.color-600 { color: #00897b; } .teal-text.color-700 { color: #00796b; } .teal-text.color-800 { color: #00695c; } .teal-text.color-900 { color: #004d40; } .teal-text.color-a100 { color: #a7ffeb; } .teal-text.color-a200 { color: #64ffda; } .teal-text.color-a400 { color: #1de9b6; } .teal-text.color-a700 { color: #00bfa5; } .green { background-color: #4caf50; } .green.hoverable:hover { background-color: #5cb860; } .green.color-50 { background-color: #e8f5e9; } .green.color-50.hoverable:hover { background-color: #fafdfa; } .green.color-100 { background-color: #c8e6c9; } .green.color-100.hoverable:hover { background-color: #daeeda; } .green.color-200 { background-color: #a5d6a7; } .green.color-200.hoverable:hover { background-color: #b7deb8; } .green.color-300 { background-color: #81c784; } .green.color-300.hoverable:hover { background-color: #93cf95; } .green.color-400 { background-color: #66bb6a; } .green.color-400.hoverable:hover { background-color: #78c37b; } .green.color-600 { background-color: #43a047; } .green.color-600.hoverable:hover { background-color: #4bb24f; } .green.color-700 { background-color: #388e3c; } .green.color-700.hoverable:hover { background-color: #3fa044; } .green.color-800 { background-color: #2e7d32; } .green.color-800.hoverable:hover { background-color: #359039; } .green.color-900 { background-color: #1b5e20; } .green.color-900.hoverable:hover { background-color: #217227; } .green.color-a100 { background-color: #b9f6ca; } .green.color-a100.hoverable:hover { background-color: #d0f9db; } .green.color-a200 { background-color: #69f0ae; } .green.color-a200.hoverable:hover { background-color: #80f2bb; } .green.color-a400 { background-color: #00e676; } .green.color-a400.hoverable:hover { background-color: #01ff83; } .green.color-a700 { background-color: #00c853; } .green.color-a700.hoverable:hover { background-color: #00e25e; } .green-text { color: #4caf50; } .green-text.color-50 { color: #e8f5e9; } .green-text.color-100 { color: #c8e6c9; } .green-text.color-200 { color: #a5d6a7; } .green-text.color-300 { color: #81c784; } .green-text.color-400 { color: #66bb6a; } .green-text.color-600 { color: #43a047; } .green-text.color-700 { color: #388e3c; } .green-text.color-800 { color: #2e7d32; } .green-text.color-900 { color: #1b5e20; } .green-text.color-a100 { color: #b9f6ca; } .green-text.color-a200 { color: #69f0ae; } .green-text.color-a400 { color: #00e676; } .green-text.color-a700 { color: #00c853; } .lightgreen { background-color: #8bc34a; } .lightgreen.hoverable:hover { background-color: #97c95d; } .lightgreen.color-50 { background-color: #f1f8e9; } .lightgreen.color-50.hoverable:hover { background-color: #fdfefc; } .lightgreen.color-100 { background-color: #dcedc8; } .lightgreen.color-100.hoverable:hover { background-color: #e8f3db; } .lightgreen.color-200 { background-color: #c5e1a5; } .lightgreen.color-200.hoverable:hover { background-color: #d1e7b8; } .lightgreen.color-300 { background-color: #aed581; } .lightgreen.color-300.hoverable:hover { background-color: #badb94; } .lightgreen.color-400 { background-color: #9ccc65; } .lightgreen.color-400.hoverable:hover { background-color: #a8d278; } .lightgreen.color-600 { background-color: #7cb342; } .lightgreen.color-600.hoverable:hover { background-color: #89be50; } .lightgreen.color-700 { background-color: #689f38; } .lightgreen.color-700.hoverable:hover { background-color: #74b23f; } .lightgreen.color-800 { background-color: #558b2f; } .lightgreen.color-800.hoverable:hover { background-color: #619e35; } .lightgreen.color-900 { background-color: #33691e; } .lightgreen.color-900.hoverable:hover { background-color: #3d7d24; } .lightgreen.color-a100 { background-color: #ccff90; } .lightgreen.color-a100.hoverable:hover { background-color: #d8ffaa; } .lightgreen.color-a200 { background-color: #b2ff59; } .lightgreen.color-a200.hoverable:hover { background-color: #beff73; } .lightgreen.color-a400 { background-color: #76ff03; } .lightgreen.color-a400.hoverable:hover { background-color: #84ff1d; } .lightgreen.color-a700 { background-color: #64dd17; } .lightgreen.color-a700.hoverable:hover { background-color: #71e825; } .lightgreen-text { color: #8bc34a; } .lightgreen-text.color-50 { color: #f1f8e9; } .lightgreen-text.color-100 { color: #dcedc8; } .lightgreen-text.color-200 { color: #c5e1a5; } .lightgreen-text.color-300 { color: #aed581; } .lightgreen-text.color-400 { color: #9ccc65; } .lightgreen-text.color-600 { color: #7cb342; } .lightgreen-text.color-700 { color: #689f38; } .lightgreen-text.color-800 { color: #558b2f; } .lightgreen-text.color-900 { color: #33691e; } .lightgreen-text.color-a100 { color: #ccff90; } .lightgreen-text.color-a200 { color: #b2ff59; } .lightgreen-text.color-a400 { color: #76ff03; } .lightgreen-text.color-a700 { color: #64dd17; } .lime { background-color: #cddc39; } .lime.hoverable:hover { background-color: #d2e04f; } .lime.color-50 { background-color: #f9fbe7; } .lime.color-50.hoverable:hover { background-color: #fefffd; } .lime.color-100 { background-color: #f0f4c3; } .lime.color-100.hoverable:hover { background-color: #f5f8d9; } .lime.color-200 { background-color: #e6ee9c; } .lime.color-200.hoverable:hover { background-color: #ebf2b2; } .lime.color-300 { background-color: #dce775; } .lime.color-300.hoverable:hover { background-color: #e2eb8b; } .lime.color-400 { background-color: #d4e157; } .lime.color-400.hoverable:hover { background-color: #dae56d; } .lime.color-600 { background-color: #c0ca33; } .lime.color-600.hoverable:hover { background-color: #c7d046; } .lime.color-700 { background-color: #afb42b; } .lime.color-700.hoverable:hover { background-color: #c3c930; } .lime.color-800 { background-color: #9e9d24; } .lime.color-800.hoverable:hover { background-color: #b3b229; } .lime.color-900 { background-color: #827717; } .lime.color-900.hoverable:hover { background-color: #988b1b; } .lime.color-a100 { background-color: #f4ff81; } .lime.color-a100.hoverable:hover { background-color: #f6ff9b; } .lime.color-a200 { background-color: #eeff41; } .lime.color-a200.hoverable:hover { background-color: #f0ff5b; } .lime.color-a400 { background-color: #c6ff00; } .lime.color-a400.hoverable:hover { background-color: #ccff1a; } .lime.color-a700 { background-color: #aeea00; } .lime.color-a700.hoverable:hover { background-color: #bfff05; } .lime-text { color: #cddc39; } .lime-text.color-50 { color: #f9fbe7; } .lime-text.color-100 { color: #f0f4c3; } .lime-text.color-200 { color: #e6ee9c; } .lime-text.color-300 { color: #dce775; } .lime-text.color-400 { color: #d4e157; } .lime-text.color-600 { color: #c0ca33; } .lime-text.color-700 { color: #afb42b; } .lime-text.color-800 { color: #9e9d24; } .lime-text.color-900 { color: #827717; } .lime-text.color-a100 { color: #f4ff81; } .lime-text.color-a200 { color: #eeff41; } .lime-text.color-a400 { color: #c6ff00; } .lime-text.color-a700 { color: #aeea00; } .yellow { background-color: #ffeb3b; } .yellow.hoverable:hover { background-color: #fe5; } .yellow.color-50 { background-color: #fffde7; } .yellow.color-50.hoverable:hover { background-color: white; } .yellow.color-100 { background-color: #fff9c4; } .yellow.color-100.hoverable:hover { background-color: #fffcde; } .yellow.color-200 { background-color: #fff59d; } .yellow.color-200.hoverable:hover { background-color: #fff8b7; } .yellow.color-300 { background-color: #fff176; } .yellow.color-300.hoverable:hover { background-color: #fff490; } .yellow.color-400 { background-color: #ffee58; } .yellow.color-400.hoverable:hover { background-color: #fff172; } .yellow.color-600 { background-color: #fdd835; } .yellow.color-600.hoverable:hover { background-color: #fddd4e; } .yellow.color-700 { background-color: #fbc02d; } .yellow.color-700.hoverable:hover { background-color: #fbc846; } .yellow.color-800 { background-color: #f9a825; } .yellow.color-800.hoverable:hover { background-color: #fab23e; } .yellow.color-900 { background-color: #f57f17; } .yellow.color-900.hoverable:hover { background-color: #f68c2f; } .yellow.color-a100 { background-color: #ffff8d; } .yellow.color-a100.hoverable:hover { background-color: #ffffa7; } .yellow.color-a200 { background-color: #ff0; } .yellow.color-a200.hoverable:hover { background-color: #ffff1a; } .yellow.color-a400 { background-color: #ffea00; } .yellow.color-a400.hoverable:hover { background-color: #ffec1a; } .yellow.color-a700 { background-color: #ffd600; } .yellow.color-a700.hoverable:hover { background-color: #ffda1a; } .yellow-text { color: #ffeb3b; } .yellow-text.color-50 { color: #fffde7; } .yellow-text.color-100 { color: #fff9c4; } .yellow-text.color-200 { color: #fff59d; } .yellow-text.color-300 { color: #fff176; } .yellow-text.color-400 { color: #ffee58; } .yellow-text.color-600 { color: #fdd835; } .yellow-text.color-700 { color: #fbc02d; } .yellow-text.color-800 { color: #f9a825; } .yellow-text.color-900 { color: #f57f17; } .yellow-text.color-a100 { color: #ffff8d; } .yellow-text.color-a200 { color: #ff0; } .yellow-text.color-a400 { color: #ffea00; } .yellow-text.color-a700 { color: #ffd600; } .amber { background-color: #ffc107; } .amber.hoverable:hover { background-color: #ffc721; } .amber.color-50 { background-color: #fff8e1; } .amber.color-50.hoverable:hover { background-color: #fffefb; } .amber.color-100 { background-color: #ffecb3; } .amber.color-100.hoverable:hover { background-color: #fff2cd; } .amber.color-200 { background-color: #ffe082; } .amber.color-200.hoverable:hover { background-color: #ffe69c; } .amber.color-300 { background-color: #ffd54f; } .amber.color-300.hoverable:hover { background-color: #ffdb69; } .amber.color-400 { background-color: #ffca28; } .amber.color-400.hoverable:hover { background-color: #ffd042; } .amber.color-600 { background-color: #ffb300; } .amber.color-600.hoverable:hover { background-color: #ffbb1a; } .amber.color-700 { background-color: #ffa000; } .amber.color-700.hoverable:hover { background-color: #ffaa1a; } .amber.color-800 { background-color: #ff8f00; } .amber.color-800.hoverable:hover { background-color: #ff9a1a; } .amber.color-900 { background-color: #ff6f00; } .amber.color-900.hoverable:hover { background-color: #ff7d1a; } .amber.color-a100 { background-color: #ffe57f; } .amber.color-a100.hoverable:hover { background-color: #ffea99; } .amber.color-a200 { background-color: #ffd740; } .amber.color-a200.hoverable:hover { background-color: #ffdc5a; } .amber.color-a400 { background-color: #ffc400; } .amber.color-a400.hoverable:hover { background-color: #ffca1a; } .amber.color-a700 { background-color: #ffab00; } .amber.color-a700.hoverable:hover { background-color: #ffb31a; } .amber-text { color: #ffc107; } .amber-text.color-50 { color: #fff8e1; } .amber-text.color-100 { color: #ffecb3; } .amber-text.color-200 { color: #ffe082; } .amber-text.color-300 { color: #ffd54f; } .amber-text.color-400 { color: #ffca28; } .amber-text.color-600 { color: #ffb300; } .amber-text.color-700 { color: #ffa000; } .amber-text.color-800 { color: #ff8f00; } .amber-text.color-900 { color: #ff6f00; } .amber-text.color-a100 { color: #ffe57f; } .amber-text.color-a200 { color: #ffd740; } .amber-text.color-a400 { color: #ffc400; } .amber-text.color-a700 { color: #ffab00; } .orange { background-color: #ff9800; } .orange.hoverable:hover { background-color: #ffa21a; } .orange.color-50 { background-color: #fff3e0; } .orange.color-50.hoverable:hover { background-color: #fffdfa; } .orange.color-100 { background-color: #ffe0b2; } .orange.color-100.hoverable:hover { background-color: #ffeacc; } .orange.color-200 { background-color: #ffcc80; } .orange.color-200.hoverable:hover { background-color: #ffd69a; } .orange.color-300 { background-color: #ffb74d; } .orange.color-300.hoverable:hover { background-color: #ffc167; } .orange.color-400 { background-color: #ffa726; } .orange.color-400.hoverable:hover { background-color: #ffb140; } .orange.color-600 { background-color: #fb8c00; } .orange.color-600.hoverable:hover { background-color: #ff9816; } .orange.color-700 { background-color: #f57c00; } .orange.color-700.hoverable:hover { background-color: #ff8910; } .orange.color-800 { background-color: #ef6c00; } .orange.color-800.hoverable:hover { background-color: #ff780a; } .orange.color-900 { background-color: #e65100; } .orange.color-900.hoverable:hover { background-color: #ff5a01; } .orange.color-a100 { background-color: #ffd180; } .orange.color-a100.hoverable:hover { background-color: #ffda9a; } .orange.color-a200 { background-color: #ffab40; } .orange.color-a200.hoverable:hover { background-color: #ffb65a; } .orange.color-a400 { background-color: #ff9100; } .orange.color-a400.hoverable:hover { background-color: #ff9c1a; } .orange.color-a700 { background-color: #ff6d00; } .orange.color-a700.hoverable:hover { background-color: #ff7c1a; } .orange-text { color: #ff9800; } .orange-text.color-50 { color: #fff3e0; } .orange-text.color-100 { color: #ffe0b2; } .orange-text.color-200 { color: #ffcc80; } .orange-text.color-300 { color: #ffb74d; } .orange-text.color-400 { color: #ffa726; } .orange-text.color-600 { color: #fb8c00; } .orange-text.color-700 { color: #f57c00; } .orange-text.color-800 { color: #ef6c00; } .orange-text.color-900 { color: #e65100; } .orange-text.color-a100 { color: #ffd180; } .orange-text.color-a200 { color: #ffab40; } .orange-text.color-a400 { color: #ff9100; } .orange-text.color-a700 { color: #ff6d00; } .deeporange { background-color: #ff5722; } .deeporange.hoverable:hover { background-color: #ff6a3c; } .deeporange.color-50 { background-color: #fbe9e7; } .deeporange.color-50.hoverable:hover { background-color: #fffdfd; } .deeporange.color-100 { background-color: #ffccbc; } .deeporange.color-100.hoverable:hover { background-color: #ffdfd6; } .deeporange.color-200 { background-color: #ffab91; } .deeporange.color-200.hoverable:hover { background-color: #ffbeab; } .deeporange.color-300 { background-color: #ff8a65; } .deeporange.color-300.hoverable:hover { background-color: #ff9d7f; } .deeporange.color-400 { background-color: #ff7043; } .deeporange.color-400.hoverable:hover { background-color: #ff835d; } .deeporange.color-600 { background-color: #f4511e; } .deeporange.color-600.hoverable:hover { background-color: #f56436; } .deeporange.color-700 { background-color: #e64a19; } .deeporange.color-700.hoverable:hover { background-color: #e95c30; } .deeporange.color-800 { background-color: #d84315; } .deeporange.color-800.hoverable:hover { background-color: #e94d1d; } .deeporange.color-900 { background-color: #bf360c; } .deeporange.color-900.hoverable:hover { background-color: #d73d0e; } .deeporange.color-a100 { background-color: #ff9e80; } .deeporange.color-a100.hoverable:hover { background-color: #ffb19a; } .deeporange.color-a200 { background-color: #ff6e40; } .deeporange.color-a200.hoverable:hover { background-color: #ff815a; } .deeporange.color-a400 { background-color: #ff3d00; } .deeporange.color-a400.hoverable:hover { background-color: #ff501a; } .deeporange.color-a700 { background-color: #dd2c00; } .deeporange.color-a700.hoverable:hover { background-color: #f73100; } .deeporange-text { color: #ff5722; } .deeporange-text.color-50 { color: #fbe9e7; } .deeporange-text.color-100 { color: #ffccbc; } .deeporange-text.color-200 { color: #ffab91; } .deeporange-text.color-300 { color: #ff8a65; } .deeporange-text.color-400 { color: #ff7043; } .deeporange-text.color-600 { color: #f4511e; } .deeporange-text.color-700 { color: #e64a19; } .deeporange-text.color-800 { color: #d84315; } .deeporange-text.color-900 { color: #bf360c; } .deeporange-text.color-a100 { color: #ff9e80; } .deeporange-text.color-a200 { color: #ff6e40; } .deeporange-text.color-a400 { color: #ff3d00; } .deeporange-text.color-a700 { color: #dd2c00; } .brown { background-color: #795548; } .brown.hoverable:hover { background-color: #896052; } .brown.color-50 { background-color: #efebe9; } .brown.color-50.hoverable:hover { background-color: #faf8f8; } .brown.color-100 { background-color: #d7ccc8; } .brown.color-100.hoverable:hover { background-color: #e2dad7; } .brown.color-200 { background-color: #bcaaa4; } .brown.color-200.hoverable:hover { background-color: #c7b8b3; } .brown.color-300 { background-color: #a1887f; } .brown.color-300.hoverable:hover { background-color: #ac968e; } .brown.color-400 { background-color: #8d6e63; } .brown.color-400.hoverable:hover { background-color: #9a7b6f; } .brown.color-600 { background-color: #6d4c41; } .brown.color-600.hoverable:hover { background-color: #7d574b; } .brown.color-700 { background-color: #5d4037; } .brown.color-700.hoverable:hover { background-color: #6d4b40; } .brown.color-800 { background-color: #4e342e; } .brown.color-800.hoverable:hover { background-color: #5e3f37; } .brown.color-900 { background-color: #3e2723; } .brown.color-900.hoverable:hover { background-color: #4e312c; } .brown-text { color: #795548; } .brown-text.color-50 { color: #efebe9; } .brown-text.color-100 { color: #d7ccc8; } .brown-text.color-200 { color: #bcaaa4; } .brown-text.color-300 { color: #a1887f; } .brown-text.color-400 { color: #8d6e63; } .brown-text.color-600 { color: #6d4c41; } .brown-text.color-700 { color: #5d4037; } .brown-text.color-800 { color: #4e342e; } .brown-text.color-900 { color: #3e2723; } .gray { background-color: #9e9e9e; } .gray.hoverable:hover { background-color: #ababab; } .gray.color-50 { background-color: #fafafa; } .gray.color-50.hoverable:hover { background-color: white; } .gray.color-100 { background-color: #f5f5f5; } .gray.color-100.hoverable:hover { background-color: white; } .gray.color-200 { background-color: #eee; } .gray.color-200.hoverable:hover { background-color: #fbfbfb; } .gray.color-300 { background-color: #e0e0e0; } .gray.color-300.hoverable:hover { background-color: #ededed; } .gray.color-400 { background-color: #bdbdbd; } .gray.color-400.hoverable:hover { background-color: #cacaca; } .gray.color-600 { background-color: #757575; } .gray.color-600.hoverable:hover { background-color: #828282; } .gray.color-700 { background-color: #616161; } .gray.color-700.hoverable:hover { background-color: #6e6e6e; } .gray.color-800 { background-color: #424242; } .gray.color-800.hoverable:hover { background-color: #4f4f4f; } .gray.color-900 { background-color: #212121; } .gray.color-900.hoverable:hover { background-color: #2e2e2e; } .gray-text { color: #9e9e9e; } .gray-text.color-50 { color: #fafafa; } .gray-text.color-100 { color: #f5f5f5; } .gray-text.color-200 { color: #eee; } .gray-text.color-300 { color: #e0e0e0; } .gray-text.color-400 { color: #bdbdbd; } .gray-text.color-600 { color: #757575; } .gray-text.color-700 { color: #616161; } .gray-text.color-800 { color: #424242; } .gray-text.color-900 { color: #212121; } .bluegray { background-color: #607d8b; } .bluegray.hoverable:hover { background-color: #6b8a99; } .bluegray.color-50 { background-color: #eceff1; } .bluegray.color-50.hoverable:hover { background-color: #fbfbfc; } .bluegray.color-100 { background-color: #cfd8dc; } .bluegray.color-100.hoverable:hover { background-color: #dee4e7; } .bluegray.color-200 { background-color: #b0bec5; } .bluegray.color-200.hoverable:hover { background-color: #bfcad0; } .bluegray.color-300 { background-color: #90a4ae; } .bluegray.color-300.hoverable:hover { background-color: #9fb0b9; } .bluegray.color-400 { background-color: #78909c; } .bluegray.color-400.hoverable:hover { background-color: #879ca7; } .bluegray.color-600 { background-color: #546e7a; } .bluegray.color-600.hoverable:hover { background-color: #5e7c89; } .bluegray.color-700 { background-color: #455a64; } .bluegray.color-700.hoverable:hover { background-color: #4f6873; } .bluegray.color-800 { background-color: #37474f; } .bluegray.color-800.hoverable:hover { background-color: #41555e; } .bluegray.color-900 { background-color: #263238; } .bluegray.color-900.hoverable:hover { background-color: #304047; } .bluegray-text { color: #607d8b; } .bluegray-text.color-50 { color: #eceff1; } .bluegray-text.color-100 { color: #cfd8dc; } .bluegray-text.color-200 { color: #b0bec5; } .bluegray-text.color-300 { color: #90a4ae; } .bluegray-text.color-400 { color: #78909c; } .bluegray-text.color-600 { color: #546e7a; } .bluegray-text.color-700 { color: #455a64; } .bluegray-text.color-800 { color: #37474f; } .bluegray-text.color-900 { color: #263238; } .black { background-color: #000; } .black.hoverable:hover { background-color: #0d0d0d; } .black-text { color: #000; } .white { background-color: #fff; } .white.hoverable:hover { background-color: white; } .white-text { color: #fff; } .elevation--z0 { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12); } .elevation--z1 { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12); } .elevation--z2 { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12); } .elevation--z3 { box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12); } .elevation--z4 { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12); } .elevation--z5 { box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12); } .elevation--z6 { box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12); } .elevation--z7 { box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12); } .elevation--z8 { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12); } .elevation--z9 { box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12); } .elevation--z10 { box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12); } .elevation--z11 { box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12); } .elevation--z12 { box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12); } .elevation--z13 { box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12); } .elevation--z14 { box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12); } .elevation--z15 { box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12); } .elevation--z16 { box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12); } .elevation--z17 { box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12); } .elevation--z18 { box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12); } .elevation--z19 { box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12); } .elevation--z20 { box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12); } .elevation--z21 { box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12); } .elevation--z22 { box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12); } .elevation--z23 { box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12); } .elevation--z24 { box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12); } .elevation-transition { transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1); will-change: box-shadow; } .red { background-color: #f44336; } .red.hoverable:hover { background-color: #f55a4e; } .red.color-50 { background-color: #ffebee; } .red.color-50.hoverable:hover { background-color: white; } .red.color-100 { background-color: #ffcdd2; } .red.color-100.hoverable:hover { background-color: #ffe7e9; } .red.color-200 { background-color: #ef9a9a; } .red.color-200.hoverable:hover { background-color: #f2b0b0; } .red.color-300 { background-color: #e57373; } .red.color-300.hoverable:hover { background-color: #e98989; } .red.color-400 { background-color: #ef5350; } .red.color-400.hoverable:hover { background-color: #f16a67; } .red.color-600 { background-color: #e53935; } .red.color-600.hoverable:hover { background-color: #e84f4c; } .red.color-700 { background-color: #d32f2f; } .red.color-700.hoverable:hover { background-color: #d74444; } .red.color-800 { background-color: #c62828; } .red.color-800.hoverable:hover { background-color: #d63232; } .red.color-900 { background-color: #b71c1c; } .red.color-900.hoverable:hover { background-color: #cd1f1f; } .red.color-a100 { background-color: #ff8a80; } .red.color-a100.hoverable:hover { background-color: #ffa19a; } .red.color-a200 { background-color: #ff5252; } .red.color-a200.hoverable:hover { background-color: #ff6c6c; } .red.color-a400 { background-color: #ff1744; } .red.color-a400.hoverable:hover { background-color: #ff3159; } .red.color-a700 { background-color: #d50000; } .red.color-a700.hoverable:hover { background-color: #ef0000; } .red-text { color: #f44336; } .red-text.color-50 { color: #ffebee; } .red-text.color-100 { color: #ffcdd2; } .red-text.color-200 { color: #ef9a9a; } .red-text.color-300 { color: #e57373; } .red-text.color-400 { color: #ef5350; } .red-text.color-600 { color: #e53935; } .red-text.color-700 { color: #d32f2f; } .red-text.color-800 { color: #c62828; } .red-text.color-900 { color: #b71c1c; } .red-text.color-a100 { color: #ff8a80; } .red-text.color-a200 { color: #ff5252; } .red-text.color-a400 { color: #ff1744; } .red-text.color-a700 { color: #d50000; } .pink { background-color: #e91e63; } .pink.hoverable:hover { background-color: #eb3573; } .pink.color-50 { background-color: #fce4ec; } .pink.color-50.hoverable:hover { background-color: #fffbfc; } .pink.color-100 { background-color: #f8bbd0; } .pink.color-100.hoverable:hover { background-color: #fad2e0; } .pink.color-200 { background-color: #f48fb1; } .pink.color-200.hoverable:hover { background-color: #f6a6c1; } .pink.color-300 { background-color: #f06292; } .pink.color-300.hoverable:hover { background-color: #f279a2; } .pink.color-400 { background-color: #ec407a; } .pink.color-400.hoverable:hover { background-color: #ee578a; } .pink.color-600 { background-color: #d81b60; } .pink.color-600.hoverable:hover { background-color: #e4286d; } .pink.color-700 { background-color: #c2185b; } .pink.color-700.hoverable:hover { background-color: #d91b66; } .pink.color-800 { background-color: #ad1457; } .pink.color-800.hoverable:hover { background-color: #c41762; } .pink.color-900 { background-color: #880e4f; } .pink.color-900.hoverable:hover { background-color: #9f105c; } .pink.color-a100 { background-color: #ff80ab; } .pink.color-a100.hoverable:hover { background-color: #ff9abc; } .pink.color-a200 { background-color: #ff4081; } .pink.color-a200.hoverable:hover { background-color: #ff5a92; } .pink.color-a400 { background-color: #f50057; } .pink.color-a400.hoverable:hover { background-color: #ff1065; } .pink.color-a700 { background-color: #c51162; } .pink.color-a700.hoverable:hover { background-color: #dc136e; } .pink-text { color: #e91e63; } .pink-text.color-50 { color: #fce4ec; } .pink-text.color-100 { color: #f8bbd0; } .pink-text.color-200 { color: #f48fb1; } .pink-text.color-300 { color: #f06292; } .pink-text.color-400 { color: #ec407a; } .pink-text.color-600 { color: #d81b60; } .pink-text.color-700 { color: #c2185b; } .pink-text.color-800 { color: #ad1457; } .pink-text.color-900 { color: #880e4f; } .pink-text.color-a100 { color: #ff80ab; } .pink-text.color-a200 { color: #ff4081; } .pink-text.color-a400 { color: #f50057; } .pink-text.color-a700 { color: #c51162; } .purple { background-color: #9c27b0; } .purple.hoverable:hover { background-color: #af2cc5; } .purple.color-50 { background-color: #f3e5f5; } .purple.color-50.hoverable:hover { background-color: #fcf7fc; } .purple.color-100 { background-color: #e1bee7; } .purple.color-100.hoverable:hover { background-color: #ead1ee; } .purple.color-200 { background-color: #ce93d8; } .purple.color-200.hoverable:hover { background-color: #d7a6df; } .purple.color-300 { background-color: #ba68c8; } .purple.color-300.hoverable:hover { background-color: #c37bcf; } .purple.color-400 { background-color: #ab47bc; } .purple.color-400.hoverable:hover { background-color: #b45ac3; } .purple.color-600 { background-color: #8e24aa; } .purple.color-600.hoverable:hover { background-color: #a028bf; } .purple.color-700 { background-color: #7b1fa2; } .purple.color-700.hoverable:hover { background-color: #8b23b7; } .purple.color-800 { background-color: #6a1b9a; } .purple.color-800.hoverable:hover { background-color: #791fb0; } .purple.color-900 { background-color: #4a148c; } .purple.color-900.hoverable:hover { background-color: #5617a2; } .purple.color-a100 { background-color: #ea80fc; } .purple.color-a100.hoverable:hover { background-color: #ee99fd; } .purple.color-a200 { background-color: #e040fb; } .purple.color-a200.hoverable:hover { background-color: #e459fc; } .purple.color-a400 { background-color: #d500f9; } .purple.color-a400.hoverable:hover { background-color: #dd14ff; } .purple.color-a700 { background-color: #a0f; } .purple.color-a700.hoverable:hover { background-color: #b31aff; } .purple-text { color: #9c27b0; } .purple-text.color-50 { color: #f3e5f5; } .purple-text.color-100 { color: #e1bee7; } .purple-text.color-200 { color: #ce93d8; } .purple-text.color-300 { color: #ba68c8; } .purple-text.color-400 { color: #ab47bc; } .purple-text.color-600 { color: #8e24aa; } .purple-text.color-700 { color: #7b1fa2; } .purple-text.color-800 { color: #6a1b9a; } .purple-text.color-900 { color: #4a148c; } .purple-text.color-a100 { color: #ea80fc; } .purple-text.color-a200 { color: #e040fb; } .purple-text.color-a400 { color: #d500f9; } .purple-text.color-a700 { color: #a0f; } .deeppurple { background-color: #673ab7; } .deeppurple.hoverable:hover { background-color: #7446c4; } .deeppurple.color-50 { background-color: #ede7f6; } .deeppurple.color-50.hoverable:hover { background-color: #fbfafd; } .deeppurple.color-100 { background-color: #d1c4e9; } .deeppurple.color-100.hoverable:hover { background-color: #dfd7f0; } .deeppurple.color-200 { background-color: #b39ddb; } .deeppurple.color-200.hoverable:hover { background-color: #c1b0e2; } .deeppurple.color-300 { background-color: #9575cd; } .deeppurple.color-300.hoverable:hover { background-color: #a388d4; } .deeppurple.color-400 { background-color: #7e57c2; } .deeppurple.color-400.hoverable:hover { background-color: #8c6ac9; } .deeppurple.color-600 { background-color: #5e35b1; } .deeppurple.color-600.hoverable:hover { background-color: #693bc4; } .deeppurple.color-700 { background-color: #512da8; } .deeppurple.color-700.hoverable:hover { background-color: #5b32bc; } .deeppurple.color-800 { background-color: #4527a0; } .deeppurple.color-800.hoverable:hover { background-color: #4e2cb5; } .deeppurple.color-900 { background-color: #311b92; } .deeppurple.color-900.hoverable:hover { background-color: #381fa8; } .deeppurple.color-a100 { background-color: #b388ff; } .deeppurple.color-a100.hoverable:hover { background-color: #c3a2ff; } .deeppurple.color-a200 { background-color: #7c4dff; } .deeppurple.color-a200.hoverable:hover { background-color: #8f67ff; } .deeppurple.color-a400 { background-color: #651fff; } .deeppurple.color-a400.hoverable:hover { background-color: #7739ff; } .deeppurple.color-a700 { background-color: #6200ea; } .deeppurple.color-a700.hoverable:hover { background-color: #6d05ff; } .deeppurple-text { color: #673ab7; } .deeppurple-text.color-50 { color: #ede7f6; } .deeppurple-text.color-100 { color: #d1c4e9; } .deeppurple-text.color-200 { color: #b39ddb; } .deeppurple-text.color-300 { color: #9575cd; } .deeppurple-text.color-400 { color: #7e57c2; } .deeppurple-text.color-600 { color: #5e35b1; } .deeppurple-text.color-700 { color: #512da8; } .deeppurple-text.color-800 { color: #4527a0; } .deeppurple-text.color-900 { color: #311b92; } .deeppurple-text.color-a100 { color: #b388ff; } .deeppurple-text.color-a200 { color: #7c4dff; } .deeppurple-text.color-a400 { color: #651fff; } .deeppurple-text.color-a700 { color: #6200ea; } .indigo { background-color: #3f51b5; } .indigo.hoverable:hover { background-color: #4d5ec1; } .indigo.color-50 { background-color: #e8eaf6; } .indigo.color-50.hoverable:hover { background-color: #fafbfd; } .indigo.color-100 { background-color: #c5cae9; } .indigo.color-100.hoverable:hover { background-color: #d7dbf0; } .indigo.color-200 { background-color: #9fa8da; } .indigo.color-200.hoverable:hover { background-color: #b1b9e1; } .indigo.color-300 { background-color: #7986cb; } .indigo.color-300.hoverable:hover { background-color: #8b97d2; } .indigo.color-400 { background-color: #5c6bc0; } .indigo.color-400.hoverable:hover { background-color: #6e7cc7; } .indigo.color-600 { background-color: #3949ab; } .indigo.color-600.hoverable:hover { background-color: #3f51be; } .indigo.color-700 { background-color: #303f9f; } .indigo.color-700.hoverable:hover { background-color: #3647b3; } .indigo.color-800 { background-color: #283593; } .indigo.color-800.hoverable:hover { background-color: #2d3ca7; } .indigo.color-900 { background-color: #1a237e; } .indigo.color-900.hoverable:hover { background-color: #1e2993; } .indigo.color-a100 { background-color: #8c9eff; } .indigo.color-a100.hoverable:hover { background-color: #a6b4ff; } .indigo.color-a200 { background-color: #536dfe; } .indigo.color-a200.hoverable:hover { background-color: #6c83fe; } .indigo.color-a400 { background-color: #3d5afe; } .indigo.color-a400.hoverable:hover { background-color: #5670fe; } .indigo.color-a700 { background-color: #304ffe; } .indigo.color-a700.hoverable:hover { background-color: #4965fe; } .indigo-text { color: #3f51b5; } .indigo-text.color-50 { color: #e8eaf6; } .indigo-text.color-100 { color: #c5cae9; } .indigo-text.color-200 { color: #9fa8da; } .indigo-text.color-300 { color: #7986cb; } .indigo-text.color-400 { color: #5c6bc0; } .indigo-text.color-600 { color: #3949ab; } .indigo-text.color-700 { color: #303f9f; } .indigo-text.color-800 { color: #283593; } .indigo-text.color-900 { color: #1a237e; } .indigo-text.color-a100 { color: #8c9eff; } .indigo-text.color-a200 { color: #536dfe; } .indigo-text.color-a400 { color: #3d5afe; } .indigo-text.color-a700 { color: #304ffe; } .blue { background-color: #2196f3; } .blue.hoverable:hover { background-color: #39a1f4; } .blue.color-50 { background-color: #e3f2fd; } .blue.color-50.hoverable:hover { background-color: #fbfdff; } .blue.color-100 { background-color: #bbdefb; } .blue.color-100.hoverable:hover { background-color: #d3eafc; } .blue.color-200 { background-color: #90caf9; } .blue.color-200.hoverable:hover { background-color: #a8d6fa; } .blue.color-300 { background-color: #64b5f6; } .blue.color-300.hoverable:hover { background-color: #7cc1f7; } .blue.color-400 { background-color: #42a5f5; } .blue.color-400.hoverable:hover { background-color: #5ab1f6; } .blue.color-600 { background-color: #1e88e5; } .blue.color-600.hoverable:hover { background-color: #3594e8; } .blue.color-700 { background-color: #1976d2; } .blue.color-700.hoverable:hover { background-color: #2083e4; } .blue.color-800 { background-color: #1565c0; } .blue.color-800.hoverable:hover { background-color: #1871d7; } .blue.color-900 { background-color: #0d47a1; } .blue.color-900.hoverable:hover { background-color: #0f51b9; } .blue.color-a100 { background-color: #82b1ff; } .blue.color-a100.hoverable:hover { background-color: #9cc1ff; } .blue.color-a200 { background-color: #448aff; } .blue.color-a200.hoverable:hover { background-color: #5e9aff; } .blue.color-a400 { background-color: #2979ff; } .blue.color-a400.hoverable:hover { background-color: #4389ff; } .blue.color-a700 { background-color: #2962ff; } .blue.color-a700.hoverable:hover { background-color: #4375ff; } .blue-text { color: #2196f3; } .blue-text.color-50 { color: #e3f2fd; } .blue-text.color-100 { color: #bbdefb; } .blue-text.color-200 { color: #90caf9; } .blue-text.color-300 { color: #64b5f6; } .blue-text.color-400 { color: #42a5f5; } .blue-text.color-600 { color: #1e88e5; } .blue-text.color-700 { color: #1976d2; } .blue-text.color-800 { color: #1565c0; } .blue-text.color-900 { color: #0d47a1; } .blue-text.color-a100 { color: #82b1ff; } .blue-text.color-a200 { color: #448aff; } .blue-text.color-a400 { color: #2979ff; } .blue-text.color-a700 { color: #2962ff; } .lightblue { background-color: #03a9f4; } .lightblue.hoverable:hover { background-color: #14b4fc; } .lightblue.color-50 { background-color: #e1f5fe; } .lightblue.color-50.hoverable:hover { background-color: #fafdff; } .lightblue.color-100 { background-color: #b3e5fc; } .lightblue.color-100.hoverable:hover { background-color: #ccedfd; } .lightblue.color-200 { background-color: #81d4fa; } .lightblue.color-200.hoverable:hover { background-color: #9adcfb; } .lightblue.color-300 { background-color: #4fc3f7; } .lightblue.color-300.hoverable:hover { background-color: #67cbf8; } .lightblue.color-400 { background-color: #29b6f6; } .lightblue.color-400.hoverable:hover { background-color: #41bef7; } .lightblue.color-600 { background-color: #039be5; } .lightblue.color-600.hoverable:hover { background-color: #06abfc; } .lightblue.color-700 { background-color: #0288d1; } .lightblue.color-700.hoverable:hover { background-color: #0298ea; } .lightblue.color-800 { background-color: #0277bd; } .lightblue.color-800.hoverable:hover { background-color: #0287d6; } .lightblue.color-900 { background-color: #01579b; } .lightblue.color-900.hoverable:hover { background-color: #0165b4; } .lightblue.color-a100 { background-color: #80d8ff; } .lightblue.color-a100.hoverable:hover { background-color: #9ae0ff; } .lightblue.color-a200 { background-color: #40c4ff; } .lightblue.color-a200.hoverable:hover { background-color: #5accff; } .lightblue.color-a400 { background-color: #00b0ff; } .lightblue.color-a400.hoverable:hover { background-color: #1ab8ff; } .lightblue.color-a700 { background-color: #0091ea; } .lightblue.color-a700.hoverable:hover { background-color: #05a0ff; } .lightblue-text { color: #03a9f4; } .lightblue-text.color-50 { color: #e1f5fe; } .lightblue-text.color-100 { color: #b3e5fc; } .lightblue-text.color-200 { color: #81d4fa; } .lightblue-text.color-300 { color: #4fc3f7; } .lightblue-text.color-400 { color: #29b6f6; } .lightblue-text.color-600 { color: #039be5; } .lightblue-text.color-700 { color: #0288d1; } .lightblue-text.color-800 { color: #0277bd; } .lightblue-text.color-900 { color: #01579b; } .lightblue-text.color-a100 { color: #80d8ff; } .lightblue-text.color-a200 { color: #40c4ff; } .lightblue-text.color-a400 { color: #00b0ff; } .lightblue-text.color-a700 { color: #0091ea; } .cyan { background-color: #00bcd4; } .cyan.hoverable:hover { background-color: #00d3ee; } .cyan.color-50 { background-color: #e0f7fa; } .cyan.color-50.hoverable:hover { background-color: #f6fdfe; } .cyan.color-100 { background-color: #b2ebf2; } .cyan.color-100.hoverable:hover { background-color: #c8f1f6; } .cyan.color-200 { background-color: #80deea; } .cyan.color-200.hoverable:hover { background-color: #96e4ee; } .cyan.color-300 { background-color: #4dd0e1; } .cyan.color-300.hoverable:hover { background-color: #63d6e5; } .cyan.color-400 { background-color: #26c6da; } .cyan.color-400.hoverable:hover { background-color: #3cccde; } .cyan.color-600 { background-color: #00acc1; } .cyan.color-600.hoverable:hover { background-color: #00c3db; } .cyan.color-700 { background-color: #0097a7; } .cyan.color-700.hoverable:hover { background-color: #00aec1; } .cyan.color-800 { background-color: #00838f; } .cyan.color-800.hoverable:hover { background-color: #009aa9; } .cyan.color-900 { background-color: #006064; } .cyan.color-900.hoverable:hover { background-color: #00787e; } .cyan.color-a100 { background-color: #84ffff; } .cyan.color-a100.hoverable:hover { background-color: #9effff; } .cyan.color-a200 { background-color: #18ffff; } .cyan.color-a200.hoverable:hover { background-color: #32ffff; } .cyan.color-a400 { background-color: #00e5ff; } .cyan.color-a400.hoverable:hover { background-color: #1ae8ff; } .cyan.color-a700 { background-color: #00b8d4; } .cyan.color-a700.hoverable:hover { background-color: #00ceee; } .cyan-text { color: #00bcd4; } .cyan-text.color-50 { color: #e0f7fa; } .cyan-text.color-100 { color: #b2ebf2; } .cyan-text.color-200 { color: #80deea; } .cyan-text.color-300 { color: #4dd0e1; } .cyan-text.color-400 { color: #26c6da; } .cyan-text.color-600 { color: #00acc1; } .cyan-text.color-700 { color: #0097a7; } .cyan-text.color-800 { color: #00838f; } .cyan-text.color-900 { color: #006064; } .cyan-text.color-a100 { color: #84ffff; } .cyan-text.color-a200 { color: #18ffff; } .cyan-text.color-a400 { color: #00e5ff; } .cyan-text.color-a700 { color: #00b8d4; } .teal { background-color: #009688; } .teal.hoverable:hover { background-color: #00b09f; } .teal.color-50 { background-color: #e0f2f1; } .teal.color-50.hoverable:hover { background-color: #f2faf9; } .teal.color-100 { background-color: #b2dfdb; } .teal.color-100.hoverable:hover { background-color: #c4e6e3; } .teal.color-200 { background-color: #80cbc4; } .teal.color-200.hoverable:hover { background-color: #92d2cc; } .teal.color-300 { background-color: #4db6ac; } .teal.color-300.hoverable:hover { background-color: #5fbdb4; } .teal.color-400 { background-color: #26a69a; } .teal.color-400.hoverable:hover { background-color: #2bbbad; } .teal.color-600 { background-color: #00897b; } .teal.color-600.hoverable:hover { background-color: #00a392; } .teal.color-700 { background-color: #00796b; } .teal.color-700.hoverable:hover { background-color: #009382; } .teal.color-800 { background-color: #00695c; } .teal.color-800.hoverable:hover { background-color: #008372; } .teal.color-900 { background-color: #004d40; } .teal.color-900.hoverable:hover { background-color: #006755; } .teal.color-a100 { background-color: #a7ffeb; } .teal.color-a100.hoverable:hover { background-color: #c1fff1; } .teal.color-a200 { background-color: #64ffda; } .teal.color-a200.hoverable:hover { background-color: #7effe0; } .teal.color-a400 { background-color: #1de9b6; } .teal.color-a400.hoverable:hover { background-color: #34ebbe; } .teal.color-a700 { background-color: #00bfa5; } .teal.color-a700.hoverable:hover { background-color: #00d9bb; } .teal-text { color: #009688; } .teal-text.color-50 { color: #e0f2f1; } .teal-text.color-100 { color: #b2dfdb; } .teal-text.color-200 { color: #80cbc4; } .teal-text.color-300 { color: #4db6ac; } .teal-text.color-400 { color: #26a69a; } .teal-text.color-600 { color: #00897b; } .teal-text.color-700 { color: #00796b; } .teal-text.color-800 { color: #00695c; } .teal-text.color-900 { color: #004d40; } .teal-text.color-a100 { color: #a7ffeb; } .teal-text.color-a200 { color: #64ffda; } .teal-text.color-a400 { color: #1de9b6; } .teal-text.color-a700 { color: #00bfa5; } .green { background-color: #4caf50; } .green.hoverable:hover { background-color: #5cb860; } .green.color-50 { background-color: #e8f5e9; } .green.color-50.hoverable:hover { background-color: #fafdfa; } .green.color-100 { background-color: #c8e6c9; } .green.color-100.hoverable:hover { background-color: #daeeda; } .green.color-200 { background-color: #a5d6a7; } .green.color-200.hoverable:hover { background-color: #b7deb8; } .green.color-300 { background-color: #81c784; } .green.color-300.hoverable:hover { background-color: #93cf95; } .green.color-400 { background-color: #66bb6a; } .green.color-400.hoverable:hover { background-color: #78c37b; } .green.color-600 { background-color: #43a047; } .green.color-600.hoverable:hover { background-color: #4bb24f; } .green.color-700 { background-color: #388e3c; } .green.color-700.hoverable:hover { background-color: #3fa044; } .green.color-800 { background-color: #2e7d32; } .green.color-800.hoverable:hover { background-color: #359039; } .green.color-900 { background-color: #1b5e20; } .green.color-900.hoverable:hover { background-color: #217227; } .green.color-a100 { background-color: #b9f6ca; } .green.color-a100.hoverable:hover { background-color: #d0f9db; } .green.color-a200 { background-color: #69f0ae; } .green.color-a200.hoverable:hover { background-color: #80f2bb; } .green.color-a400 { background-color: #00e676; } .green.color-a400.hoverable:hover { background-color: #01ff83; } .green.color-a700 { background-color: #00c853; } .green.color-a700.hoverable:hover { background-color: #00e25e; } .green-text { color: #4caf50; } .green-text.color-50 { color: #e8f5e9; } .green-text.color-100 { color: #c8e6c9; } .green-text.color-200 { color: #a5d6a7; } .green-text.color-300 { color: #81c784; } .green-text.color-400 { color: #66bb6a; } .green-text.color-600 { color: #43a047; } .green-text.color-700 { color: #388e3c; } .green-text.color-800 { color: #2e7d32; } .green-text.color-900 { color: #1b5e20; } .green-text.color-a100 { color: #b9f6ca; } .green-text.color-a200 { color: #69f0ae; } .green-text.color-a400 { color: #00e676; } .green-text.color-a700 { color: #00c853; } .lightgreen { background-color: #8bc34a; } .lightgreen.hoverable:hover { background-color: #97c95d; } .lightgreen.color-50 { background-color: #f1f8e9; } .lightgreen.color-50.hoverable:hover { background-color: #fdfefc; } .lightgreen.color-100 { background-color: #dcedc8; } .lightgreen.color-100.hoverable:hover { background-color: #e8f3db; } .lightgreen.color-200 { background-color: #c5e1a5; } .lightgreen.color-200.hoverable:hover { background-color: #d1e7b8; } .lightgreen.color-300 { background-color: #aed581; } .lightgreen.color-300.hoverable:hover { background-color: #badb94; } .lightgreen.color-400 { background-color: #9ccc65; } .lightgreen.color-400.hoverable:hover { background-color: #a8d278; } .lightgreen.color-600 { background-color: #7cb342; } .lightgreen.color-600.hoverable:hover { background-color: #89be50; } .lightgreen.color-700 { background-color: #689f38; } .lightgreen.color-700.hoverable:hover { background-color: #74b23f; } .lightgreen.color-800 { background-color: #558b2f; } .lightgreen.color-800.hoverable:hover { background-color: #619e35; } .lightgreen.color-900 { background-color: #33691e; } .lightgreen.color-900.hoverable:hover { background-color: #3d7d24; } .lightgreen.color-a100 { background-color: #ccff90; } .lightgreen.color-a100.hoverable:hover { background-color: #d8ffaa; } .lightgreen.color-a200 { background-color: #b2ff59; } .lightgreen.color-a200.hoverable:hover { background-color: #beff73; } .lightgreen.color-a400 { background-color: #76ff03; } .lightgreen.color-a400.hoverable:hover { background-color: #84ff1d; } .lightgreen.color-a700 { background-color: #64dd17; } .lightgreen.color-a700.hoverable:hover { background-color: #71e825; } .lightgreen-text { color: #8bc34a; } .lightgreen-text.color-50 { color: #f1f8e9; } .lightgreen-text.color-100 { color: #dcedc8; } .lightgreen-text.color-200 { color: #c5e1a5; } .lightgreen-text.color-300 { color: #aed581; } .lightgreen-text.color-400 { color: #9ccc65; } .lightgreen-text.color-600 { color: #7cb342; } .lightgreen-text.color-700 { color: #689f38; } .lightgreen-text.color-800 { color: #558b2f; } .lightgreen-text.color-900 { color: #33691e; } .lightgreen-text.color-a100 { color: #ccff90; } .lightgreen-text.color-a200 { color: #b2ff59; } .lightgreen-text.color-a400 { color: #76ff03; } .lightgreen-text.color-a700 { color: #64dd17; } .lime { background-color: #cddc39; } .lime.hoverable:hover { background-color: #d2e04f; } .lime.color-50 { background-color: #f9fbe7; } .lime.color-50.hoverable:hover { background-color: #fefffd; } .lime.color-100 { background-color: #f0f4c3; } .lime.color-100.hoverable:hover { background-color: #f5f8d9; } .lime.color-200 { background-color: #e6ee9c; } .lime.color-200.hoverable:hover { background-color: #ebf2b2; } .lime.color-300 { background-color: #dce775; } .lime.color-300.hoverable:hover { background-color: #e2eb8b; } .lime.color-400 { background-color: #d4e157; } .lime.color-400.hoverable:hover { background-color: #dae56d; } .lime.color-600 { background-color: #c0ca33; } .lime.color-600.hoverable:hover { background-color: #c7d046; } .lime.color-700 { background-color: #afb42b; } .lime.color-700.hoverable:hover { background-color: #c3c930; } .lime.color-800 { background-color: #9e9d24; } .lime.color-800.hoverable:hover { background-color: #b3b229; } .lime.color-900 { background-color: #827717; } .lime.color-900.hoverable:hover { background-color: #988b1b; } .lime.color-a100 { background-color: #f4ff81; } .lime.color-a100.hoverable:hover { background-color: #f6ff9b; } .lime.color-a200 { background-color: #eeff41; } .lime.color-a200.hoverable:hover { background-color: #f0ff5b; } .lime.color-a400 { background-color: #c6ff00; } .lime.color-a400.hoverable:hover { background-color: #ccff1a; } .lime.color-a700 { background-color: #aeea00; } .lime.color-a700.hoverable:hover { background-color: #bfff05; } .lime-text { color: #cddc39; } .lime-text.color-50 { color: #f9fbe7; } .lime-text.color-100 { color: #f0f4c3; } .lime-text.color-200 { color: #e6ee9c; } .lime-text.color-300 { color: #dce775; } .lime-text.color-400 { color: #d4e157; } .lime-text.color-600 { color: #c0ca33; } .lime-text.color-700 { color: #afb42b; } .lime-text.color-800 { color: #9e9d24; } .lime-text.color-900 { color: #827717; } .lime-text.color-a100 { color: #f4ff81; } .lime-text.color-a200 { color: #eeff41; } .lime-text.color-a400 { color: #c6ff00; } .lime-text.color-a700 { color: #aeea00; } .yellow { background-color: #ffeb3b; } .yellow.hoverable:hover { background-color: #fe5; } .yellow.color-50 { background-color: #fffde7; } .yellow.color-50.hoverable:hover { background-color: white; } .yellow.color-100 { background-color: #fff9c4; } .yellow.color-100.hoverable:hover { background-color: #fffcde; } .yellow.color-200 { background-color: #fff59d; } .yellow.color-200.hoverable:hover { background-color: #fff8b7; } .yellow.color-300 { background-color: #fff176; } .yellow.color-300.hoverable:hover { background-color: #fff490; } .yellow.color-400 { background-color: #ffee58; } .yellow.color-400.hoverable:hover { background-color: #fff172; } .yellow.color-600 { background-color: #fdd835; } .yellow.color-600.hoverable:hover { background-color: #fddd4e; } .yellow.color-700 { background-color: #fbc02d; } .yellow.color-700.hoverable:hover { background-color: #fbc846; } .yellow.color-800 { background-color: #f9a825; } .yellow.color-800.hoverable:hover { background-color: #fab23e; } .yellow.color-900 { background-color: #f57f17; } .yellow.color-900.hoverable:hover { background-color: #f68c2f; } .yellow.color-a100 { background-color: #ffff8d; } .yellow.color-a100.hoverable:hover { background-color: #ffffa7; } .yellow.color-a200 { background-color: #ff0; } .yellow.color-a200.hoverable:hover { background-color: #ffff1a; } .yellow.color-a400 { background-color: #ffea00; } .yellow.color-a400.hoverable:hover { background-color: #ffec1a; } .yellow.color-a700 { background-color: #ffd600; } .yellow.color-a700.hoverable:hover { background-color: #ffda1a; } .yellow-text { color: #ffeb3b; } .yellow-text.color-50 { color: #fffde7; } .yellow-text.color-100 { color: #fff9c4; } .yellow-text.color-200 { color: #fff59d; } .yellow-text.color-300 { color: #fff176; } .yellow-text.color-400 { color: #ffee58; } .yellow-text.color-600 { color: #fdd835; } .yellow-text.color-700 { color: #fbc02d; } .yellow-text.color-800 { color: #f9a825; } .yellow-text.color-900 { color: #f57f17; } .yellow-text.color-a100 { color: #ffff8d; } .yellow-text.color-a200 { color: #ff0; } .yellow-text.color-a400 { color: #ffea00; } .yellow-text.color-a700 { color: #ffd600; } .amber { background-color: #ffc107; } .amber.hoverable:hover { background-color: #ffc721; } .amber.color-50 { background-color: #fff8e1; } .amber.color-50.hoverable:hover { background-color: #fffefb; } .amber.color-100 { background-color: #ffecb3; } .amber.color-100.hoverable:hover { background-color: #fff2cd; } .amber.color-200 { background-color: #ffe082; } .amber.color-200.hoverable:hover { background-color: #ffe69c; } .amber.color-300 { background-color: #ffd54f; } .amber.color-300.hoverable:hover { background-color: #ffdb69; } .amber.color-400 { background-color: #ffca28; } .amber.color-400.hoverable:hover { background-color: #ffd042; } .amber.color-600 { background-color: #ffb300; } .amber.color-600.hoverable:hover { background-color: #ffbb1a; } .amber.color-700 { background-color: #ffa000; } .amber.color-700.hoverable:hover { background-color: #ffaa1a; } .amber.color-800 { background-color: #ff8f00; } .amber.color-800.hoverable:hover { background-color: #ff9a1a; } .amber.color-900 { background-color: #ff6f00; } .amber.color-900.hoverable:hover { background-color: #ff7d1a; } .amber.color-a100 { background-color: #ffe57f; } .amber.color-a100.hoverable:hover { background-color: #ffea99; } .amber.color-a200 { background-color: #ffd740; } .amber.color-a200.hoverable:hover { background-color: #ffdc5a; } .amber.color-a400 { background-color: #ffc400; } .amber.color-a400.hoverable:hover { background-color: #ffca1a; } .amber.color-a700 { background-color: #ffab00; } .amber.color-a700.hoverable:hover { background-color: #ffb31a; } .amber-text { color: #ffc107; } .amber-text.color-50 { color: #fff8e1; } .amber-text.color-100 { color: #ffecb3; } .amber-text.color-200 { color: #ffe082; } .amber-text.color-300 { color: #ffd54f; } .amber-text.color-400 { color: #ffca28; } .amber-text.color-600 { color: #ffb300; } .amber-text.color-700 { color: #ffa000; } .amber-text.color-800 { color: #ff8f00; } .amber-text.color-900 { color: #ff6f00; } .amber-text.color-a100 { color: #ffe57f; } .amber-text.color-a200 { color: #ffd740; } .amber-text.color-a400 { color: #ffc400; } .amber-text.color-a700 { color: #ffab00; } .orange { background-color: #ff9800; } .orange.hoverable:hover { background-color: #ffa21a; } .orange.color-50 { background-color: #fff3e0; } .orange.color-50.hoverable:hover { background-color: #fffdfa; } .orange.color-100 { background-color: #ffe0b2; } .orange.color-100.hoverable:hover { background-color: #ffeacc; } .orange.color-200 { background-color: #ffcc80; } .orange.color-200.hoverable:hover { background-color: #ffd69a; } .orange.color-300 { background-color: #ffb74d; } .orange.color-300.hoverable:hover { background-color: #ffc167; } .orange.color-400 { background-color: #ffa726; } .orange.color-400.hoverable:hover { background-color: #ffb140; } .orange.color-600 { background-color: #fb8c00; } .orange.color-600.hoverable:hover { background-color: #ff9816; } .orange.color-700 { background-color: #f57c00; } .orange.color-700.hoverable:hover { background-color: #ff8910; } .orange.color-800 { background-color: #ef6c00; } .orange.color-800.hoverable:hover { background-color: #ff780a; } .orange.color-900 { background-color: #e65100; } .orange.color-900.hoverable:hover { background-color: #ff5a01; } .orange.color-a100 { background-color: #ffd180; } .orange.color-a100.hoverable:hover { background-color: #ffda9a; } .orange.color-a200 { background-color: #ffab40; } .orange.color-a200.hoverable:hover { background-color: #ffb65a; } .orange.color-a400 { background-color: #ff9100; } .orange.color-a400.hoverable:hover { background-color: #ff9c1a; } .orange.color-a700 { background-color: #ff6d00; } .orange.color-a700.hoverable:hover { background-color: #ff7c1a; } .orange-text { color: #ff9800; } .orange-text.color-50 { color: #fff3e0; } .orange-text.color-100 { color: #ffe0b2; } .orange-text.color-200 { color: #ffcc80; } .orange-text.color-300 { color: #ffb74d; } .orange-text.color-400 { color: #ffa726; } .orange-text.color-600 { color: #fb8c00; } .orange-text.color-700 { color: #f57c00; } .orange-text.color-800 { color: #ef6c00; } .orange-text.color-900 { color: #e65100; } .orange-text.color-a100 { color: #ffd180; } .orange-text.color-a200 { color: #ffab40; } .orange-text.color-a400 { color: #ff9100; } .orange-text.color-a700 { color: #ff6d00; } .deeporange { background-color: #ff5722; } .deeporange.hoverable:hover { background-color: #ff6a3c; } .deeporange.color-50 { background-color: #fbe9e7; } .deeporange.color-50.hoverable:hover { background-color: #fffdfd; } .deeporange.color-100 { background-color: #ffccbc; } .deeporange.color-100.hoverable:hover { background-color: #ffdfd6; } .deeporange.color-200 { background-color: #ffab91; } .deeporange.color-200.hoverable:hover { background-color: #ffbeab; } .deeporange.color-300 { background-color: #ff8a65; } .deeporange.color-300.hoverable:hover { background-color: #ff9d7f; } .deeporange.color-400 { background-color: #ff7043; } .deeporange.color-400.hoverable:hover { background-color: #ff835d; } .deeporange.color-600 { background-color: #f4511e; } .deeporange.color-600.hoverable:hover { background-color: #f56436; } .deeporange.color-700 { background-color: #e64a19; } .deeporange.color-700.hoverable:hover { background-color: #e95c30; } .deeporange.color-800 { background-color: #d84315; } .deeporange.color-800.hoverable:hover { background-color: #e94d1d; } .deeporange.color-900 { background-color: #bf360c; } .deeporange.color-900.hoverable:hover { background-color: #d73d0e; } .deeporange.color-a100 { background-color: #ff9e80; } .deeporange.color-a100.hoverable:hover { background-color: #ffb19a; } .deeporange.color-a200 { background-color: #ff6e40; } .deeporange.color-a200.hoverable:hover { background-color: #ff815a; } .deeporange.color-a400 { background-color: #ff3d00; } .deeporange.color-a400.hoverable:hover { background-color: #ff501a; } .deeporange.color-a700 { background-color: #dd2c00; } .deeporange.color-a700.hoverable:hover { background-color: #f73100; } .deeporange-text { color: #ff5722; } .deeporange-text.color-50 { color: #fbe9e7; } .deeporange-text.color-100 { color: #ffccbc; } .deeporange-text.color-200 { color: #ffab91; } .deeporange-text.color-300 { color: #ff8a65; } .deeporange-text.color-400 { color: #ff7043; } .deeporange-text.color-600 { color: #f4511e; } .deeporange-text.color-700 { color: #e64a19; } .deeporange-text.color-800 { color: #d84315; } .deeporange-text.color-900 { color: #bf360c; } .deeporange-text.color-a100 { color: #ff9e80; } .deeporange-text.color-a200 { color: #ff6e40; } .deeporange-text.color-a400 { color: #ff3d00; } .deeporange-text.color-a700 { color: #dd2c00; } .brown { background-color: #795548; } .brown.hoverable:hover { background-color: #896052; } .brown.color-50 { background-color: #efebe9; } .brown.color-50.hoverable:hover { background-color: #faf8f8; } .brown.color-100 { background-color: #d7ccc8; } .brown.color-100.hoverable:hover { background-color: #e2dad7; } .brown.color-200 { background-color: #bcaaa4; } .brown.color-200.hoverable:hover { background-color: #c7b8b3; } .brown.color-300 { background-color: #a1887f; } .brown.color-300.hoverable:hover { background-color: #ac968e; } .brown.color-400 { background-color: #8d6e63; } .brown.color-400.hoverable:hover { background-color: #9a7b6f; } .brown.color-600 { background-color: #6d4c41; } .brown.color-600.hoverable:hover { background-color: #7d574b; } .brown.color-700 { background-color: #5d4037; } .brown.color-700.hoverable:hover { background-color: #6d4b40; } .brown.color-800 { background-color: #4e342e; } .brown.color-800.hoverable:hover { background-color: #5e3f37; } .brown.color-900 { background-color: #3e2723; } .brown.color-900.hoverable:hover { background-color: #4e312c; } .brown-text { color: #795548; } .brown-text.color-50 { color: #efebe9; } .brown-text.color-100 { color: #d7ccc8; } .brown-text.color-200 { color: #bcaaa4; } .brown-text.color-300 { color: #a1887f; } .brown-text.color-400 { color: #8d6e63; } .brown-text.color-600 { color: #6d4c41; } .brown-text.color-700 { color: #5d4037; } .brown-text.color-800 { color: #4e342e; } .brown-text.color-900 { color: #3e2723; } .gray { background-color: #9e9e9e; } .gray.hoverable:hover { background-color: #ababab; } .gray.color-50 { background-color: #fafafa; } .gray.color-50.hoverable:hover { background-color: white; } .gray.color-100 { background-color: #f5f5f5; } .gray.color-100.hoverable:hover { background-color: white; } .gray.color-200 { background-color: #eee; } .gray.color-200.hoverable:hover { background-color: #fbfbfb; } .gray.color-300 { background-color: #e0e0e0; } .gray.color-300.hoverable:hover { background-color: #ededed; } .gray.color-400 { background-color: #bdbdbd; } .gray.color-400.hoverable:hover { background-color: #cacaca; } .gray.color-600 { background-color: #757575; } .gray.color-600.hoverable:hover { background-color: #828282; } .gray.color-700 { background-color: #616161; } .gray.color-700.hoverable:hover { background-color: #6e6e6e; } .gray.color-800 { background-color: #424242; } .gray.color-800.hoverable:hover { background-color: #4f4f4f; } .gray.color-900 { background-color: #212121; } .gray.color-900.hoverable:hover { background-color: #2e2e2e; } .gray-text { color: #9e9e9e; } .gray-text.color-50 { color: #fafafa; } .gray-text.color-100 { color: #f5f5f5; } .gray-text.color-200 { color: #eee; } .gray-text.color-300 { color: #e0e0e0; } .gray-text.color-400 { color: #bdbdbd; } .gray-text.color-600 { color: #757575; } .gray-text.color-700 { color: #616161; } .gray-text.color-800 { color: #424242; } .gray-text.color-900 { color: #212121; } .bluegray { background-color: #607d8b; } .bluegray.hoverable:hover { background-color: #6b8a99; } .bluegray.color-50 { background-color: #eceff1; } .bluegray.color-50.hoverable:hover { background-color: #fbfbfc; } .bluegray.color-100 { background-color: #cfd8dc; } .bluegray.color-100.hoverable:hover { background-color: #dee4e7; } .bluegray.color-200 { background-color: #b0bec5; } .bluegray.color-200.hoverable:hover { background-color: #bfcad0; } .bluegray.color-300 { background-color: #90a4ae; } .bluegray.color-300.hoverable:hover { background-color: #9fb0b9; } .bluegray.color-400 { background-color: #78909c; } .bluegray.color-400.hoverable:hover { background-color: #879ca7; } .bluegray.color-600 { background-color: #546e7a; } .bluegray.color-600.hoverable:hover { background-color: #5e7c89; } .bluegray.color-700 { background-color: #455a64; } .bluegray.color-700.hoverable:hover { background-color: #4f6873; } .bluegray.color-800 { background-color: #37474f; } .bluegray.color-800.hoverable:hover { background-color: #41555e; } .bluegray.color-900 { background-color: #263238; } .bluegray.color-900.hoverable:hover { background-color: #304047; } .bluegray-text { color: #607d8b; } .bluegray-text.color-50 { color: #eceff1; } .bluegray-text.color-100 { color: #cfd8dc; } .bluegray-text.color-200 { color: #b0bec5; } .bluegray-text.color-300 { color: #90a4ae; } .bluegray-text.color-400 { color: #78909c; } .bluegray-text.color-600 { color: #546e7a; } .bluegray-text.color-700 { color: #455a64; } .bluegray-text.color-800 { color: #37474f; } .bluegray-text.color-900 { color: #263238; } .black { background-color: #000; } .black.hoverable:hover { background-color: #0d0d0d; } .black-text { color: #000; } .white { background-color: #fff; } .white.hoverable:hover { background-color: white; } .white-text { color: #fff; } /** * selectize.css (v0.12.4) * Copyright (c) 2013–2015 Brian Reavis & contributors * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * * @author Brian Reavis <brian@thirdroute.com> */ .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { -webkit-box-shadow: inset 0 0 12px 4px #fff; visibility: visible !important; border: 0 none !important; background: #f2f2f2 !important; background: rgba(0, 0, 0, .06) !important; box-shadow: inset 0 0 12px 4px #fff; } .selectize-control.plugin-drag_drop .ui-sortable-placeholder:after { visibility: hidden; content: "!"; } .selectize-control.plugin-drag_drop .ui-sortable-helper { box-shadow: 0 2px 5px rgba(0, 0, 0, .2); } .selectize-dropdown-header { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; position: relative; padding: 5px 8px; border-bottom: 1px solid #d0d0d0; border-radius: 3px 3px 0 0; background: #f8f8f8; } .selectize-dropdown-header-close { position: absolute; top: 50%; right: 8px; margin-top: -12px; color: #303030; font-size: 20px !important; line-height: 20px; opacity: .4; } .selectize-dropdown-header-close:hover { color: #000; } .selectize-dropdown.plugin-optgroup_columns .optgroup { box-sizing: border-box; float: left; border-top: 0 none; border-right: 1px solid #f2f2f2; } .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { border-right: 0 none; } .selectize-dropdown.plugin-optgroup_columns .optgroup:before { display: none; } .selectize-dropdown.plugin-optgroup_columns .optgroup-header { border-top: 0 none; } .selectize-control.plugin-remove_button [data-value] { position: relative; padding-right: 24px !important; } .selectize-control.plugin-remove_button [data-value] .remove { -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; box-sizing: border-box; display: inline-block; z-index: 1; /* fixes ie bug (see #392) */ position: absolute; top: 0; right: 0; bottom: 0; width: 17px; padding: 2px 0 0 0; border-left: 1px solid #d0d0d0; border-radius: 0 2px 2px 0; color: inherit; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; vertical-align: middle; } .selectize-control.plugin-remove_button [data-value] .remove:hover { background: rgba(0, 0, 0, .05); } .selectize-control.plugin-remove_button [data-value].active .remove { border-left-color: #cacaca; } .selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { background: none; } .selectize-control.plugin-remove_button .disabled [data-value] .remove { border-left-color: #fff; } .selectize-control.plugin-remove_button .remove-single { position: absolute; top: 6px; right: 28px; font-size: 23px; } .selectize-control { position: relative; } .selectize-dropdown, .selectize-input, .selectize-input input { -webkit-font-smoothing: inherit; color: #303030; font-family: inherit; font-size: 13px; line-height: 18px; } .selectize-input, .selectize-control.single .selectize-input.input-active { display: inline-block; background: #fff; cursor: text; } .selectize-input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); -webkit-border-radius: 3px; -moz-border-radius: 3px; box-sizing: border-box; display: inline-block; z-index: 1; position: relative; width: 100%; padding: 8px 8px; overflow: hidden; border: 1px solid #d0d0d0; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); } .selectize-control.multi .selectize-input.has-items { padding: 6px 8px 3px; } .selectize-input.full { background-color: #fff; } .selectize-input.disabled, .selectize-input.disabled * { cursor: default !important; } .selectize-input.focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); } .selectize-input.dropdown-active { border-radius: 3px 3px 0 0; } .selectize-input > * { zoom: 1; display: -moz-inline-stack; display: inline-block; *display: inline; vertical-align: baseline; } .selectize-control.multi .selectize-input > div { margin: 0 3px 3px 0; padding: 2px 6px; border: 0 solid #d0d0d0; background: #f2f2f2; color: #303030; cursor: pointer; } .selectize-control.multi .selectize-input > div.active { border: 0 solid #cacaca; background: #e8e8e8; color: #303030; } .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { border: 0 solid #fff; background: #fff; color: #7d7d7d; } .selectize-input > input { -webkit-user-select: auto !important; -webkit-box-shadow: none !important; display: inline-block !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 2px 0 0 !important; padding: 0 !important; border: 0 none !important; background: none !important; box-shadow: none !important; line-height: inherit !important; text-indent: 0 !important; } .selectize-input > input::-ms-clear { display: none; } .selectize-input > input:focus { outline: none !important; } .selectize-input:after { display: block; clear: left; content: " "; } .selectize-input.dropdown-active:before { display: block; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #f0f0f0; content: " "; } .selectize-dropdown { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; box-sizing: border-box; z-index: 10; position: absolute; margin: -1px 0 0 0; border: 1px solid #d0d0d0; border-top: 0 none; border-radius: 0 0 3px 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .selectize-dropdown [data-selectable] { overflow: hidden; cursor: pointer; } .selectize-dropdown [data-selectable] .highlight { border-radius: 1px; background: rgba(125, 168, 208, .2); } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { padding: 5px 8px; } .selectize-dropdown .optgroup:first-child .optgroup-header { border-top: 0 none; } .selectize-dropdown .optgroup-header { background: #fff; color: #303030; cursor: default; } .selectize-dropdown .active { background-color: #f5fafd; color: #495c68; } .selectize-dropdown .active.create { color: #495c68; } .selectize-dropdown .create { color: rgba(48, 48, 48, .5); } .selectize-dropdown-content { -webkit-overflow-scrolling: touch; max-height: 200px; overflow-x: hidden; overflow-y: auto; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input { cursor: pointer; } .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { cursor: text; } .selectize-control.single .selectize-input:after { display: block; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -3px; border-width: 5px 5px 0 5px; border-style: solid; border-color: #808080 transparent transparent transparent; content: " "; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -4px; border-width: 0 5px 5px 5px; border-color: transparent transparent #808080 transparent; } .selectize-control.rtl.single .selectize-input:after { right: auto; left: 15px; } .selectize-control.rtl .selectize-input > input { margin: 0 4px 0 -2px !important; } .selectize-control .selectize-input.disabled { background-color: #fafafa; opacity: .5; } /** * selectize.default.css (v0.12.4) - Default Theme * Copyright (c) 2013–2015 Brian Reavis & contributors * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * * @author Brian Reavis <brian@thirdroute.com> */ .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { -webkit-box-shadow: inset 0 0 12px 4px #fff; visibility: visible !important; border: 0 none !important; background: #f2f2f2 !important; background: rgba(0, 0, 0, .06) !important; box-shadow: inset 0 0 12px 4px #fff; } .selectize-control.plugin-drag_drop .ui-sortable-placeholder:after { visibility: hidden; content: "!"; } .selectize-control.plugin-drag_drop .ui-sortable-helper { box-shadow: 0 2px 5px rgba(0, 0, 0, .2); } .selectize-dropdown-header { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; position: relative; padding: 5px 8px; border-bottom: 1px solid #d0d0d0; border-radius: 3px 3px 0 0; background: #f8f8f8; } .selectize-dropdown-header-close { position: absolute; top: 50%; right: 8px; margin-top: -12px; color: #303030; font-size: 20px !important; line-height: 20px; opacity: .4; } .selectize-dropdown-header-close:hover { color: #000; } .selectize-dropdown.plugin-optgroup_columns .optgroup { box-sizing: border-box; float: left; border-top: 0 none; border-right: 1px solid #f2f2f2; } .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { border-right: 0 none; } .selectize-dropdown.plugin-optgroup_columns .optgroup:before { display: none; } .selectize-dropdown.plugin-optgroup_columns .optgroup-header { border-top: 0 none; } .selectize-control.plugin-remove_button [data-value] { position: relative; padding-right: 24px !important; } .selectize-control.plugin-remove_button [data-value] .remove { -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; box-sizing: border-box; display: inline-block; z-index: 1; /* fixes ie bug (see #392) */ position: absolute; top: 0; right: 0; bottom: 0; width: 17px; padding: 2px 0 0 0; border-left: 1px solid #0073bb; border-radius: 0 2px 2px 0; color: inherit; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; vertical-align: middle; } .selectize-control.plugin-remove_button [data-value] .remove:hover { background: rgba(0, 0, 0, .05); } .selectize-control.plugin-remove_button [data-value].active .remove { border-left-color: #00578d; } .selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { background: none; } .selectize-control.plugin-remove_button .disabled [data-value] .remove { border-left-color: #aaa; } .selectize-control.plugin-remove_button .remove-single { position: absolute; top: 6px; right: 28px; font-size: 23px; } .selectize-control { position: relative; } .selectize-dropdown, .selectize-input, .selectize-input input { -webkit-font-smoothing: inherit; color: #303030; font-family: inherit; font-size: 13px; line-height: 18px; } .selectize-input, .selectize-control.single .selectize-input.input-active { display: inline-block; background: #fff; cursor: text; } .selectize-input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); -webkit-border-radius: 3px; -moz-border-radius: 3px; box-sizing: border-box; display: inline-block; z-index: 1; position: relative; width: 100%; padding: 8px 8px; overflow: hidden; border: 1px solid #d0d0d0; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); } .selectize-control.multi .selectize-input.has-items { padding: 5px 8px 2px; } .selectize-input.full { background-color: #fff; } .selectize-input.disabled, .selectize-input.disabled * { cursor: default !important; } .selectize-input.focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); } .selectize-input.dropdown-active { border-radius: 3px 3px 0 0; } .selectize-input > * { zoom: 1; display: -moz-inline-stack; display: inline-block; *display: inline; vertical-align: baseline; } .selectize-control.multi .selectize-input > div { margin: 0 3px 3px 0; padding: 2px 6px; border: 1px solid #0073bb; background: #1da7ee; color: #fff; cursor: pointer; } .selectize-control.multi .selectize-input > div.active { border: 1px solid #00578d; background: #92c836; color: #fff; } .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { border: 1px solid #aaa; background: #d2d2d2; color: #fff; } .selectize-input > input { -webkit-user-select: auto !important; -webkit-box-shadow: none !important; display: inline-block !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 1px !important; padding: 0 !important; border: 0 none !important; background: none !important; box-shadow: none !important; line-height: inherit !important; text-indent: 0 !important; } .selectize-input > input::-ms-clear { display: none; } .selectize-input > input:focus { outline: none !important; } .selectize-input:after { display: block; clear: left; content: " "; } .selectize-input.dropdown-active:before { display: block; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #f0f0f0; content: " "; } .selectize-dropdown { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; box-sizing: border-box; z-index: 10; position: absolute; margin: -1px 0 0 0; border: 1px solid #d0d0d0; border-top: 0 none; border-radius: 0 0 3px 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .selectize-dropdown [data-selectable] { overflow: hidden; cursor: pointer; } .selectize-dropdown [data-selectable] .highlight { border-radius: 1px; background: rgba(125, 168, 208, .2); } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { padding: 5px 8px; } .selectize-dropdown .optgroup:first-child .optgroup-header { border-top: 0 none; } .selectize-dropdown .optgroup-header { background: #fff; color: #303030; cursor: default; } .selectize-dropdown .active { background-color: #f5fafd; color: #495c68; } .selectize-dropdown .active.create { color: #495c68; } .selectize-dropdown .create { color: rgba(48, 48, 48, .5); } .selectize-dropdown-content { -webkit-overflow-scrolling: touch; max-height: 200px; overflow-x: hidden; overflow-y: auto; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input { cursor: pointer; } .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { cursor: text; } .selectize-control.single .selectize-input:after { display: block; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -3px; border-width: 5px 5px 0 5px; border-style: solid; border-color: #808080 transparent transparent transparent; content: " "; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -4px; border-width: 0 5px 5px 5px; border-color: transparent transparent #808080 transparent; } .selectize-control.rtl.single .selectize-input:after { right: auto; left: 15px; } .selectize-control.rtl .selectize-input > input { margin: 0 4px 0 -2px !important; } .selectize-control .selectize-input.disabled { background-color: #fafafa; opacity: .5; } .selectize-control.multi .selectize-input.has-items { padding-right: 5px; padding-left: 5px; } .selectize-control.multi .selectize-input.disabled [data-value] { -webkit-box-shadow: none; background: none; box-shadow: none; color: #999; text-shadow: none; } .selectize-control.multi .selectize-input.disabled [data-value], .selectize-control.multi .selectize-input.disabled [data-value] .remove { border-color: #e6e6e6; } .selectize-control.multi .selectize-input.disabled [data-value] .remove { background: none; } .selectize-control.multi .selectize-input [data-value] { -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .03); border-radius: 3px; background-color: #1b9dec; background-image: linear-gradient(to bottom, #1da7ee, #178ee9); background-repeat: repeat-x; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .03); text-shadow: 0 1px 0 rgba(0, 51, 83, .3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff1da7ee", endColorstr="#ff178ee9", GradientType=0); } .selectize-control.multi .selectize-input [data-value].active { background-color: #0085d4; background-image: linear-gradient(to bottom, #008fd8, #0075cf); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff008fd8", endColorstr="#ff0075cf", GradientType=0); } .selectize-control.single .selectize-input { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8); background-color: #f9f9f9; background-image: linear-gradient(to bottom, #fefefe, #f2f2f2); background-repeat: repeat-x; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffefefe", endColorstr="#fff2f2f2", GradientType=0); } .selectize-control.single .selectize-input, .selectize-dropdown.single { border-color: #b8b8b8; } .selectize-dropdown .optgroup-header { padding-top: 7px; font-size: .85em; font-weight: bold; } .selectize-dropdown .optgroup { border-top: 1px solid #f0f0f0; } .selectize-dropdown .optgroup:first-child { border-top: 0 none; } @font-face { src: url("../fonts/xiconbasic/xiconbasic.eot?3xwdrq"); src: url("../fonts/xiconbasic/xiconbasic.eot?3xwdrq#iefix") format("embedded-opentype"), url("../fonts/xiconbasic/xiconbasic.ttf?3xwdrq") format("truetype"), url("../fonts/xiconbasic/xiconbasic.woff?3xwdrq") format("woff"), url("../fonts/xiconbasic/xiconbasic.svg?3xwdrq#xiconbasic") format("svg"); font-family: "xiconbasic"; font-style: normal; font-weight: normal; } [class^=xiconbasic-], [class*=" xiconbasic-"] { speak: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* use !important to prevent issues with browser extensions that change fonts */ display: inline-block; font-family: "xiconbasic" !important; font-size: 24px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-transform: none; } .xiconbasic-book:before { content: ""; } .xiconbasic-heart:before { content: ""; } .xiconbasic-search:before { content: ""; } .xiconbasic-basket:before { content: ""; } .xiconbasic-person:before { content: ""; } .xiconbasic-cross:before { content: ""; } .xiconbasic-print:before { content: "\970"; } .xiconbasic-pdf:before { content: ""; } .xiconbasic-camera:before { content: ""; } .xiconbasic-copy:before { content: ""; } .xiconbasic-good:before { content: ""; } .xiconbasic-eye:before { content: ""; } .xiconbasic-home:before { content: ""; } .xiconbasic-edit:before { content: ""; } .xiconbasic-umbrella:before { content: ""; } .xiconbasic-volume:before { content: ""; } .xiconbasic-shop:before { content: ""; } .xiconbasic-arrow-right:before { content: ""; } .xiconbasic-jewel:before { content: ""; } .xiconbasic-folder:before { content: ""; } .xiconbasic-folder-add:before { content: ""; } .xiconbasic-upload-cloud:before { content: ""; } .xiconbasic-download-cloud:before { content: ""; } .xiconbasic-layers:before { content: ""; } .xiconbasic-separate:before { content: ""; } .xiconbasic-attach:before { content: ""; } .xiconbasic-arrow-left:before { content: ""; } .xiconbasic-display-tile:before { content: ""; } .xiconbasic-display-line:before { content: ""; } .xiconbasic-weather:before { content: ""; } .xiconbasic-rain:before { content: ""; } .xiconbasic-pin:before { content: ""; } .xiconbasic-flag:before { content: ""; } .xiconbasic-misc:before { content: ""; } .xiconbasic-misc-vertical:before { content: ""; } .xiconbasic-wallet:before { content: ""; } .xiconbasic-gear:before { content: ""; } .xiconbasic-minus:before { content: ""; } .xiconbasic-plus:before { content: ""; } .xiconbasic-hamburger:before { content: ""; } .xiconbasic-ok:before { content: ""; } .xiconbasic-mail:before { content: ""; } .xiconbasic-upload:before { content: ""; } .xiconbasic-download:before { content: ""; } .xiconbasic-file:before { content: ""; } .xiconbasic-link:before { content: ""; } .xiconbasic-message:before { content: ""; } .xiconbasic-mic:before { content: ""; } .xiconbasic-battery:before { content: ""; } .xiconbasic-shopping:before { content: ""; } .xiconbasic-clock:before { content: ""; } .xiconbasic-expand:before { content: ""; } .xiconbasic-calendar:before { content: ""; } .xiconbasic-dustbox:before { content: ""; } .xiconbasic-bookmark-add:before { content: ""; } .xiconbasic-bookmark-remove:before { content: ""; } .xiconbasic-indent:before { content: ""; } .xiconbasic-device:before { content: ""; } .xiconbasic-image:before { content: ""; } .xiconbasic-tag:before { content: ""; } .xiconbasic-graph:before { content: ""; } .xiconbasic-chest:before { content: ""; } .xiconbasic-font:before { content: ""; } .xiconbasic-create:before { content: ""; } .xiconbasic-play:before { content: ""; } .xiconbasic-pause:before { content: ""; } .xiconbasic-cart:before { content: ""; } .xiconbasic-minus-circle:before { content: ""; } .xiconbasic-plus-circle:before { content: ""; } .xiconbasic-lists:before { content: ""; } .xiconbasic-center:before { content: ""; } .xiconbasic-window:before { content: ""; } .xiconbasic-health:before { content: ""; } .xiconbasic-settings:before { content: ""; } .xiconbasic-clipboard:before { content: ""; } .xiconbasic-file-excel-box:before { content: ""; } .xiconbasic-file-powerpoint-box:before { content: ""; } .xiconbasic-file-word-box:before { content: ""; } .xiconbasic-file-pdf-box:before { content: ""; } .xiconbasic-toc:before { content: ""; } .xiconbasic-logout:before { content: ""; } .xiconbasic-close-circle:before { content: ""; } .xiconbasic-chevron-down:before { content: ""; } .xiconbasic-chevron-left:before { content: ""; } .xiconbasic-chevron-right:before { content: ""; } .xiconbasic-chevron-up:before { content: ""; } .xiconbasic-close:before { content: ""; } .xiconbasic-delete:before { content: ""; } .xiconbasic-pencil:before { content: ""; } .xiconbasic-film:before { content: ""; } .xiconbasic-type_image:before { content: ""; } .xiconbasic-caret-up:before { content: ""; } .xiconbasic-caret-down:before { content: ""; } .xiconbasic-crown:before { content: ""; } .xiconbasic-folder-outline:before { content: ""; } .xiconbasic-history:before { content: ""; } .xiconbasic-account-circle:before { content: ""; } .xiconbasic-check:before { content: ""; } .xiconbasic-bookcustom:before { content: ""; } .xiconbasic-tag_another:before { content: ""; } .xiconbasic-globe:before { content: ""; } .xiconbasic-qrcode:before { content: ""; } .xiconbasic-play-movie:before { content: ""; } .xiconbasic-info-circle:before { content: ""; } .xiconbasic-heart_filled:before { content: ""; } .xiconbasic-good_filled:before { content: ""; } .xiconbasic-message_filled:before { content: ""; } .xiconbasic-share:before { content: ""; } .xiconbasic-paperplane:before { content: ""; } .xiconbasic-loader:before { content: ""; } .xiconbasic-print:before { content: "\e970"; } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { src: url("../fonts/fontawesome/fontawesome-webfont.eot?v=4.7.0"); src: url("../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-family: "FontAwesome"; font-style: normal; font-weight: normal; } .fa { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.3333333333em; line-height: .75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.2857142857em; text-align: center; } .fa-ul { margin-left: 2.1428571429em; padding-left: 0; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; top: .1428571429em; left: -2.1428571429em; width: 2.1428571429em; text-align: center; } .fa-li.fa-lg { left: -1.8571428571em; } .fa-border { padding: .2em .25em .15em; border: solid .08em #eee; border-radius: .1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right { margin-left: .3em; } /* Deprecated as of 4.4.0 */ .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { animation: fa-spin 2s infinite linear; } .fa-pulse { animation: fa-spin 1s infinite steps(8); } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { display: inline-block; position: relative; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: ""; } .fa-music:before { content: ""; } .fa-search:before { content: ""; } .fa-envelope-o:before { content: ""; } .fa-heart:before { content: ""; } .fa-star:before { content: ""; } .fa-star-o:before { content: ""; } .fa-user:before { content: ""; } .fa-film:before { content: ""; } .fa-th-large:before { content: ""; } .fa-th:before { content: ""; } .fa-th-list:before { content: ""; } .fa-check:before { content: ""; } .fa-remove:before, .fa-close:before, .fa-times:before { content: ""; } .fa-search-plus:before { content: ""; } .fa-search-minus:before { content: ""; } .fa-power-off:before { content: ""; } .fa-signal:before { content: ""; } .fa-gear:before, .fa-cog:before { content: ""; } .fa-trash-o:before { content: ""; } .fa-home:before { content: ""; } .fa-file-o:before { content: ""; } .fa-clock-o:before { content: ""; } .fa-road:before { content: ""; } .fa-download:before { content: ""; } .fa-arrow-circle-o-down:before { content: ""; } .fa-arrow-circle-o-up:before { content: ""; } .fa-inbox:before { content: ""; } .fa-play-circle-o:before { content: ""; } .fa-rotate-right:before, .fa-repeat:before { content: ""; } .fa-refresh:before { content: ""; } .fa-list-alt:before { content: ""; } .fa-lock:before { content: ""; } .fa-flag:before { content: ""; } .fa-headphones:before { content: ""; } .fa-volume-off:before { content: ""; } .fa-volume-down:before { content: ""; } .fa-volume-up:before { content: ""; } .fa-qrcode:before { content: ""; } .fa-barcode:before { content: ""; } .fa-tag:before { content: ""; } .fa-tags:before { content: ""; } .fa-book:before { content: ""; } .fa-bookmark:before { content: ""; } .fa-print:before { content: ""; } .fa-camera:before { content: ""; } .fa-font:before { content: ""; } .fa-bold:before { content: ""; } .fa-italic:before { content: ""; } .fa-text-height:before { content: ""; } .fa-text-width:before { content: ""; } .fa-align-left:before { content: ""; } .fa-align-center:before { content: ""; } .fa-align-right:before { content: ""; } .fa-align-justify:before { content: ""; } .fa-list:before { content: ""; } .fa-dedent:before, .fa-outdent:before { content: ""; } .fa-indent:before { content: ""; } .fa-video-camera:before { content: ""; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: ""; } .fa-pencil:before { content: ""; } .fa-map-marker:before { content: ""; } .fa-adjust:before { content: ""; } .fa-tint:before { content: ""; } .fa-edit:before, .fa-pencil-square-o:before { content: ""; } .fa-share-square-o:before { content: ""; } .fa-check-square-o:before { content: ""; } .fa-arrows:before { content: ""; } .fa-step-backward:before { content: ""; } .fa-fast-backward:before { content: ""; } .fa-backward:before { content: ""; } .fa-play:before { content: ""; } .fa-pause:before { content: ""; } .fa-stop:before { content: ""; } .fa-forward:before { content: ""; } .fa-fast-forward:before { content: ""; } .fa-step-forward:before { content: ""; } .fa-eject:before { content: ""; } .fa-chevron-left:before { content: ""; } .fa-chevron-right:before { content: ""; } .fa-plus-circle:before { content: ""; } .fa-minus-circle:before { content: ""; } .fa-times-circle:before { content: ""; } .fa-check-circle:before { content: ""; } .fa-question-circle:before { content: ""; } .fa-info-circle:before { content: ""; } .fa-crosshairs:before { content: ""; } .fa-times-circle-o:before { content: ""; } .fa-check-circle-o:before { content: ""; } .fa-ban:before { content: ""; } .fa-arrow-left:before { content: ""; } .fa-arrow-right:before { content: ""; } .fa-arrow-up:before { content: ""; } .fa-arrow-down:before { content: ""; } .fa-mail-forward:before, .fa-share:before { content: ""; } .fa-expand:before { content: ""; } .fa-compress:before { content: ""; } .fa-plus:before { content: ""; } .fa-minus:before { content: ""; } .fa-asterisk:before { content: ""; } .fa-exclamation-circle:before { content: ""; } .fa-gift:before { content: ""; } .fa-leaf:before { content: ""; } .fa-fire:before { content: ""; } .fa-eye:before { content: ""; } .fa-eye-slash:before { content: ""; } .fa-warning:before, .fa-exclamation-triangle:before { content: ""; } .fa-plane:before { content: ""; } .fa-calendar:before { content: ""; } .fa-random:before { content: ""; } .fa-comment:before { content: ""; } .fa-magnet:before { content: ""; } .fa-chevron-up:before { content: ""; } .fa-chevron-down:before { content: ""; } .fa-retweet:before { content: ""; } .fa-shopping-cart:before { content: ""; } .fa-folder:before { content: ""; } .fa-folder-open:before { content: ""; } .fa-arrows-v:before { content: ""; } .fa-arrows-h:before { content: ""; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: ""; } .fa-twitter-square:before { content: ""; } .fa-facebook-square:before { content: ""; } .fa-camera-retro:before { content: ""; } .fa-key:before { content: ""; } .fa-gears:before, .fa-cogs:before { content: ""; } .fa-comments:before { content: ""; } .fa-thumbs-o-up:before { content: ""; } .fa-thumbs-o-down:before { content: ""; } .fa-star-half:before { content: ""; } .fa-heart-o:before { content: ""; } .fa-sign-out:before { content: ""; } .fa-linkedin-square:before { content: ""; } .fa-thumb-tack:before { content: ""; } .fa-external-link:before { content: ""; } .fa-sign-in:before { content: ""; } .fa-trophy:before { content: ""; } .fa-github-square:before { content: ""; } .fa-upload:before { content: ""; } .fa-lemon-o:before { content: ""; } .fa-phone:before { content: ""; } .fa-square-o:before { content: ""; } .fa-bookmark-o:before { content: ""; } .fa-phone-square:before { content: ""; } .fa-twitter:before { content: ""; } .fa-facebook-f:before, .fa-facebook:before { content: ""; } .fa-github:before { content: ""; } .fa-unlock:before { content: ""; } .fa-credit-card:before { content: ""; } .fa-feed:before, .fa-rss:before { content: ""; } .fa-hdd-o:before { content: ""; } .fa-bullhorn:before { content: ""; } .fa-bell:before { content: ""; } .fa-certificate:before { content: ""; } .fa-hand-o-right:before { content: ""; } .fa-hand-o-left:before { content: ""; } .fa-hand-o-up:before { content: ""; } .fa-hand-o-down:before { content: ""; } .fa-arrow-circle-left:before { content: ""; } .fa-arrow-circle-right:before { content: ""; } .fa-arrow-circle-up:before { content: ""; } .fa-arrow-circle-down:before { content: ""; } .fa-globe:before { content: ""; } .fa-wrench:before { content: ""; } .fa-tasks:before { content: ""; } .fa-filter:before { content: ""; } .fa-briefcase:before { content: ""; } .fa-arrows-alt:before { content: ""; } .fa-group:before, .fa-users:before { content: ""; } .fa-chain:before, .fa-link:before { content: ""; } .fa-cloud:before { content: ""; } .fa-flask:before { content: ""; } .fa-cut:before, .fa-scissors:before { content: ""; } .fa-copy:before, .fa-files-o:before { content: ""; } .fa-paperclip:before { content: ""; } .fa-save:before, .fa-floppy-o:before { content: ""; } .fa-square:before { content: ""; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: ""; } .fa-list-ul:before { content: ""; } .fa-list-ol:before { content: ""; } .fa-strikethrough:before { content: ""; } .fa-underline:before { content: ""; } .fa-table:before { content: ""; } .fa-magic:before { content: ""; } .fa-truck:before { content: ""; } .fa-pinterest:before { content: ""; } .fa-pinterest-square:before { content: ""; } .fa-google-plus-square:before { content: ""; } .fa-google-plus:before { content: ""; } .fa-money:before { content: ""; } .fa-caret-down:before { content: ""; } .fa-caret-up:before { content: ""; } .fa-caret-left:before { content: ""; } .fa-caret-right:before { content: ""; } .fa-columns:before { content: ""; } .fa-unsorted:before, .fa-sort:before { content: ""; } .fa-sort-down:before, .fa-sort-desc:before { content: ""; } .fa-sort-up:before, .fa-sort-asc:before { content: ""; } .fa-envelope:before { content: ""; } .fa-linkedin:before { content: ""; } .fa-rotate-left:before, .fa-undo:before { content: ""; } .fa-legal:before, .fa-gavel:before { content: ""; } .fa-dashboard:before, .fa-tachometer:before { content: ""; } .fa-comment-o:before { content: ""; } .fa-comments-o:before { content: ""; } .fa-flash:before, .fa-bolt:before { content: ""; } .fa-sitemap:before { content: ""; } .fa-umbrella:before { content: ""; } .fa-paste:before, .fa-clipboard:before { content: ""; } .fa-lightbulb-o:before { content: ""; } .fa-exchange:before { content: ""; } .fa-cloud-download:before { content: ""; } .fa-cloud-upload:before { content: ""; } .fa-user-md:before { content: ""; } .fa-stethoscope:before { content: ""; } .fa-suitcase:before { content: ""; } .fa-bell-o:before { content: ""; } .fa-coffee:before { content: ""; } .fa-cutlery:before { content: ""; } .fa-file-text-o:before { content: ""; } .fa-building-o:before { content: ""; } .fa-hospital-o:before { content: ""; } .fa-ambulance:before { content: ""; } .fa-medkit:before { content: ""; } .fa-fighter-jet:before { content: ""; } .fa-beer:before { content: ""; } .fa-h-square:before { content: ""; } .fa-plus-square:before { content: ""; } .fa-angle-double-left:before { content: ""; } .fa-angle-double-right:before { content: ""; } .fa-angle-double-up:before { content: ""; } .fa-angle-double-down:before { content: ""; } .fa-angle-left:before { content: ""; } .fa-angle-right:before { content: ""; } .fa-angle-up:before { content: ""; } .fa-angle-down:before { content: ""; } .fa-desktop:before { content: ""; } .fa-laptop:before { content: ""; } .fa-tablet:before { content: ""; } .fa-mobile-phone:before, .fa-mobile:before { content: ""; } .fa-circle-o:before { content: ""; } .fa-quote-left:before { content: ""; } .fa-quote-right:before { content: ""; } .fa-spinner:before { content: ""; } .fa-circle:before { content: ""; } .fa-mail-reply:before, .fa-reply:before { content: ""; } .fa-github-alt:before { content: ""; } .fa-folder-o:before { content: ""; } .fa-folder-open-o:before { content: ""; } .fa-smile-o:before { content: ""; } .fa-frown-o:before { content: ""; } .fa-meh-o:before { content: ""; } .fa-gamepad:before { content: ""; } .fa-keyboard-o:before { content: ""; } .fa-flag-o:before { content: ""; } .fa-flag-checkered:before { content: ""; } .fa-terminal:before { content: ""; } .fa-code:before { content: ""; } .fa-mail-reply-all:before, .fa-reply-all:before { content: ""; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: ""; } .fa-location-arrow:before { content: ""; } .fa-crop:before { content: ""; } .fa-code-fork:before { content: ""; } .fa-unlink:before, .fa-chain-broken:before { content: ""; } .fa-question:before { content: ""; } .fa-info:before { content: ""; } .fa-exclamation:before { content: ""; } .fa-superscript:before { content: ""; } .fa-subscript:before { content: ""; } .fa-eraser:before { content: ""; } .fa-puzzle-piece:before { content: ""; } .fa-microphone:before { content: ""; } .fa-microphone-slash:before { content: ""; } .fa-shield:before { content: ""; } .fa-calendar-o:before { content: ""; } .fa-fire-extinguisher:before { content: ""; } .fa-rocket:before { content: ""; } .fa-maxcdn:before { content: ""; } .fa-chevron-circle-left:before { content: ""; } .fa-chevron-circle-right:before { content: ""; } .fa-chevron-circle-up:before { content: ""; } .fa-chevron-circle-down:before { content: ""; } .fa-html5:before { content: ""; } .fa-css3:before { content: ""; } .fa-anchor:before { content: ""; } .fa-unlock-alt:before { content: ""; } .fa-bullseye:before { content: ""; } .fa-ellipsis-h:before { content: ""; } .fa-ellipsis-v:before { content: ""; } .fa-rss-square:before { content: ""; } .fa-play-circle:before { content: ""; } .fa-ticket:before { content: ""; } .fa-minus-square:before { content: ""; } .fa-minus-square-o:before { content: ""; } .fa-level-up:before { content: ""; } .fa-level-down:before { content: ""; } .fa-check-square:before { content: ""; } .fa-pencil-square:before { content: ""; } .fa-external-link-square:before { content: ""; } .fa-share-square:before { content: ""; } .fa-compass:before { content: ""; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: ""; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: ""; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: ""; } .fa-euro:before, .fa-eur:before { content: ""; } .fa-gbp:before { content: ""; } .fa-dollar:before, .fa-usd:before { content: ""; } .fa-rupee:before, .fa-inr:before { content: ""; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: ""; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: ""; } .fa-won:before, .fa-krw:before { content: ""; } .fa-bitcoin:before, .fa-btc:before { content: ""; } .fa-file:before { content: ""; } .fa-file-text:before { content: ""; } .fa-sort-alpha-asc:before { content: ""; } .fa-sort-alpha-desc:before { content: ""; } .fa-sort-amount-asc:before { content: ""; } .fa-sort-amount-desc:before { content: ""; } .fa-sort-numeric-asc:before { content: ""; } .fa-sort-numeric-desc:before { content: ""; } .fa-thumbs-up:before { content: ""; } .fa-thumbs-down:before { content: ""; } .fa-youtube-square:before { content: ""; } .fa-youtube:before { content: ""; } .fa-xing:before { content: ""; } .fa-xing-square:before { content: ""; } .fa-youtube-play:before { content: ""; } .fa-dropbox:before { content: ""; } .fa-stack-overflow:before { content: ""; } .fa-instagram:before { content: ""; } .fa-flickr:before { content: ""; } .fa-adn:before { content: ""; } .fa-bitbucket:before { content: ""; } .fa-bitbucket-square:before { content: ""; } .fa-tumblr:before { content: ""; } .fa-tumblr-square:before { content: ""; } .fa-long-arrow-down:before { content: ""; } .fa-long-arrow-up:before { content: ""; } .fa-long-arrow-left:before { content: ""; } .fa-long-arrow-right:before { content: ""; } .fa-apple:before { content: ""; } .fa-windows:before { content: ""; } .fa-android:before { content: ""; } .fa-linux:before { content: ""; } .fa-dribbble:before { content: ""; } .fa-skype:before { content: ""; } .fa-foursquare:before { content: ""; } .fa-trello:before { content: ""; } .fa-female:before { content: ""; } .fa-male:before { content: ""; } .fa-gittip:before, .fa-gratipay:before { content: ""; } .fa-sun-o:before { content: ""; } .fa-moon-o:before { content: ""; } .fa-archive:before { content: ""; } .fa-bug:before { content: ""; } .fa-vk:before { content: ""; } .fa-weibo:before { content: ""; } .fa-renren:before { content: ""; } .fa-pagelines:before { content: ""; } .fa-stack-exchange:before { content: ""; } .fa-arrow-circle-o-right:before { content: ""; } .fa-arrow-circle-o-left:before { content: ""; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: ""; } .fa-dot-circle-o:before { content: ""; } .fa-wheelchair:before { content: ""; } .fa-vimeo-square:before { content: ""; } .fa-turkish-lira:before, .fa-try:before { content: ""; } .fa-plus-square-o:before { content: ""; } .fa-space-shuttle:before { content: ""; } .fa-slack:before { content: ""; } .fa-envelope-square:before { content: ""; } .fa-wordpress:before { content: ""; } .fa-openid:before { content: ""; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: ""; } .fa-mortar-board:before, .fa-graduation-cap:before { content: ""; } .fa-yahoo:before { content: ""; } .fa-google:before { content: ""; } .fa-reddit:before { content: ""; } .fa-reddit-square:before { content: ""; } .fa-stumbleupon-circle:before { content: ""; } .fa-stumbleupon:before { content: ""; } .fa-delicious:before { content: ""; } .fa-digg:before { content: ""; } .fa-pied-piper-pp:before { content: ""; } .fa-pied-piper-alt:before { content: ""; } .fa-drupal:before { content: ""; } .fa-joomla:before { content: ""; } .fa-language:before { content: ""; } .fa-fax:before { content: ""; } .fa-building:before { content: ""; } .fa-child:before { content: ""; } .fa-paw:before { content: ""; } .fa-spoon:before { content: ""; } .fa-cube:before { content: ""; } .fa-cubes:before { content: ""; } .fa-behance:before { content: ""; } .fa-behance-square:before { content: ""; } .fa-steam:before { content: ""; } .fa-steam-square:before { content: ""; } .fa-recycle:before { content: ""; } .fa-automobile:before, .fa-car:before { content: ""; } .fa-cab:before, .fa-taxi:before { content: ""; } .fa-tree:before { content: ""; } .fa-spotify:before { content: ""; } .fa-deviantart:before { content: ""; } .fa-soundcloud:before { content: ""; } .fa-database:before { content: ""; } .fa-file-pdf-o:before { content: ""; } .fa-file-word-o:before { content: ""; } .fa-file-excel-o:before { content: ""; } .fa-file-powerpoint-o:before { content: ""; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: ""; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: ""; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: ""; } .fa-file-movie-o:before, .fa-file-video-o:before { content: ""; } .fa-file-code-o:before { content: ""; } .fa-vine:before { content: ""; } .fa-codepen:before { content: ""; } .fa-jsfiddle:before { content: ""; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: ""; } .fa-circle-o-notch:before { content: ""; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: ""; } .fa-ge:before, .fa-empire:before { content: ""; } .fa-git-square:before { content: ""; } .fa-git:before { content: ""; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: ""; } .fa-tencent-weibo:before { content: ""; } .fa-qq:before { content: ""; } .fa-wechat:before, .fa-weixin:before { content: ""; } .fa-send:before, .fa-paper-plane:before { content: ""; } .fa-send-o:before, .fa-paper-plane-o:before { content: ""; } .fa-history:before { content: ""; } .fa-circle-thin:before { content: ""; } .fa-header:before { content: ""; } .fa-paragraph:before { content: ""; } .fa-sliders:before { content: ""; } .fa-share-alt:before { content: ""; } .fa-share-alt-square:before { content: ""; } .fa-bomb:before { content: ""; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: ""; } .fa-tty:before { content: ""; } .fa-binoculars:before { content: ""; } .fa-plug:before { content: ""; } .fa-slideshare:before { content: ""; } .fa-twitch:before { content: ""; } .fa-yelp:before { content: ""; } .fa-newspaper-o:before { content: ""; } .fa-wifi:before { content: ""; } .fa-calculator:before { content: ""; } .fa-paypal:before { content: ""; } .fa-google-wallet:before { content: ""; } .fa-cc-visa:before { content: ""; } .fa-cc-mastercard:before { content: ""; } .fa-cc-discover:before { content: ""; } .fa-cc-amex:before { content: ""; } .fa-cc-paypal:before { content: ""; } .fa-cc-stripe:before { content: ""; } .fa-bell-slash:before { content: ""; } .fa-bell-slash-o:before { content: ""; } .fa-trash:before { content: ""; } .fa-copyright:before { content: ""; } .fa-at:before { content: ""; } .fa-eyedropper:before { content: ""; } .fa-paint-brush:before { content: ""; } .fa-birthday-cake:before { content: ""; } .fa-area-chart:before { content: ""; } .fa-pie-chart:before { content: ""; } .fa-line-chart:before { content: ""; } .fa-lastfm:before { content: ""; } .fa-lastfm-square:before { content: ""; } .fa-toggle-off:before { content: ""; } .fa-toggle-on:before { content: ""; } .fa-bicycle:before { content: ""; } .fa-bus:before { content: ""; } .fa-ioxhost:before { content: ""; } .fa-angellist:before { content: ""; } .fa-cc:before { content: ""; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: ""; } .fa-meanpath:before { content: ""; } .fa-buysellads:before { content: ""; } .fa-connectdevelop:before { content: ""; } .fa-dashcube:before { content: ""; } .fa-forumbee:before { content: ""; } .fa-leanpub:before { content: ""; } .fa-sellsy:before { content: ""; } .fa-shirtsinbulk:before { content: ""; } .fa-simplybuilt:before { content: ""; } .fa-skyatlas:before { content: ""; } .fa-cart-plus:before { content: ""; } .fa-cart-arrow-down:before { content: ""; } .fa-diamond:before { content: ""; } .fa-ship:before { content: ""; } .fa-user-secret:before { content: ""; } .fa-motorcycle:before { content: ""; } .fa-street-view:before { content: ""; } .fa-heartbeat:before { content: ""; } .fa-venus:before { content: ""; } .fa-mars:before { content: ""; } .fa-mercury:before { content: ""; } .fa-intersex:before, .fa-transgender:before { content: ""; } .fa-transgender-alt:before { content: ""; } .fa-venus-double:before { content: ""; } .fa-mars-double:before { content: ""; } .fa-venus-mars:before { content: ""; } .fa-mars-stroke:before { content: ""; } .fa-mars-stroke-v:before { content: ""; } .fa-mars-stroke-h:before { content: ""; } .fa-neuter:before { content: ""; } .fa-genderless:before { content: ""; } .fa-facebook-official:before { content: ""; } .fa-pinterest-p:before { content: ""; } .fa-whatsapp:before { content: ""; } .fa-server:before { content: ""; } .fa-user-plus:before { content: ""; } .fa-user-times:before { content: ""; } .fa-hotel:before, .fa-bed:before { content: ""; } .fa-viacoin:before { content: ""; } .fa-train:before { content: ""; } .fa-subway:before { content: ""; } .fa-medium:before { content: ""; } .fa-yc:before, .fa-y-combinator:before { content: ""; } .fa-optin-monster:before { content: ""; } .fa-opencart:before { content: ""; } .fa-expeditedssl:before { content: ""; } .fa-battery-4:before, .fa-battery:before, .fa-battery-full:before { content: ""; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: ""; } .fa-battery-2:before, .fa-battery-half:before { content: ""; } .fa-battery-1:before, .fa-battery-quarter:before { content: ""; } .fa-battery-0:before, .fa-battery-empty:before { content: ""; } .fa-mouse-pointer:before { content: ""; } .fa-i-cursor:before { content: ""; } .fa-object-group:before { content: ""; } .fa-object-ungroup:before { content: ""; } .fa-sticky-note:before { content: ""; } .fa-sticky-note-o:before { content: ""; } .fa-cc-jcb:before { content: ""; } .fa-cc-diners-club:before { content: ""; } .fa-clone:before { content: ""; } .fa-balance-scale:before { content: ""; } .fa-hourglass-o:before { content: ""; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: ""; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: ""; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: ""; } .fa-hourglass:before { content: ""; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: ""; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: ""; } .fa-hand-scissors-o:before { content: ""; } .fa-hand-lizard-o:before { content: ""; } .fa-hand-spock-o:before { content: ""; } .fa-hand-pointer-o:before { content: ""; } .fa-hand-peace-o:before { content: ""; } .fa-trademark:before { content: ""; } .fa-registered:before { content: ""; } .fa-creative-commons:before { content: ""; } .fa-gg:before { content: ""; } .fa-gg-circle:before { content: ""; } .fa-tripadvisor:before { content: ""; } .fa-odnoklassniki:before { content: ""; } .fa-odnoklassniki-square:before { content: ""; } .fa-get-pocket:before { content: ""; } .fa-wikipedia-w:before { content: ""; } .fa-safari:before { content: ""; } .fa-chrome:before { content: ""; } .fa-firefox:before { content: ""; } .fa-opera:before { content: ""; } .fa-internet-explorer:before { content: ""; } .fa-tv:before, .fa-television:before { content: ""; } .fa-contao:before { content: ""; } .fa-500px:before { content: ""; } .fa-amazon:before { content: ""; } .fa-calendar-plus-o:before { content: ""; } .fa-calendar-minus-o:before { content: ""; } .fa-calendar-times-o:before { content: ""; } .fa-calendar-check-o:before { content: ""; } .fa-industry:before { content: ""; } .fa-map-pin:before { content: ""; } .fa-map-signs:before { content: ""; } .fa-map-o:before { content: ""; } .fa-map:before { content: ""; } .fa-commenting:before { content: ""; } .fa-commenting-o:before { content: ""; } .fa-houzz:before { content: ""; } .fa-vimeo:before { content: ""; } .fa-black-tie:before { content: ""; } .fa-fonticons:before { content: ""; } .fa-reddit-alien:before { content: ""; } .fa-edge:before { content: ""; } .fa-credit-card-alt:before { content: ""; } .fa-codiepie:before { content: ""; } .fa-modx:before { content: ""; } .fa-fort-awesome:before { content: ""; } .fa-usb:before { content: ""; } .fa-product-hunt:before { content: ""; } .fa-mixcloud:before { content: ""; } .fa-scribd:before { content: ""; } .fa-pause-circle:before { content: ""; } .fa-pause-circle-o:before { content: ""; } .fa-stop-circle:before { content: ""; } .fa-stop-circle-o:before { content: ""; } .fa-shopping-bag:before { content: ""; } .fa-shopping-basket:before { content: ""; } .fa-hashtag:before { content: ""; } .fa-bluetooth:before { content: ""; } .fa-bluetooth-b:before { content: ""; } .fa-percent:before { content: ""; } .fa-gitlab:before { content: ""; } .fa-wpbeginner:before { content: ""; } .fa-wpforms:before { content: ""; } .fa-envira:before { content: ""; } .fa-universal-access:before { content: ""; } .fa-wheelchair-alt:before { content: ""; } .fa-question-circle-o:before { content: ""; } .fa-blind:before { content: ""; } .fa-audio-description:before { content: ""; } .fa-volume-control-phone:before { content: ""; } .fa-braille:before { content: ""; } .fa-assistive-listening-systems:before { content: ""; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: ""; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: ""; } .fa-glide:before { content: ""; } .fa-glide-g:before { content: ""; } .fa-signing:before, .fa-sign-language:before { content: ""; } .fa-low-vision:before { content: ""; } .fa-viadeo:before { content: ""; } .fa-viadeo-square:before { content: ""; } .fa-snapchat:before { content: ""; } .fa-snapchat-ghost:before { content: ""; } .fa-snapchat-square:before { content: ""; } .fa-pied-piper:before { content: ""; } .fa-first-order:before { content: ""; } .fa-yoast:before { content: ""; } .fa-themeisle:before { content: ""; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: ""; } .fa-fa:before, .fa-font-awesome:before { content: ""; } .fa-handshake-o:before { content: ""; } .fa-envelope-open:before { content: ""; } .fa-envelope-open-o:before { content: ""; } .fa-linode:before { content: ""; } .fa-address-book:before { content: ""; } .fa-address-book-o:before { content: ""; } .fa-vcard:before, .fa-address-card:before { content: ""; } .fa-vcard-o:before, .fa-address-card-o:before { content: ""; } .fa-user-circle:before { content: ""; } .fa-user-circle-o:before { content: ""; } .fa-user-o:before { content: ""; } .fa-id-badge:before { content: ""; } .fa-drivers-license:before, .fa-id-card:before { content: ""; } .fa-drivers-license-o:before, .fa-id-card-o:before { content: ""; } .fa-quora:before { content: ""; } .fa-free-code-camp:before { content: ""; } .fa-telegram:before { content: ""; } .fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before { content: ""; } .fa-thermometer-3:before, .fa-thermometer-three-quarters:before { content: ""; } .fa-thermometer-2:before, .fa-thermometer-half:before { content: ""; } .fa-thermometer-1:before, .fa-thermometer-quarter:before { content: ""; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: ""; } .fa-shower:before { content: ""; } .fa-bathtub:before, .fa-s15:before, .fa-bath:before { content: ""; } .fa-podcast:before { content: ""; } .fa-window-maximize:before { content: ""; } .fa-window-minimize:before { content: ""; } .fa-window-restore:before { content: ""; } .fa-times-rectangle:before, .fa-window-close:before { content: ""; } .fa-times-rectangle-o:before, .fa-window-close-o:before { content: ""; } .fa-bandcamp:before { content: ""; } .fa-grav:before { content: ""; } .fa-etsy:before { content: ""; } .fa-imdb:before { content: ""; } .fa-ravelry:before { content: ""; } .fa-eercast:before { content: ""; } .fa-microchip:before { content: ""; } .fa-snowflake-o:before { content: ""; } .fa-superpowers:before { content: ""; } .fa-wpexplorer:before { content: ""; } .fa-meetup:before { content: ""; } .sr-only { clip: rect(0, 0, 0, 0); position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; position: static; width: auto; height: auto; margin: 0; overflow: visible; } @font-face { src: url("../fonts/socicon/Socicon.eot?6mfloc"); src: url("../fonts/socicon/Socicon.eot?6mfloc#iefix") format("embedded-opentype"), url("../fonts/socicon/Socicon.woff2?6mfloc") format("woff2"), url("../fonts/socicon/Socicon.ttf?6mfloc") format("truetype"), url("../fonts/socicon/Socicon.woff?6mfloc") format("woff"), url("../fonts/socicon/Socicon.svg?6mfloc#Socicon") format("svg"); font-family: "Socicon"; font-style: normal; font-weight: normal; } [class^=socicon-], [class*=" socicon-"] { speak: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* use !important to prevent issues with browser extensions that change fonts */ font-family: "Socicon" !important; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-transform: none; } .socicon-tunein:before { content: ""; } .socicon-gamejolt:before { content: ""; } .socicon-trello:before { content: ""; } .socicon-spreadshirt:before { content: ""; } .socicon-airbnb:before { content: ""; } .socicon-alliance:before { content: ""; } .socicon-amazon:before { content: ""; } .socicon-amplement:before { content: ""; } .socicon-android:before { content: ""; } .socicon-angellist:before { content: ""; } .socicon-apple:before { content: ""; } .socicon-appnet:before { content: ""; } .socicon-baidu:before { content: ""; } .socicon-bandcamp:before { content: ""; } .socicon-battlenet:before { content: ""; } .socicon-beam:before { content: ""; } .socicon-bebee:before { content: ""; } .socicon-bebo:before { content: ""; } .socicon-behance:before { content: ""; } .socicon-blizzard:before { content: ""; } .socicon-blogger:before { content: ""; } .socicon-buffer:before { content: ""; } .socicon-chrome:before { content: ""; } .socicon-coderwall:before { content: ""; } .socicon-curse:before { content: ""; } .socicon-dailymotion:before { content: ""; } .socicon-deezer:before { content: ""; } .socicon-delicious:before { content: ""; } .socicon-deviantart:before { content: ""; } .socicon-diablo:before { content: ""; } .socicon-digg:before { content: ""; } .socicon-discord:before { content: ""; } .socicon-disqus:before { content: ""; } .socicon-douban:before { content: ""; } .socicon-draugiem:before { content: ""; } .socicon-dribbble:before { content: ""; } .socicon-drupal:before { content: ""; } .socicon-ebay:before { content: ""; } .socicon-ello:before { content: ""; } .socicon-endomodo:before { content: ""; } .socicon-envato:before { content: ""; } .socicon-etsy:before { content: ""; } .socicon-facebook:before { content: ""; } .socicon-feedburner:before { content: ""; } .socicon-filmweb:before { content: ""; } .socicon-firefox:before { content: ""; } .socicon-flattr:before { content: ""; } .socicon-flickr:before { content: ""; } .socicon-formulr:before { content: ""; } .socicon-forrst:before { content: ""; } .socicon-foursquare:before { content: ""; } .socicon-friendfeed:before { content: ""; } .socicon-github:before { content: ""; } .socicon-goodreads:before { content: ""; } .socicon-google:before { content: ""; } .socicon-googlescholar:before { content: ""; } .socicon-googlegroups:before { content: ""; } .socicon-googlephotos:before { content: ""; } .socicon-googleplus:before { content: ""; } .socicon-grooveshark:before { content: ""; } .socicon-hackerrank:before { content: ""; } .socicon-hearthstone:before { content: ""; } .socicon-hellocoton:before { content: ""; } .socicon-heroes:before { content: ""; } .socicon-hitbox:before { content: ""; } .socicon-horde:before { content: ""; } .socicon-houzz:before { content: ""; } .socicon-icq:before { content: ""; } .socicon-identica:before { content: ""; } .socicon-imdb:before { content: ""; } .socicon-instagram:before { content: ""; } .socicon-issuu:before { content: ""; } .socicon-istock:before { content: ""; } .socicon-itunes:before { content: ""; } .socicon-keybase:before { content: ""; } .socicon-lanyrd:before { content: ""; } .socicon-lastfm:before { content: ""; } .socicon-line:before { content: ""; } .socicon-linkedin:before { content: ""; } .socicon-livejournal:before { content: ""; } .socicon-lyft:before { content: ""; } .socicon-macos:before { content: ""; } .socicon-mail:before { content: ""; } .socicon-medium:before { content: ""; } .socicon-meetup:before { content: ""; } .socicon-mixcloud:before { content: ""; } .socicon-modelmayhem:before { content: ""; } .socicon-mumble:before { content: ""; } .socicon-myspace:before { content: ""; } .socicon-newsvine:before { content: ""; } .socicon-nintendo:before { content: ""; } .socicon-npm:before { content: ""; } .socicon-odnoklassniki:before { content: ""; } .socicon-openid:before { content: ""; } .socicon-opera:before { content: ""; } .socicon-outlook:before { content: ""; } .socicon-overwatch:before { content: ""; } .socicon-patreon:before { content: ""; } .socicon-paypal:before { content: ""; } .socicon-periscope:before { content: ""; } .socicon-persona:before { content: ""; } .socicon-pinterest:before { content: ""; } .socicon-play:before { content: ""; } .socicon-player:before { content: ""; } .socicon-playstation:before { content: ""; } .socicon-pocket:before { content: ""; } .socicon-qq:before { content: ""; } .socicon-quora:before { content: ""; } .socicon-raidcall:before { content: ""; } .socicon-ravelry:before { content: ""; } .socicon-reddit:before { content: ""; } .socicon-renren:before { content: ""; } .socicon-researchgate:before { content: ""; } .socicon-residentadvisor:before { content: ""; } .socicon-reverbnation:before { content: ""; } .socicon-rss:before { content: ""; } .socicon-sharethis:before { content: ""; } .socicon-skype:before { content: ""; } .socicon-slideshare:before { content: ""; } .socicon-smugmug:before { content: ""; } .socicon-snapchat:before { content: ""; } .socicon-songkick:before { content: ""; } .socicon-soundcloud:before { content: ""; } .socicon-spotify:before { content: ""; } .socicon-stackexchange:before { content: ""; } .socicon-stackoverflow:before { content: ""; } .socicon-starcraft:before { content: ""; } .socicon-stayfriends:before { content: ""; } .socicon-steam:before { content: ""; } .socicon-storehouse:before { content: ""; } .socicon-strava:before { content: ""; } .socicon-streamjar:before { content: ""; } .socicon-stumbleupon:before { content: ""; } .socicon-swarm:before { content: ""; } .socicon-teamspeak:before { content: ""; } .socicon-teamviewer:before { content: ""; } .socicon-technorati:before { content: ""; } .socicon-telegram:before { content: ""; } .socicon-tripadvisor:before { content: ""; } .socicon-tripit:before { content: ""; } .socicon-triplej:before { content: ""; } .socicon-tumblr:before { content: ""; } .socicon-twitch:before { content: ""; } .socicon-twitter:before { content: ""; } .socicon-uber:before { content: ""; } .socicon-ventrilo:before { content: ""; } .socicon-viadeo:before { content: ""; } .socicon-viber:before { content: ""; } .socicon-viewbug:before { content: ""; } .socicon-vimeo:before { content: ""; } .socicon-vine:before { content: ""; } .socicon-vkontakte:before { content: ""; } .socicon-warcraft:before { content: ""; } .socicon-wechat:before { content: ""; } .socicon-weibo:before { content: ""; } .socicon-whatsapp:before { content: ""; } .socicon-wikipedia:before { content: ""; } .socicon-windows:before { content: ""; } .socicon-wordpress:before { content: ""; } .socicon-wykop:before { content: ""; } .socicon-xbox:before { content: ""; } .socicon-xing:before { content: ""; } .socicon-yahoo:before { content: ""; } .socicon-yammer:before { content: ""; } .socicon-yandex:before { content: ""; } .socicon-yelp:before { content: ""; } .socicon-younow:before { content: ""; } .socicon-youtube:before { content: ""; } .socicon-zapier:before { content: ""; } .socicon-zerply:before { content: ""; } .socicon-zomato:before { content: ""; } .socicon-zynga:before { content: ""; } .socicon-500px:before { content: ""; } .socicon-8tracks:before { content: ""; } @font-face { src: url("../fonts/one_viewer/one_viewer.eot?qowxxr"); src: url("../fonts/one_viewer/one_viewer.eot?qowxxr#iefix") format("embedded-opentype"), url("../fonts/one_viewer/one_viewer.ttf?qowxxr") format("truetype"), url("../fonts/one_viewer/one_viewer.woff?qowxxr") format("woff"), url("../fonts/one_viewer/one_viewer.svg?qowxxr#one_viewer") format("svg"); font-family: "one_viewer"; font-style: normal; font-weight: normal; } i.oneviewer { speak: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* use !important to prevent issues with browser extensions that change fonts */ font-family: "one_viewer" !important; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-transform: none; } i.oneviewer-search:before { /* 検索フォームのボタンアイコン */ content: ""; } i.oneviewer-last:before { /* ページ移動:最後 */ content: ""; } i.oneviewer-next:before { /* ページ移動:次へ、PC 用動画ビューア 再生 */ content: ""; } i.oneviewer-prev:before { /* ページ移動:前へ */ content: ""; } i.oneviewer-first:before { /* ページ移動:先頭 */ content: ""; } i.oneviewer-share:before { /* シェア(埋め込み時の右に表示されるものは viewer_right_~ を使用のこ と) */ content: ""; } i.oneviewer-viewer_right_app:before { /* Poste アプリで開く */ content: ""; } i.oneviewer-minifier:before { /* ズーム(縮小) */ content: ""; } i.oneviewer-magnifier:before { /* ズーム(拡大) */ content: ""; } i.oneviewer-viewer_right_maximize:before { /* 埋め込み時全画面 */ content: ""; } i.oneviewer-viewer_right_share:before { /* 埋め込み時シェア */ content: ""; } i.oneviewer-viewer_right_minimize:before { /* 埋め込み時全画面解除 */ content: ""; } i.oneviewer-printer:before { /* 印刷(埋め込み時の右に表示されるものは viewer_right_~ を使用のこと) */ content: ""; } i.oneviewer-enlargebar_sd_back:before { /* SD 用拡大バー 戻る */ content: ""; } i.oneviewer-menu:before { /* ビューアメニュー */ content: ""; } i.oneviewer-times-circle:before { /* 検索時消去ボタン */ content: ""; } i.oneviewer-viewer_right_printer:before { /* 埋め込み時印刷 */ content: ""; } i.oneviewer-enlargebar_sd_larger:before { /* SD 用拡大バー 拡大 */ content: ""; } i.oneviewer-enlargebar_sd_normal:before { /* SD 用拡大バー 通常 */ content: ""; } i.oneviewer-enlargebar_pc_normal:before { /* PC 用拡大バー 通常 */ content: ""; } i.oneviewer-enlargebar_pc_larger:before { /* PC 用拡大バー 拡大 */ content: ""; } i.oneviewer-enlargebar_pc_maximize:before { /* PC 用拡大バー 全画面 */ content: ""; } i.oneviewer-sd_menuclose:before { /* SD 用ビューア メニュー閉じる */ content: ""; } i.oneviewer-sd_search:before { /* SD 用ビューア 検索 */ content: ""; } i.oneviewer-sd_share:before { /* SD 用ビューア シェア */ content: ""; } i.oneviewer-sd_thumbs:before { /* SD 用ビューア サムネイル */ content: ""; } i.oneviewer-sd_toc:before { /* SD 用ビューア 目次 */ content: ""; } i.oneviewer-sd_movie_maximize:before { /* SD 用動画ビューア 最大化 */ content: ""; } i.oneviewer-sd_movie_minimize:before { /* SD 用動画ビューア 最小化 */ content: ""; } i.oneviewer-pc_mute:before { /* PC 用動画ビューア ミュート */ content: ""; } i.oneviewer-sd_mute:before { /* SD 用動画ビューア ミュート */ content: ""; } i.oneviewer-pc_pause:before { /* PC 用動画ビューア 一時停止 */ content: ""; } i.oneviewer-sd_pause:before { /* SD 用動画ビューア 一時停止 */ content: ""; } i.oneviewer-sd_play:before { /* SD 用動画ビューア 再生 */ content: ""; } i.oneviewer-sd_share_movie:before { /* SD 用動画ビューア シェア */ content: ""; } i.oneviewer-pc_volume_on:before { /* PC 用動画ビューア 音量オン */ content: ""; } i.oneviewer-sd_volume_on:before { /* SD 用動画ビューア 音量オン */ content: ""; } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; animation-duration: 1s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { animation-duration: .75s; } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -30px, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -15px, 0); animation-timing-function: cubic-bezier(.755, .05, .855, .06); } 90% { transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; transform-origin: center bottom; animation-name: bounce; } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } .pulse { animation-name: pulse; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, .75, 1); } 40% { transform: scale3d(.75, 1.25, 1); } 50% { transform: scale3d(1.15, .85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } .rubberBand { animation-name: rubberBand; } @keyframes shake { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { animation-name: shake; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -webkit-animation-name: swing; transform-origin: top center; animation-name: swing; } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } .tada { animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { from { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: none; } } .wobble { animation-name: wobble; } @keyframes jello { from, 11.1%, to { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); } 77.7% { transform: skewX(.390625deg) skewY(.390625deg); } 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); } } .jello { -webkit-animation-name: jello; transform-origin: center; animation-name: jello; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { transform: scale3d(.3, .3, .3); opacity: 0; } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { transform: scale3d(1.03, 1.03, 1.03); opacity: 1; } 80% { transform: scale3d(.97, .97, .97); } to { transform: scale3d(1, 1, 1); opacity: 1; } } .bounceIn { animation-name: bounceIn; } @keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { transform: translate3d(0, -3000px, 0); opacity: 0; } 60% { transform: translate3d(0, 25px, 0); opacity: 1; } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } .bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { transform: translate3d(-3000px, 0, 0); opacity: 0; } 60% { transform: translate3d(25px, 0, 0); opacity: 1; } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } .bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } from { transform: translate3d(3000px, 0, 0); opacity: 0; } 60% { transform: translate3d(-25px, 0, 0); opacity: 1; } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } .bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } from { transform: translate3d(0, 3000px, 0); opacity: 0; } 60% { transform: translate3d(0, -20px, 0); opacity: 1; } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } .bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(.9, .9, .9); } 50%, 55% { transform: scale3d(1.1, 1.1, 1.1); opacity: 1; } to { transform: scale3d(.3, .3, .3); opacity: 0; } } .bounceOut { animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { transform: translate3d(0, -20px, 0); opacity: 1; } to { transform: translate3d(0, 2000px, 0); opacity: 0; } } .bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { transform: translate3d(20px, 0, 0); opacity: 1; } to { transform: translate3d(-2000px, 0, 0); opacity: 0; } } .bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { transform: translate3d(-20px, 0, 0); opacity: 1; } to { transform: translate3d(2000px, 0, 0); opacity: 0; } } .bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { transform: translate3d(0, 20px, 0); opacity: 1; } to { transform: translate3d(0, -2000px, 0); opacity: 0; } } .bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { from { transform: translate3d(0, -2000px, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { from { transform: translate3d(-100%, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { from { transform: translate3d(-2000px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { from { transform: translate3d(100%, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { from { transform: translate3d(2000px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { from { transform: translate3d(0, 100%, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { from { transform: translate3d(0, 2000px, 0); opacity: 0; } to { transform: none; opacity: 1; } } .fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { from { opacity: 1; } to { transform: translate3d(0, 100%, 0); opacity: 0; } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { from { opacity: 1; } to { transform: translate3d(0, 2000px, 0); opacity: 0; } } .fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { from { opacity: 1; } to { transform: translate3d(-100%, 0, 0); opacity: 0; } } .fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { from { opacity: 1; } to { transform: translate3d(-2000px, 0, 0); opacity: 0; } } .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { from { opacity: 1; } to { transform: translate3d(100%, 0, 0); opacity: 0; } } .fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { from { opacity: 1; } to { transform: translate3d(2000px, 0, 0); opacity: 0; } } .fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { from { opacity: 1; } to { transform: translate3d(0, -100%, 0); opacity: 0; } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { from { opacity: 1; } to { transform: translate3d(0, -2000px, 0); opacity: 0; } } .fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); -webkit-animation-timing-function: ease-in; transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -webkit-animation-name: flip; backface-visibility: visible; animation-name: flip; } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutX; } @keyframes flipOutY { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-name: lightSpeedIn; animation-timing-function: ease-out; } @keyframes lightSpeedOut { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-name: lightSpeedOut; animation-timing-function: ease-in; } @keyframes rotateIn { from { -webkit-transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); transform-origin: center; opacity: 0; } to { -webkit-transform-origin: center; transform: none; transform-origin: center; opacity: 1; } } .rotateIn { animation-name: rotateIn; } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); transform-origin: left bottom; opacity: 0; } to { -webkit-transform-origin: left bottom; transform: none; transform-origin: left bottom; opacity: 1; } } .rotateInDownLeft { animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); transform-origin: right bottom; opacity: 0; } to { -webkit-transform-origin: right bottom; transform: none; transform-origin: right bottom; opacity: 1; } } .rotateInDownRight { animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); transform-origin: left bottom; opacity: 0; } to { -webkit-transform-origin: left bottom; transform: none; transform-origin: left bottom; opacity: 1; } } .rotateInUpLeft { animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); transform-origin: right bottom; opacity: 0; } to { -webkit-transform-origin: right bottom; transform: none; transform-origin: right bottom; opacity: 1; } } .rotateInUpRight { animation-name: rotateInUpRight; } @keyframes rotateOut { from { transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); transform-origin: center; opacity: 0; } } .rotateOut { animation-name: rotateOut; } @keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); transform-origin: left bottom; opacity: 0; } } .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); transform-origin: right bottom; opacity: 0; } } .rotateOutDownRight { animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); transform-origin: left bottom; opacity: 0; } } .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); transform-origin: right bottom; opacity: 0; } } .rotateOutUpRight { animation-name: rotateOutUpRight; } @keyframes hinge { 0% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { from { transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); opacity: 0; } to { transform: none; opacity: 1; } } .rollIn { animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); opacity: 0; } } .rollOut { animation-name: rollOut; } @keyframes zoomIn { from { transform: scale3d(.3, .3, .3); opacity: 0; } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { from { -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 0; } 60% { -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 1; } } .zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { from { -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 0; } 60% { -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 1; } } .zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { from { -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 0; } 60% { -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 1; } } .zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { from { -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 0; } 60% { -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 1; } } .zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { from { opacity: 1; } 50% { transform: scale3d(.3, .3, .3); opacity: 0; } to { opacity: 0; } } .zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 1; } to { -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 0; } } .zoomOutDown { animation-name: zoomOutDown; } @keyframes zoomOutLeft { 40% { transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); opacity: 1; } to { -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; opacity: 0; } } .zoomOutLeft { animation-name: zoomOutLeft; } @keyframes zoomOutRight { 40% { transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); opacity: 1; } to { -webkit-transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; opacity: 0; } } .zoomOutRight { animation-name: zoomOutRight; } @keyframes zoomOutUp { 40% { -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); opacity: 1; } to { -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(.175, .885, .32, 1); opacity: 0; } } .zoomOutUp { animation-name: zoomOutUp; } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); visibility: visible; transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } } .slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); visibility: visible; transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); visibility: visible; transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .slideInRight { animation-name: slideInRight; } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); visibility: visible; transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, 100%, 0); visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(100%, 0, 0); visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, -100%, 0); visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { animation-name: slideOutUp; } /** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 22, 2019 */ .swiper-container { /* Fix of Webkit flickering */ z-index: 1; position: relative; margin: 0 auto; padding: 0; overflow: hidden; list-style: none; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { -webkit-transition-property: -webkit-transform; -o-transition-property: transform; box-sizing: content-box; display: -ms-flexbox; display: flex; z-index: 1; position: relative; width: 100%; height: 100%; transition-property: transform; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; margin: 0 auto; transition-timing-function: ease-out; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; -webkit-transition-property: -webkit-transform; -o-transition-property: transform; position: relative; flex-shrink: 0; width: 100%; height: 100%; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; -webkit-transition-property: height, -webkit-transform; -o-transition-property: transform, height; align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } /* IE10 Windows Phone 8 Fixes */ .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-prev, .swiper-button-next { z-index: 10; position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; background-position: center; background-repeat: no-repeat; background-size: 27px 44px; cursor: pointer; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { cursor: auto; opacity: .35; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { right: auto; left: 10px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-lock { display: none; } .swiper-pagination { -webkit-transition: 300ms opacity; -o-transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); z-index: 10; position: absolute; transform: translate3d(0, 0, 0); text-align: center; transition: 300ms opacity; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(.33); -ms-transform: scale(.33); position: relative; transform: scale(.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33); } .swiper-pagination-bullet { display: inline-block; width: 8px; height: 8px; border-radius: 100%; background: #000; opacity: .2; } button.swiper-pagination-bullet { -webkit-box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; padding: 0; border: none; box-shadow: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { background: #007aff; opacity: 1; } .swiper-container-vertical > .swiper-pagination-bullets { -webkit-transform: translate3d(0px, -50%, 0); top: 50%; right: 10px; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: 6px 0; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); top: 50%; width: 8px; transform: translateY(-50%); } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms top, 200ms -webkit-transform; -o-transition: 200ms transform, 200ms top; display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { position: absolute; background: rgba(0, 0, 0, .25); } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform: scale(0); -ms-transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; background: #007aff; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { top: 0; left: 0; width: 100%; height: 4px; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { top: 0; left: 0; width: 4px; height: 100%; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, .25); } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, .25); } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { -ms-touch-action: none; position: relative; border-radius: 10px; background: rgba(0, 0, 0, .1); } .swiper-container-horizontal > .swiper-scrollbar { z-index: 50; position: absolute; bottom: 3px; left: 1%; width: 98%; height: 5px; } .swiper-container-vertical > .swiper-scrollbar { z-index: 50; position: absolute; top: 1%; right: 3px; width: 5px; height: 98%; } .swiper-scrollbar-drag { position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: rgba(0, 0, 0, .5); } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { -o-object-fit: contain; max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ .swiper-lazy-preloader { -webkit-transform-origin: 50%; -ms-transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; z-index: 10; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin-top: -21px; margin-left: -21px; transform-origin: 50%; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-repeat: no-repeat; background-size: 100%; content: ""; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { z-index: -1000; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { -webkit-transition-property: opacity; -o-transition-property: opacity; pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; visibility: hidden; z-index: 1; width: 100%; height: 100%; transform-origin: 0 0; backface-visibility: hidden; pointer-events: none; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { visibility: visible; pointer-events: auto; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { -webkit-backface-visibility: hidden; z-index: 0; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { -webkit-filter: blur(50px); z-index: 0; position: absolute; bottom: 0px; left: 0; width: 100%; height: 100%; background: #000; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="50" /></filter></svg>#filter'); filter: blur(50px); opacity: .6; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { -webkit-backface-visibility: hidden; z-index: 1; backface-visibility: hidden; pointer-events: none; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { -webkit-backface-visibility: hidden; z-index: 0; backface-visibility: hidden; } .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* jqGrid */ /*Grid*/ .ui-jqgrid { box-sizing: content-box; position: relative; } .ui-jqgrid .ui-jqgrid-view { z-index: 100; position: relative; top: 0; left: 0; padding: 0; font-size: 11px; } .ui-jqgrid .ui-common-table { padding: 0; border-width: 0px; border-style: none; border-spacing: 0px; } .ui-jqgrid .ui-jqgrid-titlebar { position: relative; height: 19px; padding: .3em .2em .2em .3em; border-top: 0 none; border-right: 0 none; border-left: 0 none; font-size: 12px; } .ui-jqgrid .ui-jqgrid-caption { text-align: left; } .ui-jqgrid .ui-jqgrid-title { margin: .1em 0 .2em; } .ui-jqgrid .ui-jqgrid-titlebar-close { position: absolute; top: 50%; width: 19px; height: 18px; margin: -10px 0 0 0; padding: 1px; cursor: pointer; } .ui-jqgrid .ui-jqgrid-titlebar-close span { display: block; margin: 1px; } .ui-jqgrid .ui-jqgrid-titlebar-close:hover { padding: 0; } .ui-jqgrid .ui-jqgrid-hdiv { position: relative; margin: 0; padding: 0; overflow: hidden; border-top: 0 none !important; border-right: 0 none !important; border-left: 0 none !important; } .ui-jqgrid .ui-jqgrid-hbox { padding-right: 20px; float: left; } .ui-jqgrid .ui-jqgrid-htable { margin: 0; border-collapse: separate; table-layout: fixed; } .ui-jqgrid .ui-jqgrid-htable th { height: 27px; padding: 0 2px 0 2px; } .ui-jqgrid .ui-jqgrid-htable th div { position: relative; margin: .1em 0em .1em 0em; overflow: hidden; } /* caption*/ /* header*/ .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column { overflow: hidden; border-top: 0 none; border-bottom: 0 none; text-align: center; white-space: nowrap; } .ui-th-column-header, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column-header { height: 26px; overflow: hidden; border-top: 0 none; text-align: center; white-space: nowrap; } .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr { border-left: 0 none; } .ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl { border-right: 0 none; } .ui-first-th-ltr { border-right: 1px solid; } .ui-first-th-rtl { border-left: 1px solid; } .ui-jqgrid .ui-th-div-ie { zoom: 1; height: 17px; white-space: nowrap; } .ui-jqgrid .ui-jqgrid-resize { display: inline; position: relative; height: 20px !important; overflow: hidden; cursor: e-resize; } .ui-jqgrid .ui-grid-ico-sort { display: inline; position: absolute; overflow: hidden; cursor: pointer !important; } .ui-jqgrid .ui-icon-asc { height: 12px; margin-top: -3px; } .ui-jqgrid .ui-icon-desc { height: 12px; margin-top: 3px; margin-left: -1px; } .ui-jqgrid .ui-i-asc { height: 18px; margin-top: 0; } .ui-jqgrid .ui-i-desc { height: 18px; margin-top: 0; margin-left: 12px; } .ui-jqgrid .ui-single-sort-asc { height: 18px; margin-top: 0; } .ui-jqgrid .ui-single-sort-desc { height: 18px; margin-top: -1px; } .ui-jqgrid .ui-jqgrid-sortable { height: 14px; cursor: pointer; } .ui-jqgrid .ui-search-table td.ui-search-clear { width: 25px; } .ui-jqgrid tr.ui-search-toolbar td > input { width: 95%; padding-right: 0px; } .ui-jqgrid .ui-jqgrid-bdiv { z-index: 101; position: relative; margin: 0; padding: 0; overflow: auto; text-align: left; } .ui-jqgrid .ui-jqgrid-btable { margin: 0; border-collapse: separate; outline-style: none; table-layout: fixed; } .ui-jqgrid tr.jqgrow, .ui-jqgrid tr.jqgroup { outline-style: none; } .ui-jqgrid tr.jqgrow td { height: 23px; padding: 1px 2px 1px 2px; overflow: hidden; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit; font-weight: normal; white-space: pre; } .ui-jqgrid tr.jqgfirstrow td { height: auto; padding: 0 2px 0 2px; border-right-width: 1px; border-right-style: solid; } .ui-jqgrid tr.jqgroup td { height: 22px; padding: 0 2px 0 2px; overflow: hidden; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit; font-weight: normal; white-space: pre; } .ui-jqgrid tr.jqfoot td { height: 22px; padding: 0 2px 0 2px; overflow: hidden; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit; font-weight: bold; white-space: pre; } .ui-jqgrid tr.ui-row-ltr td { border-right-width: 1px; border-right-style: solid; border-right-color: inherit; text-align: left; } .ui-jqgrid tr.ui-row-rtl td { border-left-width: 1px; border-left-style: solid; border-left-color: inherit; text-align: right; } .ui-jqgrid td.jqgrid-rownum { margin: 0; padding: 0 2px 0 2px; border: 0 none; } .ui-jqgrid .ui-jqgrid-resize-mark { display: none; z-index: 99999; position: absolute; top: 0; left: 0; width: 2px; height: 100px; overflow: hidden; border: 0 none; background-color: #777; cursor: e-resize; cursor: col-resize; } .ui-jqgrid .ui-jqgrid-sdiv { position: relative; margin: 0; padding: 0; overflow: hidden; border-top: 0 none !important; border-right: 0 none !important; border-left: 0 none !important; } .ui-jqgrid .ui-jqgrid-ftable { margin-bottom: 0; border-collapse: separate; table-layout: fixed; } .ui-jqgrid tr.footrow td { height: 20px; padding: 0 2px 0 2px; overflow: hidden; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: inherit; border-bottom-color: inherit; font-weight: bold; white-space: nowrap; } .ui-jqgrid tr.footrow-ltr td { border-right-width: 1px; border-right-style: solid; border-right-color: inherit; text-align: left; } .ui-jqgrid tr.footrow-rtl td { border-left-width: 1px; border-left-style: solid; border-left-color: inherit; text-align: right; } .ui-jqgrid .ui-jqgrid-pager { z-index: 101; position: relative; height: auto; min-height: 28px; margin: 0; padding: 0; overflow: hidden; border-top: 0 none; border-right: 0 none; border-bottom: 0 none; border-left: 0 none; font-size: 11px; white-space: nowrap; } .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control { position: relative; height: 28px; border-top: 0; border-bottom: 0; border-left: 0; } .ui-jqgrid .ui-pg-table { position: relative; width: auto; margin: 0; padding: 1px 0; } .ui-jqgrid .ui-pg-table td { padding: 0px 1px; font-weight: normal; vertical-align: middle; } .ui-jqgrid .ui-pg-button { height: auto; } .ui-jqgrid .ui-pg-button span { display: block; margin: 2px; float: left; } .ui-jqgrid .ui-pg-button:hover { padding: 0; } .ui-jqgrid .ui-state-disabled:hover { padding: 0px; } .ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-input { width: auto; height: 14px; margin: 0; padding: 3px 2px; border: none; font-size: .9em; line-height: inherit; } .ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox { display: block; height: 19px; margin: 0; padding: 3px 0px; border: none; font-size: .9em; line-height: inherit; } .ui-jqgrid .ui-separator { height: 18px; border-left: 2px solid #ccc; } /* body */ /* footer */ /* Pager*/ .ui-separator-li { width: 100%; height: 2px; margin: 0; padding: 0; border: none; border-top: 2px solid #ccc; } .ui-jqgrid .dropdownmenu { margin-left: 4px; padding: 3px 0 3px 0; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-div, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div { position: relative; padding: 1px 0; float: left; line-height: 20px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-button, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { cursor: pointer; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon { width: 18px; margin: 2px; float: left; } .ui-jqgrid td input, .ui-jqgrid td select { margin: 0; padding-top: 5px; padding-bottom: 5px; } .ui-jqgrid td textarea { width: auto; height: auto; margin: 0; padding-top: 5px; padding-bottom: 5px; } .ui-jqgrid .ui-jqgrid-toppager { position: relative; margin: 0 !important; padding: 0 !important; overflow: hidden; border-top: 0 none !important; border-right: 0 none !important; border-left: 0 none !important; white-space: nowrap; } .ui-jqgrid .ui-jqgrid-pager .ui-pager-table, .ui-jqgrid .ui-jqgrid-toppager .ui-pager-table { width: 100%; height: 100%; table-layout: fixed; } .ui-jqgrid .ui-jqgrid-pager .ui-paging-info, .ui-jqgrid .ui-jqgrid-toppager .ui-paging-info { display: inline; height: auto; margin-top: 3px; margin-right: 4px; font-weight: normal; } .ui-jqgrid .ui-jqgrid-pager .ui-paging-pager, .ui-jqgrid .ui-jqgrid-toppager .ui-paging-pager { height: 100%; table-layout: auto; } .ui-jqgrid .ui-jqgrid-pager .navtable, .ui-jqgrid .ui-jqgrid-toppager .navtable { height: 100%; float: left; table-layout: auto; } .ui-jqgrid .ui-jqgrid-btable .ui-sgcollapsed span { display: block; } .ui-jqgrid .ui-subgrid { width: 100%; margin: 0; padding: 0; } .ui-jqgrid .ui-subgrid table { table-layout: fixed; } .ui-jqgrid .ui-subgrid tr.ui-subtblcell td { height: 18px; border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid; border-right-color: inherit; border-bottom-color: inherit; } .ui-jqgrid .ui-subgrid td.subgrid-data { border-top: 0 none !important; border-left: 0 none !important; } .ui-jqgrid .ui-subgrid td.subgrid-cell { border-width: 0 1px 1px 0; } .ui-jqgrid .ui-th-subgrid { height: 20px; } .ui-jqgrid .loading { display: none; z-index: 101; position: absolute; top: 45%; left: 45%; width: auto; margin: 5px; padding: 6px; border-width: 2px !important; font-size: 11px; font-weight: bold; text-align: center; } .ui-jqgrid .jqgrid-overlay { display: none; z-index: 100; } /*.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {padding:1px 0;float:left;position:relative; line-height: 20px; margin-right:3px;} .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { cursor:pointer; } .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {float:left;margin: 2px; width:18px;} */ /*subgrid*/ /* loading */ /* IE * html .jqgrid-overlay {width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');} */ * .jqgrid-overlay iframe { z-index: -1; position: absolute; top: 0; left: 0; } /* IE width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}*/ /* end loading div */ /* toolbar */ .ui-jqgrid .ui-userdata { height: 27px; overflow: hidden; border-right: 0 none; border-left: 0 none; } /*Modal Window */ .ui-jqdialog { display: none; position: absolute; width: 300px; padding: .2em; overflow: visible; font-size: 11px !important; font-size: 11px; } .ui-jqdialog .ui-jqdialog-titlebar { position: relative; height: 20px; padding: .3em .2em; } .ui-jqdialog .ui-jqdialog-title { margin: .3em .2em .2em .2em; } .ui-jqdialog .ui-jqdialog-titlebar-close { position: absolute; top: 50%; width: 19px; height: 18px; margin: -12px 0 0 0; padding: 1px; cursor: pointer; } .ui-jqdialog .ui-jqdialog-titlebar-close span { display: block; margin: 1px; } .ui-jqdialog .ui-jqdialog-titlebar-close:hover, .ui-jqdialog .ui-jqdialog-titlebar-close:focus { padding: 0; } .ui-jqdialog-content { height: auto; padding: .3em .2em; border: 0; background: none; } .ui-jqdialog .ui-jqdialog-content { height: auto; padding: .3em .2em; border: 0; background: none; } .ui-jqdialog .ui-jqconfirm { display: none; position: absolute; right: 10px; bottom: 10px; width: 220px; height: 80px; padding: .4em 1em; overflow: visible; border-width: 3px; text-align: center; } .ui-jqdialog > .ui-resizable-se { right: -3px; bottom: -3px; } .ui-jqgrid > .ui-resizable-se { right: -3px; bottom: -3px; } /* end Modal window*/ /* Form edit */ .ui-jqdialog-content .FormGrid { position: relative; margin: 0; overflow: auto; } .ui-jqdialog-content .EditTable, .ui-jqdialog-content .DelTable { width: 100%; margin-bottom: 0; } .EditTable td input, .EditTable td select { margin: 0; } .EditTable td textarea { width: auto; height: auto; margin: 0; } .ui-jqdialog-content td.EditButton { padding-top: 5px; padding-bottom: 5px; border-top: 0 none; border-right: 0 none; border-left: 0 none; text-align: right; } .ui-jqdialog-content td.navButton { padding-top: 5px; padding-bottom: 5px; border-top: 0 none; border-right: 0 none; border-left: 0 none; text-align: center; } .ui-jqdialog-content input.FormElement { margin-bottom: 3px; padding: .5em .3em; } .ui-jqdialog-content select.FormElement { margin-bottom: 3px; padding: .3em; } .ui-jqdialog-content .data-line { padding-top: .1em; border: 0 none; } .ui-jqdialog-content .CaptionTD { padding: 2px; border: 0 none; vertical-align: middle; white-space: nowrap; } .ui-jqdialog-content .DataTD { padding: 2px; border: 0 none; vertical-align: top; } .ui-jqdialog-content .form-view-data { white-space: pre; } .fm-button { zoom: 1; display: inline-block; position: relative; height: 18px; margin: 2px 4px 0 0; padding: .6em .5em .2em .5em; text-align: center; text-decoration: none !important; cursor: pointer; } .fm-button-icon-left { padding-left: 1.9em; } .fm-button-icon-right { padding-right: 1.9em; } .fm-button-icon-left .ui-icon { position: absolute; top: 50%; right: auto; left: .2em; margin-top: -8px; margin-left: 0; } .fm-button-icon-right .ui-icon { position: absolute; top: 50%; right: .2em; left: auto; margin-top: -8px; margin-left: 0; } #nData, #pData { width: 15px; margin: 3px; padding: 0; float: left; } .ViewTable { padding: 4px; border-width: 0; border-style: none; border-spacing: 1px; table-layout: fixed; } .ViewTable .CaptionTD, .ViewTable .DataTD { padding: 4px; } /* End Eorm edit */ /*cell edit*/ .ui-jqgrid .edit-cell { padding: 4px 0px 4px 4px; } .ui-jqgrid .selected-row { border-left: 0 none; font-style: normal; } div.ui-jqgrid .selected-row td { border-left: 0 none; font-style: normal; } /* inline edit actions button*/ .ui-inline-del.ui-state-hover span, .ui-inline-edit.ui-state-hover span, .ui-inline-save.ui-state-hover span, .ui-inline-cancel.ui-state-hover span { margin: -1px; } .ui-inline-del, .ui-inline-cancel { margin-left: 8px; } .ui-jqgrid .inline-edit-cell { padding: 4px 0px 4px 4px; } .ui-jqgrid .tree-wrap { position: relative; height: 18px; float: left; overflow: hidden; white-space: nowrap; } .ui-jqgrid .tree-minus, .ui-jqgrid .tree-plus, .ui-jqgrid .tree-leaf { position: absolute; width: 18px; height: 18px; overflow: hidden; } .ui-jqgrid .treeclick { cursor: pointer; } /* Tree Grid */ /* moda dialog */ * iframe.jqm { z-index: -1; position: absolute; top: 0; left: 0; } /* width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}*/ .ui-jqgrid-dnd tr td { height: 20px; border-right-width: 1px; border-right-style: solid; border-right-color: inherit; } /* RTL Support */ .ui-jqgrid .ui-jqgrid-caption-rtl { text-align: right; } .ui-jqgrid .ui-jqgrid-hbox-rtl { float: right; } .ui-jqgrid .ui-jqgrid-resize-ltr { margin: -2px -2px -2px 0; float: right; } .ui-jqgrid .ui-jqgrid-resize-rtl { margin: -2px 0 -1px -3px; float: left; } .ui-jqgrid .ui-sort-rtl { left: 0; } .ui-jqgrid .tree-wrap-ltr { float: left; } .ui-jqgrid .tree-wrap-rtl { float: right; } .ui-jqgrid .ui-ellipsis { -moz-text-overflow: ellipsis; text-overflow: ellipsis; } /* Toolbar Search Menu , Nav menu*/ .ui-search-menu, .ui-nav-menu { -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, .75); -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, .75); z-index: 99999; position: absolute; padding: 2px 5px; box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, .75); } .ui-search-menu.ui-menu .ui-menu-item, .ui-nav-menu.ui-menu .ui-menu-item { padding-right: 0; padding-left: 0; list-style-image: none; } .ui-search-menu.ui-menu .ui-menu-item a, .ui-nav-menu.ui-menu .ui-menu-item a { display: block; } .ui-search-menu.ui-menu .ui-menu-item a.g-menu-item:hover, .ui-nav-menu.ui-menu .ui-menu-item a.g-menu-item:hover { margin: -1px; font-weight: normal; } .ui-jqgrid .ui-search-table { width: 100%; height: 20px; padding: 0; border: 0 none; } .ui-jqgrid .ui-search-table .ui-search-oper { width: 20px; } a.g-menu-item, a.soptclass, a.clearsearchclass { cursor: pointer; } .ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view select, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button { font-size: 11px; } .ui-jqgrid .ui-scroll-popup { width: 95px; } .ui-search-table select, .ui-search-table input { padding: 4px 3px; } .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover > .ui-separator, .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover > .ui-pg-div > .ui-icon { margin-right: 3px; margin-left: 3px; } .ui-jqgrid .ui-jqgrid-htable .colmenu { position: absolute; right: 1px; height: 100%; color: black; } .ui-jqgrid .ui-jqgrid-htable .colmenu-rtl { right: auto; left: 1px; } .ui-jqgrid .ui-jqgrid-htable .colmenuspan { display: inline-block; } .ui-jqgrid .ui-jqgrid-htable .ui-th-div { display: inine-block; height: 17px; margin-top: 5px; } /* Column menu */ .column-menu, .ui-search-menu { padding: 10px 10px; } .column-menu .divider { height: 1px; margin: 5px 0; padding: 0 0; overflow: hidden; background-color: #e5e5e5; } .ui-menu-item .ui-common-table .menu_icon { width: auto; padding-right: 4px; padding-left: 4px; white-space: pre; } .ui-menu-item .ui-common-table .menu_icon .ui-icon { display: inline-block; position: relative; } td.menu_text { width: auto; white-space: nowrap; } .ui-search-menu .ui-menu-item { padding: 0 0; } .ui-col-menu .ui-menu-item td.menu_text { padding-top: 0; padding-bottom: 0; padding-left: 1px; } .ui-col-menu .ui-menu-item td.menu_icon { padding-top: 0; padding-bottom: 0; vertical-align: middle; } .ui-col-menu .ui-menu-item td.menu_icon input { margin: 2px 0; } #search_menu .ui-menu-item div { margin: 3px 0; white-space: nowrap; } #search_menu .ui-menu-item div input, #search_menu .ui-menu-item div select { padding: 3px 2px; } #search_menu .search_buttons { display: inline-block; width: 50%; } #column_menu.ui-menu .ui-menu-item { position: static; } /* actibooks */ /* カテゴリ別グラデーション */ /* 子カテゴリフォルダ */ /* base */ html { min-height: 100vh; } @media only screen and (min-width: 992px) { html { font-size: 14px; } } @media only screen and (min-width: 1200px) { html { font-size: 14px; } } html.flexboxtweener body.contentssmallheight footer { z-index: 2; position: fixed; right: 0; bottom: 0; left: 0; } * { word-break: break-all; } strong { font-weight: bold; } .show { display: block; } .show.forced { display: block !important; } .hide { display: none; } .hide.forced { display: none !important; } /* utilities */ /* space */ .space { display: block; min-height: 1px; max-height: 1px; margin: 12px 0; clear: both; overflow: hidden; } .space-32 { display: block; min-height: 1px; max-height: 1px; margin: 32px 0 31px; clear: both; overflow: hidden; } .space-30 { display: block; min-height: 1px; max-height: 1px; margin: 30px 0 29px; clear: both; overflow: hidden; } .space-28 { display: block; min-height: 1px; max-height: 1px; margin: 28px 0 27px; clear: both; overflow: hidden; } .space-26 { display: block; min-height: 1px; max-height: 1px; margin: 26px 0 25px; clear: both; overflow: hidden; } .space-24 { display: block; min-height: 1px; max-height: 1px; margin: 24px 0 23px; clear: both; overflow: hidden; } .space-22 { display: block; min-height: 1px; max-height: 1px; margin: 22px 0 21px; clear: both; overflow: hidden; } .space-20 { display: block; min-height: 1px; max-height: 1px; margin: 20px 0 19px; clear: both; overflow: hidden; } .space-18 { display: block; min-height: 1px; max-height: 1px; margin: 18px 0 17px; clear: both; overflow: hidden; } .space-16 { display: block; min-height: 1px; max-height: 1px; margin: 16px 0 15px; clear: both; overflow: hidden; } .space-14 { display: block; min-height: 1px; max-height: 1px; margin: 14px 0 13px; clear: both; overflow: hidden; } .space-12 { display: block; min-height: 1px; max-height: 1px; margin: 12px 0 11px; clear: both; overflow: hidden; } .space-10 { display: block; min-height: 1px; max-height: 1px; margin: 10px 0 9px; clear: both; overflow: hidden; } .space-8 { display: block; min-height: 1px; max-height: 1px; margin: 8px 0 7px; clear: both; overflow: hidden; } .space-6 { display: block; min-height: 1px; max-height: 1px; margin: 6px 0 5px; clear: both; overflow: hidden; } .space-4 { display: block; min-height: 1px; max-height: 1px; margin: 4px 0 3px; clear: both; overflow: hidden; } .space-2 { display: block; min-height: 1px; max-height: 1px; margin: 2px 0 1px; clear: both; overflow: hidden; } /* blue button */ /* responsive line-break */ @media only screen and (max-width : 600px) { .br-pc { display: none; } .br-sd { display: block; } } @media only screen and (min-width : 601px) { .br-pc { display: block; } .br-sd { display: none; } } /* ripple */ .waves-effect.waves-blue .waves-ripple { background-color: rgba(98, 177, 214, .65); } .waves-effect.waves-pale .waves-ripple { background-color: rgba(103, 159, 228, .3); } /* filetype icons */ .filetype_icon, .list-table__body__row__type__icon { display: inline-block; width: 28px; height: 28px; font-size: 28px; line-height: 28px; vertical-align: -1px; } .filetype_icon--album:after, .list-table__body__row__type__icon--album:after { color: #666; font-family: "xiconbasic"; content: ""; } .filetype_icon--doc:after, .list-table__body__row__type__icon--doc:after { color: #2c5898; font-family: "xiconbasic"; content: ""; } .filetype_icon--movie:after, .list-table__body__row__type__icon--movie:after { color: #666; font-family: "xiconbasic"; content: ""; } .filetype_icon--pdf:after, .list-table__body__row__type__icon--pdf:after { color: #fb0908; font-family: "xiconbasic"; content: ""; } .filetype_icon--ppt:after, .list-table__body__row__type__icon--ppt:after { color: #f68122; font-family: "xiconbasic"; content: ""; } .filetype_icon--xls:after, .list-table__body__row__type__icon--xls:after { color: #207347; font-family: "xiconbasic"; content: ""; } /* body */ * { box-sizing: border-box !important; } body { /* sticky footer */ display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; background-color: #f6f4f7; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif; } body.body-no-overflowhidden { overflow: visible !important; overflow: initial !important; } body.embedded_mode.nav-afterlogin header nav .nav-inner, body.embedded_mode.nav-beforelogin header nav .nav-inner { width: 100%; } body.embedded_mode.nav-afterlogin .header-homevisual a, body.embedded_mode.nav-beforelogin .header-homevisual a { width: 100%; } body.embedded_mode.nav-afterlogin .header-mainvisual .valign-wrapper, body.embedded_mode.nav-beforelogin .header-mainvisual .valign-wrapper { width: 100%; } body.embedded_mode main .main-inner { width: 100%; } body.embedded_mode main .main-inner .book-list-block { width: 100%; } body.embedded_mode.book-detail--pc.actibooks .book-detail-block__top__inner, body.embedded_mode.book-detail--pc.actibooks .book-detail-block__related { width: 100%; } body.embedded_mode.book-detail--pc .book-detail-block__action__inner { width: 100%; } body.embedded_mode footer .footer-inner { width: 100%; } body.embedded_mode .comments__input__block--fixed { width: 100%; } main { /* sticky footer */ -ms-flex: 1 0 auto; flex: 1 0 auto; } /* general */ a:focus { outline: none; } .btn, .btn-large { box-shadow: none; } .btn-primary { border: 1px solid #4990e2; background-color: #4990e2; box-shadow: none; color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: #75abe9; } .btn-primary:hover, .btn-primary:focus { border-color: #75abe9; box-shadow: none; } .btn-primary.disabled { border-color: #dfdfdf; } .btn-secondary { border: 1px solid #7ccbf0; background-color: #fff; box-shadow: none; color: #4990e2; } .btn-secondary:hover, .btn-secondary:focus { border-color: #4eb9eb; background-color: #e6e6e6; box-shadow: none; color: #2276d6; } .btn-secondary.disabled { border-color: #dfdfdf; } .btn-grey { border: 1px solid #b1b9c0; background-color: #b1b9c0; box-shadow: none; color: #fff; } .btn-grey:hover, .btn-grey:focus { border-color: #95a0a9; background-color: #95a0a9; box-shadow: none; } .btn-detail-primary { border: none; border-radius: 5px; background-color: rgba(231, 255, 194, .59); color: #fff; } .btn-detail-primary:hover, .btn-detail-primary:focus { background-color: rgba(231, 255, 194, .59); } .btn-detail-primary i[class^=xiconbasic-] { margin-right: 3px; font-size: 20px; font-weight: normal; vertical-align: -3px; } .btn-detail-secondary { border: none; border-radius: 5px; background-color: #88b04b; color: #fff; } .btn-detail-secondary:hover, .btn-detail-secondary:focus { background-color: #88b04b; } .btn-detail-secondary i.fa { margin-right: 5px; font-size: 22px; font-weight: normal; vertical-align: -3px; } .btn-danger { border: 1px solid #d15b47; background-color: #d15b47; color: #fff; } .btn-danger:focus { border-color: #b7422e; background-color: #b7422e; } .btn-danger:hover { border-color: #db7f70; background-color: #db7f70; box-shadow: none; } .btn-danger.disabled { border-color: #dfdfdf; } .nobold { font-weight: normal; } /* dropdown */ .operation-dropdown-list-common { width: auto !important; min-width: 270px; margin-top: 4px; padding-top: 10px; padding-bottom: 10px; border-radius: 5px; font-size: 14px; } .operation-dropdown-list-common li { height: 36px; min-height: auto; transition: background-color .5s ease-in-out; } .operation-dropdown-list-common li:hover { background-color: #b1b9c0; } .operation-dropdown-list-common li:hover > a { color: #fff; } .operation-dropdown-list-common li > a { padding-top: 7px; padding-bottom: 7px; color: #666; font-size: 14px; } .operation-dropdown-list-common li > a i { width: 20px; margin-top: -1px; margin-right: 12px; font-size: 20px; } .select-dropdown li { min-height: auto; } .select-dropdown li > span { padding-top: 6px; padding-bottom: 6px; } /* clearfix */ .clearfix:after, body.sd-notice-detail .notice-detail-head__data:after, .notice-detail__header__data:after, .book-detail-block__comments__item__operation__rightside:after, .book-detail-block__comments__item__operation:after, .modal-abo-general .modal-footer:after, .mypage-block__footer:after, .login-form--confirm .form-group:after { display: block; clear: both; content: ""; } /* Grid */ .col.padding-small-15 { padding-right: 15px; padding-left: 15px; } .col.no-padding-left { padding-left: 0; } .col.no-padding-left.padding-exists-small { padding-left: 12px; padding-left: .75rem; } .col.no-padding-left.padding-exists-small.padding-small-15 { padding-left: 15px; } .col.no-padding-right { padding-right: 0; } .col.no-padding-right.padding-exists-small { padding-right: 12px; padding-right: .75rem; } .col.no-padding-right.padding-exists-small.padding-small-15 { padding-right: 15px; } .col.more-padding-left { padding-left: 24px; padding-left: 1.5rem; } .col.more-padding-right { padding-right: 24px; padding-right: 1.5rem; } .no-margin-top { margin-top: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .negative-padding-left { margin-left: -12px; margin-left: -.75rem; } .negative-padding-right { margin-right: -12px; margin-right: -.75rem; } /* scrollbar */ .slimScrollBarY, .slimScrollBarX { border-radius: 0 !important; } .slimScrollRailY, .slimScrollRailX { border-radius: 0 !important; } /* forms */ input[type=text] { color: #666; } input[type=text]:disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; } input[type=checkbox] + label:before { margin-top: 4px; } input[type=checkbox] + label:after { margin-top: 2px; } input[type=checkbox]:not(:checked) + label:before { border-radius: 2px; border-color: #ccc; } input[type=checkbox].filled-in:not(:checked) + label:after { border-radius: 2px; border-color: #ccc; background-color: #fff; } input[type=checkbox].filled-in:checked + label:after { border-color: #4990e2; background-color: #4990e2; } input[type=radio]:not(:checked) + label:before, input[type=radio]:not(:checked) + label:after { border-color: #ccc; } input[type=radio]:checked + label:before, input[type=radio]:checked + label:after { border-color: #4990e2; } input[type=radio]:checked + label:after { background-color: #4990e2; } input[type=radio].with-gap:checked + label:before, input[type=radio].with-gap:checked + label:after { border-color: #4990e2; } input[type=radio].with-gap:checked + label:after { transform: scale(.6666666667); background-color: #4990e2; } input[type=radio] + label:before, input[type=radio] + label:after { width: 24px; height: 24px; margin: 0 8px 0 0; } textarea:disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; cursor: not-allowed; } select { transition: all .3s ease; } select:disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; cursor: not-allowed; } select.browser-default { border-color: #dcdcdc; color: #666; } /* input icon */ .form-input-icon { font-size: 0; } .form-input-icon > span, .form-input-icon > input { font-size: 14px; } .form-input-icon input { width: calc(100% - 30px); vertical-align: top; } .form-input-icon input + span.input-icon { border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .form-input-icon span.input-icon { display: inline-block; width: 30px; height: 35px; border: 1px solid #dcdcdc; border-radius: 2px; background-color: #fff; color: #ccc; font-size: 24px; text-align: center; vertical-align: top; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .form-input-icon span.input-icon.input-icon--before { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .form-input-icon span.input-icon.input-icon--after { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } .form-input-icon span.input-icon + input { width: calc(100% - 30px); border-left: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .form-input-icon span.input-icon + input:not(.picker__input) { display: none; } .form-input-icon span.input-icon i { line-height: 32px; } /* date picker */ .picker__nav--prev, .picker__nav--next { height: 32px; margin-top: 4px; } .picker__nav--prev:before, .picker__nav--next:before { position: absolute; } .picker__nav--prev:hover, .picker__nav--next:hover { background-color: #99cce4; } .picker__nav--prev:before { left: 13px; } .picker__nav--next:before { left: 15px; } .picker:not(.picker--opened) { z-index: -1; } .picker__date-display { padding-bottom: 10px; background-color: #267ea6; } .picker__weekday-display { background-color: #1f6889; } .picker__year-display { margin-bottom: 10px; } .picker__day-display { font-size: 64px; font-size: 4rem; } .picker__day--selected, .picker__day--selected:hover { background-color: #267ea6; } .picker__day.picker__day--today { color: #267ea6; } .picker__day--disabled, .picker__day--disabled:hover { border-color: #eee; background-color: #eee; color: #888; } .picker--focused .picker__day--selected { background-color: #267ea6; } .picker--focused .picker__day--disabled { border-color: #eee; background-color: #eee; color: #888; } .picker__close, .picker__today { color: #267ea6; } .picker .picker__header .picker__select--year { width: 36%; margin-right: 0; margin-left: 42px; float: left; } .picker .picker__header .picker__select--month { width: 30%; margin-right: 42px; margin-left: 0; float: right; } .picker .day_postfix { font-size: 30px; } button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus { background-color: #99cce4; } .select-wrapper { position: relative; } .select-wrapper:hover .caret:after { color: #b2b2b2; } .select-wrapper:hover input.select-dropdown { color: #858585; } .select-wrapper .caret { z-index: 2; right: 8px; width: 16px; height: 16px; color: transparent !important; cursor: pointer; } .select-wrapper .caret:after { position: absolute; top: -4px; left: -3px; width: 16px; height: 16px; color: #d8d8d8; font-family: "FontAwesome"; font-size: 16px; line-height: 16px; content: ""; transition: color .5s ease; } .select-wrapper input.select-dropdown { z-index: 1; position: relative; height: 32px; margin-bottom: 0; padding: 1px 0 0 10px; border-bottom: none; border-radius: 5px; background-color: #fff; color: #666; font-size: 14px; line-height: 32px; transition: color .5s ease; } .select-wrapper .dropdown-content li > a, .select-wrapper .dropdown-content li > span { color: #03a9f4; } .form-prefix { line-height: 35px; } .form-postfix { padding-left: 5px; line-height: 35px; } /* selectize */ .selectize-control, .selectize-control * { transition: all .3s ease; } .selectize-dropdown, .selectize-input { font-size: 14px; } .selectize-input { padding-top: 0; padding-bottom: 0; border-radius: 2px; } .selectize-input.disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; cursor: not-allowed !important; opacity: 1 !important; } .selectize-input.disabled input[type=text]:disabled { background-color: transparent !important; } .selectize-input .item { height: 33px !important; font-size: 14px; line-height: 33px !important; } .selectize-input input { height: 33px !important; font-size: 14px; line-height: 33px !important; } .selectize-control.single .selectize-input { border-color: #dcdcdc; background-color: #fff; background-image: none; box-shadow: none; color: #666; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -3px; border-width: 5px 5px 0 5px; border-color: #808080 transparent transparent transparent; } .actibooks_labels { transition: all .28 ease; } .actibooks_labels.disabled { color: rgba(0, 0, 0, .26); } /* navigation */ body { color: #4b4b4b; } .nav-afterlogin header.navbar-fixed, .nav-beforelogin header.navbar-fixed { height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header.navbar-fixed, .nav-beforelogin header.navbar-fixed { width: 100%; height: 44px; } } .nav-afterlogin header.navbar-fixed nav, .nav-beforelogin header.navbar-fixed nav { width: 100vw; } .nav-afterlogin header nav, .nav-beforelogin header nav { background-color: #2c343b; box-shadow: none; line-height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav, .nav-beforelogin header nav { width: 100%; height: 44px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2); line-height: 44px; } } .nav-afterlogin header nav .sd-nav-icon, .nav-beforelogin header nav .sd-nav-icon { position: relative; width: 44px; color: #b1b9c0; text-align: center; vertical-align: top; } .nav-afterlogin header nav .sd-nav-icon.sd-nav-icon--active, .nav-beforelogin header nav .sd-nav-icon.sd-nav-icon--active { color: #7ccbf0; } .nav-afterlogin header nav .sd-nav-icon i, .nav-beforelogin header nav .sd-nav-icon i { font-size: 30px; } .nav-afterlogin header nav .sd-nav-icon .icon-badge, .nav-beforelogin header nav .sd-nav-icon .icon-badge { display: inline-block; z-index: 5; position: absolute; top: 4px; right: 2px; height: 13px; padding: 2px 3px 1px; border-radius: 6px; background-color: #f44336; color: #fff; font-size: 10px; line-height: 10px; white-space: nowrap; } .nav-afterlogin header nav .sd-btn-flat, .nav-beforelogin header nav .sd-btn-flat { padding-right: 15px; padding-left: 15px; color: #fff; font-size: 13px; line-height: 50px; } .nav-afterlogin header nav i, .nav-beforelogin header nav i { height: 44px; line-height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav i, .nav-beforelogin header nav i { height: 44px; line-height: 44px; } } .nav-afterlogin header nav .logo-box, .nav-beforelogin header nav .logo-box { display: -ms-inline-flexbox; display: inline-flex; position: relative; left: auto; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 106px; height: 36px; margin-top: 4px; overflow: hidden; transform: none; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .logo-box, .nav-beforelogin header nav .logo-box { position: absolute; left: 50%; width: 87px !important; height: 32px !important; margin-top: 6px; margin-left: 0; transform: translateX(-50%); } } .nav-afterlogin header nav .brand-logo, .nav-beforelogin header nav .brand-logo { position: relative; width: 106px; height: 39px; background-image: url("../images/logo.png"); background-repeat: no-repeat; background-size: cover; text-indent: -9999px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .brand-logo, .nav-beforelogin header nav .brand-logo { width: 87px !important; height: 32px !important; } } .nav-afterlogin header nav .nav-wrapper, .nav-beforelogin header nav .nav-wrapper { height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-wrapper, .nav-beforelogin header nav .nav-wrapper { height: 44px; } } .nav-afterlogin header nav .nav-wrapper .nav-upper, .nav-beforelogin header nav .nav-wrapper .nav-upper { z-index: 2; position: relative; height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-wrapper .nav-upper, .nav-beforelogin header nav .nav-wrapper .nav-upper { height: 44px; } } .nav-afterlogin header nav .nav-inner, .nav-beforelogin header nav .nav-inner { width: 1168px; height: 44px; margin: 0 auto; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-inner, .nav-beforelogin header nav .nav-inner { width: 100%; height: 44px; } } .nav-afterlogin header nav .nav-inner a.sd-loginlink, .nav-beforelogin header nav .nav-inner a.sd-loginlink { padding: 0 14px; font-weight: bold; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-inner a, .nav-beforelogin header nav .nav-inner a { height: 44px; } } .nav-afterlogin header nav .nav-right, .nav-beforelogin header nav .nav-right { width: calc(100% - 106px); font-size: 0; } .nav-afterlogin header nav .nav-right > ul, .nav-beforelogin header nav .nav-right > ul { font-size: 14px; } .nav-afterlogin header nav #nav-pc, .nav-beforelogin header nav #nav-pc { z-index: 2; } .nav-afterlogin header nav #nav-pc_search, .nav-beforelogin header nav #nav-pc_search { font-size: 0; } .nav-afterlogin header nav #nav-pc_search > li, .nav-beforelogin header nav #nav-pc_search > li { height: 44px; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav #nav-pc_search > li, .nav-beforelogin header nav #nav-pc_search > li { height: 44px; } } .nav-afterlogin header nav #nav-pc_search > li > div, .nav-beforelogin header nav #nav-pc_search > li > div { font-size: 14px; } .nav-afterlogin header nav .nav-pc-rightside, .nav-beforelogin header nav .nav-pc-rightside { display: inline-block; position: relative; vertical-align: top; } .nav-afterlogin header nav .nav-pc-rightside i[class^=xiconbasic-], .nav-beforelogin header nav .nav-pc-rightside i[class^=xiconbasic-] { color: #b1b9c0; font-size: 32px; } .nav-afterlogin header nav .nav-pc-rightside__item, .nav-beforelogin header nav .nav-pc-rightside__item { position: relative; } .nav-afterlogin header nav .nav-pc-rightside__item--icon, .nav-beforelogin header nav .nav-pc-rightside__item--icon { padding: 0 0 0 1px; } .nav-afterlogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before, .nav-beforelogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before { position: absolute; top: 0; left: 0; width: 1px; height: 44px; background-color: #dedede; content: ""; } .nav-afterlogin header nav .nav-pc-rightside__item--icon.nav-pc-rightside__item--icon--noborder, .nav-beforelogin header nav .nav-pc-rightside__item--icon.nav-pc-rightside__item--icon--noborder { padding-left: 0; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-slide__wrap, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-slide__wrap { display: inline-block; height: 44px; vertical-align: top; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-slide__wrap, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-slide__wrap { height: 44px; } } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown { position: relative; width: 140px; height: 32px; padding: 0 32px 0 10px; overflow: hidden; border-right: 1px solid #aaa; border-radius: 5px 0 0 5px; color: #888; font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown:after, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown:after { display: inline-block; position: absolute; right: 8px; width: 24px; height: 32px; color: #949aa0; font-family: "FontAwesome"; font-size: 15px; text-align: center; content: ""; transition: transform .5s ease, color .5s ease; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown.active, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown.active { color: #888; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown.active:after, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown.active:after { transform: rotate(180deg); } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap { display: inline-block; margin: 6px 0 0 12px; border-radius: 5px 0 0 5px; background-color: #fff; line-height: 32px; vertical-align: top; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content { overflow: hidden; background-color: rgba(56, 65, 74, .96); box-shadow: none; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li { background-color: transparent; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li.divider, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li.divider { width: calc(100% - 20px); margin: 0 10px; background-color: #fff !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li:not(.divider), .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li:not(.divider) { height: 32px; min-height: 0; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li:hover, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content li:hover { background-color: transparent; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content a, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content a { width: 100%; padding: 6px 10px; overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content a:hover, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-dropdown__wrap .dropdown-content a:hover { background-color: rgba(0, 0, 0, .1); color: #fff; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 180px; height: 30px; margin: 0; padding: 0 46px 0 8px; border: none !important; border-radius: 0 5px 5px 0; background-color: transparent; box-shadow: none !important; color: #4b4b4b; font-size: 13px; line-height: 30px; text-align: left; transition: width .3s ease-in-out; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput:placeholder-shown, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput:placeholder-shown { color: #888 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput::-webkit-input-placeholder, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput::-webkit-input-placeholder { color: #888 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput:-moz-placeholder, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput:-moz-placeholder { color: #888 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput::-moz-placeholder, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput::-moz-placeholder { color: #888 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput:-ms-input-placeholder, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput:-ms-input-placeholder { color: #888 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput:focus, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput:focus { border: none !important; box-shadow: none !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap { display: inline-block; position: relative; width: 182px; height: 32px; margin: 6px 12px 0 0; padding: 1px; border-radius: 0 6px 6px 0; background-color: #fff; line-height: 0; transition: width .3s ease-in-out; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap.focused, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap.focused { width: 448px; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap.focused .item-searchinput, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap.focused .item-searchinput { width: 446px; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap .searchicon, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap .searchicon { display: inline-block; position: absolute; top: 9px; right: 17px; width: 14px; height: 14px; color: #2c343b; font-size: 14px; line-height: 14px; cursor: pointer; transition: color .3s ease-in-out; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap .searchicon i, .nav-beforelogin header nav .nav-pc-rightside__item--icon .item-searchinput__wrap .searchicon i { height: 14px; line-height: 14px; } .nav-afterlogin header nav .nav-pc-rightside__item--icon a, .nav-beforelogin header nav .nav-pc-rightside__item--icon a { display: inline-block; vertical-align: top; } .nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon, .nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon { width: 56px; height: 44px; padding: 0; text-align: center; transition: color .5s ease; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon, .nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon { height: 44px; } } .nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon.item-icon--active i[class^=xiconbasic-], .nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon.item-icon--active i[class^=xiconbasic-] { color: #7ccbf0; } .nav-afterlogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags, .nav-beforelogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags { padding-top: 4px; font-size: 0 !important; line-height: 0 !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags i, .nav-beforelogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags i { height: auto !important; font-size: 36px; line-height: 36px; } .nav-afterlogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags .nav-pc-tags-label, .nav-beforelogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags .nav-pc-tags-label { color: #b1b9c0; font-size: 10px !important; line-height: 10px !important; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .icon-badge-wrap, .nav-beforelogin header nav .nav-pc-rightside__item--icon .icon-badge-wrap { display: inline-block; position: absolute; top: 3px; right: 3px; width: 33px; height: 17px; font-size: 0; line-height: 0; text-align: center; vertical-align: top; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .icon-badge, .nav-beforelogin header nav .nav-pc-rightside__item--icon .icon-badge { display: inline-block; z-index: 5; height: 17px; padding: 4px 5px 2px; border-radius: 8px; background-color: #f44336; color: #fff; font-size: 11px; line-height: 11px; white-space: nowrap; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .icon-badge:empty, .nav-beforelogin header nav .nav-pc-rightside__item--icon .icon-badge:empty { display: none; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .icon-badge:blank, .nav-beforelogin header nav .nav-pc-rightside__item--icon .icon-badge:blank { display: none; } .nav-afterlogin header nav .nav-pc-rightside__item--icon .icon-badge:-moz-only-whitespace, .nav-beforelogin header nav .nav-pc-rightside__item--icon .icon-badge:-moz-only-whitespace { display: none; } .nav-afterlogin header nav .nav-pc-rightside__item--tags i.xiconbasic-tag, .nav-beforelogin header nav .nav-pc-rightside__item--tags i.xiconbasic-tag { font-size: 36px; } .nav-afterlogin header nav .nav-pc-rightside__item--search, .nav-beforelogin header nav .nav-pc-rightside__item--search { width: 613px; text-align: left; } .nav-afterlogin header nav .nav-pc-rightside__item--login:before, .nav-beforelogin header nav .nav-pc-rightside__item--login:before { position: absolute; top: 0; left: 0; width: 1px; height: 44px; background-color: #dedede; content: ""; } .nav-afterlogin header nav .nav-pc-rightside__item--login a.btn-flat, .nav-beforelogin header nav .nav-pc-rightside__item--login a.btn-flat { margin: 0 10px 0 11px; padding: 0 20px; font-size: 14px; line-height: 38px; } .nav-afterlogin header nav .nav-pc-rightside__item--register a.btn-flat, .nav-beforelogin header nav .nav-pc-rightside__item--register a.btn-flat { margin: 0; padding: 0 20px; font-size: 14px; line-height: 38px; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo { padding: 0 0 0 1px; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo:before, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo:before { position: absolute; top: 0px; left: 0; width: 1px; height: 44px; background-color: #dedede; content: ""; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-pc-rightside__item--userinfo:before, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo:before { height: 44px; } } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu { position: relative; padding: 0 0 0 22px; font-size: 0; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active { color: #7ccbf0; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active .pc-usermenu__userinfo i, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active .pc-usermenu__userinfo i { color: #7ccbf0; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap { min-width: 112px; min-width: 7rem; text-align: left; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div { display: inline-block; height: 44px; font-size: 14px; vertical-align: top; } @media only screen and (max-width : 600px) { .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div { height: 44px; } } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img { padding: 8px 0; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img img, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img img { display: inline-block; width: 32px; height: 32px; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__userinfo, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__userinfo { max-width: 208px; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__userinfo i, .nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__userinfo i { color: #fff; font-size: 18px; vertical-align: -2px; } @media only screen and (min-width : 601px) { .nav-afterlogin header nav, .nav-afterlogin header nav .nav-wrapper i, .nav-afterlogin header nav a.button-collapse, .nav-afterlogin header nav a.button-collapse i, .nav-beforelogin header nav, .nav-beforelogin header nav .nav-wrapper i, .nav-beforelogin header nav a.button-collapse, .nav-beforelogin header nav a.button-collapse i { height: 44px; line-height: 44px; } } .nav-afterlogin .book-viewer, .nav-beforelogin .book-viewer { position: relative; width: 100%; margin: 0; } .nav-afterlogin .book-viewer .book-viewer-dummy, .nav-beforelogin .book-viewer .book-viewer-dummy { width: 100%; height: 683px; overflow: hidden; background-color: #cac9cd; text-align: center; } .nav-afterlogin .homevisual-box, .nav-beforelogin .homevisual-box { display: -ms-flexbox; display: flex; position: relative; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 144px; margin: auto auto; overflow: hidden; text-align: center; } .nav-afterlogin .homevisual-box.homevisual-box--sd, .nav-beforelogin .homevisual-box.homevisual-box--sd { height: auto; } .nav-afterlogin .homevisual-box.homevisual-box--sd:before, .nav-beforelogin .homevisual-box.homevisual-box--sd:before { display: block; padding-top: 38.4%; content: ""; } .nav-afterlogin .header-homevisual, .nav-afterlogin .header-mainvisual, .nav-beforelogin .header-homevisual, .nav-beforelogin .header-mainvisual { position: relative; height: 144px; margin: 0; } .nav-afterlogin .header-mainvisual, .nav-beforelogin .header-mainvisual { width: 100%; } .nav-afterlogin .header-homevisual, .nav-beforelogin .header-homevisual { position: absolute; top: 0; left: calc((100% - 2560px) / 2); width: 2560px; background-position: top center; background-repeat: no-repeat; } .nav-afterlogin .header-homevisual.header-homevisual--sd, .nav-beforelogin .header-homevisual.header-homevisual--sd { left: 0; width: 100%; height: 100%; background-size: cover; opacity: 0; } .nav-afterlogin .header-homevisual.header-homevisual--sd.processed, .nav-beforelogin .header-homevisual.header-homevisual--sd.processed { opacity: 1; } .nav-afterlogin .header-homevisual.header-homevisual--sd a, .nav-beforelogin .header-homevisual.header-homevisual--sd a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; height: auto; margin: 0; } .nav-afterlogin .header-homevisual a, .nav-beforelogin .header-homevisual a { display: block; width: 1168px; max-width: 100%; height: 100%; margin: 0 auto; } .nav-afterlogin .header-mainvisual, .nav-beforelogin .header-mainvisual { background-image: url("../images/header_bg.jpg"); background-position: top center; background-size: cover; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual, .nav-beforelogin .header-mainvisual { height: 80px; margin-top: -44px; padding-top: 44px; background-position: bottom center; } } .nav-afterlogin .header-mainvisual .valign-wrapper, .nav-beforelogin .header-mainvisual .valign-wrapper { position: relative; width: 1168px; margin: 0 auto; color: #fff; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual .valign-wrapper, .nav-beforelogin .header-mainvisual .valign-wrapper { width: 100%; } } .nav-afterlogin .header-mainvisual .valign-wrapper .valign, .nav-beforelogin .header-mainvisual .valign-wrapper .valign { width: 100%; } .nav-afterlogin .header-mainvisual .valign-wrapper h2, .nav-beforelogin .header-mainvisual .valign-wrapper h2 { margin: 0; font-size: 25px; line-height: 25px; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual .valign-wrapper h2, .nav-beforelogin .header-mainvisual .valign-wrapper h2 { font-size: 16px; line-height: 16px; } } .nav-afterlogin .header-mainvisual .valign-wrapper h2 + h5, .nav-beforelogin .header-mainvisual .valign-wrapper h2 + h5 { margin: 0; font-size: 12px; } .nav-afterlogin .header-mainvisual .valign-wrapper h2 + h5:not(.hide), .nav-beforelogin .header-mainvisual .valign-wrapper h2 + h5:not(.hide) { margin-top: 5px; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual .valign-wrapper h2 + h5, .nav-beforelogin .header-mainvisual .valign-wrapper h2 + h5 { display: none; } } .nav-afterlogin .header-mainvisual__navigation, .nav-beforelogin .header-mainvisual__navigation { display: none; z-index: 3; position: absolute; bottom: 0; left: 0; width: 44px; height: 36px; } .nav-afterlogin .header-mainvisual__navigation a, .nav-beforelogin .header-mainvisual__navigation a { display: inline-block; width: 100%; height: 100%; } .nav-afterlogin .header-mainvisual__navigation .chevron-alike, .nav-beforelogin .header-mainvisual__navigation .chevron-alike { margin-top: 11px; } .nav-afterlogin .header-mainvisual .header-fab, .nav-beforelogin .header-mainvisual .header-fab { display: none; position: absolute; right: 38px; bottom: -28px; width: 56px; height: 56px; border-radius: 50%; background-color: #4990e2; color: #fff; cursor: pointer; transition: all .2s ease-in-out; } .nav-afterlogin .header-mainvisual .header-fab:hover, .nav-afterlogin .header-mainvisual .header-fab:focus, .nav-beforelogin .header-mainvisual .header-fab:hover, .nav-beforelogin .header-mainvisual .header-fab:focus { background-color: #75abe9; } .nav-beforelogin .header-mainvisual { padding: 0; } @media only screen and (max-width : 600px) { .nav-beforelogin .header-mainvisual { padding-top: 44px; } } .nav-beforelogin .header-mainvisual .valign-wrapper { height: 144px; } @media only screen and (max-width : 600px) { .nav-beforelogin .header-mainvisual .valign-wrapper { height: 36px; } } .nav-afterlogin .header-mainvisual { padding: 0; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual { padding-top: 44px; } } .nav-afterlogin .header-mainvisual .valign-wrapper { height: 100px; } @media only screen and (max-width : 600px) { .nav-afterlogin .header-mainvisual .valign-wrapper { height: 36px; } } .nav-nouseradmin header nav .nav-pc-rightside__item--icon { margin-right: 1px; } .nav-nouseradmin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):after { position: absolute; top: 0; right: 0; width: 1px; height: 44px; background-color: #dedede; content: ""; } body { /* コンテンツ詳細のタブレット対応 */ } body.has-headernavi .header-mainvisual__navigation { display: inline-block; } @media only screen and (min-width : 601px) { body.has-headernavi .header-mainvisual__navigation { display: none; } } body.sd-noresponsive .header-sections { height: 36px; } body.sd-noresponsive .header-sections__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } body.sd-noresponsive .header-sections .header-sections-bgwrap:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin-left: 0; } body.sd-noresponsive .header-sections .valign-wrapper .valign h2 { font-size: 15px; letter-spacing: 1px; text-shadow: 0 0 3px rgba(0, 0, 0, .8); } body.sd-noresponsive .header-sections .valign-wrapper .valign h2 + h5 { display: none; } body.sd-noresponsive main .main-inner { width: 100%; margin: 20px auto 54px; } body.sd-noresponsive main .main-inner .main-content { width: 100%; } body.book-detail--tablet.nav-afterlogin header nav .logo-box, body.book-detail--tablet.nav-beforelogin header nav .logo-box { width: 118px; padding-right: 6px; padding-left: 6px; } body.book-detail--tablet.nav-afterlogin header nav .nav-inner, body.book-detail--tablet.nav-beforelogin header nav .nav-inner { width: 768px; margin: 0 auto; } body.book-detail--tablet.nav-afterlogin header nav .nav-right, body.book-detail--tablet.nav-beforelogin header nav .nav-right { width: calc(100% - 118px); } body.book-detail--tablet.nav-afterlogin header nav .nav-right .nav-pc-rightside:not(.nav-pc_search), body.book-detail--tablet.nav-beforelogin header nav .nav-right .nav-pc-rightside:not(.nav-pc_search) { width: 320px; } body.book-detail--tablet.nav-afterlogin header nav .nav-right .nav-pc-rightside .nav-pc-rightside__item--search, body.book-detail--tablet.nav-beforelogin header nav .nav-right .nav-pc-rightside .nav-pc-rightside__item--search { width: 330px; } body.book-detail--tablet main .main-inner { width: 768px; margin: 0 auto; } body.book-detail--tablet main .main-inner .detail-texts { padding: 15px 0 0; } body.book-detail--tablet main .main-inner .detail-texts__book-title { height: 29px; padding: 0 15px; color: #666; font-size: 20px; letter-spacing: .8px; } body.book-detail--tablet main .main-inner .detail-texts__tags { display: none; margin: 0; padding: 0 10px; } body.book-detail--tablet main .main-inner .detail-texts__tags__tag { height: 23px; font-size: 14px; line-height: 14px; } body.book-detail--tablet main .main-inner .detail-texts__tags__tag:before { font-size: 17px; } body.book-detail--tablet main .main-inner .detail-texts__explain { margin-bottom: 0; padding: 0 15px 24px; } body.book-detail--tablet main .main-inner .detail-texts__explain__body { margin-top: 16px; font-size: 15px; letter-spacing: 1px; line-height: 22px; } body.book-detail--tablet main .main-inner .detail-texts__htmlblock { position: relative; margin-bottom: 0; padding: 0 15px 30px; } body.book-detail--tablet main .main-inner .detail-texts__htmlblock:after { display: inline-block; position: absolute; bottom: 0; left: 50%; width: 63px; height: 2px; margin-left: calc(-63px / 2); background-color: #9b9b9b; content: ""; opacity: .61; } body.book-detail--tablet main .main-inner .detail-texts__htmlblock__title { color: #666; font-size: 16px; line-height: 23px; } body.book-detail--tablet main .main-inner .detail-texts__htmlblock__body { margin-top: 10px; padding: 0; font-size: 15px; letter-spacing: 1px; line-height: 22px; } body.book-detail--tablet main .main-inner .book-detail-block__comments__title { color: #666; } body.book-detail--tablet footer .footer-inner { width: 768px; } body.book-detail--tablet .follow-text, body.book-detail--tablet .modal-follow { font-size: 11px; line-height: 16px; } .chevron-alike { display: inline-block; width: 14px; height: 14px; margin: 15px 0 0 18px; transform: rotate(45deg); border: 2px solid #576776; border-top-width: 0; border-right-width: 0; } .chevron-alike--white { border-color: #fff; } .header-rightside { display: inline-block; z-index: 3; position: absolute; right: 0; bottom: 0; height: 36px; padding-right: 4px; } /* ログインフォーム */ .sd-loginbutton { color: #b1b9c0 !important; } @media only screen and (min-width : 601px) { body.login .main-inner { margin-top: 40px; } } @media only screen and (max-width : 600px) { body.login .main-inner { margin-top: 30px; } } @media only screen and (max-width : 600px) { body.login .sd-loginbutton { display: none; } } body.login-confirm .main-inner { margin-top: 40px; } @media only screen and (min-width : 601px) { .loginsignup-block { width: 600px; margin: 0 auto; padding: 16px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); } } .loginsignup-block .needlogin-message { margin-bottom: 16px; padding: 12px 16px; } @media only screen and (max-width : 600px) { .loginsignup-block .needlogin-message { margin-right: 16px; margin-left: 16px; } } .loginsignup-block .needlogin-message + .login-form .form-row:not(:first-child) { margin-top: 16px; } .loginsignup-block .needlogin-message + .login-form .form-row:not(:last-child) { margin-bottom: 16px; } @media only screen and (max-width : 600px) { .loginsignup-block .password-reminder-block, .loginsignup-block .login-button-block, .loginsignup-block .signup-link-block { margin-top: 8px; } } @media only screen and (min-width : 601px) { .login-form .form-row .col-label { padding-left: 0; } .login-form .form-row .col-input { padding-right: 0; } } @media only screen and (max-width : 600px) { .login-form .form-row { margin-top: 24px; margin-bottom: 24px; } .login-form .form-row:first-child { margin-top: 0; } .login-form .form-row:last-child { margin-bottom: 0; } .login-form .form-row .col-label { padding-right: 0; padding-left: 0; } .login-form .form-row .col-input { margin-top: 8px; padding-right: 0; padding-left: 0; } .login-form .form-row label { display: block; padding-left: 14px; color: #666; font-size: 14px; font-weight: bold; } .login-form .form-row label.form-label { margin-top: 0; } .login-form .form-row label.form-label .label-chip { display: none; } .login-form .form-row input[type=text], .login-form .form-row input[type=password] { height: 44px; margin-bottom: 0; padding: 5px 14px; border: 1px solid #dcdcdc; border-right-width: 0 !important; border-left-width: 0 !important; border-radius: 0; background-color: #fff; font-size: 16px; } .login-form .form-row input[type=text]:focus, .login-form .form-row input[type=password]:focus { border-color: #f59942; box-shadow: none; } .login-form .form-row input[type=text]:-moz-read-only, .login-form .form-row input[type=password]:-moz-read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .login-form .form-row input[type=text]:read-only, .login-form .form-row input[type=password]:read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .login-form .form-row .follow-text, .login-form .form-row .help-text { margin-top: 5px; padding: 0 14px; } } .login-form .form-group { margin-top: 25px; } .login-form .form-group:first-child { margin-top: 0; } .login-form .form-group.has-error label { color: #d16e6c !important; } .login-form .form-group.has-error input[type=text], .login-form .form-group.has-error input[type=password], .login-form .form-group.has-error textarea { border-color: #f09784; background-color: #ffc !important; color: #d68273; } .login-form .form-group.has-error input[type=text]:disabled, .login-form .form-group.has-error input[type=password]:disabled, .login-form .form-group.has-error textarea:disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; cursor: not-allowed; } .login-form .form-group.has-error .help-text { display: block; color: #d16e6c; } .login-form .form-group.has-error .follow-text { color: #d16e6c; } .login-form .form-group .follow-text, .login-form .form-group .help-text { margin-top: 5px; padding: 0 14px; } .login-form .form-group label { display: block; padding-left: 14px; color: #666; font-size: 14px; font-weight: bold; } .login-form .form-group label + input[type=text], .login-form .form-group label + input[type=password] { margin-top: 8px; } .login-form .form-group input[type=text], .login-form .form-group input[type=password] { height: 44px; margin-bottom: 0; padding: 5px 14px; border: 1px solid #dcdcdc; border-right-width: 0; border-left-width: 0; background-color: #fff; font-size: 16px; } .login-form .form-group input[type=text]:focus, .login-form .form-group input[type=password]:focus { border-color: #f59942; box-shadow: none; } .login-form .form-group input[type=text]:-moz-read-only, .login-form .form-group input[type=password]:-moz-read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .login-form .form-group input[type=text]:read-only, .login-form .form-group input[type=password]:read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .login-form--confirm .form-group { margin-top: 8px; padding: 22px 15px; border-bottom: 1px solid #dedede; } .login-form--confirm .form-group dl { font-size: 0; } .login-form--confirm .form-group dl dt, .login-form--confirm .form-group dl dd { color: #666; font-size: 14px; line-height: 16px; vertical-align: middle; } .login-form--confirm .form-group dl dt { width: 145px; padding-right: 10px; float: left; font-weight: bold; } .login-form--confirm .form-group dl dd { width: calc(100% - 145px); margin-left: 145px; } .login-form__lead { margin-bottom: 30px; padding: 0 15px; color: #666; font-size: 12px; } .login-form__lead--header { margin-bottom: 40px; font-size: 16px; font-weight: bold; text-align: center; } .login-form__lead--header .login-form__lead--header__finished { width: 100px; width: 100px; height: 100px; height: 100px; margin: 0 auto 30px; background-image: url(../images/_sprite.png); background-position: -161px 0px; background-repeat: no-repeat; background-size: 261px 200px; } .login-form__lead--mailsent { font-size: 14px; text-align: center; } .login-form__lead--sub { margin-bottom: 0; color: #9b9b9b; } .password-reminder-block, .termsofuse-confirm-block, .signup-link-block { margin: 40px 0 0; text-align: center; } .password-reminder-block a, .termsofuse-confirm-block a, .signup-link-block a { color: #3b7adb; } @media only screen and (max-width : 600px) { .password-reminder-block, .termsofuse-confirm-block, .signup-link-block { margin-top: 24px; } } .termsofuse-confirm-block .termsofuse-confirm { font-size: 11px; } .termsofuse-confirm-block .termsofuse-confirm a { display: inline-block; margin: 0 auto; line-height: 16px; text-align: left; } .termsofuse-confirm-block .termsofuse-checkbox { margin-top: 16px; } .login-termsofuse__title { padding: 0 0 17px 15px; border-bottom: 1px solid #dcdcdc; color: #666; font-weight: bold; } .login-termsofuse__content { padding: 30px 32px 0; color: #666; } .login-termsofuse h3 { margin: 15.68px 0 12.544px 0; margin: .98rem 0 .784rem 0; font-size: 31.36px; font-size: 1.96rem; line-height: 110%; counter-reset: partTitle 0; } .login-termsofuse h3:first-child { margin-top: 0; } .login-termsofuse h4 { margin: 10.56px 0 8.448px 0; margin: .66rem 0 .528rem 0; padding-bottom: 5px; border-bottom: #ccc solid 1px; font-size: 21.12px; font-size: 1.32rem; line-height: 110%; counter-increment: partTitle 1; counter-reset: sectTitle 0; } .login-termsofuse h4:before { content: counter(partTitle) ". "; } .login-termsofuse h5 { margin: 8px 0 6.4px 0; margin: .5rem 0 .4rem 0; font-size: 16px; font-size: 1rem; line-height: 110%; counter-increment: sectTitle 1; } .login-termsofuse h5:before { content: "(" counter(sectTitle) ") "; } .login-termsofuse h5 + p { padding-left: 32px; padding-left: 2rem; } .login-termsofuse p + h4, .login-termsofuse ul + h4 { margin-top: 30px; } .login-termsofuse p + .tou-emtitle, .login-termsofuse ul + .tou-emtitle { margin-top: 20px; } .login-termsofuse .right-box { display: inline-block; width: auto; } .login-termsofuse .tou-emtitle { margin: 10.56px 0 8.448px 0; margin: .66rem 0 .528rem 0; font-size: 21.12px; font-size: 1.32rem; line-height: 110%; counter-reset: sectTitle 0; } .login-termsofuse .alert-well { background-color: #eee; } .login-termsofuse .alert-well .tou-emtitle { margin-top: 0; } .login-termsofuse .external-link { display: inline-block; margin-left: 32px; margin-left: 2rem; } .login-termsofuse .external-link:before { margin-right: 5px; font-family: "FontAwesome"; content: ""; } .login-termsofuse .external-link:hover { text-decoration: underline; } body.privacy_policies .login-termsofuse__content { padding: 0 16px; } .login-button-block { margin-top: 40px; padding: 0 15px; } .login-button-block.signup-button-block { margin-top: 0; } @media only screen and (max-width : 600px) { .login-button-block { margin-top: 24px; } } .login-button-block a.btn, .login-button-block a.btn-large { width: 100%; height: 48px; border-radius: 5px; box-shadow: none; line-height: 48px; } .login-button-block__or { margin: 10px 0; font-size: 12px; text-align: center; } /* ログイン済みの場合のログイン確認モーダル */ .modal-alreadyloggedin .modal-content__body { margin-bottom: 35px; } .modal-alreadyloggedin .modal-content__links { line-height: 16px; } .modal-alreadyloggedin .modal-content__links .modal-content__links__item { margin: 28px 0; } .modal-alreadyloggedin .modal-content__links .modal-content__links__item:first-child { margin-top: 0; } .modal-alreadyloggedin .modal-content__links .modal-content__links__item:last-child { margin-bottom: 0; } /* SD 用の検索 UI */ .header-sd-search { z-index: 2; position: relative; width: 100%; height: 45px; margin-bottom: 10px; padding: 0 15px; background-color: #f6f4f7; transition: margin-top .5s ease-in-out; } .header-sd-search.active { margin-top: 0; } .header-sd-search__select { position: relative; margin-bottom: 10px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2); } .header-sd-search__select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 2; position: relative; height: 36px; padding: 0 38px 0 12px; border: none; border-radius: 2px; background-color: transparent; color: #ababab; font-size: 16px; line-height: 36px; } .header-sd-search__select select:focus { outline: none; } .header-sd-search__select .dummy-caret { display: inline-block; z-index: 1; position: absolute; top: 0; right: 0; width: 38px; height: 36px; padding: 8px 0 0; text-align: center; } .header-sd-search__select .dummy-caret i { color: #d8d8d8; font-size: 20px; } .header-sd-search__inner { width: 100%; height: 45px; overflow: hidden; border-radius: 5px; background-color: #fff; font-size: 0; } .header-sd-search .sd-search-input { display: inline-block; width: calc(100% - 60px); height: 44px; margin-bottom: 0; padding: 13px 10px 13px 13px; border-bottom: none; color: #666; font-size: 16px; line-height: 18px; vertical-align: top; } .header-sd-search .sd-search-input:focus { border-bottom: none !important; box-shadow: none !important; } .header-sd-search .sd-search-input:placeholder-shown { color: #b1b9c0; line-height: 21px; } .header-sd-search .sd-search-input::-webkit-input-placeholder { color: #b1b9c0; } .header-sd-search .sd-search-input:-moz-placeholder { color: #b1b9c0; } .header-sd-search .sd-search-input::-moz-placeholder { color: #b1b9c0; } .header-sd-search .sd-search-input:-ms-input-placeholder { color: #b1b9c0; } .header-sd-search .sd-search-input::-ms-input-placeholder { color: #b1b9c0; } .header-sd-search .sd-search-button { display: inline-block; position: relative; width: 60px; height: 44px; padding: 0; border-radius: 0; line-height: 44px; text-align: center; vertical-align: top; } .header-sd-search .sd-search-button:before { display: inline-block; position: absolute; top: 10px; left: 0px; width: 1px; height: 24px; background-color: rgba(102, 102, 102, .6); content: ""; } .header-sd-search .sd-search-button:after { display: inline-block; width: 28px; height: 28px; color: #7ccbf0; font-family: "xiconbasic"; font-size: 28px; content: ""; } .header-sd-search .sd-search-button:focus { background-color: transparent; } .actibooks-header-sd-search { margin: 28px 0; padding: 0 13px; } .header-sections--slider + .actibooks-header-sd-search { margin-top: 23px; } .actibooks-header-sd-search .header-sd-search__inner { position: relative; background-color: transparent; } .actibooks-header-sd-search .sd-search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0 46px 0 16px; border: 1px solid #88b04b !important; border-radius: 22px; background-color: #fff; box-shadow: none !important; color: #4b4b4b; font-size: 16px; line-height: 43px; } .actibooks-header-sd-search .sd-search-input:placeholder-shown { color: #888; } .actibooks-header-sd-search .sd-search-input::-webkit-input-placeholder { color: #888; } .actibooks-header-sd-search .sd-search-input:-moz-placeholder { color: #888; } .actibooks-header-sd-search .sd-search-input::-moz-placeholder { color: #888; } .actibooks-header-sd-search .sd-search-input:-ms-input-placeholder { color: #888; } .actibooks-header-sd-search .sd-search-input:focus { border: 1px solid #88b04b !important; box-shadow: none !important; } .actibooks-header-sd-search .sd-search-button { display: inline-block; position: absolute; top: 1px; right: 1px; width: 45px; height: 42px; padding: 0; border-radius: 0 21px 21px 0; } .actibooks-header-sd-search .sd-search-button:after { display: inline-block; position: absolute; top: 13px; left: 16px; width: 14px; height: 14px; color: #888; font-family: "FontAwesome"; font-size: 14px; line-height: 14px; content: ""; } /* パンくずリスト */ .breadcrumb_wrap, .book-detail--sd .book-detail-block__texts__breadcrumbs, main .main-inner .detail-texts__breadcrumbs { visibility: hidden; height: auto; font-size: 0; line-height: normal; } .breadcrumb_wrap.breadcrumb_wrap--checked, .book-detail--sd .breadcrumb_wrap--checked.book-detail-block__texts__breadcrumbs, main .main-inner .breadcrumb_wrap--checked.detail-texts__breadcrumbs { visibility: visible; } .breadcrumb_wrap .breadcrumb, .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb, main .main-inner .detail-texts__breadcrumbs .breadcrumb { display: inline-block; overflow: hidden; color: #9b9b9b; font-size: 13px; line-height: 20px; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; } .breadcrumb_wrap .breadcrumb:before, .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb:before, main .main-inner .detail-texts__breadcrumbs .breadcrumb:before { color: #9b9b9b; font-family: "xiconbasic"; font-size: 15px; content: ""; } .breadcrumb_wrap span.breadcrumb, .book-detail--sd .book-detail-block__texts__breadcrumbs span.breadcrumb, main .main-inner .detail-texts__breadcrumbs span.breadcrumb { overflow: visible; text-overflow: clip; white-space: normal; } .breadcrumb_wrap span.breadcrumb-inner, .book-detail--sd .book-detail-block__texts__breadcrumbs span.breadcrumb-inner, main .main-inner .detail-texts__breadcrumbs span.breadcrumb-inner { display: inline-block; max-width: calc(100% - 33px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .breadcrumb_wrap a.breadcrumb, .book-detail--sd .book-detail-block__texts__breadcrumbs a.breadcrumb, main .main-inner .detail-texts__breadcrumbs a.breadcrumb { color: #4a90e2; } /* メイン */ main .main-inner { width: 1168px; margin: 36px auto 160px; } .book-detail--sd main .main-inner{ width: 100%; } @media only screen and (max-width : 600px) { main .main-inner { width: 100%; margin: 20px auto 54px; } } main .main-inner.main-inner--breadcrumb-dense { margin: 18px auto 25px; } main .main-inner.main-inner--breadcrumb-dense .main-content .breadcrumb-block { margin-bottom: 12px; } main .main-inner.main-inner--breadcrumb-dense .breadcrumb_wrap, main .main-inner.main-inner--breadcrumb-dense .book-detail--sd .book-detail-block__texts__breadcrumbs, .book-detail--sd main .main-inner.main-inner--breadcrumb-dense .book-detail-block__texts__breadcrumbs, main .main-inner.main-inner--breadcrumb-dense .detail-texts__breadcrumbs { height: 20px; line-height: 20px; } main .main-inner.main-inner--breadcrumb-dense .main-books__block { margin-top: 12px; } main .main-inner .main-content { width: 878px; float: left; } @media only screen and (max-width : 600px) { main .main-inner .main-content { width: 100%; } } main .main-inner .main-content .breadcrumb-block { margin-bottom: 20px; } @media only screen and (max-width : 600px) { main .main-inner .main-content .breadcrumb-block { display: none; } } main .main-inner .main-content .breadcrumb-block .row { margin-bottom: 0; } @media only screen and (max-width : 600px) { main .main-inner .main-content .breadcrumb-block .row { margin-right: 0; margin-left: 0; } } main .main-inner .main-content .main-categories { margin-bottom: 16px; } main .main-inner .main-content .main-categories__block { max-height: 184px; margin: 0 -5px; padding: 0 5px 8px; overflow-x: visible; overflow-y: hidden; font-size: 0; opacity: 0; transition: opacity .5s ease; } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__block { max-height: 134px; padding: 0 15px 8px; } } main .main-inner .main-content .main-categories__block--show { opacity: 1; } main .main-inner .main-content .main-categories__block--expanded { max-height: none !important; } main .main-inner .main-content .main-categories__block--expanded + .main-categories__expander-block .expander_text--more { display: none; } main .main-inner .main-content .main-categories__block--expanded + .main-categories__expander-block .expander_text--less { display: inline; } main .main-inner .main-content .main-categories__block--expanded + .main-categories__expander-block i[class^=fa] { transform: rotate(180deg); } main .main-inner .main-content .main-categories__block--expanded + .main-categories__expander-block .expander-sd-chevron { margin-top: 20px; transform: rotate(225deg); } main .main-inner .main-content .main-categories__block__item { display: inline-block; position: relative; width: 200px; height: 76px; margin-top: 20px; margin-right: 26px; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); font-size: 14px; line-height: 16px; vertical-align: top; } main .main-inner .main-content .main-categories__block__item:nth-child(4n) { margin-right: 0; } main .main-inner .main-content .main-categories__block__item:nth-child(-n+4) { margin-top: 0; } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__block__item { width: calc((100% - 13px) / 2); height: 56px; margin-top: 14px; margin-right: 13px; } main .main-inner .main-content .main-categories__block__item:nth-child(4n) { margin-right: 13px !important; } main .main-inner .main-content .main-categories__block__item:nth-child(-n+4) { margin-top: 14px !important; } main .main-inner .main-content .main-categories__block__item:nth-child(2n) { margin-right: 0 !important; } main .main-inner .main-content .main-categories__block__item:nth-child(-n+2) { margin-top: 0 !important; } } main .main-inner .main-content .main-categories__block__item a { display: block; width: 100%; height: 100%; color: #666; } main .main-inner .main-content .main-categories__block__item__title { position: relative; width: 100%; padding: 12px 22px 0 58px; font-size: 12px; } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__block__item__title { padding-right: 10px; padding-left: 36px; } } main .main-inner .main-content .main-categories__block__item__title:before { position: absolute; top: 12px; left: 19px; color: #7eccf1; font-family: "xiconbasic"; font-size: 20px; content: ""; } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__block__item__title:before { left: 10px; font-size: 16px; } } main .main-inner .main-content .main-categories__block__item__number { position: absolute; bottom: 10px; left: 20px; color: #9b9b9b; font-size: 11px; } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__block__item__number { display: none; } } main .main-inner .main-content .main-categories__expander-block { padding-top: 5px; } main .main-inner .main-content .main-categories__expander-block__wrap { height: 0; text-align: center; transition: height .5s ease; } main .main-inner .main-content .main-categories__expander-block__wrap--expandable { height: 63px; padding: 7px 0 0; } main .main-inner .main-content .main-categories__expander-block__wrap--expandable .main-categories__expander-block__expander { display: table; } main .main-inner .main-content .main-categories__expander-block__expander { display: none; width: 200px; height: 48px; margin: 0 auto; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background-color .5s ease; } main .main-inner .main-content .main-categories__expander-block__expander:hover { background-color: rgba(0, 0, 0, .05); } @media only screen and (max-width : 600px) { main .main-inner .main-content .main-categories__expander-block__expander { width: 166px; border-bottom-color: #979797; } } main .main-inner .main-content .main-categories__expander-block__expander__inner { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } main .main-inner .main-content .main-categories__expander-block__expander__inner i[class^=fa] { margin-right: 8px; color: #acabad; transition: transform .5s ease; } main .main-inner .main-content .main-categories__expander-block__expander__inner .expander_text { color: #666; } main .main-inner .main-content .main-categories__expander-block__expander__inner .expander_text--less { display: none; } main .main-inner .main-content .main-categories__expander-block__expander__inner .expander-sd-chevron { display: inline-block; width: 20px; height: 20px; margin-top: -3px; transform: rotate(45deg); border: 2px solid #8b94a0; border-top-width: 0; border-left-width: 0; transition: transform .2s ease, margin-top .2s ease; } main .main-inner .main-content .main-categories__expander-block__buttons { margin-top: 15px; text-align: center; } main .main-inner .main-content .main-categories__expander-block__buttons .btn, main .main-inner .main-content .main-categories__expander-block__buttons .btn-large { width: 200px; box-shadow: none; } main .main-inner .main-content .main-categories__expander-block__buttons .btn__inner { display: inline-block; color: #4a4a4a; font-size: 14px; vertical-align: 5px; } main .main-inner .main-content .main-categories__expander-block__buttons .btn i, main .main-inner .main-content .main-categories__expander-block__buttons .btn-large i { margin-right: 5px; color: #7ccbf0; font-size: 24px !important; } main .main-inner .main-content > .content-block { margin-bottom: 0; } main .main-inner .content-block { margin-bottom: 85px; } main .main-inner .content-block.content-block--life .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--comics .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--magazine .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--literature .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--business .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--others .content-block__title .content-block__title__link:before { margin-bottom: 3px !important; } main .main-inner .content-block.content-block--life .content-block__title { border-color: #ec9b7e; } main .main-inner .content-block.content-block--life .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--life .content-block__body__category__title { color: #e5876b; } main .main-inner .content-block.content-block--life .content-block__body__category__title:before { color: #e5876b; } main .main-inner .content-block.content-block--comics .content-block__title { border-color: #54d3d4; } main .main-inner .content-block.content-block--comics .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -155px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--comics .content-block__body__category__title { color: #49b2b0; } main .main-inner .content-block.content-block--comics .content-block__body__category__title:before { color: #48cbca; } main .main-inner .content-block.content-block--magazine .content-block__title { border-color: #88b04b; } main .main-inner .content-block.content-block--magazine .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -130px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--magazine .content-block__body__category__title { color: #76a43a; } main .main-inner .content-block.content-block--magazine .content-block__body__category__title:before { color: #76a43a; } main .main-inner .content-block.content-block--literature .content-block__title { border-color: #967fb7; } main .main-inner .content-block.content-block--literature .content-block__title .content-block__title__link:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -205px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--literature .content-block__body__category__title { color: #967fb7; } main .main-inner .content-block.content-block--literature .content-block__body__category__title:before { color: #967fb7; } main .main-inner .content-block.content-block--business .content-block__title { border-color: #679fe4; } main .main-inner .content-block.content-block--business .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -180px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--business .content-block__body__category__title { color: #558bde; } main .main-inner .content-block.content-block--business .content-block__body__category__title:before { color: #5a8cdb; } main .main-inner .content-block.content-block--others .content-block__title { border-color: #9eafd3; } main .main-inner .content-block.content-block--others .content-block__title .content-block__title__link:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -230px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block.content-block--others .content-block__body__category__title { color: #9eafd3; } main .main-inner .content-block.content-block--others .content-block__body__category__title:before { color: #9eafd3; } main .main-inner .content-block.content-block--ranking .content-block__title { border-color: #f6a623; } main .main-inner .content-block.content-block--ranking .content-block__title .content-block__title__link:before { margin: -11px 5px 14px 0; background-image: none; color: #f6a623; font-family: "xiconbasic"; font-size: 26px; content: ""; } main .main-inner .content-block.content-block--company .content-block__title, main .main-inner .content-block.content-block--tag .content-block__title { border-color: #888; } main .main-inner .content-block.content-block--company .content-block__title .content-block__title__link:before, main .main-inner .content-block.content-block--tag .content-block__title .content-block__title__link:before { margin: -11px 4px 2px 0; background-image: none; color: #4b4b4b; } main .main-inner .content-block.content-block--company .content-block__title .content-block__title__link:before { font-family: "FontAwesome"; font-size: 20px; content: ""; } main .main-inner .content-block.content-block--tag .content-block__title .content-block__title__link:before { font-family: "xiconbasic"; font-size: 24px; vertical-align: -8px; content: ""; } main .main-inner .content-block[class*=content-block--related] .content-block__title .content-block__title__link:before { width: 0; height: 0; margin: 0; background-image: none; } main .main-inner .content-block.content-block--related_life .content-block__title { border-color: #ec9b7e; } main .main-inner .content-block.content-block--related_comics .content-block__title { border-color: #54d3d4; } main .main-inner .content-block.content-block--related_magazine .content-block__title { border-color: #88b04b; } main .main-inner .content-block.content-block--related_literature .content-block__title { border-color: #967fb7; } main .main-inner .content-block.content-block--related_business .content-block__title { border-color: #679fe4; } main .main-inner .content-block.content-block--related_others .content-block__title { border-color: #9eafd3; } main .main-inner .content-block__title { width: 100%; height: 32px; margin-bottom: 20px; border-bottom: 1px solid #aaa; font-size: 0; font-weight: bold; } main .main-inner .content-block__title__link { color: #4b4b4b; } main .main-inner .content-block__title__link:hover .content-block__title__inner { text-decoration: underline; } main .main-inner .content-block__title__link:before { display: inline-block; width: 24px; height: 18px; margin: 0 5px 8px 0; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; vertical-align: middle; content: ""; } main .main-inner .content-block__title__inner { display: inline-block; max-width: calc(100% - 238px); overflow: hidden; font-size: 18px; line-height: 21px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } main .main-inner .content-block__title__sub-info { display: inline-block; position: relative; margin-left: 20px; padding-left: 5px; color: #666; font-size: 14px; font-weight: normal; line-height: normal; vertical-align: middle; } main .main-inner .content-block__title__sub-info:before { display: inline-block; position: absolute; top: 4px; left: 0; width: 1px; height: 13px; background-color: #ccc; content: ""; } main .main-inner .content-block__title__sub-info > span { display: inline-block; margin-left: 10px; } main .main-inner .content-block__title__sub-info > span.content-block__title__sub-info__category .sub-info-icon:before { content: ""; } main .main-inner .content-block__title__sub-info > span.content-block__title__sub-info__content .sub-info-icon:before { content: ""; } main .main-inner .content-block__title__sub-info > span .sub-info-icon { display: inline-block; margin-right: 3px; color: #999; font-family: "xiconbasic"; font-size: 16px; vertical-align: -2px; } main .main-inner .content-block__title .category_more { margin-top: 3px; color: #666; font-size: 11px; } main .main-inner .content-block__title .category_more:hover { text-decoration: underline; } main .main-inner .content-block__body { margin: 0; padding: 0; font-size: 0; } main .main-inner .content-block__body__category { display: inline-block; width: 360px; height: 255px; margin: 52px 44px 0 0; padding: 0 4px; overflow-y: hidden; vertical-align: top; } main .main-inner .content-block__body__category:nth-child(-n+3) { margin-top: 0; } main .main-inner .content-block__body__category:nth-child(3n) { margin-right: 0; } main .main-inner .content-block__body__category__title { font-size: 14px; } main .main-inner .content-block__body__category__title:before { display: inline-block; width: 13px; height: 15px; margin: 0 5px 5px 0; font-family: "FontAwesome"; font-size: 13px; vertical-align: middle; content: ""; } main .main-inner .content-block__body__category__title .category_more { margin-top: 3px; color: #666; font-size: 11px; } main .main-inner .content-block__body__category__title .category_more:hover { text-decoration: underline; } main .main-inner .content-block__body__category__body { margin-top: 28px; font-size: 0; } main .main-inner .content-block__body .content-item, main .main-inner .content-block__body .ranking-item, main .main-inner .content-block__body .related-item { display: inline-block; width: 104px; height: 206px; margin-right: 20px; vertical-align: top; } main .main-inner .content-block__body .content-item:last-child, main .main-inner .content-block__body .ranking-item:last-child, main .main-inner .content-block__body .related-item:last-child { margin-right: 0; } main .main-inner .content-block__body .content-item__link, main .main-inner .content-block__body .ranking-item__link, main .main-inner .content-block__body .related-item__link { display: block; width: 100%; height: 147px; color: #4b4b4b; transition: opacity .3s ease; } main .main-inner .content-block__body .content-item__link:hover, main .main-inner .content-block__body .ranking-item__link:hover, main .main-inner .content-block__body .related-item__link:hover { opacity: .65; } main .main-inner .content-block__body .content-item__image, main .main-inner .content-block__body .ranking-item__image, main .main-inner .content-block__body .related-item__image { width: 104px; height: 147px; background-position: top left; background-size: cover; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .45); } main .main-inner .content-block__body .content-item__title, main .main-inner .content-block__body .ranking-item__title, main .main-inner .content-block__body .related-item__title { margin-top: 14px; font-size: 12px; line-height: 15px; } main .main-inner .content-block__body .ranking-item, main .main-inner .content-block__body .related-item { margin-right: 29px; } main .main-inner .content-block__body .ranking-item[class*=ranking-item--] .ranking-item__image { position: relative; } main .main-inner .content-block__body .ranking-item[class*=ranking-item--] .ranking-item__image:before { position: absolute; content: ""; } main .main-inner .content-block__body .ranking-item.ranking-item--1st .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: 0px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block__body .ranking-item.ranking-item--2nd .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: -70px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block__body .ranking-item.ranking-item--3rd .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: -35px -154px; background-repeat: no-repeat; background-size: 261px 200px; } main .main-inner .content-block__body .tag-item { display: inline-block; width: 216px; height: 305px; margin-right: 22px; background-color: #fff; background-image: linear-gradient(to bottom, #fff, #fbfbfb); background-image: -ms-linear-gradient(to bottom, #fff, #fbfbfb); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12); vertical-align: top; } main .main-inner .content-block__body .tag-item:last-child { margin-right: 0; } main .main-inner .content-block__body .tag-item__link { display: block; position: relative; width: 100%; height: 100%; padding: 15px 15px 12px; } main .main-inner .content-block__body .tag-item__image { display: table; z-index: 1; position: relative; width: 100%; height: 216px; table-layout: fixed; } main .main-inner .content-block__body .tag-item__image__inner { display: table-cell; z-index: 1; width: 100%; height: 216px; text-align: center; vertical-align: middle; } main .main-inner .content-block__body .tag-item__image__entity { width: auto; max-width: 100%; height: auto; max-height: 100%; border: solid 1px #d7d7d7; } main .main-inner .content-block__body .tag-item__image__movieoverlay { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .4); } main .main-inner .content-block__body .tag-item__image__movieoverlay:after { display: inline-block; position: absolute; top: calc(50% - (50px / 2)); left: calc(50% - (40px / 2)); width: 40px; height: 50px; color: #fff; font-family: "FontAwesome"; font-size: 50px; line-height: normal; content: ""; } main .main-inner .content-block__body .tag-item__title { width: 100%; height: 30px; margin: 11px 0 0; overflow: hidden; color: #666; font-size: 12px; line-height: 15px; } main .main-inner .content-block__body .tag-item__title i.fa { margin-right: 5px; color: #ea9700; font-size: 15px; vertical-align: -1px; } main .main-inner .content-block__body .tag-item__counts { margin-top: 5px; color: #999; font-size: 0; } main .main-inner .content-block__body .tag-item__counts > div { display: inline-block; vertical-align: top; } main .main-inner .content-block__body .tag-item__counts__comments > div, main .main-inner .content-block__body .tag-item__counts__likes > div { display: inline-block; vertical-align: top; } main .main-inner .content-block__body .tag-item__counts__comments__icon, main .main-inner .content-block__body .tag-item__counts__likes__icon { position: relative; width: 14px; height: 14px; margin-right: 1px; font-size: 14px; } main .main-inner .content-block__body .tag-item__counts__comments__icon:before, main .main-inner .content-block__body .tag-item__counts__likes__icon:before { display: inline-block; position: absolute; top: 0; left: 0; width: 14px; height: 14px; font-family: "xiconbasic"; line-height: 14px; } main .main-inner .content-block__body .tag-item__counts__comments__number, main .main-inner .content-block__body .tag-item__counts__likes__number { padding-top: 1px; font-size: 12px; line-height: 13px; } main .main-inner .content-block__body .tag-item__counts__comments { margin-right: 8px; } main .main-inner .content-block__body .tag-item__counts__comments__icon:before { content: ""; } main .main-inner .content-block__body .tag-item__counts__likes__icon:before { content: ""; } main .main-inner .detail-texts__breadcrumbs { height: 20px; margin-bottom: 20px; line-height: normal; } main .main-inner .detail-texts__breadcrumbs:empty { display: none; } main .main-inner .detail-texts__breadcrumbs:blank { display: none; } main .main-inner .detail-texts__breadcrumbs:-moz-only-whitespace { display: none; } main .main-inner .detail-texts__breadcrumbs.breadcrumb_wrap--checked { visibility: visible; } main .main-inner .detail-texts__breadcrumbs .breadcrumb:before { vertical-align: -1px; } main .main-inner .detail-texts__book-title { width: 100%; height: 31px; padding: 0; overflow: hidden; font-size: 24px; font-weight: bold; letter-spacing: .8px; text-overflow: ellipsis; white-space: nowrap; } main .main-inner .detail-texts__tags { width: 100%; margin: 0 -5px; padding: 6px 0 10px; font-size: 0; } main .main-inner .detail-texts__tags__tag { display: inline-block; height: 21px; margin: 5px 5px 0; padding: 4px 10px 0 4px; border: 1px solid #979797; border-radius: 3px; color: #666; font-size: 12px; line-height: 12px; text-decoration: none; } main .main-inner .detail-texts__tags__tag:before { margin-right: 4px; font-family: "xiconbasic"; font-size: 15px; vertical-align: -2px; content: ""; } main .main-inner .detail-texts__explain, main .main-inner .detail-texts__htmlblock { margin-bottom: 40px; } main .main-inner .detail-texts__explain { padding: 20px 20px 0; font-size: 14px; line-height: 21px; } main .main-inner .detail-texts__htmlblock { width: 100%; } main .main-inner .detail-texts__htmlblock__title { height: 23px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 16px; font-weight: bold; line-height: 26px; } main .main-inner .detail-texts__htmlblock__body { padding: 20px 20px 0; font-size: 14px; line-height: 21px; } main .main-inner .detail-texts__htmlblock__body .detail-texts__htmlblock__body__googlemaps { position: relative; width: 100%; } main .main-inner .detail-texts__htmlblock__body .detail-texts__htmlblock__body__googlemaps:before { display: block; padding-top: 75%; content: ""; } main .main-inner .detail-texts__htmlblock__body .detail-texts__htmlblock__body__googlemaps iframe, main .main-inner .detail-texts__htmlblock__body .detail-texts__htmlblock__body__googlemaps object, main .main-inner .detail-texts__htmlblock__body .detail-texts__htmlblock__body__googlemaps embed { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } main .main-inner .book-list-block { width: 1168px; margin: 0 auto; padding: 20px 0 0; } main .main-inner .book-list-block.book-list-block--detail { padding: 0; } main .main-inner .book-list-block.book-list-block--detail .content-block__title { height: 26px; font-size: 16px; line-height: 24px; } main .main-inner .book-list-block.book-list-block--detail .content-block__title .content-block__title__link:before { font-size: 22px; } main .main-inner .book-list-block.book-list-block--tags { padding-top: 10px; padding-bottom: 0; } @media only screen and (max-width : 600px) { main .main-inner .book-list-block.book-list-block--tags .tag-item { margin-top: 15px; } main .main-inner .book-list-block.book-list-block--tags .tag-item:nth-child(3n) { margin-right: 0; } main .main-inner .book-list-block.book-list-block--tags .tag-item:nth-child(-n+3) { margin-top: 0; } } main .main-inner .book-list-block .content-block { margin-bottom: 0; } main .main-inner .book-list-block .content-block + .content-block { margin-top: 45px; } @media only screen and (max-width : 600px) { main .main-inner .book-list-block { width: 100%; padding: 30px 15px 3px; } main .main-inner .book-list-block .content-block { margin-top: 0 !important; margin-bottom: 33px; } main .main-inner .book-list-block .content-block:last-child { margin-bottom: 0; } main .main-inner .book-list-block .content-block__title { height: 20px; margin-bottom: 17px; font-size: 13px; line-height: 14px; } main .main-inner .book-list-block .content-block__title:before { margin-right: 0 !important; font-size: 20px !important; } main .main-inner .book-list-block .content-block__title .category_more { margin-top: 4px; font-size: 12px; } main .main-inner .book-list-block .content-block .tag-item { width: calc((100% - 20px) / 3); height: 213px; margin-right: 10px; } main .main-inner .book-list-block .content-block .tag-item:last-child { margin-right: 0; } main .main-inner .book-list-block .content-block .tag-item__link { padding: 8px; } main .main-inner .book-list-block .content-block .tag-item__image { height: auto; } main .main-inner .book-list-block .content-block .tag-item__image__movieoverlay:after { top: calc(50% - (30px / 2)); left: calc(50% - (24px / 2)); width: 24px; height: 30px; font-size: 30px; } main .main-inner .book-list-block .content-block .tag-item__title { height: 30px; margin-top: 8px; font-size: 12px; line-height: 15px; } main .main-inner .book-list-block .content-block .tag-item__title i.fa { margin-right: 3px; color: #ea9700; font-size: 13px; vertical-align: -1px; } main .main-inner .book-list-block .content-block .tag-item__counts > div { display: block; vertical-align: baseline; } main .main-inner .book-list-block .content-block .tag-item__counts__comments { margin-right: 0; } } main .main-inner .book-list-block__more-block { padding-top: 5px; } main .main-inner .book-list-block__more-block.all-loaded .book-list-block__more-block__wrap { display: none; } main .main-inner .book-list-block__more-block.all-loaded .loading-finished-block { display: block; } main .main-inner .book-list-block__more-block__wrap { height: 63px; padding: 15px 0 0; text-align: center; transition: height .5s ease; } main .main-inner .book-list-block__more-block__wrap--loading span.loading { display: inline-block !important; } main .main-inner .book-list-block__more-block__wrap--loading span.notloading { display: none !important; } main .main-inner .book-list-block__more-block__more { display: table; width: 200px; height: 48px; margin: 0 auto; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background-color .5s ease; } main .main-inner .book-list-block__more-block__more:hover { background-color: rgba(0, 0, 0, .05); } @media only screen and (max-width : 600px) { main .main-inner .book-list-block__more-block__more { width: 166px; border-bottom-color: #979797; } } main .main-inner .book-list-block__more-block__more__inner { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } main .main-inner .book-list-block__more-block__more__inner i[class^=fa] { margin-right: 8px; color: #acabad; transition: transform .5s ease; } main .main-inner .book-list-block__more-block__more__inner .preloader-wrapper { margin-right: 8px; vertical-align: middle; } main .main-inner .book-list-block__more-block__more__inner .more_text { color: #666; vertical-align: middle; } main .main-inner .book-list-block__more-block__more__inner span.loading { display: none; } main .main-inner .book-list-block__more-block__more__inner span.notloading { display: inline-block; } main .main-inner .book-list-block__more-block__more__inner .more-sd-chevron { display: inline-block; width: 20px; height: 20px; margin-top: -3px; transform: rotate(45deg); border: 2px solid #8b94a0; border-top-width: 0; border-left-width: 0; transition: transform .2s ease, margin-top .2s ease; } main .main-inner .book-list-block__more-block__buttons { margin-top: 15px; text-align: center; } main .main-inner .book-list-block__more-block__buttons .btn, main .main-inner .book-list-block__more-block__buttons .btn-large { width: 200px; box-shadow: none; } main .main-inner .book-list-block__more-block__buttons .btn__inner { display: inline-block; color: #4a4a4a; font-size: 14px; vertical-align: 5px; } main .main-inner .book-list-block__more-block__buttons .btn i, main .main-inner .book-list-block__more-block__buttons .btn-large i { margin-right: 5px; color: #7ccbf0; font-size: 24px !important; } main .main-inner .book-list-block__more-block .loading-finished-block { display: none; padding-top: 20px; text-align: center; } main .main-inner .book-list-block__more-block .loading-finished-block .alert-well { display: inline-block; width: auto; min-width: 200px; max-width: none; margin: 0 auto; padding: 10px 20px; } main .main-inner .book-list-block__more-block .loading-finished-block .alert-well [class*=xiconbasic-] { vertical-align: -4px; } main .main-inner .environment-block { z-index: 1; margin: 40px 0 72px; } main .main-inner .environment-block__title { position: relative; height: 23px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 16px; font-weight: bold; line-height: 26px; cursor: pointer; } main .main-inner .environment-block__openclose { position: absolute; top: 0; right: 0; width: 34px; height: 23px; padding: 5px 5px 0 0; text-align: right; } main .main-inner .environment-block__openclose__inner { display: inline-block; width: 17px; height: 17px; margin: 0; transform: rotate(45deg); transform-origin: 6px 6px; border: 2px solid #576776; border-right: none; border-bottom: none; transition: transform .2s ease; } main .main-inner .environment-block__openclose.environment-block__openclose--closed .environment-block__openclose__inner { transform: rotate(225deg); } main .main-inner .environment-block__body { padding-top: 28px; font-size: 0; } main .main-inner .environment-block__body > div { display: inline-block; width: calc((100% - 28px) / 2); font-size: 13px; vertical-align: top; } main .main-inner .environment-block__body > div:first-child { margin-right: 28px; } main .main-inner .environment-block__body__left { padding: 20px; border: solid 1px #e7e7e7; background-color: #fbfafb; } main .main-inner .environment-block__body__left__title { height: 23px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 16px; font-weight: bold; line-height: 26px; } main .main-inner .environment-block__body__left__body__header01, main .main-inner .environment-block__body__left__body__header02 { font-weight: bold; } main .main-inner .environment-block__body__left__body__header01 { border-bottom: solid 2px #c1c1c1; } main .main-inner .environment-block__body__left__body__header02 { padding-top: 10px; } main .main-inner .environment-block__body__left__body__content { margin: 3px 0 20px; padding-left: 20px; } main .main-inner .environment-block__body__left__body__content:last-child { margin-bottom: 0; } main .main-inner .environment-block__body__left__body__content ul { margin: 0; padding-left: 20px; } main .main-inner .environment-block__body__left__body__content ul li { list-style-type: square; } /* SD 版カテゴリ */ .book-list.categories { margin-bottom: 20px; padding: 10px 15px 0; font-size: 0; } .book-list.categories:empty { display: none; margin-bottom: 0; } .book-list.categories:blank { display: none; margin-bottom: 0; } .book-list.categories:-moz-only-whitespace { display: none; margin-bottom: 0; } .book-list.categories .category { display: inline-block; width: calc((100% - 20px) / 3); height: 79px; margin: 20px 10px 0 0; vertical-align: top; } .book-list.categories .category:nth-child(3n) { margin-right: 0; } .book-list.categories .category:nth-child(-n+3) { margin-top: 0; } .book-list.categories .category__tab { display: inline-block; z-index: 1; position: relative; width: 28.84615384%; height: 8px; } .book-list.categories .category__tab:before { position: absolute; top: 0; right: 0; bottom: -2px; left: 0; transform: scaleY(1.144) perspective(5px) rotateX(5deg); transform-origin: bottom left; border-radius: 2px 2px 0 0; background-color: #adc9dd; content: ""; } .book-list.categories .category__body { z-index: 2; position: relative; width: 100%; height: 71px; border-radius: 0 2px 2px 2px; background-color: #7daac9; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .3); } .book-list.categories .category__name { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 49px; padding: 0 4px; font-size: 12px; line-height: 16px; text-align: center; } .book-list.categories .category__name__inner { color: transparent; } .book-list.categories .category__name__inner.category__name__inner--ellipted { color: #fff; } .book-list.categories .category__subs { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 22px; border-top: 1px solid #b7ccdb; } .book-list.categories .category__subs > * { color: #fff; font-size: 10px; } .book-list.categories .category__subs > *:before { display: inline-block; margin-right: 2px; color: #d1e1ec; font-family: "xiconbasic"; font-size: 12px; vertical-align: -1px; } .book-list.categories .category__subs__category:before { content: ""; } .book-list.categories .category__subs__contents { margin-left: 5px; } .book-list.categories .category__subs__contents:before { content: ""; } .content-block.content-block--isinview { display: block !important; animation: show-general 1s ease-in-out; animation-fill-mode: forward; } .main-books__block { margin-top: 22px; } @media only screen and (max-width : 600px) { .main-books__block { margin-top: 10px; padding: 0 15px; } } .main-books__block__item { height: 64px; border-bottom: 1px solid #dddbde; background-color: #fff; font-size: 0; } @media only screen and (max-width : 600px) { .main-books__block__item { height: 92px; margin-top: 5px; border-bottom: none; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2); } .main-books__block__item:first-child { margin-top: 0; } } .main-books__block__item--adder { margin-top: 20px; background-color: transparent; text-align: center; } .main-books__block__item--adder__inner { display: none; } .main-books__block__item--adder .btn, .main-books__block__item--adder .btn-large { width: 200px; box-shadow: none; } .main-books__block__item--adder .btn__inner { display: inline-block; color: #4a4a4a; font-size: 14px; vertical-align: 5px; } .main-books__block__item--adder .btn i, .main-books__block__item--adder .btn-large i { margin-right: 5px; color: #7ccbf0; font-size: 24px !important; } .main-books__block__item--history .main-books__block__item__footer { width: calc(100% - 68px); } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer { width: calc(100% - 70px); font-size: 0; } .main-books__block__item--history .main-books__block__item__footer div { font-size: 13px; line-height: 16px; } } .main-books__block__item--history .main-books__block__item__footer__title { width: 100%; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__title { height: 76px; padding: 12px 0 0 15px; overflow: hidden; } } .main-books__block__item--history .main-books__block__item__footer__title__wrap { width: calc(100% - 110px - 120px); } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__title__wrap { width: calc(100% - 100px); } } .main-books__block__item--history .main-books__block__item__footer__rightside { display: inline-block; width: calc(110px + 120px); vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__rightside { width: 100px; } } .main-books__block__item--history .main-books__block__item__footer__counts { display: inline-block; width: 110px; height: 100%; padding-top: 14px; color: #999; text-align: left; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__counts { display: block; width: 100px; padding: 12px 0 0 10px; } } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__comments, .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__likes { font-size: 0; line-height: 0; } } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__comments > div, .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__likes > div { display: inline-block; vertical-align: top; } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__comments { padding-bottom: 3px; } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__comments .main-books__item__icon:before { content: ""; } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__likes .main-books__item__icon:before { content: ""; } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__icon { position: relative; width: 16px; height: 16px; margin-right: 1px; font-size: 16px; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__icon { width: 15px; height: 15px; font-size: 15px; } } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__icon:before { display: inline-block; position: absolute; top: 0; left: 0; width: 16px; height: 16px; font-family: "xiconbasic"; line-height: 16px; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__icon:before { width: 15px; height: 15px; line-height: 15px; } } .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__number { padding-top: 1px; font-size: 14px; line-height: 15px; } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__number { font-size: 13px; line-height: 14px; } } @media only screen and (max-width : 600px) { .main-books__block__item--history .main-books__block__item__footer__lastupdate { display: block; width: 100px; height: auto; padding: 5px 12px 0 0; } } .main-books__block__item__inner { width: 100%; height: 100%; } .main-books__block__item__image { display: inline-table; width: 68px; height: 64px; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item__image { width: 70px; height: 92px; } } .main-books__block__item__image__inner { display: table-cell; z-index: 1; position: relative; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .main-books__block__item__image__inner a { display: inline-block; position: relative; } .main-books__block__item__image__entity { width: 44px; height: 44px; background-position: top left; background-size: cover; } @media only screen and (max-width : 600px) { .main-books__block__item__image__entity { width: 70px; height: 92px; } } .main-books__block__item__image__movieoverlay { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .4); } .main-books__block__item__image__movieoverlay:after { display: inline-block; position: absolute; top: calc(50% - (20px / 2)); left: calc(50% - (16px / 2)); width: 16px; height: 20px; color: #fff; font-family: "FontAwesome"; font-size: 20px; line-height: normal; content: ""; } @media only screen and (max-width : 600px) { .main-books__block__item__image__movieoverlay:after { top: calc(50% - (28px / 2)); left: calc(50% - (22px / 2)); width: 22px; height: 28px; font-size: 28px; } } .main-books__block__item__footer { display: inline-block; width: 810px; height: 64px; color: #666; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item__footer { width: calc(100% - 70px); font-size: 0; } } .main-books__block__item__footer a { display: inline-block; color: #666; } .main-books__block__item__footer__title__wrap { overflow: hidden; } @media only screen and (max-width : 600px) { .main-books__block__item__footer__title__wrap { width: calc(100% - 50px); } } .main-books__block__item__footer__title { display: inline-block; width: 544px; height: 64px; padding-right: 20px; overflow: hidden; font-size: 14px; font-weight: bold; line-height: 64px; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; } @media only screen and (max-width : 600px) { .main-books__block__item__footer__title { width: 100%; height: auto; padding: 20px 0 0 15px; overflow: initial; font-weight: normal; line-height: 16px; text-overflow: initial; white-space: initial; } } .main-books__block__item__footer__info { display: inline-block; width: 50px !important; height: 64px; line-height: 82px; text-align: center; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item__footer__info { height: 92px; margin-left: -6px; line-height: 142px; } } .main-books__block__item__footer__info i[class^=xiconbasic-] { color: #d9dde0; font-size: 60px; transition: color .5s ease; } .main-books__block__item__footer__info i[class^=xiconbasic-]:hover { color: #666; } .main-books__block__item__footer__volume { display: inline-block; width: 96px; height: 64px; font-size: 14px; line-height: 64px; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item__footer__volume { display: none; } } .main-books__block__item__footer__lastupdate { display: inline-block; width: 120px; height: 64px; padding: 16px 20px 0 0; font-size: 14px; line-height: 16px; text-align: right; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__block__item__footer__lastupdate { display: none; } } .main-books__block--tile { font-size: 0; } .main-books__block--tile .main-books__block__item { display: inline-block; width: 200px; height: 318px; margin-top: 32px; margin-right: 26px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); vertical-align: top; } .main-books__block--tile .main-books__block__item:nth-child(4n) { margin-right: 0; } .main-books__block--tile .main-books__block__item:nth-child(-n+4) { margin-top: 0; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item { position: relative; width: calc((100% - 13px) / 2); height: 282px; margin-top: 26px; margin-right: 13px; } .main-books__block--tile .main-books__block__item:nth-child(4n) { margin-right: 13px !important; } .main-books__block--tile .main-books__block__item:nth-child(-n+4) { margin-top: 26px !important; } .main-books__block--tile .main-books__block__item:nth-child(2n) { margin-right: 0 !important; } .main-books__block--tile .main-books__block__item:nth-child(-n+2) { margin-top: 0 !important; } } .main-books__block--tile .main-books__block__item--adder { display: inline-table; margin-top: 32px; background-color: #fff; } .main-books__block--tile .main-books__block__item--adder:hover i[class^=xiconbasic-] { opacity: .65; } .main-books__block--tile .main-books__block__item--adder__inner { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .main-books__block--tile .main-books__block__item--adder__inner i[class^=xiconbasic-] { color: #7ccbf0; font-size: 64px; transition: opacity .5s ease; } .main-books__block--tile .main-books__block__item--adder .btn, .main-books__block--tile .main-books__block__item--adder .btn-large { display: none; } .main-books__block--tile .main-books__block__item__image { display: table; width: 100%; height: 262px; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item__image { height: 220px; } } .main-books__block--tile .main-books__block__item__image__inner { display: table-cell; width: 100%; height: 262px; overflow: hidden; text-align: center; vertical-align: middle; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item__image__inner { height: 220px; } } .main-books__block--tile .main-books__block__item__image__inner a { display: block; width: 100%; height: 100%; } .main-books__block--tile .main-books__block__item__image__entity { width: 100%; height: 100%; } .main-books__block--tile .main-books__block__item__footer { position: relative; width: 100%; height: 56px; border-top: 1px solid rgba(216, 216, 216, .5); font-size: 14px; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item__footer { height: 62px; } } .main-books__block--tile .main-books__block__item__footer a { display: block; width: 100%; height: 100%; color: #666; } .main-books__block--tile .main-books__block__item__footer__title { position: relative; width: 100%; height: auto; padding: 8px 40px 0 10px; overflow: initial; font-size: 12px; font-weight: normal; line-height: 15px; text-overflow: initial; white-space: initial; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item__footer__title { padding-top: 11px; } } .main-books__block--tile .main-books__block__item__footer__info { position: absolute; top: -9px; right: 0; } @media only screen and (max-width : 600px) { .main-books__block--tile .main-books__block__item__footer__info { line-height: 82px; } } .main-books__block--tile .main-books__block__item__info, .main-books__block--tile .main-books__block__item__footer__volume, .main-books__block--tile .main-books__block__item__footer__lastupdate { display: none; } .main-books__more-block { padding-top: 5px; } .main-books__more-block.all-loaded .main-books__more-block__wrap { display: none; } .main-books__more-block.all-loaded .loading-finished-block { display: block; } .main-books__more-block__wrap { height: 63px; padding: 15px 0 0; text-align: center; transition: height .5s ease; } .main-books__more-block__wrap--loading span.loading { display: inline-block !important; } .main-books__more-block__wrap--loading span.notloading { display: none !important; } .main-books__more-block__more { display: table; width: 200px; height: 48px; margin: 0 auto; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background-color .5s ease; } .main-books__more-block__more:hover { background-color: rgba(0, 0, 0, .05); } @media only screen and (max-width : 600px) { .main-books__more-block__more { width: 166px; border-bottom-color: #979797; } } .main-books__more-block__more__inner { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .main-books__more-block__more__inner i[class^=fa] { margin-right: 8px; color: #acabad; transition: transform .5s ease; } .main-books__more-block__more__inner .preloader-wrapper { margin-right: 8px; vertical-align: middle; } .main-books__more-block__more__inner .more_text { color: #666; vertical-align: middle; } .main-books__more-block__more__inner span.loading { display: none; } .main-books__more-block__more__inner span.notloading { display: inline-block; } .main-books__more-block__more__inner .more-sd-chevron { display: inline-block; width: 20px; height: 20px; margin-top: -3px; transform: rotate(45deg); border: 2px solid #8b94a0; border-top-width: 0; border-left-width: 0; transition: transform .2s ease, margin-top .2s ease; } .main-books__more-block__buttons { margin-top: 15px; text-align: center; } .main-books__more-block__buttons .btn, .main-books__more-block__buttons .btn-large { width: 200px; box-shadow: none; } .main-books__more-block__buttons .btn__inner { display: inline-block; color: #4a4a4a; font-size: 14px; vertical-align: 5px; } .main-books__more-block__buttons .btn i, .main-books__more-block__buttons .btn-large i { margin-right: 5px; color: #7ccbf0; font-size: 24px !important; } .main-books__more-block .loading-finished-block { display: none; padding-top: 20px; text-align: center; } .main-books__more-block .loading-finished-block .alert-well { display: inline-block; width: auto; min-width: 200px; max-width: none; margin: 0 auto; padding: 10px 20px; } .main-books__more-block .loading-finished-block .alert-well [class*=xiconbasic-] { vertical-align: -4px; } .item_sorter { font-size: 0; } .item_sorter .sort-select { float: right; font-weight: normal; } @media only screen and (max-width : 600px) { .item_sorter .sort-select { float: left; } } .item_sorter .sort-icon { display: inline-block; float: right; color: #b1b9c0; vertical-align: middle; } .item_sorter .sort-icon:hover { opacity: .7; } .item_sorter .sort-icon.active { color: #7ccbf0; } .item_sorter .sort-icon--line { margin-right: 14px; } .item_sorter .sort-icon--tile { margin-right: 20px; } @media only screen and (max-width : 600px) { .item_sorter .sort-icon--tile { margin-right: 0; } } .item_sorter .sort-icon i[class^=xiconbasic-] { font-size: 30px; } .item_sorter .sort-select { display: inline-block; margin-top: 0; vertical-align: top; } @media only screen and (max-width : 600px) { .main-books__sorter .item_sorter { padding: 0 15px; } } body main .main-inner .main-content { width: 100%; } body main .main-inner .main-content .main-categories__block__item:nth-child(4n) { margin-right: 26px !important; } body main .main-inner .main-content .main-categories__block__item:nth-child(5n) { margin-right: 0; } body main .main-inner .main-content .main-categories__block__item:nth-child(-n+5) { margin-top: 0 !important; } @media only screen and (max-width : 600px) { body main .main-inner .main-content .main-categories__block__item:nth-child(4n) { margin-right: 0 !important; } body main .main-inner .main-content .main-categories__block__item:nth-child(5n) { margin-right: 13px; } body main .main-inner .main-content .main-categories__block__item:nth-child(-n+5) { margin-top: 14px !important; } body main .main-inner .main-content .main-categories__block__item:nth-child(-n+2) { margin-top: 0 !important; } body main .main-inner .main-content .main-categories__block__item:nth-child(2n) { margin-right: 0 !important; } } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(4n) { margin-right: 26px !important; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(5n) { margin-right: 0; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(-n+5) { margin-top: 0 !important; } @media only screen and (max-width : 600px) { body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(4n) { margin-right: 0 !important; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(5n) { margin-right: 13px; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(-n+5) { margin-top: 26px !important; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(-n+2) { margin-top: 0 !important; } body main .main-inner .main-content .main-books__block:not(.main-books__block--list) .main-books__block__item:nth-child(2n) { margin-right: 0 !important; } } /* アップロード一覧 */ body.uploadable .header-fab { display: inline-block !important; } body.uploadable .header-fab:hover { animation: hover-pop .3s ease-in-out; } body.uploadable .header-fab:after { position: absolute; top: calc(50% - 14px); left: calc(50% - 14px); width: 28px; height: 28px; font-family: "xiconbasic"; font-size: 28px; line-height: 28px; content: ""; } body.fileupload-show { overflow: hidden; } body.fileupload-show .fileupload { display: block; z-index: 20000; opacity: 1; transition: opacity .5s ease; } body.fileupload-show .modal-overlay { display: none !important; } .fileupload { display: none; z-index: -1; position: relative; opacity: 0; transition: opacity .5s ease, z-index 0s linear .5s; } .fileupload-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(51, 51, 51, .5); } .fileupload-backdrop.uploading .fileupload-backdrop__message { display: none; } .fileupload-backdrop.uploading .fileupload-backdrop__uploading-message { display: block; } .fileupload-backdrop.uploading .fileupload-backdrop__failed-message { display: none; } .fileupload-backdrop.failed .fileupload-backdrop__message { display: none; } .fileupload-backdrop.failed .fileupload-backdrop__uploading-message { display: none; } .fileupload-backdrop.failed .fileupload-backdrop__failed-message { display: block; } .fileupload-backdrop__upper { z-index: 2; position: absolute; width: 100%; height: 100%; cursor: pointer; } .fileupload-backdrop__message { display: block; position: absolute; top: calc((100% - 420px) / 2); left: calc((100% - 650px) / 2); width: 650px; height: 420px; color: #fff; } .fileupload-backdrop__message__image { width: 100%; height: 210px; margin: 20px 0 0; } .fileupload-backdrop__message__image__circle { width: 210px; height: 210px; margin: 0 auto; border: 2px solid #979797; border-radius: 50%; background-color: rgba(216, 216, 216, .29); } .fileupload-backdrop__message__image__circle__entity { display: inline-block; width: 90px; height: 90px; margin: 58px 58px; background-image: url(../images/_sprite.png); background-position: -322px -202px; background-repeat: no-repeat; } .fileupload-backdrop__message__header { margin-top: 15px; font-size: 28px; font-weight: bold; line-height: 38px; text-align: center; } .fileupload-backdrop__message__text { margin-top: 10px; font-size: 14px; text-align: center; } .fileupload-backdrop__message__closer { display: inline-block; z-index: 30000; position: relative; margin: 28px auto 0; font-size: 0; cursor: pointer; } .fileupload-backdrop__message__closer__wrap { text-align: center; } .fileupload-backdrop__message__closer i[class*=xiconbasic-] { margin-right: 5px; font-size: 20px; vertical-align: middle; } .fileupload-backdrop__message__closer__text { display: inline-block; font-size: 14px; vertical-align: middle; } .fileupload-backdrop__uploading-message, .fileupload-backdrop__failed-message { display: none; position: absolute; top: calc((100% - 420px) / 2); left: calc((100% - 650px) / 2); width: 650px; height: 420px; color: #fff; } .fileupload-backdrop__uploading-message__closer, .fileupload-backdrop__failed-message__closer { display: inline-block; z-index: 30000; position: relative; margin: 28px auto 0; font-size: 0; cursor: pointer; } .fileupload-backdrop__uploading-message__closer__wrap, .fileupload-backdrop__failed-message__closer__wrap { text-align: center; } .fileupload-backdrop__uploading-message__closer i[class*=xiconbasic-], .fileupload-backdrop__failed-message__closer i[class*=xiconbasic-] { margin-right: 5px; font-size: 20px; vertical-align: middle; } .fileupload-backdrop__uploading-message__closer__text, .fileupload-backdrop__failed-message__closer__text { display: inline-block; font-size: 14px; vertical-align: middle; } .fileupload-backdrop__failed-message { left: calc((100% - 400px) / 2); width: 400px; color: #666; } .fileupload-backdrop__failed-message__inner { padding: 10px; background-color: rgba(255, 255, 255, .8); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2); } /* アップロードコンテンツ新規作成 */ .upload_explain_detail { height: 108px; } .upload_htmlblock_detail { height: 160px; } .upload_pagespread { display: inline-block; margin-left: 8px; vertical-align: middle; } .upload_pagespread-text { vertical-align: middle; } .upload_pagespread--left { width: 21px; height: 17px; background-image: url(../images/_sprite.png); background-position: -496px -202px; background-repeat: no-repeat; } .upload_pagespread--right { width: 21px; height: 17px; background-image: url(../images/_sprite.png); background-position: -496px -221px; background-repeat: no-repeat; } /* alert block */ .message-block:not(:empty) { margin-bottom: 24px; } .alert-block { max-width: 830px; margin: 0 auto; text-align: center; } .alert-well { max-width: 700px; padding: 20px 30px; border-radius: 5px; background-color: #e4e3e1; color: #7c776f; font-size: 14px; line-height: 16px; } .alert-well.alert-well--max { width: 100%; max-width: none; } .alert-well.aleft-well--sidemargin { margin-right: 12px; margin-left: 12px; } .alert-well.alert-well--danger { background-color: #f2d6d3; color: #b73a35; } .alert-well.alert-well--warning { background-color: #f3e6cf; color: #b78535; } .alert-well.alert-well--success { background-color: #c9e8c4; color: #55902b; } .alert-well.alert-well--info { background-color: #d3e0f2; color: #3571b7; } .alert-well.alert-well--http, .alert-well.alert-well--notify { max-width: 800px; margin: 0 15px; padding: 20px; border-radius: 0; text-align: center; } .alert-well.alert-well--http { border: 1px solid #eed3d7; background-color: rgba(242, 222, 222, .5); color: #b94a48; } .alert-well.alert-well--notify { border: 1px solid #d3e3ee; background-color: rgba(222, 231, 242, .5); color: #4885b9; } .alert-well + .alert-well { margin-top: 16px; } .alert-well + .alert-link-block { margin-top: 16px; } .alert-well + .alert-link-block a { color: #1b5faf; } .alert-well + .alert-link-block a i, .alert-well + .alert-link-block a .btn-text { font-size: 14px; vertical-align: middle; } .alert-well + .alert-link-block a i { font-size: 24px; } .alert-well + .alert-link-block a .btn-text { font-size: 14px; } .http-alert__icon i { font-size: 52px; } .http-alert__header { margin-top: 12px; font-size: 20px; font-weight: bold; letter-spacing: 1px; line-height: 20px; } .http-alert__text { margin-top: 12px; font-size: 13px; } .http-error--sd .http-alert__header { font-size: 18px; line-height: 18px; } .http-error--sd .http-alert__text { font-size: 12px; } /* リスト一覧 */ .search-block:not(:empty) { margin-bottom: 24px; } .search-block a.btn, .search-block a.btn-large { height: 32px; border-radius: 5px; box-shadow: none; font-size: 14px; line-height: 32px; } .search-block .list-search__wrap { display: inline-block; position: relative; vertical-align: top; } .search-block .list-search__wrap.list-search--icon:before { display: inline-block; position: absolute; top: 6px; left: 8px; width: 20px; height: 20px; color: #757575; font-family: "xiconbasic"; font-size: 20px; font-weight: bold; line-height: 20px; content: ""; } .search-block .list-search__wrap.list-search--icon .list-search { padding-left: 38px; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .search-block .list-search__wrap.list-search--option .list-search { width: 250px; } .search-block .list-search__wrap.list-search--option .list-search.list-search--large { width: 350px; } .search-block .list-search__wrap.list-search--option .list-search.list-search--large + .btn-searchoption + .searchoption-dropdown { width: 380px !important; } .search-block .list-search__wrap.list-search--option .btn-searchoption { position: relative; width: 30px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: #d7ccc8; color: #757575; font-size: 16px; text-align: center; } .search-block .list-search__wrap.list-search--option .btn-searchoption:before { position: absolute; top: 0; left: 3px; font-family: "xiconbasic"; font-size: 24px; content: ""; } .search-block .list-search__wrap.list-search--option .btn-searchoption:hover { background-color: #c2b1aa; } .search-block .list-search__wrap.list-search--option .btn-searchoption.active:before { content: ""; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown { width: 280px !important; margin-top: 1px; will-change: width, height; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item { min-height: 0; padding: 10px 10px; border: 1px solid #888; border-top-width: 0; border-bottom-width: 0; background-color: #fff; color: #666; font-size: 13px; cursor: default; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item:hover { background-color: #fff; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item:last-child { padding-bottom: 20px; border-bottom-width: 1px; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item.searchoption-dropdown__item--header { height: 32px; padding: 0 0 0 10px; border: 1px solid #a1887f; background-color: #efebe9; color: #3e2723; font-weight: bold; line-height: 30px; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item.searchoption-dropdown__item--header:hover { background-color: #efebe9; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl { margin: 0; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dt { margin-top: 16px; font-weight: bold; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dt:first-child { margin-top: 0; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dd { margin-left: 0; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dd .row { margin-bottom: 0; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dd label { padding-top: 2px; color: #666; font-size: 13px; line-height: 25px; } .search-block .list-search__wrap.list-search--option .searchoption-dropdown .searchoption-dropdown__item dl dd [type=checkbox] + label { padding-left: 27px; } .search-block .list-search { width: 280px; height: 32px; margin-bottom: 0; padding: 0 10px 0 15px; border: 1px solid #dcdcdc; border-radius: 5px; background-color: #fff; font-size: 14px; line-height: 28px; vertical-align: top; } .search-block .list-search:focus { border-bottom-color: #dcdcdc !important; box-shadow: none !important; } .search-block .list-search.list-search--large { width: 380px; } .search-block .btn-searchbutton { margin-left: 6px; padding-right: 20px; padding-left: 20px; font-size: 24px; } .search-block .btn-searchbutton:before { font-family: "xiconbasic"; font-size: 24px; content: ""; } .search-block .batch-operation-button { width: 140px; margin-left: 24px; padding-right: 4px; padding-left: 10px; border: 1px solid #dcdcdc; background-color: #fff; color: #ababab; text-align: left; } .search-block .batch-operation-button:after { display: inline-block; float: right; font-family: "xiconbasic"; font-size: 24px; content: ""; } .search-block .batch-operation-button:hover { border-color: #b6b6b6; color: #858585; } .search-block .batch-operation-button.active:after { content: ""; } .search-block .batch-operation-dropdown { width: auto !important; margin-left: 24px; will-change: width, height; } .list-table { table-layout: fixed; } .list-table__header { background-color: #7d95ac; } .list-table__header__row th { padding-top: 12px; padding-bottom: 12px; border-radius: 0; font-size: 14px; } .list-table__header__row th label:before { background-color: #fff; } .list-table__header__row th [type=checkbox]:checked + label:before { border-right-color: #fff; border-bottom-color: #fff; background-color: transparent; transition: all .2s linear, background-color 0s linear; } .list-table__header a { display: block; position: relative; color: #fff; font-weight: normal; } .list-table__header a[class*=table-sorted--]:before, .list-table__header a[class*=table-sorted--]:after { position: absolute; right: 3px; width: 7px; height: 12px; color: #fff; font-family: "FontAwesome"; font-size: 12px; transition: all .2s linear; } .list-table__header a[class*=table-sorted--]:before { margin-top: -2px; content: ""; } .list-table__header a[class*=table-sorted--]:after { margin-top: 4px; content: ""; } .list-table__header a.table-sorted--asc:after { color: rgba(255, 255, 255, .4); } .list-table__header a.table-sorted--desc:before { color: rgba(255, 255, 255, .4); } .list-table__body__row { background-color: #fff; } .list-table__body__row td { padding-top: 8px; padding-bottom: 8px; border-radius: 0; color: #666; } .list-table__body__row__checkbox { padding-right: 12px; padding-left: 12px; } .list-table__body__row__checkbox [type=checkbox]:not(:checked) + label:before { border-radius: 2px; border-color: #ccc; } .list-table__body__row__checkbox [type=checkbox] + label { padding-left: 18px; } .list-table__body__row__editicon, .list-table__body__row__bookcustomicon, .list-table__body__row__deleteicon { padding-right: 6px; padding-left: 6px; text-align: center; } .list-table__body__row__editicon a, .list-table__body__row__bookcustomicon a, .list-table__body__row__deleteicon a { display: inline-block; transition: color .2s ease-in-out, transform .2s ease; } .list-table__body__row__editicon a:hover, .list-table__body__row__bookcustomicon a:hover, .list-table__body__row__deleteicon a:hover { transform: scale(1.1); } .list-table__body__row__editicon i[class^=xiconbasic-], .list-table__body__row__bookcustomicon i[class^=xiconbasic-], .list-table__body__row__deleteicon i[class^=xiconbasic-] { font-size: 24px; } .list-table__body__row__editicon a { color: #4a90e2; } .list-table__body__row__editicon a:hover { color: #8cb8ed; } .list-table__body__row__bookcustomicon a { color: #4a4755; } .list-table__body__row__bookcustomicon a:hover { color: #6e6a7f; } .list-table__body__row__deleteicon a { color: #d15b47; } .list-table__body__row__deleteicon a:hover { color: #e09284; } .list-table__body__row__thumbs { position: relative; padding-right: 10px; padding-left: 10px; font-size: 0; } .list-table__body__row__thumbs__entity { display: inline-block; width: 44px; height: 44px; background-position: top left; background-size: cover; } .list-table__body__row__thumbs .progress-block { position: absolute; top: 8px; left: 10px; width: 44px; height: 44px; } .list-table__body__row__thumbs .progress-block--overlay, .list-table__body__row__thumbs .progress-block--entity { position: relative; } .list-table__body__row__thumbs .progress-block--overlay { position: relative; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); } .list-table__body__row__thumbs .progress-block--entity { z-index: 2; position: absolute; top: 3px; left: 3px; width: 38px; height: 38px; } .list-table__body__row__thumbs .progress-block--entity__string { position: absolute; top: 12px; left: 0; width: 100%; color: #fff; font-size: 11px; text-align: center; } .list-table__body__row__type { padding-right: 4px; padding-left: 8px; } .list-table__body__row__contentsname { padding-right: 10px; font-weight: bold; } .list-table__body__row__createdate, .list-table__body__row__modifieddate { padding-right: 20px; padding-left: 0; color: #9b9b9b !important; text-align: right; } /* ウィザード */ body.uploadwizard header { height: 56px; } body.uploadwizard header nav { height: 56px; background-color: #fff; /* 既存の box-shadow はリセット */ box-shadow: none; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); line-height: 56px; } body.uploadwizard header nav .nav-inner { width: 1168px; margin: 0 auto; font-size: 0; } body.uploadwizard header nav .nav-wizard-icon-wrap { display: inline-block; width: 56px; height: 56px; background-color: #4990e2; color: #fff; text-align: center; vertical-align: top; } body.uploadwizard header nav .nav-wizard-icon-wrap .nav-wizard-icon { margin-top: -2px; font-size: 32px; line-height: 56px; } body.uploadwizard header nav .nav-wizard-text { display: inline-block; padding-left: 16px; color: #666; font-size: 16px; vertical-align: top; } body.uploadwizard main .main-wizard { width: 1168px; margin: 20px auto 60px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); color: #666; } body.uploadwizard main .main-wizard__content { padding: 40px 100px; } body.uploadwizard main .main-wizard__content .wizard-content__alert { margin-top: 32px; } body.uploadwizard main .main-wizard__content .wizard-content__alert:empty { display: none; } body.uploadwizard main .main-wizard__content .wizard-content__alert:blank { display: none; } body.uploadwizard main .main-wizard__content .wizard-content__alert:-moz-only-whitespace { display: none; } body.uploadwizard main .main-wizard__content .wizard-content__forms { margin-top: 32px; } body.uploadwizard main .main-wizard__content .wizard-content__pages { width: 100%; height: 130px; margin-top: 32px; overflow: hidden; font-size: 0; counter-reset: pages 0; } body.uploadwizard main .main-wizard__content .wizard-content__pages__inner { width: 100%; height: 100%; } body.uploadwizard main .main-wizard__content .wizard-content__pages__item { display: inline-block; margin-right: 16px; margin-bottom: 20px; } body.uploadwizard main .main-wizard__content .wizard-content__pages__item:last-child { margin-right: 0; } body.uploadwizard main .main-wizard__content .wizard-content__pages__item:after { display: block; width: 100%; height: 13px; margin-top: 4px; color: #9b9b9b; font-size: 11px; text-align: center; content: counter(pages) ""; counter-increment: pages 1; } body.uploadwizard main .main-wizard__content .wizard-content__pages__item__image { border: 1px solid #979797; } body.uploadwizard main .main-wizard__content .wizard-content__pages__item__image img { width: auto; max-width: 140px; height: auto; max-height: 95px; } body.uploadwizard main .main-wizard__content .wizard-content__list { margin-top: 32px; } body.uploadwizard main .main-wizard__content .wizard-content__list__block { margin-top: 26px; } body.uploadwizard main .main-wizard__content .wizard-content__list__block:first-child { margin-top: 0; } body.uploadwizard main .main-wizard__content .wizard-content__list__block h5 { margin: 0 0 10px; font-size: 16px; font-weight: bold; } body.uploadwizard main .main-wizard__content .wizard-content__list__block__list { padding: 16px; border: 1px solid #ccc; border-radius: 2px; } body.uploadwizard main .main-wizard__content .wizard-content__list__block__list dl:last-child { margin-bottom: 0; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl { margin: 0 0 8px; font-size: 0; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dt, body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dd { display: inline-block; font-size: 14px; vertical-align: top; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dt { width: 280px; font-weight: bold; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dd { width: calc(100% - 280px - 20px); margin-left: 20px; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dd .left-padder { display: inline-block; width: 100%; padding-left: 16px; padding-left: 1rem; } body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dd .upload_explain_preview, body.uploadwizard main .main-wizard__content .wizard-content__list__block dl dd .upload_htmlblock_preview { margin-top: 5px; padding: 6px 10px; border: 1px solid #dcdcdc; border-radius: 2px; } body.uploadwizard main .main-wizard__footer { width: 100%; height: 70px; padding: 11px 15px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-color: #576776; font-size: 0; text-align: right; } body.uploadwizard main .main-wizard__footer > a { display: inline-block; min-width: 134px; height: 48px; margin-right: 24px; box-shadow: none; font-size: 14px; line-height: 46px; } body.uploadwizard main .main-wizard__footer > a:last-child { margin-right: 0; } body.registerwizard header { height: 48px; } body.registerwizard header nav { height: 48px; background-color: #2c343b; box-shadow: none; /* 既存の box-shadow はリセット */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2); line-height: 48px; } body.registerwizard header nav .nav-inner { width: 1168px; margin: 0 auto; font-size: 0; } body.registerwizard header nav .nav-wizard-logo-wrap { display: inline-block; width: 130px; height: 48px; background-image: url("../images/logo.png"); background-position: 50% 50%; background-repeat: none; background-size: cover; } body.registerwizard header nav .nav-wizard-text { display: inline-block; padding-left: 20px; color: #fff; font-size: 16px; vertical-align: top; } body.registerwizard main .main-wizard { width: 824px; margin: 24px auto 60px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); color: #666; } body.registerwizard main .main-wizard.main-wizard--exfooter { margin-bottom: 0; } body.registerwizard main .main-wizard__content { padding: 30px 100px; } body.registerwizard main .main-wizard__content.termsofuse { padding: 45px 60px 40px; } body.registerwizard main .main-wizard__content .wizard-content__nav + .wizard-content__lead, body.registerwizard main .main-wizard__content .wizard-content__complete-icon + .wizard-content__lead { margin-top: 20px; } body.registerwizard main .main-wizard__content .wizard-content__nav + .wizard-content__lead .wizard-content__lead__title, body.registerwizard main .main-wizard__content .wizard-content__complete-icon + .wizard-content__lead .wizard-content__lead__title { font-weight: bold; } body.registerwizard main .main-wizard__content .wizard-content__complete-icon { display: block; width: 100px; height: 100px; margin: 0 auto; background-image: url(../images/_sprite.png); background-position: -161px 0px; background-repeat: no-repeat; background-size: 261px 200px; } body.registerwizard main .main-wizard__content .wizard-content__lead { font-size: 16px; text-align: center; } body.registerwizard main .main-wizard__content .wizard-content__forms { margin-top: 20px; } body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--confirm-block { text-align: center; } body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--button-block { font-size: 0px; text-align: center; } body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--button-block .btn, body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--button-block .btn-large { display: inline-block; min-width: 288px; height: 48px; margin-right: 16px; border-radius: 5px; box-shadow: none; font-size: 14px; line-height: 48px; } body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--button-block .btn:last-child, body.registerwizard main .main-wizard__content .wizard-content__forms.wizard-content__forms--button-block .btn-large:last-child { margin-right: 0; } body.registerwizard main .main-wizard__content .wizard-content__tou .wizard-content__tou__content { font-size: 14px; line-height: 22px; } body.registerwizard main .main-wizard__content .wizard-content__tou h3 { margin: 18.24px 0 14.592px 0; margin: 1.14rem 0 .912rem 0; font-size: 36.48px; font-size: 2.28rem; line-height: 110%; counter-reset: partTitle 0; } body.registerwizard main .main-wizard__content .wizard-content__tou h3:first-child { margin-top: 0; } body.registerwizard main .main-wizard__content .wizard-content__tou h4 { margin: 13.12px 0 10.496px 0; margin: .82rem 0 .656rem 0; padding-bottom: 5px; border-bottom: #ccc solid 1px; font-size: 26.24px; font-size: 1.64rem; line-height: 110%; counter-increment: partTitle 1; counter-reset: sectTitle 0; } body.registerwizard main .main-wizard__content .wizard-content__tou h4:before { content: counter(partTitle) ". "; } body.registerwizard main .main-wizard__content .wizard-content__tou h5 { margin: 8px 0 6.4px 0; margin: .5rem 0 .4rem 0; font-size: 16px; font-size: 1rem; line-height: 110%; counter-increment: sectTitle 1; } body.registerwizard main .main-wizard__content .wizard-content__tou h5:before { content: "(" counter(sectTitle) ") "; } body.registerwizard main .main-wizard__content .wizard-content__tou h5 + p { padding-left: 32px; padding-left: 2rem; } body.registerwizard main .main-wizard__content .wizard-content__tou p + h4, body.registerwizard main .main-wizard__content .wizard-content__tou ul + h4 { margin-top: 30px; } body.registerwizard main .main-wizard__content .wizard-content__tou p + .tou-emtitle, body.registerwizard main .main-wizard__content .wizard-content__tou ul + .tou-emtitle { margin-top: 20px; } body.registerwizard main .main-wizard__content .wizard-content__tou .right-box { display: inline-block; width: auto; } body.registerwizard main .main-wizard__content .wizard-content__tou .tou-emtitle { margin: 10.56px 0 8.448px 0; margin: .66rem 0 .528rem 0; font-size: 21.12px; font-size: 1.32rem; line-height: 110%; counter-reset: sectTitle 0; } body.registerwizard main .main-wizard__content .wizard-content__tou .alert-well { background-color: #eee; } body.registerwizard main .main-wizard__content .wizard-content__tou .alert-well .tou-emtitle { margin-top: 0; } body.registerwizard main .main-wizard__content .wizard-content__tou .external-link { display: inline-block; margin-left: 32px; margin-left: 2rem; } body.registerwizard main .main-wizard__content .wizard-content__tou .external-link:before { margin-right: 5px; font-family: "FontAwesome"; content: ""; } body.registerwizard main .main-wizard__content .wizard-content__tou .external-link:hover { text-decoration: underline; } body.registerwizard main .main-wizard__content .wizard-content__list { margin-top: 22px; } body.registerwizard main .main-wizard__content .wizard-content__list dl { padding: 22px 4px; border-bottom: 1px solid #dedede; font-size: 0; } body.registerwizard main .main-wizard__content .wizard-content__list dl:last-child { border-bottom: none; } body.registerwizard main .main-wizard__content .wizard-content__list dl > * { display: inline-block; color: #666; font-size: 14px; line-height: 16px; vertical-align: top; } body.registerwizard main .main-wizard__content .wizard-content__list dl dt { width: 160px; font-weight: bold; } body.registerwizard main .main-wizard__content .wizard-content__list dl dd { width: calc(100% - (160px + 40px)); margin-left: 40px; } body.registerwizard main .main-wizard .form-nomaterialize .form-row { margin-bottom: 16px; } body.registerwizard main .main-wizard-externalfooter { width: 824px; margin: 32px auto 60px; font-size: 0px; text-align: center; } body.registerwizard main .main-wizard-externalfooter .btn, body.registerwizard main .main-wizard-externalfooter .btn-large { display: inline-block; min-width: 288px; height: 48px; margin-right: 16px; border-radius: 5px; box-shadow: none; font-size: 14px; line-height: 48px; } body.registerwizard main .main-wizard-externalfooter .btn:last-child, body.registerwizard main .main-wizard-externalfooter .btn-large:last-child { margin-right: 0; } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--5 { margin-right: -30px; margin-left: -30px; } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--5 li:nth-child(odd) { width: 100px; } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--5 li:nth-child(even) { width: calc((964px - 100px * 5) / 4); } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--4 { margin-right: -30px; margin-left: -30px; } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--4 li:nth-child(odd) { width: 100px; } body.uploadwizard ul.wizard-nav-steps.wizard-nav-steps--4 li:nth-child(even) { width: calc((964px - 100px * 4) / 3); } body.registerwizard ul.wizard-nav-steps.wizard-nav-steps--3 { margin-right: -45px; margin-left: -45px; } body.registerwizard ul.wizard-nav-steps.wizard-nav-steps--3 li:nth-child(odd) { width: 130px; } body.registerwizard ul.wizard-nav-steps.wizard-nav-steps--3 li:nth-child(even) { width: calc((714px - 130px * 3) / 2); } body.registerwizard.passwordreminder ul.wizard-nav-steps.wizard-nav-steps--3 { margin-right: -60px; margin-left: -60px; } body.registerwizard.passwordreminder ul.wizard-nav-steps.wizard-nav-steps--3 li:nth-child(odd) { width: 160px; } body.registerwizard.passwordreminder ul.wizard-nav-steps.wizard-nav-steps--3 li:nth-child(even) { width: calc((744px - 160px * 3) / 2); } ul.wizard-nav-steps { font-size: 0; } ul.wizard-nav-steps li { display: inline-block; height: 66px; font-size: 16px; } ul.wizard-nav-steps li:nth-child(even) { background-image: url("../images/wizard_arrow.png"); background-position: 50% 17px; background-repeat: no-repeat; background-size: contain; } ul.wizard-nav-steps li.active + li { background-image: url("../images/wizard_arrow_active.png"); } ul.wizard-nav-steps li.active > .step { background-color: #4990e2; } ul.wizard-nav-steps li.active > .title { color: #4990e2; } ul.wizard-nav-steps li > .step { display: block; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background-color: #ababab; color: #fff; line-height: 40px; text-align: center; } ul.wizard-nav-steps li > .title { display: block; margin-top: 10px; color: #ababab; font-weight: bold; line-height: 16px; text-align: center; } .category_wrap { width: 100%; height: 152px; margin-top: 5px; overflow: hidden; border: 1px solid #dcdcdc; border-radius: 2px; transition: all .3s ease; } .category_wrap.disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; } .category_wrap__inner { width: 100%; height: 100%; padding: 12px; } .category_wrap__inner > .category_wrap_level { margin-left: 0; } .category_wrap_level { margin-left: 32px; } /* カテゴリ一覧 */ .category-operation-block { margin-bottom: 32px; font-size: 0; } .category-operation-block > div { display: inline-block; font-size: 14px; vertical-align: top; } .category-operation-block .category-operation-block__select { width: 250px; } .category-operation-block .category-operation-block__select .category_select_box:hover .select-dropdown { border-color: #b6b6b6; } .category-operation-block .category-operation-block__select .category_select_box .select-dropdown { border: 1px solid #dcdcdc; transition: border-color .5s ease, color .5s ease; } .category-operation-block .category-operation-block__input { margin-left: 50px; font-size: 0; } .category-operation-block .category-operation-block__input .form-wrap { display: inline-block; vertical-align: top; } .category-operation-block .category-operation-block__input input[type=text] { width: 300px; height: 32px; border: 1px solid #dcdcdc; border-right: none; border-radius: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 14px; } .category-operation-block .category-operation-block__input .btn, .category-operation-block .category-operation-block__input .btn-large { min-width: 120px; height: 32px; padding: 0; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size: 14px; line-height: 30px; } .category-list-block { padding: 40px 0; border-radius: 2px; background-color: #fff; } .category-list-block .category-list__inner { width: 800px; margin: 0 auto; } /* カテゴリ一覧の nestable プラグイン周り */ .dd { display: block; position: relative; margin: 0; padding: 0; } .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } .dd-list__item > button { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 38px; height: 38px; border: none; background-color: transparent; line-height: 38px; text-align: center; } .dd-list__item > button .fa { color: #707070; } .dd-list__item__collapse { display: inline-block; float: left; } .dd-list__item__collapse + .dd-list__item__handle .dd-list__item__handle__title { width: calc(100% - 260px - 38px); padding-left: 0; } .dd-list__item__handle { display: inline-block; font-size: 0; } .dd-list__item__handle > div { display: inline-block; height: 36px; font-size: 14px; vertical-align: top; } .dd-list__item__handle__title { width: calc(100% - 260px); padding-left: 14px; color: #7a9eb3; transition: color .5s ease; } .dd-list__item__handle__operation { width: 260px; padding-right: 15px; text-align: right; } .dd-list__item__handle__operation > a { display: inline-block; width: 20px; height: 30px; font-size: 20px; } .dd-list__item__handle__operation__edit { margin-right: 6px; color: #4990e2; transition: color .5s ease, transform .2s ease; } .dd-list__item__handle__operation__edit:after { font-family: "xiconbasic"; content: ""; } .dd-list__item__handle__operation__edit:hover { transform: scale(1.2); } .dd-list__item__handle__operation__remove { color: #d15b47; transition: color .5s ease, transform .2s ease; } .dd-list__item__handle__operation__remove:after { font-family: "xiconbasic"; content: ""; } .dd-list__item__handle__operation__remove:hover { transform: scale(1.2); } .dd-list .dd-list { padding-left: 30px; } .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; min-height: 20px; margin: 0; padding: 0; } .dd-handle { display: block; width: 100%; height: 38px; margin: 5px 0; padding: 0; border: 1px solid #dae2ea; border-radius: 2px; background-color: #f8faff; line-height: 36px; cursor: move; transition: background-color .5s ease, border .5s ease; } .dd-handle:hover { border-color: #d0dae4; background-color: #e9efff; } .dd-handle:hover .dd-list__item__handle__title { color: #7097ad; } .dd-handle:hover .dd-list__item__handle__operation .dd-list__item__handle__operation__edit { color: #3c88e0; } .dd-handle:hover .dd-list__item__handle__operation .dd-list__item__handle__operation__remove { color: #ce503b; } .dd-placeholder, .dd-empty { min-height: 38px; margin: 5px 0; padding: 0; border: 1px dashed #bdd2dd; border-radius: 2px; background: #f0f9ff; } .dd-dragel { z-index: 999; position: absolute; opacity: .8; pointer-events: none; } .dd-dragel > li > .dd-handle { border-color: #e4eaf0; background-color: white; } .dd + .category-none { display: none; } .dd.no-category + .category-none { display: block; } /* カテゴリのドロップダウン */ .category_dropdown { width: 768px !important; background-color: rgba(56, 65, 74, .96); box-shadow: none; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .5); font-size: 14px; } .category_dropdown a { padding: 0; color: #fbfbfb; } .category_dropdown a:hover { text-decoration: underline; } .category_dropdown__content { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 34px 27px; color: #fbfbfb; cursor: default; } .category_dropdown__content:hover { background-color: transparent; } .category_dropdown__content__category { -ms-flex: 1 1 calc(33.33333333% - 38px); flex: 1 1 calc(33.33333333% - 38px); max-width: 200px; margin: 56px 19px 0; } .category_dropdown__content__category:nth-child(-n+3) { margin-top: 0; } .category_dropdown__content__category.category_dropdown__content__category--life .category_dropdown__content__category__head { border-color: #ec9b7e; } .category_dropdown__content__category.category_dropdown__content__category--life .category_dropdown__content__category__head:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category.category_dropdown__content__category--comics .category_dropdown__content__category__head { border-color: #54d3d4; } .category_dropdown__content__category.category_dropdown__content__category--comics .category_dropdown__content__category__head:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -155px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category.category_dropdown__content__category--magazine .category_dropdown__content__category__head { border-color: #88b04b; } .category_dropdown__content__category.category_dropdown__content__category--magazine .category_dropdown__content__category__head:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -130px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category.category_dropdown__content__category--literature .category_dropdown__content__category__head { border-color: #967fb7; } .category_dropdown__content__category.category_dropdown__content__category--literature .category_dropdown__content__category__head:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -205px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category.category_dropdown__content__category--business .category_dropdown__content__category__head { border-color: #679fe4; } .category_dropdown__content__category.category_dropdown__content__category--business .category_dropdown__content__category__head:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -180px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category.category_dropdown__content__category--others .category_dropdown__content__category__head { border-color: #9eafd3; } .category_dropdown__content__category.category_dropdown__content__category--others .category_dropdown__content__category__head:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -230px -154px; background-repeat: no-repeat; background-size: 261px 200px; } .category_dropdown__content__category__head { width: 100%; height: 26px; padding-bottom: 12px; border-bottom: 1px solid #aaa; font-size: 14px; font-weight: bold; letter-spacing: .6px; } .category_dropdown__content__category__head:before { display: inline-block; width: 24px; height: 18px; margin: 0 5px 4px 0; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; vertical-align: -8px; content: ""; } .category_dropdown__content__category__body { padding: 26px 0 0; } .category_dropdown .category_item { margin-bottom: 13px; } .category_dropdown .category_item:last-child { margin-bottom: 0; } .category_dropdown .category_item a { font-size: 13px; line-height: normal; } /* タグのドロップダウン */ .tags_dropdown { width: 282px !important; max-height: none; padding: 0; overflow: hidden; background-color: rgba(56, 65, 74, .96); box-shadow: none; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .5); } .tags_dropdown li { min-height: 0; max-height: calc(100vh - 44px); background-color: transparent; font-size: 0; line-height: 0; cursor: default; } .tags_dropdown li:hover { background-color: transparent; } .tags_dropdown li .slimScrollDiv, .tags_dropdown li .tags_dropdown__content__inner { font-size: 0; line-height: 0; } .tags_dropdown li .tags_dropdown__content__inner { padding: 12px 0; } .tags_dropdown li a { display: inline-block !important; height: 28px; padding: 0 12px; background-color: rgba(255, 255, 255, 0); color: #fbfbfb; font-size: 14px; line-height: 30px; transition: background-color .2s ease-in-out; } .tags_dropdown li a:hover { background-color: transparent; background-color: rgba(255, 255, 255, .2); text-decoration: underline; } .tags_dropdown li .tags_dropdown__content__inner > .tags_dropdown__item a { padding-left: 12px; } .tags_dropdown li .tags_dropdown__content__inner > .tags_dropdown__item > .tags_dropdown__box > .tags_dropdown__item a { padding-left: 27px; } .tags_dropdown li .tags_dropdown__content__inner > .tags_dropdown__item > .tags_dropdown__box > .tags_dropdown__item > .tags_dropdown__box > .tags_dropdown__item a { padding-left: 42px; } .tags_dropdown li .tags_dropdown__item { position: relative; } .tags_dropdown li .tags_dropdown__item.has-child > a { padding-right: 28px; } .tags_dropdown li .tags_dropdown__item .tags_openclose { position: absolute; top: 4px; right: 8px; width: 20px; height: 20px; font-size: 20px !important; line-height: 18.5px; cursor: pointer; transition: transform .3s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tags_dropdown li .tags_dropdown__item .tags_openclose.tags_openclose--open { transform: rotate(180deg); } .tags_dropdown li .tags_dropdown__item .tags_openclose.tags_openclose--loading { transform-origin: center; animation: loading-spin 1s linear infinite; pointer-events: none; } .tags_dropdown li .tags_dropdown__item .tags_openclose.tags_openclose--loading:before { position: absolute; top: 0; left: 0; content: ""; } .tags_dropdown li .tags_dropdown__item a { width: 100%; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tags_dropdown li .tags_dropdown__box:empty { display: none; } .tags_dropdown li .tags_dropdown__box:blank { display: none; } .tags_dropdown li .tags_dropdown__box:-moz-only-whitespace { display: none; } @keyframes loading-spin { 100% { transform: rotate(360deg); } } /* マイページ */ @media only screen and (max-width : 600px) { .mypage .main-inner { margin-bottom: 40px; } } @media only screen and (max-width : 600px) { .mypage-block { margin-top: 10px; padding: 0 15px; } } .mypage-block__body { padding: 40px 32px; border-top-right-radius: 2px; border-top-left-radius: 2px; background-color: #fff; color: #666; } @media only screen and (max-width : 600px) { .mypage-block__body { padding: 30px 10px; } } @media only screen and (max-width : 600px) { .mypage-block__body.form-nomaterialize { padding-right: 0; padding-left: 0; } } .mypage-block__body.form-nomaterialize dl dt { line-height: 35px; } .mypage-block__body.form-nomaterialize dl dt:before { height: 35px; } @media only screen and (max-width : 600px) { .mypage-block__body.form-nomaterialize dl dt { margin-right: 10px; margin-left: 10px; line-height: 24px; } .mypage-block__body.form-nomaterialize dl dt:before { height: 24px; } } .mypage-block__body.form-nomaterialize dl dt label { display: inline-block; width: 100%; height: 100%; font-size: 14px; } .mypage-block__body.form-nomaterialize dl dd { padding-top: 0 !important; } @media only screen and (max-width : 600px) { .mypage-block__body.form-nomaterialize dl dd { padding-right: 0; padding-left: 0; } } @media only screen and (max-width : 600px) { .mypage-block__body.form-nomaterialize dl dd input[type=text], .mypage-block__body.form-nomaterialize dl dd input[type=password] { height: 44px; padding-left: 32px; border-right: none; border-left: none; border-radius: 0; line-height: 42px; } } @media only screen and (max-width : 600px) { .mypage-block__body.form-nomaterialize dl dd .follow-text, .mypage-block__body.form-nomaterialize dl dd .help-text { padding-right: 10px; padding-left: 32px; } } .mypage-block__body dl { margin: 0 0 32px; font-size: 0; } .mypage-block__body dl:last-child { margin-bottom: 0; } @media only screen and (max-width : 600px) { .mypage-block__body dl { width: 100%; margin-bottom: 40px; } } .mypage-block__body dl dt, .mypage-block__body dl dd { display: inline-block; min-height: 24px; font-size: 14px; vertical-align: top; } @media only screen and (max-width : 600px) { .mypage-block__body dl dt, .mypage-block__body dl dd { display: inline-block; } } .mypage-block__body dl dt { position: relative; width: 240px; padding: 0 0 0 22px; font-weight: bold; line-height: 24px; } .mypage-block__body dl dt:before { display: inline-block; position: absolute; top: 0; left: 0; width: 3px; height: 24px; background-color: #4990e2; content: ""; } @media only screen and (max-width : 600px) { .mypage-block__body dl dt { width: 100%; } } .mypage-block__body dl dd { width: calc(100% - 240px); margin: 0; padding: 3px 0 0; line-height: 16px; } @media only screen and (max-width : 600px) { .mypage-block__body dl dd { width: 100%; margin-top: 12px; padding-right: 10px; padding-left: 22px; } } .mypage-block__footer { height: auto; padding: 11px 15px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-color: #576776; font-size: 0; } @media only screen and (max-width : 600px) { .mypage-block__footer { padding: 30px 10px; } } .mypage-block__footer a.btn, .mypage-block__footer a.btn-large { min-width: 134px; height: 48px; padding-right: 0; padding-left: 0; font-size: 15px; line-height: 48px; } .mypage-block__footer a.btn-flat { margin-right: 0; color: #fff; } @media only screen and (min-width : 601px) { .mypage-block__footer__buttons { float: right; } .mypage-block__footer__buttons a.btn, .mypage-block__footer__buttons a.btn-large { margin-right: 24px; } .mypage-block__footer__buttons a.btn:last-child, .mypage-block__footer__buttons a.btn-large:last-child { margin-right: 0; } } @media only screen and (max-width : 600px) { .mypage-block__footer__buttons a.btn, .mypage-block__footer__buttons a.btn-large { display: block; margin-bottom: 30px; } .mypage-block__footer__buttons a.btn:last-child, .mypage-block__footer__buttons a.btn-large:last-child { margin-bottom: 0; } } .mypage-block__exfooter { margin-top: 20px; } .mypage-block__exfooter a.btn, .mypage-block__exfooter a.btn-large { color: #4990e2; } /* コンテンツ詳細 */ .book-detail--pc .main-inner { margin-bottom: 36px; } .book-detail--pc .book-detail-block__top { font-size: 0; } .book-detail--pc .book-detail-block__top__image { display: inline-table; width: 195px; height: 275px; float: left; } .book-detail--pc .book-detail-block__top__image__wrap { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .book-detail--pc .book-detail-block__top__image__inner { position: relative; border: 1px solid #ababab; } .book-detail--pc .book-detail-block__top__image__entity { width: auto; max-width: 193px; height: auto; max-height: 273px; } .book-detail--pc .book-detail-block__top__image .progress-block { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .book-detail--pc .book-detail-block__top__image .progress-block--overlay, .book-detail--pc .book-detail-block__top__image .progress-block--entity { position: relative; } .book-detail--pc .book-detail-block__top__image .progress-block--overlay { position: relative; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); } .book-detail--pc .book-detail-block__top__image .progress-block--entity { z-index: 2; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); } .book-detail--pc .book-detail-block__top__image .progress-block--entity__string { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -13px; color: #fff; font-size: 18px; text-align: center; } .book-detail--pc .book-detail-block__top__image .progress-block--entity canvas { position: absolute; top: 50%; left: 50%; } .book-detail--pc .book-detail-block__top__data { position: relative; width: calc(100% - (193px + 40px)); height: 275px; margin-left: 233px; font-size: 14px; } .book-detail--pc .book-detail-block__top__data__title { font-size: 28px; line-height: 30px; } .book-detail--pc .book-detail-block__top__data__list { margin-top: 20px; } .book-detail--pc .book-detail-block__top__data__list dl { margin-bottom: 16px; font-size: 0; } .book-detail--pc .book-detail-block__top__data__list dl:last-child { margin-bottom: 0; } .book-detail--pc .book-detail-block__top__data__list dl > dt, .book-detail--pc .book-detail-block__top__data__list dl > dd { display: inline-block; font-size: 14px; vertical-align: top; } .book-detail--pc .book-detail-block__top__data__list dl dt { width: 140px; } .book-detail--pc .book-detail-block__top__data__list dl dd { width: calc(100% - 140px); margin-left: 0; } .book-detail--pc .book-detail-block__top__data__list .book-detail-category__wrap:after { content: "、"; } .book-detail--pc .book-detail-block__top__data__list .book-detail-category__wrap:last-child:after { content: ""; } .book-detail--pc .book-detail-block__top__data__buttons { position: absolute; bottom: 0; left: 0; font-size: 0; } .book-detail--pc .book-detail-block__top__data__buttons > .btn, .book-detail--pc .book-detail-block__top__data__buttons > .btn-large { min-width: 144px; height: 48px; margin-right: 14px; padding-right: 15px; padding-left: 15px; font-size: 14px; line-height: 46px; } .book-detail--pc .book-detail-block__top__data__buttons > .btn:last-child, .book-detail--pc .book-detail-block__top__data__buttons > .btn-large:last-child { margin-right: 0; } .book-detail--pc .book-detail-block__top__data__buttons .book_edit_button:after { font-family: "FontAwesome"; font-size: 14px; content: ""; } .book-detail--pc .book-detail-block__texts { margin-top: 40px; color: #666; } .book-detail--pc .book-detail-block__texts__explain, .book-detail--pc .book-detail-block__texts__htmlblock { margin-bottom: 40px; } .book-detail--pc .book-detail-block__texts .book-detail-explain__title, .book-detail--pc .book-detail-block__texts .book-detail-htmlblock__title { position: relative; padding-left: 13px; font-size: 16px; line-height: 23px; } .book-detail--pc .book-detail-block__texts .book-detail-explain__title:before, .book-detail--pc .book-detail-block__texts .book-detail-htmlblock__title:before { display: inline-block; position: absolute; top: 0; left: 0; width: 3px; height: 23px; background-color: #4a90e2; content: ""; } .book-detail--pc .book-detail-block__texts .book-detail-explain__content, .book-detail--pc .book-detail-block__texts .book-detail-htmlblock__content { margin: 30px 30px 0 20px; font-size: 14px; line-height: 20px; } .book-detail--pc .book-detail-block__otherbooks__title { position: relative; padding-left: 13px; font-size: 16px; line-height: 23px; } .book-detail--pc .book-detail-block__otherbooks__title:before { display: inline-block; position: absolute; top: 0; left: 0; width: 3px; height: 23px; background-color: #4a90e2; content: ""; } .book-detail--pc.actibooks .main-inner { width: 100%; } .book-detail--pc.actibooks .book-detail-block__top { width: 100%; height: 634px; background-color: #3e3e3e; } .book-detail--pc.actibooks .book-detail-block__top__inner { width: 1168px; height: 100%; margin: 0 auto; font-size: 0; } .book-detail--pc.actibooks .book-detail-block__top__inner > div { display: inline-block; font-size: 14px; vertical-align: top; } .book-detail--pc.actibooks .book-detail-block__top__slide { width: 580px; height: 634px; } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer { position: relative; width: 100%; height: 592px; overflow: hidden; } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer__bg { z-index: 1; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter'); filter: blur(4px); } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer__bgcover { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .65); } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer__bg__entity { position: relative; width: 100%; height: 100%; background-position: too left; background-size: cover; } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer__wrap { display: table; z-index: 3; position: relative; width: 580px; height: 592px; } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer__wrap__inner { display: table-cell; width: 580px; height: 592px; font-size: 0; text-align: center; vertical-align: middle; } .book-detail--pc.actibooks .book-detail-block__top__slide__viewer .book-detail-slide-item { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 100%; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll { position: relative; width: 100%; height: 42px; background-color: #000; color: #fff; font-size: 0; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll a { display: inline-block; width: 46px; height: 42px; background-color: rgba(255, 255, 255, .1); color: #fff; line-height: 42px; vertical-align: top; transition: all .3s ease; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll a:hover { background-color: rgba(255, 255, 255, .2); } .book-detail--pc.actibooks .book-detail-block__top__slide__controll a:hover:after { color: #88b04b; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll a:after { transition: all .3s ease; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager { display: inline-block; height: 42px; margin: 0 auto; font-size: 0; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__icon { font-size: 30px; line-height: 46px !important; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__icon.book-detail-block__top__slide__controll__pager__icon--left { text-align: left; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__icon.book-detail-block__top__slide__controll__pager__icon--left:after { content: "〈"; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__icon.book-detail-block__top__slide__controll__pager__icon--right { text-align: right; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__icon.book-detail-block__top__slide__controll__pager__icon--right:after { content: "〉"; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__pager__indicator { display: inline-block; height: 42px; padding: 0 9px; font-size: 13px; line-height: 42px; vertical-align: top; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__expander { position: absolute; top: 0; right: 0; background-color: rgba(255, 255, 255, .1); text-align: center; } .book-detail--pc.actibooks .book-detail-block__top__slide__controll__expander:after { color: #fff; font-family: "xiconbasic"; font-size: 26px; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data { width: calc(100% - 580px); height: 634px; margin-left: 0; padding: 38px 0 42px 38px; color: #fbfbfb; } .book-detail--pc.actibooks .book-detail-block__top__data a { color: #fbfbfb; } .book-detail--pc.actibooks .book-detail-block__top__data__title { font-size: 19px; letter-spacing: 2px; line-height: 25px; } .book-detail--pc.actibooks .book-detail-block__top__data__title__wrap { height: 50px; margin-bottom: 16px; overflow: hidden; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo { height: 68px; padding-top: 10px; border-top: 1px solid #88b04b; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__inner { font-size: 0; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__inner > div { display: inline-block; vertical-align: top; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__company { width: calc(100% - 80px); margin: 0; font-size: 13px; letter-spacing: 1px; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share { width: 80px; text-align: right; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item { display: inline-block; width: 20px; height: 20px; margin-right: 8px; border-radius: 3px; color: #fff; font-size: 13px; line-height: 21px; text-align: center; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item:before { font-family: "Socicon"; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item:last-child { margin-right: 0; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--facebook { background-color: #3b5998; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--facebook:before { margin-left: 4px; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--twitter { background-color: #55acee; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--twitter:before { content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--line { background-color: #3ace01; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__share .book-detail-share__item.book-detail-share__item--line:before { content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__subinfo__date { padding-top: 6px; font-size: 12px; line-height: 12px; } .book-detail--pc.actibooks .book-detail-block__top__data__category { height: 101px; margin-top: 15px; } .book-detail--pc.actibooks .book-detail-block__top__data__category__title { font-size: 15px; font-weight: bold; letter-spacing: 1px; line-height: 15px; } .book-detail--pc.actibooks .book-detail-block__top__data__category__title:before { margin-right: 6px; font-family: "FontAwesome"; font-weight: normal; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body { padding-top: 12px; font-size: 0; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category { display: inline-block; margin: 0 30px 3px 0; font-size: 13px; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--life .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 44.3037974684% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--life .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--comics .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 65.4008438819% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--comics .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--magazine .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 54.8523206751% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--magazine .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--literature .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 86.4978902954% 84.1530054645%; background-repeat: no-repeat; background-size: 1087.5% 1176.4705882353%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--literature .actibooks-book-detail-category__icon:after { display: block; padding-top: 70.8333333333%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--business .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 75.9493670886% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--business .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--others .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 97.0464135021% 84.1530054645%; background-repeat: no-repeat; background-size: 1087.5% 1176.4705882353%; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category--others .actibooks-book-detail-category__icon:after { display: block; padding-top: 70.8333333333%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__icon { display: inline-block; width: 14px; margin: 0 6px 0 0; background-image: url(../images/_sprite.png); background-position: 44.3037974684% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; vertical-align: middle; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__level { display: inline-block; color: #fff; vertical-align: middle; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__level--1st:after { display: inline-block; margin: 0 0 0 8px; font-family: "FontAwesome"; font-size: 10px; font-weight: normal; vertical-align: 1px; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__level--2nd { padding: 3px 5px 2px; border-radius: 2px; } .book-detail--pc.actibooks .book-detail-block__top__data__category__body .actibooks-book-detail-category__level--2nd:hover { text-decoration: underline; } .book-detail--pc.actibooks .book-detail-block__top__data__buttons { position: relative; top: auto; right: auto; bottom: auto; left: auto; } .book-detail--pc.actibooks .book-detail-block__top__data__buttons .btn, .book-detail--pc.actibooks .book-detail-block__top__data__buttons .btn-large { width: 168px; height: 40px; border-radius: 20px; background-color: #88b04b; font-size: 14px; line-height: 40px; } .book-detail--pc.actibooks .book-detail-block__top__data__buttons .btn:hover, .book-detail--pc.actibooks .book-detail-block__top__data__buttons .btn-large:hover { background-color: rgba(136, 176, 75, .8); box-shadow: none; } .book-detail--pc.actibooks .book-detail-block__top__data__explain { margin-top: 22px; padding-top: 16px; border-top: 1px solid #464646; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__title { font-size: 15px; font-weight: bold; letter-spacing: 1px; line-height: 15px; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__title:before { margin-right: 6px; font-family: "FontAwesome"; font-weight: normal; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__body { height: 200px; margin-top: 9px; overflow: hidden; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__body__inner { height: 100%; padding-right: 30px; letter-spacing: 1px; line-height: 20px; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__body .slimScrollBarY { width: 10px !important; margin: 0 !important; background-color: transparent !important; opacity: 1 !important; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__body .slimScrollBarY:after { display: inline-block; position: absolute; top: 6px; right: 3px; bottom: 6px; left: 3px; background-color: #fff; content: ""; } .book-detail--pc.actibooks .book-detail-block__top__data__explain__body .slimScrollRailY { width: 10px !important; background-color: rgba(10, 10, 10, .3) !important; opacity: 1 !important; } .book-detail--pc.actibooks .book-detail-block__related { width: 1168px; margin: 0 auto; padding: 80px 0 160px; } .book-detail--pc.actibooks .book-detail-block__related .content-block { margin-bottom: 0; } .book-detail--pc.actibooks .book-detail-block__related .content-block + .content-block { margin-top: 84px; } .book-detail--pc.actibooks .book-detail-block__related .content-block + .content-block-related { margin-top: 84px; } .book-detail--pc.actibooks .book-detail-block__related .content-block-related { color: #3a3a3a; font-size: 18px; font-weight: bold; letter-spacing: 1px; } .book-detail--pc.actibooks .book-detail-block__related .content-block-related:before { margin-right: 6px; color: #6bbfec; font-family: "FontAwesome"; font-size: 18px; font-weight: normal; content: ""; } .book-detail--pc.actibooks .book-detail-block__related .content-block-related + .content-block { margin-top: 36px; } .book-detail--sd .header-sd-search.active { margin-top: 0; } .book-detail--sd .header-sd-search.active + .header-mainvisual + main .book-image-block { top: 135px; } .book-detail--sd .header-mainvisual { display: none; } .book-detail--sd main { z-index: 1; position: relative; } .book-detail--sd main .main-inner { margin: 0; padding: 0; } .book-detail--sd .book-image-block { z-index: 1; position: fixed; top: 0; left: 0; width: 100vw; height: 759px; overflow: hidden; transition: top .5s ease-in-out, height .2s ease; } .book-detail--sd .book-image-block + .main-inner { z-index: 2; position: relative; } .book-detail--sd .book-image-block__wrap { position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter'); filter: blur(4px); } .book-detail--sd .book-image-block__entity { width: 100%; height: 100%; background-position: top center; background-size: cover; } .book-detail--sd .book-detail-block__top, .book-detail--sd .book-detail-block__texts { background-color: rgba(0, 0, 0, .75); } .book-detail--sd .book-detail-block__category { background-color: rgba(0, 0, 0, .86); } .book-detail--sd .book-detail-block__top__navigation { width: 100%; height: 42px; } .book-detail--sd .book-detail-block__top__navigation .book-detail-navigation { display: inline-block; width: 42px; height: 42px; } .book-detail--sd .book-detail-block__top__image { display: table; width: 276px; height: 276px; margin: 0 auto 20px; font-size: 0; } .book-detail--sd .book-detail-block__top__image__wrap { display: table-cell; text-align: center; vertical-align: middle; } .book-detail--sd .book-detail-block__top__image__entity { width: auto; max-width: 276px; height: auto; max-height: 276px; margin: 0; box-shadow: 0 28px 40px 0 rgba(0, 0, 0, .75); } .book-detail--sd .book-detail-block__top__title { padding: 0 15px; color: #fff; text-align: center; } .book-detail--sd .book-detail-block__top__title__main { padding-bottom: 15px; font-size: 17px; font-weight: bold; letter-spacing: 1.5px; line-height: 25px; } .book-detail--sd .book-detail-block__top__title__sub { margin-top: 8px; padding: 11px 0 15px; border-top: 1px solid #88b04b; font-size: 11px; letter-spacing: 3px; line-height: 11px; } .book-detail--sd .book-detail-block__top__buttons { padding: 0 15px 15px; font-size: 0; } .book-detail--sd .book-detail-block__top__buttons > .btn, .book-detail--sd .book-detail-block__top__buttons > .btn-large { display: inline-block; width: calc((100% - 17px) / 2); height: 44px; margin-right: 17px; padding: 0; font-size: 14px; letter-spacing: .8px; line-height: 44px; } .book-detail--sd .book-detail-block__top__buttons > .btn:last-child, .book-detail--sd .book-detail-block__top__buttons > .btn-large:last-child { margin-right: 0; } .book-detail--sd .book-detail-block__subdata { padding: 15px 15px 15px; background-color: #2a2a2a; } .book-detail--sd .book-detail-block__subdata__title { color: #fbfbfb; font-size: 13px; font-weight: bold; } .book-detail--sd .book-detail-block__subdata__title i.fa { margin-right: 6px; font-weight: normal; } .book-detail--sd .book-detail-block__subdata__share { padding: 5px 0 20px; text-align: center; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item { display: inline-block; width: 40px; height: 40px; margin-right: 28px; padding-top: 2px; border-radius: 4.5px; color: #fff; font-size: 26px; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item:before { font-family: "Socicon"; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--qrcode { padding-top: 0; background-color: #979797; font-size: 30px; line-height: 40px; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--qrcode:before { font-family: "one_viewer"; content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--facebook { background-color: #3b5998; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--facebook:before { margin-left: 7px; content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--twitter { padding-top: 3px; background-color: #55acee; font-size: 24px; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--twitter:before { content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--line { background-color: #3ace01; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--line:before { content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--weibo { background-color: #e32529; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--weibo:before { content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--wechat { background-color: #02a709; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item--wechat:before { content: ""; } .book-detail--sd .book-detail-block__subdata__share .book-detail-share__item:last-child { margin-right: 0; } .book-detail--sd .book-detail-block__subdata__tags { position: relative; } .book-detail--sd .book-detail-block__subdata__tags__body { z-index: 1; position: relative; width: 100%; overflow: hidden; font-size: 0; transition: height .3s ease-in-out; } .book-detail--sd .book-detail-block__subdata__tags__body.book-detail-block__subdata__tags__body--closed { height: 20px !important; } .book-detail--sd .book-detail-block__subdata__tags__body .book-detail-tag__item { display: inline-block; margin-right: 15px; } .book-detail--sd .book-detail-block__subdata__tags__body .book-detail-tag__item:last-child { margin-right: 0; } .book-detail--sd .book-detail-block__subdata__tags__body .book-detail-tag__item a { display: inline-block; color: #fff; font-size: 11px; line-height: 22px; } .book-detail--sd .book-detail-block__subdata__tags__body .book-detail-tag__item a i[class^=xiconbasic-] { margin-right: 3px; font-size: 13px; vertical-align: -1px; } .book-detail--sd .book-detail-block__subdata__tags__openclose { z-index: 2; position: relative; top: 0; right: 0; width: 34px; height: 20px; padding: 5px 5px 0 0; float: right; text-align: right; cursor: pointer; } .book-detail--sd .book-detail-block__subdata__tags__openclose__inner { display: inline-block; width: 17px; height: 17px; margin: 0; transform: rotate(45deg); transform-origin: 6px 6px; border: 2px solid #ececec; border-right: none; border-bottom: none; transition: transform .2s ease; } .book-detail--sd .book-detail-block__subdata__tags__openclose.book-detail-block__subdata__tags__openclose--closed .book-detail-block__subdata__tags__openclose__inner { transform: rotate(225deg); } .book-detail--sd .book-detail-block__viewer-dummy { position: relative; width: 100%; } .book-detail--sd .book-detail-block__viewer-dummy:before { display: block; padding-top: 136.53333333%; content: ""; } .book-detail--sd .book-detail-block__viewer-dummy__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/viewer_dummy.png"); background-size: cover; } .book-detail--sd .book-detail-block__viewer-dummy.book-detail-block__viewer-dummy--tablet:before { padding-top: 111.84895833%; } .book-detail--sd .book-detail-block__viewer-dummy.book-detail-block__viewer-dummy--tablet .book-detail-block__viewer-dummy__inner { background-image: url("../images/viewer_dummy_tablet.png"); } .book-detail--sd .book-detail-block__texts { padding: 15px 0 0; background-color: #f6f4f7; color: #666; } .book-detail--sd .book-detail-block__texts > div { position: relative; } .book-detail--sd .book-detail-block__texts > div:last-child:after { display: inline-block; position: absolute; bottom: 0; left: 50%; width: 63px; height: 2px; margin-left: calc(-63px / 2); background-color: #9b9b9b; content: ""; opacity: .61; } .book-detail--sd .book-detail-block__texts__breadcrumbs { height: auto; margin-bottom: 16px; padding: 0 15px; line-height: normal; } .book-detail--sd .book-detail-block__texts__breadcrumbs:empty { display: none; } .book-detail--sd .book-detail-block__texts__breadcrumbs:blank { display: none; } .book-detail--sd .book-detail-block__texts__breadcrumbs:-moz-only-whitespace { display: none; } .book-detail--sd .book-detail-block__texts__breadcrumbs.breadcrumb_wrap--checked { visibility: visible; } .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb { display: inline-block; margin-right: 4px; } .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb:last-child { margin-right: 0; } .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb:before { margin-right: 2px; margin-left: 0; vertical-align: -2px; } .book-detail--sd .book-detail-block__texts__breadcrumbs .breadcrumb span.breadcrumb-inner { max-width: calc(100% - 17px); } .book-detail--sd .book-detail-block__texts__book-title { width: 100%; height: 27px; padding: 0 15px; overflow: hidden; font-size: 18px; font-weight: bold; letter-spacing: .8px; text-overflow: ellipsis; white-space: nowrap; } .book-detail--sd .book-detail-block__texts__tags { display: none; width: 100%; padding: 0 10px; font-size: 0; } .book-detail--sd .book-detail-block__texts__tags__tag { display: inline-block; height: 21px; margin: 5px 5px 0; padding: 4px 10px 0 4px; border: 1px solid #979797; border-radius: 3px; color: #666; font-size: 12px; line-height: 12px; text-decoration: none; } .book-detail--sd .book-detail-block__texts__tags__tag:before { margin-right: 4px; font-family: "xiconbasic"; font-size: 15px; vertical-align: -2px; content: ""; } .book-detail--sd .book-detail-block__texts__explain { padding: 0 15px 24px; } .book-detail--sd .book-detail-block__texts__htmlblock { padding: 0 15px 30px; } .book-detail--sd .book-detail-block__texts .book-detail-explain__title { font-size: 13px; font-weight: bold; letter-spacing: .8px; line-height: 13px; } .book-detail--sd .book-detail-block__texts .book-detail-explain__title i.fa { margin-right: 6px; } .book-detail--sd .book-detail-block__texts .book-detail-explain__content { margin-top: 16px; } .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__title { min-height: 21px; padding: 2px 0 2px 10px; border-left: 3px solid #4a90e2; font-size: 14px; font-weight: bold; line-height: 17px; } .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content { margin-top: 10px; } .book-detail--sd .book-detail-block__texts .book-detail-explain__content, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content { font-size: 13px; letter-spacing: 1px; line-height: 20px; } .book-detail--sd .book-detail-block__texts .book-detail-explain__content .book-detail-htmlblock__content__googlemaps, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content .book-detail-htmlblock__content__googlemaps { position: relative; width: 100%; } .book-detail--sd .book-detail-block__texts .book-detail-explain__content .book-detail-htmlblock__content__googlemaps:before, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content .book-detail-htmlblock__content__googlemaps:before { display: block; padding-top: 75%; content: ""; } .book-detail--sd .book-detail-block__texts .book-detail-explain__content .book-detail-htmlblock__content__googlemaps iframe, .book-detail--sd .book-detail-block__texts .book-detail-explain__content .book-detail-htmlblock__content__googlemaps object, .book-detail--sd .book-detail-block__texts .book-detail-explain__content .book-detail-htmlblock__content__googlemaps embed, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content .book-detail-htmlblock__content__googlemaps iframe, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content .book-detail-htmlblock__content__googlemaps object, .book-detail--sd .book-detail-block__texts .book-detail-htmlblock__content .book-detail-htmlblock__content__googlemaps embed { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .book-detail--sd .book-detail-block__relatedtag-content { background-color: #f6f4f7; } .book-detail--sd main .main-inner .environment-block { margin: 0; padding: 30px 15px 80px; background-color: #f6f4f7; } .book-detail--sd main .main-inner .environment-block__title { height: 21px; font-size: 14px; line-height: 21px; } .book-detail--sd main .main-inner .environment-block__body { padding-top: 22px; } .book-detail--sd main .main-inner .environment-block__body > div { display: block; width: 100%; } .book-detail--sd main .main-inner .environment-block__body__left { padding: 0; border: none; background-color: transparent; } .book-detail--sd main .main-inner .environment-block__body__left__title { display: none; } .book-detail--sd main .main-inner .environment-block__body__left__body__header01 { margin-top: 0; } .book-detail--sd main .main-inner .environment-block__body__right { margin-top: 20px; } .book-detail--sd footer { z-index: 2; position: relateive; background-color: #f6f4f7; } .book-detail--sd.actibooks .book-image-block { top: 44px; height: 500px; } .book-detail--sd.actibooks .book-detail-block__top { padding-top: 45px; } .book-detail--sd.actibooks .book-detail-block__top__image { width: 142px; height: 142px; margin: 0 auto 24px; } .book-detail--sd.actibooks .book-detail-block__top__image__entity { width: 142px; max-width: none; height: 142px; max-height: none; background-position: top left; background-size: cover; } .book-detail--sd.actibooks .book-detail-block__top__title__sub { padding-top: 12px; } .book-detail--sd.actibooks .book-detail-block__top__title__company { margin: 24px 0 0; padding: 12px 0 0; border-top: 1px solid #88b04b; font-size: 12px; } .book-detail--sd.actibooks .book-detail-block__top__buttons { padding: 24px 0 42px; text-align: center; } .book-detail--sd.actibooks .book-detail-block__top__buttons > .btn, .book-detail--sd.actibooks .book-detail-block__top__buttons > .btn-large { width: 180px; height: 40px; border-radius: 4px; background-color: #88b04b; letter-spacing: 1.1px; line-height: 40px; } .book-detail--sd.actibooks .book-detail-block__category { padding: 20px 22px; background-color: #232223; font-size: 13px; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category { margin-bottom: 2px; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category:last-child { margin-bottom: 0; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--life .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 44.3037974684% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--life .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--comics .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 65.4008438819% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--comics .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--magazine .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 54.8523206751% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--magazine .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--literature .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 86.4978902954% 84.1530054645%; background-repeat: no-repeat; background-size: 1087.5% 1176.4705882353%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--literature .actibooks-book-detail-category__icon:after { display: block; padding-top: 70.8333333333%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--business .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 75.9493670886% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--business .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--others .actibooks-book-detail-category__icon { background-image: url(../images/_sprite.png); background-position: 97.0464135021% 84.1530054645%; background-repeat: no-repeat; background-size: 1087.5% 1176.4705882353%; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category--others .actibooks-book-detail-category__icon:after { display: block; padding-top: 70.8333333333%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category__icon { display: inline-block; width: 16px; margin: 0 4px 0 0; background-image: url(../images/_sprite.png); background-position: 44.3037974684% 84.6153846154%; background-repeat: no-repeat; background-size: 1087.5% 1111.1111111111%; vertical-align: middle; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category__icon:after { display: block; padding-top: 75%; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category__level { display: inline-block; color: #fff; vertical-align: middle; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category__level--1st:after { display: inline-block; margin: 0 0 0 8px; font-family: "FontAwesome"; font-size: 10px; font-weight: normal; vertical-align: 1px; content: ""; } .book-detail--sd.actibooks .book-detail-block__category .actibooks-book-detail-category__level--2nd { padding: 3px 5px 2px; border-radius: 2px; } .book-detail--sd.actibooks .book-detail-block__texts { padding: 40px 0; background-color: #363636; } .book-detail--sd.actibooks .book-detail-block__texts__explain { padding: 0 22px 30px; } .book-detail--sd.actibooks .book-detail-block__texts__explain .book-detail-explain__title { font-size: 14px; letter-spacing: .7px; } .book-detail--sd.actibooks .book-detail-block__texts__explain .book-detail-explain__content { font-size: 13px; letter-spacing: .8px; } .book-detail--sd.actibooks .book-detail-block__texts__share .book-detail-share__title { padding: 30px 22px 0; } .book-detail--sd.actibooks .book-detail-block__texts__share .book-detail-share__wrap { padding-top: 30px; } .book-detail--sd.actibooks .book-detail-block__otherbooks { padding: 40px 0 80px; } .book-detail--sd.actibooks .book-detail-block__otherbooks__area__title { margin-bottom: 24px; padding: 0 14px; font-size: 13px; font-weight: bold; } .book-detail--sd.actibooks .book-detail-block__otherbooks__area__title:before { display: inline-block; width: 15px; height: 15px; margin: 0 4px 0 0; color: #7ccbf0; font-family: "FontAwesome"; font-size: 15px; font-weight: normal; vertical-align: -2px; content: ""; } .book-detail--sd.actibooks .book-detail-block__otherbooks__area + .book-detail-block__otherbooks__area { margin-top: 64px; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--life .book-detail-block__otherbooks__block__head { border-color: #ec9b7e; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--comics .book-detail-block__otherbooks__block__head { border-color: #54d3d4; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--magazine .book-detail-block__otherbooks__block__head { border-color: #88b04b; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--literature .book-detail-block__otherbooks__block__head { border-color: #967fb7; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--business .book-detail-block__otherbooks__block__head { border-color: #679fe4; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block.book-detail-block__otherbooks__block--others .book-detail-block__otherbooks__block__head { border-color: #9eafd3; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block + .book-detail-block__otherbooks__block { margin-top: 44px; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block__head { padding: 0 14px 6px; border-bottom: 1px solid #c9c9c9; font-size: 13px; font-weight: bold; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block__head__more { color: #666; font-weight: normal; } .book-detail--sd.actibooks .book-detail-block__otherbooks__block__body { padding-top: 7px; } .book-detail--sd.book-detail--tablet.nav-beforelogin header nav .nav-pc-rightside__item--login a.btn-flat, .book-detail--sd.book-detail--tablet.nav-beforelogin header nav .nav-pc-rightside__item--register a.btn-flat { padding-right: 6px; padding-left: 6px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts { width: calc(100% - 300px); padding: 0; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__like, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__share { margin: 0; padding: 0 15px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__like__icon, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment__icon, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__share__icon { width: 24px; height: 25px; font-size: 24px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__like__icon:before, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__like__icon:after, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment__icon:before, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment__icon:after, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__share__icon:before, .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__share__icon:after { line-height: 24px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__like__number { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment__icon:before { font-size: 24px; line-height: 24px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__comment__number { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__reacts__share__title { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__app-button { width: 300px; text-align: center; } .book-detail--sd.book-detail--tablet .book-detail-block__action__app-button__icon { width: 32px; height: 32px; } .book-detail--sd.book-detail--tablet .book-detail-block__action__app-button__title { height: 32px; padding-top: 6px; font-size: 18px; line-height: 24px; } .book-detail--sd.book-detail--tablet .book-detail-block__texts__book-title { height: 29px; font-size: 20px; } .book-detail--sd.book-detail--tablet .book-detail-block__texts__tags__tag { height: 23px; font-size: 14px; line-height: 14px; } .book-detail--sd.book-detail--tablet .book-detail-block__texts__tags__tag:before { font-size: 17px; } .book-detail--sd.book-detail--tablet .book-detail-block__texts .book-detail-explain__content, .book-detail--sd.book-detail--tablet .book-detail-block__texts .book-detail-htmlblock__content { font-size: 15px; line-height: 22px; } .book-detail--sd.book-detail--tablet .book-detail-block__texts .book-detail-htmlblock__title { height: 23px; font-size: 16px; line-height: 23px; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__title { height: 23px; font-size: 16px; line-height: 23px; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__body > div { display: inline-block; font-size: 15px; vertical-align: top; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__body > div:first-child { margin-right: 28px; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__body__left { width: 385px; padding: 20px; border: solid 1px #e7e7e7; background-color: #fbfafb; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__body__left__title { height: 25px; font-size: 17px; line-height: 28px; } .book-detail--sd.book-detail--tablet main .main-inner .environment-block__body__right { width: calc((100% - 413px)); } .book-detail--pc .book-detail-block__action { background-color: #32373c; font-size: 0; text-align: center; } .book-detail--pc .book-detail-block__action__inner { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; width: 1168px; margin: 0 auto; } .book-detail--pc .book-detail-block__action__inner > div { display: inline-block; height: 43px; line-height: 43px; vertical-align: top; } .book-detail--pc .book-detail-block__action__reacts { color: #fff; text-align: left; } .book-detail--pc .book-detail-block__action__reacts > a { display: inline-block; color: #fff; text-decoration: none; vertical-align: top; } .book-detail--pc .book-detail-block__action__reacts__like, .book-detail--pc .book-detail-block__action__reacts__comment, .book-detail--pc .book-detail-block__action__reacts__share, .book-detail--pc .book-detail-block__action__reacts__print, .book-detail--pc .book-detail-block__action__reacts__pdf { padding: 0 15px; } .book-detail--pc .book-detail-block__action__reacts__like > div, .book-detail--pc .book-detail-block__action__reacts__comment > div, .book-detail--pc .book-detail-block__action__reacts__share > div, .book-detail--pc .book-detail-block__action__reacts__print > div, .book-detail--pc .book-detail-block__action__reacts__pdf > div{ display: inline-block; vertical-align: middle; } .book-detail--pc .book-detail-block__action__reacts__like__icon, .book-detail--pc .book-detail-block__action__reacts__comment__icon, .book-detail--pc .book-detail-block__action__reacts__share__icon, .book-detail--pc .book-detail-block__action__reacts__print__icon, .book-detail--pc .book-detail-block__action__reacts__pdf__icon { display: inline-block; width: 24px; height: 25px; font-size: 24px; } .book-detail--pc .book-detail-block__action__reacts__like__icon:before, .book-detail--pc .book-detail-block__action__reacts__like__icon:after, .book-detail--pc .book-detail-block__action__reacts__comment__icon:before, .book-detail--pc .book-detail-block__action__reacts__comment__icon:after, .book-detail--pc .book-detail-block__action__reacts__share__icon:before, .book-detail--pc .book-detail-block__action__reacts__share__icon:after, .book-detail--pc .book-detail-block__action__reacts__print__icon:before, .book-detail--pc .book-detail-block__action__reacts__print__icon:after, .book-detail--pc .book-detail-block__action__reacts__pdf__icon:before, .book-detail--pc .book-detail-block__action__reacts__pdf__icon:after { font-family: "xiconbasic"; line-height: 24px; vertical-align: top; } .book-detail--pc .book-detail-block__action__reacts__like__icon { transition: color .3s ease-in-out; will-change: color; } .book-detail--pc .book-detail-block__action__reacts__like__icon:before, .book-detail--pc .book-detail-block__action__reacts__like__icon:after { font-family: "xiconbasic"; line-height: 22px; } .book-detail--pc .book-detail-block__action__reacts__like__icon:before { content: ""; } .book-detail--pc .book-detail-block__action__reacts__like__icon:after { display: none; content: ""; } .book-detail--pc .book-detail-block__action__reacts__like__number { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; transition: color .3s ease-in-out; will-change: color; } .book-detail--pc .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon { color: #ff6a8e; transition: color .3s ease-in-out .2s; } .book-detail--pc .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon:before { display: none; } .book-detail--pc .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon:after { display: inline-block; } .book-detail--pc .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__number { color: #ff7f9e; transition: color .3s ease-in-out .2s; } .book-detail--pc .book-detail-block__action__reacts__comment__icon:before { font-family: "xiconbasic"; font-size: 24px; line-height: 24px; content: ""; } .book-detail--pc .book-detail-block__action__reacts__comment__number { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--pc .book-detail-block__action__reacts__share__icon:before { font-family: "xiconbasic"; content: ""; } .book-detail--pc .book-detail-block__action__reacts__share__title { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--pc .book-detail-block__action__reacts__print__icon:before { font-family: "xiconbasic"; content: '\e970'; } .book-detail--pc .book-detail-block__action__reacts__print__title { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--pc .book-detail-block__action__reacts__pdf__title { padding: 2px 0 0 8px; font-size: 16px; line-height: 16px; } .book-detail--pc .book-detail-block__action__extend { color: #000; text-align: right; } .book-detail--pc .book-detail-block__action__extend__wrapper { display: inline-block; width: auto; height: 100%; background-color: #fff; } .book-detail--pc .book-detail-block__action__extend__wrapper > a { display: inline-block; color: #000; vertical-align: top; } .book-detail--pc .book-detail-block__action__extend__wrapper > a > div { display: inline-block; vertical-align: middle; } .book-detail--pc .book-detail-block__action__extend__normal, .book-detail--pc .book-detail-block__action__extend__larger, .book-detail--pc .book-detail-block__action__extend__zoomin { width: 114px; height: 100%; text-align: center; } .book-detail--pc .book-detail-block__action__extend__normal__icon, .book-detail--pc .book-detail-block__action__extend__larger__icon, .book-detail--pc .book-detail-block__action__extend__zoomin__icon { position: relative; width: 27px; height: 27px; margin-right: 8px; } .book-detail--pc .book-detail-block__action__extend__normal__icon:before, .book-detail--pc .book-detail-block__action__extend__larger__icon:before, .book-detail--pc .book-detail-block__action__extend__zoomin__icon:before { display: inline-block; position: absolute; top: -9px; left: 0; width: 27px; height: 27px; font-family: "one_viewer"; font-size: 27px; } .book-detail--pc .book-detail-block__action__extend__normal__text, .book-detail--pc .book-detail-block__action__extend__larger__text, .book-detail--pc .book-detail-block__action__extend__zoomin__text { font-size: 16px; line-height: 27px; } .book-detail--pc .book-detail-block__action__extend__normal { background-color: rgba(0, 0, 0, .1); transition: background-color .3s ease-in-out; will-change: background-color; } .book-detail--pc .book-detail-block__action__extend__normal:hover { background-color: rgba(0, 0, 0, .3); } .book-detail--pc .book-detail-block__action__extend__normal__icon:before { content: ""; } .book-detail--pc .book-detail-block__action__extend__larger, .book-detail--pc .book-detail-block__action__extend__zoomin { background-color: rgba(0, 0, 0, 0); transition: background-color .3s ease-in-out; will-change: background-color; } .book-detail--pc .book-detail-block__action__extend__larger:hover, .book-detail--pc .book-detail-block__action__extend__zoomin:hover { background-color: rgba(0, 0, 0, .2); } .book-detail--pc .book-detail-block__action__extend__larger__icon:before { content: ""; } .book-detail--pc .book-detail-block__action__extend__zoomin__icon:before { content: ""; } .book-detail--pc .book-detail-block__action__reacts__pdf__icon:before { font-family: "xiconbasic"; content: ""; } .book-detail--sd .book-detail-block__action { background-color: #555a60; font-size: 0; } .book-detail--sd .book-detail-block__action > div { display: inline-block; height: 40px; line-height: 40px; vertical-align: top; } .book-detail--sd .book-detail-block__action__inner { width: 100%; margin: 0; } .book-detail--sd .book-detail-block__action__inner > div { display: inline-block; height: 40px; line-height: 40px; vertical-align: top; } .book-detail--sd .book-detail-block__action__reacts { width: calc(100% - 118px); padding: 0; color: #fff; } .book-detail--sd .book-detail-block__action__reacts > a { display: inline-block; color: #fff; text-decoration: none; vertical-align: top; } .book-detail--sd .book-detail-block__action__reacts__like, .book-detail--sd .book-detail-block__action__reacts__comment, .book-detail--sd .book-detail-block__action__reacts__share { padding: 0 4px; } .book-detail--sd .book-detail-block__action__reacts__like > div, .book-detail--sd .book-detail-block__action__reacts__comment > div, .book-detail--sd .book-detail-block__action__reacts__share > div { display: inline-block; vertical-align: middle; } .book-detail--sd .book-detail-block__action__reacts__like__icon, .book-detail--sd .book-detail-block__action__reacts__comment__icon, .book-detail--sd .book-detail-block__action__reacts__share__icon { display: inline-block; width: 22px; height: 22px; font-size: 22px; } .book-detail--sd .book-detail-block__action__reacts__like__icon:before, .book-detail--sd .book-detail-block__action__reacts__like__icon:after, .book-detail--sd .book-detail-block__action__reacts__comment__icon:before, .book-detail--sd .book-detail-block__action__reacts__comment__icon:after, .book-detail--sd .book-detail-block__action__reacts__share__icon:before, .book-detail--sd .book-detail-block__action__reacts__share__icon:after { font-family: "xiconbasic"; line-height: 22px; vertical-align: top; } .book-detail--sd .book-detail-block__action__reacts__like__icon { transition: color .3s ease-in-out; will-change: color; } .book-detail--sd .book-detail-block__action__reacts__like__icon:before, .book-detail--sd .book-detail-block__action__reacts__like__icon:after { font-family: "xiconbasic"; line-height: 22px; } .book-detail--sd .book-detail-block__action__reacts__like__icon:before { content: ""; } .book-detail--sd .book-detail-block__action__reacts__like__icon:after { display: none; content: ""; } .book-detail--sd .book-detail-block__action__reacts__like__number { padding: 3px 0 0 4px; font-size: 13px; line-height: 13px; transition: color .3s ease-in-out; will-change: color; } .book-detail--sd .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon { color: #ff6a8e; transition: color .3s ease-in-out .2s; } .book-detail--sd .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon:before { display: none; } .book-detail--sd .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__icon:after { display: inline-block; } .book-detail--sd .book-detail-block__action__reacts__like--liked .book-detail-block__action__reacts__like__number { color: #ff7f9e; transition: color .3s ease-in-out .2s; } .book-detail--sd .book-detail-block__action__reacts__comment__icon:before { font-family: "xiconbasic"; content: ""; } .book-detail--sd .book-detail-block__action__reacts__comment__number { padding: 3px 0 0 4px; font-size: 13px; line-height: 13px; } .book-detail--sd .book-detail-block__action__reacts__share__icon:before { font-family: "xiconbasic"; content: ""; } .book-detail--sd .book-detail-block__action__reacts__share__title { padding: 3px 0 0 4px; font-size: 13px; line-height: 13px; } .book-detail--sd .book-detail-block__action__app-button { display: inline-block; width: 118px; height: 40px; background-color: #32c77b; line-height: 40px; text-align: center; } .book-detail--sd .book-detail-block__action__app-button a { display: inline-block; width: 100%; height: 100%; color: #fff; font-size: 0px; text-align: center; text-decoration: none; } .book-detail--sd .book-detail-block__action__app-button__icon { display: inline-block; width: 30px; height: 30px; background-image: url(../images/_sprite.png); background-position: 93.665158371% 63.125%; background-repeat: no-repeat; background-size: 652.5% 500%; vertical-align: middle; } .book-detail--sd .book-detail-block__action__app-button__icon:after { display: block; padding-top: 100%; content: ""; } .book-detail--sd .book-detail-block__action__app-button__title { display: inline-block; height: 30px; padding-top: 10px; font-size: 14px; line-height: 14px; vertical-align: middle; } body.noposte.book-detail--sd .book-detail-block__action__reacts { width: 100%; } body.noposte.book-detail--sd .book-detail-block__action__app-button { display: none; } body.noposte.book-detail--sd .rotate_alert__message { width: 168px; margin-left: -84px; } body.noposte.book-detail--sd .rotate_alert__message__right { display: none; } .wow { visibility: hidden; } .wow.animated { animation-duration: 1.25s; } /* footer */ footer .page-footer { padding: 0; background-color: #757570; } footer .page-footer .footer-main { width: 100%; height: 80px; font-size: 14px; line-height: 80px; text-align: right; } @media only screen and (max-width : 600px) { footer .page-footer .footer-main { height: 62px; background-color: #2d343b; line-height: 62px; text-align: center; } } footer .page-footer .footer-main .row { margin-bottom: 0; } @media only screen and (max-width : 600px) { footer .page-footer .footer-main .row { margin-right: 0; margin-left: 0; } } footer .page-footer .footer-main .row col { font-size: 0; } footer .page-footer .footer-main a { display: inline-block; margin-right: 42px; color: #fff; font-size: 14px; } footer .page-footer .footer-main a:last-child { margin-right: 0; } footer .page-footer .footer-main i[class^=xiconbasic-] { font-size: 14px; } footer .page-footer .footer-copyright { width: 100%; height: 25px; min-height: 0; padding: 0; background-color: #32352f; font-size: 11px; line-height: 25px; text-align: center; } @media only screen and (max-width : 600px) { footer .page-footer .footer-copyright { height: auto; min-height: 33px; padding: 8px 16px; background-color: #2d343b; line-height: normal; } } footer .page-footer .footer-copyright .container { width: 100%; } footer .page-footer .footer-copyright a { color: #9b9b9b !important; } footer .footer-inner { width: 1168px; margin: 0 auto; } @media only screen and (max-width : 600px) { footer .footer-inner { width: 100%; } } /* トップに戻る */ .gototop { display: none; z-index: 1000; position: fixed; right: 14px; bottom: 82px; animation: show-general .5s ease-in-out 0s; opacity: 0; } @media only screen and (max-width : 600px) { .gototop { bottom: 60px; } } .gototop.fadein { display: inline-block; opacity: 1; } .gototop.fadein:hover .gototop__tip { opacity: .65; } .gototop.fadein .gototop__tip a { cursor: pointer; } .gototop.fadeout { animation: hide-gototop .5s ease-in-out 0s; pointer-events: none; } .gototop__tip { display: inline-block; height: 54px; overflow: hidden; border-radius: 27px; box-shadow: 0 2px 9px 0 rgba(255, 255, 255, .9), 0 2px 9px 0 rgba(0, 0, 0, .9); font-size: 0; transition: width .3s ease-in-out; will-change: width; } @media only screen and (max-width : 600px) { .gototop__tip { height: 32px; } } .gototop__tip a { display: inline-block; width: 54px; height: 54px; padding: 15px 0 0; background-color: rgba(45, 52, 59, .75); color: #fff; text-align: center; cursor: default; } @media only screen and (max-width : 600px) { .gototop__tip a { width: 32px; height: 32px; padding: 8px 0 0; } } .gototop__tip i { margin-right: 0; transform: rotate(90deg); font-size: 24px; vertical-align: baseline; } .gototop__tip i:before { display: inline-block; width: 24px; height: 24px; } @media only screen and (max-width : 600px) { .gototop__tip i { font-size: 16px; } .gototop__tip i:before { width: 16px; height: 16px; } } body.book-detail.book-detail--pc .gotocomment_input { display: none; } body.nav-beforelogin .gotocomment_input { display: none; } body:not(.book-detail) .gotocomment_input { display: none; } @keyframes show-general { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hide-gototop { 0% { display: inline-block; opacity: 1; } 99% { opacity: 0; } 100% { display: none; opacity: 0; } } /* tooltip */ .material-tooltip { text-align: left; } .material-tooltip.material-tooltip--lower { z-index: 996; } .material-tooltip.width-400 { max-width: 400px; } .material-tooltip.width-300 { max-width: 300px; } .material-tooltip.width-200 { max-width: 200px; } .material-tooltip .backdrop { background-color: rgba(50, 50, 50, .85); } /* モーダル */ body.stay-modal-overlay { overflow: hidden; } body.stay-modal-overlay .modal-overlay { display: block !important; z-index: 1002 !important; opacity: .5; } .modal.modal-alreadyloggedin, .modal.modal-confirm { max-width: 450px; } @media only screen and (max-width : 992px) { .modal.modal-alreadyloggedin, .modal.modal-confirm { width: 90%; max-width: none; } } .modal.modal-alreadyloggedin .modal-content h5, .modal.modal-confirm .modal-content h5 { margin-top: 0; } .modal .modal-content { position: relative; } .modal .modal-content .modal-closer { position: absolute; top: 20px; right: 20px; font-size: 0; } .modal .modal-content .modal-closer__link { color: #ccc; transition: color .3s ease; } .modal .modal-content .modal-closer__link:hover { color: #7f7f7f; } .modal .modal-content .modal-closer__link [class^=xiconbasic-] { font-size: 28px; } .modal .modal-content p:last-child { margin-bottom: 0; } .modal .modal-footer { height: 68px; padding: 10px 16px; } .modal-login, .modal-message { width: 576px; border-radius: 0; } .modal-login .modal-content, .modal-message .modal-content { padding: 30px 16px 0; } .modal-login .modal-header, .modal-message .modal-header { margin-bottom: 32px; } .modal-login .modal-header h4, .modal-message .modal-header h4 { margin-bottom: 0; } .modal-login .modal-logo, .modal-message .modal-logo { display: inline-block; position: relative; width: 110px; height: 30px; background-image: url("../images/logo_dialog.png"); background-size: cover; vertical-align: middle; } .modal-login .modal-logo:after, .modal-message .modal-logo:after { display: inline-block; width: 2px; height: 26px; margin: 2px 0 2px 122px; background-color: #dedede; vertical-align: top; content: ""; } .modal-login .modal-logo + .modal-title, .modal-message .modal-logo + .modal-title { margin-left: 14px; font-size: 16px; line-height: 16px; } .modal-login .modal-title, .modal-message .modal-title { display: inline-block; color: #666; font-size: 20px; line-height: 20px; vertical-align: middle; } .modal-login .modal-closer, .modal-message .modal-closer { color: #9b9b9b; font-size: 16px; cursor: pointer; } .modal-login .modal-closer .material-icons, .modal-message .modal-closer .material-icons { font-size: 16px; } .modal-login .modal-footer, .modal-message .modal-footer { border-top-width: 0 !important; border-radius: 0; } .modal-login .modal-footer.center-align .btn-flat, .modal-message .modal-footer.center-align .btn-flat { float: none; font-size: 14px; line-height: 40px; } .modal-login .modal-footer.center-align .btn-flat.btn-main, .modal-message .modal-footer.center-align .btn-flat.btn-main { width: 264px; } .modal-message.modal-message--large { width: 55%; } .modal-message .modal-header { margin-bottom: 16px; } .modal-message .modal-content { padding-top: 12px; } .modal-message .modal-footer { margin-top: 20px; text-align: right; } .modal-message .modal-footer .btn-flat { min-width: 120px; margin-right: 10px; float: none; text-align: center; } .modal-message .modal-footer .btn-flat:last-child { margin-right: 0; } .modal-overlay--transparent { background-color: transparent !important; } .modal-overlay--dummy { z-index: 1001; } .modal-abo-general .modal-content { padding: 0; } .modal-abo-general .modal-header { border-bottom: 1px solid #d8d8d8; } .modal-abo-general .modal-header h4 { margin: 0; padding: 25px 11px 15px 22px; color: #666; font-size: 18px; line-height: 18px; } .modal-abo-general .modal-header h4 .modal-closer { margin-top: -4px; color: #9b9b9b; font-size: 16px; cursor: pointer; } .modal-abo-general .modal-body { padding: 40px 20px; } .modal-abo-general .modal-footer { width: 100%; height: 56px; padding: 12px 35px; border-top: none !important; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-color: #576776; text-align: right; } .modal-abo-general .modal-footer .btn, .modal-abo-general .modal-footer .btn-large { display: inline-block; min-width: 90px; height: 32px; margin: 0 10px 0 0; padding: 0; float: none; box-shadow: none; font-size: 14px; line-height: 30px; text-align: center; } .modal-abo-general .modal-footer .btn:hover, .modal-abo-general .modal-footer .btn-large:hover { box-shadow: none; } .modal-abo-general .modal-footer .btn:last-child, .modal-abo-general .modal-footer .btn-large:last-child { margin-right: 0; } .modal .modal-body__confirmitems { margin-top: 16px; padding: 16px; border: 1px solid #d5d5d5; border-radius: 2px; } .modal .modal-body__confirmitems dl.modal-body__confirmitems__list { margin-bottom: 8px; font-size: 0; } .modal .modal-body__confirmitems dl.modal-body__confirmitems__list:last-child { margin-bottom: 0; } .modal .modal-body__confirmitems dl.modal-body__confirmitems__list > dt, .modal .modal-body__confirmitems dl.modal-body__confirmitems__list > dd { display: inline-block; font-size: 14px; vertical-align: top; } .modal .modal-body__confirmitems dl.modal-body__confirmitems__list dt { width: 200px; font-weight: bold; } .modal .modal-body__confirmitems dl.modal-body__confirmitems__list dd { width: calc(100% - 200px); margin-left: 0; } .group-select__wrap { width: 100%; height: 250px; overflow-x: hidden; overflow-y: auto; border: 1px solid #dcdcdc; border-radius: 2px; } .group-select__wrap__inner { width: 100%; height: 100%; } .group-select__wrap .group-select__row { padding: 2px 0 2px 10px; } .group-select__wrap .group-select__row label { min-width: 150px; } /* フォーム */ .form-nomaterialize .form-row { margin-bottom: 32px; } .form-nomaterialize .form-row:last-child { margin-bottom: 0; } .form-nomaterialize .form-row.col { margin-bottom: 0; } .form-nomaterialize label { color: #666; } .form-nomaterialize label.form-label { display: inline-block; width: 100%; margin-top: 8px; } .form-nomaterialize label.form-label .label-chip { display: inline-block; width: 34px; margin-right: 8px; padding: 4px 5px; border-radius: 2px; background-color: #fa7370; color: #fff; font-size: 11px; line-height: 11px; text-align: center; vertical-align: middle; } .form-nomaterialize label.form-label .label-chip--notrequired { background-color: #ababab; } .form-nomaterialize label.form-label .label-chip--nochip { background-color: transparent; color: transparent; } .form-nomaterialize label.form-label .label-text { display: inline-block; color: #666; font-size: 14px; line-height: 14px; vertical-align: middle; } .form-nomaterialize label.label-text-nochip { font-size: 14px; } .form-nomaterialize input[type=text], .form-nomaterialize input[type=password], .form-nomaterialize input[type=date] { height: 35px; margin-bottom: 0; padding: 6px 10px; border: 1px solid #dcdcdc; border-width: 1px !important; border-radius: 2px; background-color: #fff; font-size: 14px; line-height: normal; transition: all .3s ease; } .form-nomaterialize input[type=text]:placeholder-shown, .form-nomaterialize input[type=password]:placeholder-shown, .form-nomaterialize input[type=date]:placeholder-shown { color: #ababab; font-size: 14px; line-height: normal; } .form-nomaterialize input[type=text]::-webkit-input-placeholder, .form-nomaterialize input[type=password]::-webkit-input-placeholder, .form-nomaterialize input[type=date]::-webkit-input-placeholder { color: #ababab; font-size: 14px; line-height: normal; } .form-nomaterialize input[type=text]::-moz-placeholder, .form-nomaterialize input[type=password]::-moz-placeholder, .form-nomaterialize input[type=date]::-moz-placeholder { color: #ababab; font-size: 14px; line-height: normal; } .form-nomaterialize input[type=text]:-ms-input-placeholder, .form-nomaterialize input[type=password]:-ms-input-placeholder, .form-nomaterialize input[type=date]:-ms-input-placeholder { color: #ababab; font-size: 14px; line-height: normal; } .form-nomaterialize input[type=text]:focus, .form-nomaterialize input[type=password]:focus, .form-nomaterialize input[type=date]:focus { border-color: #f59942; box-shadow: none !important; } .form-nomaterialize input[type=text].read-only:-moz-read-only, .form-nomaterialize input[type=password].read-only:-moz-read-only, .form-nomaterialize input[type=date].read-only:-moz-read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .form-nomaterialize input[type=text].read-only:read-only, .form-nomaterialize input[type=password].read-only:read-only, .form-nomaterialize input[type=date].read-only:read-only { border-color: #ababab; background-color: #dcdcdc; color: #ababab; } .form-nomaterialize select { height: 35px; } .form-nomaterialize textarea { padding: 6px 10px; border: 1px solid #dcdcdc; border-radius: 2px; outline: none; resize: none !important; transition: border-color .5s ease; } .form-nomaterialize textarea:focus { border-color: #f59942; box-shadow: none !important; } .modal-lead { padding: 0 20px; color: #666; font-size: 16px; line-height: 26px; } .follow-text, .modal-follow { margin-top: 5px; color: #9b9b9b; font-size: 11px; line-height: 16px; } .follow-text.after-checkradio, .modal-follow.after-checkradio { margin-top: 0; padding-left: 34px; } .category_block_after-checkradio, .more-padding_after-checkradio { padding-left: 34px; } .modal-follow { margin-top: 36px; padding: 0 64px; } .help-text { display: none; margin-top: 5px; color: #9b9b9b; font-size: 11px; line-height: 16px; } .form-row.has-error .label-text, .form-row.has-error .label-text-nochip, .form-row.has-error .label-node, .form-wrap.has-error .label-text, .form-wrap.has-error .label-text-nochip, .form-wrap.has-error .label-node { color: #d16e6c !important; } .form-row.has-error input[type=text], .form-row.has-error input[type=password], .form-row.has-error textarea, .form-wrap.has-error input[type=text], .form-wrap.has-error input[type=password], .form-wrap.has-error textarea { border-color: #f09784; background-color: #ffc !important; color: #d68273; } .form-row.has-error input[type=text]:disabled, .form-row.has-error input[type=password]:disabled, .form-row.has-error textarea:disabled, .form-wrap.has-error input[type=text]:disabled, .form-wrap.has-error input[type=password]:disabled, .form-wrap.has-error textarea:disabled { border-color: #d5d5d5 !important; background-color: #f5f5f5 !important; color: #939192 !important; cursor: not-allowed; } .form-row.has-error .help-text, .form-wrap.has-error .help-text { display: block; color: #d16e6c; } .form-row.has-error .follow-text, .form-wrap.has-error .follow-text { color: #d16e6c; } .password-reminder-link { margin-top: 32px; margin-bottom: 22px; } .input-max { width: 100%; } .form-lead { margin: 0 0 30px; } #modal-login { height: 340px; } #modal-passwordreminder { height: 330px; } #modal-register { height: 340px; } #modal-registerfinished { height: 440px; } /* ActiBooks */ body.actibooks { color: #4b4b4b; } body.actibooks.book-detail--pc header.navbar-fixed nav { position: relative; } body.actibooks.nav-afterlogin header.navbar-fixed, body.actibooks.nav-beforelogin header.navbar-fixed { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header.navbar-fixed, body.actibooks.nav-beforelogin header.navbar-fixed { width: 100%; height: 44px; } } body.actibooks.nav-afterlogin header nav, body.actibooks.nav-beforelogin header nav { height: 56px; background-color: #2c343b; line-height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav, body.actibooks.nav-beforelogin header nav { width: 100%; height: 44px; line-height: 44px; } } body.actibooks.nav-afterlogin header nav i, body.actibooks.nav-beforelogin header nav i { height: 56px; line-height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav i, body.actibooks.nav-beforelogin header nav i { height: 44px; line-height: 44px; } } body.actibooks.nav-afterlogin header nav .sd-nav-icon, body.actibooks.nav-beforelogin header nav .sd-nav-icon { color: #fff; } body.actibooks.nav-afterlogin header nav .sd-nav-icon.sd-nav-icon--active, body.actibooks.nav-beforelogin header nav .sd-nav-icon.sd-nav-icon--active { color: #88b04b; } body.actibooks.nav-afterlogin header nav .brand-logo, body.actibooks.nav-beforelogin header nav .brand-logo { margin-top: 10px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .brand-logo, body.actibooks.nav-beforelogin header nav .brand-logo { position: absolute; margin-top: 6px; margin-left: 0; } } body.actibooks.nav-afterlogin header nav .nav-wrapper, body.actibooks.nav-beforelogin header nav .nav-wrapper { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-wrapper, body.actibooks.nav-beforelogin header nav .nav-wrapper { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-wrapper .nav-upper, body.actibooks.nav-beforelogin header nav .nav-wrapper .nav-upper { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-wrapper .nav-upper, body.actibooks.nav-beforelogin header nav .nav-wrapper .nav-upper { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-inner, body.actibooks.nav-beforelogin header nav .nav-inner { width: 1168px; height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-inner, body.actibooks.nav-beforelogin header nav .nav-inner { width: 100%; height: 44px; } } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-inner a, body.actibooks.nav-beforelogin header nav .nav-inner a { height: 44px; } } body.actibooks.nav-afterlogin header nav #nav-pc, body.actibooks.nav-beforelogin header nav #nav-pc { background-color: transparent; } body.actibooks.nav-afterlogin header nav #nav-pc_search > li, body.actibooks.nav-beforelogin header nav #nav-pc_search > li { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav #nav-pc_search > li, body.actibooks.nav-beforelogin header nav #nav-pc_search > li { height: 44px; } } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 272px; height: 32px; margin: 0; padding: 0 46px 0 16px; border: none !important; border-radius: 16px; background-color: transparent; box-shadow: none !important; color: #4b4b4b; font-size: 13px; line-height: 32px; transition: width .3s ease-in-out; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks:placeholder-shown, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks:placeholder-shown { color: #888; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks::-webkit-input-placeholder, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks::-webkit-input-placeholder { color: #888; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks:-moz-placeholder, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks:-moz-placeholder { color: #888; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks::-moz-placeholder, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks::-moz-placeholder { color: #888; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks:-ms-input-placeholder, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks:-ms-input-placeholder { color: #888; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks:focus, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks:focus { border: none !important; box-shadow: none !important; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks__wrap, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks__wrap { position: relative; width: 274px; height: 34px; margin: 11px 26px 0; padding: 1px; border-radius: 17px; background-color: #fff; line-height: 0; transition: width .3s ease-in-out; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks__wrap.focused, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks__wrap.focused { width: 619px; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks__wrap.focused .item-searchinput-actibooks, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks__wrap.focused .item-searchinput-actibooks { width: 617px; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks__wrap .searchicon-actibooks, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks__wrap .searchicon-actibooks { display: inline-block; position: absolute; top: 9px; right: 17px; width: 14px; height: 14px; color: #2c343b; font-size: 14px; line-height: 14px; cursor: pointer; transition: color .3s ease-in-out; } body.actibooks.nav-afterlogin header nav .item-searchinput-actibooks__wrap .searchicon-actibooks i, body.actibooks.nav-beforelogin header nav .item-searchinput-actibooks__wrap .searchicon-actibooks i { height: 14px; line-height: 14px; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside.nav-pc_search, body.actibooks.nav-beforelogin header nav .nav-pc-rightside.nav-pc_search { width: 671px; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside i[class^=xiconbasic-], body.actibooks.nav-beforelogin header nav .nav-pc-rightside i[class^=xiconbasic-] { color: #fff; transition: color .3s ease; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before { height: 42px; background-color: rgba(222, 222, 222, .75); } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon:not(.nav-pc-rightside__item--icon--noborder):before { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon { height: 56px; color: #fff; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon a.item-icon.item-icon--active i[class^=xiconbasic-], body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon a.item-icon.item-icon--active i[class^=xiconbasic-] { color: #88b04b; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags i, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--icon a.nav-pc-tags i { height: auto !important; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--login:before, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--login:before { height: 42px; background-color: rgba(222, 222, 222, .75); } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--login:after, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--login:after { position: absolute; top: 7px; right: 0; width: 1px; height: 42px; background-color: rgba(222, 222, 222, .75); content: ""; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--login a.btn-flat, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--login a.btn-flat { height: 32px; font-size: 13px; line-height: 32px; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--register, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--register { padding-left: 22px; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--register a.btn-flat, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--register a.btn-flat { height: 32px; border: none; border-radius: 16px; background-color: #ddd; color: #2c343b; font-size: 13px; line-height: 32px; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--register a.btn-flat:hover, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--register a.btn-flat:hover { opacity: .8; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo:before, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo:before { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo:before, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo:before { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active { color: #88b04b; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active i, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu.pc-usermenu--active i { color: #88b04b; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div { height: 56px; } @media only screen and (max-width : 600px) { body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__wrap > div { height: 44px; } } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img { padding: 10px 0; } body.actibooks.nav-afterlogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img img, body.actibooks.nav-beforelogin header nav .nav-pc-rightside__item--userinfo .pc-usermenu__img img { width: 36px; height: 36px; border: 1px solid #54d3d4; } @media only screen and (min-width : 601px) { body.actibooks.nav-afterlogin header nav, body.actibooks.nav-afterlogin header nav .nav-wrapper i, body.actibooks.nav-afterlogin header nav a.button-collapse, body.actibooks.nav-afterlogin header nav a.button-collapse i, body.actibooks.nav-beforelogin header nav, body.actibooks.nav-beforelogin header nav .nav-wrapper i, body.actibooks.nav-beforelogin header nav a.button-collapse, body.actibooks.nav-beforelogin header nav a.button-collapse i { height: 56px; line-height: 56px; } } body.actibooks.nav-afterlogin .header-mainvisual__navigation, body.actibooks.nav-beforelogin .header-mainvisual__navigation { z-index: 3; height: 36px; } body.actibooks.nav-afterlogin .header-mainvisual__navigation .chevron-alike, body.actibooks.nav-beforelogin .header-mainvisual__navigation .chevron-alike { margin-top: 11px; } body.actibooks .main-inner { width: 1168px; margin: 0 auto; } @media only screen and (max-width : 600px) { body.actibooks .main-inner { width: 100%; } } body.actibooks .alert-block, body.actibooks .mypage-block, body.actibooks .loginsignup-block { margin-top: 36px; } @media only screen and (max-width : 600px) { body.actibooks .alert-block, body.actibooks .mypage-block, body.actibooks .loginsignup-block { margin-top: 20px; } } body.actibooks .navi-button-block { width: 100%; height: 144px; padding: 50px 0 50px; font-size: 0; text-align: center; } body.actibooks .navi-button-block .navi-button-wrap { display: inline-block; margin-right: 32px; } body.actibooks .navi-button-block .navi-button-wrap:last-child { margin-right: 0; } body.actibooks .navi-button-block .navi-button-wrap:hover a.btn, body.actibooks .navi-button-block .navi-button-wrap:hover a.btn-large { top: -3px; background-color: rgba(255, 255, 255, .5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); } body.actibooks .navi-button-block a.btn, body.actibooks .navi-button-block a.btn-large { display: inline-block; position: relative; width: 250px; height: 44px; padding: 0; border: 1px solid #828282; border-radius: 22px; background-color: rgba(255, 255, 255, 0); box-shadow: none; color: #4b4b4b; font-size: 13px; line-height: 42px; text-align: center; transition: all .1s linear; } body.actibooks .navi-button-block a.btn:last-child, body.actibooks .navi-button-block a.btn-large:last-child { margin-right: 0; } body.actibooks .navi-button-block a.btn:active, body.actibooks .navi-button-block a.btn-large:active { top: -3px; box-shadow: none; } body.actibooks .navi-button-block a.btn i, body.actibooks .navi-button-block a.btn-large i { font-size: 15px; vertical-align: middle; } body.actibooks .navi-button-block a.btn i.icon-teal, body.actibooks .navi-button-block a.btn-large i.icon-teal { color: #35acab; } body.actibooks .navi-button-block a.btn i.icon-orange, body.actibooks .navi-button-block a.btn-large i.icon-orange { color: #f5a623; font-size: 17px; vertical-align: -2px; } body.actibooks .navi-button-block a.btn i.icon-lightblue, body.actibooks .navi-button-block a.btn-large i.icon-lightblue { color: #6bbfec; } body.actibooks .content-block { margin-bottom: 85px; } body.actibooks .content-block.content-block--life .content-block__title { border-color: #ec9b7e; } body.actibooks .content-block.content-block--life .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--life .content-block__body__category__title { color: #e5876b; } body.actibooks .content-block.content-block--life .content-block__body__category__title:before { color: #e5876b; } body.actibooks .content-block.content-block--comics .content-block__title { border-color: #54d3d4; } body.actibooks .content-block.content-block--comics .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -155px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--comics .content-block__body__category__title { color: #49b2b0; } body.actibooks .content-block.content-block--comics .content-block__body__category__title:before { color: #48cbca; } body.actibooks .content-block.content-block--magazine .content-block__title { border-color: #88b04b; } body.actibooks .content-block.content-block--magazine .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -130px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--magazine .content-block__body__category__title { color: #76a43a; } body.actibooks .content-block.content-block--magazine .content-block__body__category__title:before { color: #76a43a; } body.actibooks .content-block.content-block--literature .content-block__title { border-color: #967fb7; } body.actibooks .content-block.content-block--literature .content-block__title .content-block__title__link:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -205px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--literature .content-block__body__category__title { color: #967fb7; } body.actibooks .content-block.content-block--literature .content-block__body__category__title:before { color: #967fb7; } body.actibooks .content-block.content-block--business .content-block__title { border-color: #679fe4; } body.actibooks .content-block.content-block--business .content-block__title .content-block__title__link:before { width: 24px; height: 18px; background-image: url(../images/_sprite.png); background-position: -180px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--business .content-block__body__category__title { color: #558bde; } body.actibooks .content-block.content-block--business .content-block__body__category__title:before { color: #5a8cdb; } body.actibooks .content-block.content-block--others .content-block__title { border-color: #9eafd3; } body.actibooks .content-block.content-block--others .content-block__title .content-block__title__link:before { width: 24px; height: 17px; background-image: url(../images/_sprite.png); background-position: -230px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block.content-block--others .content-block__body__category__title { color: #9eafd3; } body.actibooks .content-block.content-block--others .content-block__body__category__title:before { color: #9eafd3; } body.actibooks .content-block.content-block--ranking .content-block__title { border-color: #f6a623; } body.actibooks .content-block.content-block--ranking .content-block__title .content-block__title__link:before { margin: -11px 5px 14px 0; background-image: none; color: #f6a623; font-family: "xiconbasic"; font-size: 26px; content: ""; } body.actibooks .content-block.content-block--company .content-block__title, body.actibooks .content-block.content-block--tag .content-block__title { border-color: #888; } body.actibooks .content-block.content-block--company .content-block__title .content-block__title__link:before, body.actibooks .content-block.content-block--tag .content-block__title .content-block__title__link:before { margin: -11px 4px 2px 0; background-image: none; color: #4b4b4b; } body.actibooks .content-block.content-block--company .content-block__title:before { font-family: "FontAwesome"; font-size: 20px; content: ""; } body.actibooks .content-block.content-block--tag .content-block__title .content-block__title__link:before { font-family: "xiconbasic"; font-size: 24px; vertical-align: -3px; content: ""; } body.actibooks .content-block[class*=content-block--related] .content-block__title .content-block__title__link:before { width: 0; height: 0; margin: 0; background-image: none; } body.actibooks .content-block.content-block--related_life .content-block__title { border-color: #ec9b7e; } body.actibooks .content-block.content-block--related_comics .content-block__title { border-color: #54d3d4; } body.actibooks .content-block.content-block--related_magazine .content-block__title { border-color: #88b04b; } body.actibooks .content-block.content-block--related_literature .content-block__title { border-color: #967fb7; } body.actibooks .content-block.content-block--related_business .content-block__title { border-color: #679fe4; } body.actibooks .content-block.content-block--related_others .content-block__title { border-color: #9eafd3; } body.actibooks .content-block__title { width: 100%; height: 32px; margin-bottom: 30px; border-bottom: 1px solid #aaa; font-size: 18px; font-weight: bold; } body.actibooks .content-block__title:before { display: inline-block; width: 24px; height: 18px; margin: 0 5px 4px 0; background-image: url(../images/_sprite.png); background-position: -105px -154px; background-repeat: no-repeat; background-size: 261px 200px; vertical-align: middle; content: ""; } body.actibooks .content-block__title .category_more { margin-top: 3px; color: #666; font-size: 11px; } body.actibooks .content-block__title .category_more:hover { text-decoration: underline; } body.actibooks .content-block__body { margin: 0; padding: 0; font-size: 0; } body.actibooks .content-block__body__category { display: inline-block; width: 360px; height: 255px; margin: 52px 44px 0 0; padding: 0 4px; overflow-y: hidden; vertical-align: top; } body.actibooks .content-block__body__category:nth-child(-n+3) { margin-top: 0; } body.actibooks .content-block__body__category:nth-child(3n) { margin-right: 0; } body.actibooks .content-block__body__category__title { font-size: 14px; } body.actibooks .content-block__body__category__title:before { display: inline-block; width: 13px; height: 15px; margin: 0 5px 5px 0; font-family: "FontAwesome"; font-size: 13px; vertical-align: middle; content: ""; } body.actibooks .content-block__body__category__title .category_more { margin-top: 3px; color: #666; font-size: 11px; } body.actibooks .content-block__body__category__title .category_more:hover { text-decoration: underline; } body.actibooks .content-block__body__category__body { margin-top: 28px; font-size: 0; } body.actibooks .content-block__body .content-item, body.actibooks .content-block__body .ranking-item, body.actibooks .content-block__body .related-item { display: inline-block; width: 104px; height: 206px; margin-right: 20px; vertical-align: top; } body.actibooks .content-block__body .content-item:last-child, body.actibooks .content-block__body .ranking-item:last-child, body.actibooks .content-block__body .related-item:last-child { margin-right: 0; } body.actibooks .content-block__body .content-item__link, body.actibooks .content-block__body .ranking-item__link, body.actibooks .content-block__body .related-item__link { display: block; width: 100%; height: 147px; color: #4b4b4b; transition: opacity .3s ease; } body.actibooks .content-block__body .content-item__link:hover, body.actibooks .content-block__body .ranking-item__link:hover, body.actibooks .content-block__body .related-item__link:hover { opacity: .65; } body.actibooks .content-block__body .content-item__image, body.actibooks .content-block__body .ranking-item__image, body.actibooks .content-block__body .related-item__image { width: 104px; height: 147px; background-position: top left; background-size: cover; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .45); } body.actibooks .content-block__body .content-item__title, body.actibooks .content-block__body .ranking-item__title, body.actibooks .content-block__body .related-item__title { margin-top: 14px; font-size: 12px; line-height: 15px; } body.actibooks .content-block__body .ranking-item, body.actibooks .content-block__body .related-item { margin-right: 29px; } body.actibooks .content-block__body .ranking-item[class*=ranking-item--] .ranking-item__image { position: relative; } body.actibooks .content-block__body .ranking-item[class*=ranking-item--] .ranking-item__image:before { position: absolute; content: ""; } body.actibooks .content-block__body .ranking-item.ranking-item--1st .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: 0px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block__body .ranking-item.ranking-item--2nd .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: -70px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .content-block__body .ranking-item.ranking-item--3rd .ranking-item__image:before { width: 34px; height: 46px; background-image: url(../images/_sprite.png); background-position: -35px -154px; background-repeat: no-repeat; background-size: 261px 200px; } body.actibooks .material-tooltip { color: #fff; } body.actibooks .material-tooltip .backdrop { background-color: rgba(100, 100, 100, .85); } body.actibooks footer .page-footer .footer-main col { font-size: 0; } body.actibooks footer .page-footer .footer-main a { display: inline-block; margin-right: 42px; font-size: 14px; } body.actibooks footer .page-footer .footer-main a:last-child { margin-right: 0; } @media only screen and (max-width : 600px) { body.actibooks footer .page-footer .footer-main { height: auto; padding: 6px 0 6px 22px; line-height: 35px; text-align: left; } body.actibooks footer .page-footer .footer-main a { margin-right: 30px; } } body.actibooks footer .footer-inner { width: 1168px; } @media only screen and (max-width : 600px) { body.actibooks footer .footer-inner { width: 100%; } } body.actibooks .actibooks-gototop { display: none; z-index: 1000; position: fixed; right: 14px; bottom: 28px; animation: show-general .5s ease-in-out 0s; opacity: 0; } body.actibooks .actibooks-gototop.fadein { display: inline-block; opacity: 1; } body.actibooks .actibooks-gototop.fadein:hover { opacity: .65; } body.actibooks .actibooks-gototop.fadein .gototop__tip a { cursor: pointer; } body.actibooks .actibooks-gototop.fadeout { animation: hide-gototop .5s ease-in-out 0s; pointer-events: none; } body.actibooks .gototop__tip { display: inline-block; width: 54px; height: 100%; border-radius: 0; background-color: transparent; } @media only screen and (max-width : 600px) { body.actibooks .gototop__tip { width: 32px; } } body.actibooks .gototop__tip a { display: inline-block; width: 54px; height: 54px; border-radius: 50%; background-color: rgba(45, 52, 59, .75); box-shadow: 0 2px 9px 0 rgba(255, 255, 255, .9), 0 2px 9px 0 rgba(0, 0, 0, .9); color: #fff; line-height: 66px; text-align: center; cursor: default; } @media only screen and (max-width : 600px) { body.actibooks .gototop__tip a { width: 32px; height: 32px; line-height: 38px; } } body.actibooks .gototop__tip i { margin-right: 0; transform: rotate(90deg); font-size: 24px; vertical-align: baseline; } body.actibooks .gototop__tip i:before { display: inline-block; width: 24px; height: 24px; } @media only screen and (max-width : 600px) { body.actibooks .gototop__tip i { font-size: 16px; } body.actibooks .gototop__tip i:before { width: 16px; height: 16px; } } body.actibooks.mypage .main-inner, body.actibooks.http-error .main-inner, body.actibooks.login .main-inner { margin-bottom: 160px; } @media only screen and (max-width : 600px) { body.actibooks.mypage .main-inner, body.actibooks.http-error .main-inner, body.actibooks.login .main-inner { margin-bottom: 66px; } } body.actibooks.mypage .mypage-block__body { border: 1px solid rgba(151, 151, 151, .3); background-color: rgba(255, 255, 255, .8); } body.actibooks.mypage .mypage-block__body dl dt:before { background-color: #88b04b; } body.actibooks.mypage .mypage-block__footer { height: 62px; border: 1px solid rgba(151, 151, 151, .3); border-top: none; background-color: rgba(136, 176, 75, .15); } @media only screen and (max-width : 600px) { body.actibooks.mypage .mypage-block__footer { height: 77px; padding: 18px 14px; } } body.actibooks.mypage .mypage-block__footer__buttons { font-size: 0; } body.actibooks.mypage .mypage-block__footer a.btn, body.actibooks.mypage .mypage-block__footer a.btn-large { min-width: 130px; height: 40px; margin-right: 10px; border-radius: 20px; font-size: 13px; line-height: 40px; } body.actibooks.mypage .mypage-block__footer a.btn:last-child, body.actibooks.mypage .mypage-block__footer a.btn-large:last-child { margin-right: 0; } body.actibooks.mypage .mypage-block__footer a.btn:not(.btn-flat), body.actibooks.mypage .mypage-block__footer a.btn-large:not(.btn-flat) { border-color: #88b04b; background-color: #fff; color: #4b4b4b; } body.actibooks.mypage .mypage-block__footer a.btn:not(.btn-flat):hover, body.actibooks.mypage .mypage-block__footer a.btn-large:not(.btn-flat):hover { background-color: rgba(255, 255, 255, .5); } @media only screen and (max-width : 600px) { body.actibooks.mypage .mypage-block__footer a.btn, body.actibooks.mypage .mypage-block__footer a.btn-large { display: inline-block; width: calc((100% - 13px) / 2); min-width: 0; margin: 0 13px 0 0; border-radius: 4px; } } body.actibooks.mypage .mypage-block__footer a.btn-flat { margin-right: 0; border-radius: 2px; color: #4a4a4a; } @media only screen and (max-width : 600px) { body.actibooks.mypage .mypage-block__exfooter a.btn-flat { color: #4a4a4a; font-size: 15px; font-weight: bold; } } @media only screen and (max-width : 600px) { body.actibooks.login .main-inner { margin-top: 20px; } } /* SD 用トップページ 左右 100% リンク */ .navi-link-block { margin: 0; padding: 0; } .navi-link-block a { display: block; width: 100%; height: 58px; padding: 0 14px; border-bottom: 1px solid #979797; border-radius: 0; background-color: #fff; color: #4b4b4b; font-size: 14px; font-weight: bold; line-height: 58px; text-align: left; } .navi-link-block a:hover { background-color: #fff; box-shadow: none !important; } .navi-link-block a:focus { box-shadow: none !important; } .navi-link-block a.company i.fa.fa-flag { color: #48cbca; } .navi-link-block a.company:after { float: right; color: #48cbca; font-family: "FontAwesome"; font-weight: normal; content: ""; } .navi-link-block a i { font-size: 15px; font-weight: normal; vertical-align: middle; } /* SD 用セクションタイトル */ .section-title { margin-top: 29px; margin-bottom: 15px; padding-left: 14px; color: #4b4b4b; font-size: 13px; font-weight: bold; line-height: 13px; } .section-title:before { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; content: ""; } .section-title--ranking:before { width: 16px; height: 13px; color: #f6a623; font-family: "xiconbasic"; font-size: 16px; vertical-align: -2px; content: ""; } .section-title--category:before { width: 13px; height: 15px; color: #7ccbf0; font-family: "FontAwesome"; font-size: 13px; content: ""; } .top-category-list-block { padding-top: 5px; } .top-category-list-block .top-category-block { padding: 0 14px 48px; } .top-category-list-block .top-category-block__head { position: relative; height: 45px; color: #fff; font-size: 19px; letter-spacing: 2px; line-height: 45px; text-align: center; text-shadow: 0 0 3px rgba(0, 0, 0, .65); } .top-category-list-block .top-category-block__head:before { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: 50% 50%; background-repeat: none; background-size: cover; content: ""; } .top-category-list-block .top-category-block__head:after { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; opacity: .6; } .top-category-list-block .top-category-block__head__inner { z-index: 3; position: relative; } .top-category-list-block .top-category-block__head--life:before { background-image: url("../images/category_life_cover.jpg"); } .top-category-list-block .top-category-block__head--life:after { background-image: linear-gradient(left, #cca6a9, #d0ad89); background-image: -ms-linear-gradient(left, #cca6a9, #d0ad89); } .top-category-list-block .top-category-block__head--comics:before { background-image: url("../images/category_comics_cover.jpg"); } .top-category-list-block .top-category-block__head--comics:after { background-image: linear-gradient(left, #9cb3b4, #cff9fe); background-image: -ms-linear-gradient(left, #9cb3b4, #cff9fe); } .top-category-list-block .top-category-block__head--magazine:before { background-image: url("../images/category_magazine_cover.jpg"); } .top-category-list-block .top-category-block__head--magazine:after { background-image: linear-gradient(left, #899a68, #faffbc); background-image: -mslinear-gradient(left, #899a68, #faffbc); } .top-category-list-block .top-category-block__head--literature:before { background-image: url("../images/category_literature_cover.jpg"); } .top-category-list-block .top-category-block__head--literature:after { background-image: linear-gradient(left, #785d7d, #cdd1f9); background-image: -ms-linear-gradient(left, #785d7d, #cdd1f9); } .top-category-list-block .top-category-block__head--business:before { background-image: url("../images/category_business_cover.jpg"); } .top-category-list-block .top-category-block__head--business:after { background-image: linear-gradient(left, #9dbbe0, #d7cfda); background-image: -ms-linear-gradient(left, #9dbbe0, #d7cfda); } .top-category-list-block .top-category-block__head--others:before { background-image: url("../images/category_others_cover.jpg"); } .top-category-list-block .top-category-block__head--others:after { background-image: linear-gradient(left, #a4abbe, #d6e2e4); background-image: -ms-linear-gradient(left, #a4abbe, #d6e2e4); } .top-category-list-block .top-category-block__wrap { padding-top: 6px; } .top-category-list-block .top-category-block__body { padding-top: 15px; font-size: 0; } .top-category-list-block .top-category-block .top-category__item { display: inline-block; width: calc((100% - 17px) / 2); height: 36px; margin: 12px 17px 0 0; padding: 0; border: 1px solid #e2e2e2 !important; border-radius: 4px; background-color: #fff !important; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .14) !important; color: #4b4b4b; font-size: 12px; } .top-category-list-block .top-category-block .top-category__item:nth-child(-n+2) { margin-top: 0; } .top-category-list-block .top-category-block .top-category__item:nth-child(2n) { margin-right: 0; } /* actibooks 用ヘッダ */ .header-sections { position: relative; width: 100%; height: 102px; overflow: hidden; /* スライダーじゃない場合 */ } @media only screen and (max-width : 600px) { .header-sections { height: auto; min-height: 36px; } body.companycontentslist .header-sections { height: 50px; } } .header-sections.header-sections--slider { height: 277px; } @media only screen and (max-width : 600px) { .header-sections.header-sections--slider { height: auto; } .header-sections.header-sections--slider:before { display: block; padding: calc(30.5% + 30px) 0 0; content: ""; } } .header-sections.header-sections--large { width: 100%; padding: 30.5% 0 0; } .header-sections.header-sections--large a { display: inline-block; } .header-sections.header-sections--large a img { width: 100%; height: auto; } .header-sections__inner { width: 100%; height: 100%; } @media only screen and (max-width : 600px) { .header-sections__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } .header-sections .header-sections-bgwrap { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #fff; } .header-sections .header-sections-bgwrap:before { position: absolute; top: 0; left: 50%; width: 1480px; height: 102px; margin-left: -740px; background-image: url("../images/others_cover.jpg"); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ""; } @media only screen and (max-width : 600px) { .header-sections .header-sections-bgwrap:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin-left: 0; } } .header-sections .header-sections-bgwrap:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(left, #93a5cf, #58648a); background-image: -ms-linear-gradient(left, #93a5cf, #58648a); content: ""; opacity: .5; } body.categorylist--life .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_life_cover.jpg"); } body.categorylist--life .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #cca6a9, #d0ad89); background-image: -ms-linear-gradient(left, #cca6a9, #d0ad89); opacity: .6; } body.categorylist--comics .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_comics_cover.jpg"); } body.categorylist--comics .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #9cb3b4, #cff9fe); background-image: -ms-linear-gradient(left, #9cb3b4, #cff9fe); opacity: .6; } body.categorylist--magazine .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_magazine_cover.jpg"); } body.categorylist--magazine .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #899a68, #faffbc); background-image: -ms-linear-gradient(left, #899a68, #faffbc); opacity: .6; } body.categorylist--literature .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_literature_cover.jpg"); } body.categorylist--literature .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #785d7d, #cdd1f9); background-image: -ms-linear-gradient(left, #785d7d, #cdd1f9); opacity: .6; } body.categorylist--business .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_business_cover.jpg"); } body.categorylist--business .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #9dbbe0, #d7cfda); background-image: -ms-linear-gradient(left, #9dbbe0, #d7cfda); opacity: .6; } body.categorylist--others .header-sections .header-sections-bgwrap:before { background-image: url("../images/category_others_cover.jpg"); } body.categorylist--others .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #a4abbe, #d6e2e4); background-image: -ms-linear-gradient(left, #a4abbe, #d6e2e4); opacity: .6; } body.mypage .header-sections .header-sections-bgwrap:before { background-image: url("../images/mypage_cover.jpg"); } body.mypage .header-sections .header-sections-bgwrap:after { background-image: linear-gradient(left, #9fba79, #d4dcc9); background-image: -ms-linear-gradient(left, #9fba79, #d4dcc9); opacity: .5; } .header-sections .valign-wrapper { z-index: 2; position: relative; width: 100%; height: 100%; color: #fff; } .header-sections .valign-wrapper .valign { width: 100%; } .header-sections .valign-wrapper .valign h2 { max-width: 1118px; margin: 0 auto; font-size: 24px; letter-spacing: 3px; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); } @media only screen and (max-width : 600px) { .header-sections .valign-wrapper .valign h2 { max-width: calc(100% - 88px); padding: 10px 0; font-size: 15px; letter-spacing: 1px; text-shadow: 0 0 3px rgba(0, 0, 0, .8); } } .header-sections .valign-wrapper .valign h2 + h5 { margin: 0; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .header-sections .valign-wrapper .valign h2 + h5:not(.hide) { margin-top: 5px; } @media only screen and (max-width : 600px) { .header-sections .valign-wrapper .valign h2 + h5 { display: none; } } /* 企業一覧 */ /* アカサタナ順リンク */ .actibooks-company-navi-button-block { padding: 68px 0 18px; font-size: 0; text-align: center; } @media only screen and (max-width : 600px) { .actibooks-company-navi-button-block { padding: 24px 0 16px; } .actibooks-company-navi-button-block .br-sd + .navi-button-wrap { margin-left: 0; } } .actibooks-company-navi-button-block .navi-button-wrap { display: inline-block; margin-bottom: 18px; margin-left: 10px; } .actibooks-company-navi-button-block .navi-button-wrap:first-child { margin-left: 0; } .actibooks-company-navi-button-block .navi-button-wrap:hover a.btn, .actibooks-company-navi-button-block .navi-button-wrap:hover a.btn-large { top: -2px; background-color: #fff; box-shadow: 0 3px 3px 1px rgba(0, 0, 0, .12); } .actibooks-company-navi-button-block a { display: inline-block; width: 52px; height: 52px; padding: 0; border: 1px solid #e8e8e8; border-radius: 6px; background-color: #fff; box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .12); color: #4b4b4b; font-size: 20px; font-weight: bold; line-height: 52px; text-align: center; vertical-align: top; transition: all .1s linear; } .actibooks-company-navi-button-block a:active { top: 2px !important; box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .12); } @media only screen and (max-width : 600px) { .actibooks-company-navi-button-block a { box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .12); } .actibooks-company-navi-button-block a:hover, .actibooks-company-navi-button-block a:active { box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .12); } .actibooks-company-navi-button-block a:nth-child(5) { margin-right: 0; } .actibooks-company-navi-button-block a:nth-child(n+6) { margin-top: 18px; } } /* 企業一覧リスト */ .actibooks-company-list-block { width: 956px; margin: 0 auto; } @media only screen and (max-width : 600px) { .actibooks-company-list-block { width: 100%; margin: 0; } } .actibooks-company-list-block .actibooks-company-list-block__initial { padding-bottom: 60px; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial { padding-bottom: 48px; } } .actibooks-company-list-block .actibooks-company-list-block__initial__head { padding-bottom: 12px; border-bottom: 1px solid #d8d8d8; font-size: 20px; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial__head { padding-left: 14px; border-bottom: none; font-size: 15px; font-weight: bold; } } .actibooks-company-list-block .actibooks-company-list-block__initial__body { padding-top: 30px; font-size: 0; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial__body { padding-top: 0; } } .actibooks-company-list-block .actibooks-company-list-block__initial__body > div { display: inline-block; font-size: 14px; line-height: 16px; vertical-align: top; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial__body > div { display: block; line-height: 52px; vertical-align: baseline; vertical-align: initial; } } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item { width: 298px; height: 32px; margin: 8px 31px 0 0; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item:nth-child(-n+3) { margin-top: 0; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item:nth-child(3n) { margin-right: 0; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item { width: 100%; height: 53px; margin: 0; border-bottom: 1px solid #efefef; background-color: #fff; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item:last-child { height: 52px; border-bottom: none; } } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a { display: block; position: relative; width: 100%; height: 100%; padding: 0 35px 0 14px; font-size: 0; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a:after { display: inline-block; position: absolute; top: 50%; right: 14px; width: 10px; height: 14px; margin-top: -7px; color: #bdbdbd; font-family: "FontAwesome"; font-size: 14px; line-height: 14px; content: ""; } } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__name { color: #4b4b4b; font-size: 14px; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__name { display: inline-block; max-width: calc(100% - 55px); overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; } } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__number { display: inline-block; margin-left: 8px; color: #888; font-size: 12px; quotes: "(" ")"; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__number:before { content: open-quote; } .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__number:after { content: close-quote; } @media only screen and (max-width : 600px) { .actibooks-company-list-block .actibooks-company-list-block__initial .company-list__item a .company-list__item__number { vertical-align: top; } } /* コンテンツ一覧 */ .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large, .contents-list-block .contents-list__item a.linked-detail, .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-book-button, .contents-list-block .contents-list__item .contents-list__item__button .linked-book-button.btn-large, .contents-list-block .contents-list__item .contents-list__item__text__button__dummy { display: inline-block; width: 130px; height: 38px; padding: 0; border-radius: 19px; background-color: #88b04b; color: #fff; font-size: 13px; line-height: 38px; text-align: center; } .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button:hover, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large:hover, .contents-list-block .contents-list__item a.linked-detail:hover, .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-book-button:hover, .contents-list-block .contents-list__item .contents-list__item__button .linked-book-button.btn-large:hover, .contents-list-block .contents-list__item .contents-list__item__text__button__dummy:hover { background-color: rgba(136, 176, 75, .8); box-shadow: none; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large, .contents-list-block .contents-list__item a.linked-detail, .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-book-button, .contents-list-block .contents-list__item .contents-list__item__button .linked-book-button.btn-large, .contents-list-block .contents-list__item .contents-list__item__text__button__dummy { width: calc((100% - 28px) / 2); height: 34px; margin-right: 16px; border-radius: 4px; line-height: 34px; } .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button:last-child, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large:last-child, .contents-list-block .contents-list__item a.linked-detail:last-child, .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-book-button:last-child, .contents-list-block .contents-list__item .contents-list__item__button .linked-book-button.btn-large:last-child, .contents-list-block .contents-list__item .contents-list__item__text__button__dummy:last-child { margin-right: 0; } } .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large, .contents-list-block .contents-list__item a.linked-detail { border: 1px solid #88b04b; background-color: #fff; color: #4b4b4b; } .contents-list-block .contents-list__item .contents-list__item__button .btn.linked-detail-button:hover, .contents-list-block .contents-list__item .contents-list__item__button .linked-detail-button.btn-large:hover, .contents-list-block .contents-list__item a.linked-detail:hover { background-color: rgba(136, 176, 75, .3); } .contents-list-block { width: 100%; margin: 70px auto 170px; } @media only screen and (max-width : 600px) { .contents-list-block { width: 100%; margin: 28px 0 90px; padding: 0 18px; } } .contents-list-block--life .contents-list-block__head { border-color: #ec9b7e; } .contents-list-block--comics .contents-list-block__head { border-color: #54d3d4; } .contents-list-block--magazine .contents-list-block__head { border-color: #88b04b; } .contents-list-block--literature .contents-list-block__head { border-color: #967fb7; } .contents-list-block--business .contents-list-block__head { border-color: #679fe4; } .contents-list-block--others .contents-list-block__head { border-color: #9eafd3; } .contents-list-block--searchresult { margin-top: 28px; margin-bottom: 0; } @media only screen and (max-width : 600px) { .contents-list-block--searchresult { margin-top: 17px; padding: 0 14px; } } .contents-list-block--searchresult .contents-list-block__head { border-color: #c9c9c9; } @media only screen and (max-width : 600px) { .contents-list-block--searchresult .contents-list-block__head { border-color: #88b04b; } } .contents-list-block--searchresult .contents-list-block__body { padding-top: 26px; } @media only screen and (max-width : 600px) { .contents-list-block--searchresult .contents-list-block__body { padding-top: 10px; } } .contents-list-block--searchresult + .main-books__more-block { margin-bottom: 0; } .contents-list-block .categories { margin-bottom: 44px; font-size: 0; } .contents-list-block .categories:empty { display: none; margin-bottom: 0; } .contents-list-block .categories:blank { display: none; margin-bottom: 0; } .contents-list-block .categories:-moz-only-whitespace { display: none; margin-bottom: 0; } .contents-list-block .categories .category { display: inline-block; width: 178px; height: 89px; margin: 35px 20px 0 0; vertical-align: top; } .contents-list-block .categories .category:nth-child(6n) { margin-right: 0; } .contents-list-block .categories .category:nth-child(-n+6) { margin-top: 0; } .contents-list-block .categories .category:hover .category__tab:before { background-color: #83aac5; } .contents-list-block .categories .category:hover .category__body { background-color: #578cb2; } .contents-list-block .categories .category:hover .category__subs { border-top-color: #95b6ce; } .contents-list-block .categories .category__tab { display: inline-block; z-index: 1; position: relative; width: 48px; height: 10px; } .contents-list-block .categories .category__tab:before { position: absolute; top: 0; right: 0; bottom: -2px; left: 0; transform: scaleY(1.129) perspective(7px) rotateX(5deg); transform-origin: bottom left; border-radius: 3px 3px 0 0; background-color: #adc9dd; content: ""; transition: background-color .3s ease-in-out; } .contents-list-block .categories .category__body { z-index: 2; position: relative; width: 100%; height: 79px; border-radius: 0 3px 3px 3px; background-color: #7daac9; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); transition: background-color .3s ease-in-out; } .contents-list-block .categories .category__name { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 55px; padding: 0 8px; font-size: 14px; line-height: 20px; } .contents-list-block .categories .category__name__inner { color: transparent; } .contents-list-block .categories .category__name__inner.category__name__inner--ellipted { color: #fff; } .contents-list-block .categories .category__subs { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 24px; border-top: 1px solid #b7ccdb; transition: border-top-color .3s ease-in-out; } .contents-list-block .categories .category__subs > * { color: #fff; font-size: 14px; } .contents-list-block .categories .category__subs > *:before { display: inline-block; margin-right: 2px; color: #d1e1ec; font-family: "xiconbasic"; font-size: 16px; vertical-align: -1px; } .contents-list-block .categories .category__subs__category:before { content: ""; } .contents-list-block .categories .category__subs__contents { margin-left: 5px; } .contents-list-block .categories .category__subs__contents:before { content: ""; } .contents-list-block__head { padding-bottom: 10px; border-bottom: 1px solid #aaa; font-size: 18px; font-weight: bold; } @media only screen and (max-width : 600px) { .contents-list-block__head { padding-bottom: 6px; font-size: 13px; } } .contents-list-block__head__title { line-height: 32px; } .contents-list-block__body { padding-top: 42px; font-size: 0px; } @media only screen and (max-width : 600px) { .contents-list-block__body { padding-top: 0; } } .contents-list-block__body > div { display: inline-block; vertical-align: top; } .contents-list-block .contents-list__item { position: relative; width: 448px; height: 210px; margin: 52px 60px 0 0; } .contents-list-block .contents-list__item:nth-child(-n+2) { margin-top: 0; } .contents-list-block .contents-list__item:nth-child(2n) { margin-right: 0; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item { width: 100%; height: 190px; margin: 30px 0 0; } .contents-list-block .contents-list__item:nth-child(2) { margin-top: 30px; } } .contents-list-block .contents-list__item a.linked-book { display: block; z-index: 1; position: relative; width: 100%; height: 100%; color: #4b4b4b; } .contents-list-block .contents-list__item a.linked-book:hover:before { opacity: .1; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item a.linked-book { height: 156px; } .contents-list-block .contents-list__item a.linked-book:hover:before { display: none; } } .contents-list-block .contents-list__item a.linked-book:before { z-index: 0; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; border-radius: 5px; background-color: #000; content: ""; opacity: 0; transition: opacity .3s ease; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item a.linked-book:before { display: none; } } .contents-list-block .contents-list__item a.linked-book > div { display: inline-block; z-index: 1; position: relative; vertical-align: top; } .contents-list-block .contents-list__item a.linked-detail { display: inline-block; z-index: 2; position: absolute; right: 16px; bottom: 0; } .contents-list-block .contents-list__item .contents-list__item__image { width: 144px; height: 204px; margin: 6px 16px 0 0; background-position: top left; background-repeat: no-repeat; background-size: cover; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .19); } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__image { width: 99px; height: 140px; margin: 3px 10px 0 0; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .16); } } .contents-list-block .contents-list__item .contents-list__item__text { width: calc(100% - (144px + 16px)); height: 100%; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text { width: calc(100% - (99px + 10px)); } } .contents-list-block .contents-list__item .contents-list__item__text__title { width: 100%; height: 38px; margin-bottom: 18px; overflow: hidden; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__title { height: 40px; margin-bottom: 15px; } } .contents-list-block .contents-list__item .contents-list__item__text__title__body { width: 100%; font-size: 16px; font-weight: bold; letter-spacing: 1px; line-height: 19px; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__title__body { font-size: 13px; letter-spacing: .9px; line-height: 20px; } } .contents-list-block .contents-list__item .contents-list__item__text__company { width: 100%; height: 20px; margin-bottom: 17px; padding-right: 8px; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__company { height: 17px; margin-bottom: 22px; padding-right: 0; } } .contents-list-block .contents-list__item .contents-list__item__text__company__body { padding: 4px 6px 3px; overflow: hidden; border-radius: 4px; background-color: #e9e9e9; color: #666; font-size: 13px; letter-spacing: 1px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__company__body { font-size: 11px; line-height: 11px; } } .contents-list-block .contents-list__item .contents-list__item__text__category__item { margin-bottom: 10px; overflow: hidden; color: #888; font-size: 12px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__category__item { margin-bottom: 8px; font-size: 11px; line-height: 11px; } } .contents-list-block .contents-list__item .contents-list__item__text__category__item:before { display: inline-block; width: 13px; height: 12px; margin: 0 5px 0 0; color: rgba(163, 163, 163, .8); font-family: "FontAwesome"; font-size: 13px; content: ""; } @media only screen and (max-width : 600px) { .contents-list-block .contents-list__item .contents-list__item__text__category__item:before { width: 12px; height: 11px; margin: 0 2px 0 0; font-size: 12px; } } .contents-list-block .contents-list__item .contents-list__item__text__category__item:last-child { margin-bottom: 0; } .contents-list-block .contents-list__item .contents-list__item__text__button { position: relative; height: 61px; } .contents-list-block .contents-list__item .contents-list__item__text__button__dummy { position: absolute; bottom: 0; left: 0; } .contents-list-block .contents-list__item .contents-list__item__button { text-align: center; } .contents-list-block .search_result_item { display: block; color: #666; } .contents-list-block .search_result_item.search_result_item--pc { width: 100%; height: 228px; margin-bottom: 12px; padding: 24px 0; border: solid 1px #e8e8e8; border-radius: 3px; background-image: linear-gradient(to bottom, #fff, #fbfbfb); background-image: -ms-linear-gradient(to bottom, #fff, #fbfbfb); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15); transition: all .3s ease-in-out; } .contents-list-block .search_result_item.search_result_item--pc:hover { box-shadow: 0 5px 9px 0 rgba(0, 0, 0, .15); } .contents-list-block .search_result_item.search_result_item--pc:last-child { margin-bottom: 0; } .contents-list-block .search_result_item.search_result_item--pc > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image { display: inline-table; width: 186px; height: 100%; padding: 0 15px; border-right: 2px solid #e8e8e8; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__inner { display: table-cell; z-index: 1; position: relative; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__wrap { display: inline-block; z-index: 1; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__wrap.haspage { margin-top: 8px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__wrap .item__image__entity__dummy { width: 152px; height: 152px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__entity { box-sizing: content-box !important; width: auto; max-width: 152px; height: auto; max-height: 152px; border: solid 1px #b4b4b4; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__pages { margin: 6px 0 -8px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__pages > span { display: inline-block; color: #8b8b8b; font-size: 10px; line-height: 10px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__pages__slash { margin: 0 1px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__movieoverlay { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .4); } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__image__movieoverlay:after { display: inline-block; position: absolute; top: calc(50% - (50px / 2)); left: calc(50% - (40px / 2)); width: 40px; height: 50px; color: #fff; font-family: "FontAwesome"; font-size: 50px; line-height: normal; content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data { width: calc(100% - 186px); padding: 0 30px 0 22px; font-size: 14px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__title { overflow: hidden; font-size: 16px; font-weight: bold; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__title i.fa { margin-right: 5px; color: #ea9700; font-size: 18px; vertical-align: -1px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__values { margin-top: 4px; font-size: 0; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__values > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__lastupdate { margin-right: 16px; color: #898989; font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts { color: #898989; font-size: 0; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments > div, .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__likes > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments__icon, .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__likes__icon { position: relative; width: 11px; height: 11px; margin-right: 1px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments__icon:before, .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__likes__icon:before { display: inline-block; position: absolute; top: 0; left: 0; width: 11px; height: 11px; font-family: "xiconbasic"; font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments__number, .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__likes__number { font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments { margin-right: 8px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__comments__icon:before { content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__counts__likes__icon:before { content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__tags { margin-top: 10px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__tags__body { font-size: 11px; line-height: 14px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__tags__body .search_result_item__tag_item { display: inline-block; margin-right: 12px; color: #898989; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__tags__body .search_result_item__tag_item:before { font-family: "xiconbasic"; font-size: 16px; vertical-align: -3px; content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__tags__body .search_result_item__tag_item:last-child { margin-right: 0; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail { margin-top: 10px; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail__title { font-size: 12px; font-weight: bold; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail__title:before { display: inline-block; margin-right: 4px; font-family: "FontAwesome"; font-weight: normal; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail__title.search_result_item__data__detail__title--explain:before { content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail__title.search_result_item__data__detail__title--main:before { content: ""; } .contents-list-block .search_result_item.search_result_item--pc .search_result_item__data__detail__body { max-height: 54px; margin-top: 4px; overflow-y: hidden; font-size: 12px; line-height: 18px; } .contents-list-block .search_result_item.search_result_item--sd { margin-bottom: 10px; border: solid 1px #e8e8e8; border-radius: 3px; background-color: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15); } .contents-list-block .search_result_item.search_result_item--sd:last-child { margin-bottom: 0; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head { width: 100%; height: 157px; border-bottom: solid 1px #d1d1d1; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image { display: inline-table !important; width: 92px; height: 100%; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image .item__image__entity__dummy { width: 92px; height: 92px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__inner { display: table-cell; z-index: 1; position: relative; width: 100%; text-align: center; vertical-align: middle; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__wrap { display: inline-block; z-index: 1; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__wrap.haspage { margin-top: 7px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__entity { box-sizing: content-box !important; width: auto; max-width: 64px; height: auto; max-height: 91px; border: solid 1px #b4b4b4; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__pages { margin: 4px 0 -7px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__pages > span { display: inline-block; color: #8b8b8b; font-size: 10px; line-height: 10px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__pages__slash { margin: 0 1px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__movieoverlay { z-index: 2; position: absolute; top: 18px; right: 6px; bottom: 18px; left: 6px; background-color: rgba(0, 0, 0, .4); } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__image__movieoverlay:after { display: inline-block; position: absolute; top: calc(50% - (30px / 2)); left: calc(50% - (24px / 2)); width: 24px; height: 30px; color: #fff; font-family: "FontAwesome"; font-size: 30px; line-height: normal; content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data { width: calc(100% - 92px); max-height: 145px; padding: 14px 14px 0 0; overflow: hidden; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__title { max-height: 54px; overflow-y: hidden; font-size: 16px; font-weight: bold; line-height: 18px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__title i.fa { margin-right: 3px; color: #ea9700; font-size: 18px; vertical-align: -1px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__lastupdate { margin-top: 3px; color: #898989; font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__tags { margin-top: 6px; color: #7e7e7e; font-size: 11px; line-height: 14px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__tags .search_result_item__tag_item { display: inline-block; margin-right: 12px; color: #898989; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__tags .search_result_item__tag_item:before { font-family: "xiconbasic"; font-size: 16px; vertical-align: -3px; content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__tags .search_result_item__tag_item:last-child { margin-right: 0; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts { margin-top: 3px; color: #898989; font-size: 0; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments > div, .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__likes > div { display: inline-block; vertical-align: top; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments__icon, .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__likes__icon { position: relative; width: 11px; height: 11px; margin-right: 1px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments__icon:before, .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__likes__icon:before { display: inline-block; position: absolute; top: 0; left: 0; width: 11px; height: 11px; font-family: "xiconbasic"; font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments__number, .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__likes__number { font-size: 11px; line-height: 11px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments { margin-right: 8px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__comments__icon:before { content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__head__data__counts__likes__icon:before { content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail { padding: 10px 14px 14px; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail__title { font-size: 14px; font-weight: bold; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail__title:before { display: inline-block; margin-right: 4px; font-family: "FontAwesome"; font-weight: normal; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail__title.search_result_item__detail__title--explain:before { content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail__title.search_result_item__detail__title--main:before { content: ""; } .contents-list-block .search_result_item.search_result_item--sd .search_result_item__detail__body { max-height: 90px; overflow-y: hidden; font-size: 12px; } .contents-list-block .search_result_item.search_result_item--sd.search_result_item--noexplain .search_result_item__head { border-bottom: none; } .contents-list-block .search_result_item .search_highlight { display: inline-block; padding: 1px 2px; background-color: #fff576; font-weight: bold; } .contents-list-block .contents-list-block__more:not(.finished) .more-block { display: block; } .contents-list-block .contents-list-block__more:not(.finished) .loading-finished-block { display: none; } .contents-list-block .contents-list-block__more.finished .more-block { display: none; } .contents-list-block .contents-list-block__more.finished .loading-finished-block { display: block; } .contents-list-block .contents-list-block__more .more-block { width: 100%; height: 36px; margin-top: 30px; border: solid 1px #e8e8e8; border-radius: 3px; background-color: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15); line-height: 36px; text-align: center; } .contents-list-block .contents-list-block__more .more-block:not(.loading) .loading { display: none; } .contents-list-block .contents-list-block__more .more-block:not(.loading) .notloading { display: inline-block; } .contents-list-block .contents-list-block__more .more-block.loading .loading { display: inline-block; } .contents-list-block .contents-list-block__more .more-block.loading .notloading { display: none; } .contents-list-block .contents-list-block__more .more-block > span { display: inline-block; width: 100%; height: 100%; } .contents-list-block .contents-list-block__more .more-block > span > a { display: inline-block; width: 100%; height: 100%; color: #666; } .contents-list-block .contents-list-block__more .more-block .preloader-wrapper { vertical-align: -5px; } .contents-list-block .contents-list-block__more .more-block .fa-chevron-down { color: #b2b2b2; } .contents-list-block .contents-list-block__more .loading-finished-block .alert-well { width: 100%; height: 36px; margin-top: 30px; padding: 0; line-height: 36px; text-align: center; } .contents-list-block .contents-list-block__more .loading-finished-block .alert-well .xiconbasic-check { vertical-align: -4px; } .contents-list-block .contents-list-block__more .more_text { margin-left: 8px; } /* 検索結果 */ .tabs-block { margin: 0; padding: 0; overflow: hidden; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .13); } .tabs-block ul.tabs { height: auto; background-color: transparent; } .tabs-block ul.tabs .tab { width: 100%; height: 35px; line-height: 25px; } .tabs-block ul.tabs .tab a { display: inline-block; padding-top: 6px; color: #666; font-size: 12px; } .tabs-block ul.tabs .tab a.active { color: #62a8c8; } .tabs-block ul.tabs .indicator { height: 3px; background-color: #7ccbf0; } @media only screen and (max-width : 600px) { body.searchhistory .contents-list-block { margin-top: 28px; } } @media only screen and (max-width : 600px) { body.searchhistory .contents-list-block__body { padding-top: 24px; } } /* 企業コンテンツ一覧、閲覧履歴 */ body.readhistory .contents-list-block__body, body.companycontentslist .contents-list-block__body { padding-top: 0; } @media only screen and (max-width : 600px) { body.readhistory .header-sections .valign h2, body.companycontentslist .header-sections .valign h2 { padding: 10px 34px; } body.readhistory .contents-list-block, body.companycontentslist .contents-list-block { margin-top: 27px; } } /* animation */ @keyframes hover-pop { from { box-shadow: 0 0 0 -1px #4990e2; } to { box-shadow: 0 0 0 8px rgba(73, 144, 226, 0); } } @keyframes dots-activate { from { top: 7px; left: 7px; width: 6px; height: 6px; } to { top: 5px; left: 5px; width: 10px; height: 10px; } } @keyframes dots-activate-sd { from { top: 8px; left: 8px; width: 4px; height: 4px; } to { top: 6px; left: 6px; width: 8px; height: 8px; } } /* fullscreen loader */ body.show-fullscreen-loader { overflow: hidden; } body.show-fullscreen-loader .fullscreen-loader { display: -ms-flexbox; display: flex; opacity: 1; } body.hide-fullscreen-loader .fullscreen-loader { animation: hide-fullscreen-loader .5s ease-in-out 0s; } .fullscreen-loader { display: none; z-index: 30000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; background-color: rgba(255, 255, 255, .8); animation: show-fullscreen-loader .5s ease-in-out 0s; opacity: 0; } @keyframes show-fullscreen-loader { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hide-fullscreen-loader { 0% { display: -ms-flexbox; display: flex; opacity: 1; } 99% { opacity: 0; } 100% { display: none; opacity: 0; } } /* SD で横向きにしたときの表示 */ /* レイアウト変更時の動きが激しくならないように、flex は使わない */ .rotate_alert { display: none; z-index: 50000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; opacity: 0; } .rotate_alert__message { display: none; position: absolute; top: 50%; left: 50%; width: 168px; margin: -113px 0 0 -84px; font-size: 0; } .rotate_alert__message__left { display: inline-block; width: 168px; vertical-align: bottom; } .rotate_alert__message__right { display: none; width: 180px; margin-left: 30px; vertical-align: bottom; } .rotate_alert__message__right .rotate_alert__message__text { height: auto; margin-top: 0; } .rotate_alert__message__img { width: 168px; width: 160px; height: 153px; height: 153px; margin: 0 auto; background-image: url(../images/_sprite.png); background-position: 0px 0px; background-repeat: no-repeat; background-size: 261px 200px; } .rotate_alert__message__text { width: 100%; height: 63px; margin-top: 10px; font-size: 14px; text-align: center; } .rotate_alert__message__text__inner { display: inline-block; text-align: left; } .rotate_alert__message__app-button { display: inline-block; width: 100%; height: 40px; margin-bottom: 10px; background-color: #32c77b; color: #fff; font-size: 0; text-decoration: none; } .rotate_alert__message__app-button__icon { display: inline-block; width: 30px; height: 30px; margin-top: 5px; background-image: url(../images/_sprite.png); background-position: 93.665158371% 63.125%; background-repeat: no-repeat; background-size: 652.5% 500%; vertical-align: middle; } .rotate_alert__message__app-button__icon:after { display: block; padding-top: 100%; content: ""; } .rotate_alert__message__app-button__title { display: inline-block; height: 30px; padding-top: 8px; font-size: 16px; vertical-align: middle; } body.showing-rotate_alert { width: 100%; height: 100%; overflow: hidden; background-color: #fff; } body.showing-rotate_alert .rotate_alert__message { display: inline-block; } body.showing-rotate_alert > *:not(.rotate_alert) { opacity: 0; } body.book-detail--sd .rotate_alert__message { width: 378px; margin-left: -188px; } body.book-detail--sd .rotate_alert__message__right { display: inline-block; } /* general media queries */ @media only screen and (max-width : 600px) { .pc-items { display: none !important; } } @media only screen and (min-width : 601px) { .sd-items { display: none !important; } } /* jqGrid */ .ui-jqgrid .ui-jqgrid-view { font-size: 14px; } .ui-jqgrid .ui-jqgrid-hdiv { border-bottom: 1px solid #d0d0d0; background-color: #7d95ac; color: #fff; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable { border-collapse: collapse; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead { border: none; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th { height: 55px !important; padding: 7px 5px; font-weight: normal; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th .ui-th-div { position: relative; height: auto; margin: 0; overflow: visible; line-height: 30px; text-align: left; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th .ui-th-div#jqgh_grid-table_cb { padding-top: 4px; padding-left: 3px; line-height: normal; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th .ui-th-div label { width: 18px; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th .ui-th-div label:before { background-color: #fff; } .ui-jqgrid .ui-jqgrid-hdiv table.ui-jqgrid-htable thead th .ui-th-div [type=checkbox]:checked + label:before { border-right-color: #fff; border-bottom-color: #fff; background-color: transparent; transition: all .2s linear, background-color 0s linear; } .ui-jqgrid .ui-jqgrid-bdiv table { border-collapse: collapse; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr { border-radius: 0; background-color: #fff; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr:not(.jqgfirstrow) { border-bottom: 1px solid #d0d0d0; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr:not(.jqgfirstrow) td { padding: 8px 5px; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td { border: none; border-radius: 0; color: #666; line-height: 21px; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[role=gridcell] input[type=checkbox] + label { padding-left: 18px; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[role=gridcell] input[type=checkbox] + label:before { margin-top: 5px; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[aria-describedby=grid-table_user_name] { white-space: normal; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[aria-describedby=grid-table_content] { white-space: normal; } .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[aria-describedby=grid-table_browse_start], .ui-jqgrid .ui-jqgrid-bdiv table tbody tr td[aria-describedby=grid-table_browse_end] { padding: 8px 20px 8px 0; color: #9b9b9b; } .ui-jqgrid .s-ico { display: inline-block; position: absolute; top: calc(50% - 11px); right: 0; width: 7px; height: 15px; line-height: 1.428571429; text-align: left; } .ui-jqgrid .ui-grid-ico-sort { display: inline; position: absolute; overflow: hidden; cursor: pointer !important; } .ui-jqgrid .ui-icon-asc:before { content: ""; } .ui-jqgrid .ui-icon-desc { margin-left: 0; } .ui-jqgrid .ui-icon-desc:before { content: ""; } .ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc { display: block; right: 2px; float: none; color: #fff; text-indent: 0; transition: all .2s linear; } .ui-jqgrid .ui-icon-asc:before, .ui-jqgrid .ui-icon-desc:before { box-sizing: border-box; display: inline; font-family: "FontAwesome"; font-size: 12px; } .ui-jqgrid .ui-icon-asc.ui-state-disabled, .ui-jqgrid .ui-icon-desc.ui-state-disabled { color: rgba(255, 255, 255, .4); } .grid-block__more-block { padding-top: 5px; } .grid-block__more-block.all-loaded .grid-block__more-block__wrap { display: none; } .grid-block__more-block.all-loaded .loading-finished-block { display: block; } .grid-block__more-block__wrap { height: 63px; padding: 15px 0 0; text-align: center; transition: height .5s ease; } .grid-block__more-block__wrap--loading span.loading { display: inline-block !important; } .grid-block__more-block__wrap--loading span.notloading { display: none !important; } .grid-block__more-block__more { display: table; width: 200px; height: 48px; margin: 0 auto; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background-color .5s ease; } .grid-block__more-block__more:hover { background-color: rgba(0, 0, 0, .05); } @media only screen and (max-width : 600px) { .grid-block__more-block__more { width: 166px; border-bottom-color: #979797; } } .grid-block__more-block__more__inner { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .grid-block__more-block__more__inner i[class^=fa] { margin-right: 8px; color: #acabad; transition: transform .5s ease; } .grid-block__more-block__more__inner .preloader-wrapper { margin-right: 8px; vertical-align: middle; } .grid-block__more-block__more__inner .more_text { color: #666; vertical-align: middle; } .grid-block__more-block__more__inner span.loading { display: none; } .grid-block__more-block__more__inner span.notloading { display: inline-block; } .grid-block__more-block__more__inner .more-sd-chevron { display: inline-block; width: 20px; height: 20px; margin-top: -3px; transform: rotate(45deg); border: 2px solid #8b94a0; border-top-width: 0; border-left-width: 0; transition: transform .2s ease, margin-top .2s ease; } .grid-block__more-block__buttons { margin-top: 15px; text-align: center; } .grid-block__more-block__buttons .btn, .grid-block__more-block__buttons .btn-large { width: 200px; box-shadow: none; } .grid-block__more-block__buttons .btn__inner { display: inline-block; color: #4a4a4a; font-size: 14px; vertical-align: 5px; } .grid-block__more-block__buttons .btn i, .grid-block__more-block__buttons .btn-large i { margin-right: 5px; color: #7ccbf0; font-size: 24px !important; } .grid-block__more-block .loading-finished-block { display: none; padding-top: 20px; text-align: center; } .grid-block__more-block .loading-finished-block .alert-well { display: inline-block; width: auto; min-width: 200px; max-width: none; margin: 0 auto; padding: 10px 20px; } .grid-block__more-block .loading-finished-block .alert-well [class*=xiconbasic-] { vertical-align: -4px; } /* 汎用 filetype icon */ /* SD 用 QR コード表示 */ body.show_qrcode { overflow: hidden; } body.show_qrcode .qrcode { display: -ms-flexbox; display: flex; opacity: 1; } body.hide_qrcode .qrcode { animation: hideqr .3s ease-in-out 0s; } .qrcode { display: none; z-index: 1010; position: fixed; top: 0; right: 0; bottom: 0; left: 0; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100vw; height: 100vh; animation: showqr .3s ease-in-out 0s; } .qrcode-overlay { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .95); } .qrcode-close { display: inline-block; z-index: 2; position: absolute; top: 0; left: 0; width: 42px; height: 42px; } .qrcode-content { display: inline-block; z-index: 2; position: relative; width: 220px; padding-bottom: 40px; } .qrcode-content__message { height: 36px; color: #fff; font-size: 13px; line-height: 18px; text-align: center; } .qrcode-content__image { width: 220px; height: 220px; margin-top: 34px; } .qrcode-content__image__frame { width: 100%; height: 100%; padding: 15px; border: 4px solid #666; background-color: #fff; } .qrcode-content__image__entity { width: 100%; height: 100%; } .qrcode > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @keyframes showqr { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hideqr { 0% { display: -ms-flexbox; display: flex; opacity: 1; } 99% { opacity: 0; } 100% { display: none; opacity: 0; } } .authorize_block { padding-right: 15px; padding-left: 15px; text-align: center; } /* SD 用コメント */ @media only screen and (min-width : 601px) and (max-width : 992px) { body.book-detail--sd #toast-container { top: 7%; right: 5%; bottom: auto; left: auto; max-width: 90%; } } .book-detail-comment-dummy-wrap { position: absolute; top: -10000px; left: 0; } .book-detail-comment-dummy-wrap { font-size: 13px; line-height: 20px; } .book-detail-block__comments { z-index: 2; position: relative; padding: 30px 15px 24px; } .book-detail-block__comments__title { position: relative; cursor: pointer; } .book-detail-block__comments__title__text { height: 21px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 14px; font-weight: bold; line-height: 21px; } .book-detail-block__comments__input { margin-top: 10px; padding-bottom: 12px; font-size: 0; line-height: 0; } .book-detail-block__comments__needlogin { padding: 10px 0 12px; } .book-detail-block__comments__needlogin__explain { font-size: 13px; line-height: 20px; } .book-detail-block__comments__needlogin__loginlink { padding: 10px 0; text-align: center; } .book-detail-block__comments__items { z-index: 2; position: relative; border-top: 1px solid #ccc; } .book-detail-block__comments__item { position: relative; padding: 12px 0; border-bottom: 1px solid #ccc; transition: opacity .5s ease-in-out; will-change: opacity; } .book-detail-block__comments__item:last-child { border-bottom: none; } .book-detail-block__comments__item--none { opacity: 1 !important; } .book-detail-block__comments__item--none .book-detail-block__comments__item__text_none { font-size: 13px; line-height: 20px; } .book-detail-block__comments__item.ismyitem .book-detail-block__comments__item__mycomment { display: block; } .book-detail-block__comments__item.ismyitem .comment-operate-menu-snitch { display: none; } .book-detail-block__comments__item:not(.ismyitem) .comment-operate-menu-delete { display: none; } .book-detail-block__comments__item:not(.ismyitem).snitched .book-detail-block__comments__item__operation__snitched { display: inline-block; } .book-detail-block__comments__item:not(.ismyitem).snitched .book-detail-block__comments__item__operation__menu { display: none; } .book-detail-block__comments__item__mycomment { display: none; color: #9e9e9e; font-size: 11px; } .book-detail-block__comments__item__text { position: relative; overflow: hidden; font-size: 13px; line-height: 20px; transition: height .3s ease-in-out; will-change: height; } .book-detail-block__comments__item__text.ellipted:after { display: block; position: absolute; bottom: 0; width: 100%; height: 15px; background: linear-gradient(to bottom, rgba(246, 244, 247, 0) 0%, #f6f4f7 100%); content: ""; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00f6f4f7", endColorstr="#f6f4f7",GradientType=0 ); transition: opacity .3s ease-in-out; will-change: opacity; } .book-detail-block__comments__item__text.ellipted:not(.opened):after { opacity: 1; } .book-detail-block__comments__item__text.ellipted:not(.opened) + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__more { display: inline-block; } .book-detail-block__comments__item__text.ellipted:not(.opened) + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__less { display: none; } .book-detail-block__comments__item__text.ellipted.opened:after { opacity: 0; } .book-detail-block__comments__item__text.ellipted.opened + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__more { display: none; } .book-detail-block__comments__item__text.ellipted.opened + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__less { display: inline-block; } .book-detail-block__comments__item__text.ellipted + .book-detail-block__comments__item__operation { display: block; } .book-detail-block__comments__item__text:not(.ellipted) + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__more, .book-detail-block__comments__item__text:not(.ellipted) + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__less { display: none; } .book-detail-block__comments__item__text:not(.ellipted) + .book-detail-block__comments__item__operation .book-detail-block__comments__item__operation__rightside { width: 100%; } .book-detail-block__comments__item__operation { margin-top: 5px; font-size: 0; } .book-detail-block__comments__item__operation > div { display: inline-block; vertical-align: top; } .book-detail-block__comments__item__operation__more, .book-detail-block__comments__item__operation__less { width: 100px; height: 22px; overflow: hidden; font-size: 13px; cursor: pointer; } .book-detail-block__comments__item__operation__more i, .book-detail-block__comments__item__operation__less i { display: inline-block; font-size: 24px; vertical-align: top; } .book-detail-block__comments__item__operation__more i.xiconbasic-close, .book-detail-block__comments__item__operation__less i.xiconbasic-close { margin: 0 2px; font-size: 20px; } .book-detail-block__comments__item__operation__rightside { position: relative; width: calc(100% - 100px); text-align: right; } .book-detail-block__comments__item__operation__menu, .book-detail-block__comments__item__operation__snitched { display: inline-block; float: right; vertical-align: top; } .book-detail-block__comments__item__operation__like { margin-right: 110px; vertical-align: top; } .book-detail-block__comments__item__operation__like a { display: inline-block; height: 100%; padding: 0 10px; color: #999; line-height: 22px; text-decoration: none; } .book-detail-block__comments__item__operation__like a > div { display: inline-block; vertical-align: top; } .book-detail-block__comments__item__operation__like__icon { position: relative; width: 18px; height: 22px; margin-right: 3px; font-size: 18px; transition: color .3s ease-in-out; will-change: color; } .book-detail-block__comments__item__operation__like__icon:before, .book-detail-block__comments__item__operation__like__icon:after { position: absolute; top: 0; left: 0; font-family: "xiconbasic"; line-height: 22px; } .book-detail-block__comments__item__operation__like__icon:before { content: ""; } .book-detail-block__comments__item__operation__like__icon:after { display: none; content: ""; } .book-detail-block__comments__item__operation__like__number { height: 22px; padding-bottom: 2px; font-size: 15px; line-height: 20px; transition: color .3s ease-in-out; will-change: color; } .book-detail-block__comments__item__operation__like--liked .book-detail-block__comments__item__operation__like__icon { color: #ff6a8e; transition: color .3s ease-in-out .2s; } .book-detail-block__comments__item__operation__like--liked .book-detail-block__comments__item__operation__like__icon:before { display: none; } .book-detail-block__comments__item__operation__like--liked .book-detail-block__comments__item__operation__like__icon:after { display: inline-block; } .book-detail-block__comments__item__operation__like--liked .book-detail-block__comments__item__operation__like__number { color: #ff7f9e; transition: color .3s ease-in-out .2s; } .book-detail-block__comments__item__operation__menu .comment-operate-button { display: inline-block; height: 22px; overflow: hidden; color: #757575; } .book-detail-block__comments__item__operation__menu .comment-operate-button i { margin-top: -7px; font-size: 36px; } .book-detail-block__comments__item__operation__menu .comment-operate-menu { width: 170px !important; } .book-detail-block__comments__item__operation__menu .comment-operate-menu li { min-height: 0; white-space: pre; } .book-detail-block__comments__item__operation__menu .comment-operate-menu li a { padding: 8px 12px; color: #f44336; } .book-detail-block__comments__item__operation__menu .comment-operate-menu li a i { margin-right: 4px; } .book-detail-block__comments__item__operation__menu .comment-operate-menu li a .xiconbasic-separate { transform: rotate(135deg); } .book-detail-block__comments__item__operation__snitched { display: none; padding-right: 10px; color: #9e9e9e; vertical-align: top; } .book-detail-block__comments__item__operation__snitched__text { display: inline-block; padding-bottom: 2px; font-size: 15px; line-height: 20px; vertical-align: top; } .book-detail-block__comments__item__operation__snitched i { height: 22px; margin-right: 2px; font-size: 20px; line-height: 22px; vertical-align: top; } .comments_openclose { position: absolute; top: 0; right: 0; width: 34px; height: 23px; padding: 5px 5px 0 0; text-align: right; } .comments_openclose__inner { display: inline-block; width: 17px; height: 17px; margin: 0; transform: rotate(45deg); transform-origin: 6px 6px; border: 2px solid #576776; border-right: none; border-bottom: none; transition: transform .2s ease; } .comments_openclose.comments_openclose--closed .comments_openclose__inner { transform: rotate(225deg); } .comments__input__block--fixed { z-index: 1000; position: fixed; top: 44px; width: 1168px; padding: 0 0 10px !important; overflow: hidden; } .comments__input__block--fixed .book-detail-block__comments__input__inner { padding: 20px 20px 12px; background-color: #f6f4f7; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .4); } .comments__input__block--fixed + .comments__input__block__dummy { display: block; } .comments__input__block__dummy { display: none; } .comment-input_wrap > div { display: inline-block; vertical-align: bottom; } .comment-input_wrap .comment-input-area { width: calc(100% - 36px); padding: 0 8px 0 0; } .comment-input_wrap .comment-input-area textarea { max-height: 112px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; line-height: 20px; resize: none; } .comment-input_wrap .comment-input-area textarea:focus { outline: none; } .comment-input_wrap .comment-input-area.comment-input-area--inputted + .comment-input-button a { color: #32c77b; pointer-events: auto !important; } .comment-input_wrap .comment-input-button { width: 36px; } .comment-input_wrap .comment-input-button .comment-counter { margin-bottom: 2px; color: #bdbdbd; font-size: 11px; line-height: normal; } .comment-input_wrap .comment-input-button .comment-counter.comment-counter--warning { color: #ff9800; font-weight: bold; } .comment-input_wrap .comment-input-button .comment-counter.comment-counter--alert { color: #ef5350; font-weight: bold; } .comment-input_wrap .comment-input-button a { display: inline-block; border-radius: 2px; color: #ccc; vertical-align: middle; pointer-events: none; transition: color .3s ease-in-out; will-change: color; } .comment-input_wrap .comment-input-button a:focus { outline: none; } .comment-input_wrap .comment-input-button a i { width: 36px; height: 36px; font-size: 36px; } .comment-input_wrap .comment-input-button a i:before { width: 36px; height: 36px; } .book-detail--tablet.nav-beforelogin header nav .nav-pc-rightside:not(.nav-pc_search) { padding-left: 56px; } .book-detail--tablet header nav .nav-pc-rightside__item--icon .item-dropdown { width: 120px; } .book-detail--tablet header nav .nav-pc-rightside__item--icon a.item-icon { width: 40px; } .book-detail--tablet header nav .nav-pc-rightside__item--icon a.item-icon.nav-pc-notice { width: 50px; } .book-detail--tablet header nav .nav-pc-rightside__item--icon a.item-icon.nav-pc-notice .icon-badge-wrap { right: 0; width: 31px; height: 16px; } .book-detail--tablet header nav .nav-pc-rightside__item--icon a.item-icon.nav-pc-notice .icon-badge { height: 16px; font-size: 10px; line-height: 10px; } .book-detail--tablet header nav .nav-pc-rightside__item--search { display: none; } .book-detail--tablet header nav .nav-pc-rightside__item--userinfo .pc-usermenu { padding-left: 10px; } .book-detail--tablet header nav .nav-pc-rightside__item--userinfo .pc-usermenu__userinfo { max-width: 192px; max-width: 12rem; } .book-detail--tablet main .main-inner .main-content .breadcrumb-block { display: none; } .book-detail--tablet .book-detail-comment-dummy-wrap { font-size: 15px; line-height: 22px; } .book-detail--tablet .commentanchor { margin-top: -40px; } .book-detail--tablet .book-detail-block__comments { margin-top: 40px; } .book-detail--tablet .book-detail-block__comments__title__text { height: 23px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 16px; font-weight: bold; line-height: 26px; } .book-detail--tablet .book-detail-block__comments__needlogin__explain { font-size: 15px; line-height: 22px; } .book-detail--tablet .book-detail-block__comments__needlogin__explain .login-button { display: none; } .book-detail--tablet .book-detail-block__comments__needlogin .login-button { width: 250px; } .book-detail--tablet .book-detail-block__comments__item--none .book-detail-block__comments__item__text_none { font-size: 15px; line-height: 22px; } .book-detail--tablet .book-detail-block__comments__item__mycomment { font-size: 12px; } .book-detail--tablet .book-detail-block__comments__item__text { font-size: 15px; line-height: 22px; } .book-detail--tablet .book-detail-block__comments__item__operation__more, .book-detail--tablet .book-detail-block__comments__item__operation__less { font-size: 15px; } .book-detail--tablet .comment-input_wrap .comment-input-area { width: calc(100% - 48px); padding: 0 16px 0 0; } .book-detail--tablet .comment-input_wrap .comment-input-area textarea { font-size: 18px; line-height: 22px; } .book-detail--tablet .comment-input_wrap .comment-input-button { width: 48px; } .book-detail--tablet .comment-input_wrap .comment-input-button .comment-counter { font-size: 13px; } .book-detail--tablet .comment-input_wrap .comment-input-button a i { width: 48px; height: 48px; font-size: 48px; } .book-detail--tablet .comment-input_wrap .comment-input-button a i:before { width: 48px; height: 48px; } .book-detail--pc .book-detail-comment-dummy-wrap { font-size: 14px; line-height: 21px; } .book-detail--pc .book-detail-block__comments { padding: 0; } .book-detail--pc .book-detail-block__comments__title__text { height: 23px; padding: 0 0 0 10px; border-left: 3px solid #4a90e2; font-size: 16px; font-weight: bold; line-height: 26px; } .book-detail--pc .book-detail-block__comments__input { margin-top: 0; padding: 20px 20px 12px; } .book-detail--pc .book-detail-block__comments__needlogin { padding: 10px 0 22px; font-size: 0; } .book-detail--pc .book-detail-block__comments__needlogin__explain { display: inline-block; width: 434px; padding-left: 20px; font-size: 14px; line-height: 21px; } .book-detail--pc .book-detail-block__comments__needlogin__loginlink { display: inline-block; width: 734px; padding: 0; font-size: 14px; line-height: 21px; text-align: left; } .book-detail--pc .book-detail-block__comments__needlogin .login-button { width: 300px; } .book-detail--pc .book-detail-block__comments__items { margin-right: 20px; margin-left: 20px; } .book-detail--pc .book-detail-block__comments__item--none .book-detail-block__comments__item__text_none { font-size: 15px; line-height: 22px; } .book-detail--pc .book-detail-block__comments__item__text { font-size: 14px; line-height: 21px; } .book-detail--pc .book-detail-block__comments__item__operation__like { margin-right: 130px; } .book-detail--pc .book-detail-block__comments__item__operation__like__icon:before, .book-detail--pc .book-detail-block__comments__item__operation__like__icon:after { top: -1px; } .book-detail--pc .book-detail-block__comments__item__operation__like__number { padding-top: 2px; line-height: 20px; } .book-detail--pc .book-detail-block__comments__item__operation__snitched__text { padding-top: 2px; line-height: 20px; } body.nav-beforelogin .book-detail-block__comments__item__operation__snitched, body.nav-beforelogin .book-detail-block__comments__item__operation__menu { display: none; } body.nav-beforelogin .book-detail-block__comments__item__operation__like { margin-right: 0; } @media only screen and (max-width : 600px) { body.nocomments main .main-inner .content-block__body .tag-item { height: 199px; } } body.nocomments main .main-inner .content-block__body .tag-item__counts__comments { display: none; } body.nocomments .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__comments { display: none; } body.nocomments .search_result_item__data__counts__comments, body.nocomments .search_result_item__head__data__counts__comments { display: none !important; } body.nocomments.nolikes main .main-inner .content-block__body .tag-item { height: 286px; } @media only screen and (max-width : 600px) { body.nocomments.nolikes main .main-inner .content-block__body .tag-item { height: 180px; } } body.nocomments.nolikes main .main-inner .content-block__body .tag-item__counts { display: none; } body.nocomments.nolikes .main-books__block__item__footer__title__wrap { width: calc(100% - 120px); } @media only screen and (max-width : 600px) { body.nocomments.nolikes .main-books__block__item__footer__title__wrap { width: calc(100% - 100px); } } body.nocomments.nolikes .main-books__block__item__footer__rightside { width: 120px; } @media only screen and (max-width : 600px) { body.nocomments.nolikes .main-books__block__item__footer__rightside { width: 100px; } } body.nocomments.nolikes .main-books__block__item__footer__counts { display: none; } body.nocomments.nolikes .main-books__block__item__footer__lastupdate { padding-top: 12px; } body.nocomments.nolikes .search_result_item__data__counts, body.nocomments.nolikes .search_result_item__head__data__counts { display: none !important; } body.nocomments.nolikes .search_result_item.search_result_item--sd .search_result_item__head { height: 143px; } body.nocomments.nolikes .search_result_item.search_result_item--sd .search_result_item__head__data { max-height: 131px; } @media only screen and (max-width : 600px) { body.nolikes main .main-inner .content-block__body .tag-item { height: 199px; } } body.nolikes main .main-inner .content-block__body .tag-item__counts__likes { display: none; } body.nolikes main .main-books__block__item--history .main-books__block__item__footer__counts .main-books__item__likes { display: none; } body.nolikes .search_result_item__data__counts__likes, body.nolikes .search_result_item__head__data__counts__likes { display: none !important; } .notice-columns { width: 100%; height: calc(100vh - 224px); font-size: 0; } .notice-columns > div { display: inline-block; height: 100%; font-size: 14px; vertical-align: top; } .notice-columns--nosender .notice-list .notice-list-item-sender { display: none; } .notice-columns--nosender .notice-list .notice-list-item-date { width: 100%; } .notice-columns--nosender .notice-detail .notice-detail__header__data__sender { display: none; } .notice-columns--nosender .notice-detail .notice-detail__header__data__date { width: 100%; float: none; text-align: right; } .notice-column--left { z-index: 2; position: relative; width: 320px; background-color: #fff; } .notice-column--right { z-index: 1; position: relative; width: calc(100% - 320px); } .notice-list { height: 100%; overflow: hidden; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12); } .notice-list-header { padding: 10px; background-color: #757575; font-size: 0; } .notice-list-header .notice-list-check-wrap { display: inline-block; vertical-align: middle; } .notice-list-header .notice-list-check-wrap .notice-header-check + label { padding-left: 30px; font-size: 12px; } .notice-list-header .btn, .notice-list-header .btn-large { height: 28px; margin-left: 20px; padding-right: 8px; padding-left: 8px; font-size: 0; line-height: 26px; } .notice-list-header .btn > *, .notice-list-header .btn-large > * { font-size: 12px; } .notice-list-header .btn i, .notice-list-header .btn-large i { font-size: 18px; vertical-align: middle; } .notice-list-header .btn .btn-text, .notice-list-header .btn-large .btn-text { display: inline-block; padding-top: 2px; line-height: 14px; vertical-align: middle; } .notice-list-header-read { display: inline-block; font-size: 12px; line-height: 28px; } .notice-list-body { width: 100%; height: calc(100% - 48px); overflow: hidden; border-top: none; } .notice-list-item { position: relative; border-bottom: 1px solid #dddbde; font-size: 0; opacity: 0; transition: opacity .3s ease-in-out; will-change: opacity; } .notice-list-item:before { display: inline-block; position: absolute; top: 11px; left: 21px; width: 10px; height: 10px; border-radius: 50%; background-color: #23c878; content: ""; opacity: 0; transition: opacity .3s ease-in-out; } .notice-list-item.notice-list-item--notread:before { opacity: 1; } .notice-list-item.notice-list-item--ready { opacity: 1; } .notice-list-item:last-child { border-bottom: none; } .notice-list-item > * { display: inline-block; vertical-align: top; } .notice-list-item .notice-list-check-wrap { width: 40px; padding: 25px 10px 0; } .notice-list-item .notice-list-check-wrap label { padding-left: 20px; } .notice-list-item-link { position: relative; width: calc(100% - 40px); padding: 10px 20px 8px 0; text-decoration: none; } .notice-list-item-link:after { display: inline-block; position: absolute; top: 18px; right: 0; width: 24px; height: 36px; color: #bdbdbd; font-family: "xiconbasic"; font-size: 24px; vertical-align: top; content: ""; } .notice-list-item-message { color: #4b4b4b; font-size: 14px; line-height: 16px; } .notice-list-item-message.ellipsischecked { min-height: 32px; } .notice-list-item-footer { margin-top: 5px; line-height: normal; } .notice-list-item-footer > div { display: inline-block; color: #9e9e9e; vertical-align: top; } .notice-list-item-sender { width: calc(100% - 110px); overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .notice-list-item-date { width: 110px; font-size: 11px; text-align: right; } .notice-loading { display: -ms-flexbox; display: flex; z-index: 1; position: absolute; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; padding: 0 5px 0 25px; } .notice-please-select { display: -ms-flexbox; display: flex; z-index: 2; position: absolute; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; padding: 0 5px 0 25px; background-color: #f6f4f7; } .notice-please-select.fadeout-please-select { animation: hide-notice .5s ease-in-out 0s; } .notice-please-select.hide-please-select { display: none; } .notice-please-select-message { display: inline-block; padding: 16px 24px 14px; border: 1px solid #dddbde; border-radius: 5px; background-color: #fff; color: #757575; font-size: 18px; line-height: 24px; text-align: center; } .notice-detail { display: none; z-index: 3; position: absolute; width: 100%; height: 100%; padding-left: 20px; background-color: #f6f4f7; opacity: 0; } .notice-detail.show-notice-detail { display: block; opacity: 1; } .notice-detail.fadein-notice-detail { animation: show-general .5s ease-in-out 0s; } .notice-detail.fadeout-notice-detail { animation: hide-notice .5s ease-in-out 0s; } .notice-detail__header { margin: 0 5px; padding: 10px; background-color: #fff; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12); } .notice-detail__header__data { font-size: 0; line-height: 0; } .notice-detail__header__data > div { display: inline-block; vertical-align: top; } .notice-detail__header__data__sender > div { display: inline-block; font-size: 13px; line-height: normal; vertical-align: top; } .notice-detail__header__data__sender__title { width: 60px; } .notice-detail__header__data__date { float: right; font-size: 13px; line-height: normal; } .notice-detail__header__message { position: relative; max-height: 105px; margin-top: 10px; overflow: hidden; } .notice-detail__header__message.has-slimscroll:after { display: block; position: absolute; bottom: 0; width: 100%; height: 15px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); content: ""; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#ffffff",GradientType=0 ); } .notice-detail__header__message.has-slimscroll .notice-detail__header__message__inner { padding-bottom: 15px; } .notice-detail__body { margin-top: 21px; overflow: hidden; } .notice .slimScrollDiv .slimScrollBarY { right: 3px !important; width: 6px !important; border-radius: 0 !important; background-color: transparent !important; } .notice .slimScrollDiv .slimScrollBarY:after { display: inline-block; position: absolute; top: 3px; right: 0; bottom: 4px; left: 0; border-radius: 3px; background-color: #000; content: ""; } .notice .slimScrollDiv .slimScrollRailY { width: 9px !important; } body.notice main .main-inner { width: 1178px; } @media only screen and (max-width : 600px) { body.notice main .main-inner { width: 100%; margin: 0 auto 54px; } } body.notice main .main-inner .main-content .breadcrumb-block { padding: 0 5px; } body.notice main .main-inner .main-content .content-block { padding-left: 5px; } body.notice main .main-inner .main-content .content-block__body { padding: 5px; } body.notice main .main-inner .book-list-block { width: 100%; padding: 0; } body.notice main .main-inner .book-list-block .tag-item { width: 148px; height: 234px; margin-right: 21px; border-color: transparent; } body.notice main .main-inner .book-list-block .tag-item:nth-child(5n+4) { margin-right: 20px; } body.notice main .main-inner .book-list-block .tag-item:nth-child(5n) { margin-right: 0; } body.notice main .main-inner .book-list-block .tag-item:nth-child(n+6) { margin-top: 21px; } body.notice main .main-inner .book-list-block .tag-item__link { padding: 10px 10px 8px; } body.notice main .main-inner .book-list-block .tag-item__image { height: 178px; } body.notice main .main-inner .book-list-block .tag-item__image__inner { height: 178px; } body.notice main .main-inner .book-list-block .tag-item__title { margin-top: 6px; } body.notice main .main-inner .book-list-block .tag-item__counts { display: none; } /* SD 版通知一覧 */ body.sd-notice main .main-inner { margin-bottom: 0; } body.sd-notice .selectmode_wrap.selectmode_wrap--select .deletelink { display: inline-block; opacity: 1; } body.sd-notice .selectmode_wrap .deletelink { display: none; margin-right: 8px; opacity: 0; transition: opacity .5s ease-in-out; } body.sd-notice .selectmode_wrap .selectmode { color: #1e88e5; } body.sd-notice .selectmode_wrap .btn, body.sd-notice .selectmode_wrap .btn-large, body.sd-notice .selectmode_wrap .btn-flat { height: 30px; padding-right: 12px; padding-left: 12px; line-height: 32px; } .sd-notice-list { border-top: 1px solid #dddbde; background-color: #fff; } .sd-notice-list.sd-notice-list--select .sd-notice-list-item:after { right: -24px; } .sd-notice-list.sd-notice-list--select .sd-notice-list-item-check-wrap { z-index: 3; opacity: 1; } .sd-notice-list.sd-notice-list--select .sd-notice-list-item-link { padding: 10px 10px 9px 54px; } .sd-notice-list.sd-notice-list--select .sd-notice-list-item-link:before { left: 37px; } .sd-notice-list.sd-notice-list--select .sd-notice-list-item-link:after { left: 35px; } .sd-notice-list.sd-notice-list--nosender .sd-notice-list-item-sender { display: none; } .sd-notice-list.sd-notice-list--nosender .sd-notice-list-item-date { width: 100%; } .sd-notice-list-item { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid #dddbde; font-size: 0; } .sd-notice-list-item:after { display: inline-block; z-index: 3; position: absolute; top: 28px; right: 0; width: 24px; height: 36px; color: #bdbdbd; font-family: "xiconbasic"; font-size: 24px; vertical-align: top; content: ""; transition: right .3s ease-in-out; } .sd-notice-list-item.sd-notice-list-item--notread .sd-notice-list-item-link:before { display: inline-block; } .sd-notice-list-item.sd-notice-list-item--notread.sd-notice-list-item--hasattachment .sd-notice-list-item-link:after { top: 24px; } .sd-notice-list-item.sd-notice-list-item--hasattachment .sd-notice-list-item-link:after { display: inline-block; } .sd-notice-list-item-check-wrap { z-index: 1; position: absolute; top: 0; left: 0; width: 40px; padding: 32px 10px 0; opacity: 0; transition: opacity .3s ease-in-out; will-change: z-index, opacity; } .sd-notice-list-item-check-wrap .notice-list-check.filled-in:checked + label:before { top: 1px; left: 2px; width: 7px; height: 12px; } .sd-notice-list-item-check-wrap .notice-list-check.filled-in:not(:checked) + label:after, .sd-notice-list-item-check-wrap .notice-list-check.filled-in:checked + label:after { border-radius: 50%; } .sd-notice-list-item-check-wrap label { padding-left: 20px; } .sd-notice-list-item-link { display: inline-block; z-index: 2; position: relative; width: 100%; height: 100%; padding: 10px 20px 9px 24px; background-color: #fff; text-decoration: none; transition: padding .3s ease-in-out; } .sd-notice-list-item-link:before { display: none; position: absolute; top: 11px; left: 7px; width: 12px; height: 12px; border-radius: 50%; background-color: #23c878; content: ""; transition: left .3s ease-in-out; } .sd-notice-list-item-link:after { display: none; position: absolute; top: 5px; left: 5px; width: 16px; height: 24px; color: #9b9b9b; font-family: "xiconbasic"; font-size: 16px; content: ""; transition: left .3s ease-in-out; } .sd-notice-list-item-message { height: 54px; overflow: hidden; color: #4b4b4b; font-size: 14px; line-height: 18px; } .sd-notice-list-item-footer { margin-top: 2px; color: #9e9e9e; } .sd-notice-list-item-footer > div { display: inline-block; font-size: 13px; line-height: 17px; vertical-align: top; } .sd-notice-list-item-sender { width: calc(100% - 130px); } .sd-notice-list-item-date { width: 130px; text-align: right; } @keyframes hide-notice { 0% { opacity: 1; } 99% { opacity: 0; } 100% { display: none; opacity: 0; } } /* 通知がない場合 */ .notice-none { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: calc(100vh - 224px); } .notice-none-message { display: inline-block; padding: 16px 24px 14px; border: 1px solid #dddbde; border-radius: 5px; background-color: #fff; color: #757575; font-size: 18px; line-height: 24px; text-align: center; } body.sd-notice .notice-none { height: calc(100vh - 229px); } /* SD 版通知詳細 */ body.sd-notice-detail main .main-inner .book-list-block .content-block .tag-item { height: auto; } body.sd-notice-detail main .main-inner .book-list-block .content-block .tag-item .tag-item__title { margin: 8px 0; } body.sd-notice-detail main .main-inner .book-list-block .content-block .tag-item .tag-item__counts { display: none; } body.sd-notice-detail .notice-detail-head { padding: 0 15px 10px; } body.sd-notice-detail .notice-detail-head.notice-detail-head--nosender .notice-detail-head__data__sender { display: none; } body.sd-notice-detail .notice-detail-head.notice-detail-head--nosender .notice-detail-head__data__date { width: 100%; float: none; text-align: right; } body.sd-notice-detail .notice-detail-head__inner { padding: 9px; background-color: #fff; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12); } body.sd-notice-detail .notice-detail-head__data { font-size: 0; } body.sd-notice-detail .notice-detail-head__data > * { display: inline-block; vertical-align: top; } body.sd-notice-detail .notice-detail-head__data__sender > div { display: inline-block; font-size: 13px; line-height: 17px; vertical-align: top; } body.sd-notice-detail .notice-detail-head__data__sender__title { width: 60px; } body.sd-notice-detail .notice-detail-head__data__sender__value { width: calc(100% - 60px); } body.sd-notice-detail .notice-detail-head__data__date { float: right; font-size: 13px; line-height: 17px; } body.sd-notice-detail .notice-detail-head__message { margin-top: 10px; font-size: 14px; line-height: 20px; } /* コンテンツの画像の幅調整 */ @media only screen and (max-width : 600px) { body main .main-inner .book-list-block .content-block .tag-item { width: calc((100vw - 50px) / 3); height: auto; } body main .main-inner .book-list-block .content-block .tag-item__link { padding: 0; } body main .main-inner .book-list-block .content-block .tag-item__image { display: block; position: relative; } body main .main-inner .book-list-block .content-block .tag-item__image:before { display: block; padding-top: 141.428571429%; content: ""; } body main .main-inner .book-list-block .content-block .tag-item__image__inner { display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; width: 100%; height: auto; } body main .main-inner .book-list-block .content-block .tag-item__image__entity { border: none; } body main .main-inner .book-list-block .content-block .tag-item__title { padding-right: 8px; padding-left: 8px; } body main .main-inner .book-list-block .content-block .tag-item__counts { margin: 5px 8px 8px; } } body.home .breadcrumb-block, body.login .breadcrumb-block { display: none; } body.home--sd .main-inner, body.http-error--sd .main-inner { margin-top: 0; } body.home--sd .main-inner .alert-block, body.http-error--sd .main-inner .alert-block { margin-top: 20px; } body.home--sd .book-list-block, body.http-error--sd .book-list-block { padding-right: 0; padding-left: 0; overflow: hidden; } body.home--sd .book-list-block .content-block.content-block--life .content-block__title .content-block__title__link:before, body.home--sd .book-list-block .content-block.content-block--comics .content-block__title .content-block__title__link:before, body.home--sd .book-list-block .content-block.content-block--magazine .content-block__title .content-block__title__link:before, body.home--sd .book-list-block .content-block.content-block--literature .content-block__title .content-block__title__link:before, body.home--sd .book-list-block .content-block.content-block--business .content-block__title .content-block__title__link:before, body.home--sd .book-list-block .content-block.content-block--others .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--life .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--comics .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--magazine .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--literature .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--business .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--others .content-block__title .content-block__title__link:before { margin-bottom: 8px !important; } body.home--sd .book-list-block .content-block.content-block--ranking .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block.content-block--ranking .content-block__title .content-block__title__link:before { margin-bottom: 6px !important; } body.home--sd .book-list-block .content-block .content-block__title, body.http-error--sd .book-list-block .content-block .content-block__title { width: calc(100% - 30px); height: 24px; margin-right: 15px; margin-left: 15px; } body.home--sd .book-list-block .content-block .content-block__title .content-block__title__link:before, body.http-error--sd .book-list-block .content-block .content-block__title .content-block__title__link:before { height: 20px; margin-top: 0; margin-bottom: 4px; vertical-align: middle; } body.home--sd .book-list-block .content-block .content-block__title__inner, body.http-error--sd .book-list-block .content-block .content-block__title__inner { max-width: calc(100% - 194px); margin-bottom: 8px; font-size: 13px; line-height: 20px; vertical-align: middle; } body.home--sd .book-list-block .content-block .content-block__title__sub-info, body.http-error--sd .book-list-block .content-block .content-block__title__sub-info { height: 20px; margin-bottom: 4px; margin-left: 12px; padding-left: 2px; font-size: 10.5px; vertical-align: middle; } body.home--sd .book-list-block .content-block .content-block__title__sub-info:before, body.http-error--sd .book-list-block .content-block .content-block__title__sub-info:before { top: 3px; height: 12px; } body.home--sd .book-list-block .content-block .content-block__title__sub-info > span, body.http-error--sd .book-list-block .content-block .content-block__title__sub-info > span { margin-left: 8px; padding-top: 3px; line-height: 10.5px; } body.home--sd .book-list-block .content-block .content-block__title__sub-info > span .sub-info-icon, body.http-error--sd .book-list-block .content-block .content-block__title__sub-info > span .sub-info-icon { font-size: 14px; } body.home--sd .book-list-block .content-block .content-block__body, body.http-error--sd .book-list-block .content-block .content-block__body { position: relative; padding: 0 15px; } body.home--sd .book-list-block .content-block .content-block__body .swipeable-block, body.http-error--sd .book-list-block .content-block .content-block__body .swipeable-block { display: -ms-flexbox; display: flex; z-index: 10; position: absolute; top: 0; right: 15px; bottom: 0; left: 15px; background-color: rgba(255, 0, 0, .5); } body.home--sd .book-list-block .content-block .content-block__body__inner, body.http-error--sd .book-list-block .content-block .content-block__body__inner { white-space: nowrap; will-change: transform; } body.home--sd .book-list-block .content-block .tag-item, body.http-error--sd .book-list-block .content-block .tag-item { width: calc((100vw - 50px) / 2.7) !important; white-space: normal; } /* メモリ解放後のローダー表現 */ .item__image__entity__dummy { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /* flex */ -ms-flex-pack: center; justify-content: center; } .item__image__entity__loader { font-family: "FontAwesome"; font-size: 20px; animation: rotatecircle 1.25s linear infinite, hue-rotate 3.75s linear infinite; } .item__image__entity__loader:before { color: #1c9e6c; content: ""; } @keyframes rotatecircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes hue-rotate { 0% { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="0" /></filter></svg>#filter'); filter: hue-rotate(0deg); } 100% { filter: hue-rotate(-360deg); } } /* 擬似的なセレクトボックス */ .select-alike { display: inline-block; position: relative; width: 200px; height: 32px; padding: 1px 0 0 10px; border-radius: 5px; background-color: #fff; color: #666; font-size: 14px; font-weight: normal; line-height: 32px; cursor: pointer; transition: color .5s ease; } .select-alike:after { position: absolute; top: 7px; right: 10px; bottom: 0; color: #d8d8d8; font-family: "FontAwesome"; font-size: 16px; line-height: 16px; content: ""; } .select-alike:hover { color: #858585; } .select-alike:hover:after { color: #b2b2b2; } .sort-dropdown .sort-dropdown-content { height: 34px; min-height: 0; font-size: 16px; line-height: 21px; } .sort-dropdown .sort-dropdown-option { padding: 6px 16px; color: #03a9f4; }