/* General padding and margin settings */
.p-t-0 {
  padding-top: 0 !important;
}
.p-t-5 {
  padding-top: 5px !important;
}
.p-t-25 {
  padding-top: 25px !important;
}
.p-b-0 {
  padding-bottom: 0 !important;
}
.p-b-5 {
  padding-bottom: 5px !important;
}
.p-l-5 {
  padding-left: 5px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-r-5 {
  padding-right: 5px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.m-t-0 {
  margin-top: 0 !important;
}
.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
    margin-top: 10px;
}
.m-t-20 {
    margin-top: 20px;
}
.m-t-25 {
  margin-top: 25px !important;
}
.m-b-0 {
  margin-bottom: 0 !important;
}
.m-b-5 {
  margin-bottom: 5px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-l-5 {
  margin-left: 5px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-r-5 {
  margin-right: 5px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.p-l-0 {
    padding-left: 0px !important;
}
.p-r-0 {
    padding-right: 0px !important;
}
.w-125 {
    width: 125px !important;
}
.w-100 {
    width: 100px !important;
}
.w-25 {
    width: 25px !important;
}
.m-25 {
    margin: 25px !important;
}

/* Font sizes */
.disp-16 {
    font-size: 16px;
}

.disp-18 {
    font-size: 18px;
}

/* SmartForm Bootstrap Validation */
#extr-page h4.paragraph-header {
  width: auto;
}
#extr-page .smart-form .alert {
  margin: 4px;
}
#extr-page .smart-form .alert li {
  margin-left: 14px;
  list-style: none;
}
#extr-page .smart-form .alert li:before {
  content: "\f071";
  font-family: FontAwesome;
  position: absolute;
  left: 14px;
}
#extr-page .smart-form div + fieldset {
  padding-top: 15px;
}

/* Data table alignment style */
table.dataTable tbody td {
  vertical-align: middle;
}

/* Multiselect coloring */
table.dataTable tbody tr.selected {
    color: white !important;
    background-color: #a6b4cd !important;
}

/* Spinner styling */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 25px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* End - Spinner styling */

.image-cover {
    width: 100%;
    height: auto;
}

.image-background-full {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.btn-rounded {
    border-radius: 28px;
}

.w-150 {
    width: 150px;
}

.hh-back-section {
    background-color: #EDEDED;
    color: #202020;
    border: 0.5px dotted #d0d0d0;
    /*margin: 8px;*/
    padding: 12px;
}

.hh-back-dark {
    background-color: #4A148C;
    color: white;
}

.hh-border-dark {
    border-color : #3A047C;
}

.hh-back-light {
    background-color: #F3E5F5;
    color: black;
}

.hh-border-light {
    border-color : #E3D5E5;
}

.hh-back {
    background-color: #9C27B0;
    color: #fff;
}

.hh-border {
    border-color : #8C17C0;
}

.hh-btn-dark {
  color: #fff !important;
  background-color: #4A148C;
  border-color: #3A047C;
}

.hh-btn-dark:hover {
  color: #fff;
  background-color: #6A34AC;
  border-color: #5A249C;
}

.hh-btn {
  color: #fff;
  background-color: #9C27B0;
  border-color: #8C17C0;
}

.hh-btn:hover {
  color: #fff;
  background-color: #BC47D0;
  border-color: #AC37E0;
}

/* Badges */
.badge-primary {
  color: #fff;
  background-color: #007bff;
}

a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:hover, a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}

/* Misc styling */
.hand {
    cursor: pointer !important;
}

.required:before {
	color: red;
	font-family: 'FontAwesome';
	font-weight: bold;
	font-size: 14px;
	margin-right: 5px;
	content: "*";
	vertical-align: middle;
}

.select-image-area {
    padding: 6px; 
    border: 3px dotted #E0E0E0; 
    margin-bottom: 5px; 
    width: 150px; 
    height: 115px;
    margin-top: 10px;
}

/* Misc fixes */
.panel {
    margin-bottom: 0px !important;
}

.MessageBoxContainer button {
    color: #222 !important;
}

.dz-image img {
    height: 100% !important;
    width: 100% !important;
}

.dz-buttons span {
    border: 1px solid rgba(200,200,200,.8);
    background-color: rgba(255,255,255,.8);
    padding-top: 2px;
}

.fa-image-icon-size {
    font-size: 1.3em;
}

/* Colors */
.green {
    color: #468847;
}

.red {
    color: red;
}

/*.smart-form .rating label {
    float: left !important;
}*/

.smart-form .rating label {
    left: 0 !important;
    right: auto !important;
}

.headline {
    border-bottom: 1px solid #E0E0E0;
    padding-top: 16px;
    padding-bottom: 6px;
    margin-bottom: 16px;
}

.headline-nop {
    border-bottom: 1px solid #E0E0E0;
    /*padding-top: 16px;*/
    padding-bottom: 6px;
    margin-bottom: 16px;
}

.h5-nop {
    font-size: 17px;
}

.input {
    width: 100%;
}

.fill {
    width: 100% !important; 
    height: 100% !important;
}

.table-img {
    width: 100px;
    height: 100px;
}

.table-mid { 
    vertical-align: middle !important;
}

.color-dark {
    color: #202020;
}

.fa-1x {
    font-size: 1.5em;
}

.edit-menu {
    overflow: hidden;
    background-color: #ddd;
    position: fixed;
    top: 48px;
    width: 100%;
    z-index: 100;
    border: 1px solid #CACACA;
    padding: 5px;
    margin-left: -28px;
    height: 43px;
    padding-left: 25px;
}

.modal-close {
    margin-top: -35px;
    margin-left: -40px;
}

.modal-close-nohead {
    margin-top: -5px;
}

.tooltip-ext {
  position: relative;
  display: inline-block;
}

.tooltip-ext .tooltiptext-ext {
  visibility: hidden;
  width: 375px;
  background-color: #ffff99;
  color: #202020;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  border: 2px solid #aaaa44;

  /* Position the tooltip */
  position: absolute;
  z-index: 99;
}

.tooltip-ext:hover .tooltiptext-ext {
  visibility: visible;
}

.fa-blue {
    color: #3399ff;
}

.colorcell {
    width: 35px;
    cursor: pointer;
    border: 0.5px solid #D6D6D6;
}

.colorrow {
    height: 35px;
}

.colortable {
    border-collapse: separate; 
    border-spacing: 5px;
}

.li-select {
    padding: 3px; 
    cursor: pointer;
    overflow-y: auto;
    overflow-x: hidden;
}

.smart-form *, .smart-form :after, .smart-form :before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.font-icon {
    font-size: 20px; 
    margin-left: 5px;
    padding-top: 2px;
}

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.thumbnail-container {
	height: 400px;
}
@media (max-width: 1980px) {
  .thumbnail-container {
	  height: 375px;
  }
}
@media (max-width: 1600px) {
  .thumbnail-container {
	  height: 275px;
  }
}
@media (max-width: 1400px) {
  .thumbnail-container {
	  height: 250px;
  }
}
/*@media (max-width: 1200px) {
  .thumbnail-container {
	  height: 250px;
  }
}*/
@media (max-width: 1023px) {
  .thumbnail-container {
	  height: 225px;
  }
}
@media (max-width: 990px) {
  .thumbnail-container {
	  height: 375px;
  }
}
@media (max-width: 767px) {
  .thumbnail-container {
	  height: 325px;
  }
}
@media (max-width: 479px) {
  .thumbnail-container {
	  height: 375px;
  }
}

.modal { overflow-y: auto !important; }

.field-validation-error {
    color: red !important;
}

/* Special controls */
.icheckbox_square-green,
.iradio_square-green {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url("img/green.png") no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-green {
  background-position: 0 0;
}
.icheckbox_square-green.hover {
  background-position: -24px 0;
}
.icheckbox_square-green.value {
  background-position: -48px 0;
}
.icheckbox_square-green.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-green.checked.disabled {
  background-position: -96px 0;
}

.text-white {
    color: white;
}

.cursor-default {
    cursor: default;
}

/* Override panel headings */
.panel-danger > .panel-heading {
    color: #FAFAFA !important;
    background-color: #dc3545 !important;
    border-color: #cc2535 !important;
}

.panel-success > .panel-heading {
    color: #FAFAFA;
    background-color: #28a745;
    border-color: #28a745;
}