/*  projects.css v4.1 */
.title {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 18px;
}
.description {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}
.error {
    color: #f20000;
    font-weight: 500;
    font-size: 16px;
	word-break:break-all;
}
.deploy-window { margin-top: 50px; }
.details {
    padding: 15px 0 0px;
    color: #888
}
.alert .details {
    background:rgba(255,255,255,0.5);
    padding:10px;
    margin:10px 0 0 0;
    border-radius:3px;
    color:#444;
    font-size:14px;
    line-height:140%;
    max-height:400px;
    overflow-y:auto;
}
    .details .proj-image { padding: 0px 0 0; }
    .details h3 {
        padding: 0 0 0px;
        font-size: 20px;
    }
.no-padding { padding: 0; }
.collapse-button {
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
}
.progress { background-color: #ccc; }
.fa.big,
.fa.fs14 { font-size: 14px; }
.fa.fs16 { font-size: 16px; }
.fa.fs32 { font-size: 32px; }
.fa.fs17 { font-size: 17px; }
.fa.fs18 { font-size: 18px; }
.fa.fs20 { font-size: 20px; }
.fa.platform {
    float: right;
    margin-right: 30%;
    font-size: 24px;
}
.log-area {
    font-size: 15px;
    cursor: default !important;
}
.deploy-icon { font-size: 18px !important; }
.fa.green { color: #42b129; }
.fa.red { color: #f20000; }
.large {
    font-size: 14px;
    padding: 10px 20px;
    border: 1px solid #999;
    border-radius: 3px;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    outline: none;
}
    .large:hover { border-color: #49db43;}
li.filter {
    position: relative;
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    padding-bottom: 15px;
}
    li.filter:hover {
        background: #e7e7e7;
        cursor: pointer;
    }
    li.filter.active { background: #e7e7e7; }
.filter-message { color: #999; }
.progress-bar { overflow-x:visible !important; }
.progress-bar > .n { padding:0 5px; }
.progress-bar.green {
	color:#FFF !important;
    background-color: #42b129 !important;
}
.progress-bar.red {
	color:#FFF !important;
    background-color: #DD0808 !important;
}
.icon {
    max-width: 64px;
    max-height: 64px;
}
.select {
    border: 1px solid #a5a5a5;
    border-radius: 3px;
    padding: 7px 7px;
    background: #888888;
    color: white;
    letter-spacing: 1px;
    display: inline-block;
    cursor: pointer;
    font-weight: normal;
    margin-top: 20px;
}
.submit { font-weight: bold;}
    .submit.is-inactive {
        border: 1px solid #a5a5a5;
        border-radius: 3px;
        padding: 9px 19px !important;
        background: #ababab;
        font-weight: normal;
        color: #515151;
    }

.index_1 { z-index: 1; }
.button_prev.is-inactive:hover,
.submit.is-inactive:hover {
    cursor: default;
    background: #ababab;
}
.inline { float: right; }

#template-main-tit {
    text-align:right;
    line-height:120%;
    border-bottom:0;
    padding-bottom:0;
    margin-bottom:15px;
}
#template-main-tit > h1 {
    display:block;
    float:left;
}
#btnEditGeneralInfo {
    display:inline-block;
    float:right;
    margin:-5px 0 0 0;
}

@media(max-width:540px){
    #template-main-tit,
    #template-main-tit > h1 { 
        float:none;
        text-align:center;
    }
    #btnEditGeneralInfo {
        float:none;
        margin:0 auto;
    }
}

.instantiate .form-wrap {
    position:relative;
    z-index:1;
    background: #f5f6f9;
    border: 1px solid #e3e3e3;
    margin: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.instantiate .form-header {
    height: 45px;
    background: #f5f6f9;
    border-top: 4px solid #e3e3e3;
    border-bottom: 1px solid #ddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
    .instantiate .form-header span {
        font-size: 14px;
        display: block;
        margin: 0px 10px;
        padding: 10px 5px;
        cursor: default;
        color: #999;
    }
        .instantiate .form-header span.is-active {
            cursor: default;
            color: #333;
            border-bottom: 1px solid #333;
        }
.step-buttons { text-align:center; }
.step-buttons .btn.prev-step { float:left; }
.step-buttons .btn.cancel { opacity:0.5; }
.step-buttons .btn.cancel:hover { opacity:1; }
.step-buttons .btn.prev-next { float:right; }
#status-tit.err { color:#900; }
.form-header span.is-blocked { cursor: default; }
.instantiate .form-bodies {
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
	max-width:1024px;
	margin:0 auto;
	min-height:200px;
}
.inst_steps {
	margin:20px auto 30px auto;
}
#inst_progress .form-bodies { max-width:1200px; }
#inst_progress .form-header {
	height:auto;
	padding:10px 10px 0 10px;
}
#progress-body-left {
	text-align:center;
	padding:0 20px 0 0;
	margin:0;
	float:left;
	width:130px;
}
#progress-body-right {
	text-align:center;
	padding:0 0 0 20px;
	margin:0;
	float:right;
	width:130px;
}
#inst_progress .btnsqr  {
	display:block;
	padding:0;
	margin:0;
	font-size:14px;
	line-height:110%;
	color:#999;
}
#inst_progress .btnsqr > img,
#inst_progress .btnsqr > i {
	display:inline-block;
	border-radius:5px;
	width:92px;
	margin:0 auto 15px auto;
	height:auto;
	border:none;
	border-radius:10px;
	color:#999;
	transition:all 150ms ease;
	border:solid 1px rgba(0,0,0,0.2);
	background-color:rgba(255,255,255,1);
}
#msgProcessFinished {
	margin: 20px 0 40px 0;
	text-align:center;
}
#msgProcessFinished a {
	color:#3c763d;
	font-weight:bold;
	text-decoration:underline;
}
#inst_progress .btnsqr > img { padding:5px; }
#inst_progress .btnsqr > i {
	font-size:36px;
	line-height:92px;
	height:92px;
}
#inst_progress .btnsqr > i:hover {
	background-color:#777;
	color:#FFF;
	transform:scale(1.1);
}
#inst_progress .btnsqr > img:hover {
	padding:5px;
	background-color:rgba(255,255,255,1);
	transform:scale(1.1);
}
#inst_progress #btnGoToProjR {
	color:#388b25;
}
#inst_progress #btnGoToProjR > i {
	background-color:#42b129;
	color:#FFF;
}
#progress-body-center {
	margin:0;
	float:left;
	width:calc(100% - 260px);
	text-align:left;
	padding:0;
}
.info-footer {
	padding:25px;
	border-top:2px solid #e3e3e3;
	background:rgba(255,255,255,0.75);/* #F9F9F9; */
	color:#555;
	font-size:14px;
	line-height:150%;
}
.info-footer .fa {
    font-size:11px;
    line-height:inherit;
}
#instStepsModalBodies .info-footer {
	margin: 0 -15px -10px -15px;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
	padding:15px;
}
#bottom-buttons {
	text-align:center;
	margin-top:15px;
}
#bottom-buttons .btn {
	margin:0 20px 20px;
	background:#CCC;
	color:#FFF;
	font-size:14px;
	line-height:120%;
	padding:10px 30px 10px 15px;
	transition:all 150ms ease;
}
#bottom-buttons .btn i { margin-right:15px;}
#bottom-buttons .btn:hover { 
	transform:scale(1.1);
	background:#777;
}
#bottom-buttons .btn.no-logs {
	background:#FFF9F9;
	border:solid 1px rgba(255,0,0,0.1);
	color:#C00;
	cursor:default;
	transform:scale(1);
}
#bottom-buttons .btn.no-logs .fa { opacity:0.3; }
#bottom-buttons .btn.reinst,
#bottom-buttons .btn.rebuild { background-color:#efa2a5; }
#bottom-buttons .btn.reinst:hover,
#bottom-buttons .btn.rebuild:hover { background-color:#C33; }
#progress-body-center .progress-group {
	margin:0 0 30px 0;
	color:#555;
}
#progress-body-center .progress-group .lbl {
	float:left;
	width:100px;
	text-align:right;
	padding:0;
}
#progress-body-center .progress-group .lbl i {
	margin:0 10px;
}
#progress-body-center .progress-group .progress {
	float:left;
	margin:0;
}
#progress-body-center .progress-group .status {
	width:100px;
	text-align:left;
	padding-left:10px;
}
#progress-body-center .progress-group .progress,
#progress-body-center .progress-group .fail-message { width:calc(100% - 200px); }
#progress-body-center .progress-group .fail-message { min-width:250px; }
#progress-body-center .progress-group .progress {
	min-width:100px;
	font-size:12px;
	line-height:21px;
}
#progress-body-center .progress-group .fail-message {
	position:relative;
    display:block;
    height:48px;
	min-height:48px;
    overflow:hidden;
    margin:10px auto 20px auto;
    padding:5px 40px 12px 10px;
    border:solid 1px #FCC;
	color:#C33;
    background:#FFF;
    border-radius:3px;
    font-size:13px;
    line-height:17px;
	transition:all 350ms ease;
}
#progress-body-center .progress-group .fail-message.opened {
    height: auto;
    overflow:unset;
}
#progress-body-center .progress-group .fail-message > .txt {
	margin:0;
	padding:0;
	text-align:left;
}
#progress-body-center .progress-group .fail-message > .more {
    display: block;
	cursor: pointer;
    position: absolute;
    right: 0;
	top:0;
    bottom: 0;
    width: 30px;
    height: auto;
    padding:0;
    background: #FCC;
    color: #FFF;
    line-height: 14px;
	transition:all 150ms ease;
}
#progress-body-center .progress-group .fail-message > .more:before,
#progress-body-center .progress-group .fail-message > .more:after {
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:0;
	text-align:center;
	content:'\F0DD';
	font-family:FontAwesome;
	padding: 0;
	margin:0;
	font-size:18px;
	line-height:100%;
}
#progress-body-center .progress-group .fail-message > .more:after {
	display:none;
	top:3px;
	content:'\F0D8';
}
#progress-body-center .progress-group .fail-message.opened > .more:before { display:none; }
#progress-body-center .progress-group .fail-message.opened > .more:after { display:block; }
#progress-body-center .progress-group .fail-message:hover { border-color:#F66; }
#progress-body-center .progress-group .fail-message:hover > .more { background:#F66; }
.err-box {
	margin:0 0 15px 0;
	min-height:100px;
	text-align:center;
}
#workerErrorInfo {
	display:block;
	position:relative;
	margin:0 0 15px 0;
	padding:15px;
	border-radius:5px;
	font-size:90%;
}
#workerErrorInfo > .txt {
	display:inline-block;
	float:left;
	width:calc(100% - 120px);
}
#workerErrorInfo .server-error {
    margin: 5px 0;
    color: #600;
}
#workerErrorInfo > .txt > a {
	color:inherit;
	text-decoration:underline;
}
#workerErrorInfo > .txt > a:hover {
	color:#C33;
	text-decoration:underline;
}
#retryInstantiateBtn {
	display: inline-block;
    font-weight: bold;
	font-size:90%;
    margin: 0 0 0 10px;
    padding: 0;
	letter-spacing:0.5px;
    width: auto;
	float:right;
	color:#C33;
	text-align:center;
	text-decoration:none;
	transition:all 150ms ease;
	opacity:0.5;
}
#retryInstantiateBtn > i {
	display:block;
	border-radius: 5px;
	background-color: #C33;
	color:#FFF;
	font-size:150%;
	margin:0 0 10px 0;
	padding:10px;
	transition:all 150ms ease;
}
#retryInstantiateBtn:hover { opacity:1; }
#retryInstantiateBtn:hover > i { transform:scale(1.1); }

@media(max-width:520px){
	#workerErrorInfo {
		border-radius:0;
		margin:0 5px 5px 5px;
	}
	#workerErrorInfo > .txt {
		display: block;
		float: none;
		width:100%;
	}
	#retryInstantiateBtn {
		float:none;
		clear:both;
		margin:10px auto 0 auto;
		display:block;
		width:50%;
	}
}

.input-group #bundles-drop-down,
.input-group #bundles-drop-down:focus,
.input-group #bundles-drop-down:active,
.input-group #bundles-drop-down:visited,
.input-group #bundles-drop-down:hover,
.bundle-group input,
.bundle-group input:focus,
.bundle-group input:active,
.bundle-group input:hover { border-color:#E3E3E3 !important; }

.input-group #bundles-drop-down {
	border-left:none;
    box-shadow: none;
    outline:none;
	z-index:10;
    border-radius:0 3px 3px 0;
}
.dd-group .input-group-input {
    margin-bottom:0;
    margin-right:0;
    border-right:none;
}
#bundles-dropdown {
	left:unset;
	right:0;
	max-height:350px;
	overflow:auto;
	width:100%;
}

.bundle-group input { z-index:1; }

.form-group:not(.not-valid) .input-group:hover #bundles-drop-down,
.form-group:not(.not-valid) .input-group:hover #bundles-drop-down:focus,
.form-group:not(.not-valid) .input-group:hover #bundles-drop-down:active,
.form-group:not(.not-valid) .input-group:hover #bundles-drop-down:visited,
.form-group:not(.not-valid) .input-group:hover #bundles-drop-down:hover,
.form-group:not(.not-valid) .input-group:hover input,
.form-group:not(.not-valid) .input-group:hover input:focus,
.form-group:not(.not-valid) .input-group:hover input:active,
.form-group:not(.not-valid) .input-group:hover input:hover,
.form-group:not(.not-valid) #bundle-input-group:hover .form-control { border-color:#CCC !important; }

.bundle-group.not-valid .caret { border-top-color:#F00; }

.input-group.not-valid #bundles-drop-down,
.input-group.not-valid #bundles-drop-down:focus,
.input-group.not-valid #bundles-drop-down:active,
.input-group.not-valid #bundles-drop-down:visited,
.input-group.not-valid #bundles-drop-down:hover,
.bundle-group.not-valid input,
.bundle-group.not-valid input:focus,
.bundle-group.not-valid input:active,
.bundle-group.not-valid input:hover,
#bundle-input-group.not-valid .form-control { border-color:#F00 !important; }

@media(max-width:520px){
	.bundle-group-out { padding:0; margin:0 -10px 10px -10px; }
	.bundle-group { width:100%; }
	.bundle-group .input-group-addon {
		display:table-caption;
		width:100%;
		text-align:left;
		margin:5px 0 0 0;
		line-height:110%;
		padding:4px 10px;
		border:none;
		background:linear-gradient(to bottom,#EEE, #e3e3e3);
		color:#777;
		border-radius:4px 4px 0 0;
	}
	.bundle-group .form-control,
	.bundle-group  .unput-group-addon,
	.bundle-group  .input-group-btn {}
	.bundle-group input { display:inline-block; }
}
.err-box .error .fa { margin-right:10px; }
.err-box a:not(.btn) {
	color:#777;
	text-decoration:underline;
}
.err-box a:not(.btn):hover { color:#333; }
.err-box .details { 
	font-size:14px;
	color:#333;
	line-height:130%;
	word-break:break-all;
	text-align:left;
}
.err-box a.btn {
	padding:5px 10px;
	font-size:14px;
	line-height:130%;
	height:auto;
	width:auto;
	margin:10px;
}

.instantiate .form-body {
	padding: 30px 10% 10px 10%;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
	transition:all 250ms ease;
}

/*** Block Statuses ***/
.block-status [class^="block-"] {
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 6px;
}
#select-items-step .form-group > label { 
	min-width:150px;
	float:left;
}
section.instantiate .block-status {
    font-size: 12px;
    font-family: monospace;
	font-weight: normal;
	margin-left:5px;
	padding: 1px 4px;
}
.block-status > span { display:inline-block; }
.block-status .block-not-instantiated-color {
    background: #91AAFB;
    background: -moz-linear-gradient(left, #91AAFB 0%, #78B1f8 100%);
    background: -webkit-linear-gradient(left, #91AAFB 0%, #78B1f8 100%);
    background: linear-gradient(to right, #91AAFB 0%, #78B1f8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endcolor', GradientType=1);
}
.block-status .block-not-paid-color { background: #C96; }
.block-status .block-instantiate-failed-color { background: #C33; }
.block-status .block-not-supported-color { background: #CCC; }

.block-status .block-instantiated-color,
.block-status .block-instantiate-in-queued-color,
.block-status .block-instantiate-in-process-color {
    background: #7FD5BB;
    background: -moz-linear-gradient(left, #7FD5BB 0%, #80D5DE 100%);
    background: -webkit-linear-gradient(left, #7FD5BB 0%, #80D5DE 100%);
    background: linear-gradient(to right, #7FD5BB 0%, #80D5DE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endcolor', GradientType=1);
}
span > .block-type {
    background: #e29689;
    background: -moz-linear-gradient(left, #e29689 0%, #b362b0 100%);
    background: -webkit-linear-gradient(left, #e29689 0%, #b362b0 100%);
    background: linear-gradient(to right, #e29689 0%, #b362b0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endcolor', GradientType=1);
}
.animate-in { display: block; }
.btn.btn-primary.red {
    background: #DD0808;
    border: 2px solid #DD0808;
}
    .btn.btn-primary.red:hover {
        background: #ffffff;
        color: #DD0808;
    }
    .item h5 {
        color: #4c525a;
        font-size: 14px;
        font-weight: normal;
    }
.right-box {
    border-left: solid 1px #e5e6e9;
    padding: 8px 0 0 5px;
    margin-left: 10px;
    text-align: center;
}
.quick-links { margin-bottom: 30px; }
.line {
    background: #888888;
    border-color: #42b129;
}
#create-button img,
#previous-button img,
.create-tempalte-done .btn img { height:13px; }
#cancel-button:hover { color: black; }
.distant { margin-top: 10px; }

@media (min-width: 768px) {
    .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
    }
    .sidebar-nav .navbar ul {
        float: none;
        display: block;
    }
    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }
    .sidebar-nav .navbar li a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

.sidebar-nav {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
.screenshot {
    max-height: 256px;
    min-height: 128px;
    max-width: 196px;
    min-width: 96px;
}
    .template_logo.small {
        height: 24px;
        width: 24px;
        margin: 5px 10px 0 0;
    }
.max {
    height: 240px;
    margin-top: 10px;
}
.platform-type-filter { text-align: left !important; }
.form-check { margin-bottom: 9px; }
.categories-filter .form-check-label { margin-bottom: 9px; }
.form-check-label {
    font-weight: 500;
    padding: 0px 10px 0 0;
    margin: 0;
}
.status-type-filter { text-align: left !important; }
.search-button { cursor: pointer; }
    .search-button:hover { border: 1px solid #66afe9; }

@media (max-width: 768px) {
    .m-auto-xs { margin: 0px auto; }
    #edit-button, #delete-button { margin-left: 0; }
    #projectHeader {
        position: absolute;
        top: 90px;
        left: -84px;
        margin: 0;
    }
    .deploy-window { margin-top: 20px !important; }
    .fa.platform { margin-right: 20%; }
    .max {
        height: 200px;
        margin-top: 10px;
    }
    .row.text-center > div {
        display: inline-block;
        float: none;
    }
    .sidebar-nav { margin-top:0; }
    .filter-message { margin-top: 0; }
}

@media (min-width: 768px) and (max-width: 992px) {
    .deploy-window { margin-top: 20px !important; }
    .fa.platform { margin-right: 12%; }
    .max {
        height: 200px;
        margin-top: 10px;
    }
    .project_logo {
        height: 80px;
        width: 80px;
    }
    .sidebar-nav { margin-top: 70px; }
    .filter-message { margin-top: 160px; }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .deploy-window { margin-top: 20px !important; }
    .max {
        height: 240px;
        margin-top: 10px;
    }
    .project_logo {
        height: 86px;
        width: 86px;
    }
    .sidebar-nav { margin-top: 70px; }
    .filter-message { margin-top: 160px; }
}

.exit {
    font-size: 22px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
}
.icon-refresh-animate {
    animation-name: rotateThis;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotateThis {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}
.push-status { width: 100%; }
.push-get-load {
    font-size: 18px;
    margin-top: 11px;
    margin-right: 10px;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    cursor: pointer;
}
.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.push-note {
    float: right !important;
    font-size: 10px;
}
.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
    .fileinput-button i, .fileinput-button span { color: #fff; }
    .fileinput-button input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 200px !important;
        direction: ltr;
        cursor: pointer;
    }
label.control-label {
    display: block;
	position:relative;
}
label.control-label.req:before {
	content:'*';
	font-size:120%;
	line-height:100%;
	color:rgba(200,0,0,0.75);
	position:absolute;
	left:3px;
	top:10px;
}
.visitors { table-layout: fixed; }
    .visitors td { overflow-x: scroll; }
    .visitors::-webkit-scrollbar { display: none; }
.report-app {
    font-weight: 400;
    font-size: 11px;
    margin-top: -15px;
}
.question-box {
    margin-bottom: 10px;
    border: 1px solid #ccc;
}
.answer-box {
    margin-top: 5px;
    min-height: 0 !important;
}
#modal-bundle-url:focus, #modal-bundle-url:hover {
    border: 2px solid #e3e3e3;
    box-shadow: none;
    outline: 0 none;
}
#modal-git-url:focus, #modal-git-url:hover {
    border: 2px solid #e3e3e3;
    box-shadow: none;
    outline: 0 none;
}
.buildversion-tooltip {
    position: absolute;
    display: inline-block;
    top: 15px;
    right: -3px;
}
    .buildversion-tooltip.ios {
        position: absolute;
        display: inline-block;
        top: 40px;
        right: 20px;
    }

    .buildversion-tooltip .buildversion-tooltiptext {
        visibility: hidden;
        width: 220px;
        bottom: 100%;
        margin-left: -110px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 5px;
        position: absolute;
        z-index: 3;
    }
    .buildversion-tooltip:hover .buildversion-tooltiptext { visibility: visible; }
.customInputs .row > .buildicon {
    padding: unset;
    margin-left: 10px;
}
    .customInputs h2 {
        text-align: center;
        margin-bottom: 10px;
    }
.image-grid {
    border: 1px solid #e3e3e3;
    margin: 0 0 5px;
    padding: 10px;
    border-radius: 3px;
    flex: 1 1 calc(33.3333% - 10px);
    flex-shrink: 1;
    flex-grow: 0;
}

    .image-grid label.control-label {
        display: block;
        cursor: pointer;
        padding: 6px;
        margin: 10px 0 0;
        border-radius: 3px;
        letter-spacing: .7px;
        border: solid 2px #e3e3e3;
        background: #fff;
    }

    .buildicon .image {
        display: inline-block;
        width: 40px;
    }

    .buildicon.no-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px dashed #e3e3e3;
        background: #fff;
        position: relative;
        display: block;
    }

        .buildicon.no-img label {
            position: absolute;
            left: 0;
            top: 8px;
            width: 40px;
            height: 40px;
            text-align: center;
            color: #515151;
            font-weight: 500;
            font-size: 10px;
            line-height: 1;
            text-decoration: none;
        }

.img-upload-btn.disabled {
    color: #ccc;
    font-style: italic;
}

.img-upload-btn.disabled:hover{
    cursor:not-allowed;
}

.my_project_details {
    padding: 0;
}

    .my_project_details .btn_zq {
        color: inherit;
    }

@media (max-width:910px) {
    .buildicon {
        float: none;
        margin-top: 80px;
    }
}

@media (max-width:768px) {
    .buildversion-tooltip .buildversion-tooltiptext {
        margin-left: -210px;
    }
}

@media (max-width: 540px) {
    .image-grid {
        text-align: center;
        border: 1px dashed #e3e3e3;
        margin: 5px;
        padding: 10px;
        border-radius: 3px;
        flex: 1 1 45%;
    }
}

/*** Edit Template FAQ Modal ***/
#faqsList {
    padding: 0;
    list-style: none;
}

    #faqsList li {
    }

/*** My Project ***/
.disable-block {
    padding: 20px;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .disable-block:after {
        content: 'Activate plan to enable these features.';
        text-align: center;
        font-weight: bold;
        text-decoration: underline;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        pointer-events: all;
        background: rgba(255, 255, 255, .8);
    }

.template-screenshot-edit {
    display: inline-block !important;
}

/*** Project Library Progress ***/
.pl-progress {
    position: -webkit-sticky;
    position: sticky;
    z-index: 9;
    top: 60px;
}

    .pl-progress ul {
        margin: 25px 10px 0;
        padding: 0;
        list-style-type: none;
        color: #999;
    }

    .pl-progress li {
        padding: 10px 0;
    }

    .pl-progress li.current {
        color: #333;
        box-shadow: inset 0 -1px 0 #333;
    }

        .pl-progress li .badge {
            font-size: 10px;
            color: #aaa;
            background: #eee;
            box-shadow: inset 0 1px 2px #ccc;
            border-radius: 2px;
        }

.icon-unity {
    height: 44px;
    margin: 12px auto;
}

.CodeMirror {
    border: solid 1px #e3e6e9;
}

.panel-disabled * {
    pointer-events: none;
    opacity: .7;
}

#create-template-form {
    min-height: 60vh;
}

    #create-template-form .repos-checkox-label {
        font-weight: normal;
        padding-left: 30px;
    }

    #create-template-form .js-repo-checkbox {
        margin: 0 10px 0 -29px !important;
        outline: none;
    }

.sticky-footer {
    position: -webkit-sticky;
    position: sticky;
    z-index: 9;
    background: rgba(245, 246, 249, .9);
    padding-bottom: 10px;
    bottom: 0px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/*** Create Template Done ***/
.create-tempalte-done .template-icon,
.create-tempalte-done .template-cover {
    padding: 3px;
}

.create-tempalte-done .template-cover {
    width: 56px;
}
.create-tempalte-done .alert { margin-bottom: 10px; }

/*** Watch Video Modal ***/
#watch-video .close {
    opacity: 1;
    float: left;
}
#watch-video .close span { color: #fff; }

/* --- Instantiate project ---> */
.main-alert { text-align:center; }
.vt {
	margin: 0;
	padding: 0;
}
	.vt > .vt-header {
		display:block;
		float:none;
		clear:both;
		margin:0 0 15px 0;
		border-top:solid 2px rgba(0,0,0,0.2);
		padding:15px 0 0 0;
	}
	.vt:first-child > .vt-header {
		padding-top:0;
		border-top:none;
	}
		.vt > .vt-header > .vt-icon {
			height:64px;
			width:auto;
			margin: 0 15px 7px 0;
			float: left;
			border-radius: 10px;
		}
		.vt > .vt-header > .vt-txt { font-size:90%; }
	.vt > .vt-tabs {
		display: inline-block;
		float: left;
		width: 200px;
	}
		.vt > .vt-tabs > .vt-tab {
			display: block;
			margin: 0 0 15px 0;
			padding: 15px 20px;
			font-size: 120%;
			line-height: 100%;
			font-weight: bold;
			color: #999;
			text-decoration: none;
			border-left: solid 3px transparent;
			transition: all 300ms ease;
			cursor: pointer;
		}
		.vt > .vt-tabs > .vt-tab.disabled { display:none; }
			.vt > .vt-tabs > .vt-tab > .error {
				display: block;
				color: #C66;
				font-size: 0;
				line-height: 0;
				margin: 0;
				padding: 0;
				transition: all 250ms ease;
			}
			.vt > .vt-tabs > .vt-tab.not-valid > .error {
				color: #C66;
				font-size: 13px;
				line-height: 100%;
				transition: all 250ms ease;
			}
			.vt > .vt-tabs > .vt-tab.selected {
				border-left-color: #333;
				color: #333;
				background: linear-gradient(to right, #DDD, transparent);
			}
			.vt > .vt-tabs > .vt-tab.not-valid {
				color: #C99;
				border-left-color: #C00;
			}
			.vt > .vt-tabs > .vt-tab.selected.not-valid {
				color: #C00;
				border-left-color: #C00;
			}

	.vt > .vt-datas {
		display: inline-block;
		float: left;
		min-width: 200px;
		width: calc(100% - 200px);
		margin: 0;
		padding: 0;
		background: #f5f6f9;
	}
		.vt > .vt-datas > .vt-data {
			display: block;
			min-height: 200px;
			margin: 0;
			padding: 0 15px 15px 15px;
		}
		.vt > .vt-datas > .vt-data.disabled { display:none; }
			.vt > .vt-datas > .vt-data .form-group .error {
				display: block;
				height: 0;
				margin: 3px 0 0 0;
				padding: 0;
				line-height: 0;
				font-size: 0;
				transition: all 250ms ease;
			}
			.vt > .vt-datas > .vt-data .form-group.not-valid .error {
				height: 20px;
				line-height: 14px;
				font-size: 90%;
			}
			.vt > .vt-datas > .vt-data .form-group.not-updated textarea,
			.vt > .vt-datas > .vt-data .form-group.not-updated input {
				border-left-width: 3px;
				border-left-color: orange;
				transition: all 250ms ease;
			}
			.vt > .vt-datas > .vt-data .form-group.not-valid textarea,
			.vt > .vt-datas > .vt-data .form-group.not-valid input {
				border-left-width: 3px;
				border-left-color: #C00;
				transition: all 250ms ease;
			}
/* <--- Instantiate project --- */

/* >--- Block Features --- */
.feature-list .feature-list__label {
    font-weight: 400;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 3rem;
    padding: .7rem 1.2rem .7rem 1rem;
    margin: 0 .2rem .2rem 0;
    position: relative;
}

    .feature-list .feature-list__label:hover {
        color: #333;
        background: #e7f7ff;
        border: solid 1px #d7e7ee;
        cursor: pointer;
    }

.feature-list .feature-list__icon {
    height: 1.4rem;
    width: 1.4rem;
    margin: -.5rem .5rem -.5rem 0;
    fill: #333;
}

    .feature-list .feature-list__icon--large {
        height: 2.4rem;
        width: 2.4rem;
        margin: 0;
    }

.feature-list .feature-list__description {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: .8rem;
    margin-left: .5rem;
    display: none;
}
    .feature-list .feature-list__label:hover .feature-list__description { display: block; }
.feature-list .feature-list__label .feature-list__radio { opacity: .01; }
.feature-list .media-left { float: left; }
.feature-list .media-heading { margin-bottom: 15px; }
.feature-list .media-body {
    padding-top: 10px;
    width: calc(100% - 60px);
    float: right;
}

.feature-list .edit-setting {
    width: 100%;
    overflow: auto;
    font-size: 12px;
}

/*** Active State ***/
.feature-list .feature-list__label--active {
    color: #fff;
    background: #77c924;
    border-color: #77c924;
}

.feature-list .feature-list__label--active,
.feature-list .feature-list__label--active:hover {
    color: #fff;
    background: #77c924;
    border-color: #77c924;
}

    .feature-list .feature-list__label--active .feature-list__icon { fill: #fff; }

/*** Danger Status ***/
.feature-list__label--danger {
    color: #ff0000;
    background: #fff;
    border-color: #ebccd1;
}

.js-add-feature-modal-error { padding: 10px; }

/*** FEATURE LIST - Panel Buttons ***/
.js-feature-list .js-save-customization-feature-btn {
    margin-left: 60px;
    opacity: 1;
}
.js-feature-list .js-save-customization-feature-btn.disabled { opacity: 0; }
.js-feature-list .js-remove-feature-btn { display: none; }
.js-feature-list .panel:hover {
    -webkit-box-shadow: 0 5px 25px rgba(0,0,0,.05);
    -moz-box-shadow: 0 5px 25px rgba(0,0,0,.05);
    box-shadow: 0 5px 25px rgba(0,0,0,.05);
}
.js-feature-list .panel:hover .js-remove-feature-btn { display: block; }

/***  loading-page ***/
.loading-page {
	padding:30px 0 50px 0;
	text-align:center;
}
#instProgressModalBodies .loading-page {
	padding:30px 0 0 0;
}
.loading-page .t { margin-top:10px; }
.loading-page .fa {
	font-size: 30px;
	color:#CCC;
}

#waitingPostAction.loading-page {
	padding:0 0 10px 0;
}

/*** page-loader ***/
.page-loader { height: 30px; }

    .page-loader .circular {
        -webkit-animation: bundle-loader-rotate 2s linear infinite;
        -moz-animation: bundle-loader-rotate 2s linear infinite;
        -o-animation: bundle-loader-rotate 2s linear infinite;
        animation: bundle-loader-rotate 2s linear infinite;
        height: 100%;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        -o-transform-origin: center center;
        -moz-transform-origin: center center;
        transform-origin: center center;
        width: 100%;
    }

    .page-loader .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        -webkit-animation: bundle-loader-dash 1.5s ease-in-out infinite;
        -o-animation: bundle-loader-dash 1.5s ease-in-out infinite;
        -moz-animation: bundle-loader-dash 1.5s ease-in-out infinite;
        animation: bundle-loader-dash 1.5s ease-in-out infinite;
        stroke-linecap: round;
        stroke: #2fcd70;
    }

.js-insert-repos { margin:15px 0 0 0;}

@-webkit-keyframes bundle-loader-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes bundle-loader-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes bundle-loader-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes bundle-loader-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes bundle-loader-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}

@-moz-keyframes bundle-loader-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}

@-o-keyframes bundle-loader-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}

@keyframes bundle-loader-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@media(min-width:800px){
	#progress-body-center.blocks-count-1 { padding-top:30px; }
	#progress-body-center.blocks-count-2 { padding-top:10px; }
}

@media(max-width:1200px){

	#progress-body-center .progress-group .fail-message {
		margin:5px 0 0 0;
		width:100%;
	}
}

@media(max-width:1024px) {
	.instantiate .form-body { padding: 30px; }
}

@media(max-width:800px) {
	.alert.i-big {
		padding: 10px 10px 10px 40px;
		min-height: 44px;
		font-size:90%;
		line-height:130%;
	}
	.alert.i-big > .i {
		font-size: 18px;
		line-height: 12px;
		left: 15px;
		top: 15px;
	}
	#progress-body-left { display:none; }
	#progress-body-right {
		display:block;
		width:100%;
		margin:0;
		padding:10px 0 0 0;
		float:none;
		clear:both;
		text-align:center;
	}
	#inst_progress .btnsqr {
		display: block;
		background:#42b129;
		color:#FFF;
		padding: 0;
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		color: #999;
		border-radius:3px;
		text-decoration:none;
		text-align:left;
	}
	#inst_progress #btnGoToProjR {
		color:#FFF;
		font-weight:bold;
		letter-spacing:0.5px;
	}
	#inst_progress #btnGoToProjR:hover { transform:scale(0.95); }
	#inst_progress #btnGoToProjR > i {
		margin:0 10px 0 0;
		background: none;
		border:none;
		box-shadow:none;
		width:auto;
		height:auto;
		line-height:inherit;
		font-size: 14px;
	}
	#progress-body-center {
		display:block;
		width:auto;
		float:none;
		clear:both;
		text-align:center;
		padding:0;
		border-bottom:solid 1px #CCC;
	}
	#progress-body-center .progress-group { text-align:center; }
	#progress-body-center .progress-group .lbl {
		float: left;
		width: 30%;
		font-size:13px;
		line-height:20px;
		margin:0;
		padding:0;
	}
	#progress-body-center .progress-group .progress {
		float:left;
		width:40%;
		margin:0;
	}
	#progress-body-center .progress-group .status {
		width:30%;
		margin:0;
		padding:0 0 0 10px;
		float: right;
		font-size:13px;
		line-height:20px;
	}
	#bottom-buttons {
		margin-top: 0;
	}
	#inst_progress .btnsqr,
	#bottom-buttons .btn {
		width:calc(100% - 30px);
		margin:7px 15px;
		font-size:14px;
		padding: 7px 20px;
		text-align:left;
	}
	#bottom-buttons .btn:hover { transform:scale(0.95); } 
	#progress-body-center .progress-group .fail-message {
		margin:5px 0 0 0;
		width:100%;
	}
	#bottom-buttons .btn.reinst { display:block; }
}
@media(max-width:600px) {
	#inst_progress .form-wrap { border-radius:0; margin:0; }
	.instantiate .form-body {
		display:block;
		padding:15px;
	}
	#project_form .form-group,
	#inst_progress .form-group { margin-bottom:15px; }
	#loading-body .waiting-worker { min-height:100px !important; }
	#progress-body-center { padding-top:15px; }
	#progress-body-center .progress-group .fail-message {
		margin: 10px 0 0 0;
		width:100%;
	}
}

@media(max-width:520px){
    #main-view .component { padding:0; background:none; border:none; }
    #main .component { padding:0; background:none; border:none; }
    #main .sticky-footer {
        margin:15px -15px;
        padding:15px 15px 0 15px;
    }
    #main .sticky-footer > .btn {
        margin-top: 5px;
        margin-bottom: 15px;
    }
	#project_form .form-wrap {
		margin:0 -15px;
		border-radius:0;
	}
	.instantiate .form-header span { font-weight:bold; }
	.instantiate .form-header span:not(.is-active) { display:none; }
	#project_form .step-buttons { margin-left:0;margin-right:0; }
	#project_form .form-body label.control-label {
		display:block;
		padding:0;
		color:#999;
		font-size:90%;
		margin:0 0 5px 0;
	}
	#project_form #init-step .form-group > label.control-label { padding:0 15px; }
	#project_form .form-body#select-items-step label.control-label { margin:5px 0 10px 0; }
	#project_form .form-body#select-items-step label.control-label:after { content:""; }
	.vt > .vt-tabs {
		display:block;
		width:100%;
		margin:0;
		float:none;
	}
	.vt > .vt-tabs > .vt-tab {
		display:inline-block;
		width:30%;
		margin:0;
		padding:5px;
		font-size:16px;
		line-height:120%;
	}
	.vt > .vt-tabs > .vt-tab.selected.not-valid {
		border:none;
		border-top: solid 2px #C00;
	}
	.vt > .vt-datas {
		display:block;
		float: none;
		min-width: 200px;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.vt > .vt-tabs > .vt-tab.disabled,
	.vt > .vt-datas > .vt-data.disabled { display:none; }
	.vt > .vt-datas > .vt-data .form-group > div { padding:0; }

	#project_form label.control-label.req { padding-left:10px; }
	#project_form label.control-label.req:before { top:0; }
}
/* MyProjLib block [Repository DD] */
#repo-group {
    width: 100%;
    margin:0;
}
#repo-group:after {
    content:'.';
    display:block;
    width:0;
    height:0;
    margin:0;
    padding:0;
    font-size:0;
    line-height:0;
    clear:both;
    float:none;
    color:transparent;
}
#repo-lbl {
    display:block;
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;
    height:40px;
    line-height:40px;
    padding:0 3px 0 7px;
}
#repo-input-group {
    display: table;
    width: 58%;
}
#repo-name {
    display: table-cell;
    margin: 0;
    border-radius: 0;
}
#repo-dd-group {
    display: table-cell;
    margin: 0;
}
#repo-dd-group button { border-radius: 0 5px 5px 0; }

@media(max-width:1200px) {
    #repo-lbl {
        display: block;
        width: 100%;
        margin: 0;
        clear: both;
        float: none;
        border: 2px solid #e3e3e3;
        border-bottom: none;
        border-radius: 3px 3px 0 0;
    }
    #repo-input-group {
        display: table;
        width: 100%;
        margin: 0;
        clear: both;
        float: none;
    }
    #repo-name {
        display: table-cell;
        margin: 0;
        border-radius: 0 0 0 3px;
    }
    #repo-dd-group {
        display: table-cell;
        margin: 0;
    }
    #repo-dd-group button { border-radius: 0 0 3px 0; }
}