/****** GENERAL ******/
.action-button {
  margin: 5px; }

.formatChoosing {
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  margin-left: -100px; }

.orHolder {
  text-align: center;
  vertical-align: middle;
  height: 100%; }

.formatRow .card {
  background-color: #dddddd; }

.component-holder {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: 1em; }

.login-wrapper {
  margin-left: 20%;
  margin-right: 20%;
  text-align: center; }

.login-wrapper > div {
  height: 200px; }

.loginForm {
  height: 340px; }

.loginHolder {
  background: #dddddd;
  margin: 1em;
  height: 340px;
  padding: 1em; }

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #444444;
  width: 1px;
  content: "";
  display: block;
  position: absolute;
  top: 2em;
  bottom: 0;
  right: 0;
  min-height: 70px; }

/*https://bootsnipp.com/snippets/featured/clean-modal-login-form*/
/****** LOGIN MODAL ******/
.login-wrapper h1 {
  text-align: left;
  font-size: 1.8em; }
  .login-wrapper h1 .fa {
    float: right; }

.login-wrapper input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative; }

.login-wrapper input[type=text],
.login-wrapper input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.login-wrapper input[type=text]:hover,
.login-wrapper input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }

.login-wrapper .loginmodal {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
  /* border-radius: 3px; */
  /* -webkit-user-select: none;
    user-select: none; */ }

.login-wrapper .loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  background-color: #4d90fe;
  padding: 17px 0px;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */ }

.login-wrapper .loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */ }

.login-wrapper .loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s; }

.login-wrapper .login-help {
  font-size: 12px; }

.login-wrapper .loginButton {
  margin-top: 55px; }

.containerMarginTop {
  margin-top: 3.5em; }

.fullWidthBreadCrumb {
  width: 100% !important;
  border-radius: 0px;
  margin-bottom: 0em !important;
  background-color: #005499 !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  margin-top: 0.25em !important; }

.backButtonHidden {
  visibility: hidden; }

#optionWrapper {
  overflow-y: auto;
  overflow-x: hidden; }

.addImagePreview {
  max-height: 100%;
  max-width: 100%; }

.bold {
  font-weight: bold; }

.italic {
  font-style: italic; }

.underlined {
  text-decoration: underline; }

.selectedPreviewPage {
  background-color: #1965A3 !important;
  color: #FFF !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 8px 0 #8FB0CC !important; }
  .selectedPreviewPage.preview-pagewrapper-header {
    border-color: #005499 !important; }

.preview-wrapper {
  height: 500px;
  background-color: #fff;
  margin-top: 10px; }

.preview-detailpage {
  border: 1px solid #DCDCDC;
  text-align: center; }

.preview-detailpage span {
  padding-top: 20px;
  display: inline-block; }

.preview-pagescroller {
  border-top: 1px #dcdcdc solid;
  border-bottom: 1px #dcdcdc solid;
  border-right: 1px #dcdcdc solid;
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
  height: 540px; }

.preview-pagescroller > span {
  padding-top: 20px;
  display: inline-block; }

.row {
  margin-left: -0em !important;
  margin-right: -0em !important; }

/* width */
::-webkit-scrollbar {
  width: 1em; }

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px grey; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: grey; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey; }

.preview-pagewrapper {
  text-align: left;
  margin: 1em;
  height: 40px;
  line-height: 40px; }

.preview-page {
  width: 100%;
  height: 150px;
  cursor: pointer !important;
  border: 1px solid #3f61a1;
  background-color: transparent;
  color: #1965A3;
  border-radius: 2px;
  box-shadow: none; }

.preview-page > img {
  margin-left: 1em; }

.preview-pagewrapper-header {
  display: inline-block;
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid #3f61a1;
  background-color: transparent;
  color: #1965A3;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer !important; }

.preview-pagewrapper-actions {
  display: inline-block;
  float: right;
  cursor: pointer; }

.preview-pagewrapper-actions .fa {
  margin-left: 15px; }

.preview-pagewrapper-actions .fa.fa-trash {
  margin-left: 35px; }

button.close {
  cursor: pointer !important; }

th,
td {
  white-space: nowrap; }

div.dataTables_wrapper {
  width: calc("100vw"); }

.md-prefix {
  background-color: transparent;
  border-radius: 0px;
  border-right: 1px solid #ced4da !important; }

.md-prefix-form > input {
  margin-left: 3rem !important; }

.md-prefix-form > label {
  margin-left: 3rem !important; }

.label-newline {
  position: relative !important;
  top: auto !important; }

.textarea-inTable {
  overflow: auto;
  border: none;
  resize: none;
  background: transparent; }

.canvas-container {
  margin: 3em auto; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.7);
  z-index: 99999; }

.lmask {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #000;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  opacity: 0.4; }
  .lmask.fixed {
    position: fixed; }
  .lmask:before {
    content: '';
    background-color: transparent;
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
    margin: -25px 0 0 -25px;
    position: absolute;
    top: 50%;
    left: 50%; }
  .lmask:after {
    content: '';
    background-color: transparent;
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
    margin: -15px 0 0 -15px;
    position: absolute;
    top: 50%;
    left: 50%; }

@-moz-keyframes spinPulse {
  0% {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #2187e7; }
  50% {
    -moz-transform: rotate(145deg);
    opacity: 1; }
  100% {
    -moz-transform: rotate(-320deg);
    opacity: 0; } }

@-moz-keyframes spinoffPulse {
  0% {
    -moz-transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg); } }

@-webkit-keyframes spinPulse {
  0% {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #2187e7; }
  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-320deg);
    opacity: 0; } }

@-webkit-keyframes spinoffPulse {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

/*color picker zoom*/
.colorpicker-2x .colorpicker-saturation {
  width: 200px;
  height: 200px; }

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
  width: 30px;
  height: 200px; }

.colorpicker-2x .colorpicker-preview,
.colorpicker-2x .colorpicker-preview div {
  height: 30px;
  font-size: 16px;
  line-height: 160%; }

.colorpicker-saturation .colorpicker-guide,
.colorpicker-saturation .colorpicker-guide i {
  height: 10px;
  width: 10px;
  border-radius: 10px; }

.layerStack {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
  min-width: 200px; }
  .layerStack li:last-child {
    border-bottom: none; }

.layerItem {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd; }

.layerItem:hover {
  cursor: pointer !important; }

.layerButton {
  max-width: 300px !important;
  height: 46px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center; }

.btnBringForward {
  background-image: url("../Images/arrange_forward.png") !important; }

.btnSendBackwards {
  background-image: url("../Images/arrange_backward.png") !important; }

.btnBringToFront {
  background-image: url("../Images/arrange_front.png") !important; }

.btnSendToBack {
  background-image: url("../Images/arrange_back.png") !important; }

.layerButtons {
  margin-left: 3em; }

.deleteButton {
  margin-left: 3em; }

.saveLabelButton {
  margin-left: 3em; }

form.loginRegister {
  min-height: 625px;
  height: 625px; }

@media (max-width: 1023px) {
  .openDetailsSmallScreen {
    visibility: visible; }
  .openDetailsSmallScreen:hover {
    cursor: pointer !important; } }

@media (min-width: 1024px) {
  .openDetailsSmallScreen {
    visibility: hidden; } }

.app-login {
  padding-top: 2em;
  position: fixed;
  /* Sit on top of the page content */
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 65px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  /* Black background with opacity */
  z-index: 2;
  /* Specify a stack order in case you're using a different order for other elements */
  overflow-y: scroll;
  margin-bottom: 2em; }

.loginResetPw {
  margin-top: 63px;
  background-color: rgba(0, 0, 0, 0.5); }

.dataTablesScrollBody {
  overflow: auto;
  max-height: 50vh;
  width: 100%; }

toolbar {
  float: left; }

dataTables_filter.btn {
  left: 0px !important; }

/****** Translation - Switch ******/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; }

.switch input {
  display: none; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s; }

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .slider {
  background-color: #2196F3; }

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px); }

/* Rounded sliders */
.slider.round {
  border-radius: 34px; }

.slider.round:before {
  border-radius: 50%; }

/****************** Excel Import Dialog ***************/
.excelModal .modal-dialog {
  /* Width */
  max-width: 100%;
  width: auto !important;
  display: inline-block; }

.excelModal.modal.show {
  display: flex !important; }

.excelImportPlaceholderProperty {
  margin-left: 10px; }

#mdlExcelImport .canvas-container {
  margin-top: 0px !important; }

#mdlExcelImport .md-form {
  margin-bottom: 0px !important; }

/****************** Consec Numbering Dialog ***************/
.consecNumberingModal .modal-dialog {
  /* Width */
  max-width: 100%;
  width: auto !important;
  display: inline-block; }

.consecNumberingModal.modal.show {
  display: flex !important; }

.consecNumberingPlaceholderProperty {
  margin-left: 10px; }

#mdlConsecNumbering .canvas-container {
  margin-top: 0px !important; }

#mdlConsecNumbering .md-form {
  margin-bottom: 0px !important; }

/*********************************************************/
.nav-link.nav-link-special {
  color: #fff !important; }

h3.labelDimensionTitles {
  margin-left: 0.75em; }

div.editorWrapper > div.col-md-3 {
  max-height: calc(100vh - 260px);
  overflow-y: scroll;
  padding: 1em; }

table.dimensionConfiguration {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap: break-word; }

table.dimensionConfiguration tr > td > input {
  width: 100% !important; }

.buttonGroupFix .btn-group label.active {
  font-size: .875rem !important;
  -webkit-transform: none !important;
  /* Safari and Chrome */
  -moz-transform: none !important;
  /* Firefox */
  -ms-transform: none !important;
  /* IE 9 */
  -o-transform: none !important;
  /* Opera */
  transform: none !important; }

.buttonGroupFix .btn-group {
  margin-left: 1.75em; }

.buttonGroupFix .btn-group .btn-sm {
  padding: .84rem 2.14rem !important;
  padding-top: 0.84rem !important;
  padding-right: 2.14rem !important;
  padding-bottom: 0.84rem !important;
  padding-left: 2.14rem !important;
  cursor: pointer !important; }

.templateDropdownItemIcon {
  display: none !important;
  line-height: inherit !important;
  position: absolute !important;
  right: 30px;
  color: black !important; }

.templateDropdownItemText {
  display: inline-block !important;
  cursor: default; }

.templateDropdownItem:hover .templateDropdownItemIcon {
  display: inline-block !important;
  cursor: pointer !important; }

.dropdown-submenu {
  position: relative;
  cursor: default !important; }

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px; }

.dropdown-submenu:hover > .dropdown-menu {
  display: block; }

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-left-color: #0C3252;
  margin-top: 5px;
  margin-right: -10px; }

.dropdown-submenu:hover > a:after {
  border-left-color: #33ADFF; }

.dropdown-submenu.pull-left {
  float: none; }

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px; }

.dropdown-item {
  cursor: default !important;
  color: #0C3252 !important;
  font-weight: 300; }

.dropdown-item > a {
  cursor: default !important; }

.dropdown-submenu {
  cursor: default !important; }

/* Orange primary button */
.btn-primary {
  background-color: #FF6600 !important;
  -webkit-box-shadow: 0 2px 8px 0 #FFC299 !important;
  -moz-box-shadow: 0 2px 8px 0 #FFC299 !important;
  box-shadow: 0 2px 8px 0 #FFC299 !important;
  border-radius: 2px !important; }

.btn-primary.active, .btn-primary:active, .btn-primary:active:focus, .btn-primary:focus, .btn-primary:hover {
  background-color: #FF6600 !important;
  box-shadow: 0 2px 8px 0 #FFC299 !important; }

.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  background-color: #FF6600 !important; }

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #A3A3A3 !important;
  -webkit-box-shadow: 0 2px 8px 0 #A3A3A3 !important;
  -moz-box-shadow: 0 2px 8px 0 #A3A3A3 !important;
  box-shadow: 0 2px 8px 0 #A3A3A3 !important; }

/* White button */
.btn-outline-primary {
  border: 1px solid #3f61a1 !important;
  background-color: transparent !important;
  color: #1965A3 !important;
  border-radius: 2px !important;
  box-shadow: none !important; }

.btn-outline-primary.active, .btn-outline-primary:active {
  box-shadow: 0px 3px 10px 0px rgba(0, 84, 153, 0.52) !important; }

.btn-outline-primary:active:focus, .btn-outline-primary:focus, .btn-outline-primary:hover {
  border: 1px solid #70a9fd !important;
  box-shadow: none !important; }

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  border: 1px solid #A3A3A3 !important;
  background-color: transparent !important;
  color: #A3A3A3 !important; }

/* Blue button */
.btn-default {
  background-color: #1965A3 !important;
  color: #FFF !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 8px 0 #8FB0CC !important; }

.btn-default.active, .btn-default:active {
  background-color: #124C7A !important; }

.btn-default:active:focus, .btn-default:focus, .btn-default:hover {
  background-color: #33ADFF !important; }

.btn-default.disabled, .btn-default:disabled {
  background-color: #A3A3A3 !important;
  -webkit-box-shadow: 0 2px 8px 0 #A3A3A3 !important;
  -moz-box-shadow: 0 2px 8px 0 #A3A3A3 !important;
  box-shadow: 0 2px 8px 0 #A3A3A3 !important; }

/* Button light blue */
.btn-light-blue:not([disabled]):not(.disabled).active, .btn-light-blue:not([disabled]):not(.disabled):active, .show > .btn-light-blue.dropdown-toggle {
  background-color: #1965A3 !important;
  color: #FFF !important;
  box-shadow: 0 2px 8px 0 #8FB0CC !important; }

/* Button radio (side-by-side */
.radio-btn {
  border: 1px solid #3f61a1 !important;
  background-color: transparent !important;
  color: #1965A3 !important;
  box-shadow: none !important; }

.radio-btn.active, .radio-btn:active, .radio-btn:active:focus, .radio-btn:focus {
  box-shadow: 0px 3px 10px 0px rgba(0, 84, 153, 0.52) !important;
  background-color: #1965A3 !important;
  color: #FFF !important; }

.radio-btn:hover {
  border: 1px solid #70a9fd !important;
  box-shadow: none !important; }

.modal-dialog button.radio-btn i.fa {
  color: #1965A3 !important; }

.modal-dialog button.radio-btn.active i.fa, .modal-dialog button.radio-btn:active i.fa, .modal-dialog button.radio-btn:active:focus i.fa, .modal-dialog button.radio-btn:focus i.fa {
  color: #FFF !important; }

.row.editorWrapper {
  border-top: 1px solid #dcdcdc;
  margin-top: 10px; }

.layerArea {
  border-right: 1px solid #dcdcdc; }

.layerAreaBelow {
  border-right: 1px solid #dcdcdc; }

.optionsArea {
  border-left: 1px solid #dcdcdc; }

@media (max-width: 1500px) {
  .col-md-3 {
    flex: none;
    max-width: inherit;
    display: inline-block;
    border-top: 1px solid #dcdcdc; }
  .col-md-7.col-sm-7.canvasArea {
    border-right: none; } }

@media (min-width: 1500px) {
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    display: inline; } }

div#layerStackWrapper {
  padding-top: 10px; }

div#optionWrapper {
  padding-top: 10px; }

.btn-default.dropdown-toggle:focus, .btn-default.dropdown-toggle:hover {
  background-color: #33ADFF !important; }

div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  height: 43px;
  min-width: 300px;
  margin-top: 5px; }

div.dataTables_wrapper div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  margin-right: 15px; }

.backward {
  background-image: url("../Images/arrange_backward.png") !important; }