@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body,
.gjs-editor {
    font-family: 'Poppins', sans-serif!important;
}

.gjs-one-bg {
    background-color: #fff;
    color: #3DB5E6
}

.gjs-one-color {
    color: #fff
}

.gjs-one-color-h:hover {
    color: #fff
}

.gjs-two-bg {
    background-color: #ddd
}

.gjs-two-color {
    color: #ddd
}

.gjs-two-color-h:hover {
    color: #ddd
}

.gjs-three-bg {
    background-color: #5f87b4
}

.gjs-three-color {
    color: #5f87b4
}

.gjs-three-color-h:hover {
    color: #5f87b4
}

.gjs-four-bg {
    background-color: #fff
}

.gjs-four-color {
    color: #3DB5E6
}

.gjs-four-color-h:hover {
    color: #fff
}

.gjs-pn-logo-container {
    left: 45%;
    background: transparent
}

.gjs-pn-devices-c {
    background-color: transparent !important;
}

.editTemplate-btn, .saveTemplate-btn {
    display: flex !important;
    position: relative;
    bottom: 27px;
    left: 150px;
}

.gjs-pn-btn {
    color: #3DB5E6;
    font-size: 18px!important;
}

.gjs-category-title, 
.gjs-sm-sector 
.gjs-sm-title, 
.gjs-clm-tags 
.gjs-sm-title, 
.gjs-block-category 
.gjs-title, 
.gjs-layer-title {
    background-color: #002856;
    color: #fff;
    font-weight: 700;
}

.gjs-block:hover {
    background-color: #3DB5E6;
}

.gjs-am-meta>div {
    overflow-wrap: break-word;
}

.gjs-sm-sector, .gjs-clm-tags {
    color: #444;
}

.gjs-field input, 
.gjs-field select, 
.gjs-field textarea {
    background-color: #ddd;
}

.gjs-three-bg {
    background-color: #3DB5E6;
    color: #fff
}

.gjs-field {
    background-color: #ddd;
}

.gjs-sm-sector .gjs-sm-field input, 
.gjs-clm-tags .gjs-sm-field input, 
.gjs-sm-sector .gjs-clm-field input, 
.gjs-clm-tags .gjs-clm-field input, 
.gjs-sm-sector .gjs-sm-field select, 
.gjs-clm-tags .gjs-sm-field select, 
.gjs-sm-sector .gjs-clm-field select, 
.gjs-clm-tags .gjs-clm-field select {
    background-color: #b5b5b5;
}

.gjs-pn-btn.fa.fa-desktop,
.gjs-pn-btn.fa.fa-tablet,
.gjs-pn-btn.fa.fa-mobile {
    display: none;
}

.gjs-logo {
    margin-top: -4px;
    width: 110px;
}

.gjs-mdl-dialog {
    font-family: 'Poppins', sans-serif!important;
}

.gjs-am-file-uploader #gjs-am-title {
    padding: 85px 10px;
}

.gjs-am-file-uploader>form {
    background: #F9F9FB;
    margin: 10px;
}

.gjs-am-file-uploader>form:hover {
    border-color: #002856;
    cursor: pointer;
}

.gjs-am-assets-cont {
    margin-top: 10px;
}

.gjs-mdl-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #212529;
}

.gjs-mdl-btn-close {
    color: #444
}

.gjs-am-file-uploader #gjs-am-title {
    color: #404040;
}

.gjs-color-main, 
.gjs-off-prv, 
.gjs-sm-sector 
.gjs-sm-stack #gjs-sm-add, 
.gjs-clm-tags .gjs-sm-stack #gjs-sm-add {
    color: #3DB5E6
}

.toolbar-container {
    position: relative;
}

.toolbar-container > span,
.toolbar-container > span.logo-name-container span {
    display: inline-block;
}

.toolbar-container > span.logo-name-container {
    margin-left: 20vw;
    text-align: right;
}

.toolbar-container > span.logo-name-container > span {
    margin-left: 10px;
    font-size: 19px;
    color: #404040;
    font-weight: 700;
}

.toolbar-container > span.logo-name-container > span .edit-template-name  {
    color: #3DB5E6
}

.gjs-layer-title {
    background-color: #002856!important;
}

.gjs-btn-prim, 
.gjs-am-name {
    color: #404040;
}

.gjs-am-name {
    font-size: 12px;
    font-weight: 500;
}

.gjs-am-assets-header {
    padding: 0;
}

.progress-text-loader {
    color: #007bff
}

.back-link {
    color: #002856;
    font-weight: 700;
}

.back-link:hover {
    text-decoration: none;
    color: #3DB5E6;
}

.gjs-am-close {
    color: #404040;
}

label {
    font-weight: 700;
}

.image-preview {
    height: 20vh;
    width: 100%;
    background-color: #e5e5e5;
}

.btn-group.special {
    display: flex;
}

.btn-group.special > .btn {
    margin: 0 5px;
    border-radius: 5px!important;
}

.btn-group.special.btn-group-1 {
    margin-top: 5px;
}

.btn-new-template-style {
    text-transform: uppercase;
    font-size: 14px;
}

.gjs-sm-header,
.gjs-trt-header,
.gjs-traits-label,
.gjs-field {
    color: #404040!important;
}

.gjs-trt-trait .gjs-label {
    width: 70px;
    color: #404040
}

.gjs-field.gjs-field-checkbox {
    background-color: #002856;
    color: #fff
}

.gjs-chk-icon {
    border-color: none;
}

/* .gjs-badge, */
.gjs-toolbar {
    display: none;
    opacity: 0;
}

.gjs-cv-canvas__frames {
    margin-bottom: 20px;
}

form.gjs-am-add-asset {
    display: none;
}

.gjs-am-asset {
    border-color: #ddd
}

.gjs-am-assets {
    overflow-x: hidden;
}

.btn-upload-click:hover {
    cursor: pointer;
}

.gjs-am-assets-cont {
    border: 1px solid #ddd;
    background-color: transparent;
    height: 334px;
}

.gjs-clm-tags { display: none; }

.gjs-sm-label,
.gjs-color-warn {
    font-weight: 700;
    color: #002856;
}

.gjs-assets-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    width: 96.5%;
    height: 334px;
    background: rgba(34, 34, 34, 0.2);
    z-index: 1;
}

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

.loading span {
    color: black;
    z-index: 100068;
    font-size: 15px;
    position: relative;
    top: 5vh;
    left: -34px;
    font-family: Arial, Helvetica, sans-serif;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

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

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

/* Animation */

@-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);
  }
}

* ::-webkit-scrollbar {
  width: 1em!important;
}
 
* ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 1)!important;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 1)!important;
  -moz-box-shadow: inset 0 0 6px rgba(255, 255, 255, 1)!important;
}
 
* ::-webkit-scrollbar-thumb {
    background: #757575!important;
}

#gjs-sm-position .gjs-radio-items .gjs-radio-item:nth-child(4) {
    display: none;
}

.gjs-am-preview {
    background-size: contain!important;
}

.gjs-am-dimensions {
    color: #171717!important;
    font-size: 12px;
}

.full-width {
    width: 100%!important;
}

.w-border {
    border: 1px solid #ddd!important;
}

.fa-3x {
    font-size: 3em;
}