@font-face {
	font-family: 'LoveYaLikeASister';
	src: url(https://s3-us-west-1.amazonaws.com/cdnhubworks/signage/mooyah/fonts/LoveYaLikeASister.ttf);
}
@font-face {
	font-family: 'KraftNine';
	src: url(https://s3-us-west-1.amazonaws.com/cdnhubworks/signage/mooyah/fonts/KraftNine.ttf);
}
/* latin-ext */
@font-face {
	font-family: 'Merienda';
	font-style: normal;
	font-weight: 400;
	src: local('Merienda'), local('Merienda-Regular_0_wt'), url(https://fonts.gstatic.com/s/merienda/v5/gNMHW3x8Qoy5_mf8uWMLMIqK_Q.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Merienda';
	font-style: normal;
	font-weight: 400;
	src: local('Merienda'), local('Merienda-Regular_0_wt'), url(https://fonts.gstatic.com/s/merienda/v5/gNMHW3x8Qoy5_mf8uWMFMIo.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Chicle';
	font-style: normal;
	font-weight: 400;
	src: local('Chicle Regular'), local('Chicle-Regular'), url(https://fonts.gstatic.com/s/chicle/v6/lJwG-pw9i2dqU-BzwGivkbY.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Chicle';
	font-style: normal;
	font-weight: 400;
	src: local('Chicle Regular'), local('Chicle-Regular'), url(https://fonts.gstatic.com/s/chicle/v6/lJwG-pw9i2dqU-Bzzmiv.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'Chewy';
	font-style: normal;
	font-weight: 400;
	src: local('Chewy Regular'), local('Chewy-Regular'), url(https://fonts.gstatic.com/s/chewy/v9/uK_94ruUb-k-wn52KjI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Kaushan Script';
	font-style: normal;
	font-weight: 400;
	src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/vm8vdRfvXFLG3OLnsO15WYS5DG72wNJHMw.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Kaushan Script';
	font-style: normal;
	font-weight: 400;
	src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v4/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.component-list-margin .component-list{
	padding: 7px 0px;
	border: 1px dashed transparent;
	transition: all 0.5s ease;
	background: transparent;
	border-radius:5px;
}
.component-list-margin:hover .component-list, .component-list-margin.active .component-list{
	overflow: hidden;
	padding: 7px;
	border: 1px dashed #ccc;
}

.component-search-box{
	border-radius: 30px;
	font-size: 13px;
	padding: 4px 15px;
	height: 33px;
}
.item-img{
	margin-top: 15px;
	border: 1px solid #f2f2f2;
	border-radius: 5px;
	width: 100%;
	height: auto;
	overflow: hidden;
	min-height: 116px;
	max-height: 116px;
	overflow: hidden;
}


/*Menu Digital Signage Board Menu  */
.SchMenuBoard .daysName{background-color: #E9EAEC;height: 80px;}
.SchMenuBoard .Device_Name{position: relative;}
.SchMenuBoard .Device_Name .Activate_Decive,
.SchMenuBoard .Device_Name .Activate_plus,
.SchMenuBoard .Device_Name .btn .Activate_Decive.Activate_btn
{
	display: none;
}
.SchMenuBoard .Device_Name:hover .Activate_Decive,
.SchMenuBoard .Device_Name:hover .Activate_plus,
.SchMenuBoard .Device_Name .btn:hover .Activate_Decive.Activate_btn {
	display: block;
	cursor: pointer;
}
.SchMenuBoard .Device_Name .Activate_Decive {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,0.6);
	height: 100%;
	min-height: 50px;
	text-align: center;
}
.SchMenuBoard .Device_Name .Activate_Decive.Activate_btn{min-height:20px;}
.SchMenuBoard .Device_Name .Activate_plus {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	background: #c6d4e9;
	height: 100%;
	min-height: 50px;
	text-align: center;
}
.SchMenuBoard .Device_Name .Activate_Decive .hoverData,
.SchMenuBoard .Device_Name .Activate_plus .hoverData{
	font-size: 40px;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	left: 50%;
	margin-left: -20px;
	color: #fff;
}
.SchMenuBoard .Device_Name .Activate_Decive div.hoverData{font-size: 16px; margin-left:0; left:0; margin-top: -22px;}
.SchMenuBoard .Device_Name .Activate_Decive.Activate_btn div.hoverData{font-size: 12px; margin-top: -32px; width: 100%;}
.SchMenuBoard .Device_Name .Activate_Decive div.hoverData i{
	background: #fff;
	height: 22px;
	width: 22px;
	border-radius: 15px;
	line-height: 20px;
	margin: 2px;
	font-size: 0px;
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: center;
}

#addDevice_Mdl h4.need-activeCode{
	line-height:1;
	padding:30px 0px  40px 0px;
	font-size: 16px;
}
/* Digi Menu Board Ends */


.template-selection{
	border: 1px solid #f2f2f2;
	border-radius: 5px;
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 15px;
}
.template-selection img{
    width: 100%;
    border-radius: 5px;
    height: auto;
    object-fit: fill;
}
.template-selection .selection-hover{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
	border-radius: 5px;
	opacity: 0;
	transition: all 0.5s ease;
}
.template-selection:hover .selection-hover{
	opacity: 1;
}
.template-selection .selection-hover .btn, .template-selection .selection-hover label{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    transform: translate(-50%, -50%);
}
.template-selection .selection-hover label{
	margin-left: 24px;
}
.template-selection .selection-hover label input[type="checkbox"] + .lbl::before, .template-selection .selection-hover label input[type="radio"] + .lbl::before {
  height: 30px;
  line-height: 30px;
  min-width: 30px;
  margin-right: 4px;
  border-radius: 17px;
  margin-top: 3px;
  border: none;
  box-shadow: none;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  content: '\f00c';
	color: #ccc;
	font-size: 13px;
	cursor: pointer;
}
.template-selection .selection-hover label input[type="checkbox"]:checked + .lbl::before, .template-selection .selection-hover label input[type="radio"]:checked + .lbl::before{
	content: '\f00c';
	color: #61c390;
	font-size: 13px;
	line-height: 30px;
}
.template-selection.dg-bigOne .selection-hover label input[type="checkbox"] + .lbl::before, .template-selection.dg-bigOne .selection-hover label input[type="radio"] + .lbl::before {
  height: 50px;
  line-height: 50px;
  min-width: 50px;
  border-radius: 25px;
  font-size: 22px;
}
.template-selection.dg-bigOne .selection-hover label input[type="checkbox"]:checked + .lbl::before, .template-selection.dg-bigOne .selection-hover label input[type="radio"]:checked + .lbl::before{
	content: '\f00c';
	color: #61c390;
	font-size: 22px;
	line-height: 50px;
	background: #fff;
}
.right-tail {
	content: "";
	height: 0;
	width: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #fff;
	position: absolute;
	left: -9px;
	top: 10px;
}
.left-tail {
	content: "";
	height: 0;
	width: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	position: absolute;
	right: -9px;
	top: 10px;
}
.template-editor.modal-content .modal-header{
	background: #35c4ff !important;
	padding: 10px 15px !important;
}
.template-editor.modal-content .modal-header .modal-title{
	font-size: 14px !important;
	color: #fff !important;
}
.template-editor.modal-content .modal-header button.close{
	border-color: #fff;
	color: #fff;
	margin-top: 0;
	opacity: 0.8;
}
.template-editor.modal-content .modal-body{
	padding: 15px !important;
}
.editor-actions{
	background-color: #fff;
	border: 1px solid rgb(221, 223, 224);
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
	min-height: 34px;
	border-radius: 5px;
	display: block;
	width:100%;
	padding: 5px;
}
.editor-actions .table{
	border-radius: 5px;
	margin: 0;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	table-layout: fixed;
}
.editor-actions .table tbody tr td{
	text-align: center;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	padding: 5px;
	border: 1px solid #fff;

}
.editor-actions .table tbody tr td:hover ,.editor-actions .table tbody tr td.active{
	background: #e5ecf6;
}
.font-size{
	padding: 0 !important;
	height: 26px;
	margin: 1px 0px 1px -4px;
	text-align: center;
	min-width: 27px;
}

/* Range slider css starts */


input[type=range].editor-range {
	margin: auto;
	outline: none;
	padding: 0;
	width: 100%;
	height: 4px;
	background-color: #eeeeee;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #087af5), color-stop(100%, #087af5));
	background-image: -webkit-linear-gradient(#eeeeee, #eeeeee);
	background-image: -moz-linear-gradient(#eeeeee, #eeeeee);
	background-image: -o-linear-gradient(#eeeeee, #eeeeee);
	background-image: linear-gradient(#eeeeee, #eeeeee);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	border-radius: 10px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 12px;
	/* track */
	/* thumb */ }
input[type=range].editor-range::-webkit-slider-runnable-track {
	box-shadow: none;
	border: none;
	background: transparent;
	-webkit-appearance: none; }
input[type=range].editor-range::-moz-range-track {
	box-shadow: none;
	border: none;
	background: transparent; }
input[type=range].editor-range::-moz-focus-outer {
	border: 0; }
input[type=range].editor-range::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	background: white;
	border-radius: 100%;
	box-shadow: 0 1px 2px 0px #000;
	-webkit-appearance: none; }
input[type=range].editor-range::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 3px solid #fff;
	background: #34c4ff;
	border-radius: 100%;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}
/* Range slider css ends */
.img-component .setting-icons,
.img-component-light .setting-icons,
.img-component-dark .setting-icons,
.img-component-light-square .setting-icons,
.img-component-dark-square .setting-icons,
.img-component-light-tringle-up .setting-icons,
.img-component-dark-tringle-up .setting-icons,
.img-component-light-tringle-down .setting-icons,
.img-component-light-tringle-up .setting-icons,
.img-component-logo .setting-icons {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: -11px;
	display: none;
	z-index: 9;
}
.img-component-light-tringle-down .setting-icons {
	position: absolute;
	top: 60%;
	left: 25%;
	width: 100%;
	text-align: center;
	margin-top: -11px;
	display: none;
	z-index: 9;
}
.img-component-light-tringle-up .setting-icons {
	position: absolute;
	top: 40%;
	left: -25%;
	width: 100%;
	text-align: center;
	margin-top: -11px;
	display: none;
	z-index: 9;
}
.img-component .setting-icons button.btn,
.img-component-light .setting-icons button.btn,
.img-component-dark .setting-icons button.btn,
.img-component-light-square .setting-icons button.btn,
.img-component-dark-square .setting-icons button.btn,
.img-component-light-tringle-up .setting-icons button.btn,
.img-component-dark-tringle-up .setting-icons button.btn,
.img-component-light-tringle-down .setting-icons button.btn,
.img-component-light-tringle-up .setting-icons button.btn,
.img-component-logo .setting-icons button.btn{
	padding: 0px;
	height: 1.2vw;
	width: 1.2vw;
}
.img-component .setting-icons button.btn:hover,
.img-component-light .setting-icons button.btn:hover,
.img-component-dark .setting-icons button.btn:hover,
.img-component-light-square .setting-icons button.btn:hover,
.img-component-dark-square .setting-icons button.btn:hover,
.img-component-light-tringle-up .setting-icons button.btn:hover,
.img-component-dark-tringle-up .setting-icons button.btn:hover,
.img-component-light-tringle-down .setting-icons button.btn:hover,
.img-component-light-tringle-up .setting-icons button.btn:hover,
.img-component-logo .setting-icons button.btn:hover{
	opacity: 1;
}
.img-component:hover .setting-icons,
.img-component-light:hover .setting-icons,
.img-component-dark:hover .setting-icons,
.img-component-light-square:hover .setting-icons,
.img-component-dark-square:hover .setting-icons,
.img-component-light-tringle-up:hover .setting-icons,
.img-component-dark-tringle-up:hover .setting-icons,
.img-component-light-tringle-down:hover .setting-icons,
.img-component-light-tringle-up:hover .setting-icons,
.img-component-logo:hover .setting-icons {
	display: block;
}
.setting-icons .rounded_blue_btn img{
	height: 0.8vw !important;
	width: 0.8vw !important;
	line-height: 1.2vw;
	vertical-align: top;
	margin-top: 0.15vw;
}

.text-editor-colorpicker .colorpicker-trigger{
	opacity: 0;
	border: none;
	outline: none;
	height: 40px;
}
.text-editor-colorpicker .colorpicker-picker{
	top: 30px !important;
	left: 0 !important;
}
.text-edition-action{
	position: absolute;
	text-align: center;
	top: 50%;
	margin-top: -12px;
	white-space: nowrap;
	z-index: 9;
	width:100%;
}
.text-edition-action button{
	font-size: 0.8vw;
	display: inline-block;
	box-shadow: 5px 5px 6px rgba(0,0,0,0.2);
	margin-left: 3px;
	margin-right: 3px;
	border-radius: 1vw !important;
}
.text-edition-action button.rounded_blue_btn{
	padding: 0px;
	height: 1.2vw;
	width: 1.2vw;
	line-height: 1.2vw;
}
.text-edition-action button.rounded_blue_btn img{
	height: 0.8vw !important;
	width: 0.8vw !important;
	line-height: 1.2vw;
	vertical-align: top;
	margin-top: 0.15vw;
}
.component-list-margin .text-edition-action , .text-component .text-edition-action, .section-list .text-edition-action {
	display: none;
}
.component-list-margin:hover .text-edition-action , .text-component:hover .text-edition-action, .section-list:hover .text-edition-action{
	display: block;
}
.template-holder img[src=""] {
	opacity: 0;
	height: 100% !important;
}
.template-holder img{
	opacity: 1;
}

.img-selected {
	position: relative;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
.img-selected:after {
	font-family: FontAwesome;
	font-weight: 900;
	content: "\f058";
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 30px;
	margin-left: -10px;
	margin-top: -16px;
	color: #00d4a5;
	text-shadow: 3px 3px 10px rgba(0,0,0,0.2);
	z-index: 2;
}
.img-selected:before {
	content: "";
	position: absolute;
	left: 0%;
	top: 0%;
	background: rgba(0,0,0,0.5);
	z-index: 1;
	height: 100%;
	width: 100%;
}

.temp-prev-close {position: fixed;z-index: 999999;right: -29px;top: -27px;color: #fff;border: 3px solid #fff !important;border-radius: 50%;padding: 1.8px 7px 3.6px !important;background: red!important;pointer-events: painted;opacity: 1;}
.temp-prev-close:hover{color:#fff}


.component-holder .holder-setting{
	display: none;
}
.component-holder:hover .holder-setting{
	display: block;
}
.holder-setting{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	border: 1px solid #35c4ff;
	border-radius: 5px;
	overflow: hidden;

}
.holder-setting:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 24px;
	width: 25px;
	background-color: #35c4ff;
	background-image: url("../../images/common/svg/Setting_app_white.svg");
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 2;
	cursor: pointer;
	border-radius: 0px 0px 0px 11px;
	box-shadow: -2px 2px 6px rgba(0,0,0,0.2);
}
.temp-prev{
	position: fixed;
	z-index: 9999999;
	right: -15px;
	top: -3px;
	color: #fff;
	border: 3px solid #fff !important;
	border-radius: 50%;
	padding: 0;
	background: red;
	pointer-events: painted;
	opacity: 1;
	height: 30px;
	width: 30px;
}


.day-part-name {
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	border: 1px solid rgb(221, 223, 224);
}



.dsgn-div {
	display: inline-block;
	vertical-align: middle;
}

.daypart-input input {
	padding: 6px 0 !important;
	text-align: center;
}
/* .hub_app_19 .ui-autocomplete{width:68px !important;} */

.signage-shadow{
	box-shadow: 5px 5px 20px rgba(0,0,0,0.2) !important;
}

.system-setup{
	border-width:1px;
	border-style: solid;
	border-radius: 5px;
	width: 125px;
	margin:  0 auto;
}
.system-setup.linux{
	border-color: #ffca05;
	background: #fff9e5;
}
.system-setup.linux .system-title{
	background: #ffca05;
}
.system-setup.windows{
	border-color: #00adef;
	background: #ebfaff;
}
.system-setup.windows .system-title{
	background: #00adef;
}
.system-setup img{
	width: 60px;
	height: 60px;
	margin: 0 auto;

}
.system-setup .system-title{
	font-size: 14px;
	text-align: center;
	width: 100%;
	border-radius: 0 0 5px 5px;
	padding: 5px 10px;
	color: #fff;
}
.dgsng-bg-wizard{
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-size: cover;
	padding: 80px 5% 10px;
	overflow: hidden;
}


.dgsng-bg-wizard{
	position: fixed;
	background:rgba(0, 0, 0, 0.8);
	opacity: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: url("../../../assets/images/digital-signage/dgsngbg.png") no-repeat;
	background-size: cover;
	padding: 80px 10px 10px 50px;
	z-index: 1030;
}

.dgsng-bg-wizard .dgsng-wiz-wrapper{
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-size: cover;
	padding: 80px 5% 10px;
	overflow: hidden;
}

.dgsng-bg-wizard input[type="checkbox"] + .lbl-big::before, input[type="radio"] + .lbl-big::before {

	font-family: fontAwesome;
	font-weight: normal;
	font-size: 18px;
	color: #CBCBCB;
	content: "\f00c";
	background-color: #EAEAEA;
	border: none;
	box-shadow:none;
	border-radius: 0;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	height: 28px;
	line-height: 27px;
	min-width: 100px;
	margin-right: 4px;
	border-radius: 15px;
	margin-bottom: 2px;
	transition: all 0.5s ease;
	margin-top: 6px;

}
.dgsng-bg-wizard input[type="checkbox"]:checked + .lbl-big::before, input[type="radio"]:checked + .lbl-big::before {

	display: inline-block;
	content: '\f00c';
	background-color: #00d28f;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: all 0.5s ease;

}
.dgsng-bg-wizard .selection-hover {opacity: 1}
.dgsng-onb-wiz .template-selection{
	border: none;
	border: 1px solid #f1f1f1;
}
.dgsng-onb-wiz .template-selection .selection-hover .rounded_transparent_btn{
	background: #35c4ff;
	color: #fff;
	border: none;
}



#editor{
	position: absolute;
	width: 300px;
	right: 0;
	top: 0;
}

.modal-dialog{
	margin-top: 70px;
}

/*.modal-backdrop{background-color: rgba(40, 102, 139, 0.7);} !* rgba(255, 255, 255, 0.8) *!*/
.cursor-pointer{cursor: pointer;}
.model-content{box-shadow: 0 0 0 6px  lightgray}



/* Layout Menu start */
.punch-details-form{
	background: #fafafa;
	float: left;
	width: 100%;
	padding: 15px;
	border-radius: 10px;
	position: relative;
}
.or-seperator{
	position: absolute;
	right: -1px;
	height: 100%;
	width: 30px;
	top:-15px;
}
.search-window{
	border-width: 0.5px !important;
	background: transparent !important;
	padding: 8px 13px;
	width: 100%;
	position: relative;
	border: 1px solid lightgray;
}
.search-window-icon{
	position: absolute;
	right: 18px;
	top: 26px;
	cursor: pointer;
}
.filter-list-data{
	margin: 0;
	padding: 0;
	width: 100%;
	/* max-height: calc(100vh - 379px); */
	max-height: 270px;
	overflow: auto;
}
.filter-list-data li{
	float: left;
	width: 100%;
	list-style: none;
	margin-top: 10px;
	background: #fff;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 10px 15px;
	cursor: pointer;
	position: relative;
}
.filter-list-data li span{
	position: absolute;
	right: 13px;
	top: 8px;
}
.filter-list-data li > span > img{
	height: 15px;
	width: 15px;
}
.filter-list-data li.add-menu-item{
	background: #35c4ff;
	color: #fff;
}
.filter-list-data li i{
	float: right;
	padding-top: 4px;
	padding-right: 0px;
}
.filter-list-data li.menu-itemz > i{
	margin-right: 25px;
}
.hub_app_19 .white {
	color: #FFFFFF !important;
}
.hub_app_19 .green {
	color: #1BBC9B !important;
}
.hub_app_19 .gray{color:gray}
.sgn-item-mdl .form-horizontal .form-group {
	margin-left: 4px;
	margin-right: 0;
}
.template-box {
    width: 17%;
    margin-right: 15px;
    height: 5.6vw;
	min-width: 12vw;
	float: none !important;
}
.dgsng-day-part .Device_Name{
	padding: 15px;
}
@media only screen and (min-width: 980px) and (max-width: 1024px)  {
 .template-box {
 		/* height: 5.6vw;
		min-width: 12vw; */
		height: 9.1vw;
    min-width: 16vw;
	}
}
@media only screen and (min-width: 1025px) and (max-width: 1280px)  {
 .template-box {
/*  	height: 5.8vw;
	min-width: 12.3vw; */
	    height: 9.3vw;
    min-width: 16.3vw;
	}
}
@media only screen and (min-width: 1281px) and (max-width: 1366px)  {
 .template-box {
 /* 	height: 6vw;
	min-width: 11vw; */
	height: 9.6vw;
    min-width: 17vw;
	}
}
@media only screen and (min-width: 1367px) and (max-width: 1920px)  {
 .template-box {
 /* 	height: 6.2vw;
	min-width: 13.3vw; */
		    height: 10.2vw;
    min-width: 18vw;
	}
}
@media only screen and (min-width: 1921px) and (max-width: 2560px)  {
 .template-box {
  	height: 6.7vw;
	min-width: 14.4vw; 

	}
}
@media only screen and (min-width: 2561px) and (max-width: 3840px)  {
 .template-box {
 	height: 6.9vw;
	min-width: 15vw;
	}
}
.dsng-no-data{
	margin-top: 2px;
	vertical-align: middle;
	text-align: center !important;
	line-height: 150px;}
	
	.add-templates{
	background: url(../../../assets/images/digital-signage/templates/dgSngGlbTemp1.jpg) no-repeat center;
    background-color: rgba(0, 0, 0, 0);
    background-size: auto;
	background-size: cover;
	height: 116px;
	width: 116px;
	float: left;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	}
	.add-templates:before{content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; border-radius: 3px;}
	.add-templates img{height: 30px; width:30px; position: absolute; top: 50%; margin-top: -15px; left: 50%; margin-left: -15px;}
	.bg-template{
	height: 99px;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-position: center !important;
	}
	.bg-template .selection-hover .btn{
	height: 30px;
	width: 30px;
	padding: 0;
	line-height: 9px;
	text-align: center;
	border-radius: 15px;
	}
	.dgsng-btn{
	background: #fff;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	padding: 0;
	line-height: 12px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}
	
/* image Upload */
	 .digi_img-upload .rounded_blue_btn.digi-upload{
   background-color:transparent;
   border:1px dashed #48c8ef; 
   color:#48c8ef;
   font-size: 16px;
   padding: 10px 40px;
   font-weight: 400;
   }
   .digi_img-upload .schedule_sumry_wrapper{
   border-radius:5px;
   }
   .digi_img-upload h1{
   margin:20px 0 20px 0;
   font-size:2em;
   color:#6a6e74;
   font-weight:500;
   }
    .digi_img-upload .imgUpload{
   padding:60px 0;
   }
    .digi_img-upload .imgPreview{
   max-height:calc(100vh - 250px);
    min-height:calc(100vh - 251px);
   overflow:hidden
   }
    .digi_img-upload .imgPreview img, .viewImage img{
   width:100%;
   height:auto;
   }
    .viewImage{
    max-height:calc(100vh - 1px);
   overflow-y:hidden 
   }
   .modal.in .modal-dialog.viewImage-mdl,.modal.fade .modal-dialog.viewImage-mdl{
    width:100%;
     transition:0.1s all ease-in-out;
     margin:0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }
    .close-view{
    position: absolute;
    right: 5px;
    top: -4px;
    z-index: 16;
    font-size: 30px;
    cursor: pointer;
    }
.select-device{
	padding: 32px 10px 32px 108px;
	box-shadow: 0 0 0 rgba(0,0,0,0.2);
	border-radius: 5px;
	background: #fff;
	position: relative;
	text-align: right;
}
.select-device.active{
	box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}
.select-device img.device-img{
	position: absolute;
	top: 15px;
	left: 15px;
	height: 65px;
width: auto;
}
.select-device .device-name{
	font-size: 17px;
	padding-right: 15px;
}
.activation-code{
	border: 1px solid rgb(221, 223, 224);
	border-radius: 5px;
	height: 33px;
	background: #fff;
}
.activation-code .activation-device-code{
	border:none;
	width: 100%;
	height: 31px;
	border-radius: 5px;
	padding: 0 10px;
	letter-spacing: 10px;
}
.modal-view{
  margin: 0 auto;  
  float:left;  
    width: 100%;  
    position: relative;
  padding: 35px; 
    transform: translate(0% ,0%) scale(0.65);
    z-index:99999; 
    min-height:100vh; 
   
}
.modal-view .temp-prev{
	top:-5px;
}
.modal-view #container{
border:2px solid #fff;
	border-radius:5px;
	margin-top:10px;
}
.modal-view [id^='container_dgSngGlbTemp'],
.modal-view [id*='container_dgSngGlbTemp'], .modal-view .signage-temp{
	box-shadow: 0 0px 0px 2px white;
	border-radius:5px;
	margin-top:10px;
}
.modal-view-overlay{
	top:0;
	bottom:0;
	right:0;
	left:0;
	position:absolute;
	background-color:rgba(0,0,0,0.6);
	z-index:9999;
}
.modal-view .temp-hdr-preview{
    padding-left: 1vh;
    font-size:6vh;
    top:-8vh;
    margin: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 9999;
    left:0;
}
.modal-view.mdl-view-vtl{
	height:100vh;
	padding:0;
	margin:0;
	transform: translate(0% ,-20%) scale(0.22);
}
.modal-view.mdl-view-hrz{
	width:1200px;
	margin:0 auto;
	padding:10px 0 0 0;
	float:none;	
}
.modal-view.mdl-view-hrz .temp-prev{right:-1vh !important; top:0;}
.modal-view.mdl-view-vtl .temp-prev{
	 height:12vh;
	 width:12vh;
    right: -5vw !important;
    top: -4vh;
}
.modal-view.mdl-view-vtl .temp-prev i{
	font-size:7vh;
}
.modal .modal-view.mdl-view-vtl{
	transform: translate(0% ,-28%) scale(0.2);
}
.modal .modal-view-overlay{
 	background-color:transparent;
}

.modal-view.mdl-setting .temp-hdr-preview{
	top:-5vh;
}
.modal-view.mdl-setting{
  margin: 10vh 0;
  min-height:100%;
  }
  
.modal-view.mdl-setting .temp-prev{
	 right: -3vh;
	 top: 4vh;
}
.modal-view.mdl-view-vtl .temp-hdr-preview,.modal .modal-view.mdl-view-vtl .temp-hdr-preview{
 font-size:15vh;
 top:-24vh;
}
.modal .modal-view.mdl-view-vtl .temp-prev{
	right: -6vh;
    top: -3vh;
}
.modal-view #container .img-mdl-preview{
	width: 446px;
}
.modal-view #container .galleria .img-mdl-preview{
	width: 596px;
}
.servRequests-staus{color:#fff;border-radius:5px; margin-left:5px; position:relative;padding:7px 12px;}
.status-arrow{
	position: absolute;   
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    top: 1px;
    left: -12px;
}
.status-arrow-green{ border-right: 15px solid #1bbc9b;}
.status-arrow-blue{ border-right: 15px solid #478FCA;}


/*Customization  */

.selectdgSngDevice .select-device{
	padding: 15px 8px;   
    float: left;
    width: 100%;
    text-align: center;
    box-shadow:none;
    border:1px solid #ccc;
}
.selectdgSngDevice .select-device.active{
 border-color:#57abfc;
}
.selectdgSngDevice  .select-device img.device-img{
	position:relative;top:auto;left:auto;height:auto;width:100%;
}
.selectdgSngDevice  .select-device .device-name{
	font-size: 12px;  
    padding: 10px 0px;
    font-weight: bold;
}
.selectdgSngDevice .device-type span{display:block;}

.dgSngSchMenuTable > tbody:nth-child(odd){background-color:#fafafc;}
.dgSngSchMenuTable > tbody:nth-child(even){background-color: #fff;}
.SchMenuBoard .dgSngSchMenuTable  .daysName{background-color:transparent;}
.table.dgSngSchMenuTable .table{background:transparent !important;}
.SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_plus{  
	bottom: 0;
    left: 12px;
    position: absolute;
    right: 12px;
   top: -5px; 
    background: #e5f5fc;
    height: 100%;
    }
    .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_plus i{  
   color:#57abfc;
   font-size:30px;
    }
    .time-slot{
    background-color:#f5f5f5;
    }
    .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive {
        height: 50px;
        top:auto;
        min-height: 46px;   
        background-color:rgba(0,0,0,0.75);   
        
    }
    .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive .hoverData i{
height: 22px;
    width: 22px;
    border-radius: 50%;
    line-height: 23px;
    margin: 0;
    font-size: 14px;
    text-align:center;      
    }
      .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive .hoverData .icon_wrap{margin-left:10px; cursor:pointer;}
      .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive .hoverData .icon_wrap:first-child{margin-left:0px;}
       .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive .hoverData .icon_wrap i{margin-right:2px;}
      .SchMenuBoard .dgSngSchMenuTable  .Device_Name .Activate_Decive .hoverData{      
      top:auto;bottom:2px; 
         text-align: left;
    padding: 2px 0px;margin-top:0!important;}
   .SchMenuBoard  .dgSngSchMenuTable .Device_Name .btn .Activate_Decive.Activate_btn{
    display:block;
   }
  .add_template{
  position: absolute;
    top: 50%;   
    left: 50%;
    transform:translate(-50%, -50%);
    margin:auto;
    width:100%;
   
  }
  .template_add_title{font-size:20px; color:#57abfc; padding-left:5px; font-style:italic;}
  .addScreenTemp{
  box-shadow:0  1px 2px 1px rgba(0,0,0,0.15);
  }
 .addScreenTemp .template-selection .selection-hover{
 background:transparent;
 transition: all 0.01s ease;
 }
   .addScreenTemp .template-selection .selection-hover label {
    position: absolute;
    top: -6px;
    right: -38px; 
    left:auto;  
    transform: translate(-50%, -50%);
    margin-left:0;
}
.addScreenTemp .bg-template{height:140px;}
  .addScreenTemp  .template-selection .selection-hover label input[type="checkbox"] + .lbl::before,
    .addScreenTemp .template-selection .selection-hover label input[type="radio"] + .lbl::before {   
    border-radius: 25px;    
    border: none;   
    box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
    content: '\f00c';
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    background: #5badf9;
    height: 22px;
    line-height: 22px;
    min-width: 22px;
}


.btn.btn-xs.mini-btn{
	width:65px;
	padding: 1px!important;
	font-size:12px;
}

.modal-view [id^='container_dgSngGlbTemp'],
 .modal-view [id*='container_dgSngGlbTemp'], 
 .modal-view .signage-temp{
	  border-radius:0;
}
.modal-view{
	    transform: translate(0% ,-7%) scale(0.75);		    
}
.modal .modal-view.mdl-view-vtl,
 .modal-view.mdl-view-vtl {
    transform: translate(0% ,-32%) scale(0.24);
}
 .modal-view.mdl-view-hrz{height:1080px;width:100%;    transform: translate(0% ,-9%) scale(0.75); border-radius:0;	}
.modal-view .temp-hdr-preview{display:none;}
.modal-view.dashBrd-temp{
	    transform: translate(0% ,-7%) scale(0.75);	      
}
.modal .modal-view.dashBrd-temp.mdl-view-vtl {
    transform: translate(0% ,-32%) scale(0.24);
}
 .modal-view.dashBrd-temp.mdl-view-hrz{height:1080px;width:100%;    transform: translate(0% ,-9%) scale(0.75); border-radius:0;	}
.modal-view.dashBrd-temp .temp-hdr-preview{display:none;}

.template-selection.addSettingTemplate .selection-hover{
	opacity:1;
	height: 25%;
	top:auto;
	bottom:0;
	background: rgba(0,0,0,0.6);
}
.template-selection.addSettingTemplate .selection-hover .dgsng-btn{
	    height: 30px;
    width: 30px;
    line-height:30px;
}

.template-selection.addSettingTemplate  .selection-hover .dgsng-btn img{height:auto; width:15px;}
.temp_Dsbd_img{background-position:top!important;}
.searchTemplate input[type="text"]{padding-right: 40px;}
.searchTemplate i{top:6px; right:20px;}
.template_icons .dgsng-btn{height:30px; width:30px; line-height:30px;box-shadow:none; margin-right:5px;}
.not_allowed{cursor:not-allowed;}
.digitalSignage_Select .select2-container-multi .select2-choices .select2-search-choice{
	margin:2px 5px 2px 0;
}

.ROTATE_270_DEG{
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);}

.ROTATE_90_DEG{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}