/** * All of the CSS for your public-facing functionality should be * included in this file. */ .loading { display:block; position:fixed; top:-2px; left:50%; width:120px; text-align:center; margin-left:-60px; background:#fff; color:#333; padding:10px 15px; font-size:12px; font-weight:bold; z-index:999999; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; box-shadow:0 0 5px rgba(0, 0, 0, 0.3); -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); } .loading.hide{display: none} .loading.site {width:156px;left: calc(50% - 78px);margin-left: 0px;top: 0% } .asl-p-cont {/*overflow: hidden;*/;padding: 0 15px;} .asl-p-cont textarea{resize:none;min-height: 60px;} .chosen-container-multi .chosen-choices{border: 1px solid #ccc;border-radius: 4px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;padding:3px 5px } .asl-p-cont .map_canvas{width: 100%;height: 200px} .asl-p-cont .mr0{margin-right: 0} .asl-p-cont .ml0{margin-left: 0} .asl-p-cont .pd-0{padding: 0} .asl-p-cont .pd-0-0 *{padding: 0} .asl-p-cont .mrg-b-0{margin-bottom: 0} .asl-p-cont .pd-l-10{padding-left: 10px} .asl-p-cont .pd-r-10{padding-right: 10px} .asl-p-cont .pd-lr-10{padding-right: 10px;padding-left: 10px} .asl-p-cont .pd-r-0{padding-right: 0} .asl-p-cont .mrg-t-30 {margin-top: 30px} .asl-p-cont .mrg-t-20 {margin-top: 20px} .asl-p-cont .float-r{float: right;} .asl-p-cont .float-l{float: left;} .asl-p-cont .clear{clear: both;} .asl-p-cont .ralign{text-align: right !important;} .asl-p-cont .mr-auto{margin: auto} .asl-p-cont .red{color: red} .asl-p-cont ul{padding-left: 0} .asl-p-cont .calign{text-align: center;} .asl-p-cont .lalign{text-align: left;} .asl-p-cont .ralign{text-align: right;} .asl-p-cont .mrg-r-10{margin-right: 12px} .asl-p-cont input[type="checkbox"]{margin-top: 7px} .asl-p-cont .alert.alert-warning{width: 90%;max-height: 200px;overflow-y: auto;padding-left: 25px} .asl-p-cont #logo_select_button{height: auto !important} .asl-p-cont .modal-body .alert.alert-warning{width: 100%} .asl-p-cont .modal-body .progress{margin-top: 20px} .asl-p-cont .dd-options{max-height: 200px;overflow: auto;} .asl-p-cont .dd-desc,.asl-p-cont .dd-option-description{display: none} .asl-p-cont .dd-image-right {max-height: 32px;width: 32px;} .asl-p-cont .dataTable img{max-height: 32px;width: 32px;} /*#frm-second .ui-datepicker-current-day a {background: #ccc;}*/ .formError { z-index: 2; } .formError .formErrorContent { z-index: 999501; } .formError .formErrorArrow { z-index: 999502; } .formErrorInsideDialog.formError { z-index: 999520; } .formErrorInsideDialog.formError .formErrorContent { z-index: 999521; } .formErrorInsideDialog.formError .formErrorArrow { z-index: 999526; } .inputContainer {position: relative;float: left;} .formError {position: absolute;left: auto !important;right: 17px !important;margin-top:2px !important;display: block;cursor: pointer;} .ajaxSubmit {padding: 20px;background: #55ea55;border: 1px solid #999;display: none} .formError .formErrorContent {background: #eb5f63; width: 100%;position:relative;border: 1px solid #931a03;padding: 6px 8px;color: white;background: #EB5F63;line-height: 18px;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 3px;border: none} .greenPopup .formErrorContent {color: white;background: #87ba17;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;background: -webkit-gradient(linear, left top, left bottom, from(#a7cf34), to(#87ba17));background: -webkit-linear-gradient(top, #a7cf34, #87ba17);background: -moz-linear-gradient(top, #a7cf34, #87ba17);background: -ms-linear-gradient(top, #a7cf34, #87ba17);background: -o-linear-gradient(top, #a7cf34, #87ba17);background: linear-gradient(top, #a7cf34, #87ba17);border-color: #6d960c;} .blackPopup .formErrorContent {color: white;background: #000000;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));background: -webkit-linear-gradient(top, #333333, #000000);background: -moz-linear-gradient(top, #333333, #000000);background: -ms-linear-gradient(top, #333333, #000000);background: -o-linear-gradient(top, #333333, #000000);background: linear-gradient(top, #333333, #000000);border-color: black;} .formError .formErrorArrow {display: none; width: 15px;margin: -2px 0 0 13px;position:relative;} body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow {margin: -2px 13px 0 0;} .formError .formErrorArrowBottom {box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;margin: 0px 0 0 12px;top:2px;} .formError .formErrorArrow div {border-left: 1px solid #931a03;border-right: 1px solid #931a03;box-shadow: 0 2px 3px #444;-moz-box-shadow: 0 2px 3px #444;-webkit-box-shadow: 0 2px 3px #444;font-size: 0px;height: 1px;background: #d52607;margin: 0 auto;line-height: 0;font-size: 0;display: block;} .formError .formErrorArrowBottom div {box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;} .greenPopup .formErrorArrow div {background: #87ba17;border-color: #6d960c;} .blackPopup .formErrorArrow div {background: #000000;border-color: black;} .formError .formErrorArrow .line10 {width: 15px;border: none;} .formError .formErrorArrow .line9 {width: 13px;border: none;} .formError .formErrorArrow .line8 {width: 11px;} .formError .formErrorArrow .line7 {width: 9px;} .formError .formErrorArrow .line6 {width: 7px;} .formError .formErrorArrow .line5 {width: 5px;} .formError .formErrorArrow .line4 {width: 3px;} .formError .formErrorArrow .line3 {width: 1px;} .formError .formErrorArrow .line2 {width: 3px;border: none;background: #931a03;} .formError .formErrorArrow .line1 {width: 1px;border: none;background: #931a03;} .greenPopup .formErrorArrow .line1, .greenPopup .formErrorArrow .line2 {background: #6d960c;} .blackPopup .formErrorArrow .line1, .blackPopup .formErrorArrow .line2 {background: black;} .asl-p-cont .help {color: #9F9898;font-size: 12px} .message.alert.static {border-top-left-radius: 0;border-top-right-radius: 0;display: block;height: 39px;left: calc(50% - 175px);margin-bottom: 10px;margin-top: 0;overflow: hidden;padding-bottom: 8px;padding-top: 8px;position: fixed;top: 0;width: 350px;z-index: 1000000;} .asl-p-cont .table{margin-bottom:0;} .asl-p-cont .dataTables_wrapper input{width: 130px} .asl-p-cont .dataTables_wrapper{padding:5px 10px 0 5px;padding-bottom: 10px;padding-top: 10px;} .asl-p-cont .dataTables_wrapper.no-footer .dataTables_scrollBody{ border-bottom: 1px solid #ddd} .asl-p-cont .table-bordered > thead > tr > th, .asl-p-cont .table-bordered > thead > tr > td{border-bottom-width: 0px;} .asl-p-cont .dataTables_wrapper .dataTables_processing{background: #fff;border: 1px solid #ddd;width: 300px;z-index: 10;height: 60px;left: calc(50% - 300px);margin-left:0%;} .asl-p-cont .edit-options{width: 100px;text-align: center} .asl-p-cont .edit-options span{cursor: pointer} .asl-p-cont .help-p{font-size: 10px;clear: both;display: block;} #frm-usersetting .panel .panel-body .form-group { display: inline-block; min-width: 265px; width: 50%;} /*#frm-usersetting .panel .form-group:nth-child(3), #frm-usersetting .panel .form-group:nth-child(6), #frm-usersetting .panel .form-group:nth-child(12), #frm-usersetting .panel .form-group.lng-lat, #frm-usersetting .panel .form-group.no-of-shop{ width: 100%;}*/ #frm-usersetting .panel .panel-body label.col-sm-3 { line-height: 12px; width: 155px; padding-right: 25px;} /*.asl-p-cont .form-group:nth-child(3) select,.asl-p-cont .form-group:nth-child(6) select { width: 400px;}*/ .asl-p-cont .form-group select{ width: 120px;} /*#frm-usersetting .panel .panel-body .form-group:nth-child(7), #frm-usersetting .panel .panel-body .form-group:nth-child(8), #frm-usersetting .panel .panel-body .form-group:nth-child(9), #frm-usersetting .panel .panel-body .form-group:nth-child(10), #frm-usersetting .panel .panel-body .form-group:nth-child(11), #frm-usersetting .panel .panel-body .form-group:nth-child(12) { min-width: auto; width: 33.333%;}*/ #frm-usersetting .panel .panel-body .form-group.full{width: 100%} #frm-usersetting .panel .panel-body .form-group.c-option{height: 40px;} #frm-usersetting .panel .panel-body .form-group.s-option.no-4 select,#frm-usersetting .panel .panel-body .form-group.s-option.no-7 select{width: 400px} #frm-usersetting .panel .panel-body .form-group.thirdpart{width : 33.33%;min-width: 180px;float: left;} #frm-usersetting .panel .panel-body .form-group.half{width : 50%} #frm-usersetting .panel .form-group.lng-lat, #frm-usersetting .panel .form-group.no-of-shop{ width: 100%;} #frm-usersetting .panel .panel-body .form-group > div#radio > label { margin-left: 5px; margin-right: 5px;} #frm-usersetting .panel .panel-body .form-group:nth-last-child(2) > input { margin-right: 7px; width: 170px;} #frm-usersetting .panel-body .form-group.ralign { text-align: center; width: 100%;} #frm-usersetting .panel-body .form-group { float: left; margin-left: 0; margin-right: 0;} #frm-usersetting .col-md-6 { max-width: 621px; min-width: 620px;} #frm-addstore .btn.btn-primary.dropdown-toggle { margin-right: 10px;} #frm-addstore .btn-group #logolist > li { border-bottom: 1px solid #ddd;} #frm-addstore .dropdown-menu > li > a { padding-left: 10px; padding-right: 10px;} #frm-addstore .dropdown-menu > li > a > img { margin-right: 10px;} #frm-addstore .dropdown-menu > li > a { font-size: 12px; text-transform: capitalize;} .asl-p-cont table#tbl_stores tbody td,table#tbl_categories tbody td { font-size: 10px;} .asl-p-cont .modal-content .btn.btn-default{height: 34px} .frm-upload-box .input-group,#frm-addcategory .input-group{ display: table; left: -3px; margin-top: 10px !important; padding-left: 25px; padding-right: 25px;} .frm-upload-box .form-group label.control-label, #frm-addcategory .form-group label.control-label { padding-top: 10px;} .frm-upload-box .form-group.ralign { padding-right: 5%; margin-bottom: 0;} .frm-upload-box .form-group:nth-child(3) { margin-bottom: 0;} .addimagemodel.modal .modal-header h4.modal-title, #asl-new-cat-box.modal .modal-header h4{ margin: 0;} #asl-new-cat-box.modal .modal-footer { margin: 0 -15px; padding-left: 30px; padding-right: 45px; padding-bottom: 0;} #asl-create-category{width: auto;margin-top: -1px;} .asl-p-cont .font-11{font-size: 11px;line-height: 25px} /*! * Timepicker Component for Twitter Bootstrap * * Copyright 2013 Joris de Wit * * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ .bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .add-on{cursor:pointer}.bootstrap-timepicker .add-on i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:2px 3px 2px 2px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:"";display:inline-block;left:9px;position:absolute;top:-7px}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:"";display:inline-block;left:10px;position:absolute;top:-6px}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{border-bottom:0}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:25px;margin:0;text-align:center}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}} .bootstrap-timepicker-widget .glyphicon.glyphicon-chevron-up {font-size: 14px} .bootstrap-timepicker-widget .glyphicon.glyphicon-chevron-down {font-size: 14px} .bootstrap-timepicker-widget .form-control {padding: 0;margin: auto} .bootstrap-timepicker-widget{width: 160px} .bootstrap-timepicker-widget table td input{width: 35px} #frm-addstore .panel .panel-body .btn.btn-success { margin-top: 20px; width: 100%; } #frm-addmarker > .form-group:nth-child(2) { padding: 0 15px; } #frm-addmarker > .form-group:nth-child(2) > .input-group.col-sm-offset-2.col-sm-10 { padding: 0 15px; } .modal .modal-header h4, .modal .modal-header h3, .modal .modal-header h2, .modal .modal-header h1 { margin: 0; } #frm-updatemarker .form-group { padding: 0 15px; } #frm-updatemarker .form-group:nth-child(2) > input { float: right; width: 80%; } #frm-updatemarker .form-group:nth-child(2) > label { width: 20%; } #frm-updatemarker .form-group:nth-child(2) { padding-bottom: 10px; } #updatemarker_image.form-group .btn.btn-default { margin-left: 23px; } #frm-updatecategory .form-group { padding: 0 15px; } #frm-updatecategory .form-group:nth-child(2) > input { float: right; width: 80%; } #frm-updatecategory .form-group:nth-child(2) > label { width: 20%; } #frm-updatecategory .form-group:nth-child(2) { padding-bottom: 10px; } #change_image.btn.btn-default { margin-left: 23px; } #frm-usersetting .panel .panel-body .form-group.map_layout,#frm-usersetting .panel .panel-body .form-group.layout, #frm-usersetting .panel .panel-body .form-group.infobox_layout { width: 100%; } #frm-addstore .form-group.ralign { margin-left: 0; margin-right: 0; } #btn-asl-add.btn.btn-primary.mrg-r-10 { margin: 0; } .map_layout #radio label img ,.layout #radio label img { margin-left: 0px; max-width: 125px; } .form-group.map_layout > div#radio,.form-group.layout > div#radio { float: right; width: 400px; } .form-group.infobox_layout > div#radio { float: right; width: 400px; } .addimagemodel .modal-footer { display: none ; } .addimagemodel .modal-header .close { margin-top: -3px; } input#asl-create-category{ height: 20px; margin-top: 3px !important; width: 20px !important; padding: 2px 0px 0px 2px !important; } #frm-usersetting .form-group.lng-lat > .col-sm-4 { margin-right: 4%; padding: 0; } #frm-usersetting .form-group.lng-lat > .col-sm-4:nth-child(3) { margin-right: 0; } #frm-usersetting .panel .panel-body .form-group.map_layout > div#radio > label, #frm-usersetting .panel .panel-body .form-group.layout > div#radio > label, #frm-usersetting .panel .panel-body .form-group.infobox_layout > div#radio > label { margin-left: 0; } .form-group.infobox_layout #radio label img { margin-left: 0px; width: 190px; } .form-group.color_scheme > div#radio, .form-group.Font_color > div#radio{ float: left; width: 400px; } #frm-usersetting.form-horizontal .form-group.color_scheme, #frm-usersetting.form-horizontal .form-group.Font_color{ width: 100%; } .color_scheme span label.color-box, .Font_color span label.font-color-box{ border-radius: 4px; height: 32px; margin-right: 4px; width: 32px; } .color_scheme span input, .Font_color span input{ display: none; } #radio input:checked + label.color-box { border: 1px solid rgba(0, 115, 170, 1); position: relative; box-shadow: 0 0 3px 0 rgba(0, 115, 170, 1); } #radio input:checked + label.font-color-box { border: 1px solid rgba(0, 115, 170, 1); position: relative; box-shadow: 0 0 3px 0 rgba(0, 115, 170, 1); } .color-box.color-0{ background: #CC3333; } .color-box.color-1{ background: #E11619; } .color-box.color-2{ background: #542733; } .color-box.color-3{ background: #278BBC; } .color-box.color-4{ background: #78C1E4; } .color-box.color-5{ background: #ACD55D; } .color-box.color-6{ background: #A8BD78; } .color-box.color-7{ background: #EAAE40; } .color-box.color-8{ background: #E68EC1; } .color-box.color-9{ background: #B39571; } .font-color-box.color-0{ background: #000; } .font-color-box.color-1{ background: #333; } .font-color-box.color-2{ background: #278BBC; } .font-color-box.color-3{ background: #ccc; } .font-color-box.color-4{ background: #542733; } .form-group.map_layout #radio > input,.form-group.layout #radio > input { display: none; } .form-group.map_layout #radio > input:checked + label, .form-group.layout #radio > input:checked + label, #frm-usersetting .form-group.page_layout > #radio input:checked + label, .form-group.infobox_layout #radio input:checked + label{ border: 0 solid rgba(0, 115, 170, 1); box-shadow: 0 0 4px 1px rgba(0, 115, 170, 1); position: relative; } #frm-usersetting .panel .panel-body .form-group.page_layout { width: 100%; } .asl-p-cont .form-group.map_layout #radio > input:checked + label::before, .asl-p-cont .form-group.layout #radio > input:checked + label::before, .asl-p-cont #frm-usersetting .form-group.page_layout > #radio input:checked + label:before, .asl-p-cont .form-group.infobox_layout #radio input:checked + label:before, .asl-p-cont #radio input:checked + label.color-box:before, .asl-p-cont #radio input:checked + label.font-color-box:before{ background: rgba(0, 115, 170, 1) none repeat scroll 0 0; color: #fff; content: "\e013"; font-family: "Glyphicons Halflings"; font-size: 10px; font-weight: 100; height: 15px; line-height: 13px; position: absolute; right: 0; text-align: center; top: 0; width: 15px; } .asl-p-cont #frm-usersetting .form-group.page_layout > #radio > label { float: left; margin: 0 2% 0 0 !important; width: 48%; } .asl-p-cont .form-group.page_layout #radio > label > img { width: 100%; } .asl-p-cont .form-group.page_layout #radio > input { display: none; } .asl-p-cont .form-group.page_layout > div#radio { display: inline-block; float: right; width: 400px; } .asl-p-cont .form-group.infobox_layout #radio > input { display: none; } .asl-p-cont #frm-usersetting #message_complete + .row { margin: 0; } .asl-p-cont #frm-upload-logo #drop-zone.input-group,#frm-upload-marker #drop-zone-2.input-group { padding: 0 25px; } .asl-p-cont #ddl-asl-logos .dd-select, #ddl-asl-markers .dd-select { height: 55px; overflow: hidden; } /*.asl-p-cont #confirm-delete .modal-header h4 { font-size: 16px; } .asl-p-cont #confirm-delete .modal-header { padding: 10px 15px; } */ .asl-p-cont { overflow: auto; } .asl-p-cont .color_scheme span label.color-box{ position: relative; overflow: hidden; } .asl-p-cont .color_scheme span label.color-box span.co_1{ position: absolute; width: 50%; height: 50%; left: 0; top: 0; background: #0f0; } .asl-p-cont .color_scheme span label.color-box span.co_2{ position: absolute; width: 50%; height: 50%; bottom: 0; left: 0; background: #f0f; } .asl-p-cont .color_scheme.layout_2 span label.color-box.color-10 span.co_2{background: #231F20} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-10 span.co_1{background: #757116} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-10 {background: #AEBC21} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-0 span.co_2{background: #EF5A28} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-0 span.co_1{background: #06476D} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-0 {background: #2580C3} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-1 span.co_2{background: #1D2731} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-1 span.co_1{background: #4A2849} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-1 {background: #93628F} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-2 span.co_2{background: #75C9D3} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-2 span.co_1{background: #01524B} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-2 {background: #57BC90} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-3 span.co_2{background: #CF6766} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-3 span.co_1{background: #30415D} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-3 {background: #031424} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-4 span.co_2{background: #3D3D3D} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-4 span.co_1{background: #965E61} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-4 {background: #B1463C} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-5 span.co_2{background: #CDA34F} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-5 span.co_1{background: #646B49} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-5 {background: #393E27} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-6 span.co_2{background: #985D6F} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-6 span.co_1{background: #4A4F6C} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-6 {background: #1A2133} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-7 span.co_2{background: #00304A} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-7 span.co_1{background: #94927B} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-7 {background: #B59A73} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-8 span.co_2{background: #50021B} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-8 span.co_1{background: #FB9C6C} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-8 {background: #D55121} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-9 span.co_2{background: #BD2031} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-9 span.co_1{background: #AD0066} .asl-p-cont .color_scheme.layout_2 span label.color-box.color-9 {background: #D13D94} .asl-p-cont .layout #radio label img { max-width: 190px; } .asl-p-cont .asl-p-cont .glyphicon-duplicate{cursor: pointer;} .days_table{ width: 100%; } .asl-p-cont .days_table th ,.asl-p-cont .days_table td{ padding: 3px 5px; } .asl-p-cont .days_table thead tr th { padding-bottom: 5px; padding-top: 5px; } .asl-p-cont .formError { z-index: 999; } .asl-p-cont .onoffswitch {position: relative; width: 110px; margin-bottom: 20px;-webkit-user-select:none; -moz-user-select:none;-ms-user-select: none;} .asl-p-cont .onoffswitch-checkbox { display: none; } .asl-p-cont .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .asl-p-cont .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .asl-p-cont .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 26px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; border: 2px solid transparent; background-clip: padding-box; } .asl-p-cont .onoffswitch-inner:before { content: "Enable"; padding-left: 10px; background-color: #EEEEEE; color: #337ab7;; } .asl-p-cont .onoffswitch-inner:after { content: "Disable"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; } .asl-p-cont .onoffswitch-switch { display: block; width: 40px; margin: 0px; background: #A1A1A1; position: absolute; top: 0; bottom: 0; right: 70px; transition: all 0.3s ease-in 0s; } .asl-p-cont .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .asl-p-cont .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; background-color: #337ab7; } .onoffswitch-label .onoffswitch-switch:hover { background-color: #34a7c1; } .asl-p-cont .well > .row > .form-group:first-child > label { padding-top: 5px; } .asl-p-cont .map-options{ margin-top: 10px; padding-top: 30px; border-top: 2px solid #eee; } .asl-p-cont .onoffswitch2 { position: relative; width: 72px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .asl-p-cont .onoffswitch2-checkbox { display: none; } .asl-p-cont .onoffswitch2-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .asl-p-cont .onoffswitch2-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .asl-p-cont .onoffswitch2-inner:before, .onoffswitch2-inner:after { display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 21px; font-size: 13px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; border: 2px solid transparent; background-clip: padding-box; } .asl-p-cont .onoffswitch2-inner:before { content: "ON"; padding-left: 5px; background-color: #EEEEEE; color: #27A1CA; } .asl-p-cont .onoffswitch2-inner:after { content: "OFF"; padding-right: 5px; background-color: #EEEEEE; color: #999999; text-align: right; } .asl-p-cont .onoffswitch2-switch { display: block; width: 32px; margin: 0px; background: #A1A1A1; position: absolute; top: 0; bottom: 0; right: 40px; transition: all 0.3s ease-in 0s; } .asl-p-cont .onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-inner { margin-left: 0; } .asl-p-cont .onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-switch { right: 0px; background-color: #27A1CA; } .color_scheme .map_cange#radio span label.color-box { height: 29px; width: 29px; } .map-option-top label ,.row.map-option-bottom label { text-transform: capitalize; } .row.map-option-bottom { padding-top: 15px; border-top: 1px solid #ccc; margin-top: 15px; } body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: black; /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */ background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 10000; } .sweet-alert { background-color: white; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 99999; } @media all and (max-width: 540px) { .sweet-alert { width: auto; margin-left: 0; margin-right: 0; left: 15px; right: 15px; } } .sweet-alert h2 { color: #575757; font-size: 30px; text-align: center; font-weight: 600; text-transform: none; position: relative; margin: 25px 0; padding: 0; line-height: 40px; display: block; } .sweet-alert p { color: #797979; font-size: 16px; text-align: center; font-weight: 300; position: relative; text-align: inherit; float: none; margin: 0; padding: 0; line-height: normal; } .sweet-alert fieldset { border: none; position: relative; } .sweet-alert .sa-error-container { background-color: #f1f1f1; margin-left: -17px; margin-right: -17px; overflow: hidden; padding: 0 10px; max-height: 0; webkit-transition: padding 0.15s, max-height 0.15s; transition: padding 0.15s, max-height 0.15s; } .sweet-alert .sa-error-container.show { padding: 10px 0; max-height: 100px; webkit-transition: padding 0.2s, max-height 0.2s; transition: padding 0.25s, max-height 0.25s; } .sweet-alert .sa-error-container .icon { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: #ea7d7d; color: white; line-height: 24px; text-align: center; margin-right: 3px; } .sweet-alert .sa-error-container p { display: inline-block; } .sweet-alert .sa-input-error { position: absolute; top: 29px; right: 26px; width: 20px; height: 20px; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.1s; transition: all 0.1s; } .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after { content: ""; width: 20px; height: 6px; background-color: #f06e57; border-radius: 3px; position: absolute; top: 50%; margin-top: -4px; left: 50%; margin-left: -9px; } .sweet-alert .sa-input-error::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-input-error::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-input-error.show { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .sweet-alert input { width: 100%; box-sizing: border-box; border-radius: 3px; border: 1px solid #d7d7d7; height: 43px; margin-top: 10px; margin-bottom: 17px; font-size: 18px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); padding: 0 12px; display: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .sweet-alert input:focus { outline: none; box-shadow: 0px 0px 3px #c4e6f5; border: 1px solid #b4dbed; } .sweet-alert input:focus::-moz-placeholder { transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input:focus:-ms-input-placeholder { transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input:focus::-webkit-input-placeholder { transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input::-moz-placeholder { color: #bdbdbd; } .sweet-alert input:-ms-input-placeholder { color: #bdbdbd; } .sweet-alert input::-webkit-input-placeholder { color: #bdbdbd; } .sweet-alert.show-input input { display: block; } .sweet-alert .sa-confirm-button-container { display: inline-block; position: relative; } .sweet-alert .la-ball-fall { position: absolute; left: 50%; top: 50%; margin-left: -27px; margin-top: 4px; opacity: 0; visibility: hidden; } .sweet-alert button { background-color: #8CD4F5; color: white; border: none; box-shadow: none; font-size: 17px; font-weight: 500; -webkit-border-radius: 4px; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0 5px; cursor: pointer; } .sweet-alert button:focus { outline: none; box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .sweet-alert button:hover { background-color: #7ecff4; } .sweet-alert button:active { background-color: #5dc2f1; } .sweet-alert button.cancel { background-color: #C1C1C1; } .sweet-alert button.cancel:hover { background-color: #b9b9b9; } .sweet-alert button.cancel:active { background-color: #a8a8a8; } .sweet-alert button.cancel:focus { box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; } .sweet-alert button[disabled] { opacity: .6; cursor: default; } .sweet-alert button.confirm[disabled] { color: transparent; } .sweet-alert button.confirm[disabled] ~ .la-ball-fall { opacity: 1; visibility: visible; transition-delay: 0s; } .sweet-alert button::-moz-focus-inner { border: 0; } .sweet-alert[data-has-cancel-button=false] button { box-shadow: none !important; } .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] { padding-bottom: 40px; } .sweet-alert .sa-icon { width: 80px; height: 80px; border: 4px solid gray; -webkit-border-radius: 40px; border-radius: 40px; border-radius: 50%; margin: 20px auto; padding: 0; position: relative; box-sizing: content-box; } .sweet-alert .sa-icon.sa-error { border-color: #F27474; } .sweet-alert .sa-icon.sa-error .sa-x-mark { position: relative; display: block; } .sweet-alert .sa-icon.sa-error .sa-line { position: absolute; height: 5px; width: 47px; background-color: #F27474; display: block; top: 37px; border-radius: 2px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-left { -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 17px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); right: 16px; } .sweet-alert .sa-icon.sa-warning { border-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-body { position: absolute; width: 5px; height: 47px; left: 50%; top: 10px; -webkit-border-radius: 2px; border-radius: 2px; margin-left: -2px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-dot { position: absolute; width: 7px; height: 7px; -webkit-border-radius: 50%; border-radius: 50%; margin-left: -3px; left: 50%; bottom: 10px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-info { border-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::before { content: ""; position: absolute; width: 5px; height: 29px; left: 50%; bottom: 17px; border-radius: 2px; margin-left: -2px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; top: 19px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-success { border-color: #A5DC86; } .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { content: ''; -webkit-border-radius: 40px; border-radius: 40px; border-radius: 50%; position: absolute; width: 60px; height: 120px; background: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success::before { -webkit-border-radius: 120px 0 0 120px; border-radius: 120px 0 0 120px; top: -7px; left: -33px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 60px 60px; transform-origin: 60px 60px; } .sweet-alert .sa-icon.sa-success::after { -webkit-border-radius: 0 120px 120px 0; border-radius: 0 120px 120px 0; top: -11px; left: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0px 60px; transform-origin: 0px 60px; } .sweet-alert .sa-icon.sa-success .sa-placeholder { width: 80px; height: 80px; border: 4px solid rgba(165, 220, 134, 0.2); -webkit-border-radius: 40px; border-radius: 40px; border-radius: 50%; box-sizing: content-box; position: absolute; left: -4px; top: -4px; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-fix { width: 5px; height: 90px; background-color: white; position: absolute; left: 28px; top: 8px; z-index: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-success .sa-line { height: 5px; background-color: #A5DC86; display: block; border-radius: 2px; position: absolute; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { width: 25px; left: 14px; top: 46px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { width: 47px; right: 8px; top: 38px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-custom { background-size: contain; border-radius: 0; border: none; background-position: center center; background-repeat: no-repeat; } /* * Animations */ @-webkit-keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-transform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-transform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @-webkit-keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @-webkit-keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @-webkit-keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } @keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } .showSweetAlert[data-animation=pop] { -webkit-animation: showSweetAlert 0.3s; animation: showSweetAlert 0.3s; } .showSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .showSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideFromTop 0.3s; animation: slideFromTop 0.3s; } .showSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideFromBottom 0.3s; animation: slideFromBottom 0.3s; } .hideSweetAlert[data-animation=pop] { -webkit-animation: hideSweetAlert 0.2s; animation: hideSweetAlert 0.2s; } .hideSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .hideSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideToTop 0.4s; animation: slideToTop 0.4s; } .hideSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideToBottom 0.3s; animation: slideToBottom 0.3s; } @-webkit-keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @-webkit-keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @-webkit-keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } @keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } .animateSuccessTip { -webkit-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s; } .animateSuccessLong { -webkit-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s; } .sa-icon.sa-success.animate::after { -webkit-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in; } @-webkit-keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } @keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } .animateErrorIcon { -webkit-animation: animateErrorIcon 0.5s; animation: animateErrorIcon 0.5s; } @-webkit-keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } @keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } .animateXMark { -webkit-animation: animateXMark 0.5s; animation: animateXMark 0.5s; } @-webkit-keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } @keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } .pulseWarning { -webkit-animation: pulseWarning 0.75s infinite alternate; animation: pulseWarning 0.75s infinite alternate; } @-webkit-keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } @keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } .pulseWarningIns { -webkit-animation: pulseWarningIns 0.75s infinite alternate; animation: pulseWarningIns 0.75s infinite alternate; } @-webkit-keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Internet Explorer 9 has some special quirks that are fixed here */ /* The icons are not animated. */ /* This file is automatically merged into sweet-alert.min.js through Gulp */ /* Error icon */ .sweet-alert .sa-icon.sa-error .sa-line.sa-left { -ms-transform: rotate(45deg) \9; } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { -ms-transform: rotate(-45deg) \9; } /* Success icon */ .sweet-alert .sa-icon.sa-success { border-color: transparent\9; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { -ms-transform: rotate(45deg) \9; } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { -ms-transform: rotate(-45deg) \9; } /*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT */ .la-ball-fall, .la-ball-fall > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-fall { display: block; font-size: 0; color: #fff; } .la-ball-fall.la-dark { color: #333; } .la-ball-fall > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-fall { width: 54px; height: 18px; } .la-ball-fall > div { width: 10px; height: 10px; margin: 4px; border-radius: 100%; opacity: 0; -webkit-animation: ball-fall 1s ease-in-out infinite; -moz-animation: ball-fall 1s ease-in-out infinite; -o-animation: ball-fall 1s ease-in-out infinite; animation: ball-fall 1s ease-in-out infinite; } .la-ball-fall > div:nth-child(1) { -webkit-animation-delay: -200ms; -moz-animation-delay: -200ms; -o-animation-delay: -200ms; animation-delay: -200ms; } .la-ball-fall > div:nth-child(2) { -webkit-animation-delay: -100ms; -moz-animation-delay: -100ms; -o-animation-delay: -100ms; animation-delay: -100ms; } .la-ball-fall > div:nth-child(3) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .la-ball-fall.la-sm { width: 26px; height: 8px; } .la-ball-fall.la-sm > div { width: 4px; height: 4px; margin: 2px; } .la-ball-fall.la-2x { width: 108px; height: 36px; } .la-ball-fall.la-2x > div { width: 20px; height: 20px; margin: 8px; } .la-ball-fall.la-3x { width: 162px; height: 54px; } .la-ball-fall.la-3x > div { width: 30px; height: 30px; margin: 12px; } /* * Animation */ @-webkit-keyframes ball-fall { 0% { opacity: 0; -webkit-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -webkit-transform: translateY(145%); transform: translateY(145%); } } @-moz-keyframes ball-fall { 0% { opacity: 0; -moz-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -moz-transform: translateY(145%); transform: translateY(145%); } } @-o-keyframes ball-fall { 0% { opacity: 0; -o-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -o-transform: translateY(145%); transform: translateY(145%); } } @keyframes ball-fall { 0% { opacity: 0; -webkit-transform: translateY(-145%); -moz-transform: translateY(-145%); -o-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -webkit-transform: translateY(145%); -moz-transform: translateY(145%); -o-transform: translateY(145%); transform: translateY(145%); } }