@import url('../fonts/stylesheet.css');


body {
    font-size: 14px;
    font-family: "Proxima Nova", sans-serif, Arial;
    background-color: #f6f6f6;
    color: #1F2734;
    font-weight:600;
    /* For sticky footer*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    height: 100%;


}
.body-white-bg{background-color: #ffffff;}
html {height: 100%;}
.main-wrapper {
    position: relative;
    top: 0;
    flex: 1 0 auto;
}

.loading-icon {
	margin: 1% auto; display: block; width: initial !important;
}

.spinner, .loader{
    background: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 1500;
	display:none;
}
.spinner img, .loader img{
    margin-left: 50%;
    margin-top: 20%;
}


/* font sizes*/
h3 {font-size:22px}
h4 {font-size:18px}
h5 {font-size: 16px}
h6 {font-size: 14px}
p {font-size:14px;font-weight:400}

.fw-500 {font-weight:500!important}
.fw-600 {font-weight:600!important}
.fw-700 {font-weight:700!important}
/* Header*/
.header_bg {
	background-color: #1F2734;
    padding: 55px 0;
    position: relative;
    border-bottom: 4px solid #ffffff;
}

.header1_logo img {
    width: 110px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	top: 20px;
	z-index:9
}


ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {color:#00B1F3}
a:hover {color:#00B1F3;font-weight:600}
.blue {
    color: #00B1F3;
}


.main-row {margin-top:50px;margin-bottom:2.5rem}
/****** d.alerts ******/

.alert {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    margin: 5px 0;
    display: inline-block;
}
.alert i {margin-right:2px}
.alert-danger i {color: #d23434}
.alert-success i {color: #3f9653}
.alert-info i {color:#1f87c3}


.alert-danger {
    background: #FFF8F8;
    color: #d23434;
    border: 1px solid #ffe5e5;
}
.alert-success {
    color: #3f9653;
    background-color: #e7ffed;
}

.alert-info {
    color: #1f87c3;
    background-color: #d1ecf1;
}


/* BUTTONS*/
button, button:focus, button:active, .btn:focus, .btn:hover {
    outline:none;
    box-shadow:none;
    text-decoration: none!important
}
button {
    padding: 7px 15px;
    text-align: center;
    cursor: pointer;
}
.btn {
    height:40px;
    padding: 5px 25px;
    border-radius:5px;
    font-weight:600;
    line-height: 24px;
    font-size:14px;
}
.btn.add {width:120px}
.btn.small {padding: .4rem 1rem;}
.btn-large {
    padding: .375rem 1.8rem;
    height: 45px;
    width: 180px;
}

.btn i {
    margin-left:5px;
    font-size:12px
}
.btn.disabled, .btn:disabled {
    opacity: .85;
}

.btn-secondary  {
    color:white!important;
    background-color: #1F2734;
    border:1px solid #1F2734;
    border-radius:5px;
    opacity:.95;
    transition: 0.3s;
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #1F2734;
    opacity:1;
    border:1px solid #1F2734;
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #1d2c3a;
    border-color: #404c58;
}

.btn-secondary:not(:disabled):not(.disabled):active {
    background-color:#1F2734!important;
    border:1px solid #1F2734;
    box-shadow:none!important
}

.btn-default  {
    color:#1F2734!important;
    border:1px solid #e0e0e0;
    background-color: #ececec;
    border-radius:5px;
    opacity:.9;
    transition: 0.3s;
}

.btn-default:hover {
    background-color: white;
    opacity:1;
}

.btn-default:not(:disabled):not(.disabled):active {
    background-color:white!important;
    box-shadow:none!important
}


/* Badges arrangement*/



.user-profile{
}

#userName {
    width:50%;
    margin: 0 auto;
    word-break: break-word;
	word-wrap: break-word;
    margin-bottom: 8px;
    font-size:16px
}
#owner_company, #owner_position {font-size:14px}

.bc-user {
    display: flex;
    margin: 0 auto;
    text-align: left;
    justify-content: center;
}

.bc-user.large {width: 80%;}
.bc-user.small {width: 55%;}
.bc-user .user-info {
    margin-right: 10px;
}
.bc-user #userName {
    width:100%;
    margin-bottom:0
}

.bc-user .user-info {
    margin-right: 10px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .bc-user .user-info {flex:1}
    .bc-user .user-profile {flex:6}
 }
.prof-jsp .user-profile {
    width: auto;
    text-align: left;
}
.prof-jsp  .bc-user #userName {
    width: 100%;
    margin-bottom: 0;
}

.container-img {
    width:100px;
    height:100px;
    border-radius:5px;

}
.container-img img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.textarea-title {
    font-size: 13px;
	white-space: normal;
    word-break: break-word;
	word-wrap: break-word;
}
.desc-td{
	font-size: 13px;
	white-space: normal;
    word-break: break-word;
	word-wrap: break-word;
}
.textarea-title p, .desc-td p {
    font-size: 13px !important;
}
.textarea-title.small {
}
.textarea-title-small {
    font-size: 13px;
	white-space: normal;
    word-break: break-word;
	word-wrap: break-word;
}
.textarea-title *, .desc-td *, .textarea-title-small *{width:inherit !important;background:none !important}
.textarea-title p, .textarea-title-small p, .desc-td p, .textarea-title blockquote, .textarea-title-small blockquote, .desc-td blockquote{color:#1F2734 !important;}
.showBdgePage .desc-td {border: none;}
.badge-text {display: none;}
.parent {justify-content: center;}

.parent img,.child img {
	width: 100%;
	height:auto;
	background: white;
	margin: 0;
	box-shadow: none;
	border-radius:10px;
	transition: .2s;
	border: none;
	cursor: pointer;
}

.parent .col-padding {
	padding-right:0;
	padding-left:0;
	margin:5px
}

.badge-bubble table {
   width:100%
}
.badge-bubble img {
	width: 110px;
}

.badge-title {
	display: none;
}

.badge-display {
	width: 130px; height: 130px; text-align: center; margin-left: 35%;
}

.badges .badge-text {
	font-size: 11px; line-height: 1; color: white; font-weight: 400;
}



/* Badge bubble */

.badge-bubble .inner, #showContent-2.badge-bubble {
	width: 100%;
    position: relative;
    height: auto;
    background-color: #fff;
    box-shadow: 0 1px 11px -1px rgb(214, 214, 214);
    border-radius: 10px;
	padding: 5px 20px;
	margin-left: auto;
    margin-right: auto;
}
#showContent-2 .badge-bubble {
    background-color: #fff;
	padding: 13px 13px;
	border-radius: 5px;
	margin-left: 25px;
    box-shadow: 0 1px 11px -1px rgb(214, 214, 214);
}
.badge-bubble h5 {
	text-align: center;
    margin-top: 10px;
    width: 100%;
    background: #daf4ff;
    padding: 10px 20px;
    color: #00B1F3 !important;
    border-radius: 5px;
    border: none;
    font-size: 14px !important;
    font-weight: bold;
    word-break: break-word;
	word-wrap: break-word;
}
.badge-bubble .desc {
    font-size: 14px;
    color: #1F2734;
    font-weight: 600;
}
.badge-bubble .cert {
	text-transform: uppercase;
}

.badge-bubble form {
    margin-bottom: 2%;
	margin-top: 2%;
	width: 100%;
	word-break: break-word;
	word-wrap: break-word;
    border-radius: 3px;
    color: #1F2734;
}
.badge-bubble tr td:first-child{
	text-align: left;
}
.badge-bubble td:first-child {
    font-weight: 600;
    width: 205px;
}
.badge-bubble td:nth-child(2) {
	padding: 3px 3px 3px 12px;
}
.badge-bubble td:nth-child(2n) {
    font-weight: 500;
}
#showContent-2.badge-bubble td:first-child {
	width: 80px;
}

.badge-bubble table td {
    font-size: 13px;
    padding: 3px;
    vertical-align: top;
    word-spacing: 1px;
    color: #1F2734;
    word-break: break-word;
	word-wrap: break-word;
}

/* ERROR ROBOT*/
.error img {
    width: 110px;
}

.error-bubble {
    display: inline-block;
    position: relative;
    height: auto;
    background-color: #fff;
    box-shadow: 0 1px 11px -1px rgb(214, 214, 214);
    border-radius: 10px;
}

.error_text {
    padding: 10px;
    text-align: left;
    line-height: 1.5em;
	max-width: 500px;
}

.error_text p {	margin-bottom: 0;}

.tri-right.left-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0;
    bottom: auto;
    border-style: solid;
    border-width: 12px;
    border-color: #fff #fff transparent transparent;
}


/* Change Password - reset password*/
.pw-wrap {
    background: white;
    border-radius: 10px;
    margin-top: 3rem;
}
h1#page-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 15px 30px;
    color: #1F2734;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.pw-wrap .form-section:first-child {
    border-top: none;
}
.pw-wrap .form-section {
    padding: 20px 30px;
    border-top: 1px solid rgb(230, 230, 230);
}

.pw-wrap .form-item label {
    margin-right: 60px;
}
.col-form-label {
    display: block;
    padding-bottom: calc(.055rem + 1px);
    color: #1F2734;
    margin: 2px 0;
}
.col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}
label {
    font-weight: 600;
}
input[type=text], input[type=password], input[type=email] {
    color: rgb(166, 166, 166);
    background-color: rgb(230, 230, 230);
    border: 1px solid rgb(230, 230, 230);
}

.line_input1,
textarea.line_input1 {
	width: 100%;
    border: 1px solid #b0b0b0;
    border-radius: 5px;
    height: 40px;
    padding: 0 10px;
    font-weight: 500;
}

.line_input1:hover,
.line_input1.active,
.line_input1:focus,
textarea.line_input1:hover,
textarea.line_input1.active,
textarea.line_input1:focus
 {
    border: 1px solid #00B1F3;
    box-shadow: 0 0 10px 2px rgba(0, 177, 243, 0.2);
    background-position: 0 0;
    outline: none;
}




.pass-hint-box {
    border: none;
    padding: 15px 20px;
    background: #fbfbfb;
    margin: 10px 0;
}

/* SHOWBADGE*/
#showContent-1 input.line_input1 {width:75%}
#showContent-1 #url{text-align:center;}
#showContent-2 {
    margin-top: 0;
}

.tri-right.left-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0;
    bottom: auto;
    border: 12px solid;
    border-color: #fff #fff transparent transparent;
}

.preview_container img {
	margin: 0 auto; display: block;
}

.copy {
	display:block
}

.copy  a {
	background-color: #daf4ff;
    padding: 10px;
	border-radius: 5px;
	transition:.3s;
	cursor: pointer;
}
.copy  a i {color:#00B1F3;}
.copy a:hover {
	background-color: #00B1F3;
}
.copy  a:hover i {color:white;}

/* Hierarchy*/
.divider {position:relative;margin-top: 20px;
    margin-bottom: 20px;}
.divider .alert {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
}

.selected-badge {
    background: white;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.selected-badge {
    display: inline-block;
    border: none;
}
.child-badge {
    margin-top: 5px;
}

.parent-badge .badges-list, .child-badge .badges-list {
    background:white;border-radius: 10px;margin-top:8px;
}

.parent-badge .badges-list .box, .child-badge .badges-list .box {
    background:none
}
.selected-badge img {
    width: 80px;
    height: auto;
}
.parent-badge img,
.child-badge img {width:100%}
.scroll-badge {
    max-height:160px;
    overflow-y: auto;
    overflow-x: hidden;
}

.badge-image-title {
    text-align: center;
    font-size: 14px;
    color: #111111;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0;
    font-weight:400;
}

/*MY PROFILE */
#badeges_list {margin-bottom:50px;display: inline-block;padding:5px;}
.badges-list {
    display: inline-block;
    padding: 10px;
    margin: 5px;
	border: 1px solid transparent;
}
.badges-list .box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow:none;
    float:left;
    cursor: pointer;
    border:none;
}

.badges-list .box.extend {
    height: 160px;
    width: 160px;
	margin: 0 auto;
}

.badges-list .box.compact {
    height: 160px;
    width: 160px;
}
.badges-list .box img, .badge-banner {
    height: 160px;
    width: 100%;
    object-fit: contain;
}
.badges-list:hover {
    border:1px solid #e8e8e8
}
.parent-badge .badges-list .box,
.child-badge .badges-list .box {
    border:1px solid white;
    border-radius:8px

}
.parent-badge .badges-list:hover,
.child-badge .badges-list:hover {
    border: 1px solid #e8e8e8;
    border-radius:8px;
}
.hierarchy-container .selected-badge .badges-list .box,
.hierarchy-container .selected-badge .badges-list .box:hover {
    border:none
}
.hierarchy-container .badges-list .box {
    margin: 5px;
    padding: 0;
    background:none;
    border-radius:0
}

.hierarchy-container .selected-badge .badges-list {float:none}
.highlight-selected-badge{
	border: 1px solid #C2C2C2 !important;
	border-radius: 8px !important;
}
/* Footer */

.footer {
    width: 100%;
    flex-shrink: 0;
    background-color: white;
    box-shadow: 0 0 15px 10px #efefef;
    z-index:0;
  }


.footer ul.footer_menu {
    list-style-type: none;
    margin: 0;
    font-size: 0.6875em;
    color: rgb(191, 191, 191);
    text-align: center;
    vertical-align: middle;
}
.footer .footer_menu li:first-child {
    border-left: none;
}
.footer .footer_menu li {
    display: inline;
    padding: 0 12px;
    border-left: 1px solid rgb(191, 191, 191);
    font-size: 13px;
    color: #333;
}
.pub-left-align.pub-view-mode #userName, .pub-left-align.pub-view-mode .bc-user.large{
	width: 100%;
	margin: 0;
	text-align: left;
}
.pub-left-align.pub-view-mode .main-info{
	text-align: left;
}
.pub-left-align.pub-view-mode .badges-list .box.compact{
	height: 160px;
    width: 160px;
}
.pub-left-align.pub-view-mode #badeges_list{
	text-align: left;
}
.hierarchy-body.pub-left-align.pub-view-mode .badges-list .box{margin: 0;}
.hierarchy-body.pub-left-align.pub-view-mode .selected-badge{width: 100%; padding: 0; text-align: left;margin: 5px 0;}
.hierarchy-body.pub-left-align.pub-view-mode .parent{justify-content: left; margin-left: -5px;}
.hierarchy-body.pub-left-align.pub-view-mode .badge-image-title{text-align: left;}
.textarea-title ul, .textarea-title li, .textarea-title-small ul, .textarea-title-small li, .desc-td ul, .desc-td li{list-style: unset;padding: revert;}
.textarea-title ol, .textarea-title-small ol, .desc-td ol{list-style: unset;list-style-type:decimal;}

.show-badge-btn {
	width: max-content;
	display: inline-flex;
	color: white;
	background: #00B1F3;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	padding: 8px 10px;
	max-width: max-content;
	font-weight: bold;
	font-size: 13px;
	margin: 5px;
}

.show-badge-btn i {
	padding-left: 8px;
}

.show-badge-btn:hover {
	color: white;
	text-decoration: none;
	font-weight: bold;
	opacity: .7;
}

/* RESPONSIVE*/

@media (min-width:1441px) {
    .bc-user.small {width: 60%;}
    .badge-bubble {margin-top:3rem}

    .badges-list .box.compact {
        height: 160px;
        width: 160px;
    }

    .badges-list .box.extend  {
        width:160px;
        height:160px
    }
    .parent-badge, .child-badge {max-height: none;}
    .main-row {margin-top:3rem}
    .showbadge-wrap {margin-top:3rem}
}
@media only screen and (min-width: 768px) {
	.prof-jsp  .bc-user #userName, .prof-jsp  .bc-user #owner_company, .prof-jsp  .bc-user #owner_position {
		white-space: normal;
	}
}
@media (max-width: 1440px) and (min-width:768px) {

}
@media (max-width:1024px) {
    .alert {font-size:12px}
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    .parent-badge, .child-badge {max-height: none;}
	.parent .col-padding {
		flex: 0 0 15%;
		max-width: 12%;
    }
    .header_bg {margin-bottom: 20px;}
}


@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
    #showContent-1 input.line_input1 {
        width: 66%;
    }
  }
@media (max-width: 768px) {

    .bc-user.large {width: 90%;}
    .bc-user.small {width: 90%;}

    .badge-bubble td:first-child {
        max-width:190px
    }

    .parent-badge, .child-badge {max-height: none;}
    .showbadge-wrap {margin-top:3rem}
    #showContent-1 input.line_input1 {
        width: 85%;
    }
	.error-bubble {
		margin: 90px 0 25px 0;
	}
	.parent .col-padding {
		flex: 0 0 16%;
		margin:2px
	}
    .pw-wrap {margin-bottom:30px}
    .badges-list .box.compact {
        height: 92px;
        width: 92px;
    }
    .badge-bubble td:first-child {width: 110px;}
	.badges-list .box img, .badge-banner {
		height: 100%;
		width: 100%;
		object-fit: contain;
	}
}

@media (max-width: 767px)  {

    .user-profile, #userName {
        width:100%
    }
    .badges-list .box.extend {
        height: 100px;
        width: 100px;
    }
    .badges-list .box.compact {
        width:100px;
        height:100px
    }

    .divider .alert {
        width: 80%;
        text-align: center;
    }

    .showbadge-wrap {margin-top:1rem}
    #showContent-1 {margin-bottom: 20px;}

    #showContent-2.badge-bubble {
        margin: 0 15px;
        margin-bottom:30px
    }
	.btn-large {
		margin-bottom: 5px;
    	width: 100%;
	}
	.error img {
        width: 125px;
    }

	.error_text p {
	    font-size: 14px;
	}

	.parent .col-padding {
		width:40%
    }
    .badge-bubble, .error-bubble {
        margin-top:2rem;margin-bottom:2rem
    }

    .show-badge .badge-bubble {
        margin-left: 0!important;
    }

    .tri-right.left-in:after {
        left: 45%;
        right: auto;
        top: -10px;
        bottom: auto;
        border-style: solid;
        border-width: 0 12px 12px 12px;
        border-color: transparent transparent #fff transparent;
    }

    .show-badge.tri-right.left-in:after {
        display: none;
    }
    .copy {padding: 0 5px;}

}