@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');*/

body {
    font-family:  var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
}


html {
    overflow: hidden !important;
}

/* md-dialog.md-transition-in, md-dialog.md-transition-out {
	transition: none !important;
} */

.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
	background-color: black;
	background: rgba(0,0,0,0.85);
    z-index: 102;
}

.textOverlay {
    color: white;
    text-align: center;
    font-weight: bold;
    display: block;
    font-size: 24px;
}

.textOverlayMobile, .textOverlayMobile p {
    color: white;
    text-align: center;
    font-weight: bold;
    display: block;
    font-size: 20px;
    margin:20px;
}

#info-stickers-complete {
    position: absolute;
    bottom: 50px;
	right:0px;
	z-index: 10;
}

#jsd-widget {
    left: 70px !important;
    z-index: 1 !important;
}

#info-stickers-complete-action {
    text-align: center;
    background: #448afe;
    color: white;
    padding: 10px 25px;
    border-radius: 40px;
    float: right;
    margin-right: 50px;
    cursor:pointer;
}

#info-stickers-complete-action md-icon {
    color:white;
    font-size:20px;
    font-weight:bold;
}

#viewerContainer {
	/* padding-top: 110px;	 */
}

.floating-button-sign {
    right:25%
}

.floating-button {
	transition:all linear 0.2s;
}

.floating-button.ng-hide {
	transform-origin: center;
	transform: scale(0,0);
}

.tt-hint {
    color: #C1C1C1 !important;
}

.more-scroll, .more-scroll-ios {
	position: fixed;
	right: 20px;
	bottom: 70px;
	cursor: pointer;
	transition:all linear 0.2s;
}

.more-scroll-ios {
	position: -webkit-sticky;
	float: right;
}

.more-scroll-ios.ng-hide, .more-scroll.ng-hide {
	transform-origin: center;
	transform: scale(0,0);
}


md-toast {
 z-index:1000006 !important;
}

.multiline-switch {
	white-space: pre-wrap;
}

.section {
	display: none;
}

.check-done {
  width: 40px;
  height: 40px;
}

.check-done.ng-hide-remove {
	animation: bounce 0.2s;
	animation-delay: 0.08s;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.panel-dialog {
	border-radius: 4px;
	/* box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
	0 13px 19px 2px rgba(0, 0, 0, 0.14),
	0 5px 24px 4px rgba(0, 0, 0, 0.12); */
}

.loaded-pulse {
	animation-name: loaded-pulse;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-direction: alternate;
}

@keyframes loaded-pulse {
	50%  {color:#37A0FF}
}

.options-content{
    padding:20px;
	padding-top:80px;

}

body > .md-dialog-container {
  height: 100% !important;
}

@media (max-width: 380px) {

    .notification-title {
        font-size: 14px !important;
    }

    .floating-button-sign {
        right:20px;
    }
    img.logoCss{
        max-height:50px; max-width:60px; margin-left: 3px;
	}
	.multiline-switch {
		margin-left: 20px;
	}
	#viewerContainer {
		padding-top: 60px;
	}
}

@media (min-width: 381px){

    img.logoCss{
        max-height:50px; margin-left: 3px;
	}

 }



[data-icon]:before {
    /*font-family: "Atkinson Hyperlegible Next", sans-serif !important;*/
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    /*font-family: "Atkinson Hyperlegible Next", sans-serif !important;*/
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.animate-show,
.animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  display: block !important;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  display: block !important;
}

#bottom-menu-more-options {
    position: relative;
    bottom: 140px;
    background-color: #fff;
    width: 100%;
    color: black;
    border: none;
    text-align: left;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    min-width: 120px;
    right: 51px;

 }


 .material-icons {
     text-rendering: optimizeLegibility;
 }

 .noselect {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }


 .loading-authorities {
     background-color: transparent;
     color: #949494 !important;
     font-size: 40px !important;
     cursor: default;
     animation: loading 2s linear infinite;
    border-radius: 20px;

  }

 #bottom-menu-more-options .option{
    padding: 0px 16px;
    color: rgba(0,0,0,.87);
    outline-color: #bdbdbd;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    height: 48px;
    line-height: 48px;
 }

#errorWrapper {
	display: none;
}

#user_name[disabled],
#user_email[disabled] {
	color: #323232;
	opacity: 1
}

.icon-signmage2:before {
	content: "\61";
}

.canvas-border-left,
.canvas-border-right {}

.mdl-progress {
	width: 100% !important;
}

body {
    /*font-family: "Atkinson Hyperlegible Next", sans-serif !important;*/
	overflow: hidden;
	background: #ffffff !important;
}

.tutorial .signRibbon{
  height: 30px;
}

.tutorial p {
  margin: 20px;
  font-size: large;
  line-height: 31px;
}

#signupOverlay .tutorial-next {
  min-width: 30px;
  width: 30px;
  height: 30px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index:10;
}

#signupOverlay .tutorial-back {
  min-width: 30px;
  width: 30px;
  height: 30px;
  position: fixed;
  z-index: 10;
  bottom: 20px;
  left: 10px;
}

.signup-carousel .owl-pagination {
  top:130px;
}

.signup-carousel .owl-theme .owl-controls .owl-page span {
  width:9px;
  height: 9px;
}

.signmage-title-bar {
	display: flex;
	justify-content: space-between;
	align-items:center;
}

.pdf-title-bar, .signmage-title-bar {
	background-color: #FFFFFF;
	width: 100%;
	height: 50px;
	/*position: fixed;*/
	top: 0;
	z-index: 10;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
   	-ms-user-select: none;
   	user-select: none;
}

.signmage-title-bar {
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.pdf-title {
    /*font-family: "Atkinson Hyperlegible Next", sans-serif;*/
	color: #5a5a5a;
    font-weight: 500;
    font-size: 30px;
    flex-grow: 8;
    text-overflow: ellipsis;
    white-space: nowrap;
	padding: 5px 20px;
	max-width: 70vw;
	overflow: hidden;
}

.pdf-title-buttons {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-grow: 2;
}

.pdf-title-button {
	display: none;
    width: 19px !important;
    height: 24px;
    float: right;
    position: relative;
    top: -43px;
    right: 15px;
    font-size: 20px !important;
		min-width: 35px !important;
		padding: 0 !important;
}

.pdf-title-button .material-icons {
	font-size: 20px !important;
}

.flow-signer {
	padding: 20px;
	font-size: 14px;
	border: 1px solid #ffffff;
	border-radius: 10px;
	margin-bottom: 5px;
	cursor: move; /* fallback: no `url()` support or images disabled */
	cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
	cursor:    -moz-grab; /* Firefox 1.5-26 */
	cursor:         grab; /* W3C standards syntax, should come least */
}

.flow-signer .layout-column {
	margin:5px
}

.flow-signer-title {
	font-size: 12px;
	color: #6d6d6d
}

.as-sortable-dragging {
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
}

.translate-header {
	font-size: 30px;
}

.translate-text {
	font-size: 20px;
	line-height: 1.7;
}

.footer {
	padding: 15px;
	padding-right: 30px;
	text-align: -webkit-right;
}

input.ng-invalid.ng-touched {
	background-color: #FA787E;
}

input.ng-valid.ng-touched {
	/*background-color: #78FA89;*/
}

#notSupportedCover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000002;
}

.notSupportedCover {
	background-color: white;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.9;
}

#notSupportedCover .notSupportedContent {
	position: absolute;
	top: 50%;
	text-align: center;
	transform: translateY(-50%);
	width: 100%;
}

#notSupportedCover .notSupportedContent p {
	font-size: 20px;
}

#notSupportedCover .notSupportedLogo {
	font-size: 150px;
	color: #094EAB;
}

.sign-button {
	position: fixed;
	background-color: blue;
	text-align: center;
	vertical-align: middle;
	color: white;
	padding: 13px;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
}

.viewer-overlay-container, .viewer-mobile-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000001;
    cursor:auto;
    overflow-y: scroll;
}

#viewerContainer::-webkit-scrollbar {
    background-color:#d6d6d6;
    width:13px;
    height:13px;
    z-index:9999999;
    -webkit-transform:translate3d(0,0,0);
}
::-webkit-scrollbar-button {
    display:none;
}
#viewerContainer::-webkit-scrollbar-thumb {
    background: #9b9d9e;
    border-radius: 3ex;
    border: 3px solid #d6d6d6;
}
#viewerContainer::-webkit-scrollbar-thumb:hover {
    background: #828586;
}
#viewerContainer::-webkit-scrollbar-thumb:active {
    background: #4a90d9;
}

.viewer-mobile-container {
	background-color: white;
}

.signature-line-separator-div {
	bottom: 80px;
	position: relative;
	pointer-events: none;
	border-bottom: 1px solid #b3b3b3;
}

.viewer-mobile-container .mdl-card {
	height: 100%;
	width: 100%;
}

.viewer-mobile-container .mdl-card__supporting-text {
	/*height: 80%;*/
}

.viewer-mobile-container .mdl-card__actions {
	/*height: 20%;*/
}

.viewer-overlay-content {
	margin: auto;
	width: 400px;
	margin-top: 100px;
}

.viewer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(33,33,33,1.0);
	opacity: 0.48;
}

.open-app-dialog img {
	display: block;
	margin: auto;
	padding: 10px;
	width: 190px;
}

.open-app-dialog .mdl-card__media {
	background-color: #0B57B2;
}

.signmage-options {
	width: 50px;
	position: fixed;
	right: 30px;
	top: 80px;
	/*z-index: 10;*/
	z-index:2;
}

.signmage-options button {
	margin: 5px;
	overflow: visible;
	min-width: 42px;
	width: 42px;
	height: 42px;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
   	-ms-user-select: none;
   	user-select: none;
}

.button-text {
	font-size: 11px;
	margin: auto;
	text-align: center;
	width: 100%;
	color: white;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
   	-ms-user-select: none;
   	user-select: none;
}

.needs-signing {
	font-size: 10px;
	position: absolute;
	top: 11px;
	left: -190px;
	width: 160px;
	text-align: right;
	background-color: black;
	padding: 9px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	padding-right: 16px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	color: white !important;
}

.needs-signing-mobile {
	display: none
}

.needs-signing-close {
	position: absolute;
	left: 4px;
	top: 10px;
	font-size: 4px;
}

.needs-signing-close .material-icons {
	font-size: 12px;
}

.needs-signing-close-mobile .material-icons {
	font-size: 40px;
}

.menu-badge.mdl-badge[data-badge]:after {
	top: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
}

#signers-top-option .mdl-badge[data-badge]:after {
	top: -7px;
	right: -15px;
}

#notifications-top-option .mdl-badge[data-badge]:after {
    top: -7px;
    right: -15px;
}

.notifications-desktop {
    width: 400px;
    height: 600px;
    position: absolute;
    background: white;
    border-radius: 4px;
    margin-top:5px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px;
    right: 10px;
}

.notifications-mobile {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: white;
    border-radius: 4px;
    margin-top:5px;
	left:0;
	top: 40px;
}

.unread-notification {
    background:#f1f4f9;
}

.tutorial-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
	/*background: #00000087;*/
	background-color: black;
	opacity: 0.3;
    z-index: 90;
}

.tutorial-content {
    padding:20px;
}

#tutorial-message {
    position: absolute;
    z-index:91;
}

.tutorial-temp {
	z-index: 100;
}

.arrow {
    position: absolute;
	border: 8px solid white;
	border-color: white transparent;
	left: 10px;
}

.arrow-bottom {
	border-bottom:none;
	top:100%;
}

.arrow-top {
    border-top: none;
    bottom: 100%;
}

.signmage-options button .mdl-badge[data-badge]:after {
	top: -14px;
	right: -10px;
}

.signmage-options button .warning.mdl-badge[data-badge]:after {
	background-color: #A5A500;
}

.signmage-options button .valid.mdl-badge[data-badge]:after {
	background-color: #25B700;
}

.invalid.mdl-badge[data-badge]:after {
	background-color: red;
}

.signmage-options button .empty.mdl-badge[data-badge]:after {
	background-color: blue;
}

.signmage-options button .disabled.mdl-badge[data-badge]:after {
	background-color: rgb(56, 56, 56);
}

.button-img {
	width: 25px;
	position: relative;
	top: -3px;
}

.grid-content {
	text-align: center;
	border-radius: 2px;
	padding-top: 40px;
	color: #424242;
}

.grid-content p {
	font-size: 20px;
	line-height: 35px;
}

.logo {
	margin-right: 20px;
}

.store-badge {
	width: 150px;
}

.mdl-layout-title a {
	text-decoration: none;
	color: white;
}

.bar-item {
	margin-right: 40px;
}

.signRibbon {
	background-color: #00299F;
	color: white;
	height: 20px;
	text-align: left;
	padding: 40px;
}

.signRibbon .mdl-button {
	position: absolute;
	top: 10px;
	right: 0;
}

.signRibbon .mdl-button .material-icons {
	font-size: 20px;
}

.marginSignature {
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 15px;
	margin-left: 15px;
	text-align: left;
	overflow: hidden;
}

.signatureBlue,
.signatureWhite {
	padding: 5px 15px;
	overflow-wrap: break-word;
}

.signatureBlue {
	background-color: #E7E9FD;
}

.cert-wrapper {
	width: 100%;
}

.cert-wrapper .owl-item {
	width: 100%;
}

.index-image {
	float: right;
	margin-top: -80px;
	opacity: 0.3;
}

.white-space {
    width: 100%;
    height: 100px;
    background-color: #f0f0f0;
}

.signers-carousel, .signup-carousel {
    background-color:white;
}

.signup-carousel {
  background-color: #f0f0f0;
}

.signup-carousel .mdl-card {
  background-color: #f0f0f0;
}

.signup-carousel .item .header {
    /*height: 200px;*/
    background-color: #00299F;
    color:white;
    text-align:left;
}

.signup-carousel .item {
  background-color: #f0f0f0;
}

.signup-carousel .item .buttonCancel .buttonRestart {
  background-color: #f0f0f0;
}


.owl-theme .owl-controls .owl-buttons div {
	position: absolute;
}

.owl-theme .owl-controls .owl-buttons .owl-prev {
	left: -100px;
	top: 400px;
	opacity: 1;
	background-color: transparent;
}

.owl-theme .owl-controls .owl-buttons .owl-next {
	right: -100px;
	top: 400px;
	opacity: 1;
	background-color: transparent;
}

.owl-theme .owl-controls .owl-buttons button {
	background-color: #00299F;
	color: white;
}

.owl-pagination {
	position: absolute;
	top: 70px;
	width: 100%;
}


.sign-here-name {
	width:100%;
	min-width: 150px;
	overflow: visible;
	text-align: center;
	font-size: 12px;
	pointer-events: none;
	background-color: #363636;
	color: white;
	padding: 5px;
	left: 50%;
	transform: translate(-50% , -105%);
	position: absolute;
}

/* .sign-here-name {
	width: 100%;
	overflow: visible;
	margin: auto;
	text-align: center;
	font-size: 12px;
	pointer-events: none;
	top: -55px;
	background-color: #363636;
	color: white;
	padding: 5px;
	position: relative;
	display: inline-table;
	left: -5px;
} */

.sign-here-sticker-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90%;
	pointer-events: none;
}

.sign-here-sticker {
	/*width: 30%;
	margin: auto;
	position: absolute;
	bottom: 0px;
	left: 50%;*/
	pointer-events: none;
	/*margin-left: -15%;*/
}

.no-pointer-events {
	pointer-events: none;
}

.signature-sticker {
	border: 1px solid black;
}

.hiding-modal {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	transition: 200ms ease;
	overflow: auto;
}

.showing-modal {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.image-box {
	display: none;
}

.sticker-text.ng-hide {
  opacity: 0;
}

.sticker-text.ng-hide-add,
.sticker-text.ng-hide-remove {
  transition: all linear 0.2s;
}

.successUpload {
    color: green;
    font-weight: bold;
}

.errorUpload {
    color: red;
    font-weight: bold;
}

.canDownload {
    color: green;
    font-weight: bold;
}

.cantDownload {
    color: red;
    font-weight: bold;
}

.sticker-image-move-msg {
	min-width: 151px;
	display: table;
	table-layout: fixed;
	position: absolute;
	top: -90px;
	width: 150%;
	height: 25px;
	background-color: #4B4B4B;
	color: white;
	border-radius: 3px;
	font-size: small;
	padding: 5px;
	text-align: center;
	margin-left: -30%;
}

#signature-image-move-msg,
#signature-image-move-inside-msg {
	min-width: 151px;
	display: table;
	table-layout: fixed;
	position: absolute;
	top: -50px;
	width: 150%;
	height: 25px;
	background-color: #4B4B4B;
	color: white;
	border-radius: 3px;
	font-size: small;
	padding: 5px;
	text-align: center;
	margin-left: -30%;
}

#signature-image-click-msg,
.sticker-image-click-msg {
	min-width: 151px;
	display: table;
	table-layout: fixed;
	position: absolute;
	top: -90px;
	width: 100%;
	height: 25px;
	background-color: #4B4B4B;
	color: white;
	border-radius: 3px;
	font-size: small;
	padding: 5px;
	text-align: center;
	/*margin-left: -30%;*/
}

.animate-show,
.animate-hide {
	-webkit-transition: all linear 0.5s;
	-moz-transition: all linear 0.5s;
	-ms-transition: all linear 0.5s;
	-o-transition: all linear 0.5s;
	transition: all linear 0.5s;
}

.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
	opacity: 0;
	display: block !important;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
	opacity: 1;
	display: block !important;
}

.monitor-warning-message {
	position: absolute;
	background-color: red;
	top: -40px;
	height: 40px;
	width: 100%;
	font-size: 12px;
}

.monitor-desktop-warning-message {
	background-color: red;
	height: 20px;
	width: 100%;
	font-size: 12px;
}

.monitor-error-message {
	position: fixed;
	display: table;
	width: 100%;
	height: 100%;
	background-color: white;
	top: 0;
	z-index: 100;
	opacity: 0.9;
}


.bottom-option {
  position:absolute;
  top:8px;
}

.bottom-option.ng-hide-add, .bottom-option.ng-hide-remove {
  transition: all linear 0.6s;
}

.bottom-option.ng-hide {
  top:80px;
}

.lslide-down {
	/*transform: translate(0,-60px);*/
	transition: all linear 0.2s;
}

.lslide-down.slide-it {
	/*bottom: -65px;*/
	opacity: 0;
}

.fadein, .fadeout {
	transition: 0.2s linear all;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
	opacity: 0.7;
}

.slide-right,
.slide-back-right {
	-webkit-transition: all linear 0.2s;
	-moz-transition: all linear 0.2s;
	-ms-transition: all linear 0.2s;
	-o-transition: all linear 0.2s;
	transition: all linear 0.2s;
}

.slide-back-right.ng-hide-remove,
.slide-right.ng-hide-add.ng-hide-add-active {
	transform: translate(60px, 0)
}

.slide-right.ng-hide-add,
.slide-back-right.ng-hide-remove.ng-hide-remove-active {
	transform: translate(0, 0px)
}

#signature-image-options {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    background-color: #00299F;
    color: white;
    border-radius: 3px;
    opacity: 1;
    bottom: 100%; /* Position the container above its parent */
    margin-bottom: 10px; /* Add a small gap between the options and the signature area */
}

.bottom-options {
    display: flex;
    height: 25px;
}

.signature-image-option {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.top-option {
    height: 30px;
    font-size: 10px;
    padding: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Add a pseudo-element for an arrow pointing to the signature area */
#signature-image-options::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #00299F;
}

.signature-canvas-bottom-options {
	margin: auto;
	width: 180px;
    position: relative;
}

.signature-canvas-floating-options {
	position: absolute;
	top: 10px;
	right: 5px;
	width: 40px;
}

.signature-canvas-floating-options button,
.signature-canvas-bottom-options button {
	height: 40px;
	min-width: 40px;
	width: 40px;
	margin-bottom: 10px;
}

.signature-canvas-floating-options button i,
.signature-canvas-bottom-options button i {
	font-size: 17px;
}

.signature-canvas-floating-options .color,
.signature-canvas-bottom-options .color {
	min-width: 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-bottom: 10px;
	cursor: pointer;
}

.signature-canvas-bottom-options .color {
	display: inline-block;
	position: relative;
	top: 11px;
	margin-bottom: 0;
}

.signature-canvas-remove-img-option {
	position: absolute;
	right: 20px;
	top: 20px;
	height: 40px;
	width:40px;
	min-width: 40px;
}

.progress-box,
.error-dialog {
	padding: 20px 30px;
	position: fixed;
	top: 50%;
	width: 300px;
	background-color: white;
	left: 50%;
	margin-left: -150px;
	margin-top: -34px;
	z-index: 100000;
}

.error-dialog {
	margin-top: -135px;
	margin-left: -155px;
	max-width: 250px;
}

.info-dialog .mdl-card {
	width: 100% !important;
}

.progress-box__text {
	margin-left: 20px;
	font-size: 16px;
}

.mdl-js-snackbar {
	/*//left:40% !important;*/
}

._dialog_overlay {
	pointer-events: none;
}

.mdl-snackbar {
	z-index: 1000002 !important;
}


.signature-canvas {
	background: transparent;
}

@media (max-width: 479px) {



	#viewerContainer {
		padding-top: 60px;
	}
	.multiline-switch {
		margin-left: 20px;
	}
    .floating-button-sign {
            right:20px;
    }

	.pdf-title-button {
		display: initial;
	}
	.needs-signing-mobile {
		display: initial;
		border-style: solid;
		border-color: gray;
		border-width: 1px;
		font-size: 13px;
		position: fixed;
		top: 80%;
		color: white;
		left: 0px;
		right: 0px;
		/*width: 100%;*/
		bottom: 0px;
		text-align: left;
		background-color: #313131;
		padding: 27px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		padding-right: 16px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		z-index: 9999;
	}
	.needs-signing-close-mobile {
		position: absolute;
		left: 70%;
		width: 40px;
		height: 40px;
		top: 15%;
		margin:20px;
		font-size: 25px;
	}
	h3 {
		font-size: 30px !important;
	}

	.notification-title {
            font-size: 14px !important;
    }
	span {
		/*font-size: 16px !important;*/
	}
	.mdl-grid {
		padding: 8px;
	}
	.mdl-cell {
		margin: 8px;
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell {
		width: 100%;
	}
	.mdl-cell--hide-phone {
		display: none !important;
	}
	.mdl-cell--1-col,
	.mdl-cell--1-col-phone.mdl-cell--1-col-phone {
		width: calc(25% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--1-col,
	.mdl-grid--no-spacing > .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
		width: 25%;
	}
	.mdl-cell--2-col,
	.mdl-cell--2-col-phone.mdl-cell--2-col-phone {
		width: calc(50% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--2-col,
	.mdl-grid--no-spacing > .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
		width: 50%;
	}
	.mdl-cell--3-col,
	.mdl-cell--3-col-phone.mdl-cell--3-col-phone {
		width: calc(75% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--3-col,
	.mdl-grid--no-spacing > .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
		width: 75%;
	}
	.mdl-cell--4-col,
	.mdl-cell--4-col-phone.mdl-cell--4-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--4-col,
	.mdl-grid--no-spacing > .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
		width: 100%;
	}
	.mdl-cell--5-col,
	.mdl-cell--5-col-phone.mdl-cell--5-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--5-col,
	.mdl-grid--no-spacing > .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
		width: 100%;
	}
	.mdl-cell--6-col,
	.mdl-cell--6-col-phone.mdl-cell--6-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--6-col,
	.mdl-grid--no-spacing > .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
		width: 100%;
	}
	.mdl-cell--7-col,
	.mdl-cell--7-col-phone.mdl-cell--7-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--7-col,
	.mdl-grid--no-spacing > .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
		width: 100%;
	}
	.mdl-cell--8-col,
	.mdl-cell--8-col-phone.mdl-cell--8-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--8-col,
	.mdl-grid--no-spacing > .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
		width: 100%;
	}
	.mdl-cell--9-col,
	.mdl-cell--9-col-phone.mdl-cell--9-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--9-col,
	.mdl-grid--no-spacing > .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
		width: 100%;
	}
	.mdl-cell--10-col,
	.mdl-cell--10-col-phone.mdl-cell--10-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--10-col,
	.mdl-grid--no-spacing > .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
		width: 100%;
	}
	.mdl-cell--11-col,
	.mdl-cell--11-col-phone.mdl-cell--11-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--11-col,
	.mdl-grid--no-spacing > .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
		width: 100%;
	}
	.mdl-cell--12-col,
	.mdl-cell--12-col-phone.mdl-cell--12-col-phone {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--12-col,
	.mdl-grid--no-spacing > .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
		width: 100%;
	}
}

@media (device-width: 768px) {

    .notification-title {
        font-size: 14px !important;
    }

	#viewerContainer {
		padding-top: 60px;
	}

	.multiline-switch {
		margin-left: 20px;
	}

    .floating-button-sign {
            right:20px;
    }

	select {
		background-color: transparent;
		color: black;
		border: none;
		font: inherit !important;
		font-size: 15px !important;
	}

	.pdf-title-button {
		display: initial;
	}
	.needs-signing-mobile {
		display: initial;
		border-style: solid;
		border-color: gray;
		border-width: 1px;
		font-size: 25px;
		position: fixed;
		top: 80%;
		color: white;
		left: 0px;
		right: 0px;
		/*width: 100%;*/
		bottom: 0px;
		text-align: left;
		background-color: #0c0c0c;
		padding: 27px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		padding-right: 16px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		z-index: 9999;
	}
	.needs-signing-close-mobile {
		position: absolute;
		left: 80%;
		width: 40px;
		height: 40px;
		top: 15%;
		margin:20px;
		font-size: 25px;
	}
}

@media (min-width: 480px) and (max-width: 767px) {

	.notification-title {
            font-size: 14px !important;
    }

	#viewerContainer {
		padding-top: 60px;
	}

	.multiline-switch {
		margin-left: 20px;
	}

    .floating-button-sign {
            right:20px;
    }

	select {
		background-color: transparent;
		color: black;
		border: none;
		font: inherit !important;
		font-size: 15px !important;
	}

	.pdf-title-button {
		display: initial;
	}
	.monitor-desktop {
		display: none;
	}
	.needs-signing-mobile {
		display: initial;
		border-style: solid;
		border-color: gray;
		border-width: 1px;
		font-size: 13px;
		position: fixed;
		top: 80%;
		color: white;
		left: 0px;
		right: 0px;
		/*width: 100%;*/
		bottom: 0px;
		text-align: left;
		background-color: #0c0c0c;
		padding: 27px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		padding-right: 16px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		z-index: 9999;
	}
	.needs-signing-close-mobile {
		position: absolute;
		left: 70%;
		width: 40px;
		height: 40px;
		top: 15%;
		margin:20px;
		font-size: 25px;
	}
	.mdl-grid {
		padding: 8px;
	}
	.mdl-cell {
		margin: 8px;
		width: calc(50% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell {
		width: 50%;
	}
	.mdl-cell--hide-tablet {
		display: none !important;
	}
	.mdl-cell--1-col,
	.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
		width: calc(0% - 16px) !important;
	}
	.mdl-grid--no-spacing > .mdl-cell--1-col,
	.mdl-grid--no-spacing > .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
		width: 12.5%;
	}
	.mdl-cell--2-col,
	.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
		width: calc(0% - 16px) !important;
	}
	.mdl-grid--no-spacing > .mdl-cell--2-col,
	.mdl-grid--no-spacing > .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
		width: 25%;
	}
	.mdl-cell--3-col,
	.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
		width: calc(37.5% - 16px) !important;
	}
	.mdl-grid--no-spacing > .mdl-cell--3-col,
	.mdl-grid--no-spacing > .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
		width: 37.5%;
	}
	.mdl-cell--4-col,
	.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
		width: calc(90%) !important;
		padding-left: 5% !important;
	}
	.mdl-grid--no-spacing > .mdl-cell--4-col,
	.mdl-grid--no-spacing > .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
		width: 50%;
	}
	.mdl-cell--5-col,
	.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
		width: calc(62.5% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--5-col,
	.mdl-grid--no-spacing > .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
		width: 62.5%;
	}
	.mdl-cell--6-col,
	.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
		width: calc(75% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--6-col,
	.mdl-grid--no-spacing > .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
		width: 75%;
	}
	.mdl-cell--7-col,
	.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
		width: calc(87.5% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--7-col,
	.mdl-grid--no-spacing > .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
		width: 87.5%;
	}
	.mdl-cell--8-col,
	.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--8-col,
	.mdl-grid--no-spacing > .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
		width: 100%;
	}
	.mdl-cell--9-col,
	.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--9-col,
	.mdl-grid--no-spacing > .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
		width: 100%;
	}
	.mdl-cell--10-col,
	.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--10-col,
	.mdl-grid--no-spacing > .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
		width: 100%;
	}
	.mdl-cell--11-col,
	.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--11-col,
	.mdl-grid--no-spacing > .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
		width: 100%;
	}
	.mdl-cell--12-col,
	.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
		width: calc(100% - 16px);
	}
	.mdl-grid--no-spacing > .mdl-cell--12-col,
	.mdl-grid--no-spacing > .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
		width: 100%;
	}
}

.mdl-dialog {
	position: absolute;
	border: none;
	box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
	width: 280px;
	left: 50%;
	margin-left: -140px;
}

.mdl-dialog__title {
	padding: 24px 24px 0;
	margin: 0;
	font-size: 2.5rem;
}

.mdl-dialog__actions {
	padding: 8px 8px 8px 24px;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.mdl-dialog__actions > * {
	margin-right: 8px;
	height: 36px;
}

.mdl-dialog__actions > *:first-child {
	margin-right: 0;
}

.mdl-dialog__actions--full-width {
	padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width > * {
	height: 48px;
	-webkit-flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	padding-right: 16px;
	margin-right: 0;
	text-align: right;
}

.mdl-dialog__content {
	padding: 20px 24px 24px 24px;
	color: rgba(0, 0, 0, 0.54);
}

.fixed-width {
	width: 500px !important;
}

.signature-canvas {
	position: relative;
}

.signature-canvas canvas {}

.signature-name-image {
	display: block;
	margin: auto;
	padding: 10px;
	padding-bottom: 20px;
}

.signature-canvas {
	margin: auto;
	/*width: 450px;*/
	display: block;
}
.tip-actions {
	/*display:none;*/
}
.bottom-menu {
	display: none;
}

.top-menu {
    opacity: 0.7;
	position: fixed;
	/*z-index: 100;*/
	z-index:70;
	background-color: gray;
	min-width: 250px;
	/*top: 72px;*/
	top:200px;
	right: 80px;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	color: white;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
   	-ms-user-select: none;
   	user-select: none;
}

.top-menu .text {
	line-height: 1;
	font-size: 15px;
	margin: 5px;
	position: relative;
	top: -5px;
}

.top-menu .material-icons {
	cursor: pointer;
}

.toolbar {
	display: none;
}

#viewerContainer {
	top: 0 !important;
}

#viewer {
	background-color:#ffffff;

}

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {

    .notification-title {
            font-size: 14px !important;
    }

	#viewerContainer {
		padding-top: 60px;
	}

	.multiline-switch {
		margin-left: 20px;
	}

    .floating-button-sign {
            right:20px;
    }

	select {
		background-color: transparent;
		color: black;
		border: none;
		font: inherit !important;
		font-size: 15px !important;
	}

	.pdf-title-button {
		display: initial;
	}
	.mdl-snackbar {}
	.progress-box {
		margin-left: -130px;
		width: 200px;
		padding: 10px 30px;
	}
	.progress-box__text {
		margin-left: 20px;
		font-size: 13px;
		margin-top: 5px;
	}
	#signature-image-box img {
		pointer-events: none;
	}
	#signature-image-move-msg {
		top: -60px;
	}
	#signaturePanelOverlay,
	#certificateOverlay {
		height: 100%;
		overflow-y: scroll;
	}
	.fixed-width {
		width: inherit !important;
	}
	.mdl-snackbar {
		left: 50% !important;
	}
	.hide-on-mobile {
		display: none !important;
	}
	.ok-canvas-button,
	.cancel-canvas-button {
		position: fixed !important;
		bottom: 0;
	}
	.cancel-canvas-button {
		left: 120px;
	}
	#signature-drawing-panel {
		background-color: rgba(0, 0, 0, .26);
	}
	#signature-drawing-panel .buttons {
		position: fixed;
		background-color: white;
		height: 36px;
		bottom: 0;
		width: 100%;
	}
	.mdl-slider__container,
	.mdl-slider-portrait__container {
		position: fixed !important;
		bottom: 40px;
		/* left: 50%; */
		width: 450px;
		/* margin-left: -225px; */
	}
	.tip-actions {
		display:initial;
	}
	.bottom-menu {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 10;
		height: 65px;
		width: 100%;
		color: white;
		text-align: center;
		display: initial;
	}
	.bottom-menu .mdl-grid .mdl-cell {
		width: calc(20% - 16px) !important;
	}
	.bottom-menu .mdl-grid {
		margin: 0 !important;
		padding: 0 !important;
	}
	.bottom-menu .mdl-button {
		color: #37A0FF !important;
	}

	.bottom-menu .mdl-button[disabled] {
	    color:rgba(0,0,0,.26) !important;
	}


	.bottom-menu .material-icons {
		margin: auto;
		width: 100%;
	}
	.loading {
            border-radius: 30px;
    position: relative !important;
    top: -45px !important;
    left: 13px !important;
    width: 21px !important;
    height: 21px !important;

	}
	.signmage-options {
		display: none;
	}
	.monitor-desktop {
		display: none;
	}
	.button-text {
		color: #37A0FF;
		min-width:64px;
	}

    .bottom-menu .button-text.disabled {
        color:rgba(0,0,0,.26);
    }
}

@media all and (orientation:portrait) {

    #info-stickers-complete {
        position: absolute;
        bottom: 60px;
        width: 100%;
    }

    #info-stickers-complete-action {
        text-align: center;
        background: #448afe;
        color: white;
        padding: 10px 25px;
        border-radius: 0px;
        float: none;
        margin:auto;
        cursor:pointer;
    }

    .notification-title {
            font-size: 14px !important;
    }

	select {
		background-color: transparent;
		color: black;
		border: none;
		font: inherit !important;
		font-size: 15px !important;
	}

	.canvas-border-left,
	.canvas-border-right {
		background-color: #e0e0e0;
		width: 10%;
		height: 100%;
		position: absolute;
		top: -5px;
		left: 0;
		display: initial;
	}
	.canvas-border-right {
		left: initial;
		right: 0;
	}
	/*#signature-drawing-panel {
        background-color: #cccccc;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0
	}*/

	.signature-canvas {
        margin: auto;
        height: 350px;
        display: block;
        top: 10px;
        position:relative;
        background:white;
	}

	#viewerContainer {
		margin-bottom: 60px;
	}
}

@media only screen and (min-device-width: 750px) and (orientation: portrait) {
	.signature-canvas {
		width: 450px;
	}
}

@media only screen and (min-device-width : 750px) and (orientation: portrait) {

  .signature-canvas {
      width:450px;
  }

  }

@media only screen and (min-device-width : 600px) and (max-device-width : 750px) and (orientation: landscape) {

    .notification-title {
            font-size: 14px !important;
        }

    .floating-button-sign {
            right:20px;
	}
	.multiline-switch {
		margin-left: 20px;
	}

    .mdl-snackbar {
    }

    .progress-box {

        margin-left: -130px;
        width:200px;
        padding: 10px 30px;

    }

    .progress-box__text {

        margin-left: 20px;
        font-size: 13px;
        margin-top:5px;

    }

    #signature-image-box img {

        pointer-events:none;

    }

    #signature-image-move-msg {

        top:-60px;
    }

    #signaturePanelOverlay, #certificateOverlay {
        height:100%;
        overflow-y:scroll;
    }

    .fixed-width {
        width:inherit !important;
    }

    .mdl-snackbar {
        left:50% !important;


    }

    .hide-on-mobile {
        display:none !important;
    }

    .ok-canvas-button, .cancel-canvas-button {
        position:fixed !important;
        bottom:0;
    }

    .cancel-canvas-button {
        left:120px;
    }

    #signature-drawing-panel {
        background-color:rgba(0,0,0,.26);
    }

    #signature-drawing-panel .buttons {
            position: fixed;
            background-color: white;
            height: 36px;
            bottom: 0;
            width: 100%;

    }

    .mdl-slider__container, .mdl-slider-portrait__container {
            position: fixed !important;
            bottom: 40px;
            /* left: 50%; */
            width: 450px;
            /* margin-left: -225px; */
    }

	.tip-actions {
		display:initial;
	}
    .bottom-menu {
        position: fixed;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: 10;
        height: 65px;
        width:100%;
        color:white;
        text-align: center;
        display: initial;
    }

    .bottom-menu .mdl-grid .mdl-cell{
        width: calc(20% - 16px) !important;
    }

    .bottom-menu .mdl-grid {
        margin: 0 !important;
        padding: 0 !important;
    }

    .bottom-menu .mdl-button {
        color:#37A0FF !important;
    }

    .bottom-menu .material-icons {
        margin: auto;
        width:100%;
    }

    .loading {
                border-radius: 30px;
    position: relative !important;
    top: -45px !important;
    left: 13px !important;
    width: 21px !important;
    height: 21px !important;

    }

    .signmage-options {
        display:none;
    }

    .button-text {
        color:#37A0FF;
        min-width:64px;
    }

    .monitor-desktop {
      display: none;
    }

}

@media only screen and (max-device-width: 1024px) and (max-device-height: 768px) and (orientation:landscape) {
	.fixed-width {
		width: inherit !important;
	}
	.signature-canvas {
	    background:white;
		width: 450px;
	}
}

@media only screen and (max-device-width : 1024px) and (min-device-width : 768px) and (orientation:landscape) {

    .fixed-width {
        width:inherit !important;
    }

    .signature-canvas {
      width: 450px;
      background:white;
    }

    .mdl-snackbar {
    }

    .progress-box {

    margin-left: -130px;
    width:200px;
    padding: 10px 30px;

    }

    .progress-box__text {

    margin-left: 20px;
    font-size: 13px;
    margin-top:5px;

    }

    #signature-image-box img {

    pointer-events:none;

    }

    #signature-image-move-msg {

    top:-60px;
    }

    #signaturePanelOverlay, #certificateOverlay {
    height:100%;
    overflow-y:scroll;
    }

    .fixed-width {
    width:inherit !important;
    }

    .mdl-snackbar {
    left:50% !important;


    }

    .hide-on-mobile {
    display:none !important;
    }

    .ok-canvas-button, .cancel-canvas-button {
    position:fixed !important;
    bottom:0;
    }

    .cancel-canvas-button {
    left:120px;
    }

    #signature-drawing-panel {
    background-color:rgba(0,0,0,.26);
    }

    #signature-drawing-panel .buttons {
        position: fixed;
        background-color: white;
        height: 36px;
        bottom: 0;
        width: 100%;

    }

    .mdl-slider__container, .mdl-slider-portrait__container {
        position: fixed !important;
        bottom: 40px;
        /* left: 50%; */
        width: 450px;
        /* margin-left: -225px; */
    }

	.tip-actions {
		display:initial;
	}

    .bottom-menu {
    position: fixed;
    bottom: 0;
    background-color: #FFFFFF;
    z-index: 10;
    height: 65px;
    width:100%;
    color:white;
    text-align: center;
    display: initial;
    }

    .bottom-menu .mdl-grid .mdl-cell{
    width: calc(20% - 16px) !important;
    }

    .bottom-menu .mdl-grid .mdl-cell.mdl-cell--3-col {
        width: calc(64% - 16px) !important;
        margin-left: 0;
        margin-right: 0;
    }

    .bottom-menu .mdl-grid {
    margin: 0 !important;
    padding: 0 !important;
    }

    .bottom-menu .mdl-button {
    color:#37A0FF !important;
    }

    .bottom-menu .material-icons {
    margin: auto;
    width:100%;
    }

    .loading {
               border-radius: 30px;
    position: relative !important;
    top: -45px !important;
    left: 13px !important;
    width: 21px !important;
    height: 21px !important;

    	}

    .signmage-options {
    display:none;
    }

    .monitor-desktop {
      display: none;
    }

    .button-text {
    color:#37A0FF;
    min-width:64px;
    }

}

.bottom-menu .mdl-grid .mdl-cell.mdl-cell--3-col {
            width: calc(60% - 16px) !important;
            margin-left: 0;
            margin-right: 0;
    }

.mdl-grid .mdl-cell.mdl-cell--bottom-col {
    width:calc(33% - 16px) !important;
    margin-top: 0;
}

#upload-progress>.progressbar {
    background-color: #fd7c7c;
}




.sticker-gray-cover {
	background-color: rgb(220, 220, 220);
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.6;
    top: 0;
	cursor: pointer;
}

.signup-card {
	background-color: #dedede;
	width: 48%;
	height: 120px;
	/* padding: 15px; */
	border: 1px solid #d4d4d4;
	border-radius: 10px;
	cursor:pointer;
}

.signup-card .material-icons {
	color: #9e9e9e;
	font-size: 70px;
}

.signup-card-text {
	font-size: 1.5em;
	text-transform: uppercase;
}


.signup-upload-item, .signup-upload-key-item {
	height: 500px;
	width: 100%;
	border: none;
	margin: 0;
	cursor:pointer;
}

.item-text {
	position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.signup-upload-item h5, .signup-upload-key-item h5 {

}

.signup-upload-cert table {
	padding: 20px;
	text-align: left;
	font-size: 0.9em;
}

.signup-upload-cert table td {
    height: 30px;
    max-width: 280px;
    overflow: visible;
    overflow-wrap: break-word;
    padding-top: 10px;
}

.ribbon-back-arrow {
	float: left;
    width: 35px;
    margin-left: -10px;
    height: 50px;
    cursor:pointer;
}

#signerAuthoritiesContainer {
    background-color: #FFFFFF;
    padding: 20px;
    min-height: 80px;
}

.signerAuthoritiesNoEmail {
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 12px;
}

.signmage-input label {
	float: left;
	margin-left: 10px;
}

.signmage-input input.ng-invalid.ng-touched {
	border-bottom: 1px solid rgb(255, 45, 55);
	background: transparent;
}

.signmage-input input{
	border-top: none;
    border-right: none;
    border-left: none;
    border-image: initial;
    background: transparent;
    border-bottom: 1px solid rgb(63, 81, 181);
    margin: 10px 10px 20px;
    width: 100%;
    height: 25px;
    /*font-family: "Atkinson Hyperlegible Next", sans-serif;*/
}

.mdl-button.working {
	color: #00299F !important;
    background-color: white !important;
}

.sidenav-bar {
	margin-left:-100%;
	transition:margin-left 0.5s;
}

.unclickable {
	pointer-events: none;
}

.sidenav-cover {
	opacity: 0;
	transition:opacity 0.5;
}

.sidenav.slide-in-nav .sidenav-bar{
	margin-left:0;
}

.sidenav.slide-in-nav .sidenav-cover {
	opacity: 0.4;
}


.sidenav .mdl-list__item {
	cursor: pointer;
}

.sidenav .mdl-list__item:hover{
	background-color: #c5c5c5;
}

.selected-nav-item {
    background-color: #dcdcdc;
}

.document-counters {
	width: 100%;
	text-align: center;
	margin-top: 10px
}

.document-counter {
	width: 33%;
	font-size: 30px;
}

.bold  {
	font-weight: bold;
}

.red {
	color: red;
}


.plan-attr-title {
    font-size:12px;
}

.plan-attr-content {
    font-size:16px;
    color:black;
}

:focus {
	outline: none;
}
/*
@keyframes load-bounce {
from {
	background-color:#37A0FF;
	top: 5px;
}

to {
	background-color:#FFFFFF;
	top: -5px;
}
}*/

.md-dialog-container, md-dialog {
	z-index: 100;
}


.page-load-spinner {
    animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(270deg);
    }
}
.page-load-spinner--spinner {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #DE3E35;
    }
    50% {
        stroke: #F7C223;
    }
    75% {
        stroke: #1B9A59;
    }
    100% {
        stroke: #4285F4;
    }
}
@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
	font-size: initial !important;
}
}

@media only screen and (min-device-width : 1025px) {
    .floating-button-sign {
        right:28%
    }
}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.no-scroll {
#position:fixed !important;
overflow: hidden !important;
}

.pdfViewer .page {
	border: 2px solid #e0e8f1 !important;
	/* padding-top:9px !important; */
	margin: 0 auto !important;
	margin-top:9px !important;
}

.sig-sticker-first img {
	left:0px;
	top:0px;
	transition: border-width 0.2s linear,border-color 1.0s linear, left 0.2s linear, top 0.2s linear;
}

.sig-image-first img {
	left:0px;
	top:0px;
	border:none !important;
	transition: border-width 0.2s linear,border-color 1.0s linear, left 0.2s linear, top 0.2s linear;
	background:white;
}

.sig-image-first .resizer, .sig-sticker-first .resizer {
	opacity: 1;
}

.sig-image-selected img {
	border: 1px solid blue;
	left:-1px;
	top:-1px;
	position: relative;
}

.sig-image-first::before, .sig-sticker-first::before {
	opacity: 0;
	background: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -5px;
	left: -5px;
	right: 0;
	bottom: 0;
	content: '';
	height: 100%;
	width: 100%;
	border: 5px solid red;
	border-radius: 0%;
	animation-name: ripple;
	animation-duration: 0.4s;
	animation-delay: 0.1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	z-index: -1;
}


@keyframes ripple {
0% {
	opacity: 0;
	border-radius: 100%;
	transform: scale3d(2, 2, 1);
}
50% {
	border-radius: 60%;
}
100% {
	border-radius: 0px;
	opacity: 1;
	transform: scale3d(1, 1, 1);
}
}

.sig-image-selected .resizer {
	display: initial;
}

/* .request-loader {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 150px;
width: 150px;
border-radius: 100%;
background: #FFFFFF;
}
.request-loader img {
position: relative;
font-size: 72px;
top: 5px;
left: -5px;
background: white;
}

.request-loader::before {
	background: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -10px;
	left: -40px;
	right: 0;
	bottom: 0;
	content: '';
	height: 140%;
	width: 140%;
	border: 8px solid red;
	border-radius: 0%;
	animation-name: ripple;
	animation-duration: 0.8s;
	animation-delay: 0.1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	z-index: -1;
}

.request-loader #signature-image-options {
	opacity: 0 !important;
}

.request-loader img {
	border: none;;
}

.request-loader .resizer {
	opacity: 0 !important;
}

@keyframes ripple {
0% {
	border-radius: 100%;
	opacity: 1;
	transform: scale3d(2, 2, 1);
}
50% {
	border-radius: 60%;
	opacity: 1;
}
100% {
	border-radius: 0px;
	transform: scale3d(1, 1, 1);
}
} */


.info-box {
	margin: 20px;
	background: #ffff7b;
	border: #e4e404 1px solid;
	padding: 10px;
}

md-autocomplete {
    border: 1px solid #757575;
    width: 100%;
}


md-autocomplete-wrap {
	box-shadow: none;
}

.rfc-autocomplete md-autocomplete-wrap input {
	text-transform: uppercase;
}

.suggestion-fab {
    position: fixed !important;
    bottom: 70px;
    right: 10px;
    width: 40px !important;
    height: 40px !important;
}

@media (min-width: 1025px) {

  .suggestion-fab {
      position: fixed !important;
      bottom: 70px;
      right: 8%;
      width: 50px !important;
      height: 50px !important;
  }

}

.tippy-content {
    font-size:15px;
}

.tooltip {
    padding:10px;
    background:white;
}

.md-button.welcomer-main-button {
	background:#0579ff;
	color:white;
}

.md-button.welcomer-main-button:hover {
	color:#0579ff;
}

.error-msg {
	color:red;
}

.repositoryUploadFilesTable tr td {
	padding: 5px;
}

.repositoryUploadSelectFiles {
	padding: 40px;
	background: #FFFFFF;
	border-radius: 5px;
	border: 1px solid #eaeaea;
	cursor:pointer;
}

.withInfo .md-label {
	pointer-events: initial;
}

.smallFont {
    font-size:12px;
}

.nominaReporteTable {
	border-collapse: collapse;
	width: 100%;
  }

  .nominaReporteTable td, .nominaReporteTable th {
	border: 1px solid #ddd;
	padding: 8px;
  }

  .nominaReporteTable tr:nth-child(even){background-color: #f2f2f2;}

  .nominaReporteTable tr:hover {background-color: #ddd;}

  .nominaReporteTable th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #6f6f6f !important;
	color: white !important;
  }

  .nominaReporteTable .selected{
	background: #a2a2a2;
  }

  .nominaReporteTable .selected,
  .nominaReporteTable tr.selected:hover,
  .nominaReporteTable tr.selected:nth-child(even){
	background: #a2a2a2;
	color:white;
  }

  .nominaReporteMobile {
	  font-size: 10px;
	  table-layout: fixed;
  }

  .signmage-repository-title-bar {
    background: #00299F;
    color:white;
  }

  .signmage-repository-title-bar .material-icons {
    color:white;
  }

  .document-separator {
    border-bottom: solid;
    border-color: #00299F;
  }

  .document-set-list-item {
	display: flex;
	flex-direction: row;
	align-self: center;
  }

  .set-valid {
	background-color:#4caf50 !important;
  }

  .set-expired {
	  background-color:red !important;
  }

  .warning.mdl-badge[data-badge]:after {
    background: gold
  }

  .uploadOrDragBox {
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:80%;
  }

  .uploadOrDragBox .textInvitation {
    font-weight: bold;
    margin: 10px;
    font-size: 16px;
  }

  .uploadOrDragBox .uploadButton {
      background: #00299F;
      padding: 16px;
      margin: 20px;
      color: white;
      font-weight: bold;
      cursor: pointer;
  }

  #frmxMainContainer {
    display: flex;
    height: calc( 100vh - 172px );
    overflow: hidden;
  }

  #frmxSidebar {
    width: 70px;
    background: #00299F;
    z-index: 75;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .frmx-flat-button {
      background: #00299F !important;
      color: white !important;
  }

  .frmx-stroked-button {
      background: white !important;
      border-color: #00299F !important;
      color: #00299F !important;
  }

  .space-between {
      justify-content: space-between;
  }

  .flex-end {
      justify-content: flex-end;
  }


.flex-row {
    display: flex;
    flex-direction: row;;
}
  .flex-column {
      display: flex;
      flex-direction: column;;
      align-items: stretch;
  }

  .flex-1 {
      flex: 1;
  }

  .m-10 {
     margin: 10px;
  }

  .mb-10 {
      margin-bottom: 10px;
  }

  .max-w-500 {
    max-width:500px
  }

.m-5 {
    margin: 5px;
}

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

.bg-white {
    background: white;
}

  .bg-red {
      background: red;
  }

  .overflow-y-auto {
      overflow-y: auto;
  }

  .overflow-ellipsis{
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .w-160 {
      width: 160px;
  }

  .w-250 {
      width: 250px;
  }

  .h-full {
      height: 100%;
  }

  .z-1 {
      z-index: 1;
  }

  .absolute {
      position: absolute;
  }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

.fade-in{ animation: fadeIn 100ms; }

  #frmxSidebar button {
      margin: auto;
      padding: 0;
      min-width: 54px;
      color: white;
  }

  .signmage-document-title-bar-container {
      height: 80px;
      border: 1px solid #e0e8f1;
      display: flex;
      flex-direction: column;
      z-index: 1;
  }

.signmage-document-title-bar {
    background: #ffffff;
    border: 1px solid #e0e8f1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
    flex-grow:1;
}

.signmage-document-title-bar-msg {
    height: 40px;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signmage-document-title-bar-msg-error {
    background: red;
    color:white;
}

.signmage-document-title-bar-msg-warning {
    background: #ffeb3b;
    color: black;
}

.signmage-document-title-bar-msg-info {
    background: #00299F;
    color: white;
}

#frmxContentContainer {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.sideBarTooltip {
	opacity: 1 !important;
    font-size: 18px !important;
    padding: 10px !important;
}

.separator {
    background: #4d8cd0;
    width: 100%;
    height: 1px;
    margin: 5px 0;
}

#frmxSidebar button {
    width: 50px;
    height: 50px;
    margin: 5px 0;
}

#frmxSidebar button md-icon {
    width: 40px;
    height: 40px;
}

.frmxSidebarSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconBadge {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}


 @keyframes progressIconRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


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

.progressIconLoader {
    position: absolute;
    bottom: 0;
    right: 0;
	width: 10px;
	height: 10px;
	border:solid 10px red;
	border-radius: 50%;
	border-right-color: transparent;
	border-bottom-color: transparent;
	 -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             progressIconRotate;
    -webkit-animation-duration:         1.0s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

    	 transition: all 0.5s ease-in;
    animation-name:             progressIconRotate;
    animation-duration:         1.0s;
    animation-iteration-count:  infinite;
    animation-timing-function: linear;
}

.frmxHistoryBar, .frmxAttachmentsBar {
    display: flex;
    background: white;
    width: 400px;
    z-index: 74;
    position: absolute;
    height: 100%;
    left: 70px;
    transition: 0.3s;
    border-right: 2px solid #e0e8f1;
    flex-direction: column;
}

.frmxHistoryBar.ng-hide, .frmxAttachmentsBar.ng-hide {
    left: -330px;
}

.frmxHistoryBarTitle, .frmxAttachmentsBarTitle {
    padding: 20px;
    font-weight: bold;
    font-size: 18px;
}

.historyItem, .attachmentsItem {
    border: 2px solid #e0e8f1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin: 8px;
    border-radius: 5px;
}

.historyItem.alert, .attachmentsItem.alert {
    background: #ffff79;
}

.panelOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 73;
}

.unblockForm {
    display: flex;
    flex-direction: column;
}

#newVersionAvailable {
     position: fixed;
     padding: 10px;
     height: 30px;
     background: #00299F;
     bottom: 0;
     right: 50px;
     border-radius: 10px 10px 0 0;
     cursor: pointer;
     color: white;
     font-weight: bold;
 }

 .tipAlert {
	position: fixed;
    background: #00299F;
    left: 80px;
    padding: 10px 12px;
    margin-top: -50px;
    border-radius: 10px;
    max-width: 200px;
    text-transform: none;
    break-after: avoid;
    white-space: normal;
    text-align: left;
    line-height: 22px;
}

 .tipAlert.demoAlert {
     position: fixed;
     top: 140px;
     left: auto;
     right: 20px !important;
     color: white;
     max-width: 300px;
     z-index: 80;
 }

.tipAlert::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #00299F;
    position: absolute;
    left: -10px;
    top: 20px;
  }


.tipAlert.demoAlert::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid #00299F;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    left: 20px;
    top: -20px;
}

.tipAlertTitle {
	font-weight: bold;
	font-size: 16px;
    margin-bottom: 5px;
}

.tipAlertBody {
}

.tipAlertButton {
    border: 2px solid white;
    padding: 5px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    margin: 20px 5px 5px;
    cursor: pointer;
}

.tipAlertClose {
    position: absolute;
    top: 0;
    right: 0;
}

.tipAlertClose md-icon {
    color: white;
}

.dropAttachments {
    text-align: center;
    background: lightgrey;
    padding: 30px;
    margin: 10px 0px;
    font-weight: bold;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    color: #3c3c3c;
}

.attachmentsItemDeleteOptions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
    background: white;
    color: #00299F;
}

md-toolbar > .md-toolbar-tools > .md-icon-button > md-icon {
    color: #00299F;;
}

md-switch {
	margin: 20px 0 !important;
}

md-switch.md-default-theme.md-checked .md-thumb, md-switch.md-checked .md-thumb {
    background: #00299F;
}

md-switch.md-default-theme.md-checked .md-ink-ripple, md-switch.md-checked .md-ink-ripple {
    color: #00299F;
}

md-switch.md-default-theme.md-checked .md-bar, md-switch.md-checked .md-bar {
    background: #70a7e1;
}

md-dialog-actions > .md-button {
    font-weight: bold;
}

.dialogAreaTitle {
	color: #00299F;
	font-weight: bold;
}

.dialogArea {
	padding:20px;
	border: 1px solid #e3e3e3;
	margin:10px;
	border-radius: 10px;
}

.autocompleteItem {
	display: flex;
	align-items: center;
	padding: 5px;
	cursor: pointer;
}

.signersLayer {
	position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: 0 0;
}

.signersLayer .renderedSigner {
	position: absolute;
	text-align: initial;
	z-index: unset;
	scroll-margin: 40px;
}

.signersLayer .unselectedSigner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	cursor: pointer;
}


.renderedSigner:hover .renderedSignerTooltip,
.renderedSigner:hover .renderedSignerOwnerOptionsContainer {
	display: block;
}

.renderedSignerTooltip, .renderedSignerOwnerTooltip {
	display: none;
	background: black;
	padding: 10px;
	position: absolute;
	z-index: 80;
	width: 180px;
	min-height: 40px;
	font-size: 12px;
	text-align: center;
	line-height: 1.5;
	color: white;
  }

  .renderedSignerTooltip {
	transform: translate(0, -110%);
  }

  .renderedSignerOwnerTooltip {
	display: block;
	position: initial;
  }

  .renderedSignerOwnerOptionsContainer {
	position: absolute;
	transform: translate(0, -100%);
	padding: 10px;
	display: none;
  }

  .renderedSignerOptions, .renderedSignerOwnerOptions {
	background: #00299F;
	color:white;
    padding: 5px 10px;
    position: absolute;
    z-index: 78;
    width: 180px;
    height: 20px;
    top: -35px;
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
	cursor: pointer;
  }

  .renderedSignerOwnerOptions {
	 position: initial;
  }

  .renderedSignerOptions div {
	text-align: center;
  }

  .renderedSignerImg {
	width: 100%
  }

  .imageDialog {
	text-align: center;
  }

  .imageDialog img {
	padding: 20px;
	width: 400px;
    margin: auto;
    display: block;
  }

  .imageDialog p {
	margin: 20px;
  }

  .imageDialogTitle {
	text-transform: uppercase;
	font-weight: bold;
	color:#0b66c9;
  }

  .imageDialogSeparator {
	width: 30px;
    border: 1px solid #00c8dc;
    display: block;
    margin: 20px auto;
  }

  .bold {
      font-weight: bold;
  }

  .mobileAuthority {
      border: 2px solid lightgray;
      margin: 2px;
  }

  .recommendedAuthority {
      border: 2px solid black;
  }

.border-radius-lg {
    border-radius: 8px;
    padding: 12px;
}

  .background-red-light {
      background: #ff8a8a;
  }

  .color-white {
      color: white;
  }

  .text-decoration-none {
      text-decoration: none;
  }


.text-blue-signmage {
    color:#00299F;
}

.background-blue-light-signmage {
    background-color: #37A0FF;
}

.text-center {
    text-align: center;
}

.flex-align-items-center {
    align-items: center;
}

.hide-md-select-dropdown {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .wizard-dialog-cdk {
        height: calc(100% - 0px);
        width: calc(100% - 0px);
        max-width: 100%;
        max-height: 100%;
    }
}

.acroInput input[disabled]{
    pointer-events: none;
}

.acros-selected-input {
    border: 2px solid red;
    margin: -4px -2px;
    scroll-margin-top: 120px;
}