/* End of CSS reset code */

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  src: url("../fonts/Inter-ExtraLight-BETA.woff2") format("woff2"),
       url("../fonts/Inter-ExtraLight-BETA.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
       url("../fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2"),
       url("../fonts/Inter-SemiBold.woff") format("woff");
}

body {
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 400;
	color: #333333;
	background-color: #F4F4F4;
	/*background-color: #E1E4E6;*/
}

a {
	color: #333333;
	font-weight: 600;
}

.light-weight {
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6  {
	font-family: 'Inter', sans-serif;	
	font-weight: 600;
}

@media print {
  a[href]:after {
    content: none
  }
}

label, .label, b, strong {
	font-weight: 600;
}

.btn {
	font-weight: 600;
	transition: all 500ms;
}

.btn-success {
	background-color: #660066;
	border-color: #530053;
}

.btn-success:hover, .btn-success:active, .btn-success:focus {
	background-color: #530053;
}

.btn-success:disabled {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-success.disabled, .btn-success.disabled.active, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled], .btn-success[disabled].active, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success.active, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-white {
	background-color: #FFF;
	border-color: #FFF;
	color: #660066 !important;
}

.btn-default.editable-click {
	border-bottom: 1px solid #ccc;
}

.btn-info.editable-click {
	border-bottom: 1px solid #46b8da;
}

/* .btn-success {
	background-color: #FFF;
	border-color: #D4D4D4;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	border-bottom: 3px solid #660066;
	color: #333;
}

.btn-success:hover, .btn-success:active, .btn-success:focus {
	background-color: #530053;
	border-bottom: 3px solid #660066;
	transition: all 500ms;
}

.btn-success:disabled {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-success.disabled, .btn-success.disabled.active, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled], .btn-success[disabled].active, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success.active, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-default {
	border-bottom: 3px solid #DDD;
}

.btn-info {
	background-color: #FFF;
	border-color: #DDD;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	border-bottom: 3px solid #5bc0de;
	color: #333;
}

.btn-info:hover, .btn-info:active, .btn-info:focus {
	background-color: #5bc0de;
	border-bottom: 3px solid #5bc0de;
	transition: all 500ms;
}

.btn-info:disabled {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-primary:not(.toggle-on):not(.toggle-off):not(.toggle-handle) {
	background-color: #FFF;
	border-color: #DDD;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	border-bottom: 3px solid #337ab7;
	color: #333;
	transition: all 500ms;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background-color: #337ab7;
	border-bottom: 3px solid #337ab7;
}

.btn-primary:disabled {
	background-color: #BBBBBB;
	border: 1px solid #AEAEAE;
}

.btn-white {
	background-color: #FFF;
	border-color: #FFF;
	color: #660066 !important;
}

.btn-block {
	border-bottom-width: 6px;
}

.btn-default.editable-click {
	border-bottom: 1px solid #ccc;
}

.btn-info.editable-click {
	border-bottom: 1px solid #46b8da;
}

*/

.label-purple {
	background-color: #8500B2;
}

.form-control {
	border-radius: 2px;
}

.input-group-addon {
	background-color: #E2E2E2;
	border-color: #CCC;
	color: #333;
}

.input-group-addon a {
	color: #333;
}

.slHeader {
	/* background-color: #660066; */
	background-color: #660066;
	color: #FFF;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.no-left-padding {
	padding-left: 0;
}

.slHeader .pixelbox-logo img {
	height: 75px;
	float: left;
	margin-right: 10px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #FFF;
}

.slHeader .sitelive-header {
	font-weight: 200;
	font-size: 27px;
	margin-top: 10px;
	display: inline-block;
	color: #FFF;
}

.slHeader .site-name {
	font-weight: 400;
	font-size: 27px;
	margin-left: 10px;
	margin-top: 17px;
	display: inline-block;
	color: #FFF;
}

.slHeader .btn-menu {
	background-color: #FFF;
	border: 1px solid #CCC;
	border-bottom: 4px solid #DDD;
	margin-left: 20px;
	color: #333333;
	margin-top: -6px;
}

@media (max-width: 420px) {

.slHeader .sitelive-header {
	margin-top: 0;
	display: block;
}

.slHeader .btn-menu {
	margin-top: 0;
	margin-left: 0;
	padding: 4px 6px 4px 6px;
}
	
}

.slHeader .btn-user {
	background-color: #FFF;
	border: 1px solid #CCC;
	border-bottom: 4px solid #DDD;
	color: #333333;
	margin-top: 19px;
}

.slModulesMenu {
	background-color: #FFF;
	color: #333;
	padding-top: 10px;
	padding-bottom: 10px;
	display: none;
	width: 100%;
	position: absolute;
	z-index: 1000;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.slModulesMenu a {
	color: #333;
	font-weight: 600;
}

.slMenu {
	background-color: #292929;
	color: #FFF;
}

.user-details {
	font-size: 14px;
	margin-bottom: 0;
}

#moduleList {
	margin-top: 20px;
}

.moduleIcon {
	/*background-color: #E1E1E1;*/
	background-color: #FFF;
	margin-bottom: 20px;
	padding: 10px 6px 10px 6px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
	display: block;
	width: 100%;
	min-height: 114px;
	line-height: 1.1;
	font-size: 20px;
	border-radius: 4px;
	text-align: center;
	transition: all 500ms;
	border: 1px solid #CCC;
	border-bottom: 4px solid #dddddd;
}

.moduleIcon .module-name {
	min-height: 40px;
	display: block;
}

.moduleIcon .col-xs-12 {
	padding-left: 6px;
	padding-right: 6px;
}

.moduleIcon img {
	width: 40px;
	margin-bottom: 10px;
}

.moduleIcon i {
	font-size: 36px;
	margin-bottom: 10px;
}

.moduleIcon .module-label {
	background-color: #333;
	color: #fff;
	padding: 2px 8px 2px 8px;
	border-radius: 4px;
	font-size: 16px;
}

.slModulesMenu .module-label {
	background-color: #fff;
	color: #333;
	padding: 2px 8px 2px 8px;
	border-radius: 4px;
}

.moduleIcon:hover {
	border-bottom: 8px solid #2989ca;
	transition: all 500ms;
}

.moduleAlert {
	border-bottom: 10px solid #ffa500;
	transition: all 500ms;
}

/*
.moduleIcon div {
	padding-left: 0;
	padding-right: 0;
}*/

.moduleIcon a:hover {
	text-decoration: none;
}

.smallerH2 {
	font-size: 18px;
}

.extraPadding, .ep {
	padding-top: 20px;
	padding-bottom: 20px;
}

.topPadding, .top {
	padding-top: 10px;
}

.greyText:not(.btn):not(.label), .greyText a:not(.btn):not(.label) {
	font-weight: 300;
	color: #AAAAAA;
}

#slMessage {
	display: none;	
}

.uploadPane {
	background-color: #C8E9C7;
	border: 1px solid #B6E1B5;
	padding: 10px;
	border-radius: 3px;
}

.uploadPane p {
	margin-bottom: 0;
}

.settingsPane {
	/* background-color: #E3E8EC;
	border: 1px solid #D5D8DE; */
	background-color: #FFF;
	border: 1px solid #D5D8DE;
	padding: 16px;
	border-radius: 2px;
}

.tagsPane {
	border: 1px solid #D5D8DE;
	padding: 10px;
}

.pageSettings {
	font-size: 12px;
}

.pageSettings img {
	float: left;
	margin-right: 6px;
}

.topMargin, .top-margin {
	margin-top: 20px;
}

.smallTopMargin, .small-top-margin {
	margin-top: 10px;
}

.bottomMargin, .bottom-margin {
	margin-bottom: 20px;
}

.smallBottomMargin, .small-bottom-margin {
	margin-bottom: 10px;
}

.noTopMargin, .no-top-margin {
	margin-top: 0;
}

.noBottomMargin, .no-bottom-margin {
	margin-bottom: 0;
}

.largeTopMargin, .large-top-margin {
	margin-top: 60px;
}

.largeBottomMargin, .large-bottom-margin {
	margin-bottom: 60px;
}

.footer {
	margin-top: 40px;
	color: #AAAAAA;
	font-size: 13px;
}

.footer a {
	font-weight: 300;
	color: #AAAAAA;
}

.form-horizontal .control-label {
	text-align: left;
	font-weight: 400;
}

.faded {
	opacity: 0.6;	
}

.wordWrap {
    word-wrap: break-word;
}

#sessionExpired {
	display: none;
}

.normalFontWeight a {
	font-weight: 300;
}

.closePane {
	float: right;
}

/*
.modal-content {
	border-radius: 2px;
}

.modal-header, .modal-content, .modal-footer {
	padding: 4px;
}

.modal-lg {
    width: 90%;
}

.modal-body {
	padding: 4px;
} */

#slSWAStatus img {
	height: 20px;
}

.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

.small-text {
	font-size: 12px;
}

.table {
	background-color: #FFF;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	border: 1px solid #CCC;
	border-radius: 6px;
}

.table > thead > tr > th:not(.dataTable), .table > tbody > tr > th:not(.dataTable) {
    border-bottom: 1px solid #ddd;
    background-color: #2A79A6;
	color: #FFF;
	font-weight: 500;
}

.table > thead > tr > th:not(.dataTable):first-child, .table > tbody > tr > th:not(.dataTable):first-child {
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
}

.table > thead > tr > th:not(.dataTable):last-child, .table > tbody > tr > th:not(.dataTable):last-child {
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
}

.infoBox {
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 16px;
	border-radius: 4px;
	margin-top: 10px;
}

.infoBox h2 {
	font-size: 22px;
	color: #660066;
	margin-top: 0;
	margin-bottom: 20px;
}

.infoBox .table {
	margin-left: -10px;
	margin-right: -10px;
	border-radius: 0;
	box-shadow: none;
	border: none;
	width: calc(100% + 20px);
	max-width: calc(100% + 20px);
}

.infoBox .table:last-child {
	margin-bottom: 0;
}

.infoBox .table > thead > tr > th:not(.dataTable):first-child, .infoBox .table > tbody > tr > th:not(.dataTable):first-child {
	border-radius: 0;
}

.infoBox .table > thead > tr > th:not(.dataTable):last-child, .infoBox .table > tbody > tr > th:not(.dataTable):last-child {
	border-radius: 0;
}

.infoBox .table > thead > tr > th:not(.dataTable), .infoBox .table > tbody > tr > th:not(.dataTable) {
	background-color: inherit;
	color: inherit;
}

.search-term-highlight {
	background-color: #FFFFBF;
}

.sitelive-thumbnail {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 1px solid #DDDDDD;
	border-radius: 4px;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.alert.alert-danger {
	background-color: #D32D27;
	color: #FFF;
	font-size: 18px;
}

.alert.alert-danger .alert-link{
	color: #FFF;
	text-decoration: underline;
	font-weight: 400;
}

.primary-button {
	margin-top: 20px;
	/* margin-left: -6px;
	margin-right: 6px;
	margin-bottom: -6px;
	width: calc(100% + 12px);
	max-width: calc(100% + 12px); */
}

.white-bg {
	background-color: #FFF;
	padding: 10px 20px 10px 20px;
	border-radius: 4px;
}

.modal-full-width {
	width: 96%;
}

.star-on {
	color: #FEDC33;
}

.star-off {
    color: #A6A6A6;
}

.start-ckeditor {
	background-image: url('../images/editor-icon.svg');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 36px;
}

.login-logo {
	padding: 16px 20px;
	background-color: #FFF;
	border-radius: 16px;
}