.footer{ font-family: ThaiJuly; font-size: 20px; } .footer .header{ font-size: 22px; /*font-weight: bold;*/ } .error, .errorMessage, .help-block{ color: #a94442;; margin-top: 5px; } .error-page > .headline { float: none; font-size: 100px; font-weight: 300; } .error-page > .error-content { display: block; margin-left: 0; } .padding-time{ padding-top:0px; padding-bottom: 0px; line-height: 8px; } .form-group.has-error .form-control{ background-color: #FFDBDB; } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.fast { -webkit-animation-duration: .5s; -moz-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .animated.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .animated.shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .animated.bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -moz-transform: scale(1); } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -o-transform: scale(1); } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .animated.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .animated.swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .animated.wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .animated.pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) translateZ(0) rotateY(0) scale(1); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animated.flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .animated.flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animated.flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .animated.fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .animated.fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .animated.fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .animated.fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .animated.fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .animated.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .animated.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .animated.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .animated.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { -o-transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; transform: translateY(-2000px); } 100% { transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { -o-transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 100% { transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { -o-transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes slideOutLeft { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes slideOutLeft { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes slideOutRight { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes slideOutRight { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes slideOutUp { 0% { -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes slideOutUp { 0% { -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } .animated.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .animated.bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(0.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(0.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(0.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } .animated.bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .animated.bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .animated.bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .animated.bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .animated.bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .animated.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .animated.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } } .animated.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .animated.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .animated.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .animated.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .animated.hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .animated.rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .animated.rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: .5s; -moz-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: 0.5s; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .animated.lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: .25s; -moz-animation-duration: .25s; -o-animation-duration: .25s; animation-duration: 0.25s; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity 0.15s linear; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } .noUi-target * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -ms-touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; } /* Main slider bar; * Standard styles no longer incorrectly force a * width or height on the slider. */ .noUi-base { width: 100%; height: 14px; position: relative; max-width: 100%; max-height: 100%; border: 1px solid #bfbfbf; z-index: 1; } .noUi-origin-lower { background: #72a8d7; } /* Handles + active state; * The :after pseudo-element wont inherit * box-sizing, so it needs to applied manually. */ .noUi-handle { background: #858585; height: 30px; width: 16px; border: 1px solid #ffffff; margin: -8px 0 0 -8px; cursor: default; } .noUi-handle:hover { background: #6c6c6c; } .noUi-active { cursor: default; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px 0px; background: #686868; height: 32px; width: 18px; margin: -9px 0 0 -8px; border: none; } .noUi-active:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; height: 100%; border: 1px solid #dddddd; } /* Styling-only classes; * Structured to prevent double declarations * for various states of the slider. */ .noUi-connect { background: #3276b1; } .noUi-background { background: #eeeeee; border: none; } /* Functional styles for handle positioning; * Note that the origins have z-index 0, the base has * z-index 1; This fixes a bug where borders become invisible. */ .noUi-origin { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; } .noUi-origin-upper { background: inherit !important; } .noUi-z-index { z-index: 10; } /* Adaptations for the vertical slider; * Some standard styles have been extended to keep * exceptions for the vertical slider as minimal as possible. */ .noUi-vertical { width: 10px; height: 100%; } .noUi-vertical .noUi-origin { bottom: 0; left: 0; } .noUi-vertical .noUi-handle { margin: -8px 0 0 -3px; } /* Various alternate slider states; * Support for transition is widely available, * Only IE7, IE8 and IE9 will ignore these rules. * Since this is merely a progressive enhancement, * this is no problem at all. * http://caniuse.com/#search=transition */ .noUi-target[disabled] .noUi-base { background: #999999; } .noUi-target[disabled] .noUi-connect { background: #BBB; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s; } /* * JQUI SPINNERS */ .ui-spinner-input { margin: 0 !important; height: 30px; padding: 6px 24px 6px 12px; } .ui-spinner-input.spinner-left { padding: 6px 12px 6px 24px; } .ui-spinner { width: 100%; } .ui-spinner-input.spinner-left + .ui-spinner-button, .ui-spinner-input.spinner-left + .ui-spinner-button + .ui-spinner-button { right: auto; left: 0px; } .ui-spinner-up, .ui-spinner-down { background: #739e73; border-radius: 0px; } .ui-spinner-up:hover, .ui-spinner-up:active, .ui-spinner-up:focus { background: #5b835b; } .ui-spinner-down:hover, .ui-spinner-down:active, .ui-spinner-down:focus { background: #77021d; } .ui-spinner-down { background: #c2032f; } .ui-spinner-up:before, .ui-spinner-down:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f067"; color: #ffffff; font-size: 14px; margin-top: 1px; } .ui-spinner-down:before { content: "\f068"; } .ui-spinner-up > :first-child, .ui-spinner-down > :first-child { display: none; } .ui-spinner-button { width: 19px; } /* spinner both */ .ui-spinner-input.spinner-both { padding: 6px 30px; } .ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button { left: 0px; right: auto; } .ui-spinner-input.spinner-both + .ui-spinner-button, .ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button { height: 30px; width: 25px; } .ui-spinner-input.spinner-both + .ui-spinner-up:before, .ui-spinner-input.spinner-both + .ui-spinner-up + .ui-spinner-down:before { margin-top: 8px; } /* * JQUI ADJUSTMENT */ .ui-dialog { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); } .widget-header > :first-child { margin: 13px 0; } .ui-widget-overlay { z-index: 999; } .ui-dialog .ui-dialog-titlebar { padding: 0 10px; background: #ffffff; border-bottom-color: #eeeeee; } .ui-dialog .ui-dialog-title { margin: 0; } .ui-dialog .ui-dialog-titlebar-close { margin-top: -16px; margin-right: 4px; } .ui-dialog-titlebar-close:before { content: "\f00d"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13px; } .ui-dialog .ui-dialog-buttonpane button { margin: 0 .4em 0 0; } .ui-dialog .ui-dialog-buttonpane { margin-top: 13px; padding: 19px 15px 20px; text-align: right; border-top: 1px solid #eeeeee; } .ui-autocomplete { z-index: 905 !important; } /* * CSS TABLES */ .the-price { background-color: rgba(220, 220, 220, 0.17); box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff; padding: 20px; margin: 0; } .the-price h1 { line-height: 1em; padding: 0; margin: 0; } .subscript { font-size: 21px; color: #999; } /* * RIBBON */ .ribbon { position: absolute; right: 9px; top: -4px; } /* * Price BIG */ .pricing-big { border: none !important; } .pricing-big .panel-heading { border-radius: 5px 5px 0 0; } .pricing-big .panel-title { text-transform: capitalize; font-size: 18px; padding: 20px 0; text-align: center; border-radius: 5px 5px 0 0; margin: 0; font-weight: bold; } .pricing-big .the-price { padding: 20px 0; background: #333; text-align: center; font-size: 24px; font-weight: bold; color: #FFF; box-shadow: none !important; -moz-box-shadow: none !important; } .pricing-big .subscript { font-size: 18px; color: #999; margin-left: 5px; } .price-features { background: #FAFAFA; padding: 20px 15px; min-height: 230px; font-size: 13.5px; } .price-features li + li { margin-top: 10px; } .pricing-big .panel-footer { border-radius: 0 0 5px 5px; } .pricing-big .panel-footer .btn { padding: 15px 0; border-radius: 3px; font-weight: bold; font-size: 14px; } .pricing-big .panel-footer .btn span { font-weight: normal; font-style: italic; } .pricing-big .panel-footer { background-color: #F2F2F2 !important; } .pricing-big .panel-footer > div { padding: 15px 0 10px; display: block; font-size: 13px; } .pricing-big table { background: #FAFAFA; padding: 20px 15px; height: 230px; text-align: left; } /*! * Pace Progress Bar 2.0.1 * https://github.com/HubSpot/pace * * Released under the MIT license * https://github.com/HubSpot/pace/blob/master/LICENSE */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #3276b1; position: fixed; z-index: 2000; top: 0; left: 0; right: 0; height: 2px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } .pace .pace-progress-inner { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 63px; right: 40px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } .smart-rtl .pace .pace-activity { left: 40px; right: auto; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #chat-container *, #chat-container *:after, #chat-container *:before { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } #chat-container input[type='text'] { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #chat-container { position: absolute; width: 250px; height: 270px; z-index: 2; border-left: 1px solid #CDCECF; right: -251px; top: 0px; background: #fff; transition-duration: .25s; -webkit-transition-duration: .25s; -moz-transition-duration: .25s; -o-transition-duration: .25s; -ms-transition-duration: .25s; } #chat-container:hover, #chat-container:hover .chat-list-open-close { border-color: #A7A7A7; } #chat-container.open { right: 0px; top: 0px; } #chat-container .chat-list-open-close { display: block; width: 25px; height: 25px; border: 1px solid #CDCECF; border-right: 1px solid #f2f4f8 !important; position: absolute; left: -32px; top: 7%; border-radius: 50% 0 0 50%; background: #FFF; padding: 3px 1px 3px 5px; font-size: 21px; line-height: 22px; cursor: pointer; color: #868686; box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.05); background: #f2f4f8; text-align: center; } #chat-container .chat-list-open-close b { position: absolute; right: 0px; background: #ed1c24; line-height: 9px; height: 10px; width: 10px; font-size: 0; top: 3px; border: 1px solid #FFF; border-radius: 3px; font-size: 9px; text-align: center; vertical-align: middle; color: #fff; font-weight: normal; } #chat-container.open .chat-list-open-close i:before { content: "\f00d" !important; } #chat-container.open .chat-list-open-close b { display: none; } #chat-container .chat-list-body { height: 217px; overflow-y: scroll; overflow-x: hidden; display: block; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: #f2f4f8; } #chat-container #chat-users { list-style: none; margin: 10px 0; padding: 0; } #chat-container #chat-users li { margin-bottom: 3px; margin-left: 5px; } #chat-container #chat-users li a { display: block; font-size: 13px; color: #3d3d3d; text-decoration: none !important; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 3px 8px 3px 3px; line-height: 33px; vertical-align: middle; } #chat-container #chat-users li a:hover { background: #e0e4ee; } #chat-container #chat-users li a img { width: 33px; height: auto; margin-right: 10px; } #chat-container #chat-users li a i { color: #ACACAC; font-size: 8px; line-height: 34px; font-style: normal; } #chat-container #chat-users li a i.last-online { font-size: 12px; letter-spacing: -1px; } #chat-container .chat-list-footer { overflow: hidden; border-top: 1px solid #CCC; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #chat-container .chat-list-footer input[type="text"] { border: 1px solid #bababa !important; } #chat-container .control-group { padding: 0px; } .chat-body { background: #FAFAFA; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -o-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: -ms-linear-gradient(top, #fafafa 0%, #ffffff 100%); background: linear-gradient(to bottom, #f5fcff 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.04); -moz-box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.04); display: block; height: 270px; overflow-y: scroll; overflow-x: hidden; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid #fff; border-top: none; } .chat-body ul { margin: 0; padding: 0; } .chat-body li.message { display: block; position: relative; margin: 20px 20px 0; } .chat-body li:first-child { margin-top: 10px; } .chat-body li.message img { display: inline-block; border-left: 4px solid #fff; position: absolute; } .chat-body li.message img.online { border-left-color: #00a300; } .chat-body li.message img.offline { border-left-color: #ddd; } .chat-body li.message img.busy { border-left-color: #A90329; } .chat-body li.message img.away { border-left-color: #ffc40d; } .chat-body li.message .message-text { display: inline-block; vertical-align: top; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin-left: 65px; line-height: normal; } .chat-body li.message .message-text time { position: absolute; top: 1px; right: 0px; font-size: 10px; line-height: 10px; color: #AFAFAF; } .chat-body li.message .message-text .chat-file:nth-child(3) { margin-top: 15px; } .chat-body li.message .message-text .chat-file { display: block; margin: 3px 0; padding: 4px; border: 1px dotted #ddd; background: rgba(0, 0, 0, 0.05); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .chat-body li.message .message-text .chat-file.row-fluid [class*="span"] { min-height: 10px !important; } .chat-body li.message .message-text .chat-file b { font-style: italic; white-space: nowrap; width: 250px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .chat-body li.message .message-text a.username { display: block; font-weight: bold; margin-bottom: 4px; vertical-align: top; line-height: 14px; font-size: 14px; letter-spacing: -1px; text-decoration: none !important; } /* message reply */ .profile-message { background: none !important; height: auto !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; overflow: hidden; } .profile-message li.message.message-reply { margin-left: 85px !important; background: #F7F7F7; padding: 10px; margin: 3px 0 0 20px; } .profile-message li.message.message-reply img { width: 35px !important; } .profile-message li.message.message-reply .message-text { margin-left: 45px !important; } .profile-message .wall-comment-reply { margin-left: 85px; margin-bottom: 20px; } .chat-footer { border-top: 1px solid rgba(0, 0, 0, 0.1); background: rgba(248, 248, 248, 0.9); padding: 0 10px 15px; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .textarea-div { background-color: #FFF; border: 1px solid #CCC; border-bottom: none; margin: 10px 0 0; } .typearea { cursor: text; overflow-x: hidden; overflow-y: auto; max-height: 90px; padding: 5px 25px 5px 5px; position: relative; border-bottom: 1px solid #EEE; } .typearea textarea { width: 100%; border-color: transparent !important; box-sizing: border-box; box-shadow: none; -moz-box-shadow: none ; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-box-shadow: none; overflow: hidden; padding: 0; margin: 0; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; transition: height 0.2s; outline: none; resize: none; min-height: 61px; } textarea.clone { position: absolute; visibility: hidden; } .textarea-controls { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; display: block; background-color: #FFF; border: 1px solid #CCC; border-top: none; height: 43px; line-height: 33px; overflow: hidden; } .textarea-controls > label { margin: 3px 10px 0 10px; } .textarea-controls .smart-form .checkbox { padding-left: 22px !important; } @media (min-width: 768px) and (max-width: 880px) { .chat-body li.message .message-text .chat-file b { width: 150px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .chat-body li.message .message-text .chat-file b { width: 150px; } } @media (max-width: 480px) { .chat-body li.message .message-text .chat-file b { width: 150px; } } /* * SMART FORMS */ .smart-form *, .smart-form *:after, .smart-form *:before { margin: 0; padding: 0; box-sizing: content-box; -moz-box-sizing: content-box; } .smart-form .btn { box-sizing: border-box; -moz-box-sizing: border-box; } .smart-form .radio + .radio, .smart-form .checkbox + .checkbox { margin-top: 0; } .smart-form footer .btn { float: right; height: 31px; margin: 10px 0 0 5px; padding: 0 22px; font: 300 15px/29px 'Open Sans', Helvetica, Arial, sans-serif; cursor: pointer; } .smart-form legend { padding-top: 15px; } .smart-form { margin: 0; outline: none; color: #666; position: relative; } .smart-form header { display: block; padding: 8px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); background: white; font-size: 16px; font-weight: 300; color: #232323; margin: 10px 14px 0; } .smart-form fieldset { display: block; padding: 25px 14px 5px; border: none; background: rgba(255, 255, 255, 0.9); position: relative; } .smart-form fieldset + fieldset { border-top: 1px solid rgba(0, 0, 0, 0.1); } .smart-form section { margin-bottom: 15px; position: relative; } .smart-form footer { display: block; padding: 7px 14px 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); background: rgba(248, 248, 248, 0.9); } .smart-form footer:after { content: ''; display: table; clear: both; } .smart-form .label { display: block; margin-bottom: 6px; line-height: 19px; font-weight: 400; font-size: 13px; color: #333; text-align: left; white-space: normal; } .smart-form .label.col { margin: 0; padding-top: 7px; } .smart-form .note, .note { margin-top: 6px; padding: 0 1px; font-size: 11px; line-height: 15px; color: #999; } .note { margin-top: 2px; font-size: 10px; } .smart-form .note a { font-size: 13px; } .smart-form .input, .smart-form .select, .smart-form .textarea, .smart-form .radio, .smart-form .checkbox, .smart-form .toggle, .smart-form .button { position: relative; display: block; font-weight: 400; } .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea { display: block; box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; height: 32px; line-height: 32px; padding: 5px 10px; outline: none; border-width: 1px; border-style: solid; border-radius: 0; background: #fff; font: 13px/16px 'Open Sans', Helvetica, Arial, sans-serif; color: #404040; appearance: normal; -moz-appearance: none; -webkit-appearance: none; } /* * File inputs */ .smart-form .input-file .button { position: absolute; top: 4px; right: 4px; float: none; height: 22px; margin: 0; padding: 0 14px; font-size: 13px; line-height: 22px; } .smart-form .input-file .button:hover { box-shadow: none; } .smart-form .input-file .button input { position: absolute; top: 0; right: 0; padding: 0; font-size: 30px; cursor: pointer; opacity: 0; } /* * Selects */ .smart-form .select i { position: absolute; top: 10px; right: 11px; width: 5px; height: 11px; background: white; box-shadow: 0 0 0 9px white; } .smart-form .select i:after, .smart-form .select i:before { content: ''; position: absolute; right: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; } .smart-form .select i:after { bottom: 0; border-top: 4px solid #404040; } .smart-form .select i:before { top: 0; border-bottom: 4px solid #404040; } .smart-form .select-multiple select { height: auto; } /* * Text areas */ .smart-form .textarea textarea { height: auto; resize: none; } .smart-form .textarea-resizable textarea { resize: vertical; } .smart-form .textarea-expandable textarea { height: 31px; } .smart-form .textarea-expandable textarea:focus { height: auto; } /* * Radio and checkboxes */ .smart-form .radio, .smart-form .checkbox { margin-bottom: 4px; padding-left: 25px; line-height: 25px; color: #404040; cursor: pointer; font-size: 13px; } .smart-form .radio:last-child, .smart-form .checkbox:last-child { margin-bottom: 0; } .smart-form .radio input, .smart-form .checkbox input { position: absolute; left: -9999px; } .smart-form .radio i, .smart-form .checkbox i { position: absolute; top: 3px; left: 0; display: block; width: 17px; height: 17px; outline: none; border-width: 1px; border-style: solid; background: #FFF; } .smart-form .radio i { border-radius: 50%; } .smart-form .radio input + i:after, .smart-form .checkbox input + i:after { position: absolute; opacity: 0; transition: opacity 0.1s; -o-transition: opacity 0.1s; -ms-transition: opacity 0.1s; -moz-transition: opacity 0.1s; -webkit-transition: opacity 0.1s; } .smart-form .radio input + i:after { content: ''; top: 4px; left: 4px; width: 9px; height: 9px; border-radius: 50%; } .smart-form .checkbox input + i:after { content: '\f00c'; top: -1px; left: 1px; width: 15px; height: 15px; font: normal 16px/19px FontAwesome; text-align: center; } .smart-form .checkbox input:checked:hover + i:after { content: '\f00d'; } .smart-form .checkbox input:checked:disabled:hover + i:after { content: '\f00c'; } .smart-form .radio input:checked + i:after, .smart-form .checkbox input:checked + i:after { opacity: 1; } .smart-form .inline-group { margin: 0 -15px -4px 0; } .smart-form .inline-group:after { content: ''; display: table; clear: both; } .smart-form .inline-group .radio, .smart-form .inline-group .checkbox { float: left; margin-right: 30px; } .smart-form .inline-group .radio:last-child, .smart-form .inline-group .checkbox:last-child { margin-bottom: 4px; } /* * toggles */ .smart-form .toggle { margin-bottom: 4px; padding-right: 61px; font-size: 15px; line-height: 25px; color: #404040; cursor: pointer; } .smart-form .toggle:last-child { margin-bottom: 0; } .smart-form .toggle input { position: absolute; left: -9999px; } .smart-form .toggle i { content: ''; position: absolute; top: 4px; right: 0; display: block; width: 49px; height: 17px; border-width: 1px; border-style: solid; border-radius: 12px; background: #fff; } .smart-form .toggle i:after { content: attr(data-swchoff-text); position: absolute; top: 2px; right: 8px; left: 8px; font-style: normal; font-size: 9px; line-height: 13px; font-weight: 700; text-align: left; color: #5f5f5f; } .smart-form .toggle i:before { content: ''; position: absolute; z-index: 1; top: 4px; right: 4px; display: block; width: 9px; height: 9px; border-radius: 50%; opacity: 1; transition: right 0.2s; -o-transition: right 0.2s; -ms-transition: right 0.2s; -moz-transition: right 0.2s; -webkit-transition: right 0.2s; } .smart-form .toggle input:checked + i:after { content: attr(data-swchon-text); text-align: right; } .smart-form .toggle input:checked + i:before { right: 36px; } /* * ratings */ .smart-form .rating { margin-bottom: 4px; font-size: 13px; line-height: 25px; color: #404040; } .smart-form .rating:last-child { margin-bottom: 0; } .smart-form .rating input { position: absolute; left: -9999px; } .smart-form .rating label { display: block; float: right; height: 17px; margin-top: 5px; padding: 0 2px; font-size: 17px; line-height: 17px; cursor: pointer; } /* * buttons */ .smart-form .button { float: right; height: 31px; overflow: hidden; margin: 10px 0 0 5px; padding: 0 25px; outline: none; border: 0; font: 300 15px/31px 'Open Sans', Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; cursor: pointer; } .smart-form .icon-append, .smart-form .icon-prepend { position: absolute; top: 5px; width: 22px; height: 22px; font-size: 14px; line-height: 22px; text-align: center; } .smart-form .icon-append { right: 5px; padding-left: 3px; border-left-width: 1px; border-left-style: solid; } .smart-form .icon-prepend { left: 5px; padding-right: 3px; border-right-width: 1px; border-right-style: solid; } .smart-form .input .icon-prepend + input, .smart-form .textarea .icon-prepend + textarea { padding-left: 37px; } .smart-form .input .icon-append + input, .smart-form .textarea .icon-append + textarea { padding-right: 37px; } .smart-form .input .icon-prepend + .icon-append + input, .smart-form .textarea .icon-prepend + .icon-append + textarea { padding-left: 37px; } /* * grid */ .smart-form .row { margin: 0 -15px; } .smart-form .row:after { content: ''; display: table; clear: both; } .smart-form .col { float: left; min-height: 1px; padding-right: 15px; padding-left: 15px; box-sizing: border-box; -moz-box-sizing: border-box; } .smart-form .col-1 { width: 8.33%; } .smart-form .col-2 { width: 16.66%; } .smart-form .col-3 { width: 25%; } .smart-form .col-4 { width: 33.33%; } .smart-form .col-5 { width: 41.66%; } .smart-form .col-6 { width: 50%; } .smart-form .col-8 { width: 66.67%; } .smart-form .col-9 { width: 75%; } .smart-form .col-10 { width: 83.33%; } @media screen and (max-width: 600px) { .smart-form .col { float: none; width: 100%; } } /* * tooltips */ .smart-form .select select { padding: 5px; } .smart-form .tooltip { position: absolute; z-index: 99999; left: -9999px; padding: 2px 8px 3px; font-size: 11px; line-height: 16px; font-weight: 400; background: rgba(0, 0, 0, 0.9); color: #fff; opacity: 0; transition: margin 0.3s, opacity 0.3s; -o-transition: margin 0.3s, opacity 0.3s; -ms-transition: margin 0.3s, opacity 0.3s; -moz-transition: margin 0.3s, opacity 0.3s; -webkit-transition: margin 0.3s, opacity 0.3s; } .smart-form .tooltip:after { content: ''; position: absolute; } .smart-form .input input:focus + .tooltip, .smart-form .textarea textarea:focus + .tooltip { opacity: 1; } .smart-form .tooltip-top-right { bottom: 100%; margin-bottom: 15px; } .smart-form .tooltip-top-right:after { top: 100%; right: 11px; border-top: 4px solid rgba(0, 0, 0, 0.9); border-right: 4px solid transparent; border-left: 4px solid transparent; } .smart-form .input input:focus + .tooltip-top-right, .smart-form .textarea textarea:focus + .tooltip-top-right { right: 0; left: auto; margin-bottom: 5px; } .smart-form .tooltip-top-left { bottom: 100%; margin-bottom: 15px; } .smart-form .tooltip-top-left:after { top: 100%; left: 11px; border-top: 4px solid rgba(0, 0, 0, 0.9); border-right: 4px solid transparent; border-left: 4px solid transparent; } .smart-form .input input:focus + .tooltip-top-left, .smart-form .textarea textarea:focus + .tooltip-top-left { right: auto; left: 0; margin-bottom: 5px; } .smart-form .tooltip-right { top: 4px; white-space: nowrap; margin-left: 15px; } .smart-form .tooltip-right:after { top: 6px; right: 100%; border-top: 4px solid transparent; border-right: 4px solid rgba(0, 0, 0, 0.9); border-bottom: 4px solid transparent; } .smart-form .input input:focus + .tooltip-right, .smart-form .textarea textarea:focus + .tooltip-right { left: 100%; margin-left: 5px; } .smart-form .tooltip-left { top: 4px; white-space: nowrap; margin-right: 15px; } .smart-form .tooltip-left:after { top: 6px; left: 100%; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid rgba(0, 0, 0, 0.9); } .smart-form .input input:focus + .tooltip-left, .smart-form .textarea textarea:focus + .tooltip-left { right: 100%; left: auto; margin-right: 5px; } .smart-form .tooltip-bottom-right { top: 100%; margin-top: 15px; } .smart-form .tooltip-bottom-right:after { bottom: 100%; right: 11px; border-right: 4px solid transparent; border-bottom: 4px solid rgba(0, 0, 0, 0.9); border-left: 4px solid transparent; } .smart-form .input input:focus + .tooltip-bottom-right, .smart-form .textarea textarea:focus + .tooltip-bottom-right { right: 0; left: auto; margin-top: 5px; } .smart-form .tooltip-bottom-left { top: 100%; margin-top: 15px; } .smart-form .tooltip-bottom-left:after { bottom: 100%; left: 11px; border-right: 4px solid transparent; border-bottom: 4px solid rgba(0, 0, 0, 0.9); border-left: 4px solid transparent; } .smart-form .input input:focus + .tooltip-bottom-left, .smart-form .textarea textarea:focus + .tooltip-bottom-left { right: auto; left: 0; margin-top: 5px; } /* * normal state */ .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea, .smart-form .radio i, .smart-form .checkbox i, .smart-form .toggle i, .smart-form .icon-append, .smart-form .icon-prepend { border-color: #BDBDBD; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; } .smart-form .toggle i:before { background-color: #3276B1; } .smart-form .rating label { color: #ccc; transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; -moz-transition: color 0.3s; -webkit-transition: color 0.3s; } .smart-form .button { background-color: #3276B1; opacity: 0.8; transition: opacity 0.2s; -o-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; } .smart-form .button.button-secondary { background-color: #b3b3b3; } .smart-form .icon-append, .smart-form .icon-prepend { color: #A2A2A2; } /* * hover state */ .smart-form .input:hover input, .smart-form .select:hover select, .smart-form .textarea:hover textarea, .smart-form .radio:hover i, .smart-form .checkbox:hover i, .smart-form .toggle:hover i { border-color: #5D98CC; } .smart-form .rating input + label:hover, .smart-form .rating input + label:hover ~ label { color: #3276B1; } .smart-form .button:hover { opacity: 1; } .smart-form .radio:hover i, .smart-form .checkbox:hover i, .smart-form .toggle:hover i { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } /* * radio/toggle/checkbox active state */ .smart-form .radio:active i, .smart-form .checkbox:active i, .smart-form .toggle:active i { background: #F0F0F0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } /* * focus state */ .smart-form .input input:focus, .smart-form .select select:focus, .smart-form .textarea textarea:focus, .smart-form .radio input:focus + i, .smart-form .checkbox input:focus + i, .smart-form .toggle input:focus + i { border-color: #3276B1; } /* * checked state */ .smart-form .radio input + i:after { background-color: #3276B1; } .smart-form .checkbox input + i:after { color: #3276B1; } .smart-form .radio input:checked + i, .smart-form .checkbox input:checked + i, .smart-form .toggle input:checked + i { border-color: #3276B1; } .smart-form .rating input:checked ~ label { color: #3276B1; } /* * error state */ .smart-form .state-error input, .smart-form .state-error select, .smart-form .state-error textarea, .smart-form .radio.state-error i, .smart-form .checkbox.state-error i, .smart-form .toggle.state-error i { background: #fff0f0; border-color: #A90329; } .smart-form .toggle.state-error input:checked + i { background: #fff0f0; } .smart-form .state-error + em { display: block; margin-top: 6px; padding: 0 1px; font-style: normal; font-size: 11px; line-height: 15px; color: #D56161; } .smart-form .rating.state-error + em { margin-top: -4px; margin-bottom: 4px; } .smart-form .state-error select + i { background: #FFF0F0; box-shadow: 0 0 0 9px #FFF0F0; } .state-error .icon-append, .state-error .icon-prepend { color: #ed1c24; } /* * success state */ .smart-form .state-success input, .smart-form .state-success select, .smart-form .state-success textarea, .smart-form .radio.state-success i, .smart-form .checkbox.state-success i, .smart-form .toggle.state-success i { background: #f0fff0; border-color: #7DC27D; } .smart-form .toggle.state-success input:checked + i { background: #f0fff0; } .smart-form .note-success { color: #6fb679; } .smart-form .state-success select + i { background: honeyDew; box-shadow: 0 0 0 9px honeyDew; } /* * disable state */ .smart-form .input.state-disabled input, .smart-form .select.state-disabled, .smart-form .textarea.state-disabled, .smart-form .radio.state-disabled, .smart-form .checkbox.state-disabled, .smart-form .toggle.state-disabled, .smart-form .button.state-disabled { cursor: default !important; opacity: 0.6 !important; } .smart-form .input.state-disabled:hover input, .smart-form .select.state-disabled:hover select, .smart-form .textarea.state-disabled:hover textarea, .smart-form .radio.state-disabled:hover i, .smart-form .checkbox.state-disabled:hover i, .smart-form .toggle.state-disabled:hover i { border-color: #e5e5e5 !important; } .smart-form .state-disabled.radio input:checked + i, .smart-form .state-disabled.checkbox input:checked + i, .smart-form .state-disabled.toggle input:checked + i, .smart-form .state-disabled.checkbox input + i:after, .smart-form .state-disabled.radio input + i:after { border-color: #e5e5e5 !important; color: #333 !important; } .smart-form .state-disabled.radio input + i:after { background-color: #333; } /* * submit state */ .smart-form .message { display: none; color: #6fb679; } .smart-form .message i { display: block; margin: 0 auto 20px; width: 81px; height: 81px; border: 1px solid #6fb679; border-radius: 50%; font-size: 30px; line-height: 81px; } .smart-form.submited fieldset, .smart-form.submited footer { display: none; } .smart-form.submited .message { display: block; padding: 25px 30px; background: rgba(255, 255, 255, 0.9); font: 300 18px/27px 'Open Sans', Helvetica, Arial, sans-serif; text-align: center; } /* * JQUERY UI UPDATE */ .smart-form .ui-widget-content .ui-spinner-input { margin: 0px; border: 0px; box-shadow: none !important; height: 29px; } /* * date picker .ui-datepicker { display: none; padding: 10px 12px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.3); font: 13px/1.55 'Open Sans', Helvetica, Arial, sans-serif; text-align: center; color: #666; } .ui-datepicker a { color: #404040; } .ui-datepicker-header { position: relative; margin: -10px -12px 10px; padding: 10px; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 15px; line-height: 27px; } .ui-datepicker-prev, .ui-datepicker-next { position: absolute; top: 0; display: block; width: 47px; height: 47px; font-size: 15px; line-height: 47px; text-decoration: none; cursor: pointer; } .ui-datepicker-prev { left: 0; } .ui-datepicker-next { right: 0; } .ui-datepicker-calendar { border-collapse: collapse; font-size: 13px; line-height: 27px; } .ui-datepicker-calendar th { color: #999; } .ui-datepicker-calendar a, .ui-datepicker-calendar span { display: block; width: 31px; margin: auto; text-decoration: none; color: #404040; text-align:center; } .ui-datepicker-unselectable.ui-state-disabled { } .ui-datepicker-unselectable.ui-state-disabled > span { color:#bfbfbf; background-color: #FAFCFD; } .ui-datepicker-calendar a:hover { background: #3276B1; color:#fff; } .ui-datepicker-calendar span { } .ui-datepicker-today a { font-weight: 700; } .ui-datepicker-calendar .ui-state-active { background: rgba(0,0,0,.05); cursor: default; } .ui-datepicker-inline { border: 2px solid #e5e5e5; background: #fff; box-shadow: none; } .ui-datepicker-inline .ui-datepicker-calendar { width: 100%; } */ /* * model */ .smart-form-modal { position: fixed; z-index: 1; display: none; width: 400px; } .smart-form-modal-overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } /* * Time picker */ .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { float: left; clear: left; padding: 0 0 0 5px; } .ui-timepicker-div dl dd { margin: 17px 10px 12px 40%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-rtl { direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt { float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; } /* * Large, small and extra small fields */ .smart-form input.input-lg { height: 44px; padding: 10px 16px; font-size: 17px; line-height: 1.33; } .smart-form input.input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; } .smart-form input.input-xs { height: 24px; padding: 2px 10px; font-size: 11px; line-height: 1.5; } /* SELECT */ .smart-form select.input-sm { height: 30px; line-height: 15px; font-size: 12px; } .smart-form select.input-sm + i { height: 10px; } .smart-form select.input-lg { height: 44px; line-height: 22px; font-size: 17px; } .smart-form select.input-lg + i { height: 11px; top: 17px; } /* aep fix for aspnet mvc from abelepereira */ .smart-form .checkbox input + input[type=hidden] + i:after { content: '\f00c'; top: -1px; left: 1px; width: 15px; height: 15px; font: normal 16px/19px FontAwesome; text-align: center; } .smart-form .checkbox input:checked:hover + input[type=hidden] + i:after { content: '\f00d'; } .smart-form .checkbox input:checked:disabled:hover + input[type=hidden] + i:after { content: '\f00c'; } .smart-form .checkbox input:checked + input[type=hidden] + i:after { opacity: 1; } /* toogle fix */ .smart-form .toggle input:checked + input[type=hidden] + i:after { content: attr(data-swchon-text); text-align: right; } .smart-form .toggle input:checked + input[type=hidden] + i:before { right: 36px; } /* end of fix */ /* * Error Page */ .error-box { max-width: 900px; margin: 0 auto; } .error-text { font-weight: 400; color: #ffffff; letter-spacing: -4px; font-size: 700%; margin-bottom: 30px; text-shadow: 0 1px 0 #cccccc, 0 2px 0 #bfbfbf, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); } .error-search { width: 300px; margin: 0 auto 20px; } .error-icon-shadow { text-shadow: 0 1px 0 #803838, 0 2px 0 #a85d5d, 0 3px 0 #b86565, 0 4px 0 #d86f6f, 0 5px 0 #b3a5a5, 0 6px 1px rgba(131, 51, 51, 0.1), 0 0 5px rgba(102, 30, 30, 0.1), 0 1px 3px rgba(95, 15, 15, 0.3), 0 3px 5px rgba(100, 23, 23, 0.2), 0 5px 10px rgba(114, 30, 30, 0.25), 0 10px 10px rgba(94, 15, 15, 0.2), 0 20px 20px rgba(121, 38, 38, 0.15); } /* * LOGIN/REGISTER/EXTR PAGE */ .display-image { margin-top: -60px; margin-right: 20px; } .terms-body { max-height: 400px; overflow: auto; } #extr-page { background: #ffffff; overflow: visible; } #extr-page .container { border: none; } #extr-page #header { margin: 0; height: 71px; border-bottom: 1px solid #eeeeee !important; overflow: hidden; padding: 0 30px; background-clip: padding-box; border-width: 0; min-height: 28px; background: #f4f4f4 !important; /*margin-bottom:20px;*/ } #extr-page #main { padding-top: 20px; } #extr-page #header #logo { margin-top: 10px; margin-left: 0px; } #extr-page #header #logo img { width: 137px; } #extr-page-header-space { float: right; text-align: right; display: block; vertical-align: middle; line-height: 71px; } #extr-page-header-space > :first-child { font-size: 13px; margin-right: 14px; vertical-align: -3px; font-weight: 400; } #extr-page-header-space .btn { font-weight: bold; text-transform: uppercase; } #extr-page-header-space > * { display: inline-block; } #extr-page #main { /*background: #ffffff;*/ margin: 0; } #extr-page .hero { background-image: url("../img/gradient-login.png"); background-repeat: no-repeat; background-position: 0 137px; height: 360px; width: 100%; float: left; } #extr-page h4.paragraph-header { color: #565656; font-size: 15px; font-weight: normal; line-height: 22px; margin-top: 15px; width: 270px; } #extr-page h5.about-heading { color: #565656; font-size: 15px; font-weight: bold; line-height: 24px; margin: 0 0 5px; } #extr-page .login-header-big { font-weight: 400; } #extr-page .login-desc-box-l { min-height: 350px; width: 50%; } #extr-page .login-app-icons { vertical-align: top; margin-top: 90px; width: 300px; } @media (min-width: 768px) and (max-width: 880px) { #extr-page #header { padding: 0 5px !important; } } @media only screen and (min-width: 0px) and (max-width: 679px) { #extr-page #header { padding: 0 5px !important; } #extr-page #header #logo img { width: 135px; } #extr-page #header #logo { margin-top: 10px; } } /* * Select color */ .btn-select-tick i { display: none; } .btn-select-tick .btn:hover i { opacity: .3; display: block; } .btn-select-tick .active i { display: block; opacity: 1 !important; } /* * Drag and drop events */ #external-events > li { margin: 6px 4px 6px 0; display: inline-block; } #external-events > li > :first-child { padding: 5px 10px 10px; cursor: move; display: block; } #external-events > li > :first-child:after { color: #ffffff; color: rgba(255, 255, 255, 0.7); content: attr(data-description); font-size: 11px; font-weight: 400; display: block; line-height: 0; margin: 7px 0; text-transform: lowercase; } /* * INBOX */ .table-wrap { overflow: auto; } .inbox-body { position: relative; } .inbox-body .table-wrap { background: #ffffff; padding: 10px 14px 7px; position: relative; margin-left: 200px; overflow-x: hidden; } .inbox-body.no-content-padding { margin-top: 0; background: #ffffff; overflow: hidden; } .inbox-nav-bar { height: 70px; margin-bottom: 0; /*border-bottom: 1px solid #CECECE;*/ padding: 20px 14px; background: #ffffff; } .inbox-nav-bar .page-title { display: inline-block; margin: 0; width: 196px; line-height: 33px; vertical-align: middle; } .inbox-footer { position: absolute; bottom: -53px; } .inbox-paging { margin-left: 10px; } .inbox-footer .btn-group { margin-left: 10px; } #inbox-table { font-size: 13px; border-top: none; border-left-color: transparent !important; border-right-color: transparent !important; } #inbox-table tbody tr:hover { cursor: pointer; background: #E4E4E4; } #inbox-table tr td { border-right: none; border-left: none; line-height: 26px; padding: 6px 4px 7px !important; } #inbox-table .inbox-table-icon { padding-left: 15px !important; } #inbox-table tbody tr th { overflow: hidden; } #inbox-table.table tbody > tr > td { border-color: #fff !important; } #inbox-table .radio, #inbox-table .checkbox { margin-top: -1px; margin-bottom: 0px; } .inbox-table-icon, .inbox-data-attachment { width: 28px; text-align: left; padding-left: 12px !important; padding-right: 0px !important; } .inbox-data-from { width: 200px; } .inbox-data-from > :first-child { width: 200px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-data-date { width: 80px; padding-left: 7px !important; padding-right: 0px !important; } .inbox-data-message > :first-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 27px; color: #8A8A8A; } .inbox-data-message > :first-child span { color: #111; } .inbox-data-message > :first-child span.label { color: #ffffff; } .inbox-data-message > :first-child > :first-child:after { content: " - "; } .unread td { background: #ffffff; } .unread .inbox-data-message > :first-child > :first-child, .unread .inbox-data-from > :first-child, .unread .inbox-data-date > :first-child { font-weight: bold; } tr.highlight td, tr.unread.highlight td { background: #ffffcc !important; /*#ffffcc;*/ color: #333333; } .inbox-checkbox-triggered { display: inline-block; } .inbox-checkbox-triggered > .btn-group { margin-right: 10px; } .inbox-checkbox-triggered > .btn-group .btn { padding-left: 14px; padding-right: 14px; } .inbox-side-bar { height: 100%; position: absolute; background: #ffffff; display: block; width: 200px; padding: 10px 0 10px 14px; /*overflow-y: auto; overflow-x: hidden;*/ -webkit-overflow-scrolling: touch; z-index: 1; } .inbox-side-bar::-webkit-scrollbar { width: 0 !important; } .inbox-side-bar h6 { font-weight: normal; font-size: 11px; display: block; padding: 0px 15px; text-transform: uppercase; color: #838383; } .inbox-side-bar h6 a { font-size: 14px; margin-top: -2px; } .inbox-side-bar h6 .tooltip { text-transform: none !important; } .inbox-side-bar > .btn { margin-bottom: 35px; } .inbox-side-bar .input-group { margin-bottom: 25px; } #compose-mail-mini { margin-left: 4px; } .inbox-space { display: block; width: 185px; } .inbox-space > .progress { margin-top: 5px; } .inbox-menu-lg { list-style: none; padding: 0; margin: 0 0 20px 0; } .inbox-menu-lg li a { display: block; padding: 6px 15px 7px; font-size: 13px; color: #333333; } .inbox-menu-lg li { display: block; width: 100%; } .inbox-menu-lg li a:hover { text-decoration: none; background: #f4f4f4; } .inbox-menu-lg li.active a { font-weight: bold; background: #F0F0F0; border-bottom: 1px solid #E7E7E7; color: #3276b1; } .inbox-menu-sm { list-style: none; padding: 0; margin: 0 0 20px 0; } .inbox-menu-sm li a { display: block; padding: 8px 15px 10px; font-size: 13px; color: #333333; } .inbox-menu-sm li { display: block; width: 100%; } .inbox-menu-sm li a:hover { text-decoration: none; background: #f4f4f4; } .inbox-menu-sm li.active a { font-weight: bold; background: #F0F0F0; border-bottom: 1px solid #E7E7E7; color: #3276b1; } /* * Email opened */ .email-open-header { margin: -10px 0 0 0; font-size: 20px; border-bottom: 1px solid #bfbfbf; border-top: 1px solid #eeeeee; padding: 15px 3px; } .email-open-header > span { font-size: 10px; font-weight: normal; padding: 3px 5px; letter-spacing: normal; text-transform: uppercase; vertical-align: middle; line-height: 33px; background: #ACACAC; } .inbox-info-bar { padding: 10px 0px; border-bottom: 1px solid #bfbfbf; } .inbox-info-bar img { width: 35px; height: auto; display: inline-block; vertical-align: middle; margin-right: 7px; margin-left: 2px; border-left: 3px solid #ffffff; } .inbox-message, .inbox-download { padding: 15px 4px; border-bottom: 1px solid #bfbfbf; } .inbox-download-list { list-style: none; margin: 5px 0 0; padding: 0; } .inbox-download-list li { display: inline-block; margin: 0 5px 0 0; vertical-align: top; } .inbox-download-list li > :first-child { margin-bottom: 0; width: 150px; overflow: hidden; } .inbox-download-list li > :first-child:hover { background: #ffffff; border-color: #C0C0C0; } .inbox-download-list li > :first-child > :first-child { text-align: center; display: block; color: #D6D6D6; } .inbox-download-list li > :first-child > :first-child > .fa { font-size: 150px; } .inbox-download-list li > :first-child > :first-child > img { max-width: 120px; } .inbox-compose-footer { padding: 10px; background: #F5F5F5; border-bottom: 1px solid #A9A9A9; } /* added space for large width devices */ .inbox-info-bar, .inbox-message, .inbox-download, .inbox-compose-footer { margin-right: 240px; position: relative; } .email-infobox { display: block; width: 180px; border-bottom: 1px solid #bfbfbf; padding-bottom: 0px; padding-top: 15px; position: absolute; top: 65px; right: 15px; } /* compose email */ .inbox-info-bar .form-group { margin: 0; } .inbox-info-bar .form-group input, .inbox-info-bar .select2-container-multi .select2-choices { border-color: #ffffff !important; } .inbox-info-bar .select2-selection--multiple { border-color: #ffffff !important; } .inbox-info-bar .select2-choices > div { display: none; } .inbox-info-bar .col-md-1, .inbox-info-bar .col-md-11 { padding-left: 0px; padding-right: 0px; } .fileinput { padding-top: 3px; } .hidden { display: none; } .inbox-info-bar em { position: absolute; top: 6px; right: 20px; text-align: right; font-style: normal; } /* email reply text */ .email-reply-text > div { border-left: 1px solid #D6D6D6; padding-left: 10px; margin-left: 50px; color: #A9A9A9; } /* reply text area */ .inbox-body .note-editor .note-editable { height: 100% important; } .email-reply-text > :first-child { padding-left: 45px; } @media (max-width: 1280px) { .inbox-info-bar, .inbox-message, .inbox-compose-footer { margin-right: 0px; } .email-infobox { display: none; } } @media (max-width: 1024px) { .inbox-side-bar { display: none !important; } .inbox-body .table-wrap { margin-left: 0px !important; } .inbox-info-bar .col-md-1, .inbox-info-bar .col-md-11 { padding-left: 26px; padding-right: 26px; } } /* hide helper inside inbox as it has issues with z-index */ #inbox-content [data-event="showHelpDialog"], #inbox-content [data-event="codeview"], #inbox-content .note-insert { display: none !important; } #inbox-content [data-event="fullscreen"] { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } /* adjust buttons */ #inbox-content .note-toolbar .btn-sm { padding: 2px 6px 3px; font-size: 14px; } /* adjust width of dropdowns */ #inbox-content .note-toolbar .note-para .dropdown-menu { min-width: 180px; } /* * PROFILE PAGE */ .profile-pic { text-align: right; } .profile-pic > img { border-radius: 0%; position: relative; border: 5px solid #ffffff; top: -30px; left: 10px; display: inline-block; text-align: right; z-index: 4; max-width: 100px; margin-bottom: -30px; } .profile-carousel .carousel-inner { max-height: 150px; } .friends-list li { margin-bottom: 10px; margin-right: 3px; padding: 0; } .friends-list img { width: 35px; border: 1px solid #ffffff; outline: 1px solid #bfbfbf; } .profile-link-btn { color: #999999; font-size: 14px; } /* * Calendar Icon */ time.icon { font-size: 14px; /* change icon size */ display: block; position: relative; width: 35px; height: 43px; background-color: #fff; margin: 3px auto; border-radius: 7px; box-shadow: 0 1px 0 #bdbdbd,0 2px 0 #fff,0 3px 0 #EEE9E9,0 4px 0 #fff,0 5px 0 #FFFFFF,0 0 0 1px #D3D3D3; overflow: hidden; } time.icon * { display: block; width: 100%; font-size: 10px; font-weight: bold; font-style: normal; text-align: center; } time.icon strong { position: absolute; top: 0; padding: 2px 0; color: #fff; background-color: #3a3633; -webkit-box-shadow: 0 2px 0 #3a3633; box-shadow: 0 2px 0 #3a3633; border-radius: 6px 6px 0 0; } time.icon em { position: absolute; bottom: 3px; color: #3276b1; } time.icon span { width: 100%; font-size: 15px; letter-spacing: -0.05em; padding-top: 21px; color: #2f2f2f; } /* * New users */ .user { display: block; float: left; width: 170px; margin: 0 15px 15px 0; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .user img { float: left; width: 35px; margin-right: 5px; } .user .email { color: #999; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } /* * SEARCH RESULTS */ .search-results { padding: 18px 5px; } .search-results + .search-results { border-top: 1px dashed #E3E3E3; } .search-results > :first-child { margin-bottom: 4px; font-weight: 400; } .search-results > :first-child a { text-decoration: underline; } .search-results .url { font-style: normal; font-size: 14px; } .search-results img { display: inline-block; margin-top: 4px; margin-right: 4px; width: 80px; } .search-results > div { display: inline-block; vertical-align: top; } .search-results .note { margin: 0; line-height: normal; } .search-results .note a { text-decoration: none !important; color: #333333; } .search-results .note a:hover { color: #ed1c24; } /* * TODO's */ .todo-group-title { margin: 0; line-height: 31px; padding: 0 0 0 10px; background: #fafafa; border-bottom: 1px solid #e7e7e7; border-top: 1px solid #f4f4f4; color: #999999; } .todo { margin: 0; padding: 0; min-height: 5px; list-style: none; } .todo > li { display: block; position: relative; overflow: hidden; border-bottom: 1px solid #e7e7e7; margin: 0 5px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAYAAADagWXwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RkQ1OEY4NTM4NUIxMUUzQjdCMUMxQzJCQUE3MTMxOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RkQ1OEY4NjM4NUIxMUUzQjdCMUMxQzJCQUE3MTMxOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRGRDU4RjgzMzg1QjExRTNCN0IxQzFDMkJBQTcxMzE4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRGRDU4Rjg0Mzg1QjExRTNCN0IxQzFDMkJBQTcxMzE4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pTD+wgAAACtJREFUeNpimDBhwn8gYABhdDYjiIELMDHgAUwTJ06Ea0VnjxpLO2MBAgwAGYZLegQbQ3UAAAAASUVORK5CYII=) 1px 11px no-repeat; } .todo > li:last-child, .todo > li:only-child { border-bottom: none; } .todo > li > :first-child { display: block; border-right: 1px solid #FFE1EB; height: 100%; padding: 6px 11px 6px 18px; width: 20px; vertical-align: top; position: absolute; } .todo > li > :first-child:hover { cursor: move; } .todo > li.complete > :first-child:hover { cursor: default; } .todo > li.complete { background: none; } .todo > li > p { height: 100%; margin-left: 52px; border-left: 1px solid #FFE1EB; display: inline-block; padding: 8px 0px 6px 7px; margin-bottom: 0; min-height: 37px; line-height: normal; font-size: 14px; font-weight: 500; color: #333333; } .todo > li > p > span { display: block; line-height: 12px; font-size: 10px; font-weight: normal; } .todo > li > p > :first-child { margin-top: -5px; color: #999999; margin-bottom: 4px; } .todo > li > p > .date { color: #bfbfbf; } .todo > li.complete > * { text-decoration: line-through; font-style: italic; } /* drag */ .todo > li.ui-sortable-helper { border-top: 1px solid #eeeeee; background: rgba(113, 132, 63, 0.1); } /* * TIMELINE PAGE */ /* Timeline */ .smart-timeline { position: relative; } .smart-timeline-list { list-style: none; margin: 0; padding: 0; } .smart-timeline-list:after { content: " "; background-color: #eeeeee; position: absolute; display: block; width: 2px; top: 0; left: 95px; bottom: 0; z-index: 1; } .smart-timeline-list li { position: relative; margin: 0; padding: 15px 0; } .smart-timeline-list > li:hover { background-color: #f4f4f4; } .smart-timeline-hover li:hover { background-color: #f9f9f9; } .smart-timeline-icon { background: #3276b1; color: #ffffff; border-radius: 50%; position: absolute; width: 32px; height: 32px; line-height: 28px; font-size: 14px; text-align: center; left: 80px; top: 10px; z-index: 100; padding: 2px; } .smart-timeline-icon > img { height: 32px; width: 32px; border-radius: 50%; margin-top: -2px; margin-left: -2px; border: 2px solid #3276b1; } .smart-timeline-time { float: left; width: 70px; text-align: right; } .smart-timeline-time > small { font-style: italic; } .smart-timeline-content { margin-left: 123px; } /* * FORUM PAGE */ .table-forum thead tr { background: none !important; } .table-forum thead tr th { font-size: 17px; font-weight: normal; border-bottom-color: #F1F1F1; } .table-forum tr td { border-top-style: dashed !important; padding-top: 12px !important; padding-bottom: 12px !important; } .table-forum tr td h4 { font-size: 15px; font-weight: 700; } .table-forum tr td h4 small { font-size: 13px; display: block; margin-top: 2px; } .table-forum tr td > i { margin-top: 4px; padding-left: 10px; } .table-forum tr.locked h4 > a:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f023"; } .table-forum tr.closed h4 > a { text-decoration: line-through; color: #848484; cursor: not-allowed; } .forum-attachment { margin-top: 20px; display: block; } .ajax-loading-error { margin-top: 70px; display: block; text-align: center; font-size: 23px; font-weight: bold; } .ajax-notifications .ajax-loading-error { text-align: center; margin-top: 20px; font-size: 15px; } .ajax-notifications .ajax-loading-animation { font-size: 15px; text-align: center; margin-top: 70px; } .project-members a { display: inline-block; overflow: hidden; margin: 0 3px 0 0; border-radius: 0px; } .smart-rtl.project-members a { margin: 0 0 0 3px; } .project-members img { width: 25px; border-radius: 0px; } .projects-table > tbody > tr > td { padding: 7px 10px 3px !important; } .status .who { border-bottom: 1px solid rgba(0, 0, 0, 0.07); padding: 20px; } .status .who img { float: left; height: 40px; margin-right: 10px; width: 40px; } .status .who .name { display: block; font-size: 13px; font-weight: normal; line-height: normal; } .status .who .name b { color: #57889c; } .status .who .from { font-size: 12px; opacity: 0.7; } .status .text { font-size: 13px; line-height: 1.82em; padding: 20px; } .status .image { padding: 20px; } .status .image img { width: 100%; } .status .links { border-top: 1px solid rgba(0, 0, 0, 0.07); margin: 0; padding: 15px 20px; background: #fafafa; } .status .links .fa { color: inherit; font-size: 14px; margin-right: 2px; } .status .links li { display: inline; padding-right: 20px; } .status .comments { border-top: 1px solid rgba(0, 0, 0, 0.07); font-size: 13px; padding: 0 20px; } .status .comments li { border-bottom: 1px solid rgba(0, 0, 0, 0.07); display: block; padding: 15px 0 15px 40px; position: relative; } .status .comments li:last-child { border-bottom: none; padding-bottom: 5px; } .status .comments img { height: 30px; left: 0px; position: absolute; width: 30px; } .status .comments .name { display: block; font-weight: 600; opacity: 0.8; } .status.panel-body { padding: 0px; } .well.connect { padding: 14px; } .well.connect img { border-radius: 50% 50% 0; } .status.vote .comments { padding: 0px !important; } .status.vote .comments li { padding: 10px 0 10px 20px !important; } .status.vote .comments li:last-child { padding-right: 20px !important; } blockquote.twitter-tweet { border-color: #eeeeee #dddddd #bbbbbb; border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); display: inline-block; font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif; font-size: 12px; font-weight: bold; line-height: 16px; margin: 10px 5px; width: calc(100% - 10px); padding: 0 16px 16px 16px; } blockquote.twitter-tweet p { font-size: 16px; font-weight: normal; line-height: 20px; } blockquote.twitter-tweet a { color: inherit; font-weight: normal; outline: 0 none; text-decoration: none; } blockquote.twitter-tweet a:hover { text-decoration: underline; } blockquote.twitter-tweet a:focus { text-decoration: underline; } /*.product-view { min-height: 380px; &> img { width:100%; height: auto; background: fade(#333,10%); } .price { position: absolute; right: 10px; margin-top: -35px; padding: 14px 15px 14px 19px; background: #ed1c24; color: #FFF; border-radius: 50%; font-size: 25px; font-weight: 300; &>b { font-weight: 300; position: absolute; margin-top: 1px; font-size: 16px; left: 10px; } } h2 { font-size:18px; } p { font-size: 12px; margin-top:3px; width:90%; width: calc(~"100% - 10px"); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }*/ .product-content { border: 1px solid #dfe5e9; margin-bottom: 20px; margin-top: 12px; background: #ffffff; } .product-content .carousel-control.left { margin-left: 0px; } .product-content .product-image { background-color: #ffffff; display: block; min-height: 238px; overflow: hidden; position: relative; } .product-content .product-deatil { border-bottom: 1px solid #dfe5e9; padding-bottom: 17px; padding-left: 16px; padding-top: 16px; position: relative; background: #ffffff; } .product-content .product-deatil h5 a { color: #2f383d; font-size: 15px; line-height: 19px; text-decoration: none; padding-left: 0px; margin-left: 0px; } .product-content .product-deatil h5 a span { color: #9aa7af; display: block; font-size: 13px; } .product-content .product-deatil p.price-container span { line-height: 15px; } .product-content .product-deatil span.tag1 { border-radius: 50%; color: #ffffff; font-size: 15px; height: 50px; padding: 13px 0px; position: absolute; right: 10px; text-align: center; top: 10px; width: 50px; } .product-content .product-deatil span.sale { background-color: #21c2f8; } .product-content .product-deatil span.discount { background-color: #71e134; } .product-content .product-deatil span.hot { background-color: #fa9442; } .product-content .description { font-size: 12.5px; line-height: 20px; padding: 10px 14px 16px 19px; background: #ffffff; } .product-content .product-info { padding: 11px 19px 10px 20px; } .product-content .product-info a.add-to-cart { color: #2f383d; font-size: 13px; padding-left: 16px; } .product-content name.a { padding: 5px 10px; margin-left: 16px; } .product-info.smart-form .btn { padding: 6px 12px; margin-left: 12px; margin-top: -10px; } .product-entry .product-deatil { border-bottom: 1px solid #dfe5e9; padding-bottom: 17px; padding-left: 16px; padding-top: 16px; position: relative; } .product-entry .product-deatil h5 a { color: #2f383d; font-size: 15px; line-height: 19px; text-decoration: none; } .product-entry .product-deatil h5 a span { color: #9aa7af; display: block; font-size: 13px; } .product-entry .product-deatil p.price-container span { line-height: 15px; } .load-more-btn { background-color: #21c2f8; border-bottom: 2px solid #037ca5; border-radius: 2px; border-top: 2px solid #00ccff; margin-top: 20px; padding: 9px 0px; width: 100%; } .product-block .product-deatil p.price-container span, .product-content .product-deatil p.price-container span, .product-entry .product-deatil p.price-container span, .shopping-items table tbody tr td p.price-container span, .shipping table tbody tr td p.price-container span { color: #21c2f8; font-family: 'Lato', sans-serif; font-size: 24px; line-height: 20px; } .product-info.smart-form .rating label { margin-top: 0px; } .product-wrap .product-image span.tag2 { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; padding: 10px 0px; color: #fff; font-size: 11px; text-align: center; } .product-wrap .product-image span.sale { background-color: #57889c; } .product-wrap .product-image span.hot { background-color: #a90329; } .shop-btn { position: relative; } .shop-btn > span { background: #a90329; display: inline-block; font-size: 10px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); font-weight: bold; border-radius: 50%; padding: 2px 4px 3px 4px !important; text-align: center; line-height: normal; width: 19px; top: -7px; left: -7px; } .description-tabs { padding: 30px 0px 5px 0px !important; } .description-tabs .tab-content { padding: 10px 0px; } .product-deatil { padding: 30px 30px 50px 30px; } .product-deatil hr + .description-tabs { padding: 0px 0px 5px 0px !important; } .product-deatil .carousel-control.right, .product-deatil .carousel-control.left { background: none !important; } .product-deatil .glyphicon { color: #3276b1; } .product-deatil .product-image { border-right: none !important; } .product-deatil .name { margin-top: 0px; margin-bottom: 0px; } .product-deatil .name small { display: block; } .product-deatil .name a { margin-left: 0px; } .product-deatil .price-container { font-size: 24px; margin: 0px; font-weight: 300; } .product-deatil .price-container small { font-size: 12px; } .product-deatil .fa-2x { font-size: 16px !important; } .product-deatil .fa-2x > h5 { font-size: 12px; margin: 0px; } .product-deatil .fa-2x + a, .product-deatil .fa-2x + a + a { font-size: 13px; } .product-deatil .certified { margin-top: 10px; } .product-deatil .certified ul { padding-left: 0px; } .product-deatil .certified ul li:not(first-child) { margin-left: -3px; } .product-deatil .certified ul li { display: inline-block; background-color: #f9f9f9; border: 1px solid #ccc; padding: 13px 19px; } .product-deatil .certified ul li:first-child { border-right: none; } .product-deatil .certified ul li a { text-align: left; font-size: 12px; color: #6d7a83; line-height: 16px; text-decoration: none; } .product-deatil .certified ul li a span { display: block; color: #21c2f8; font-size: 13px; font-weight: 700; text-align: center; } .product-deatil .message-text { width: calc(100% - 70px); } @media only screen and (min-width: 1024px) { .product-content .product-image { border-right: 1px solid #dfe5e9; margin-right: -13px; } .product-content .product-info { position: relative; } .product-content .product-info, .product-content .description, .product-content .product-deatil { margin-left: -13px; } .product-deatil.product-content .product-info, .product-deatil.product-content .description, .product-deatil.product-content .description { margin-left: 0; } } html { margin: 0; padding: 0; min-height: 100%; /*background: url('../img/mybg.png') #ffffff;*/ position: relative; } body { margin: 0; padding: 0; min-height: 100%; /*background: url('../img/mybg.png') #ffffff;*/ direction: ltr; } /* when mobile menu is active */ body.mobile-view-activated.hidden-menu { overflow-x: hidden; } body.modal-open { overflow: hidden !important; } a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner { outline: 0; } h1, h2, h3, h4 { margin: 0; font-family: "Open Sans", Arial, Helvetica, Sans-Serif; font-weight: 300; } .page-title { margin: 12px 0 28px; } .page-title span { font-size: 16px; color: #333333; display: inline-block; vertical-align: 1px; } label { font-weight: normal; } *:focus { outline: 0 !important; } /* * IE FIX for tap delay */ a, input, button { -ms-touch-action: none !important; } textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .input-sm, .input-lg, .input-xs, .form-control { border-radius: 0px !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; } .input-xs { height: 24px; padding: 2px 10px; font-size: 11px; line-height: 1.5; } .btn-xs { padding: 1px 5px; } .btn-sm { padding: 6px 10px 5px; } .btn-lg { padding: 10px 16px; } .no-space { margin: 0; } .no-space > [class*="col-"] { margin: 0 !important; padding-right: 0; padding-left: 0; } #content { padding: 10px 14px; position: relative; /*position:relative; left:0px;*/ } body.container { position: absolute; left: 0; right: 0; padding: 0; border-left: 1px solid #bfbfbf; border-right: 1px solid #bfbfbf; box-shadow: 0 2px 70px rgba(0, 0, 0, 0.45); } body.container.hidden-menu:not(.mobile-view-activated) { overflow: hidden; } body.container.modal-open { padding: 0px !important; } /* * Headers */ h1 { letter-spacing: -1px; font-size: 24px; margin: 10px 0; } h1 small { font-size: 18px; font-weight: 300; letter-spacing: -1px; } .lead { font-size: 19px; } h2 { letter-spacing: -1px; font-size: 22px; margin: 20px 0; line-height: normal; } h3 { display: block; font-size: 19px; font-weight: 400; margin: 20px 0; line-height: normal; } h4 { line-height: normal; } h5 { font-size: 17px; font-weight: 300; margin: 10px 0; line-height: normal; } h6 { font-size: 15px; margin: 10px 0; font-weight: bold; line-height: normal; } .row-seperator-header { margin: 15px 14px 20px; border-bottom: none; display: block; color: #646464; font-size: 20px; font-weight: 400; } /* * Footer * see: main-page-footer.less */ /* * Center Canvas */ .center-canvas, .center-child-canvas > canvas { display: block !important; margin: 0 auto !important; } /* * JUST A BORDER */ .bordered { border: 1px solid rgba(0, 0, 0, 0.2); } .bordered:hover { border: 1px solid rgba(0, 0, 0, 0.4); } /* * *************************************************** * MAIN LAYOUT START * *************************************************** */ aside { display: block; /*overflow: hidden;*/ background: #3a3633; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMzYTM2MzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMmEyNzI1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg=="); background: -moz-linear-gradient(left, #3a3633 93%, #2a2725 100%); background: -webkit-gradient(linear, left top, right top, color-stop(93%, #3a3633), color-stop(100%, #2a2725)); background: -webkit-linear-gradient(left, #3a3633 93%, #2a2725 100%); background: -o-linear-gradient(left, #3a3633 93%, #2a2725 100%); background: -ms-linear-gradient(left, #3a3633 93%, #2a2725 100%); background: linear-gradient(to right, #3a3633 93%, #2a2725 100%); min-height: 100%; } /* * HEADER GROUP */ #header { display: block; height: 49px; margin: 0; padding: 0 13px 0 0; background-color: #f3f3f3; background-image: -moz-linear-gradient(top, #f3f3f3, #e2e2e2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); background-image: -webkit-linear-gradient(top, #f3f3f3, #e2e2e2); background-image: -o-linear-gradient(top, #f3f3f3, #e2e2e2); background-image: linear-gradient(to bottom, #f3f3f3, #e2e2e2); background-repeat: repeat-x; position: relative; z-index: 905; } #header > div { display: inline-block; vertical-align: middle; height: 49px; float: left; } #header > div.open { font-weight: bold; } .fixed-header #header { position: fixed; width: 100%; z-index: 905; top: 0px; border-bottom: 2px solid #999999; border-bottom: 1px solid rgba(0, 0, 0, 0.3); box-shadow: -11px 12px 23px rgba(0, 0, 0, 0.1); } /* as per version 1.3 */ .fixed-header.fixed-ribbon #header { border-bottom: none; box-shadow: none; } .container.fixed-header #header { max-width: 1164px; } .fixed-header #header .ajax-dropdown { z-index: 906; } .fixed-header #shortcut { position: fixed; } .fixed-header #main { margin-top: 49px; } #logo-group > span { display: inline-block; height: 39px; float: left; } #logo-group span#activity { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: default !important; display: inline-block; font-weight: bold; height: 24px; width: 24px; padding: 2px; text-align: center; text-decoration: none !important; -moz-user-select: none; -webkit-user-select: none; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1)); background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: linear-gradient(top, #f8f8f8, #f1f1f1); border: 1px solid #bfbfbf; color: #c4bab6; font-size: 19px; margin: 10px 0 0 0; position: relative; } #logo-group span#activity:hover { border: 1px solid #bfbfbf; transition: all 0.0s; cursor: pointer !important; -webkit-box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.08); } #logo { display: inline-block; width: 175px; margin-top: 13px; margin-left: 9px; } #logo img { width: 110px; height: auto; padding-left: 3px; } #activity b.badge { position: absolute; top: -5px; right: -5px; cursor: pointer; background: #0091d9; display: inline-block; font-size: 10px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); color: #ffffff; font-weight: bold; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; padding: 2px 4px 3px 4px; text-align: center; line-height: normal; } #activity.active .badge { background: #006fa6 !important; } #project-context, .project-context { display: inline-block; padding: 7px 13px 0; position: relative; } #project-context > span, .project-context > span { display: block; } #project-context > :first-child, .project-context > :first-child { display: block; color: #bfbfbf; font-size: 10px; font-weight: bold; text-transform: uppercase; text-shadow: 0 0 1px white; padding-left: 0px; text-align: left; } #project-selector, .project-selector { max-width: 97%; white-space: nowrap; background: none; border: none; padding: 0; text-align: left; color: #555555; font-size: 14px; cursor: pointer; } #project-selector:hover, .project-selector:hover { color: #333333; } .header-search { position: relative; } .header-search.pull-right { margin-left: 6px; } .header-search > input[type="text"] { display: block; box-sizing: border-box; -moz-box-sizing: border-box; min-width: 200px; width: 100%; height: 30px; padding: 0 10px; outline: none; border-width: 1px; border-style: solid; border-radius: 0; border-color: #bfbfbf; background: #ffffff; color: #404040; appearance: normal; -moz-appearance: none; -webkit-appearance: none; margin-top: 10px; line-height: normal; } .header-search > button { background: none; border: none; color: #6D6A69; font-size: 17px; height: 30px; line-height: 30px; margin: 0; padding: 0; position: absolute; right: 0px; top: 10px; width: 30px; z-index: 2; } #search-mobile { display: none; } #cancel-search-js { position: absolute; display: none; background: #a90329; z-index: 3; color: #ffffff; padding: 0; right: 10px; top: 10px; text-align: center; height: 29px; line-height: 29px; width: 30px; font-size: 17px; text-decoration: none !important; } #header > :first-child, aside { width: 220px; } /* * LEFT PANEL */ #left-panel { position: absolute; top: 0px; left: 0px; z-index: 904; padding-top: 49px; } /* * MAIN PANEL */ #main { margin-left: 220px; padding: 0; padding-bottom: 52px; position: relative; } /* * RIBBON */ #ribbon { min-height: 40px; background: #474544; padding: 0 13px; position: relative; } #ribbon .breadcrumb { display: inline-block; margin: 0; padding: 11px 34px 11px 0 !important; background: none; vertical-align: top; } #ribbon .breadcrumb a, #ribbon .breadcrumb { color: #BBB !important; text-decoration: none !Important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #E4E4E4; } .fixed-ribbon #ribbon { position: fixed; right: 0; left: 220px; top: 49px; z-index: 901; } .container.fixed-ribbon #ribbon { width: 944px; left: 590px; } .fixed-ribbon #content { padding-top: 50px; } .minified.fixed-ribbon #ribbon { left: 45px; } .hidden-menu.fixed-ribbon #ribbon { left: 10px; } /* * NAV * Menu CSS is learnt from: http://experiments.wemakesites.net/css3-treeview.html */ .fixed-navigation #left-panel { height: 100%; position: fixed; /*z-index: @fixed-navigation-zindex; */ } /* Add this if not using slimscroll*/ .fixed-navigation nav { -webkit-overflow-scrolling: touch; overflow-y: auto; height: 100%; padding-bottom: 49px; } .fixed-navigation nav > ul { padding-right: 15px; position: relative; height: 100%; width: 114%; overflow-x: hidden; overflow-y: scroll; } .mobile-detected.fixed-navigation nav > ul { padding-right: 30px !important; } /* Slimscrol CSS change: delete this if not using slimscroll .fixed-navigation nav { padding-bottom: 49px; } .fixed-navigation nav > ul { position: relative; } .slimScrollBar, .slimScrollRail { display:none !important; } .fixed-navigation .slimScrollBar, .fixed-navigation .slimScrollRail { display:block !important; } .minified .slimScrollBar { display:none !important; }*/ /* end slimscroll css change*/ .minified.fixed-navigation nav { -webkit-overflow-scrolling: none; overflow: visible; height: auto; padding-bottom: 0px; } .minified.fixed-navigation nav > ul { overflow: visible; padding-right: 0px; width: 100%; } /* All levels */ nav ul li a:active { background: #616161 !important; } /* All levels */ nav ul { width: 100%; padding: 40px 28px 25px 0; padding: 0; margin: 0; font-size: 13px; line-height: 0.5em; list-style: none; position: relative; } /* All levels */ nav ul .active > a { color: #fff !important; position: relative; } /* All levels */ nav ul li.active > a:before { content: "\f0d9"; font-family: FontAwesome; display: block; height: 27px; line-height: normal; width: 27px; position: absolute; right: -21px; font-size: 20px; color: #eeeeee; } nav ul li.active.open > a:before { content: ""; } nav > ul > li:last-child.open { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* All levels nav ul li { overflow: hidden; }*/ /* All levels */ nav ul li a { line-height: normal; font-size: 14px; padding: 10px 10px 10px 11px; color: #c0bbb7; display: block; font-weight: normal; text-decoration: none !important; position: relative; } /* Second level */ nav > ul > li > ul > li > a { padding-top: 7px; padding-bottom: 7px; } /* Third Level */ nav > ul > li > ul > li > ul > li > a { padding-top: 7px; padding-bottom: 7px; } /* All levels */ nav ul li a:focus { color: #c9c9c9; } /* All levels */ nav ul li a:hover { color: #ffffff; text-decoration: none; } nav ul li a.inactive, nav ul li a.inactive:hover { opacity: .5; cursor: not-allowed; color: #c0bbb7; } /* All levels */ nav ul b { float: right; font-size: 11px; margin-top: 2px; } /* All levels */ nav ul span.menu-item-parent { display: inline-block; margin: 0; padding: 0; } /* First level: A, Second level: LI Open */ nav ul li.open > a, nav ul li.open > a b { color: #fff !important; } /* First level: Icon */ nav > ul > li > a b { position: absolute !important; right: 10px; top: 10px; } nav > ul > li > a > i { /*font-size: 121%; fa-lg overrides this so.. */ margin-right: 5px; width: 15px; display: inline-block; text-align: center; position: relative; } /* First level icon */ nav > ul > li > a > i > em { font-size: 9px; display: block; padding: 2px; position: absolute; top: -8px; right: -6px; text-decoration: none; font-style: normal; background: #ED1C24; color: #ffffff; min-width: 13px; border-radius: 50%; max-height: 13px; line-height: 8px; font-weight: bold; vertical-align: baseline; white-space: nowrap; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); } /* Second level switched to relative */ nav ul li li { border-bottom: none; position: relative; } /* Second level: UL */ nav > ul > li > ul::before { content: ""; display: block; position: absolute; z-index: 1; left: 23px; top: 0; bottom: 0; border-left: 1px solid #7A7A7A; } /* Second level: UL LI */ nav > ul ul li::before { content: ""; display: block; position: absolute; width: 8px; left: 23px; top: 16px; border-top: 1px solid #7A7A7A; z-index: 1; } /* Third level: UL LI */ nav > ul ul ul li::before { content: ""; display: block; position: absolute; width: 18px; left: 10px; top: 17px; border-top: 1px solid transparent; } /* Second level and onwards > */ nav > ul ul li a i { font-size: 14px !important; width: 18px !important; text-align: center !important; vertical-align: 0 !important; line-height: 1 !important; } /* Second and Third level line color */ nav > ul > li:hover > ul::before, nav > ul > li:hover > ul > li::before { border-color: #ACACAC !important; } /* Second Level: UL */ nav ul ul { margin: 0; padding: 0; display: none; background: rgba(69, 69, 69, 0.6); } nav ul ul { padding: 7px 0; } /* Third Level: UL */ nav ul ul ul { background: transparent; padding: 0; } /* Third Level: LI */ nav ul ul li { margin: 0; padding: 0; } /* Second Level: A */ nav ul ul li > a { padding-left: 42px; font-size: 14px; font-weight: normal; outline: 0; } /* Second Level: A:hover */ nav ul ul li > a:hover { background-color: rgba(69, 69, 69, 0.8); color: #ffffff; } /* Third Level: A */ nav ul ul ul li a { color: #bfbfbf; padding: 8px 10px 8px 60px; font-size: 14px; } /* Third Level: A:hover */ nav ul ul ul li a:hover { color: #ffffff; } /* Fourth Level: A */ nav ul ul ul ul li a { padding-left: 80px; } /* Fifth Level: A */ nav ul ul ul ul ul li a { padding-left: 100px; } /* Sixth Level: A */ nav ul ul ul ul ul ul li a { padding-left: 120px; } /* Second level: B */ nav ul ul b { color: #B3B3B3; } /* Second level: LI:hover B */ nav ul ul > li:hover b { color: #D5D9E2; } /* * HEADER NAV DROPDOWN LIST */ .header-dropdown-list { list-style: none; float: right; position: relative; margin: 0px; padding-left: 0px; padding-right: 0px; } .header-dropdown-list > li { display: inline-block; padding-right: 5px; } .header-dropdown-list > li > .dropdown-toggle { margin-top: 16px; display: block; } /* * *************************************************** * MAIN LAYOUT END * *************************************************** */ /* * ACCORDIONS */ .smart-accordion-default.panel-group { margin-bottom: 0px; } .smart-accordion-default.panel-group .panel + .panel { margin-top: -1px; } .smart-accordion-default.panel-group .panel-heading { padding: 0px; } .smart-accordion-default.panel-group .panel-title a { display: block; padding: 10px 15px; text-decoration: none !important; } .smart-accordion-default .panel-heading, .panel-group .panel { border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } .smart-accordion-default .panel-default > .panel-heading { background-color: #fcfcfc; } .smart-accordion-default .panel-default { border-color: #c3c3c3; } .smart-accordion-default .panel-title > a > :first-child { display: none; } .smart-accordion-default .panel-title > a.collapsed > .fa { display: none; } .smart-accordion-default .panel-title > a.collapsed > :first-child { display: inline-block; } .no-padding .smart-accordion-default > div { border-left: none !important; border-right: none !important; } .no-padding .smart-accordion-default > div:first-child { border-top: none !important; } .no-padding .smart-accordion-default > div:last-child { border-bottom: none !important; } /* * ON OFF SWITCHES */ /* http://proto.io/freebies/onoff/ */ .onoffswitch-container { margin-top: 4px; margin-left: 7px; display: inline-block; } .onoffswitch { position: relative; width: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; margin-top: 3px; margin-bottom: 3px; margin-left: 5px; display: inline-block; vertical-align: middle; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 1px solid #626262; border-radius: 50px; border-color: #adadad #b3b3b3 #9e9e9e; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .onoffswitch-inner { width: 200%; margin-left: -100%; display: block; } .onoffswitch-inner:before, .onoffswitch-inner:after { float: left; width: 50%; height: 15px; padding: 0; line-height: 15px; font-size: 10px; color: #ffffff; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner:before { content: attr(data-swchon-text); text-shadow: 0 -1px 0 #333333; padding-left: 7px; background-color: #3276b1; color: #ffffff; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05); text-align: left; } .onoffswitch-inner:after { content: attr(data-swchoff-text); padding-right: 7px; text-shadow: 0 -1px 0 #ffffff; background-color: #ffffff; color: #555555; text-align: right; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .onoffswitch-switch { width: 19px; height: 19px; margin: -2px; background: white; border: 1px solid #9a9a9a; border-radius: 50px; position: absolute; top: 0; bottom: 0; right: 32px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background-color: #f4f4f4; background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee)); background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); background-image: -o-linear-gradient(top, #ffffff, #eeeeee); background-image: linear-gradient(to bottom, #ffffff, #eeeeee); background-repeat: repeat-x; -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); } .onoffswitch-checkbox + .onoffswitch-label .onoffswitch-switch:before, .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:before { content: "\f00d"; color: #a90329; display: block; text-align: center; line-height: 19px; font-size: 10px; text-shadow: 0 -1px 0 #ffffff; font-weight: bold; font-family: FontAwesome; } /* checked */ .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:before { content: "\f00c"; color: #57889c; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; display: block; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } .onoffswitch-switch:hover { background-color: #eeeeee; } .onoffswitch-switch:active { background-color: #eeeeee; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } /* * Disabled state */ .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner:after, .onoffswitch-checkbox:checked:disabled + .onoffswitch-label .onoffswitch-inner:before { text-shadow: 0 1px 0 #ffffff; background: #bfbfbf; color: #333333; } .onoffswitch-checkbox:checked:disabled + .onoffswitch-label .onoffswitch-switch, .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-switch { background-color: #f4f4f4; background-image: -moz-linear-gradient(top, #bfbfbf, #f4f4f4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), to(#f4f4f4)); background-image: -webkit-linear-gradient(top, #bfbfbf, #f4f4f4); background-image: -o-linear-gradient(top, #bfbfbf, #f4f4f4); background-image: linear-gradient(to bottom, #bfbfbf, #f4f4f4); box-shadow: none !important; } .onoffswitch-checkbox:disabled + .onoffswitch-label, .onoffswitch-checkbox:checked:disabled + .onoffswitch-label .onoffswitch-label { border-color: #ababab #999999 #878787 !important; } .onoffswitch-checkbox:checked + .onoffswitch-label { border-color: #3276b1 #2a6395 #255681; } .onoffswitch + span, .onoffswitch-title { display: inline-block; vertical-align: middle; margin-top: -5px; } /* * FORMS */ .form-control { box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } .form hr { margin-left: -13px; margin-right: -13px; border-color: rgba(0, 0, 0, 0.1); margin-top: 20px; margin-bottom: 20px; } .form fieldset { display: block; border: none; background: rgba(255, 255, 255, 0.9); position: relative; } fieldset { position: relative; } .form-actions { display: block; padding: 13px 14px 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); background: rgba(249, 249, 249, 0.9); margin-top: 25px; margin-left: -13px; margin-right: -13px; margin-bottom: -13px; text-align: right; } .well .form-actions { margin-left: -19px; margin-right: -19px; margin-bottom: -19px; } .well.well-lg .form-actions { margin-left: -24px; margin-right: -24px; margin-bottom: -24px; } .well.well-sm .form-actions { margin-left: -9px; margin-right: -9px; margin-bottom: -9px; } .popover-content .form-actions { margin: 0 -14px -9px; border-radius: 0 0 3px 3px; padding: 9px 14px; } .no-padding .form .form-actions { margin: 0; display: block; padding: 13px 14px 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); background: rgba(248, 248, 248, 0.9); text-align: right; margin-top: 25px; } .form header, legend, .bootstrap-duallistbox-container label { display: block; padding: 8px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); background: #ffffff; font-size: 16px; font-weight: 300; color: #222222; margin: 25px 0px 20px; } .no-padding .form header { margin: 25px 14px 0; } .form header:first-child { margin-top: 10px; } legend { font-weight: 400; margin-top: 0px; background: none; } .input-group-addon { padding: 6px 10px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .input-group-addon { transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; } .input-group-addon .fa { font-size: 14px; } .input-group-addon .fa-lg, .input-group-addon .fa-2x { font-size: 2em; } .input-group-addon .fa-3x, .input-group-addon .fa-4x, .input-group-addon .fa-5x { font-size: 30px; } input[type="text"]:focus + .input-group-addon { border-color: #0091d9; background-color: #72a0ce; color: #ffffff; } .has-warning input[type="text"], .has-warning input[type="text"] + .input-group-addon { border-color: #dbab57; } .has-warning input[type="text"] + .input-group-addon { background-color: #faf2cc; color: #c09853; } .has-warning input[type="text"]:focus, .has-warning input[type="text"]:focus + .input-group-addon { border-color: #dbab57; } .has-warning input[type="text"]:focus + .input-group-addon { background-color: #e1c118; color: #ffffff; } .has-error .input-group-addon { border-color: #b94a48; background: #f2dede; color: #b94a48; } .has-error input[type="text"], .has-error input[type="text"] + .input-group-addon { border-color: #b94a48; } .has-error input[type="text"] + .input-group-addon { background-color: #f2dede; color: #b94a48; } .has-error input[type="text"]:focus, .has-error input[type="text"]:focus + .input-group-addon { border-color: #c05e5e; } .has-error input[type="text"]:focus + .input-group-addon { background-color: #c05e5e; color: #ffffff; } .has-success input[type="text"]:focus + .input-group-addon { border-color: #468847; background-color: #468847; color: #ffffff; } .form fieldset .form-group:last-child, .form fieldset .form-group:last-child .note, .form .form-group:last-child, .form .form-group:last-child .note { margin-bottom: 0; } .note { margin-top: 6px; padding: 0 1px; font-size: 11px; line-height: 15px; color: #999999; } /* * WITH ICON */ .input-icon-right { position: relative; } .input-icon-right > i, .input-icon-left > i { position: absolute; right: 10px; top: 30%; font-size: 16px; color: #bfbfbf; } .input-icon-left > i { right: auto; left: 24px; } .input-icon-right .form-control { padding-right: 27px; } .input-icon-left .form-control { padding-left: 29px; } input[type="text"].ui-autocomplete-loading, input[type="password"].ui-autocomplete-loading, input[type="datetime"].ui-autocomplete-loading, input[type="datetime-local"].ui-autocomplete-loading, input[type="date"].ui-autocomplete-loading, input[type="month"].ui-autocomplete-loading, input[type="time"].ui-autocomplete-loading, input[type="week"].ui-autocomplete-loading, input[type="number"].ui-autocomplete-loading, input[type="email"].ui-autocomplete-loading, input[type="url"].ui-autocomplete-loading, input[type="search"].ui-autocomplete-loading, input[type="tel"].ui-autocomplete-loading, input[type="color"].ui-autocomplete-loading { background-image: url("../img/select2-spinner.gif") !important; background-repeat: no-repeat; background-position: 99% 50%; padding-right: 27px; } .input-group-addon .checkbox, .input-group-addon .radio { min-height: 0px; margin-right: 0px !important; padding-top: 0; } .input-group-addon label input[type="checkbox"].checkbox + span, .input-group-addon label input[type="radio"].radiobox + span, .input-group-addon label input[type="radio"].radiobox + span:before, .input-group-addon label input[type="checkbox"].checkbox + span:before { margin-right: 0px; } .input-group-addon .onoffswitch, .input-group-addon .onoffswitch-label { margin: 0; } /* * Timeline Seperator */ .timeline-seperator { display: block; text-align: center; color: #999999; margin: 20px 0 0; } .timeline-seperator > :first-child { padding: 4px 5px; border: 1px dashed rgba(0, 0, 0, 0.1); background: #ffffff; font-size: 11px; border-radius: 4px; } .timeline-seperator .btn, .timeline-seperator .btn + .dropdown-menu { margin-right: 15px; } .timeline-seperator:after { display: block; content: " "; margin: 0 20px; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); margin-top: -8px; } /* * Alerts */ .alert { margin-bottom: 20px; margin-top: 0px; padding: 5px 15px 5px 34px; color: #675100; border-width: 0px; border-left-width: 5px; padding: 10px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } .alert .close { top: 0px; right: -5px; line-height: 20px; } .alert-heading { font-weight: 600; } .alert-danger { border-color: #953b39; color: #ffffff; background-color: #c26565; text-shadow: none; } .alert-warning { border-color: #dfb56c; color: #826430; background-color: #efe1b3; } .alert-success { border-color: #8ac38b; color: #356635; background-color: #cde0c4; } .alert-info { border-color: #9cb4c5; color: #305d8c; background-color: #d6dde7; } /* * WELLS */ .well { background-color: #fbfbfb; border: 1px solid #dddddd; box-shadow: 0 1px 1px #ececec; -webkit-box-shadow: 0 1px 1px #ececec; -moz-box-shadow: 0 1px 1px #ececec; position: relative; } .well.well-clean { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: transparent; } .well.well-glass { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: transparent; background-color: rgba(255, 255, 255, 0.25); color: #ffffff; } .well.well-light { background: #ffffff; border: 1px solid #e2e2e2; } .widget-body .well { margin-bottom: 0px; } .well.transparent { border: none !important; background: none !important; } .jarviswidget.well.transparent > div, .jarviswidget.well.transparent > div .widget-body { padding: 0px !important; } /* any wells with custom bg the border will be darkened */ .well[class^="bg-"], .well[class*=" bg-"] { border: 1px solid #555555 !important; } /* * TABS */ .nav-tabs > li > a .badge { font-size: 11px; padding: 3px 5px 3px 5px; opacity: .5; margin-left: 5px; min-width: 17px; font-weight: normal; } .nav-tabs > li > a > .fa { opacity: .5; } .tabs-left .nav-tabs > li > a .badge { margin-right: 5px; margin-left: 0px; } .nav-tabs > li > a .label { display: inline-block; font-size: 11px; margin-left: 5px; opacity: .5; } .nav-tabs > li.active > a .badge, .nav-tabs > li.active > a .label, .nav-tabs > li.active > a > .fa { opacity: 1; } .nav-tabs > li > a { border-radius: 0px; color: #333333; } .nav-tabs > li.active > a { -webkit-box-shadow: 0 -2px 0 #57889c; -moz-box-shadow: 0 -2px 0 #57889c; box-shadow: 0 -2px 0 #57889c; border-top-width: 0px !important; margin-top: 1px !important; font-weight: bold; } .tabs-left .nav-tabs > li.active > a { -webkit-box-shadow: -2px 0 0 #57889c; -moz-box-shadow: -2px 0 0 #57889c; box-shadow: -2px 0 0 #57889c; border-top-width: 1px !important; border-left: none !important; margin-left: 1px !important; } .tabs-left .nav-pills > li.active > a { border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } .tabs-right .nav-tabs > li.active > a { -webkit-box-shadow: 2px 0 0 #57889c; -moz-box-shadow: 2px 0 0 #57889c; box-shadow: 2px 0 0 #57889c; border-top-width: 1px !important; border-right: none !important; margin-right: 1px !important; } .tabs-below .nav-tabs > li.active > a { -webkit-box-shadow: 0 2px 0 #57889c; -moz-box-shadow: 0 2px 0 #57889c; box-shadow: 0 2px 0 #57889c; border-bottom-width: 0px !important; border-top: none !important; margin-top: 0px !important; } .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-below > .nav-tabs { border-top: 1px solid #dddddd; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li, .tabs-left > .nav-pills > li, .tabs-right > .nav-pills > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a, .tabs-left > .nav-pills > li > a, .tabs-right > .nav-pills > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-left > .nav-tabs, .tabs-left > .nav-pills { float: left; margin-right: 19px; border-right: 1px solid #dddddd; } .tabs-left > .nav-pills { border-right: none; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #d5d5d5 #eeeeee #eeeeee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #d5d5d5 transparent #d5d5d5 #dddddd; *border-right-color: #ffffff; } .tabs-left > .tab-content { margin-left: 109px; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #dddddd; /* DDD */ } .tabs-right > .nav-tabs > li > a { margin-left: -1px; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #dddddd #dddddd #dddddd transparent; *border-left-color: #ffffff; } .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-below > .nav-tabs { border-top: 1px solid #dddddd; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-top-color: #dddddd; border-bottom-color: transparent; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus { border-color: transparent #dddddd #dddddd #dddddd; /* tabs */ } /* bordered tabs */ .nav-tabs.bordered { background: #ffffff; border: 1px solid #dddddd; } .nav-tabs.bordered > :first-child a { border-left-width: 0px !important; } .nav-tabs.bordered + .tab-content { border: 1px solid #dddddd; border-top: none; } /* bordered tabs top right */ .tabs-pull-right.nav-tabs > li, .tabs-pull-right.nav-pills > li { float: right; } .tabs-pull-right.nav-tabs > li:first-child > a, .tabs-pull-right.nav-pills > li:first-child > a { margin-right: 1px; } .tabs-pull-right.bordered.nav-tabs > li:first-child > a, .tabs-pull-right.bordered.nav-pills > li:first-child > a { border-left-width: 1px !important; margin-right: 0px; border-right-width: 0px; } /* jarviswidget header first child is tab */ .jarviswidget > header > .nav-tabs.pull-left > li:first-child a { border-left-width: 0px !important; } /* * WEBKIT IOS HIGHLIGHT COLOR * */ a:link, .btn, button { -webkit-tap-highlight-color: rgba(169, 3, 41, 0.5); } .login-info, .login-info *, #logo-group *, .minified .menu-item-parent { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* * BS2 useful classes * these classes and its importance was overlooked in BS3 */ .hidden-desktop { display: none !important; } /* * DROPDOWN MENU */ .dropdown-menu-xs { min-width: 37px; } .dropdown-menu-xs > li > a { padding: 3px 10px; } .dropdown-menu-xs > li > a:hover i { color: #fff !important; } /* Dropdown menu extended */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #bfbfbf; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #ffffff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; } /* * Table */ .table.has-tickbox thead tr th:first-child { width: 18px; } .table.has-tickbox.smart-form thead tr th:first-child .radio, .table.has-tickbox.smart-form thead tr th:first-child .checkbox, .table.has-tickbox.smart-form tbody tr td:first-child .radio, .table.has-tickbox.smart-form tbody tr td:first-child .checkbox { padding: 0px !important; } .table thead tr, .fc-head-container thead tr { background-color: #eeeeee; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fafafa)); background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 100%); background-image: -moz-linear-gradient(top, #f2f2f2 0, #fafafa 100%); background-image: -ms-linear-gradient(top, #f2f2f2 0, #fafafa 100%); background-image: -o-linear-gradient(top, #f2f2f2 0, #fafafa 100%); background-image: -linear-gradient(top, #f2f2f2 0, #fafafa 100%); font-size: 12px; } .fc-head-container thead tr th { padding: 4px; line-height: 1.428571429; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-width: 1px; } .no-padding > .table-bordered, .no-padding > .table-responsive > .table-bordered { border: none !important; } .no-padding > .table-bordered thead tr th:first-child, .no-padding > .table-bordered thead tr td:first-child, .no-padding > .table-bordered tbody tr td:first-child, .no-padding > .table-responsive > .table-bordered thead tr th:first-child, .no-padding > .table-responsive > .table-bordered thead tr td:first-child, .no-padding > .table-responsive > .table-bordered tbody tr td:first-child { border-left-width: 0px !important; } .no-padding > .table-bordered thead tr th:last-child, .no-padding > .table-bordered tbody tr td:last-child, .no-padding > .table-responsive > .table-bordered thead tr th:last-child, .no-padding > .table-responsive > .table-bordered tbody tr td:last-child { border-right-width: 0px !important; } .no-padding > .table-bordered tbody tr:last-child td, .no-padding > .table-responsive > .table-bordered tbody tr:last-child td { border-bottom-width: 0px !important; } .no-padding .table-responsive .table { margin-bottom: 0; } .no-padding .note-editable .table-bordered { border: 1px solid #dddddd !important; } .smart-form.table td .radio i, .smart-form.table td .checkbox i, .smart-form.table th .radio i, .smart-form.table th .checkbox i { top: 0px !important; } /* condenced table */ .table-condensed.table > tbody > tr > td, .table-condensed.table > tbody > tr > th, .table-condensed.table > tfoot > tr > td, .table-condensed.table > tfoot > tr > th, .table-condensed.table > thead > tr > td, .table-condensed.table > thead > tr > th { padding: 5px 10px !important; } /* * small stats */ .show-stats .progress { height: 7px; border-radius: 0; margin-top: 3px; margin-bottom: 15px; } .show-stats { padding-top: 6px !important; } .show-stat-buttons { float: left; width: 100%; } .show-stats .show-stat-buttons > :first-child { padding-right: 5px; } .show-stats .show-stat-buttons > :last-child { padding-left: 5px; } .show-stat-microcharts { margin-left: -10px; margin-right: -10px; } .show-stat-microcharts > div { border-right: 1px solid #DADADA !important; border-top: 1px solid #DADADA !important; margin-top: 10px !important; height: 65px; overflow: hidden; padding: 7px 9px; } .show-stat-microcharts > :last-child { border-right: none !important; } .show-stat-microcharts .sparkline { margin-top: 10px; margin-right: 8px; opacity: .7; } .show-stat-microcharts .sparkline:hover { opacity: 1; } .smaller-stat { margin: 0; padding: 0; list-style: none; } .smaller-stat li { margin-top: 3px; margin-right: 0px; } .smaller-stat li:first-child { margin-top: 8px; } .smaller-stat span.label { width: 40px; display: block; text-align: left; opacity: .5; cursor: default; } .smaller-stat span.label:hover { opacity: 1; } /* * Login info */ .login-info { border-bottom: 1px solid #D8D4D4; display: block; font-size: 12px; height: 39px; color: #ffffff; border: solid transparent; border-width: 1px 0px 1px 0px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); width: 100%; margin: 0px !important; border-bottom: 1px solid #525151; } .login-info a { text-decoration: none !important; color: #c0bbb7; display: inline-block; margin-top: 6px; } .login-info a span { text-transform: capitalize; font-size: 14px; /* 14px~ */ display: inline-block; text-decoration: none; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .login-info a span + i { vertical-align: middle; } .login-info a:hover { color: #ffffff; } .login-info > span { height: 38px; display: block; padding: 0 10px; border-bottom: 1px solid #1A1817; } .login-info img { width: 25px; height: auto; display: inline-block; vertical-align: middle; margin-top: 1px; margin-right: 5px; margin-left: 0px; border-left: 3px solid #ffffff; } img.online, img.busy, img.offline, img.away { border-left: 3px solid #fff; } img.online { border-left-color: #40ac2b !important; } img.busy { border-left-color: #ed1c24 !important; } img.offline { border-left-color: #dddddd !important; } img.away { border-left-color: #ffc40d !important; } /* * Client page forms */ .client-form header { padding: 15px 13px; margin: 0; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.1); background: rgba(248, 248, 248, 0.9); } /* * MINIFIED MENU */ .minified .inbox-badge { border-radius: 50%; font-size: 9px; padding: 2px; position: absolute; top: 6px; right: 6px; background: #ED1C24; min-width: 13px; } .minifyme { border-bottom: 1px solid #302F2F; background: #454545; color: #A8A8A8; text-align: center; padding: 0; width: 36px; height: 28px; display: block; position: absolute; right: 0px; border-radius: 5px 0px 0px 5px; cursor: pointer; margin-top: 7px; font-size: 19px; transition: all 0.1s linear 0s; } .minifyme:hover { background: #646464; color: #E4E4E4; right: 0px; width: 40px; padding-right: 5px; } .minified .minifyme { right: 0px; color: #A8A8A8; position: relative; width: 100%; border-radius: 0px; margin: 0; height: 34px; font-size: 23px; } .minified .minifyme .fa:before { content: "\f0a9"; } .minified .login-info a span, .minified .login-info a i { display: none; } .minified .login-info span { padding: 0px 5px; text-align: center; } .minified .login-info img { margin: -2px 0 0; width: 30px; } .minified .login-info { height: 38px; border-bottom: 1px solid #181818; } .minified #left-panel { width: 45px; } .minified #main { margin-left: 45px; } /* * Minified NAV */ .minified #left-panel, .minified nav > ul > li { overflow: visible; } .minified nav > ul > ul { min-height: 100px !important; max-height: 180px !important; overflow-y: scroll; overflow-x: hidden; background: #ed1c24 !important; } .minified nav > ul > li, .minified nav > ul > li a { position: relative; } .minified nav ul > li > a { padding: 10px 11px; display: block; } .minified nav > ul > li > a .fa.fa-fw { display: block; width: auto; text-align: center; padding: 0; } .minified nav > ul > li > a > i { text-align: center; margin: 0; display: block; } .minified nav > ul > li.active > a::before { content: "\f0d9"; } .minified nav ul ul li a { padding-left: 14px; } .minified nav ul ul li li a { padding-left: 25px; } .minified nav > ul ul li::before { left: 12px; } .minified nav > ul > li > ul::before { left: 12px; } .minified nav > ul > li > a .menu-item-parent, .minified nav > ul > li > a > b { display: none; } .minified nav > ul > li > a > .menu-item-parent { display: none; position: absolute; left: 40px; top: -3px; width: 186px; height: 38px; line-height: 38px; background-color: whiteSmoke; color: #333333; z-index: 3; -webkit-box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2); border-left: 1px solid #bfbfbf; border-top: 1px solid #D8D4D4; border-bottom: 1px solid #ffffff; padding-left: 12px; } .minified nav > ul > li > ul { display: none !important; position: absolute; left: 40px; width: 199px; z-index: 5; border: 1px solid #bfbfbf; min-height: 180px; -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.2); background: #454545; margin-top: -3px; overflow: hidden; } .minified nav ul > li > ul > li > ul { position: relative; left: 13px; border: none; width: auto; margin-left: -12px; width: 197px; } .minified nav > ul > li:hover > a > .menu-item-parent, .minified nav > ul > li:hover > ul { display: block !important; } .minified nav > ul > li > ul > li { background-color: rgba(69, 69, 69, 0.9); } .minified nav > ul > li > ul > li > ul > li { background-color: #484B50; } .minified nav > ul > li { border-bottom: 1px solid #1A1817; border-top: 1px solid #525151; } .minified nav > ul > li > ul::before { border-left: none; } .minified nav > ul ul li::before { border: none; } .slimScrollDiv, .slimScrollDiv > :first-child { overflow: hidden; } .minified .slimScrollDiv, .minified .slimScrollDiv > :first-child { overflow: visible !important; } .minified .slimScrollBar, .minified .slimScrollRail { display: none; } .minified nav > ul > li > ul > li > a { padding-top: 7px; padding-bottom: 7px; } .minified nav > ul > li > ul > li > ul > li > a { padding-top: 7px; padding-bottom: 7px; } .minified nav > ul > li > ul > li > ul > li a { padding-top: 6px; padding-bottom: 6px; } /* Fourth Level: A */ .minified nav ul ul ul ul li a { padding-left: 45px; } /* Fifth Level: A */ .minified nav ul ul ul ul ul li a { padding-left: 62px; } /* Sixth Level: A */ .minified nav ul ul ul ul ul ul li a { padding-left: 82px; } /* * ALTERNATIVE PAGING */ .pagination.pagination-alt > li > a { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: none; margin-left: -1px; } .pagination.pagination-alt > li:first-child > a { padding-left: 0px; } /* * CUSTOM BUTTON */ .pagination > li > a, .pagination > li > span { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); } .disabled { color: #ffffff; } .btn-default.disabled { color: #999999; } .btn { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05); } .btn:active { position: relative; top: 1px; left: 1px; } .btn.btn-ribbon { background-color: #707070; background-image: -moz-linear-gradient(top, #777777, #666666); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#777777), to(#666666)); background-image: -webkit-linear-gradient(top, #777777, #666666); background-image: -o-linear-gradient(top, #777777, #666666); background-image: linear-gradient(to bottom, #777777, #666666); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff666666', GradientType=0); color: white; padding: 0 5px; line-height: 20px; vertical-align: middle; height: 20px; display: block; border: none; float: left; margin: 0 8px 0 0; cursor: pointer; } .btn.btn-ribbon > i { font-size: 111%; } .ribbon-button-alignment { padding-top: 10px; display: inline-block; } .ribbon-button-alignment.pull-right > .btn.btn-ribbon { margin: 0 0 0 8px; } /* * Panels */ .panel-purple { border-color: #6e587a; } .panel-purple > .panel-heading { color: #ffffff; background-color: #6e587a; border-color: #6e587a; } .panel-greenLight { border-color: #71843f; } .panel-greenLight > .panel-heading { color: #ffffff; background-color: #71843f; border-color: #71843f; } .panel-greenDark { border-color: #496949; } .panel-greenDark > .panel-heading { color: #ffffff; background-color: #496949; border-color: #496949; } .panel-darken { border-color: #333333; } .panel-darken > .panel-heading { color: #ffffff; background-color: #404040; border-color: #404040; } .panel-pink { border-color: #ac5287; } .panel-pink > .panel-heading { color: #ffffff; background-color: #ac5287; border-color: #ac5287; } .panel-green { border-color: #356e35; } .panel-green > .panel-heading { color: #ffffff; background-color: #356e35; border-color: #356e35; } .panel-blueLight { border-color: #92a2a8; } .panel-blueLight > .panel-heading { color: #ffffff; background-color: #92a2a8; border-color: #92a2a8; } .panel-pinkDark { border-color: #a8829f; } .panel-pinkDark > .panel-heading { color: #ffffff; background-color: #a8829f; border-color: #a8829f; } .panel-redLight { border-color: #a65858; } .panel-redLight > .panel-heading { color: #ffffff; background-color: #a65858; border-color: #a65858; } .panel-red { border-color: #a90329; } .panel-red > .panel-heading { color: #ffffff; background-color: #a90329; border-color: #a90329; } .panel-teal { border-color: #568a89; } .panel-teal > .panel-heading { color: #ffffff; background-color: #568a89; border-color: #568a89; } .panel-orange { border-color: #c79121; } .panel-orange > .panel-heading { color: #ffffff; background-color: #c79121; border-color: #c79121; } .panel-blueDark { border-color: #4c4f53; } .panel-blueDark > .panel-heading { color: #ffffff; background-color: #4c4f53; border-color: #4c4f53; } .panel-magenta { border-color: #6e3671; } .panel-magenta > .panel-heading { color: #ffffff; background-color: #6e3671; border-color: #6e3671; } .panel-blue { border-color: #57889c; } .panel-blue > .panel-heading { color: #ffffff; background-color: #57889c; border-color: #57889c; } .panel-footer > .btn-block { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-bottom: none; border-left: none; border-right: none; } /* * Circle Buttons */ .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 18px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 15px; font-size: 18px; line-height: 30px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 15px; font-size: 24px; line-height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /* * Big Metro Buttons */ .btn-metro { margin: 0 0 20px; padding-top: 15px; padding-bottom: 15px; } .btn-metro > span { display: block; vertical-align: bottom; margin-top: 10px; text-transform: uppercase; } .btn-metro > span.label { position: absolute; top: 0px; right: 0px; } /* * buttons with labels */ .btn-label { position: relative; left: -12px; display: inline-block; padding: 6px 12px; background: rgba(0, 0, 0, 0.15); border-radius: 3px 0 0 3px; } .btn-labeled { padding-top: 0; padding-bottom: 0; } .btn-link { box-shadow: none; -webkit-box-shadow: none; font-size: 14px; } /* * nav-demo-btn */ .nav-demo-btn { background-color: rgba(77, 118, 134, 0.5); border-color: #3a7775; } .nav-demo-btn:hover, .nav-demo-btn:active { background-color: rgba(77, 118, 134, 0.7); border-color: #3a7775; } /* * ANIMATION */ #left-panel { -webkit-transition: 250ms cubic-bezier(0.1, 0.57, 0.1, 1); transition: 250ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transform: translate(0px, 0px) translateZ(0px); } /* removed as it was too jerky */ /*#main { -webkit-transition: all .2s ease-out; transition: all .2s ease-out; }*/ /* * CHARTS */ .chart-small, .chart-large, .chart-xl { overflow: hidden; } .chart-small { height: 100px; width: 100%; } .chart-large { height: 235px; width: 100%; } .chart-xl { height: 297px; width: 100%; } /* * Flot Tool tips */ #flotTip { padding: 3px 5px; background-color: #ffffff; z-index: 9999; color: #333333; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); font-size: 14px; border: 1px solid #C1C1C1; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #flotTip span { color: #38812D; font-weight: bold; } .legendLabel span { display: block; margin: 0 5px; } .legendColorBox { padding-left: 10px; vertical-align: top; padding-top: 5px; } .legendColorBox div > div { width: 4px; height: 4px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* * Morris Charts */ .morris-hover.morris-default-style { border-radius: 10px; padding: 6px; color: #666; background: rgba(255, 255, 255, 0.8); border: solid 2px rgba(230, 230, 230, 0.8); font-family: sans-serif; font-size: 12px; text-align: center; } .morris-hover.morris-default-style .morris-hover-row-label { font-weight: bold; margin: 0.25em 0; } .morris-hover.morris-default-style .morris-hover-point { white-space: nowrap; margin: 0.1em 0; } .morris-hover { position: absolute; z-index: 903; } .fixed-page-footer .morris-hover { z-index: 900; } /* * Flot Chart */ .chart { overflow: hidden; /*- disabled for widget chrome bug */ height: 220px; margin: 20px 5px 10px 10px; } .has-legend { margin-top: 30px !important; } .has-legend-unique { margin-top: 19px !important; } /* * Carren colors */ .icon-color-good { color: #40ac2b; } .icon-color-bad { color: #ed1c24; } /* * SIGNS */ .percent-sign:after, .degree-sign:after { content: " %"; line-height: normal; } .degree-sign:after { content: "°F"; } /* * HIDDEN MENU */ .hidden-menu #left-panel { left: -210px; z-index: 903; } .hidden-menu #main { margin-left: 10px; } .hidden-menu #left-panel:hover { left: 0px; } .hidden-menu .minifyme { display: none; } .minified #hide-menu { display: none; } .btn-header.pull-right { margin-left: 6px; } .btn-header a > span { font-size: 13px; font-weight: normal; line-height: 30px; height: 30px; display: inline-block; } .btn-header > :first-child > a { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: default !important; display: inline-block; font-weight: bold; height: 30px; line-height: 24px; min-width: 30px; padding: 2px; text-align: center; text-decoration: none !important; -moz-user-select: none; -webkit-user-select: none; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1)); background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1); background-image: linear-gradient(top, #f8f8f8, #f1f1f1); border: 1px solid #bfbfbf; color: #6D6A69; font-size: 17px; margin: 10px 0 0 0; } .btn-header > :first-child > a:hover { border: 1px solid #bfbfbf; color: #222; transition: all 0.0s; cursor: pointer; -webkit-box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.08); } .btn-header > :first-child > a:active { background-color: #e8e8e8; background-image: -moz-linear-gradient(top, #e8e8e8 0%, #ededed 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e8e8), color-stop(100%, #ededed)); background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #ededed 100%); background-image: -o-linear-gradient(top, #e8e8e8 0%, #ededed 100%); background-image: -ms-linear-gradient(top, #e8e8e8 0%, #ededed 100%); background-image: linear-gradient(to bottom, #e8e8e8 0%, #ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#ededed', GradientType=0); -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.15); } .hidden-menu #hide-menu > :first-child > a { background-color: #e8e8e8; background-image: -moz-linear-gradient(top, #5a5a5a 0%, #686868 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(100%, #686868)); background-image: -webkit-linear-gradient(to bottom, #5a5a5a 0%, #686868 100%); background-image: -o-linear-gradient(to bottom, #5a5a5a 0%, #686868 100%); background-image: -ms-linear-gradient(to bottom, #5a5a5a 0%, #686868 100%); background-image: linear-gradient(to bottom, #5a5a5a 0%, #686868 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5A5A5A', endColorstr='#686868', GradientType=0); -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.15); color: #ffffff; border-color: #494949; } .hidden-menu #hide-menu > :first-child > a:active, .full-screen #fullscreen > :first-child > a:active { -webkit-box-shadow: inset 0px 0px 6px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 0px 6px 1px rgba(0, 0, 0, 0.2); } /* * AJAX DROPDOWN */ .ajax-dropdown > :first-child { margin: 0 0 3px 0; padding: 0 0 9px 0; } .ajax-dropdown { position: absolute; display: none; z-index: 905; background: white; top: 48px; left: 16px; width: 344px; height: 435px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25); -moz-box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25); box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25); padding: 10px; background: #ffffff; border: 1px solid #b3b3b3; } .ajax-dropdown:after, .ajax-dropdown:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ajax-dropdown:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; left: 50%; margin-left: -7px; } .ajax-dropdown:before { border-color: rgba(131, 131, 131, 0); border-bottom-color: #838383; border-width: 8px; left: 50%; margin-left: -8px; } .ajax-dropdown .btn-group .btn { font-weight: bold; text-transform: capitalize; } /* better for 3 childs*/ .ajax-dropdown .btn-group > :nth-child(2) { border-right-width: 0px; border-left-width: 0px; } .ajax-dropdown .btn-group > :last-child { border-right-width: 1px !important; } /* better for 4+ childs .ajax-dropdown .btn-group >:first-child { border-right-width:1px; } .ajax-dropdown .btn-group >:nth-child(n+2) { border-left-width:0px; } .ajax-dropdown .btn-group >:last-child { border-right-width:1px !important; } */ .ajax-dropdown .btn-group .btn:active { top: 0px; left: 0px; } .ajax-notifications { height: 365px; display: block; overflow: auto; margin-right: -10px; margin-left: -10px; border-bottom: 1px solid #CECECE; border-top: 1px solid #CECECE; background: #E9E9E9; } .ajax-notifications .alert.alert-transparent { background-color: transparent; border-color: transparent; color: #757575; margin: 13px 10px; } .ajax-notifications .alert > :first-child { margin-bottom: 10px; font-weight: 400; } .ajax-dropdown > :last-child { font-size: 13px; display: block; padding: 5px 0; line-height: 22px; font-weight: 400; } .ajax-dropdown .fa-4x.fa-border { border-width: 3px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; display: block; margin: 0 auto; width: 46px; text-align: center; color: #D1D1D1; border-color: #D1D1D1; } /* * LARGE DROPDOWNS */ .dropdown-large { position: static !important; } .dropdown-menu-large { margin-left: 16px; margin-right: 16px; padding: 20px 0px; } .dropdown-menu-large > li > ul { padding: 0; margin: 0; } .dropdown-menu-large > li > ul > li { list-style: none; } .dropdown-menu-large > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { color: #999999; } .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0; margin-right: 0; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } } /* * PAGING */ .pagination-xs > li > a, .pagination-xs > li > span { padding: 4px 9px; font-size: 12px; } /* * NOTIFICATIONS : MAIL */ .notification-body *, .notification-body:before *, .notification-body:after * { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; } .notification-body { padding: 0 0 0 3px; margin: 0; list-style: none; } .notification-body > li { border-bottom: 1px solid #E9E9E9; position: relative; } .notification-body > li > span { background: #ffffff; display: block; min-height: 25px; overflow: hidden; padding: 8px 10px 13px; white-space: normal; } .notification-body > li > span:hover { background: #F0F4F7; color: #667F8F; } .notification-body > li a.msg { padding-left: 50px !important; } .notification-body > li a, .notification-body > li a:hover { text-decoration: none; } .notification-body > li a, .notification-body > li a span { display: block; position: relative; overflow: hidden; } .notification-body > li a, .notification-body > li a:hover { text-decoration: none; } .notification-body > li:hover .progress { background: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #a7a7a7 inset; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #cccccc inset; -moz-box-shadow: 0 1px 0 transparent, 0 0 0 1px #ffffff inset; } .notification-body > li:hover .text-muted { color: #333333; } .notification-body .from { font-size: 14px; line-height: normal; color: #333333; font-weight: normal; margin-right: 60px; margin-bottom: 6px; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .notification-body .unread .from { font-weight: bold; } .notification-body .unread { background: #FFFFE0; } .notification-body time { position: absolute; top: 3px; right: 0; font-size: 11px; font-weight: normal; color: #058dc7; } .notification-body .msg-body, .notification-body .subject { font-size: 13px; color: #A0A0A0; max-height: 35px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .notification-body .subject { font-size: 13px; color: #333333; max-height: 22px; } /* * WIZARDS */ .bootstrapWizard { display: block; list-style: none; padding: 0; position: relative; width: 100%; } .bootstrapWizard a:hover, .bootstrapWizard a:active, .bootstrapWizard a:focus { text-decoration: none; } .bootstrapWizard li { display: block; float: left; width: 25%; text-align: center; padding-left: 0; } .bootstrapWizard li:before { border-top: 3px solid #55606E; content: ""; display: block; font-size: 0; overflow: hidden; position: relative; top: 11px; right: 1px; width: 100%; z-index: 1; } .bootstrapWizard li:first-child:before { left: 50%; max-width: 50%; } .bootstrapWizard li:last-child:before { max-width: 50%; width: 50%; } .bootstrapWizard li.complete .step { background: #0aa66e; padding: 1px 6px; border: 3px solid #55606E; } .bootstrapWizard li .step i { font-size: 10px; font-weight: normal; position: relative; top: -1.5px; } .bootstrapWizard li .step { background: #B2B5B9; color: #ffffff; display: inline; font-size: 15px; font-weight: bold; line-height: 12px; padding: 7px 13px; border: 3px solid transparent; border-radius: 50%; line-height: normal; position: relative; text-align: center; z-index: 2; transition: all 0.1s linear 0s; } .bootstrapWizard li.active .step, .bootstrapWizard li.active.complete .step { background: #0091d9; color: #ffffff; font-weight: bold; padding: 7px 13px; font-size: 15px; border-radius: 50%; border: 3px solid #55606E; } .bootstrapWizard li.complete .title, .bootstrapWizard li.active .title { color: #2B3D53; } .bootstrapWizard li .title { color: #bfbfbf; display: block; font-size: 13px; line-height: 15px; max-width: 100%; position: relative; table-layout: fixed; text-align: center; top: 20px; word-wrap: break-word; z-index: 104; } .wizard-actions { display: block; list-style: none; padding: 0; position: relative; width: 100%; } .wizard-actions li { display: inline; } .tab-content.transparent { background-color: transparent; } /* * FUELUX WIZARD */ .fuelux .wizard { position: relative; overflow: hidden; background-color: #f9f9f9; border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *zoom: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } .fuelux .wizard:before, .fuelux .wizard:after { display: table; line-height: 0; content: ""; } .fuelux .wizard:after { clear: both; } .fuelux .wizard ul { width: 4000px; padding: 0; margin: 0; list-style: none outside none; } .fuelux .wizard ul.previous-disabled li.complete { cursor: default; } .fuelux .wizard ul.previous-disabled li.complete:hover { color: #356e35; cursor: default; background: #f3f4f5; } .fuelux .wizard ul.previous-disabled li.complete:hover .chevron:before { border-left-color: #f3f4f5; } .fuelux .wizard ul li { position: relative; float: left; height: 46px; padding: 0 20px 0 30px; margin: 0; font-size: 16px; line-height: 46px; color: #999999; cursor: default; background: #ededed; } .fuelux .wizard ul li .chevron { position: absolute; top: 0; right: -14px; z-index: 1; display: block; border: 24px solid transparent; border-right: 0; border-left: 14px solid #d4d4d4; } .fuelux .wizard ul li .chevron:before { position: absolute; top: -24px; right: 1px; display: block; border: 24px solid transparent; border-right: 0; border-left: 14px solid #ededed; content: ""; } .fuelux .wizard ul li.complete { color: #468847; background: #f3f4f5; } .fuelux .wizard ul li.complete:hover { cursor: pointer; background: #e7eff8; } .fuelux .wizard ul li.complete:hover .chevron:before { border-left: 14px solid #e7eff8; } .fuelux .wizard ul li.complete .chevron:before { border-left: 14px solid #f3f4f5; } .fuelux .wizard ul li.active { color: #3a87ad; background: #f1f6fc; } .fuelux .wizard ul li.active .chevron:before { border-left: 14px solid #f1f6fc; } .fuelux .wizard ul li .badge { margin-right: 8px; } .fuelux .wizard ul li:first-child { padding-left: 20px; border-radius: 4px 0 0 4px; } .fuelux .wizard .actions { position: absolute; right: 0; z-index: 2; float: right; padding-right: 15px; padding-left: 15px; line-height: 46px; vertical-align: middle; background-color: #eeeeee; border-left: 1px solid #d4d4d4; } .fuelux .wizard .actions a { margin-right: 8px; font-size: 12px; line-height: 45px; } .fuelux .wizard .actions .btn-prev i { margin-right: 5px; } .fuelux .wizard .actions .btn-next i { margin-left: 5px; } .fuelux .step-content .step-pane { display: none; } .fuelux .step-content .active { display: block; } .fuelux .step-content .active .btn-group .active { display: inline-block; } /* * jarvismetro TILE */ .jarvismetro-tile { float: left; display: block; background-color: #ffffff; width: 100px; height: 70px; cursor: pointer; box-shadow: inset 0px 0px 1px #FFFFCC; border: 1px dotted #C5C5C5; text-decoration: none; color: #ffffff; font-weight: 300; font-smooth: always; margin: 0 10px 20px 0; padding: 5px; position: relative; } .jarvismetro-tile:hover { z-index: 10; -webkit-transform: scale(1.07); -moz-transform: scale(1.07); } .jarvismetro-tile.big-cubes { width: 120px; height: 120px; } .jarvismetro-tile.double { width: 249px; } .jarvismetro-tile:active { top: 1px; left: 1px; } .jarvismetro-tile .iconbox { text-align: center; } .jarvismetro-tile .iconbox i { display: block; margin: 15px auto 0; height: 75px; } .jarvismetro-tile .iconbox span { display: block; text-align: left; } .jarvismetro-tile .iconbox span > span { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; padding: 5px 5px; border: 1px solid #ffffff; } #shortcut .selected { border: 1px solid #0091d9 !important; } #shortcut .selected { position: relative; } #shortcut .selected:before { display: block; position: absolute; content: "\f00c"; color: #ffffff; right: 4px; top: 3px; font-family: FontAwesome; z-index: 2; } #shortcut .selected:after { width: 0; height: 0; border-top: 35px solid #0091d9; border-left: 35px solid rgba(0, 0, 0, 0); position: absolute; display: block; right: 0; content: ""; top: 0; z-index: 1; } /* * SHORT CUT */ #shortcut { display: block; position: absolute; top: 0px; left: 0; height: auto; width: 100%; background-color: #33302F; background-color: rgba(0, 0, 0, 0.85); z-index: 907; display: none; color: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #shortcut ul { padding: 15px 20px 10px; list-style: none; margin: 0; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); border-bottom: 1px solid #423F3F; } #shortcut ul li { display: inline-block; width: auto; } #shortcut ul li .jarvismetro-tile { margin: 0px 3px 3px; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } #shortcut ul li .jarvismetro-tile:hover { color: #ffffff; text-decoration: none; } #shortcut ul li .jarvismetro-tile:active, #shortcut ul li .jarvismetro-tile:focus { left: 0; top: 0; } .shortcut-on #response-btn { display: none !important; } .shortcut-on #main .navbar, .shortcut-on #left-bar .navbar { border: none !important; } /* * ARROW BOX */ .arrow-box-up:after, .arrow-box-up:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow-box-up:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; left: 50%; margin-left: -7px; } .arrow-box-up:before { border-color: rgba(131, 131, 131, 0); border-bottom-color: #838383; border-width: 8px; left: 50%; margin-left: -8px; } /* * right */ .arrow-box-up-right:after, .arrow-box-up-right:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow-box-up-right:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; right: 10px; margin-left: -7px; } .arrow-box-up-right:before { border-color: rgba(131, 131, 131, 0); border-bottom-color: #838383; border-width: 8px; right: 9px; margin-left: -8px; } /* * BOOTSTRAP TOOLTIP */ .tooltip-inner { padding: 5px 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; border-radius: 0px; } /* * WEBKIT SCROLLING CSS * Reference: http://stackoverflow.com/questions/10592657/scrollbar-stylesheet * GitHub Source: https://gist.github.com/jambu/2004633 */ .custom-scroll::-webkit-scrollbar { -webkit-overflow-scrolling: touch; height: 10px; width: 10px; } .custom-scroll::-webkit-scrollbar:hover { background-color: #E9E9E9; border: 1px solid #dbdbdb; } .custom-scroll::-webkit-scrollbar-button:start:decrement, .custom-scroll::-webkit-scrollbar-button:end:increment { background: transparent; display: block; height: 0; } .custom-scroll::-webkit-scrollbar-track { background-clip: padding-box; border-width: 0 0 0 4px; border: solid transparent; } .custom-scroll::-webkit-scrollbar-track-piece { -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-border-radius: 0; background-color: transparent; border-radius: 0; } .custom-scroll::-webkit-scrollbar-thumb { -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); background-clip: padding-box; background-color: rgba(0, 0, 0, 0.2); border-width: 0; border: none; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); } .custom-scroll::-webkit-scrollbar-thumb:vertical, .custom-scroll::-webkit-scrollbar-thumb:horizontal { -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-border-radius: 0; background-color: #bfbfbf; border-radius: 0; } .custom-scroll::-webkit-scrollbar-thumb:active { -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.33); -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.33); background-color: rgba(0, 0, 0, 0.44); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.33); } .custom-scroll::-webkit-scrollbar-thumb:hover { background-color: #959595; } /* * Typehead */ .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin-bottom: 0; height: 32px; padding: 6px 12px; } .tt-dropdown-menu { min-width: 160px; margin-top: 2px; padding: 5px 0; background-color: #ffffff; border: 1px solid #bfbfbf; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { color: #ffffff; background-color: #0081c2; } .tt-suggestion.tt-is-under-cursor a { color: #ffffff; } .tt-suggestion p { margin: 0; } /* * Google Maps */ .google_maps { width: 100%; height: 350px; position: relative; } .google_maps * { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; } .google_maps img { max-width: none; /* needed for google map popup*/ } /* * Header btn */ .header-btn { margin-top: 5px; } /* * CKEDITOR */ .cke_top { background: rgba(248, 248, 248, 0.9) !important; background-image: none !important; } /* * BS Multiselect * TODO: */ .multiselect-container { position: absolute; list-style-type: none; margin: 0; padding: 0; } .multiselect-container .input-group { margin: 5px; } .multiselect-container > li { padding: 0; } .multiselect-container > li > a.multiselect-all label { font-weight: bold; } .multiselect-container > li > label.multiselect-group { margin: 0; padding: 3px 20px 3px 20px; height: 100%; font-weight: bold; } .multiselect-container > li > a > label { margin: 0; height: 100%; cursor: pointer; font-weight: normal; } .multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox { margin: 0; } .multiselect-container > li > a > label > input[type="checkbox"] { margin-bottom: 5px; } .btn-group > .btn-group:nth-child(2) > .multiselect.btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } /* * FORMS: INPUT WITH ICONS */ .input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #555; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa { position: absolute; z-index: 2; left: 10px; width: 20px; margin-left: -2.5px; text-align: center; padding: 10px 0; top: 1px; } .icon-addon.addon-lg .form-control { line-height: 1.33; height: 46px; font-size: 18px; padding: 10px 16px 10px 40px; } .input-group-lg .icon-addon.addon-lg + .input-group-btn > .btn { height: 46px; } .icon-addon.addon-sm .form-control { height: 30px; padding: 5px 10px 5px 28px; font-size: 12px; line-height: 1.5; } .icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon { font-size: 18px; margin-left: 0; left: 11px; top: 4px; } .icon-addon.addon-md .form-control, .icon-addon .form-control { padding-left: 30px; float: left; font-weight: normal; } .icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon { margin-left: 0; font-size: 12px; left: 5px; top: -1px; } .icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa { color: #2580db; } .icon-addon input:disabled + .glyphicon, .icon-addon select:disabled + .glyphicon, .icon-addon input:disabled + .fa, .icon-addon select:disabled + .fa { color: #ccc; } .progress { position: relative; } .progress .progress-bar { position: absolute; overflow: hidden; line-height: 18px; } .progress .progressbar-back-text { position: absolute; width: 100%; height: 100%; font-size: 12px; line-height: 18px; text-align: center; } .progress .progressbar-front-text { display: block; width: 100%; font-size: 12px; line-height: 18px; text-align: center; } .progress.right .progress-bar { right: 0; } .progress.right .progressbar-front-text { position: absolute; right: 0; } .progress.vertical { width: 18px; height: 100%; float: left; margin-right: 18px; } .progress.vertical.bottom { position: relative; } .progress.vertical.bottom .progressbar-front-text { position: absolute; bottom: 0; } .progress.vertical .progress-bar { width: 100%; height: 0; -webkit-transition: height 0.6s ease; -o-transition: height 0.6s ease; transition: height 0.6s ease; -webkit-transition: all height 0.6s ease ease-out; -moz-transition: all height 0.6s ease ease-out; -o-transition: all height 0.6s ease ease-out; transition: all height 0.6s ease ease-out; } .progress.vertical.bottom .progress-bar { position: absolute; bottom: 0; } /* * PROGRESS BARS */ .progress-micro { height: 3px !important; line-height: 3px !important; } .progress-xs { height: 7px !important; line-height: 7px !important; } .progress-sm { height: 14px !important; line-height: 14px !important; } .progress-lg { height: 30px !important; line-height: 30px !important; } .progress .progress-bar { position: absolute; overflow: hidden; line-height: 20px; } .progress .progressbar-back-text { position: absolute; width: 100%; height: 100%; font-size: 12px; line-height: 20px; text-align: center; } .progress .progressbar-front-text { display: block; width: 100%; font-size: 12px; line-height: 20px; text-align: center; } .progress.right .progress-bar { right: 0; } .progress.right .progressbar-front-text { position: absolute; right: 0; } .progress.vertical { width: 25px; height: 100%; min-height: 150px; margin-right: 20px; display: inline-block; margin-bottom: 0px; } .progress.wide-bar { width: 40px; } .progress.vertical.bottom { position: relative; } .progress.vertical.bottom .progressbar-front-text { position: absolute; bottom: 0; } .progress.vertical .progress-bar { width: 100%; height: 0; -webkit-transition: height 0.6s ease; transition: height 0.6s ease; } .progress.vertical.bottom .progress-bar { position: absolute; bottom: 0; } .progress { position: relative; margin-bottom: 20px; overflow: hidden; height: 22px; background: #eeeeee; box-shadow: 0 1px 0 transparent, 0 0 0 1px #e3e3e3 inset; -webkit-box-shadow: 0 1px 0 transparent, 0 0 0 1px #e3e3e3 inset; -moz-box-shadow: 0 1px 0 transparent, 0 0 0 1px #e3e3e3 inset; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .progress-bar { float: left; width: 0; height: 100%; font-size: 11px; color: #ffffff; text-align: center; background-color: #57889c; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); font-weight: bold; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-image: url('../img/pattern/overlay-pattern.png'); } .progress-striped .progress-bar { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-bar-danger { background-color: #a90329; } .progress-striped .progress-bar-danger { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-success { background-color: #739e73; } .progress-striped .progress-bar-success { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-warning { background-color: #c79121; } .progress-striped .progress-bar-warning { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-info { background-color: #57889c; } .progress-striped .progress-bar-info { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background: #57889c; } .vertical-bars { padding: 0; margin: 0; } .vertical-bars:after { content: ""; display: block; height: 0; clear: both; } .vertical-bars li { padding: 14px 0; width: 25%; display: block; float: left; text-align: center; } .vertical-bars li:first-child { border-left: none; } .vertical-bars > li > .progress.vertical:first-child { margin-left: auto; } .vertical-bars > li > .progress.vertical { margin: 0 auto; float: none; } /* * BAR HOLDER */ .bar-holder:first-child { border-top: none; } .bar-holder { padding: 18px 15px; } .bar-holder .progress { margin: 0; } /* progress bar colors */ [data-progressbar-value] { margin-top: 15px !important; overflow: visible; margin-bottom: 0px; } .dataTable [data-progressbar-value] { min-width: 70px; } [data-progressbar-value="100"]:before, [data-progressbar-value="100"]:after, [data-progressbar-value]:before, [data-progressbar-value]:after { position: absolute; background: none; font-size: 11px; top: -12px; } [data-progressbar-value]:before { content: attr(data-progressbar-value); left: attr(data-progressbar-value) px; } [data-progressbar-value]:after { content: "%"; left: 13px; } [data-progressbar-value="1"] > .progress-bar { width: 1%; background: #a90329; } [data-progressbar-value="2"] > .progress-bar { width: 2%; background: #a90329; } [data-progressbar-value="3"] > .progress-bar { width: 3%; background: #a90329; } [data-progressbar-value="4"] > .progress-bar { width: 4%; background: #a90329; } [data-progressbar-value="5"] > .progress-bar { width: 5%; background: #a90329; } [data-progressbar-value="6"] > .progress-bar { width: 6%; background: #a90329; } [data-progressbar-value="7"] > .progress-bar { width: 7%; background: #a90329; } [data-progressbar-value="8"] > .progress-bar { width: 8%; background: #a90329; } [data-progressbar-value="9"] > .progress-bar { width: 9%; background: #a90329; } [data-progressbar-value="10"] > .progress-bar { width: 10%; background: #db0435; } [data-progressbar-value="11"] > .progress-bar { width: 11%; background: #c79121; } [data-progressbar-value="12"] > .progress-bar { width: 12%; background: #c79121; } [data-progressbar-value="13"] > .progress-bar { width: 13%; background: #c79121; } [data-progressbar-value="14"] > .progress-bar { width: 14%; background: #c79121; } [data-progressbar-value="15"] > .progress-bar { width: 15%; background: #c79121; } [data-progressbar-value="16"] > .progress-bar { width: 16%; background: #c79121; } [data-progressbar-value="17"] > .progress-bar { width: 17%; background: #c79121; } [data-progressbar-value="18"] > .progress-bar { width: 18%; background: #c79121; } [data-progressbar-value="19"] > .progress-bar { width: 19%; background: #c79121; } [data-progressbar-value="20"] > .progress-bar { width: 20%; background: #c79121; } [data-progressbar-value="21"] > .progress-bar { width: 21%; background: #c79121; } [data-progressbar-value="22"] > .progress-bar { width: 22%; background: #c79121; } [data-progressbar-value="23"] > .progress-bar { width: 23%; background: #c79121; } [data-progressbar-value="24"] > .progress-bar { width: 24%; background: #c79121; } [data-progressbar-value="25"] > .progress-bar { width: 25%; background: #c79121; } [data-progressbar-value="26"] > .progress-bar { width: 26%; background: #c79121; } [data-progressbar-value="27"] > .progress-bar { width: 27%; background: #c79121; } [data-progressbar-value="28"] > .progress-bar { width: 28%; background: #c79121; } [data-progressbar-value="29"] > .progress-bar { width: 29%; background: #c79121; } [data-progressbar-value="30"] > .progress-bar { width: 30%; background: #c79121; } [data-progressbar-value="31"] > .progress-bar { width: 31%; background: #c79121; } [data-progressbar-value="32"] > .progress-bar { width: 32%; background: #c79121; } [data-progressbar-value="33"] > .progress-bar { width: 33%; background: #c79121; } [data-progressbar-value="34"] > .progress-bar { width: 34%; background: #c79121; } [data-progressbar-value="35"] > .progress-bar { width: 35%; background: #c79121; } [data-progressbar-value="36"] > .progress-bar { width: 36%; background: #c79121; } [data-progressbar-value="37"] > .progress-bar { width: 37%; background: #c79121; } [data-progressbar-value="38"] > .progress-bar { width: 38%; background: #c79121; } [data-progressbar-value="39"] > .progress-bar { width: 39%; background: #c79121; } [data-progressbar-value="40"] > .progress-bar { width: 40%; background: #c79121; } [data-progressbar-value="41"] > .progress-bar { width: 41%; background: #404040; } [data-progressbar-value="42"] > .progress-bar { width: 42%; background: #404040; } [data-progressbar-value="43"] > .progress-bar { width: 43%; background: #404040; } [data-progressbar-value="44"] > .progress-bar { width: 44%; background: #404040; } [data-progressbar-value="45"] > .progress-bar { width: 45%; background: #404040; } [data-progressbar-value="46"] > .progress-bar { width: 46%; background: #404040; } [data-progressbar-value="47"] > .progress-bar { width: 47%; background: #404040; } [data-progressbar-value="48"] > .progress-bar { width: 48%; background: #404040; } [data-progressbar-value="49"] > .progress-bar { width: 49%; background: #404040; } [data-progressbar-value="50"] > .progress-bar { width: 50%; background: #404040; } [data-progressbar-value="51"] > .progress-bar { width: 51%; background: #404040; } [data-progressbar-value="52"] > .progress-bar { width: 52%; background: #404040; } [data-progressbar-value="53"] > .progress-bar { width: 53%; background: #404040; } [data-progressbar-value="54"] > .progress-bar { width: 54%; background: #404040; } [data-progressbar-value="55"] > .progress-bar { width: 55%; background: #404040; } [data-progressbar-value="56"] > .progress-bar { width: 56%; background: #404040; } [data-progressbar-value="57"] > .progress-bar { width: 57%; background: #404040; } [data-progressbar-value="58"] > .progress-bar { width: 58%; background: #404040; } [data-progressbar-value="59"] > .progress-bar { width: 59%; background: #404040; } [data-progressbar-value="60"] > .progress-bar { width: 60%; background: #404040; } [data-progressbar-value="61"] > .progress-bar { width: 61%; background: #3276b1; } [data-progressbar-value="62"] > .progress-bar { width: 62%; background: #3276b1; } [data-progressbar-value="63"] > .progress-bar { width: 63%; background: #3276b1; } [data-progressbar-value="64"] > .progress-bar { width: 64%; background: #404040; } [data-progressbar-value="65"] > .progress-bar { width: 65%; background: #3276b1; } [data-progressbar-value="66"] > .progress-bar { width: 66%; background: #3276b1; } [data-progressbar-value="67"] > .progress-bar { width: 67%; background: #3276b1; } [data-progressbar-value="68"] > .progress-bar { width: 68%; background: #3276b1; } [data-progressbar-value="69"] > .progress-bar { width: 69%; background: #3276b1; } [data-progressbar-value="70"] > .progress-bar { width: 70%; background: #3276b1; } [data-progressbar-value="71"] > .progress-bar { width: 71%; background: #3276b1; } [data-progressbar-value="72"] > .progress-bar { width: 72%; background: #3276b1; } [data-progressbar-value="73"] > .progress-bar { width: 73%; background: #3276b1; } [data-progressbar-value="74"] > .progress-bar { width: 74%; background: #3276b1; } [data-progressbar-value="75"] > .progress-bar { width: 75%; background: #3276b1; } [data-progressbar-value="76"] > .progress-bar { width: 76%; background: #3276b1; } [data-progressbar-value="77"] > .progress-bar { width: 77%; background: #3276b1; } [data-progressbar-value="78"] > .progress-bar { width: 78%; background: #3276b1; } [data-progressbar-value="79"] > .progress-bar { width: 79%; background: #3276b1; } [data-progressbar-value="80"] > .progress-bar { width: 80%; background: #3276b1; } [data-progressbar-value="81"] > .progress-bar { width: 81%; background: #a0bda0; } [data-progressbar-value="82"] > .progress-bar { width: 82%; background: #a0bda0; } [data-progressbar-value="83"] > .progress-bar { width: 83%; background: #a0bda0; } [data-progressbar-value="84"] > .progress-bar { width: 84%; background: #9dbb9d; } [data-progressbar-value="85"] > .progress-bar { width: 85%; background: #9dbb9d; } [data-progressbar-value="86"] > .progress-bar { width: 86%; background: #9dbb9d; } [data-progressbar-value="87"] > .progress-bar { width: 87%; background: #97b797; } [data-progressbar-value="88"] > .progress-bar { width: 88%; background: #97b797; } [data-progressbar-value="89"] > .progress-bar { width: 89%; background: #91b391; } [data-progressbar-value="90"] > .progress-bar { width: 90%; background: #91b391; } [data-progressbar-value="91"] > .progress-bar { width: 91%; background: #91b391; } [data-progressbar-value="92"] > .progress-bar { width: 92%; background: #8eb18e; } [data-progressbar-value="93"] > .progress-bar { width: 93%; background: #8baf8b; } [data-progressbar-value="94"] > .progress-bar { width: 94%; background: #88ad88; } [data-progressbar-value="95"] > .progress-bar { width: 95%; background: #85ab85; } [data-progressbar-value="96"] > .progress-bar { width: 96%; background: #82a882; } [data-progressbar-value="97"] > .progress-bar { width: 97%; background: #7fa67f; } [data-progressbar-value="98"] > .progress-bar { width: 98%; background: #7ca47c; } [data-progressbar-value="99"] > .progress-bar { width: 99%; background: #79a279; } [data-progressbar-value="100"] > .progress-bar { width: 100%; background: #739e73; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; background-image: none !important; } [data-progressbar-value="100"]:before { content: attr(data-progressbar-value) '%'; top: -12px; left: attr(data-progressbar-value) px; } [data-progressbar-value="100"]:after { content: "complete"; left: auto; right: 0px; color: #739e73; } /* This issue relates to container + toggle menu with a result of overflow. */ html.hidden-menu-mobile-lock { overflow-x: hidden; } /* * No Padding */ .no-content-padding { margin: -10px -14px 0 -14px; /*used with content >:first-child */ } .no-padding { padding: 0px !important; } .no-padding > pre { margin: 30px; } .no-padding > table, .no-padding .dataTables_wrapper table { border: none !important; margin-bottom: 0px !important; border-bottom-width: 0px !important; } .no-padding-bottom { padding-bottom: 0px !important; } .padding-5 { padding: 5px !important; } .padding-7 { padding: 7px !important; } .padding-10 { padding: 10px !important; } .padding-gutter { padding: 13px !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-15 { padding-top: 15px !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-0 { padding-bottom: 0px !important; } .padding-top-0 { padding-top: 0px !important; } .no-padding > table tr td:last-child, .no-padding > table tr th:last-child, .no-padding .dataTables_wrapper table tr td:last-child, .no-padding .dataTables_wrapper table tr th:last-child { border-right: none !important; } .no-padding > table tr td:first-child, .no-padding > table tr th:first-child, .no-padding .dataTables_wrapper table tr td:first-child, .no-padding .dataTables_wrapper table tr th:first-child { border-left: none !important; } .no-padding .dataTables_wrapper table tbody tr:last-child td { border-bottom: 0; } /* * Font Weights */ .semi-bold { font-weight: 400 !important; } .ultra-light { font-weight: 300 !important; } /* * Font Sizes */ .font-xs { font-size: 85% !important; } .font-sm { font-size: 95% !important; } .font-md { font-size: 130% !important; } .font-lg { font-size: 160% !important; } .font-xl { font-size: 200% !important; } .font-400 { font-size: 400% !important; } /* * Margins */ .no-margin { margin: 0px !important; } .margin-top-5 { margin-top: 5px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-bottom-5 { margin-bottom: 5px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-right-5 { margin-right: 5px !important; } .margin-top-0 { margin-top: 0px !important; } .margin-bottom-0 { margin-bottom: 0px !important; } /* * No border */ .no-border, .well[class*=" bg-"].no-border { border-width: 0px !important; } .no-border-transparent { border-color: transparent !important; } .no-border-radius { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } /* * Inlines */ .display-inline { display: inline-block !important; } .display-normal { display: inline !important; } /* * CURSORS */ .cursor-pointer { cursor: pointer; } /* * Images */ .hover-transparent { opacity: .5; } .hover-transparent:hover { opacity: 1; } /* * Forced text alignments */ .text-align-center, .text-center { text-align: center !important; } .text-align-left, .text-left { text-align: left !important; } .text-align-right, .text-right { text-align: right !important; } /* * HR */ hr.simple { margin-top: 10px; margin-bottom: 10px; border-style: dashed; } /* * SHORT CUTS */ .pull-right { float: right !Important; } .pull-left { float: left !Important; } /* * Air fields * Description: absolute positioned objects */ .air { position: absolute; z-index: 5; } .air-bottom { bottom: 0px; } .air-top { top: 0px; } .air-top-right { top: 0px; right: 0px; } .air-top-left { top: 0px; left: 0px; } .air-bottom-left { bottom: 0px; left: 0px; } .air-bottom-right { bottom: 0px; right: 0px; } /* * Display none */ .display-none { display: none !important; } /* * Custom Radio and Input * SETUP */ .checkbox input[type="checkbox"].checkbox + span, .checkbox-inline input[type="checkbox"].checkbox + span, .radiobox-inline input[type="radio"].radiobox + span, .radio input[type="radio"].radiobox + span { margin-left: -20px; } .form-inline .checkbox input[type="checkbox"].checkbox + span, .form-inline .radiobox input[type="radio"].radiobox + span { margin-left: 0px; } .form-inline .checkbox, .form-inline .radiobox { padding-left: 0px; } label input[type="radio"].radiobox + span, input[type="checkbox"].checkbox + span { vertical-align: middle; line-height: 20px; } input[type="checkbox"].checkbox + span, input[type="checkbox"].checkbox + span:after, input[type="checkbox"].checkbox + span:before, input[type="radio"].radiobox + span, input[type="radio"].radiobox + span:after, input[type="radio"].radiobox + span:before { box-sizing: content-box !important; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; } input[type="checkbox"].checkbox, input[type="radio"].radiobox { visibility: hidden; position: absolute; z-index: 20; width: 18px; height: 18px; } label input[type="checkbox"].checkbox + span, label input[type="radio"].radiobox + span { position: relative; z-index: 19; display: inline-block; margin: 0; line-height: 17px; min-height: 14px; min-width: 14px; margin-right: 5px; } label input[type="checkbox"].checkbox + span:hover, label input[type="radio"].radiobox + span:hover { cursor: pointer; } label input[type="radio"].radiobox + span:before, label input[type="checkbox"].checkbox + span:before { font-family: 'FontAwesome'; font-size: 12px; border-radius: 0; content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */ display: inline-block; text-align: center; vertical-align: middle; padding: 1px; height: 12px; line-height: 12px; min-width: 12px; margin-right: 5px; border: 1px solid #bfbfbf; background-color: #f4f4f4; font-weight: normal; margin-top: -1px; } /* * RADIO */ label input[type="radio"].radiobox + span:before { content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */ border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } label input[type="radio"].radiobox:checked + span { font-weight: bold; } /* DEFAULT COLOR */ label input[type="radio"].radiobox:checked + span:before { content: "\f111"; /* circle */ color: #2E7BCC; } /* ORANGE COLOR */ label input[type="radio"].radiobox.style-3:checked + span:before { color: #a90329; border-color: #a90329; } /* CHROME COLOR */ label input[type="radio"].radiobox.style-2:checked + span:before { color: #66665e; border-color: #4d90fe; font-size: 9px; } label input[type="radio"].radiobox.style-2:checked + span { font-weight: normal; } /* Style 1 Radio */ label input[type="radio"].radiobox.style-1 + span:before { font-size: 9px; background: #ffffff; text-shadow: none; box-shadow: none !important; border-width: 1px; height: 13px; line-height: 13px; min-width: 13px; } label input[type="radio"].radiobox.style-1:checked + span:before { font-size: 10px; color: #333333; border-color: #333333; background: #ffffff; } label input[type="radio"].radiobox.style-1:checked + span { font-weight: normal; } /* * RADIO:HOVER & ACTIVE STATES */ /* DEFAULT:HOVER radio content --> 2022 */ label:hover input[type="radio"].radiobox + span:before, label:hover input[type="radio"].radiobox:checked + span:before { color: #2E7BCC; border-color: #2E7BCC; } /* ORANGE:HOVER */ label:hover input[type="radio"].radiobox.style-3 + span:before, label:hover input[type="radio"].radiobox.style-3:checked + span:before { color: #a90329; border-color: #a90329; } /* CHROME:HOVER */ label:hover input[type="radio"].radiobox.style-2:checked + span:before { color: #66665e; border-color: #4d90fe; } /* METRO:HOVER */ label:hover input[type="radio"].radiobox.style-1:checked + span:before { color: #333333; border-color: #333333; background: #ffffff; } label:hover input[type="radio"].radiobox.style-1 + span:before { color: #333333; border-color: #333333; background: #ffffff; } /* DEFAULT:ACTIVE */ label:active input[type="radio"].radiobox + span:before { box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.4); } /* * RADIO:DISABLE STATES */ /* GLOBAL */ label input[type="radio"][disabled].radiobox + span, label input[type="radio"][disabled].radiobox:checked + span, label:hover input[type="radio"][disabled].radiobox:checked + span:before { color: #A7A7A7; cursor: not-allowed; } label input[type="radio"][disabled].radiobox:checked + span:before { content: "\f111"; } label input[type="radio"][disabled].radiobox:checked + span:before, label input[type="radio"][disabled].radiobox + span:before, label:active input[type="radio"][disabled].radiobox:checked + span:before, label:hover input[type="radio"][disabled].radiobox:checked + span:before { background: #eee !important; border-color: #CCC !important; box-shadow: none; color: #A7A7A7; } /* * CHECKBOX */ label input[type="checkbox"].checkbox + span:before { content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */ } label input[type="checkbox"].checkbox:checked + span:before { content: "\f00c"; } label input[type="checkbox"].checkbox:checked + span { font-weight: bold; } /* DEFAULT COLOR */ label input[type="checkbox"].checkbox:checked + span:before { color: #2E7BCC; } /* RED COLOR */ label input[type="checkbox"].checkbox.style-3:checked + span:before { color: #ffffff; border-color: #a90329; background: #a90329; } /* CHROME */ label input[type="checkbox"].checkbox.style-2 + span:before { background: transparent; border-color: #c1c1c1; box-shadow: none; } label input[type="checkbox"].checkbox.style-2:checked + span:before { content: "\f00c"; color: #66665e; border-color: #4d90fe; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ0MEM4RUFEQUE4MTFFMkEwMjM5NzlCRjAxM0UwRjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ0MEM4RUJEQUE4MTFFMkEwMjM5NzlCRjAxM0UwRjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDQwQzhFOERBQTgxMUUyQTAyMzk3OUJGMDEzRTBGNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDQwQzhFOURBQTgxMUUyQTAyMzk3OUJGMDEzRTBGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsD/PVAAAAAQSURBVHjaYv7//78vQIABAAlYA05NMPppAAAAAElFTkSuQmCC) #ffffff; /*#fefeec*/ } label input[type="checkbox"].checkbox.style-2:checked + span { font-weight: normal; } /* METRO COLOR */ label input[type="checkbox"].checkbox.style-1 + span:before { color: #333333; background: #ffffff; text-shadow: none; box-shadow: none !important; border-width: 1px; height: 12px; line-height: 13px; min-width: 12px; } label input[type="checkbox"].checkbox.style-1:checked + span:before { color: #333333; border-color: #333333; } label input[type="checkbox"].checkbox.style-1:checked + span { font-weight: normal; } /* * CHECKBOX:HOVER & ACTIVE STATES */ label:active input[type="checkbox"].checkbox + span:before { box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.4); } /* DEFAULT:HOVER */ label:hover input[type="checkbox"].checkbox + span:before { color: #2E7BCC; border-color: #2E7BCC; } /* RED:HOVER*/ label:hover input[type="checkbox"].checkbox.style-3 + span:before { color: #ffffff; border-color: #A90327; } /* CHROME:HOVER*/ label:hover input[type="checkbox"].checkbox.style-2 + span:before { box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2); } label:hover input[type="checkbox"].checkbox.style-2:checked + span:before { box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.4); } /* METRO:HOVER*/ label:hover input[type="checkbox"].checkbox.style-1 + span:before { border-color: #333333; } /* DEFAULT:ACTIVE */ label:active input[type="checkbox"].checkbox:checked + span:before { color: #ffffff; background: #2E7BCC; border-color: #2E7BCC; } /* RED:ACTIVE */ label:active input[type="checkbox"].checkbox.style-3:checked + span:before { color: #a90329; background: #ffffff; border-color: #a90329; } /* CHROME:ACTIVE */ label:active input[type="checkbox"].checkbox.style-2:checked + span:before { color: #66665e; background: transparent; border-color: #c1c1c1; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.4); } label:active input[type="checkbox"].checkbox.style-2 + span:before { color: #66665e; background: transparent; border-color: #c1c1c1; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.4); } /* METRO:ACTIVE */ label:active input[type="checkbox"].checkbox.style-1:checked + span:before { color: #ffffff; background: #333333; border-color: #333333; } /* * CHECKBOX:DISABLE STATES */ /* GLOBAL */ label input[type="checkbox"][disabled].checkbox + span, label input[type="checkbox"][disabled].checkbox:checked + span, label:hover input[type="checkbox"][disabled].checkbox:checked + span:before { color: #A7A7A7; cursor: not-allowed; } label input[type="checkbox"][disabled].checkbox:checked + span:before { content: "\f00c"; color: #A7A7A7; } label input[type="checkbox"][disabled].checkbox.style-2:checked + span:before { content: "\f00c"; } label input[type="checkbox"][disabled].checkbox:checked + span:before, label input[type="checkbox"][disabled].checkbox + span:before, label:active input[type="checkbox"][disabled].checkbox:checked + span:before, label:hover input[type="checkbox"][disabled].checkbox:checked + span:before { background: #eee !important; border-color: #CCC !important; box-shadow: none; color: #A7A7A7; box-shadow: none !important; } /* * ANIMATED */ /* Navigation icon first level .desktop-detected nav > ul > li > a:hover i { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } .desktop-detected nav > ul > li > a:hover i { -webkit-animation-duration: .7s; -moz-animation-duration: .7s; -o-animation-duration: .7s; animation-duration: .7s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }*/ /* All dropdowns */ .open > .dropdown-menu { -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .active + .ajax-dropdown { -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: .7s; -moz-animation-duration: .7s; -o-animation-duration: .7s; animation-duration: .7s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } /* * USED WITH DEMO */ .square { display: block; float: left; margin-right: 10px; height: 20px; width: 20px; } /* * RESET BOOTSTRAP DEFAULT IE FILTER */ [class^="bg-"], [class*=" bg-"] { filter: none !important; } /* * TEXT COLOR */ .txt-color-blue { color: #57889c !important; } .txt-color-blueLight { color: #009FF0 !important; } .txt-color-blueDark { color: #4c4f53 !important; } .txt-color-green { color: #356e35 !important; } .txt-color-greenLight { color: #71843f !important; } .txt-color-greenDark { color: #496949 !important; } .txt-color-red { color: #a90329 !important; } .txt-color-yellow { color: #b09b5b !important; } .txt-color-orange { color: #b19a6b !important; } .txt-color-orangeDark { color: #a57225 !important; } .txt-color-pink { color: #ac5287 !important; } .txt-color-pinkDark { color: #a8829f !important; } .txt-color-purple { color: #6e587a !important; } .txt-color-darken { color: #404040 !important; } .txt-color-lighten { color: #d5e7ec !important; } .txt-color-white { color: #ffffff !important; } .txt-color-grayDark { color: #525252 !important; } .txt-color-magenta { color: #6e3671 !important; } .txt-color-teal { color: #568a89 !important; } .txt-color-redLight { color: #a65858 !important; } /* * IPAD VERTICAL */ @media (min-width: 768px) and (max-width: 880px) { #main::after { /*content: "IPAD VERTICAL";*/ } #main { margin-left: 0; overflow-x: hidden; } #left-panel { left: -220px; } .no-content-padding { margin: 0 -14px !important; } .inbox-nav-bar.no-content-padding { margin-top: -10px !important; } /* minified adjustment counter */ .minified #left-panel { left: 0px; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow: none !important; } .btn-header.transparent a:hover { color: #a90329; } #hide-menu i { color: #6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color: #ffffff; } #hide-menu i::before { content: "\f0c9"; } .hidden-menu #left-panel { left: 0px; } .hidden-menu #main { position: relative; left: 210px; } .hidden-menu.fixed-ribbon #ribbon { left: 220px; width: 100%; } .fixed-ribbon #ribbon { left: 0px; } .jarviswidget header h2 { width: 180px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* * Header search */ .header-search > input[type="text"] { margin-top: 9px; } } /* * OTHER DEVICES */ @media (max-width: 767px) { /* Profile Page */ .profile-pic > img { width: 100px; } #main::after { /*content: "OTHER DEVICES";*/ } #main { margin-left: 0px; overflow-x: hidden; } #left-panel { left: -220px; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top: 0px !important; border-right: none !important; } .show-stat-buttons { padding-left: 10px !important; padding-right: 10px !important; } /* padding adjustment */ #content, #ribbon { padding-left: 5px; padding-right: 5px; } #header { padding-right: 5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top: -10px !important; } /* minified adjustment counter */ .minified #left-panel { left: 0px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow: none !important; } .btn-header.transparent a:hover { color: #a90329; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #hide-menu > :first-child > a { width: 50px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } #hide-menu i { color: #6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color: #ffffff; } #hide-menu i::before { content: "\f0c9"; } .hidden-menu #left-panel { left: 0px; } .hidden-menu #main { position: relative; left: 210px; } .hidden-menu.fixed-ribbon #ribbon { left: 220px; width: 100%; } .fixed-ribbon #ribbon { left: 0px; } /*.fixed-navigation #left-panel { position:absolute !important; }*/ body.fixed-navigation.hidden-menu { overflow: hidden !important; } /* * fixed ribbon */ .fixed-ribbon #content { padding-top: 52px; } /* * header search */ .header-search { display: none; } #search-mobile { display: block; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: 49px; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color: #333; padding-right: 75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px; } .search-mobile #search-mobile { display: none; } .search-mobile #cancel-search-js { display: block; } .jarviswidget header h2 { width: 250px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } /* * ANDROID */ @media only screen and (min-width: 0px) and (max-width: 679px) { /* Profile Page */ .profile-pic > img { width: 90px; } #main::after { /*content: "ANDROID";*/ } #main { margin-left: 0; overflow-x: hidden; } #left-panel { left: -220px; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top: 0px !important; border-right: none !important; } .show-stat-buttons { padding-left: 10px !important; padding-right: 10px !important; } /* padding adjustment */ #content, #ribbon { padding-left: 5px; padding-right: 5px; } #header { padding-right: 5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top: -10px !important; } /* minified adjustment counter */ .minified #left-panel { left: 0px; } /* header color altered and adjusted for mobile view & contrast */ #header { background: #ffffff; } #ribbon { border-bottom: 1px solid #CFCFCF; border-top: 1px solid #E6E6E6; background: #F5F5F5; } #ribbon .breadcrumb a, #ribbon .breadcrumb { color: #6D6C6C !important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #333 !important; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #hide-menu > :first-child > a { width: 50px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow: none !important; } .btn-header.transparent a:hover { color: #a90329; } /* menu btn cont... */ #hide-menu i { color: #6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color: #ffffff; } #hide-menu i::before { content: "\f0c9"; } .hidden-menu #left-panel { left: 0; } .hidden-menu #main { position: relative; left: 210px; } .hidden-menu.fixed-ribbon #ribbon { left: 220px; width: 100%; } .fixed-ribbon #ribbon { left: 0px; } /* * header search */ .header-search { display: none; } #search-mobile { display: block; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: 49px; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color: #333; padding-right: 75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px; } .search-mobile #search-mobile { display: none; } .search-mobile #cancel-search-js { display: block; } .hidden-tablet { display: none !important; } .jarviswidget header h2 { width: 300px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } /* * IPHONE */ @media only screen and (min-width: 320px) and (max-width: 479px) { /* Hide headings on phones as its not needed*/ .page-title { display: none; } /* Profile Page */ .profile-pic { text-align: left; } .profile-pic > img { width: 90px; margin-left: 0px; top: -25px; margin-right: 0px; } .profile-pic + div > h1 { font-size: 20px; } .profile-pic + div > h1 small { font-size: 16px; } .profile-carousel .carousel-indicators { top: 10px; } #main::after { /*content: "IPHONE";*/ } #main { margin-left: 0; overflow-x: hidden; } #left-panel { left: -220px; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top: 0px !important; border-right: none !important; } .show-stat-buttons { padding-left: 10px !important; padding-right: 10px !important; } /* padding adjustment */ #content, #ribbon { padding-left: 5px; padding-right: 5px; } #header { padding-right: 5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top: -10px !important; } /* minified adjustment counter */ .minified #left-panel { left: 0px; } /* header color altered and adjusted for mobile view & contrast */ #header { background: #ffffff; } #ribbon { border-bottom: 1px solid #CFCFCF; border-top: 1px solid #E6E6E6; background: #F5F5F5; } #ribbon .breadcrumb a, #ribbon .breadcrumb { color: #6D6C6C !important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #333 !important; } /* lego width adjustment */ #logo { width: 135px; } #logo-group { width: 169px !important; } /* spark line top */ #sparks { text-align: center; background: #E0E0E0; padding: 10px 0; margin-bottom: 15px; } #sparks li { padding: 0 10px 0 20px; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow: none !important; } .btn-header.transparent a:hover { color: #a90329; } #hide-menu > :first-child > a { width: 46px !important; } #hide-menu i { color: #6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color: #ffffff; } #hide-menu i::before { content: "\f0c9"; } .hidden-menu #left-panel { left: 0px; } .hidden-menu #main { position: relative; left: 210px; } .hidden-menu.fixed-ribbon #ribbon { left: 220px; width: 100%; } .fixed-ribbon #ribbon { left: 0px; } /* #*$^& Bootstrap 3 ! */ .hidden-mobile { display: none !important; } .visible-mobile { display: inline-block !important; } /* activity panel */ .ajax-notifications { height: 250px; } .ajax-dropdown { width: 299px; height: 320px; left: 0; top: 49px; } .ajax-dropdown:before { margin-left: -14px; } .ajax-dropdown:after { margin-left: -13px; } /* * header search */ .header-search { display: none; } #search-mobile { display: block; margin-left: 0; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: 49px; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color: #333; padding-right: 75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px; } .search-mobile #search-mobile { display: none; } .search-mobile #cancel-search-js { display: block; } /* widget headers width */ .jarviswidget header h2 { width: 135px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } @-ms-viewport { } #extr-page #main { margin-top: 0px !important; } #mobile-profile-img { display: none !important; padding-right: 2px !important; padding-left: 2px !important; } .menu-on-top #mobile-profile-img { display: block !important; } #mobile-profile-img a.userdropdown img { width: 30px; margin-top: 5px; margin-left: 2px; border-radius: 3px; border: 1px solid #797979 !important; } .menu-on-top .page-footer { padding: 15px 13px 0; } .menu-on-top.hidden-menu #left-panel { left: 0px; } .menu-on-top #main { margin-left: 0px !important; margin-top: 69px !important; } .menu-on-top .minifyme, .menu-on-top #hide-menu, .menu-on-top #logout { display: none !important; } .menu-on-top aside#left-panel { width: 100% !important; min-height: 0 !important; height: auto; overflow: visible; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); border-bottom: 1px solid #222; border-top: 1px solid #333; } .menu-on-top aside#left-panel nav > ul { display: block; width: 100%; } .menu-on-top aside#left-panel nav > ul > li:first-child { margin-left: 0px; } .menu-on-top aside#left-panel nav > ul > li { display: block; position: relative; height: auto !important; padding: 0px !important; display: inline-block; float: left; border-right: 1px solid #222; border-left: 1px solid #4E4E4E; overflow: visible; } .menu-on-top aside#left-panel nav > ul > li > a { display: inline-block; height: 68px; line-height: 17px; text-shadow: none !important; font-size: 13px; text-decoration: none; line-height: 22px; padding: 10px 9px !important; } .menu-on-top li.active > a { font-weight: bold !important; } .menu-on-top .login-info, .menu-on-top nav > ul > li > a b { display: none; } .menu-on-top aside#left-panel nav > ul > li > a > i { display: block !important; margin: 1px 0 4px; line-height: inherit; width: auto; /*vertical-align: sub;*/ text-align: center; font-size: 24px; margin-bottom: 2px; width: 100%; } .menu-on-top .menu-item-parent { max-width: 72px; min-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 13px; } .menu-on-top .menu-item-parent + span { float: none !important; top: 5px; right: 5px; position: absolute; } .menu-on-top nav ul ul li a { padding-left: 10px !important; font-size: 13px; } /* Hover state */ .menu-on-top aside#left-panel nav > ul > li:hover { background: #ffffff; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #cfcfcf)); background: -ms-linear-gradient(bottom, #ffffff, #cfcfcf); background: -moz-linear-gradient(center bottom, #ffffff 0%, #cfcfcf 100%); background: -o-linear-gradient(#cfcfcf, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#ffffff', GradientType=0); } .menu-on-top aside#left-panel nav > ul > li:hover > a { color: #333 !important; border-left: 1px solid #c7c7c7; border-right: 1px solid #c7c7c7; padding-left: 8px !important; padding-right: 8px !important; } .menu-on-top aside#left-panel nav > ul > li > ul { position: absolute !important; background: #3a3633; } .menu-on-top aside#left-panel nav > ul > li:hover > ul { display: block !important; } .menu-on-top aside#left-panel nav ul li.active > a:before { content: "" !important; } .menu-on-top nav > ul ul li::before, .menu-on-top nav > ul > li > ul::before { border: none; } /* hover state universal */ .menu-on-top nav ul ul li a, .menu-on-top nav ul ul ul li a { color: #4C4F53; } .menu-on-top nav ul ul li a:hover, .menu-on-top nav ul ul ul li a:hover { color: #fff; background-color: #4C4F53; } .menu-on-top nav ul ul li:hover > a { color: #fff; background-color: #4C4F53; } .menu-on-top nav > ul ul ul { border-top: 1px solid #c7c7c7 !important; } /* Hover state second level */ .menu-on-top nav ul ul li { overflow: visible; } .menu-on-top nav ul ul, .menu-on-top nav ul ul ul { display: none !important; background: #ffffff !important; box-shadow: none; border: 1px solid #c7c7c7; -webkit-box-shadow: inset 0px -4px 0px 0px #bd2a2a; -moz-box-shadow: inset 0px -4px 0px 0px #bd2a2a; box-shadow: inset 0px -4px 0px 0px #bd2a2a; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); border-bottom: 1px solid #BD2A2A; border-top: none; width: 200px; border-radius: 0; padding: 3px; margin-left: 0px; } .menu-on-top nav > ul ul li:hover > ul { display: block !important; position: absolute; z-index: 999; left: 100%; top: -8px; background: #333; }