.preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, 0.2);
 z-index: 9999999;
 display: none
}

.preloader .spinner {
 width: 36px;
 height: 36px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -18px 0 0 -18px;
}

.preloader .spinner div {
 height: 36px;
 width: 36px;
 position: relative;
 -webkit-animation: rotation .6s infinite linear;
 -moz-animation: rotation .6s infinite linear;
 -o-animation: rotation .6s infinite linear;
 animation: rotation .6s infinite linear;

 border-left: 3px solid rgba(26, 187, 156, .15);
 border-right: 3px solid rgba(26, 187, 156, .15);
 border-bottom: 3px solid rgba(26, 187, 156, .15);
 border-top: 3px solid rgba(26, 187, 156, .8);
 border-radius: 100%;
}

.loader {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, 0.5);
 z-index: 9999999;
 width: 100%;
 height: 100%;
 display: none;
}

.loader .spinner {
 width: 36px;
 height: 36px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -18px 0 0 -18px;
}

.loader .spinner div {
 height: 36px;
 width: 36px;
 position: relative;
 -webkit-animation: rotation .6s infinite linear;
 -moz-animation: rotation .6s infinite linear;
 -o-animation: rotation .6s infinite linear;
 animation: rotation .6s infinite linear;

 border-left: 3px solid rgba(26, 187, 156, .15);
 border-right: 3px solid rgba(26, 187, 156, .15);
 border-bottom: 3px solid rgba(26, 187, 156, .15);
 border-top: 3px solid rgba(26, 187, 156, .8);
 border-radius: 100%;
}

@-webkit-keyframes rotation {
 from {
  -webkit-transform: rotate(0deg);
 }
 to {
  -webkit-transform: rotate(359deg)
 }
}

@-moz-keyframes rotation {
 from {
  -moz-transform: rotate(0deg)
 }
 to {
  -moz-transform: rotate(359deg)
 }
}

@-o-keyframes rotation {
 from {
  -o-transform: rotate(0deg)
 }
 to {
  -o-transform: rotate(359deg)
 }
}

@keyframes rotation {
 from {
  transform: rotate(0deg)
 }
 to {
  transform: rotate(359deg)
 }
}

.form-group {
 position: relative;
}

.form-group label.error {
 background: #ff9c00;
 color: #fff;
 position: absolute;
 font-size: 13px;
 font-weight: normal;
 top: auto;
 bottom: -40px;
 left: 15px;
 padding: 5px;
 z-index: 1;
 border-radius: 2px;
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

table .form-group label.error {
 bottom: auto;
 top: 40px;
 left: 0px;
}

.form-group label.error:after {
 border-bottom: 6px solid #ff9c00;
 border-left: 6px solid rgba(0, 0, 0, 0);
 border-right: 6px solid rgba(0, 0, 0, 0);
 content: '';
 display: inline-block;
 position: absolute;
 top: -6px;
 left: 20px;
}

.table-paging .paging-info {
 text-align: left;
}

.table-paging .paging-ul {
 text-align: right;
}

.lwr, input[type="email"], input[data-rule-email="true"] {
 text-transform: lowercase;
}

.upr {
 text-transform: uppercase;
}

.asterisk {
 color: #ff0000;
}

input[type="number"], input[type="text"][data-rule-digits="true"], input[type="text"][data-rule-numbers="true"] {
 text-align: right;
}

ul.sorting {
 list-style: none;
 padding: 0%;
 width: 100%;
 float: left;
}

ul.sorting li {
 display: inline-block;
 color: #2c3b41;
 margin: 5px;
 padding: 10px;
 background: #f5f5f5;
 border: 1px solid #2c3b41;
 cursor: move;
 border-radius: 1px;
}

.text-left {
 text-align: left !important;
}

.greybg {
 background: #efefef;
}

.Grid tr:nth-child(1) button[rel="RowDel"] {
 visibility: hidden;
}

.bs-wizard {
 margin-bottom: 10px;
 border-bottom: solid 1px #e0e0e0;
 padding: 0 0 10px 0;
}

.bs-wizard > .bs-wizard-step {
 padding: 0;
 position: relative;
}

.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
 color: #595959;
 font-size: 12px;
 margin-bottom: 5px;
}

.bs-wizard > .bs-wizard-step .bs-wizard-info {
 color: #999;
 font-size: 14px;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
 position: absolute;
 width: 30px;
 height: 30px;
 display: block;
 background: #FFB6B6;
 top: 35px;
 left: 50%;
 margin-top: -15px;
 margin-left: -15px;
 border-radius: 50%;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
 content: ' ';
 width: 14px;
 height: 14px;
 background: #FE0000;
 border-radius: 50px;
 position: absolute;
 top: 8px;
 left: 8px;
}

.bs-wizard > .bs-wizard-step > .progress {
 position: relative;
 border-radius: 0px;
 height: 8px;
 box-shadow: none;
 margin: 14px 0;
}

.bs-wizard > .bs-wizard-step > .progress > .progress-bar {
 width: 0px;
 box-shadow: none;
 background: #FFB6B6;
}

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {
 width: 100%;
}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {
 width: 50%;
}

.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {
 width: 0%;
}

.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {
 width: 100%;
}

.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
 background-color: #f2f2f2;
}

.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {
 opacity: 0;
}

.bs-wizard > .bs-wizard-step:first-child > .progress {
 left: 50%;
 width: 50%;
}

.bs-wizard > .bs-wizard-step:last-child > .progress {
 width: 50%;
}

.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot {
 pointer-events: none;
}

@media (max-width: 991px) {
 .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
  top: 18px
 }
}

@media (min-width: 769px) {
 .modal-lg {
  width: CALC(100% - 30px);
  margin: 20px auto;
 }
}

.tiles {
 list-style-type: none;
 margin: 10px 0;
 padding: 0;
 text-align: center;
 width: 100%;
}

.tiles > li {
 display: inline-block;
 text-align: center;
 float: none;
 margin: 0px 0px 8px 8px;
 position: relative;
}

.tiles > li > a {
 width: 150px;
 height: 150px;
 display: block;
 color: #fff;
 text-decoration: none;
 text-align: center;
}

.tiles > li > a span {
 font-size: 50px;
 display: block;
 padding-top: 20px;
}

.tiles > li > a span i {
 font-size: 50px;
}

.tiles > li > a span.title {
 font-size: 16pt !important;
 display: block;
 position: absolute;
 top: 75px;
 left: 0;
 right: 0;
 padding: 10px 2px;
 float: left;
 text-align: center;
}

.label.label-lg {
 font-size: 100%;
 padding: 8px;
}


img[data-role="img-view"] {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
}

img[data-role="img-view"]:hover {
 opacity: 0.7;
}

.imgmodal {
 display: none;
 position: fixed;
 z-index: 14511;
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0, 0, 0); /* Fallback color */
 background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.imgmodal .modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.imgmodal #caption {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #eee;
 padding: 10px 0;
 height: 150px;
}

/* Add Animation - Zoom in the Modal */
.imgmodal .modal-content, .imgmodal #caption {
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: zoom;
 animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
 from {
  -webkit-transform: scale(0)
 }
 to {
  -webkit-transform: scale(1)
 }
}

@keyframes zoom {
 from {
  transform: scale(0)
 }
 to {
  transform: scale(1)
 }
}

/* The Close Button */
.imgmodal .close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
}

.imgmodal .close:hover,
.imgmodal .close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
 .imgmodal .modal-content {
  width: 100%;
 }
}

.sort {
 cursor: pointer;
}

.sort:after {
 content: "\f0dc";
 font-family: "FontAwesome";
 text-align: right;
 padding: 5px;
}

.sort.asc:after {
 content: "\f0de";
 font-family: "FontAwesome";
 padding: 5px;
}

.sort.desc:after {
 content: "\f0dd";
 font-family: "FontAwesome";
 padding: 5px;
}

.pagination {
 margin: 0;
}