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

.longEnough {
    max-height: 220px;
    width: 350px;
    overflow: auto;
  }
/* Creation date: 05/07/2020*/
/****************** BADGECERT ***************/
/* TABLET OF CONTENT */

/******** 1.GENERAL ********/

/****** a.Text - links ******/
/****** b. Colors ******/
/****** c.Buttons ******/
/****** d.alerts ******/
/****** e.Forms ******/
/****** f.Kendo Editor ******/
/****** g.Tables ******/
/****** h.Modals ******/
/****** i.Others ******/

/******** NAVIGATION ELEMENTS ********/
/******** 2. MY BADGES - HIERARCHY ********/
/******** 3. ISSUEBADGECERT- ISSUEBADGECERT VIEW - ISSUEBADGECERT NEW EARNER - ROLLDOWN LIST ********/
/******** 4. MY EARNERS ********/
/******** 5. MY SETTINGS ********/
/******** 6. ANALYTICS ********/
/******** 7. BADGE PORTFOLIO ********/
/******** 8. MY PROFILE ********/
/******** 9. RESPONSIVE ********/


/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 1. GENERAL ///////////////////////*/


body {
    font-size: 14px;
    font-family: Roboto, sans-serif, Arial;
    background-color: #f6f6f6;
    color: #3f4d64;
    font-weight:400;
    /* 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%;}
.spinner {
    background: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 1500;
}
.spinner img {
    margin-left: 50%;
    margin-top: 20%;
}
.spinner-msg{
	text-align: center;
    margin-left: 75px;
    color: #1b8c13f5;
}
ul, li {list-style: none;margin:0;padding:0}

/***** a. Text - links *****/
h3 {font-size:20px}
h4 {font-size:18px}
h5 {font-size: 15px}
h6 {font-size: 14px}
p {font-size:14px}

.fw-400 {font-weight:400!important}
.fw-600 {font-weight:600!important}
.fw-700 {font-weight:700!important}
.w-100 {width:100%}
a {color: #00B1F3;text-decoration: none;cursor: pointer;}
a:not([href]):not([tabindex]):hover, a:hover {text-decoration: underline;}
.td-underline{text-decoration: underline;}
b {font-weight:700}


.d-flex {
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

}
.d-block {display:block}
.d-inline-block {display:inline-block}
.align-center {
    align-items: center;
}
.align-baseline {
    align-items: baseline;
}
.hidden {visibility: hidden;}

.wizard-steps-panel.steps-quantity-4 .step-number.step-3 .number:after {
	display:none;
}
.flex-1 { -webkit-box-flex: 1; -ms-flex: 1;-moz-box-flex: 1;flex:1}
.flex-2 { -webkit-box-flex: 2; -ms-flex: 2;-moz-box-flex: 2;flex:2}
.flex-3 { -webkit-box-flex: 3; -ms-flex: 3;-moz-box-flex: 3;flex:3}
.flex-4 { -webkit-box-flex: 4; -ms-flex: 4;-moz-box-flex: 4;flex:4}
.flex-5 { -webkit-box-flex: 5; -ms-flex: 5;-moz-box-flex: 5;flex:5}

/****** b. Colors ******/
.red {color:#FF4E4E}
.blue {color:#00B1F3}
.green {color: #43af37;}
.black {color:#3f4d64}
.link {color:#00B1F3!important}
/****** c.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 22px;
    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: 205px;
}

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

.btn-primary, .btn-primary:disabled  {
    color:white!important;
    background-color: #00B1F3;
    border:1px solid #00B1F3;
    opacity:.9;
    transition: 0.3s;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #00B1F3;
    opacity:1;
    border:1px solid #00B1F3;
}
.btn-primary-outline  {
    color:#00B1F3!important;
    background-color: white;
    border:1px solid #00B1F3;
    opacity:.9;
    transition: 0.3s;
}

.btn-primary-outline:hover, .btn-primary-outline:focus {
    background-color: #daf4ff;
    opacity:1;
    border:1px solid #daf4ff;
    color:#00B1F3!important
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-outer:not(:disabled):not(.disabled).active {
    background-color:#00B1F3!important;
    border:1px solid #00B1F3;
    box-shadow:none!important;
    color:white!important
}

.btn-secondary  {
    color:#FFFFFF !important;
    background-color:#1F2734;
    border:1px solid #1F2734;
    border-radius:5px;
    opacity:.95;
    transition: 0.3s;
}
.btn-secondary-blue {
    color:#FFFFFF !important;
    background-color:#00B1F3;
    border:1px solid #00B1F3;
    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: #1F2734;
}

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

.btn-default  {
    color:#3f4d64!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
}

.btn-red  {
    color:white!important;
    background-color: #FF4E4E;
    border:1px solid #FF4E4E;
    border-radius:5px;
    opacity:.9;
    transition: 0.3s;
    width:120px;
}

.btn-red:hover {
    background-color: #FF4E4E;
    border:1px solid #FF4E4E;
    opacity:1;
}

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


.btn-outer, .btn-inner  {
    color:#00B1F3!important;
    border:1px solid #00B1F3;
    background-color:white;
    opacity:.9;
    transition: 0.3s;
}

.btn-outer:hover, .btn-inner:hover {
    color:#00B1F3!important;
    background-color: white!important;
    opacity:1;
    border:1px solid #00B1F3;
    box-shadow:none!important

}
.btn-outer:not(:disabled):not(.disabled):active,
.btn-inner:not(:disabled):not(.disabled):active {
    background-color:white!important;
    border:1px solid #00B1F3;
    box-shadow:none!important
}

.btn-rounded-i {
    border-radius: 100%;
    height: 32px;
    width: 32px;
    line-height: 32px!important;
    font-size: 14px;
    text-align: center;
}

.btn-rounded-i.small {
    height: 25px;
    width: 25px;
    line-height: 26px!important;
    font-size: 13px;
}

.btn-rounded-i.blue {
    border:1px solid #daf4ff;
    color:#00B1F3;
    background:#daf4ff;
    transition: .5s;
}

.btn-rounded-i.blue:hover,
.btn-rounded-i.blue:active,
.btn-rounded-i.blue:focus {
    border:1px solid #00B1F3;
    color:#00B1F3;
    background:white
}

.btn-rounded-i.green {
    border:1px solid #cffad9;
    color:#11c73f;
    background:#cffad9;
    transition: .5s;
}

.btn-rounded-i.green:hover,
.btn-rounded-i.green:focus,
.btn-rounded-i.green:active {
    border:1px solid #11c73f;
    color:#11c73f;
    background:white
}

.btn-rounded-i.red {
    border:1px solid #fad4cf;
    color:#FF4E4E!important;
    background:#fad4cf;
    transition: .5s;
}

.btn-rounded-i.red:hover,
.btn-rounded-i.red:focus,
.btn-rounded-i.red:active {
    border:1px solid #FF4E4E;
    color:#FF4E4E!important;
    background:white
}

.square-i-btn {
    font-size:14px;
    cursor: pointer;
    opacity: .9;
    padding:13px;
    border-radius:5px;
}

.square-i-btn.small {
    padding: 8px;
    font-size:12px;
}

.square-i-btn:hover {
    opacity: 1;
}
.square-i-btn.default {
    background:#1F2836;
    color:white
}
.square-i-btn.light {
    background:#00B1F3;
    color:white
}
.square-i-btn.red {
    background:#FF4E4E;
    color:white
}

.btn-upload {
    color: #3f4d64;
    text-transform: none;
    font-size: 14px;
    flex: 0 1 100%;
    padding: 10px;
    border: 2px dashed rgb(201, 218, 232);
    border-radius: 5px;
    background: #F9F9F9;
    opacity: .8;
    transition:.3s;
}
.btn-upload:active {
    color: #3f4d64!important;
    background: #efefef!important;

}
.btn-upload:hover {
    opacity:1
}

.btn-light-blue {
    height:35px;
    background:#daf4ff;
    color: #2b5e71;
    border:none;
    border-radius: 5px!important;
    margin-right:2px
}

.btn-light-blue.active, .btn-light-blue:focus, .btn-light-blue:active {
    color:white;
    background-color: #00B1F3;
    border:none;
}
.btn-light-blue.small {
    padding: 0px 10px;
    font-size: 13px;
}


.clear {
    background:#F5F5F5!important;
    border: 1px solid #e4e4e4;
    color:#3f4d64!important;
}

.clear:focus, .clear:active, .clear:focus, .clear:hover {
    border:1px solid #c3d2da;
    background:white
}

.clear i {color:#00B1F3;margin-right:5px;}
.action-buttons {margin-top:20px;}
.action-buttons .btn {width:125px;}

/* Kendo upload button*/
.k-button.k-state-active,
.k-button:active {
    border-color:#e0e0e0;
    background-color:#e6e6e6;
    box-shadow:none
}
/* Upload button */
.k-upload {border:none;color:#3f4d64}
.k-file-size {font-weight:400;color:#8B9094}
.k-upload-button {
    padding: 10px;
    border: 2px dashed rgb(201, 218, 232);
    border-radius: 5px;
    margin: 0px;
    width: 100%;
    margin-bottom: 20px;
    background:#F9F9F9
}
.k-upload-container {
    position:relative
}
.k-upload .k-button {
    color: #696e76;
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
}
.k-upload-button:hover {
    box-shadow:none;
    background:#F9F9F9
}

.k-upload-sync .k-upload-button {
    margin:0
}

.k-upload-button.k-state-focused {
    box-shadow:none
}
.k-upload-files {
    border:none;
    margin-top: 20px;
    width: 100%;
}
.k-upload-files .k-upload-status {
    top: .8em;
}
.k-upload-files .k-file {
    border-radius:5px;
    cursor: pointer;
    box-shadow:0px 0px 10px 2px #e0e0e0;
    border:1px solid white;
    transition: .5s;
    text-align: left;
}
.k-upload-files .k-file:hover {
    border:1px solid #00B1F3;
}
.k-upload-files .k-i-close {
    color: #00B1F3;
    background: #e3ecf0;
    padding: 10px;
    border-radius: 60px;
}
#custCertfUploadForm .k-upload-files {
    border:none;
    margin-top: 0px;
    width: auto;
	padding-bottom: 0px;
}
#custCertfUploadForm .k-upload-files li{
	width:310px;
}
#custCertfUploadForm .k-upload-files .k-upload-status {
    top: .6em;
}
#custCertfUploadForm .k-upload-files .k-file {
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px #e0e0e0;
    border: 1px solid white;
    transition: .5s;
    text-align: left;
    margin-left: 10px;
    padding: 0px 2px;
	margin-top: 1px;
}
#custCertfUploadForm .k-upload-files .k-file:hover {
    border:1px solid #00B1F3;
}
#custCertfUploadForm .k-upload-files .k-i-close {
    color: #00B1F3;
    background: #e3ecf0;
    padding: 3px;
    border-radius: 60px;
}
#custCertfUploadForm .k-file {
    padding: 0px;
}
#custCertfUploadForm .k-widget {
   display: inline-flex;
   align-items: start;
}
#custCertfUploadForm{
   display: inline-flex;
}
#custCertfUploadForm .k-file-extension-wrapper{
   height: 32px;
}
#certListBtn .cert-list-resp{
	margin-left: 10px;
    border-radius: 5px;
    padding: 1px 5px;
}
.btn-facebook, .btn-twitter, .btn-linkedin {
    color:white!important;
    opacity: .9;
    transition:.3s
}
.btn-facebook i, .btn-twitter i, .btn-linkedin i {margin-right:10px;font-size:16px}
.btn-facebook:hover, .btn-twitter:hover, .btn-linkedin:hover {
    opacity:1
}

.btn-facebook {background:#3b5998}
.btn-twitter {background:#38A1F3}
.btn-linkedin {background:#0072b1}


/****** d.alerts ******/

.alert {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    margin: 5px 0px;
    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;
}


/****** e.Forms ******/

/* Removen Icon Person on Safari*/
input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
  }

/* Removing Clear from form fields IE-10 IE-11*/
input[type=text]::-ms-clear { display: none; }
input[type=email]::-ms-clear { display: none; }

/* Removing the red outline for required field in Firefox*/
:invalid {box-shadow: none;}
:-moz-submit-invalid {box-shadow: none;}
:-moz-ui-invalid {box-shadow:none;}
/* Input placeholder color*/
::placeholder, .crsr-disb ::placeholder{
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#7996BC;
    opacity: 1;
    /* Firefox */
}
::-webkit-input-placeholder, .crsr-disb ::-webkit-input-placeholder{
    /* Chrome/Opera/Safari Edge */
    color:#7996BC;
}
:-ms-input-placeholder, .crsr-disb :-ms-input-placeholder{
    /* Internet Explorer 10-11 */
    color:#7996BC;
}
::-moz-placeholder, .crsr-disb ::-moz-placeholder{
    /* Firefox 19+ */
    color:#7996BC;
}
:-moz-placeholder, .crsr-disb :-moz-placeholder{
    /* Firefox 18- */
    color:#7996BC;
}
::-ms-input-placeholder, .crsr-disb ::-ms-input-placeholder{
    /* Microsoft Edge */
    color:#7996BC;
}
.k-placeholder , .k-placeholder:before{
    text-indent: 3px;
}
input:required:invalid {
    outline: none;
}
.form-group {margin-bottom: 5px}
.info-form {font-size:13px;margin-top:10px;font-weight:400}
label {font-weight:600}
.col-form-label {
    display: block;
    padding-bottom:0px;
    color: #3f4d64;
    margin:2px 0px;
    padding-top: 2px;
}

input[type=radio] {
    margin: 8px;
}

input:hover {
    box-shadow:none
}
.input_group.inline {
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
    align-items: center;
}
input[type=submit] {
    color:white!important;
    background-color: #00B1F3;
    border:1px solid #00B1F3;
    opacity:.9;
    transition: 0.3s;
}
input[type=submit].active,
input[type=submit]:focus,
input[type=submit]:hover {
    /* border-width: 0.1px; */
    background-color: #00B1F3;
    opacity:1;
    border:1px solid #00B1F3;
}
input.line_input1,
textarea.line_input1,
select, .k-multiselect-wrap, .form-control{
	width: 100%;
    border: 1px solid #c3d2da;
    border-radius: 5px;
    height: 40px;
    padding: 0px 10px;
    font-weight: 400;
}


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

input.line_input1.upload_input:hover {
    border: 1px solid #cacaca;
    box-shadow: 0px 0px 10px 2px rgba(167, 167, 167, 0.2);
    background-position: 0 0;
    outline: none;
}

textarea.line_input1.large {
    height: 65px;
    padding: 5px 10px;
}

/* Select field*/


select::-ms-expand  {
    padding: 10px 4px 10px 4px;
    background: rgba(255,255,255,1);
    border-radius: 4px;
    -webkit-border-radius:4px;
    -moz-border-radius: 4px;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #30353f;
}


.k-multiselect {position: relative}
.k-multiselect:after {
    content: "▼";
    position: absolute;
    top: 30%;
    right: 25px;
    font-size: 12px;
}
.k-multiselect.opened:after {
	content: "\25C0";
}
/* Switch */
.on {
    content: url(../img/on.png);
    vertical-align: top;
}
.switch {
    cursor: pointer;
}
.off {
    content: url(../img/off.png);
    vertical-align: top;
}
.onoffswitch {
    position: relative;
    width: 55px;
    padding-left: 0px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.onoffswitch.api {
   margin-top:10px
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    width: 55px;
    /* border: 2px solid #999999; */
    border-radius: 20px;
    margin: 0px;
}
.onoffswitch-inner {
    display: block;
    width: 150px;
    margin-left: -105%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before {
    display: block;
    float: left;
    width: 38%;
    height: 24px;
    padding: 0 0 0 9px;
    line-height: 26px;
    font-size: 12px;
    color: white;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.onoffswitch-inner:after {
    display: block;
    float: left;
    width: 39%;
    height: 24px;
    padding: 0;
    line-height: 26px;
    font-size: 12px;
    color: black;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-right: 20px;
    background-color: #00B1F3;
    color: #FFFFFF;
    border: none;
    border-radius: 28px;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 13px;
    background-color: #c3d2da;
    color: #3f4d64;
    text-align: right;
    border: none;
    border-radius: 28px;
}
.onoffswitch-switch {
    display: block;
    width: 14px;
    height: 14px;
    margin: 5px;
    background: #FFFFFF;
    border: none;
    border-radius: 20px;
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 45px;
    left: 0;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    height: 14px;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
    right: 7px;
    left: 32px;
}
/* Datepicker */
.k-datepicker {
    border: 1px solid #c3d2da;
    border-radius: 5px;
    margin-right:10px;
    background:white;
    height:38px;
    padding: 0px;

}
.k-datepicker:hover, .k-datepicker:focus, .k-datepicker:active,
.k-dropdown .k-state-default:hover, .k-dropdown .k-state-focused,
.k-dropdown-wrap .k-state-focused {
    border: 1px solid #00B1F3;
    box-shadow: 0px 0px 10px 2px rgba(0, 177, 243, 0.2);
}

.k-picker-wrap.k-state-active, .k-picker-wrap.k-state-focused {
    box-shadow: none;
}
.k-i-calendar {
    color:#00B1F3
}
.k-calendar td.k-state-selected .k-link {
    border-color: #00B1F3;
    color: #fff;
    background-color: #00B1F3;
    background-image: none;
}

.k-calendar td.k-state-focused .k-link {
    box-shadow: inset 0 0 0 1px #00b0ff;
}

.k-calendar>.k-header {
    background:#00B1F3!important
}

/* k-dropdown */
.k-dropdown .k-state-default {
    border-color: #c3d2da;
    background-position: 50% 50%;
    background-color: #ffffff;
    border-radius: 5px;
    height: 38px;
}

.k-dropdown .k-input {
    color: #83888e;
    height: 38px;
    font-weight: 400;
}
.k-link.k-state-hover {
    border-radius:5px!important;
    background:rgb(0, 160, 218)!important
}
.k-state-default>.k-select {
    border-color: #c3d2da;
    height: 38px;
}
.k-dropdown-wrap .k-input, .k-dropdown-wrap .k-select,
.k-picker-wrap .k-select {
    line-height: 2.5em;
}
.k-dropdown-wrap .k-input {line-height: 31px;}
.k-list>.k-state-selected.k-state-focused, .k-state-selected {
    box-shadow: none;
    color: #00B1F3;
}

.k-picker-wrap.k-state-default input {
    color:#3f4d64!important;
}

.k-picker-wrap.k-state-default, .k-picker-wrap.k-state-default .k-input {
    border:none;
    background:none;
    cursor: pointer;
    height: 40px;
    font-weight: 400;
}
#myModalAdd .btn-upload {
    padding: 10px 30px;
}
#myModalAdd .modal-body {
    border-top: 1px solid #e0e0e0;
    padding: 5px 15px 15px 15px;
}

#myModalAdd .k-picker-wrap.k-state-default, .k-picker-wrap.k-state-default .k-input { height: 37px;}
.k-picker-wrap.k-state-default>.k-select {border:none}
.k-state-default:hover, .k-state-default:focus, .k-picker {box-shadow: none;}
.k-picker-wrap .k-upload-files .k-icon {
    color:#00B1F3
}
#myModalEmailTemplate .k-icon:before {
    top:5px;
}


/* k group*/
.btn-group {
    width: 100%;
    display:inline-block
}
.btn-group.block {display:block}


.btn-group.dropdown > button {font-weight: 600}
.btn-group.dropdown > ul {padding:10px 15px;}
.btn-group.dropdown {text-align: right}
.btn-group.dropdown>.btn.active,
.btn-group.dropdown>.btn:active,
.btn-group.dropdown>.btn:focus,
.btn-group.dropdown>.btn:hover {
    /* border-width: 0.1px; */
    background-color: #fafafa;
    box-shadow:none;
    outline: none;
    border:1px solid #c3d2da
}
.all-btn-box .btn-group.dropdown{display:inline-block;}
.btn-group.dropdown ul{padding:15px;}
.btn-group.dropdown ul li{border:1px solid #ccc;border-radius:4px;margin-bottom:10px;white-space: nowrap;padding: 5px 25px 5px 10px;position:relative;}
.btn-group.dropdown ul li:last-child{margin-bottom:0;}
.btn-group.dropdown ul li i{position:absolute;right:5px;top:11px;}
.btn-group.dropdown ul li:hover{background:#eae8e8;cursor:pointer;}
/* Tab*/

div.tab {
    overflow: auto;
    background:none;
    margin: 5px 0px 0px 0px;
}
div.tab button {
    background-color: #e3ecf0;
    cursor: pointer;
    padding: 8px 32px;
    transition: 0.3s;
    font-size: 14px;
    color: #8e9ba0;
    font-weight: 400;
    outline: 0;
    border: 0;
    border-right: none;
    margin: 0px 5px 5px 0px;
    float: left;
    border-radius:5px;
    border-bottom: none;
}
div.tab button:hover {
    background-color: #fff;
    color: #3f4d64;
    border-bottom:none;

}
div.tab button.active {
    background-color: #00B1F3;
    color:white;
    border-bottom:none;
    border-radius: 5px;
    margin: 0px 5px 5px 0px;
    font-weight: bold;
}

.tabcontent {
    display: none;
    border-top: none;
}


/* Radio button */
.control {
    display: block;
    position: relative;
    padding-left: 5px;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 5px
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 18px;
    width: 18px;
    background: none;
    border: 2px solid #B3D3D9;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #00B1F3;

}
.control input:checked ~ .control__indicator {
    background: #00B1F3;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #00B1F3;
}
.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control__indicator:after {
    display: block;
}
.control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
    left: 3px;
    top: 3px;
    height: 6px;
    width: 6px;
    /* border-radius: 50%; */
    background: #00B1F3;
}
.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}

/****** f.Kendo Editor ******/
 .k-chart-crosshair-tooltip, .k-chart-shared-tooltip, .k-widget.k-tooltip, .k-tooltip {
    border-color: #3f4d64;
    background-color: #3f4d64;
    color: #fff;
}

.k-tooltip:before, .k-tooltip:after {
    border-color: #3f4d64;
    background-color: #3f4d64;
}

table.k-editor {
    border-bottom: transparent;
}
.k-editor .k-editor-toolbar-wrap {
    padding-left: 0px;
}
.k-editor-widget {margin-top:10px}
.certificate-editor .k-editor-widget {margin-top:0px;}
.certificate-editor .k-editor-toolbar .k-button-group .k-tool {width: 30px; height: 45px;line-height: 45px;}
#CertificateLinkedBadgesModal .modal-footer, #CertificatePreviewModal .modal-footer{padding: 7px;}
.k-editor-widget .k-editable-area .k-editor .k-content {
    height:70%!important
}
.k-editor.k-header {
    padding: 5px;
    border-radius: 5px;
}
#CertificateViewModal img{width:100%;height:100%;}
#editor {height:100px!important}
#subjectRow .k-editor.k-header {
    background:white;
    padding: 0px;
    border: none;
}
#subjectRow .k-content {
    height: 100%;
    border: 1px solid #c3d2da;
    border-radius: 5px;
    top: 0%;
    position: relative;
    transition: .5;
}
#subjectRow .k-content:hover,
#subjectRow .k-content:active,
#subjectRow .k-content:focus {
    border: 1px solid #00B1F3;
    box-shadow: 0px 0px 10px 2px rgba(0, 177, 243, 0.2);
    background-position: 0 0;
    outline: none;
}

#subjectRow .k-editable-area {
    padding: 0px;
}
#subjectRow table {
    height: 10px;
}
#subjectRow span.note {
    margin-bottom: 10px;
}
.k-editor .k-editable-area {
    width: 100%;
    outline: 0;
    height: 100px;
}
.certificate-editor .k-editor .k-editable-area{
    height: 145px;
}
#subjectRow .k-editor .k-editable-area {
    width: 100%;
    height: 40px;
    outline: 0;
}
.setg-sub-row .col-lg-4{padding-left:0px;}

.k-editor-toolbar .k-colorpicker {
    background:white
}
.k-widget .k-editor .k-header .k-editor-widget,
.k-widget.k-editor.k-header.k-editor-widget{width:100%!important;border-radius:0px;box-sizing: border-box;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .wildcard-subject .k-dropdown {margin-top:3px}
}

.k-window .k-window-titlebar {
    background:#00d7f5 ;
}

.body_wildcard {
    border: 1px #e6e6e6 solid;
    margin: 0%;
    border-top: transparent;
    padding: 1% 0%;
}

#wildcard_1,
.body_wildcard .k-dropdown {width:55%}
.wildcard_help {
    margin-left: 1%;
}

.panelbar {
    font-size: small;
}
#panelbar .green {
    width: 20%;
    display: inline-block;
}
#panelbar div li {
    display: inline-block;
    display: inline-block;
    width: 75%;
}
.wildcard-ul {
    padding: 0px;
}
.wildcard-ul li {
    padding: 5px;
    font-size: 14px;
}
/* HyperLink*/
/****** g. Tables ******/
table {
    margin: 0;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
}

.table-bordered {
    border-width: 1px 1px 0px 0px;
}
.table {margin-bottom:0px}
.table tbody+tbody {
    border-top: 1px solid #dee2e6;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td {
    padding: 5px;
    text-align: center;
}
.table>thead>tr>th {padding:10px 5px}
.table>tbody>tr>td {
    font-weight: 400;
    line-height: 22px;
}
.table thead tr th {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.table tbody tr td:first-child {text-align: left;}
.table>tbody>tr>td:last-child,.table>thead>tr>th:last-child  {text-align: center;}

.table-hover>tbody>tr:hover {
    background-color: #f5f5f5 !important;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border-style: solid;
    border-width: 0 0 1px 1px;
    cursor: initial;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #fbfbfb;
}

.table-responsive {margin-top:20px}
.table-responsive .k-grid { border: 1px solid #e0e0e0;}
.table-responsive .k-grid thead tr[role=row]:first-child .k-header {
    text-align: center;
    padding:10px 0px;
    font-size: 16px;
    font-weight: 700;
}
.table-responsive .k-grid thead tr[role=row]:last-child .k-header {
    background:white
}


/* Kendo Table style */


/* removing dots from array*/
.k-grid-header th.k-header > .k-link {
    text-overflow: clip;
}
.k-grid {width:100%!important;box-sizing: border-box;}
.k-grid td {
    font-size: 14px;
    color: #3f4d64
}
.k-selectable>tbody>tr>td {
    cursor: pointer;
}
.k-grid tr.k-state-selected>td {
    border-left: 1px solid #e6e6e6;
}

.k-grid tr.k-state-selected:hover td {
    background-color: #ececec;
}
.k-input {
    z-index: 1;
}
.k-file-validation-message {
    margin-left: 10px;
    color: red;
}

.k-grid-content {
    overflow-y: auto;
    overflow-x:auto
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .k-grid-content {
        overflow-x:hidden
    }
}
.k-grid-content tr td {
    border-left-width: 1px;
}
.k-grid tbody td {
    text-align: left;
}
.k-grid .k-i-arrow-n,
.k-grid .k-i-arrow-s {
    color: #00d7f5 !important;
    float: right;
}
/* Kendo Table Header */

.k-filter-row th,
.k-grid-header th.k-header {
    padding: 5px 8px;
}
div.k-grid-footer,
div.k-grid-header {
    padding-right: 0px !important;
}
.k-grid-header th.k-header {
    vertical-align: middle;
    font-size: 14px;
}
.k-grid-header .k-icon.k-i-arrow-n,
.k-grid-header .k-icon.k-i-arrow-s {
    background: none!important;
}
.k-grid-header .k-icon.k-i-arrow-s:before {
    content: url(../img/sort-asc.png);
}
.k-grid-header .k-icon.k-i-arrow-n:before {
    content: url(../img/sort-desc.png);
}
.k-grid thead tr[role=row] .k-header {
    background-color: #f9f9f9;
    font-weight: 600;
    color: #3f4d64;
    text-align: center;
    font-size:14px
}

.k-grid-header th.k-header>.k-link {
    padding: 4px 0px;
    color: #1A1A1A;
    text-align: center;
    font-size: 14px;
}

.k-grid-header table {
    table-layout: fixed;
    width:100%;
}

.k-grid-header th.k-header>.k-link>span>img {
    width:30px;
    height:30px
}

/* Table pagination*/
.k-pager-wrap.k-pager-sm .k-pager-numbers .k-link,
.k-pager-wrap.k-pager-md .k-pager-numbers .k-link {
    width: 2.429em;
    height: 2.429em;
}

.k-pager-wrap.k-pager-sm .k-pager-numbers:hover,
.k-pager-wrap.k-pager-md .k-pager-numbers:hover {
    background:#00B1F3;
    box-shadow:none;
}

.k-pager-wrap.k-pager-sm .k-pager-numbers:hover .k-current-page .k-link,
.k-pager-wrap.k-pager-md .k-pager-numbers:hover .k-current-page .k-link {
color:white
}

.k-pager-wrap .k-pager-numbers .k-state-selected {
    border-color: #00B1F3 transparent transparent;
    color: #ffffff;
    margin-top: 0px!important;
    padding-top: 0px!important;
    position: relative!important;
    top: 1px!important;
}




/* Custom tables*/
.tabcontent .issue_input_table td {
    padding: 5px;
}

#earner_grid .k-grid-header th.k-header>.k-link,
#analyticsGrid .k-grid-content table tr td {
 text-align: center;
}
#analyticsGrid .k-grid-content table tr td:first-child {
    text-align: left;
}
#analyticsGrid .k-grid-header th.k-header>.k-link {
    text-align: center;
}
.issue_input_table .mobile-num-wrap .prefix-code {
    position: absolute;
    left: 0px;
    width: 85px;
}
.issue_input_table .mobile-num-wrap .input-wrap {
    padding: 0 0px 0 100px;
}
.issue_input_table {
    width: 100%;
    margin: 15px 0px 0px 0px;
}
.issue_input_table td {
    padding: 1%;
    width: 13%;
}

/* Checkbox table*/

.k-checkbox-label {
    padding-left:20px;
	line-height:5px;
}
.k-grid .k-checkbox-label.k-no-text{
    padding-left:20px;
	line-height:5px;
}
.k-grid input.k-checkbox + label.k-checkbox-label {
    margin-top:10px
}

.k-checkbox:active+.k-checkbox-label:before {
    border-color:#00B1F3
}
.k-checkbox:active+.k-checkbox-label:after {
    background: rgb(149, 226, 255);
}

.k-checkbox-label:before {
    top: -8px;
    border-color: #dbdbdb;
    border-width: 2px;
}
.k-checkbox:checked+.k-checkbox-label:before,
.k-checkbox:checked+.k-checkbox-label:before, .k-checkbox:checked+.k-checkbox-label:hover:before {border-color:#00B1F3;background-color: #00B1F3 !important;color: white;}
.k-checkbox:checked+.k-checkbox-label:before {
    background-color: #00B1F3;
    color:white
}
.k-checkbox-label:after {
    top: -4px;
}
.badge-table .k-grid-header th.k-header input[type=checkbox] {
    margin:6px
}

#issueBadgeGrid {padding: 10px 20px 0 15px;}
#earner_grid .k-checkbox-label,
#earner_grid .k-checkbox-label:before,
#earner_grid .k-checkbox-label:after,
#issueBadgeGrid .k-checkbox-label,
#issueBadgeGrid .k-checkbox-label:before {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.k-checkbox-label:after {display:none}
#issueBadgeGrid .k-checkbox:focus+.k-checkbox-label:after,
#issueBadgeGrid .k-checkbox:focus+.k-checkbox-label:before{
	background: none;
}
#issue_badgecert_grid .k-grid-header th.k-header>.k-link:after {
    content: "\f0dc";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
    color: #2C2626;
    font-size: 14px;
}
/* Badge Table*/
.badge-table .k-grid tr.k-state-selected {
    background:#ffffff
}
.table-filters .k-grid tr.k-state-selected>td,
.badge-table .k-grid tr.k-state-selected>td {
    border-bottom: 1px solid #00b1f3;
}
.badge-table .k-grid thead tr[role=row] .k-header {
    text-align: left;
}
@-moz-document url-prefix() {
    .table-filters .k-grid tbody td:first-child,
    .badge-table .k-grid thead tr[role=row] .k-header {
        text-align: center;
    }
}


.badge-table {
    border-top: none;
    padding-top: 0px;
}
.badge-table .k-grid thead tr[role=row] .k-header:last-child a,
.k-grid thead tr[role=row] .k-header:last-child a {
    text-align:center
 }

 .k-grid td,
 .badge-table .k-grid td {
    padding: 5px;
    font-weight: 400;
}

.table-filters .k-filter-row>th{
    border-color: #e6e6e6;
    background:white;
    padding:5px 0px;
}

.table-filters .k-filter-row th .k-dropdown .k-state-default {
    height: 34px;
    border-color: #1ab9f4;
}


.table-filters .k-filter-row th .k-dropdown .k-state-default .k-i-filter {
    color:#1ab9f4;
}

.table-filters .k-autocomplete {border-color:#ccc;  border-radius:5px}
.table-filters .k-autocomplete .k-input {
    background:none
}

.table-filters .k-autocomplete.k-state-focused {
    box-shadow:none;
    border-color: #1ab9f4;
    background:white
}
.table-filters .k-filtercell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width:100%
}
.table-filters .k-filtercell>span {
    padding: 0px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width:100%
}

.table-filters .k-grid-content {
    overflow-y: hidden!important;
    overflow-x: hidden!important;
}
#analyticsGrid .k-grid-content{
    overflow-y: hidden!important;
    overflow-x: hidden!important;
}
.table-filters .k-grid-content table tr td:first-child,
.table-filters .table .k-grid-content table tr td:first-child, .table-filters table tbody tr td:first-child{
    text-align: center!important;
}

.table-filters .k-filtercell .k-autocomplete .k-icon {background:white}

/* Checkbox on tables*/
.checkbox-cell {
    text-align: center !important;
    padding: 0 !important;
  }
  .checkbox-header-cell {
    text-align: center !important;
    padding: 0 !important;
  }


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .table-filters .k-filtercell>span {width:93%}
}
.table-filters .k-filtercell .k-widget.k-autocomplete {
    flex:3;
    margin-right:5px;
}
.table-filters .k-filter-row .k-dropdown-operator {
    position: relative;
}

.table-filters .k-filtercell .k-widget.k-dropdown {
    right:0px;
}

.table-filters .k-filtercell>span>.k-button {
    position: relative;
    margin-left:5px;
    border-radius: 5px;
    background: #eeeeee;
    border: 1px solid #e3e3e3;
}


.table-filters .k-filtercell>span>.k-button:hover {
    box-shadow:none;
    border-color: #cecece;
    background-color: #cecece;
}



/***** h. Modals *****/

.modal-custom {
    max-width: 650px;
}
.modal-medium {
    max-width: 750px;
}
.modal-large {
    max-width: 830px;
}
.modal-xlarge {
    max-width: 85%;
}
.modal-xxlarge {
    max-width: 90%;
}
.modal-larger {
    max-width: 95%;
}
.modal {
    overflow:auto;
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.modal-dialog {margin-top:1rem;margin-bottom: 10px;}
.modal-content {
    margin-bottom: 60px;
    border-radius: 10px;
    border:none;
    padding:0px;
    box-shadow: 0px 0px 22px 9px rgba(31, 39, 52, 0.16);
}
.confirmation-modal {
    margin-top: 3em;
}
.modal-header {
    background: none;
    border-bottom: 1px solid #e0e0e0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
		flex-direction: column;
		position: relative;
    align-items: flex-start;
    padding: 10px 25px;

}
.modal-body h6 {
    font-weight: 400;
    color: #3f4d64;
    margin: 10px 0px;
    line-height: 22px;
}
.modal-title {
    font-size: 20px;
    color: #3f4d64;
    font-weight:600;
    word-break: break-word;
}

.modal-body {
    padding: 5px 25px 15px 25px;
    word-break: break-word;
	word-wrap : break-word;
}

.modal-helper {
	font-size: 12px;
	display: flex;
}

.modal-body .btn:first {
    margin-right:5px
}
.modal-header .close {
    color: #878b90;
		right: 20px;
		top: 10px;
    opacity: 0.9;
    font-weight: normal;
    font-size: 20px;
		position: absolute;
}
#myModalResendEmail h6{
	word-break: break-word;
	word-wrap : break-word;
}
#confirmationInfoBox .action-buttons{width:100%;}
.close:focus,
.close:hover {
    color: #3f4d64;
    opacity: 1;
    font-weight: normal;
}

button.close:active {
    background: none!important;
    color: #3f4d64!important;
}


.step_modal_buttons {
    width: 100%;
    padding: 10px 8px 0px 15px;
    border-top: 1px solid #eaeaea;
    margin-top: 10px;
}

.step_modal_buttons button {
    display:inline-block
}

/* Custom modals*/
#myModalUnlockAccountConfirm,
#myModalUnlockAccount,
#changeDefaultCertStateConfirmation,
#myModalDeleteCustomEmail,
#myModalDeleteCustomEmailConfirm,
#uploadArtifactConfirmation,
#createBadgeConfirmation,
#deleteBadgeConfirmation,
#deleteIssuanceConfirmation,
#validateEmailConfirmation,
#resendEmailConfirmation,
#updateProfileConfirmation,
#issueBadgeToNewEarnerConfirmation,
#issueBadgeToExistingEarnerConfirmation,
#editbadgeEarnerConfirmation,
#myModalChangePassConfirm {
    top: 0;
    padding-top: 14%;
    background-color: rgba(0, 0, 0, 0.7);
}

#myModalGeneric .modal-body,
#resendEmailConfirmation .modal-body,
#updateProfileConfirmation .modal-body,
#issueBadgeToNewEarnerConfirmation .modal-body,
#issueBadgeToExistingEarnerConfirmation .modal-body,
#deleteIssuanceConfirmation .modal-body,
#editbadgeEarnerConfirmation .modal-body,
#myModalUnlockAccount .modal-body,
#myModalUnlockAccountConfirm .modal-body,
#createBadgeConfirmation .modal-body,
#deleteBadgeConfirmation .modal-body {
    text-align: center;
}

#resendEmailConfirmation .modal-body .blue,
#myModalGeneric .modal-body .blue,
#issueBadgeToNewEarnerConfirmation .modal-body .blue,
#issueBadgeToNewEarnerConfirmation .modal-body .blue,
#updateProfileConfirmation .modal-body .blue,
#deleteIssuanceConfirmation .modal-body .blue,
#editbadgeEarnerConfirmation .modal-body .blue,
#myModalUnlockAccount .modal-body .blue,
#myModalUnlockAccountConfirm .modal-body .blue,
#createBadgeConfirmation .modal-body .blue,
#deleteBadgeConfirmation .modal-body .blue  {
    padding: 5px 15px !important;
}


/* View badge modal */
.value-field {
    color: #1F2734!important;
}
.view_badge_table {display:inline-table;}
.view_badge_table {margin-right:10px}
.view_badge_table.badge-view{margin-right:0px}
.view_badge_table.second {margin-right:0px}
.view_badge_table tr th:first-child {width:20px}
.view_badge_table tr th {padding: 3px 10px 0px 0px;}
.view_badge_table tr th:nth-child(2n) {color:#57759B;font-weight:400;}
.view_badge_table tr th:nth-child(3n) {font-weight:400}
.goo-drive-icon{
	float: left;
	margin-left: 10px;
	vertical-align: middle;
	font-size: 16px;
}
.tool-tip-link{float:left;}
.tool-tip-link a{color:#00B1F3;}
.tool-tip-link i{margin-left: 5px; margin-top: 5px;}
.view_badge_table_bottom {width:100%;margin-top:10px}
.view_badge_table_bottom tr th:first-child {
    /*width: 245px;*/
    color: #57759B;
    font-weight: 400;
}
.view_badge_table_bottom tr th {
    vertical-align: middle;
    font-weight: 400;
    padding: 3px;
    text-align: left;
    word-break: break-word;
}
#certDadgeDD_listbox .k-item, #walletBadgeDD_listbox .k-item {
	line-height: 20px;
	min-width: 300px;
}
#certDadgeDD_listbox .k-item > span, #walletBadgeDD_listbox .k-item > span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
}

#certDadgeDD_listbox .k-item > span:first-child, #walletBadgeDD_listbox .k-item > span:first-child {
	margin: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}
.cert-badge-dd.poi-evt-none-crsr-disb span.k-dropdown-wrap,.walt-badge-dd.poi-evt-none-crsr-disb span.k-dropdown-wrap{background-color:#d4d4d4;}
.cert-badge-dd.poi-evt-none-crsr-disb span.k-dropdown-wrap:hover,.walt-badge-dd.poi-evt-none-crsr-disb span.k-dropdown-wrap:hover{cursor: not-allowed !important;}
.view_badge_details td {
    /*white-space: nowrap;*/
    vertical-align:middle;
    font-weight: 400;
    padding: 3px;
    text-align: left;
    word-break: break-word;
	word-wrap: break-word;
}
#earner_model_details_overview .view_badge_table.second {
    width:100%
}
.view_badge_details td:nth-child(2n) {
    vertical-align:top;
    font-weight: 400;
}
.view_badge_details td:nth-child(3n) {
    font-weight: 400;
}
.view_badge_details {
    width: 100%;
}
#earner_model_details_overview .view_badge_table tr th:nth-child(2n) {
    width: 105px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .view_badge_details {table-layout: fixed;}
 }
.view_badge_details .link-btn {
    color:#3f4d64!important;
    font-weight: 700;
    margin-right:10px
}

.view_badge_details .link-btn:hover {
    color:#00B1F3!important;
}
.view_badge_details i.delete,
.view_badge_details .link-btn.delete:hover {
    color:#FF4E4E!important
}

.view_badge_details tbody {
    line-height: 18px;
}
#model-details-overview table.view_badge_details tr td:first-child{
    width: 230px;
    color: #57759B;
    font-weight: 400;
    vertical-align: top;
}
#model-details-overview .ibc-view table.view_badge_details tr td:first-child {
    width:25%
}
#clearExpirationDate {
    opacity:1;
	background: #00B1F3;
    pointer-events: none;
}
.has-exp-date #clearExpirationDate {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
    position: relative;
	background: #00B1F3;
    /*right: -2px;*/
}
#issueExpDate .k-datepicker{margin-right: 0px;}
#editbadgeEarner .k-datepicker {width:99.4%}
#editbadgeEarner .pr-45 .k-datepicker {width:100%}

#myModalAdd {padding-left:0px!important}
#myModalAdd form {
    width: 100%;
}
#myModalAdd .view_custom_badge {
    width: 120px;
    height: 120px;
    position: relative;
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    padding: 0px;
    border: none !important;
    margin: 0px;
    margin-right: 10px;
}
#myModalAdd.view_custom_badge {
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    padding: 12%;
    margin: 0% 14% 14% 14%;
    border: none !important;
}
#myModalAdd.view_badge {
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    padding: 12%;
    margin: 0% 14% 14% 14%;
}


.sample-table tr td:last-child{
    width:1%;
    white-space:nowrap;
}

.modal-custom-size {
    max-width:55%
}
.modal-custom-portfolio {
    max-width: 770px;
}
.data-info {
    margin-left: 30px;
}
#earner_model_details_overview .data-info {margin-left:0px}
.data-image {
    display: flex;
    margin-bottom:10px
}

.step2 .data-image {
    justify-content: center;
}
.opt-number {
    padding-right:0px
}
.step2 #collapseOne .panel-body .col-sm-5 {
    padding-right:0px
}
.wizard-step .dara-image {
    justify-content: center;
}
.data-image .view_badge  {
    width:90px;
    height:90px;
    margin:2px
}
.data-image .view_badge .details {
    height:100%;
    width:100%;
    object-fit: contain;
    cursor:default
}
#myModalAdd .preview-txt,
#myModalEdit .preview-txt {
    text-align: center;
    width: 172px;
    padding: 0;
    margin: 0 auto;
    font-weight: 700;
}

#myModalAdd .modal-dialog,
#myModalEdit .modal-dialog {
    height: 500px;
}
#myModalAdd .view_badge,
#myModalEdit .view_badge {
    width: 120px;
    height: 120px;
    position: relative;
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    padding: 8px;
    border: none !important;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #myModalEdit .view_badge {
        margin:0
    }

 }
#myModalAdd .step4-prev-badge .view_badge {
    margin:0
}
/* Delete badge modal */

#myModalDeleteBadge h6 {
    text-align: center;
}
#myModalDeleteGroupBadge h6 {
    text-align: center;
}
#myModalGeneric h6 {
    text-align: center;
}
#myModalDeleteGroup h6 {
    text-align: center;
}

#myModalDeleteBadge {
    padding-top: 12px;
}

/* Delete earner badge modal */

#myModalDeleteEarner, #myModalResendEmail {
    padding-top: 140px;
}
#myModalDeleteEarner .modal-body,
#myModalDeleteEarner h6 {
    text-align: center;
}

/* Resend email modal*/
.resend-mail-wrap {text-align: left;}

/* Edit earner modal*/
#myModalEditEarner .k-grid-content table tr td a {
    padding: 2px;
}

#myModalEditEarner .k-grid-content table tr td a:hover {
    text-decoration: none;
}

/* Email Template Modal */
#myModalEmailTemplate .modal-content {
    width: 100%;
}
#myModalEmailTemplate .action-btn-container {
    padding: 5px 15px 0px 15px;
    border-top:none;
    margin-top:10px
}
#myModalEmailTemplate .k-editor-toolbar .k-button-group .k-tool {
    width: 30px;
    height: 44px;
    line-height: 40px;
}
/* Generic modal */
#myModalGeneric {
    padding-top: 12px;
}
#myModalGeneric .modal-body .blue {
    padding: 5px 15px !important;
}
#myModalGeneric .modal-body {
    text-align: center;
}
/* Delete group modal */
#myModalDeleteGroup {
    padding-top: 12px;
}
#myModalAddGroup .line_input {
    width: 85% !important;
    border: none;
    border-bottom: solid 1px #00d7f5;
    background-repeat: no-repeat;
    margin: 5% 6%;
}
#myModalAddGroup .modal-body a,
#myModalEditGroup .modal-body a {
    background-color: #7fb5bc;
    display: inline-block;
    border-radius: 25px;
    margin: 0 3px;
    padding: 5px;
    cursor: pointer;
}
#myModalAddGroup .modal-body a img {
    padding: 1%;
}
#myModalEditGroup .line_input {
    width: 85% !important;
    border: none;
    border-bottom: solid 1px #00d7f5;
    background-repeat: no-repeat;
    margin: 5% 6%;
}
#myModalEditGroup .modal-body a {
    margin-left: 2%;
}
#myModalAddGroup .modal-body a:hover,
#myModalEditGroup .modal-body a:hover {
    background-color: #00d7f5;
}
#myModalAddGroup .modal-body a.group-selected,
#myModalEditGroup .modal-body a.group-selected {
    background: #0d9baf;
    border: 0;
}

/* Wildcard modal */
#myModalWildcard {
    padding-left: 0px;
    padding-top: 10px;
}
#myModalWildcard .modal-body {
    word-break: break-word;
	word-wrap: break-word;
}
#myModalWildcard .k-content {
    background:#fafafa;
	padding: 10px 5px;
}

#myModalWildcard .k-panelbar.k-header {background:white;border:none}
#myModalWildcard #panelbar li {
    padding: 0px;
    background: none;
    margin-bottom: 5px;
    border-bottom: none;
}

#myModalWildcard .k-panelbar>.k-item>.k-link {
    background: #f2f2f2;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 10px;
    border-radius: 5px;
}
#myModalWildcard .k-panelbar>.k-item>.k-link:last-child {
    border-bottom:none
}
#myModalWildcard .k-panelbar>.k-item>.k-link.k-state-hover {
    background:#00B1F3;
    color:white;
    border-radius: 5px!important;
}
#myModalWildcard .k-panelbar .k-item {border-bottom:none}
#myModalWildcard .k-panelbar>.k-item>.k-state-selected {color:#00B1F3;background-color: #f2f2f2;}
.wildcard-ul li {font-weight:400}

#myModalWildcard #panelbar div li {
    width:100%
}


/* Unshare modal */
#myModalUnshare {
    padding-top: 10%;
}

/* Password modal*/
#myModalPassword input {
    margin: 5px 0px 0px 0px;
}

/****** i. Others ******/

/* Scrollbar plugin*/
.mCSB_container p {font-size:14px!important;margin-bottom: 0px;}
.border-b {border-bottom:1px solid #e0e0e0}
.border-t {border-top:1px solid #e0e0e0}

/* Selected text color*/
::selection {color:white;background:#00B1F3;}
::-moz-selection {color:white;background:#00B1F3;}


/* Scrollbar with in IE*/


.main-wrapper {
    position: relative;
    top: 0;
    flex: 1 0 auto;
}

.rhs-wrapper {
    height: 100%;
    max-height: 100%;
    position: relative;
    float: left;
    width: 100%;
    padding-left: 225px;
    margin-bottom:5px
}
.logout-img {
    margin-right: 10px;
}
figcaption {
    text-align: center;
    font-size: 12px;
}

.pr-45 {
    position: relative;
    padding-right: 0px;
}
.hide {
    display: none;
}
.pro-img {
    float: left;
    margin-right: 5px;
}

.group-selected {
    border: 1px solid #00d7f5;
    background-color: #00d7f5;
    border-radius: 9px;
}
.image-preview {
    position: relative;
    vertical-align: top;
    height: 40px;
}

/* circle icon help*/
.help {
    padding-top: 3px;
    padding-left: 2px;
    color:#00B1F3;
}

/* bottom buttons action on modal*/
.action-btn-container {
    margin-top:5px;
    padding: 7px 0px;
   /* border-top:1px solid #e0e0e0;*/
}


.wrap:after,
.wrap:before {
    content: '';
    clear: both;
    display: table;
}

/* Box for bages and folders*/
#badeges_list .box {
    position: relative;
    display: inline-block;
}
#badeges_list .boxInner {
    word-break: break-word;
    position: relative;
    margin:10px 0px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow:none;
    margin: 5px;
    padding: 10px;
    float: left;
    width: 160px;
    height: 160px;
}

#badeges_list .box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.box .overlay {padding: 5px;}
.box:hover .overlay {
    display: block;
    background-color: rgba(25, 184, 243, 0.42);
    text-align: center;
    border-radius: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;

}
.box:hover .overlay_icon a {
    display: inline-block;
    background: #fff;
    text-align: center;
    padding: 4px;
    margin: 1px;
    position: relative;
    transition: 0.5s;
}
.overlay {
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
    padding:5%
}
.overlay_icon {
    width: 100%;
    margin: 0 auto;
	margin-bottom: -12px;
}
.overlay_icon a {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50px;
    line-height: 42px;
    border: none;
    display: none;
    -ms-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}
.overlay_icon a:hover {
    -ms-transform: scale(1.0);
    /* IE 9 */
    -webkit-transform: scale(1.0);
    /* Safari */
    transform: scale(1.0);
    /* Standard syntax */
    background:#089ed4!important
}


.overlay_icon a i {font-size:16px;color:#089ed4}
.overlay_icon a i.delete {color:#FF4E4E}
.overlay_icon a:hover i {color:white}
.overlay:hover:after{content: attr(title);position:absolute;background-color:#00B1F3;top:8px;left:0;width:100%;text-align:center;line-height: 14px;color: #FFF;padding: 1px 0px;}
.setg-icon-shadow .overlay:hover:after,.cert-icon-shadow .overlay:hover:after{background:unset;}
#earner_badeges_list .overlay:hover:after{background-color:unset;}
#cert_badge_grid thead{background: #e7e7e796;}
/* Badge Options*/
.badge_options a {
    background-color: white;
    margin: 3px 3px;
    padding: 9px 11px;
    border-radius:100px;
    box-shadow:2px 2px 7px 2px #e4e4e4;
}

.badge_options a i {color:#737d84;font-size: 12px;}
.badge_options a i:hover {color:#00B1F3}
.badge_options a i.delete:hover {color:#FF4E4E;}

.badge_options a:hover {
   box-shadow:2px 2px 7px 2px #e4e4e4;
}
.badge_options {
    text-align: center;
}


/* Paginaton for MyBadges and BadgePortfolio*/
.pagination-control .pagination-container, .pagination-control .group-pagination-container {
    position: absolute;
    width: auto;
    bottom: 0px;
    /*left: 5%;*/
}
.pagination-control .pagination-container .pagination, .pagination-control .group-pagination-container .pagination {
    float: none;
}

.pagination-container, .group-pagination-container {
    display: inline-block;
    text-align: left;
    margin: 0px 0px 10px 3px;
}
ul.pagination, ul.pagination > li, .pagination {
    display:inline-block;
}
ul.pagination > li {margin-bottom:20px}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #00B1F3;
    border-color: #00B1F3;
}
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 2;
    color: #fff;
    background-color: #00B1F3;
    border-color: #00B1F3;
    text-decoration: none;
}

.pagination>li>a,
.pagination>li>span {
    color: #3f4d64;
    margin: 0px 2px;
    padding: 8px 12px;
    background: #fff;
}
.pagination a {
    border-radius: 0px;
    font-size:14px;
    border:1px solid #eaeaea
}

/* badge card*/
.numbers {
    display: inline-block;
    font-size: 25px;
    color: rgb(0, 0, 0);
}

.badge_card {
    float: right;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
    display: table-cell;
    width: 100%;
}

.badge_card img {
    width:25px;
    height:25px;
    display:block
}

.badge_card a {
    padding: 14px;
}
.badge_card p {
    float:left;
    padding: 5px 8px 0px 0px;
    font-weight:600;
    margin:0;
    color:white;
    font-size:14px
}
.badge_card span {
    padding: 0px;
    margin-left: 0px;
    background: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    float:right
}

.issued_badges { background-color: #2184E6;}
.total_badges {background:#00D4FF}
.endorsements-received {background:#FFA26B}
.self-recorded-badges {background:#FFC756}

/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// NAVIGATION ELEMENTS ///////////////////////*/


/* Sidebar*/

.has-hide-menu .side-bar {
    display: none;
}
.has-hide-menu .rhs-wrapper {
    width: 100%;
    padding-left: 0;
}

.menu-app-version {
	padding: 12px 18px;
	margin-top: auto;
}

.side-bar, .side-bar-layout {
		height: 100%;
		display: flex;
		flex-direction: column;
    max-height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width:225px;
    padding-top: 15px;
    color: rgb(207, 207, 207);
    background-color: #1F2836;
    border-right: none;
    z-index: 1030;
}

.side-bar a.dropdown:hover {background:none}
.side-bar a.dropdown:hover i {color:#00B1F3}
.side-bar a.dropdown:not([href]):not([tabindex]) {
    color:white;
    background:none;
}
.side-bar ul {
    margin-top:8rem;
    line-height: 36px;
    padding: 0px 20px;
}

.side-bar ul li a {
    color:white;
    font-weight:400;
    color: rgb(207, 207, 207);
}

.menu a {
    background-color: transparent;
    color: rgb(207, 207, 207)!important;
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    border-top: none;
    border-bottom: none;
    font-weight: 400;
    border-top: 1px solid #1b2535;
    transition: 0.3s;

}
.menu a img {
    margin-right: 22px;
    width: 20px;
}
.menu a:hover {
    background-color: #101824;
    font-weight: 600;
}
.menu a.active {
    background-color: #101824;
    color: white;
    font-weight: 600;
}

.menu .dropdown i {
    position: relative;
    top: 4px;
}

.logo {
    display: block;
    margin: 0 auto;
    width:80px;
    height:80

}

/* Profile*/
.profile {
    background: none;
	margin-top: 8px;
    padding: 15px 15px;
    margin-bottom: 5px;
    display: flex;

}
.profile .pro-user {
    line-height: 18px;
}
.profile .pro-user a {
    display:block
}
.profile_name {
    color: #00B1F3;
    transition: 0.2s ease-in;
    word-break: break-word;
	word-wrap: break-word;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .profile_name {width: 170px;}
 }
.profile p {
    display: inline-block;
    margin-left: 8%;
}

.profile .pro-img img {
    border-radius: 100%;
    height:40px;
    width:40px
}

/* Navbar top */
.header1 {
    background-color: #fff;
    padding: 8px 20px 8px 20px;
    box-shadow: 10px 10px 14px 0px rgba(224,224,224,.7);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
 }
.my-badges-header{box-shadow: 10px 4px 4px 0px rgba(224,224,224,.7) !important;}
.header1 .nav_menu {
    cursor: pointer;
    display:inline-block;
    padding: 12px 10px;
    border:none;
    border-radius:5px;
    margin-right: 15px;
    background: #daf4ff;
    border:1px solid #daf4ff;
    transition:.3s

 }
.header1 .nav_menu .icon-bar {
    height: 2px;
    background: #00B1F3;
    display: block;
    width: 20px;
    border-radius: 1px;
    margin-top: 4px;
 }

.header1 .nav_menu:hover {
    background: white;
    border:1px solid #00B1F3
 }

.header1 .nav_menu .icon-bar:nth-child(2n) {
    width:18px;
 }

.header1 .nav_menu .icon-bar:first-child {
    margin-top:0px;
 }

.header_icons_right {
    width: 50%;
    text-align: right;
 }
.header_icons_left {
    width: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    align-items: center;
 }
.header1 img {
    padding: 10px;
 }
.header1 img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);/* For IE8 and earlier */
 }

.header_icons_right a {
    margin: 0px 8px
 }
.header_icons_right a:last-child {
    margin:0px
}
.header2 {
    padding: 8px 10px 0px 10px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.header2 h3 {
    color: #3f4d64;
    font-weight: 700;
    display: inline-block;
    margin: 5px;
    vertical-align: middle;
    font-size: 1.55rem;
}
.header2 img {
    vertical-align: middle;
}

.header2 .create-badge {
    margin-right: 10px;
}

.header1 .header_icons_right a {
    line-height: 30px;
}

/* Footer */

.footer {
    width: 100%;
    flex-shrink: 0;
    background-color: white;
    box-shadow: 0 0px 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;
    padding-left:225px
}
.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;
}

/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 2. MY BADGES ///////////////////////*/
.step4-prev-badge {
    display:flex;
    justify-content: flex-end;
}
#child_badges-list .k-item {
	line-height: 20px;
	min-width: 300px;
}
/* Material Theme padding adjustment*/

.k-material #child_badges-list .-item,
.k-material #child_badges-list .k-item.k-state-hover,
.k-materialblack #child_badges-list .k-item,
.k-materialblack #child_badges-list .k-item.k-state-hover {
	padding-left: 5px;
	border-left: 0;
}

#child_badges-list .k-item > span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
}

#child_badges-list .k-item > span:first-child {
	margin: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}

#child_badges-list h3 {
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 1px 0;
	padding: 0;
}

#child_badges-list p {
	margin: 0;
	padding: 0;
	font-size: .8em;
}
#prerequisite-list .k-item {
	line-height: 20px;
	min-width: 300px;
}
/*#prerequisite, #child_badges {width:93%}
 Material Theme padding adjustment*/

.k-material #prerequisite-list .k-item,
.k-material #prerequisite-list .k-item.k-state-hover,
.k-materialblack #prerequisite-list .k-item,
.k-materialblack #prerequisite-list .k-item.k-state-hover {
	padding-left: 5px;
	border-left: 0;
}

#prerequisite-list .k-item > span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	margin: 5px;
}

#prerequisite-list .k-item > span:first-child {
	margin: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: 100%;
	background-repeat: no-repeat;
}

#prerequisite-list h3 {
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 1px 0;
	padding: 0;
}

#prerequisite-list p {
	margin: 0;
	padding: 0;
	font-size: .8em;
}
.wizard-steps-panel {
    position: relative;
    height: 3em;
    text-align: center;
}

.wizard-steps-panel .step-number{
    display: inline-block;
    text-align: center;
    font-size: 26px;
    position: relative;
    font-size: 16px;
}
.wizard-steps-panel .step-number .number{
    width: 40px;
    height: 40px;
    background-color: #dedede;
    color: white;
    margin-left: calc(46% - 1.7em / 2 );
    border: none;
    border-radius: 1.7em;
    line-height: 40px;
}

.wizard-steps-panel .step-number.step-1 .number:before {
    display:none
}
/*.step-4 .number:after {display:none}*/
.wizard-steps-panel .step-number.doing .number,
.wizard-steps-panel .step-number.doing .number:after,
.wizard-steps-panel .step-number.doing .number:before {
    background: rgb(9,205,233);
    background: -moz-linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    background: linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#09cde9",endColorstr="#00b6fa",GradientType=1);
    color: white;
    box-shadow: none;
}

.wizard-steps-panel .step-number.done .number,
.wizard-steps-panel .step-number.done .number:after,
.wizard-steps-panel .step-number.done .number:before {
    background: rgb(9,205,233);
    background: -moz-linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    background: linear-gradient(90deg, rgba(9,205,233,1) 0%, rgba(0,182,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#09cde9",endColorstr="#00b6fa",GradientType=1);
    color: white;
    box-shadow: none;
}

/*.wizard-steps-panel .step-number .number:before {
    content: ' ';
    position: absolute;
    border: 1px solid #dedede;
    border-radius: 4px;
    left: -4px;
    right: calc( 58% + 1.4em / 2 );
    top: calc( 2.4em / 2 );
}*/

.wizard-steps-panel .step-number .number:after  {
	content: ' ';
    position: absolute;
    border: 1px solid #dedede;
    border-radius: 4px;
    left: calc( 58% + 1.4em/2 );
    right: 0;
    top: calc( 2.4em / 2 );
    width: 99%;
}

.wizard-steps-panel .step-number.done .number:after,
.wizard-steps-panel .step-number.done .number:before,
.wizard-steps-panel .step-number.doing .number:before {
    border: 1px solid rgb(9,205,233);
}
.wizard-steps-panel.steps-quantity-1 .step-number {
    width: 15%;
}
.wizard-steps-panel.steps-quantity-2 .step-number {
    width: 15%;
}

.wizard-steps-panel.steps-quantity-3 .step-number {
    width: 15%;
}

.wizard-steps-panel.steps-quantity-4 .step-number {
    width: 15%;
}

.wizard-steps-panel.steps-quantity-5 .step-number {
    width: 19%;
}

.wizard-steps-panel.steps-quantity-6 .step-number {
    width: 15%;
}

.wizard-step h5 {
    font-size: 14px;
}
.wizard-btn-wrap {
    position: absolute;
    right: 0;
    width: 225px;
    bottom: 5px;
}
.wizard-step .onoffswitch {
    display: inline-block;
}
.wizard-step div.tab {
    border: 0;
    background: none;
}
.wizard-step div.tab button {
    padding-left: 22px;
    padding-right: 20px;
    border: 1px solid #ccc;
    border-top: 2px solid transparent;
}
.wizard-step div.tab button:hover,
.wizard-step div.tab button.active {
    border-top: 2px #00d7f5 solid;
}
.wizard-steps-panel .step-number:last-child .number:after {
   display:none;
}
.wizard-steps-panel .step-number .number:after {
    content: ' ';
    position: absolute;
    border: 1px solid #dedede;
    border-radius: 4px;
    left: calc( 57% + 1.4em/2 );
    top: calc( 2.4em / 2 );
    width: 99%;
}
.wizard-steps-panel.edit-wizard .step-number.step-3 .number:after {
    display:block;
}
.badge-desc-box .k-editor-toolbar .k-button-group .k-tool{width: 35px; height: 35px;line-height: 35px;}
.badge-desc-box iframe{height: 170px !important;overflow-x: auto;}
.badge-desc-box table.k-editor{ height: 145px;padding-top: 0px;}
/* Breadcrumb*/
.create-badge {
    margin-right: 10px;
    transition: 0.2s ease-in;
}

.create-badge i {
    font-size:16px;
    position: relative;
    top: 1px;}

.search-breadcrumb.line_input1 {
    box-shadow: none;
    outline: none;
    width: 300px;
    border: 1px solid white;
    height: 40px;
    padding: 0px 10px;
}
#searchBadgeNameInput{border: 1px solid #e4e0e0;}
.search-btn{
    background: #00B1F3;
    color:white
}

.breadcrumb-right .position {
    width: 100%;
    text-align: right;
}
.selected-value {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-size: 100%;
    margin-right: 5px;
    border-radius: 50%;
}
/* Bagdes List*/
.textarea-title {
    color: #496180;
    max-height: 192px;
    overflow-y: auto;
    background: #ededed;
    padding: 3px 3px !important;
    border-radius: 5px;
    font-size: 14px;
	white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    word-wrap: break-word;
    text-align: justify;
}

.edit-badge-textarea-title {
    color: #496180;
    max-height: 192px;
    overflow-y: auto;
    background: #ededed;
    padding: 3px 3px !important;
    border-radius: 5px;
    font-size: 14px;
	white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    word-wrap: break-word;
    text-align: left;
}

.textarea-title-small {
    color: #496180;
    background: #ededed;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 14px;
	white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow:hidden;
}
.edit-badge-textarea-title-small {
    color: #496180;
    background: #ededed;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 14px;
	white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow:hidden;
}
.textarea-title.small {
    max-height: 104px;
}
.edit-badge-textarea-title.small {
    max-height: 104px;
}
.textarea-title *,.edit-badge-textarea-title *,.textarea-title-small *{width:inherit !important; background:none !important;},.edit-badge-textarea-title-small *{width:inherit !important; background:none !important;}
.textarea-title p,.edit-badge-textarea-title p,.textarea-title-small p, .textarea-title blockquote, .textarea-title-small blockquote{color:#496180 !important;}, .edit-badge-textarea-title-small blockquote{color:#496180 !important;}
.desc-box .textarea-title{padding-right: 8px !important;}
.desc-box .edit-badge-textarea-title{padding-right: 8px !important;}
.desc-view-sty ul, .desc-view-sty li, .textarea-title ul, .edit-badge-textarea-title ul, .textarea-title li, .edit-badge-textarea-title li, textarea-title-small ul, edit-badge-textarea-title-small ul, .textarea-title-small li{list-style: unset;padding: revert;}, .edit-badge-textarea-title-small li{list-style: unset;padding: revert;}
/*.view_badge_details ul, li{list-style: unset;}
.desc-view-sty .textarea-title{background: none;border: 1px solid #ededed;}
.view_badge_details .textarea-title{background: none;border: 1px solid #ededed;}
*/
.disabledbutton {
    pointer-events: none;
    opacity: 0.8;
}

#uploadBadgeImgTypeBtnGrp.badge-image:hover {
    box-shadow:none
}
#uploadBadgeImgTypeBtnGrp button{
	background-color: #ffffff !important;
    border: 1px solid #00B1F3;
    box-shadow: none!important;
	color: #1ab9f4 !important;
}


#uploadBadgeImgTypeBtnGrp button.active,
#customImageForm .btn-group button.active {
    background-color: #00B1F3 !important;
    border-color: #00B1F3;
    color: #FFF !important;

}
#uploadBadgeImgTypeBtnGrp button:nth-child(1) {
    border-radius: 5px 0px 0px 5px;
}
#uploadBadgeImgTypeBtnGrp button:last-child {
    border-radius: 0px 5px 5px 0px;
    margin-left: 0px;
}
.upload-btn-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 8px 0px;
}
.upload-btn-wrap button span {
    font-size: 11px;
}
.upload-btn-wrap button i {display:block;margin-bottom:5px}
.preview-temp {
    text-align: center;
    margin-top: 0px;
}
.preview-container {
    display: flex;
    justify-content: center;
}
.upload-btn-wrap button strong {
    display: block;
    margin-bottom: 0px;
    font-weight: 700;
    color:#3f4d64;
}
.preview-temp img {
    width: 105px;
    height: auto;
}
.badge-help-icon {
    text-align: center;
    margin: 10px 0px;
}

.tooltip-inner {font-size: 12px;}
.tooltip-inner p {text-align:left;}

.dropdown-header {
    border-width: 0 0 1px 0;
    text-transform: uppercase;
}
.dropdown-header > span {
    display: inline-block;
    padding: 2px 8px;
}
.dropdown-header > span:first-child {
    width: 30px;
}
.badges .row {
    margin-left: 10%;
}
.badges .col-sm-2 {
    margin: 1%;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    background-color: rgb(255, 255, 255);
    width: 173px;
    height: 152px;
}
.badges .col-sm-2 img {
    margin: 14%;
}

.badge-cert-wrap {
    padding: 15px;
    margin: 5px 0px 35px 0px;
    border-radius: 10px;
}

#badeges_list  .overlay_icon a i {
    color:#00B1F3
}
#badeges_list a.delete i {
    color:#FF4E4E
}
#badeges_list a:hover i {
    color:white;
}
#badeges_list .box a.delete:hover,#certificateList .box a.delete:hover  {
    background:#FF4E4E!important
}

.hideTempSuccess h5 {
    display:block;
    margin:0px;
    margin:8px 5px 10px 0px;
    font-weight: 600;

}
.other_input_roll_points .tab {
    margin: 10px 0px 5px 0px;
}
.other_input_roll_badges .btn,
.other_input_rolldown_badges .btn,
.roll_up_with_points button {width:140px}
.step_modal_buttons:after {
    clear: both;
    content: "";
    display: table;
}
.crsr-disb {
    cursor: not-allowed !important;
}
.poi-evt-none-crsr-disb {
	pointer-events:none;
    cursor: not-allowed !important;
}
.custom-opt {
    margin: 0px 0px 10px 0px;
    font-size: 13px;
    color: #3f4d64;
    font-weight: 400;
}
#badeges_list {
    height: auto;
    margin: 0px 10px 20px 10px;
}
.no-badges-wrap h3 {
    color: #00B1F3;
    font-weight: 600;
    margin-bottom:0px
}
.no-badges-wrap p a{
    text-decoration: underline!important;
    margin-left:5px;
    opacity: .8;
}
.k-list-container > .k-footer {
    padding: 5px;
}
.no-badges-wrap p a:hover {
    opacity: 1;
    color: #58C6FF!important;
}
.no-badges-wrap {
    text-align: center;
    opacity: 1;
    display: block;
    height:auto;
    padding:20px
}
.no-badges-wrap img {
    margin-bottom:20px;
    opacity: .95;
}
.empty-badges img {
    width:45%;
}
.no-results img {
    width:30%;
}
.no-badges-wrap img.iss-badg-icon {
	width:14px;
	height:19px;
    margin-bottom:6px
}
.no-badges-wrap p {margin-bottom:10px;font-weight: 400;}
.no-badges-wrap .btn-p {
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 4px;
    background: #00d7f5;
}
.no-badges-wrap .btn-p:before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    margin: -3px 7px 0 0;
    vertical-align: middle;
    background: url(../img/add-icon-white.png) 0 0 no-repeat;
}
#uploadBadgeImgTypeBtnGrp.btn-group {justify-content: center;text-align: center;}

#originalCustomImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#expiredCustomImg,#expiredCustomImg3 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#originalCustomImgtab2, #originalCustomImg1 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#expiredCustomImgtab2, #expiredCustomImg1 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#originalCustomImg2 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#expiredCustomImg2 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-view-table {
    background: white;
    box-shadow: 0px 0px 15px #e2e2e2;
    border-radius: 8px;
    padding: 20px 0px;
    margin-bottom: 20px;
    margin-top: 5px;
}
.card-view-table .data-options {
    margin-top: 10px;
}
#earner_model_details_overview .card-view-table {
    box-shadow:none;
    margin:0px
}
.card-view-table h4 {margin-left:20px}
#earner_model_details_overview .card-view-table h4 {
    margin-left:0px;
    font-weight:600;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ededed;
    font-size: 16px;
}
.card-view-table .data-image {text-align: center;justify-content: center;}
#earner_model_details_overview .view_badge_details.desc .textarea-title {background:none;padding:0px!important}
#earner_model_details_overview .data-info-wrapper p a {
    color:#00B1F3!important
}
.view_badge {
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    border: none !important;
    margin: 5px 10px 5px 0px;
    display: inline-block;
}
.view_custom_badge {
    text-align: center;
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    padding: 10%;
    margin: 10%;
}
.hideTempSuccess h5 {margin: 5px 0px 5px 0px;}
.wrap-confirmation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    border-bottom:1px solid #e2e2e2;
    padding-bottom:0px;
}

.wrap-confirmation p {
    font-weight: 600;
    margin-right: 10px;
    font-size: 16px;
}
.toggle-compet-wrap {
    cursor: pointer;
    display:block
}
.toggle-compet {
    width: 96%;
    padding: 10px 12px;
    line-height: 18px;
    border-radius: 6px;
    color: #3f4d64;
    background: white;
    border: 1px solid #eefaff;
    transition: .5s;
    display: inline-block;
    box-shadow: 0px 3px 5px 3px rgba(238, 238, 238, 0.63)
}
.toggle-compet:hover {
    background:white;
    border:1px solid white;
    box-shadow: 0px 3px 5px 3px rgba(200, 200, 200, 0.63)
}
.toggle-compet.hide-content:after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
}
.toggle-compet:after {
    content: '\f106';
    margin: 0 0px 0 5px;
    vertical-align: baseline;
    height: 25px;
    width: 28px;
    display: inline-block;
    font-size: 13px;
    background: #daf4ff;
    color: #00B1F3;
    border: 1px solid #00B1F3;
    line-height: 26px;
    text-align: center;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    border-radius: 5px;
    position: relative;
    top: 0px;
}
.toggle-compet:hover:after {
    border-color:#00B1F3;
    background: #00B1F3;
    color:white;
}
.toggle-compet-disabled {
    cursor: no-drop;
}
.toggle-compet > div {
    width: 91.5%;
    display: inline-block;
}
.competTab {
    margin-top: 0px;
}
.competTab .note {
    position: absolute;
    right: 7px;
   top:20px
}
.note {
    float: right;
    font-size: 13px;
    font-weight: 400;
}

.note.icon {
    position: relative;
    top: 8px;
}
.popup-padding {
    padding: 2px;
}

/* Step 1 create badge */
#defaultExpiredImgMsg {
    display: flex;
    align-items: center;
}
.btn-custom.active, .btn-standard.active {
    cursor: default!important;
}
.input-model {
    margin-top: 20px;
}
.outer-icon {
    margin-bottom: 35px;
}

/* outer images */
.gold-outer {
    content: url(../img/preview/seal-a8904b.png);
    background-image: url(../img/preview/seal-a8904b.png);
    background-size: cover;
}
.blue-outer {
    content: url(../img/preview/seal-00aced.png);
    background-image: url(../img/preview/seal-00aced.png);
    background-size: cover;
}
.purple-outer {
    content: url(../img/preview/seal-523e9f.png);
    background-image: url(../img/preview/seal-523e9f.png);
    background-size: cover;
}
.gray-outer {
    content: url(../img/preview/seal-808083.png);
    background-image: url(../img/preview/seal-808083.png);
    background-size: cover;
}
.red-outer {
    content: url(../img/preview/seal-ff4a54.png);
    background-image: url(../img/preview/seal-ff4a54.png);
    background-size: cover;
}
.empty-outer {
    content: url(../img/preview/seal-empty.png);
    background-image: url(../img/preview/seal-empty.png);
    background-size: cover;
}

/* inner images */
.lecturer-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_03_lecturer.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_03_lecturer.jpg);
    background-size: cover;
}
.attendee-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_04_attendee.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_04_attendee.jpg);
    background-size: cover;
}
.workshop-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_05_workshop.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_05_workshop.jpg);
    background-size: cover;
}
.speaker-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_06_speaker.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_06_speaker.jpg);
    background-size: cover;
}
.global-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_07_global-01.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_07_global-01.jpg);
    background-size: cover;
}
.star-inner {
    content: url(../img/preview/072213_BC-003_BadgeIcons_ALL_10_star.jpg);
    background-image: url(../img/preview/072213_BC-003_BadgeIcons_ALL_10_star.jpg);
    background-size: cover;
}
.empty-inner {
    content: url(../img/preview/color-empty.png);
    background-image: url(../img/preview/color-empty.png);
    background-size: cover;
}
.gold-inner {
    content: url(../img/preview/color-gold.png);
    background-image: url(../img/preview/color-gold.png);
    background-size: cover;
}
.blue-inner {
    content: url(../img/preview/color-blue.png);
    background-image: url(../img/preview/color-blue.png);
    background-size: cover;
}
.purple-inner {
    content: url(../img/preview/color-purple.png);
    background-image: url(../img/preview/color-purple.png);
    background-size: cover;
}
.gray-inner {
    content: url(../img/preview/color-gray.png);
    background-image: url(../img/preview/color-gray.png);
    background-size: cover;
}
.red-inner {
    content: url(../img/preview/color-red.png);
    background-image: url(../img/preview/color-red.png);
    background-size: cover;
}
.empty-inner {
    content: url(../img/preview/color-empty.png);
    background-image: url(../img/preview/color-empty.png);
    background-size: cover;
}

/* badge type */

.verified {
    content: url(../img/preview/type-verified.png);
    background-image: url(../img/preview/type-verified.png);
    background-size: cover;
    display: block !important;
}
.certified {
    content: url(../img/preview/type-certified.png);
    background-image: url(../img/preview/type-certified.png);
    background-size: cover;
    display: block !important;
}
.completed {
    content: url(../img/preview/type-completed.png);
    background-image: url(../img/preview/type-completed.png);
    background-size: cover;
    display: block !important;
}

/* badge banner */

.badge-banner-img {
    content: url(../img/preview/badge-banner.png);
    background-image: url(../img/preview/badge-banner.png);
    background-size: cover;
    display: block !important;
}
.badge-banner-empty {
    content: url(../img/preview/badge-banner-empty.png);
    background-image: url(../img/preview/badge-banner-empty.png);
    background-size: cover;
    display: block !important;
}
.outer-image a img {
    width: 110px;
    height: 110px;
    position: absolute;
}
.inner-image a img {
    position: absolute;
    height: 38px;
    margin: 31px 37px;
}
.badge-option a img {
    position: absolute;
    height: 111px;
    width: 111px;
}
.top-text,
.bottom-text {
    position: absolute;
    color: #FFF;
    font-size: 10px;
    width: 170px;
    width: 113px;
    text-align: center;
    left: 0;
    top: 73px;
}
.bottom-text {
    top: 82px;
}
.badge-banner img {
    width: 102px;
    height: auto;
    position: absolute;
    margin-left: 4px;
    margin-top: 8px;
}
.avg {
    width: 32%;
}
.wizard-content.inline .wizard-steps-panel {
    width: 60%;
    display: inline-block;
    height: 50px;
    margin-top: 10px;
}

.wizard-content.inline .modal-title {
    width: auto;
    float: left;
    margin-left: 20px;
    margin-top: 15px;
}

.wizard-content.inline .wizard-steps-panel.steps-quantity-4 .step-number {
    width: 25%;
}

.wizard-content.inline .close {
    width: 40px;
    display: inline-block;
}
.wizard-content.inline .close i {
    margin-right: 15px;
    margin-top: 20px;
}
.step1 .title {
    margin-top: 0px;
}
.step1 .info-form {margin-top:0px}
.step1 .col-form-label {padding-top:0px}
.step2_icon_title {
    background: none;
    padding: 0%;
    margin: 0px 0px 10px 0px;
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
}


/* Step2*/
.collapse-box {
    background:#F9F9F9;
    border:1px solid #DCDCDC;
    padding:10px 15px;
    border-radius: 5px;
    margin-top:15px
}
.collapse-box textarea {height: 100px;}

.collapse-box .col-form-label span {font-weight: 400;}
.collapse-box .note {float:right}
.collapse-box .note.icon {
    float: none;
    top: 0px;
    margin-left: 5px;
}

.collapse-box button {
    padding: 5px 10px;
    height: 30px;
}
.collapse-box button i {
    margin-left: 0px;
    font-size: 20px;
}

.collapse-box .card-body {
    margin-top:10px;
    border:none;
    background: #f9f9f9;
    padding:0px
}
    .panel-heading {
    position: relative;
  }
  .panel-heading[data-toggle="collapse"]:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f107"; /* "play" icon */
    position: absolute;
    color: #ffffff;
    background: #03bdf6;
    font-size: 16px;
    padding: 1px 8px;
    border-radius: 5px;
    line-height: 23px;
    right: 0px;
    top: calc(50% - 13px);

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-0deg);
    -moz-transform:    rotate(-180deg);
    -ms-transform:     rotate(-180deg);
    -o-transform:      rotate(-180deg);
    transform:         rotate(-180deg);
  }
  .panel-heading[data-toggle="collapse"].collapsed:after {
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(180deg);
    -moz-transform:    rotate(180deg);
    -ms-transform:     rotate(180deg);
    -o-transform:      rotate(180deg);
    transform:         rotate(1800deg);
  }

/* Roll Up with Badges MultiSelect*/
/* Roll Down with Badges MultiSelect*/
#my-form-4 .k-multiselect-wrap .k-select,
#my-form-6 .k-multiselect-wrap .k-select {position: relative!important;}
#my-form-4 .k-multiselect,
#my-form-6 .k-multiselect {
    cursor: pointer;
    height: 100%;
    border-radius:5px;
    width: auto;
    border:none;
    width:auto;}
#my-form-4 .k-multiselect-wrap.k-floatwrap,
#my-form-6 .k-multiselect-wrap.k-floatwrap {font-size:14px;height:auto; cursor: pointer;width: auto;}
#my-form-6 .k-multiselect-wrap.k-floatwrap {padding:0px 10px}
#my-form-4 .k-multiselect-wrap .k-input,
#my-form-6 .k-multiselect-wrap .k-input {height:40px;padding:0px;text-indent: 5px;cursor: pointer;}
#my-form-4 .k-state-focused>.k-multiselect-wrap,
#my-form-6 .k-state-focused>.k-multiselect-wrap {box-shadow:none}
#my-form-4 .k-state-hover>.k-multiselect-wrap,
#my-form-4 .k-state-focused>.k-multiselect-wrap,
#my-form-6 .k-state-hover>.k-multiselect-wrap,
#my-form-6 .k-state-focused>.k-multiselect-wrap  {background:#ffffff;border:1px solid #c3d2da;border-radius:5px}
#my-form-4 .k-multiselect-wrap>.k-i-close,
#my-form-6 .k-multiselect-wrap>.k-i-close {top: 3px; left: auto; right: 22px;}
#my-form-4 .k-multiselect-wrap li,
#my-form-6 .k-multiselect-wrap li {
    margin: 3px 2px;
    padding: 3px 5px;
    line-height: 12px;
    text-transform: none;
    border-radius: 50px;}
#my-form-4 .k-multiselect-wrap li > span,
#my-form-6 .k-multiselect-wrap li > span  {
    margin-right: .4em;
    vertical-align: middle;
}
#my-form-4 .k-multiselect-wrap li span > span,
#my-form-6 .k-multiselect-wrap li span > span {
    margin-left: 5px;
    font-size: 13px;
    border-radius: 0px;}
#my-form-4 .k-button.k-state-hover,
#my-form-4 .k-button:hover,
#my-form-6 .k-button.k-state-hover,
#my-form-6 .k-button:hover {
    background:#e1f5fe;
    border-color:#e1f5fe;
}

#child_badges_taglist .k-multiselect-wrap .k-select {
    position:relative;
}
#child_badges_taglist {width:90%}
#child_badges_taglist li, #prerequisite_taglist li{word-break: break-word;word-wrap: break-word;}
/* DropdownSameStyle*/

#my-form-4 .k-multiselect, #my-form-6 .k-multiselect  {
    font-size:14px;
    font-weight:600;
    width: 93%;
}
#my-form-4 .k-list>.k-state-focused,
#my-form-4 .k-list>.k-state-hover,
#my-form-6 .k-list>.k-state-focused,
#my-form-6 .k-list>.k-state-hover {
    color:#00B1F3;
    background:none;
    border:none;
    box-shadow:none;
}
.step4 .form-row.k-datepicker {width:99.5%}
.step4 .form-row .k-picker-wrap {
    padding:0px
}

.step4 .form-check {
    display:inline-block;
    padding-left:2px;
}
.check-container {
    display:inline-block;
    background:#daf4ff;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 5px;
    width:93%
}

.step4 .tab .form-check {
    border-radius: 5px;
    padding: 0px;
    width: 100%;
    margin-bottom: 5px;
    overflow-x: hidden;
}
.step4 .form-check .form-check-input {
    margin: 0px;
    position: relative;
    top: 2px;
    margin-right: 4px;
}

.step4 .tab i {
    display:inline-block
}

.step4 .form-check-label {
    margin-right: 5px;
    cursor: pointer;
}



/* Safari 10.1+ */

.step5 #preview_Custom_Image_email,
.step5 #preview_Expired_Image_email {
    display: inline-block;
}
.step5 .wrap-options {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.step5 .preview {
    text-align: right;
}
.step5 .k-editor-toolbar .k-button-group .k-tool {
    width: 40px;
    height: 40px;
    line-height: 36px;
    margin: 0;
}

.step5 .onoffswitch {
    margin-left: 10px;
    margin-top:0px;
}
.step5 h5 {
    font-weight: 600;
    margin: 0px;
    margin-right: 5px;
}
.step3 input {
    margin: 4%;
}
.step3 .col-sm-12 {
    padding: 0px;
}
.competencey-content .input-model .col-sm-12  {
    max-width:96%
}

.set_1 a {
    margin-left: 0%;
}
.set_2 a img {
    width: 60px;
    height:60px;
    border-radius: 50%;
    padding: 7px;
}
.set_1,
.set_2 {
    margin-top: 0px;
}
.set_1 .col-sm-12 {
    margin-top: 4%;
}
.selected {
    box-shadow: 0px 3px 2px rgba(132, 117, 117, 0.63);
    border: solid 2px #feffff;
    border-radius: 66%;
}
.set_1 a img {
    padding: 7px;
    border-radius: 50%;
}
#chooseOuter .selected {
    box-shadow: 0px 3px 2px rgba(185, 185, 185, 0.63);
    border-radius: 50%;
}
#chooseInner a img {
    margin-top: 0px;
    width: 60px;
    height: 60px;
}
.preview_image .selected {
    box-shadow: none !important;
}
.preview_image {
    opacity: 0.5;
}
.preview_image img {
    display: none;
    left: 30px;
    left:0px;
    cursor:default;
}
.preview_image img[src] {
    display: block;
}

.add_competency {
    display: none;
}
.add_competency input {
    margin: 1% 0%;
}
.add_competency img:hover {
    box-shadow: 0px 3px 2px rgba(185, 185, 185, 0.63);
    border-radius: 50%;
}
.pad-rgt-cus{padding-right: 18px;}
.other_input_roll_badges,
.other_input_roll_points,
.other_input_rolldown_badges {
    padding: 0px 15px;
    border-left: 1px solid #dcdcdc;
}

.other_input_roll_badges img,
.other_input_roll_points img {
    margin: 5px 0;
}
.other_input_roll_badges img:hover,
.other_input_roll_points img:hover {
    box-shadow: 0px 3px 2px rgba(185, 185, 185, 0.63);
    border-radius: 50%;
}
.other_input_roll_points #tab_1 {
    padding-top: 5%;
}
.other_input_roll_points #tab_2 input {
    margin-top: 2%;
}
.other_input_roll_points #tab_2 {
    padding-top: 2%;
}
.other_input_rolldown_badges .k-state-focused {
    border: 1px solid #00B1F3;
    box-shadow: 0px 0px 10px 2px rgba(0, 177, 243, 0.2);
    background-position: 0 0;
    outline: none;
}
.other_input_rolldown_badges  .k-multiselect-wrap {padding:0px}
.other_input_rolldown_badges .k-state-hover .k-multiselect-wrap {
    background:none
}
.other_input_rolldown_badges .k-multiselect .k-multiselect-wrap, .other_input_roll_badges .k-multiselect .k-multiselect-wrap{
	max-height: 155px;
    overflow: auto;
}
.bad-drop-down-hgt{height:310px !important;}
#wildcard_div .k-animation-container{left:15px !important;}
#child_badges_div .k-animation-container,
#prerequisite_div .k-animation-container{left:17px !important;}
#competency_points_div .k-animation-container{left:17px !important;top:162px !important;}
#expiryinPointsDiv .k-animation-container,#expiryinPointsDiv .k-dropdown-wrap,
#expiryinBadgesDiv .k-animation-container, #expiryinBadgesDiv .k-dropdown-wrap{left:0px !important;}
#expiryinPointsDiv .k-list-container,#expiryinBadgesDiv .k-list-container{left:5px !important;}
.bad-drop-down-hgt .k-list-container, .bad-drop-down-hgt .k-list-scroller{height:300px !important;}
.sec-title {
    margin: 12px 0px;
    color: #3f4d64;
    font-size: 14px;
    font-weight: 600;
}

.hidden-btn {
    display: none !important;
}
.small_button {
    width: 100px;
    display: inline-block;
    margin-left: 7px;
}
#rollBadgeBtnGrp button {
    margin: 5px 0px;
}
#rollBadgeBtnGrp button:disabled, #rollBadgeBtnGrp button[disabled]{
    cursor:not-allowed;
}
#rollBadgeBtnGrp h6 {
    font-weight: 600;
    margin-bottom: 0px;
}

/* mybadges editor*/
.wrap-custom-email-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.email-editor {
    padding: 5px 15px;
    width: 100%;
    color: #3f4d64;
    background: none;
    box-shadow: none;
    border-radius: 5px;
}

.email-editor .subject {
    padding: 5px .4em 0;
    height: 80px;
}

.k-editor > tbody >tr:first-child {display: block}
.kendo-desc-tr .k-editor > tbody >tr:first-child {
    display: none;
}
.kendo-desc-tr .k-editor .k-editable-area{height:auto;max-height:192px;}
#myModalAdd .k-editor > tbody >tr:first-child {display: block}
#editor {border:none}

.email-temp-link {
    margin-left: 5%;
}

/* Hierarchy*/
#childText {
    padding:0px
 }
/*.other_input_roll_points .reset , .other_input_roll_badges .reset {
	position:absolute; height:100%;
}
.other_input_roll_points .k-picker-wrap , .other_input_roll_badges .k-picker-wrap {
	background:transparent;
	border-radius: 5px;
}
.other_input_roll_points .crsr-disb .k-picker-wrap .k-input, .other_input_roll_badges .crsr-disb .k-picker-wrap .k-input{
	margin: -2px;
}
.other_input_roll_points .k-picker-wrap .k-input, .other_input_roll_badges .k-picker-wrap .k-input{
	text-indent: 0.4em;
	border-radius: 5px;
}
.other_input_roll_points .k-datepicker, .other_input_roll_badges .k-datepicker{
	margin-right: 0px;
	background:transparent;
}*/
/*.crsr-disb .k-state-disabled{opacity: 1;}
.crsr-disb #expiryin_points{background:transparent;}*/
.expire-div .k-dropdown .k-input {
    color: #7996BC;
    text-indent: .4em;
}
.expire-div .k-dropdown, .expire-div .k-dropdown-wrap{
	background:transparent;
	border-radius: 5px;
	border-color: #c3d2da;
}
.expire-div .k-state-disabled{opacity: 0.8;}
.badge-tab3-alert{
    margin-top: 7px;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #e52828;
    background-color: #f5f5f58c;
    padding: 3px 5px;
    border-radius: 4px;
    color: #e52828;
	width:315px;
	/*margin:4px auto 8px;*/
	margin: 4px 4px 8px 4px;
}
/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 3. ISSUEBADGECERT-ISSUEBADGECERT VIEW-ISSUEBADGECERT NEW EARNER ROLLDOWNLIST ///////////////////////*/
#editbadgeEarner .k-picker-wrap .k-input, .issueBadgeTab .k-picker-wrap .k-input, .datepicker-wrap .k-picker-wrap .k-input{text-indent: 0.4em;}
.email-middle {
    width: 100%;
    margin: 0 auto;
}

#myNewIssuanceForm .space-left-col {
    max-width: 24.333333%;
}
#myNewIssuanceForm .space-right-col {
    min-width:75%
}

.issueEmailBadge {
    margin: 10px 0px 10px 0px;
}
.IssueBadgeNewEarner.no-padding form {
    padding:10px 0px
}
.date-picker-align {
    margin-right: 7px;
}
.exp-date-pick .date-picker-align {
	margin-right: 0px;
}

.date-picker-align:last-child,
.date-picker-align.last-child {
    margin-right: 0 !important;
}
.file-name-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
#artifact3UploadOverlay{padding: 13px 10px;}
.file-name-field.line_input1, #artifact3UploadFile {
    flex:1
}

.col-action,
.kd-col-center,
.kd-val-center {
    text-align: center !important;
}
.IssueBadgeView .col-padding {
    padding: 0px 0px 0px 15px;
}

.IssueBadgeView .badge-table th{text-align:center !important;}
.issueBadgeTab {
    margin: 1% 0% !important;
}
.issueBadgeTab td {
    padding: 8px 3px !important;
}

.issuebadge-col input {font-size:14px}

.issueBdgNewEar,
.issueBdgNewEarDet {
    margin: 0px 0px !important;
}
.issueBdgNewEarDet td {
    margin: 0px 0px !important;
}
.issueBdgNewEarDetBor {
    margin: 0px 10px 10px 4px !important;
}

.issue-badge-table input[type=checkbox] {
    position: absolute;
}
.issueEmailBadge h3 {
    font-size: 20px;
    font-weight: 700;
}
.issueEmailBadge h3 span {
    margin-left: 0px;
    font-weight: 400;
    color:#00B1F3
}
.issueEmailBadgeExisting {
    font-size: 14px;
    margin: 5px -7px -1px -2px;
}
.issueEmailBadgeExisting span {
    margin-left: 0px;
    font-weight: 100;
}
.IssueBadgeNewEarner, .IssueBadge {
    border: none;
    border-radius: 10px;
    background:white;
    padding: 5px;
}
.IssueBadgeNewEarner h5, .IssueBadge p {
    font-weight:600;
}

.IssueBadgeNewEarner .datepicker-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.IssueBadgeNewEarner .datepicker-wrap .k-datepicker {
    flex:1
}

.preview_container {
    border-width: 0.37px;
    border-color: rgb(145, 145, 145);
    border-radius: 3px;
    z-index: 0;
    margin-bottom: 10px;
}
.preview_container a img {
    border-width: 0.37px;
    border-color: rgb(145, 145, 145);
    border-radius: 3px;
    z-index: 0;
    padding: 0px;
    margin: 0 auto;
    width: 120px;
    height: auto;
    display: block;
    cursor: default;
    padding-top: 25px;

}

.IssueBadge .issue_input_table input {
    width: 150px;
}
.responsive-header {
    display: none;
}

#earner_grid .k-checkbox+.k-checkbox-label:active:after, #earner_grid .k-checkbox:active+.k-checkbox-label:after {
  box-shadow: none;
}

.earner-details td {
    width: 120px;
}

/*Mobile*/

.issue_input_table.mobile,
.mobile thead,
.mobile tbody,
.mobile th,
.mobile td,
.mobile tr {
    display: block;
}
.mobile tr {
    padding-bottom: 2%;
}
.mobile thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.mobile td {
    border: none;
    position: relative;
    text-align: left;
    white-space: nowrap;
}
.mobile .responsive-header {
    display: inline;
    padding: 0px !important;
    padding-left: 5px!important;
    border: none;
}
.mobile .k-datepicker {
    width: 250px !important;
}
.mobile input {
    width: 250px !important;
    border: none;
    border-bottom: solid 1px #00d7f5;
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #00d7f5 4%);
    background-position: -250px 0;
    background-size: 250px 100%;
    background-repeat: no-repeat;
    color: #000;
}
.mobile td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
}

/* Rolldown list*/
/* Rolldownlist - Badges*/

.roll-down-container hr {margin:20px 0px}
.child-badge-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.child-badge-title span {
    background: rgb(221, 221, 221);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 600;
}

#badeges_list_rolldown .badge-image-title span {
    font-weight:600
}
.single-badge, .multiple-badge {
    justify-content: center;
}

#badeges_list_rolldown .badge-image img,
.mul-badge-image img,
#child_badeges_list img,
#parent_badeges_list img,
#child_badeges_list img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
#badeges_list_rolldown.badge-image-title {
    text-align: center;
    font-size: 14px;
    color: #111111;
    border-radius: 5px 5px 0px 0px;
    margin-bottom:5px;
    font-weight:400;
}

#badeges_list_rolldown, #child_badeges_list,
#parent_badeges_list {
    display: inline-block;
    margin: 10px 0px;
    width: auto;
    height: auto;
    background: white;
    padding: 15px 20px;
    border-radius: 10px;

}
#child_badeges_list,
#parent_badeges_list {background:none}
#badeges_list_rolldown {border: 1px solid #74cef0;}
#badeges_list_rolldown .badge-image,
.mul-badge-image {
    height: 105px;
    width: 105px;
    cursor: pointer;
    display:inline-block
}

.mul-badge-image {
    background: white;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
    width: 110px;
    margin:5px

}
.badge-image,
.mul-badge-image {
    border:none;
    margin: 0px 5px;
}
.divider {position:relative;}
.divider .alert {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
}
.multiple-badge {
    text-align: center;
}

.popup-desc {
    white-space: normal;
    word-break: break-word;
	word-wrap: break-word;
}
.issue-badge-btn {
    clear: both;
    text-align: right;
}
.issue-badge-btn button {
    margin: 0px 5px 5px;
    width: 185px;
    padding: 8px 0px;
}
.issue-badge-view {
    padding-top: 6px;
    margin-bottom: 10px;
}
.issue-badge-view h6 {
    padding: 1% 1% 1% 0% !important;
}

/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 4. MY EARNERS ///////////////////////*/
.my-ear-ttip, .ear-dropbox{margin-left:5px;}
.k-pager-wrap .k-link, .k-pager-wrap .k-state-selected {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;

}
.k-pager-numbers .k-link {
    color: #AFADAD;
}
.k-pager-numbers .k-state-selected {
    color: #fff;
    background-color: #1ab9f4;
}
.k-pager-numbers .k-link.k-state-hover, .k-pager-numbers .k-link:hover {
    color: #fff;
    background-color: #1ab9f4;
}

.k-grid td.k-state-selected, .k-grid tr.k-state-selected>td {
    color: #1A1A1A;
    background-color: #f9f9f9;
}

.k-grid tr.k-state-selected>td,
.k-grid td.k-state-selected, .k-grid tr.k-state-selected>td  {
    border-bottom: 1px solid #c5d5db;
}
.k-grid tr.k-state-selected .checkbox-cell {border-left:none!important}
.k-checkbox:checked {
    border-color: #D0CCCC;
    color: #fff;
    background-color: #969291;
}
.k-checkbox:checked:focus {
    border-color: #D0CCCC;
    box-shadow: 0 0 0 2px rgba(185, 184, 184, 0.3);
}
.k-block ::selection, .k-panel ::selection, .k-text-selection ::selection, .k-widget ::selection {
    background-color: #716e6da1;
    color: #fff;
}

.kendo-common-grid.k-grid td {
    font-size: 13px;
}

.alternateEmail {
    font-size: 11px;
}

#check-email-dialog button {
    font-size: 0.6875em !important; height: 19px !important; margin-left: 222px !important; margin-right: 0 !important; min-width: 75px !important; padding: 0 !important;
}

#check-email-dialog button.cancelCheckEmail {
    margin-left: 0px !important;
}
#view-rosters-table table thead tr.k-filter-row span.k-widget,#view-rosters-table table thead tr.k-filter-row span.k-state-hover,#view-rosters-table table thead tr.k-filter-row span.k-state-focused,#view-rosters-table table thead tr.k-filter-row span.k-state-default{background:#f6f6f6 !important; border:1px solid #f6f6f6;box-shadow:none !important;}

#view-rosters-table table thead tr.k-filter-row input{background:#fff !important; border:1px solid #f6f6f6;color:#000;padding-right: 0px;min-width: 80px; margin-right: -15px;}
#view-rosters-table .k-button-icon {
margin-top: 5px;
}
#view-rosters-table .k-dropdown-operator {
    padding: 3px 0;
    margin: 0;
}
#view-rosters-table .k-autocomplete .k-clear-value {
    height: 20px;
    width: 20px;
    color: #ccc;
    margin: 3px 5px;
}
.ovarlay-edit{border: 0;}
.ui-dialog-buttonpane .ui-button, .ui-dialog-buttonpane button[type=button]:hover, button[type=button]:active{background-color:#a6a6a6;color:#fff;}
.ui-dialog-buttonpane button[type=button]:focus,.ui-dialog-buttonpane button[type=button]:hover, button[type=button]:active{background-color:#a6a6a6;color:#fff;}
div.k-grid-norecords{display: inline-block;}
.k-grid-norecords{
	min-height: 40px;
    line-height: 32px;
}
#issue_badgecert_grid .k-grid-norecords{
	height: 20%;
}


/* Edit Badge Issuance PopUp*/

.view_badge_details_box1 {
    background:#F9F9F9;
    margin-bottom: 5px;
    padding: 12px;
    border-radius: 8px;
   /* padding-top: 10px;
    margin-top: 10px;*/
}
.view_badge_details_box1 label {text-align: right;}
.view_badge_details_box1 h5 {
    font-weight:600;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom:10px
}
.view_badge_details_box2 .mobile-num-wrap .prefix-code {
    position: absolute;
    left: 0px;
    width: 85px;
}
.view_badge_details_box2 .mobile-num-wrap .input-wrap {
    padding: 0 0px 0 100px;
}
.view_badge_details_box2 {
    margin-bottom: 10px;
    padding-top: 10px;
    margin-top: 0px;
}
.pointerLink {
    cursor: pointer;
    margin:5px 0px;
    color:#00B1F3!important
}
.pointerLink:hover {
    text-decoration: underline!important;
}

.myearners .col-filters h6 {margin-left: -10px;margin-bottom:8px}

.myearners .k-datepicker {width:99.5%}

.myearners .k-upload-button {
    padding: 8px 5px;
}
.myearners .col-filters .no-right {
    padding-right:0px;
    padding-left:5px
}

#earnExpDate .k-datepicker {
    margin-right:0px
}
#updateIssuanceCheck {
    position: relative;
    top:-2px;
}
.myearners {
    background-color: #fff;
    border:none;
    padding: 15px 5px;
    margin: 15px 30px 35px 30px;
    border-radius: 10px;
}
.myearners #massUplaodRosterButton {
    margin-top: 5px;
    height: 40px;
}
.myearners .border-right {
    height: 100%;
}
.mass_upload_roster_content {
    margin-bottom:5px
}

.file-upload-wrap {
    position: relative;
}

.file-upload-wrap .help {
    position: relative;
    right: 0px;
    top: 0;
    color:#00B1F3
}
.my-earners-dt {
    margin: 0px 0px 5px 0px;
    width: 100%;
}

#updateIssuanceOnAll .help {
    float: right;
}
.demo-hint {
    line-height: 22px;
    padding-top: 5px;
    color: #1f2836;
    text-align: center;
    font-weight:600
}

#badge_name img {
    width: 20px;
}
#badge_name li {
    height: 34px;
    width: 100%;
}
#badge_name {
    background-color: #fafafa;
    height: 34px;
}
#badge_name li span.k-link {
    padding: 10px !important;
}
#badge_name .k-item {
    line-height: 1em;
    min-width: 300px;
}

/* Material Theme padding adjustment*/

.k-material #badge_name .k-item,
.k-material #badge_name .k-item.k-state-hover,
.k-materialblack #badge_name .k-item,
.k-materialblack #badge_name .k-item.k-state-hover {
    padding-left: 5px;
    border-left: 0;
}
#badge_name .k-item > span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    margin: 20px 10px 10px 5px;
}
#badge_name .k-item > span:first-child {
    -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
}
#badge_name h3 {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 0 1px 0;
    padding: 0;
}
#badge_name p {
    margin: 0;
    padding: 0;
    font-size: .8em;
}

#exportReport {
    cursor: pointer;
}
#exportReport:hover {
    text-decoration: none;
}
#exportAllBadgeUrl {
    cursor: pointer;
}
#exportAllBadgeUrl:hover {
    text-decoration: none;
}
#badge_name_listbox {
    width: 180px !important;
}
#badge_name_listbox li {
    position: relative;
    padding-left: 35px !important;
    width: 95%;
}

.edit_earner_badge_details td {
    padding: 2px 5px;
    font-weight: 400;
    word-break: break-word;
    word-wrap: break-word;

}

.edit_earner_badge_details tr td:first-child {
    width: 18%;
    color: #57759B;
}
.custom-checkbox {
    padding-left: 0px;
}
.exprt-btn {
    text-align: right;
   margin:0;
   padding:0;
    width:100%
}
.exprt-btn span {
    margin-left: 5px;
}
#massUplaodRosterButton {
    width: 100%;
    margin-top: 10px;
    height:45px
}
.earn-filt-btn {
    padding: 0px !important;
    height:100%;
    margin-top:2.5rem;
    display:inline-block;
    width:100%;
    text-align: right;
}

.IssueBadgeView .earn-filt-btn {
    text-align: right;
}
.IssueBadgeView .earn-filt-btn {margin-top:0rem}
#filterEarers,
#clearFilterEarers {width:auto;display: inline-block;margin-right:0px;margin-left:0px}


.edit-badge-checkbox {
    margin: 0 2px 0 0!important;
    vertical-align: middle;
    opacity: 1;
    z-index: 1;
    position: static;
}
#editbadgeEarner .view_badge {
    margin: 15px 0px;
    height: 120px;
    width: 120px;
}
#editbadgeEarner .space-left-col {padding-right:0px}

#editbadgeEarner input[type="text"] {
    width: 100%;
    min-height: 35px;
}
#editbadgeEarner .k-datepicker input[type="text"] {
    min-height: 28px;
}
#editbadgeEarner .ab-icon-pos {
    top: 7px;
    right: 15px;
}

#editbadgeEarner .square-i-btn.cloud,
#myNewIssuanceForm .square-i-btn.cloud {
    padding: 14px 11px;
    font-size: 12px;
}

#editbadgeEarner .square-i-btn.red,
#myNewIssuanceForm .square-i-btn.red {
    font-size: 12px;
    padding: 14px 13px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #editbadgeEarner .upload_input,   #editbadgeEarner .date_input {
        flex:1
    }
}
#earner_grid {
    width:100%
}
#edit_earner_grid tbody tr td:nth-child(5),
#edit_earner_grid thead tr th:nth-child(5) {
    text-align: center !important;
}
#earner_grid .k-grid-header th.k-header>.k-link:after {
    content: "\f0dc";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
    color: #2C2626;
    font-size: 14px;
}
.all-btn-box {margin-top:10px;margin-bottom:10px;}
.all-btn-box .action-dropdown{margin-left:18px;}
.action-dropdown .btn-default:hover{background:#ececec;}
.all-btn-box .text-left i{margin-left:5px;}
.action-dropdown{display:inline-block;}
.action-dropdown ul{padding:15px;}
.action-dropdown ul li{border:1px solid #ccc;border-radius:4px;margin-bottom:10px;white-space: nowrap;padding: 5px 25px 5px 10px;position:relative;}
.action-dropdown ul li:last-child{margin-bottom:0;}
.action-dropdown ul li i{position:absolute;right:10px;top:11px;}
.action-dropdown ul li:hover{background:#eae8e8;cursor:pointer;}
.action-dropdown .dropdown-toggle{width:185px;}
.all-btn-box .k-dropdown, #dropdownMenuLink{width:200px;}
#filter_by_ActDeAct-list .k-list-optionlabel.k-state-selected.k-state-focused{margin-left: 7px;}
#successFailAlertBox .modal-body h6{padding-top: 10px;}
.my-earners-filt span.k-dropdown-wrap{background-color: #ececec;}
.iss-id-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 14px;
    font-weight: 400;
	margin-left:2px;
	vertical-align: top;
}

.bad-url-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.open-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.status-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.create-date-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.mod-date-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.bad-iss-id-check span{
	text-decoration: none;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 300;
	margin-left:2px;
	vertical-align: top;
}
.btn-group.dropdown li.li-ear-iss-box{padding:5px 12px 5px 10px;}
.btn-group.dropdown .iss-id-check ul{padding:0;}
.btn-group.dropdown .iss-id-check li{margin-top: 4px;margin-bottom: 8px;padding: 5px 2px 2px 10px;}
/*.btn-group.dropdown .iss-id-check li{border: none; margin: 0; padding: 2px;}*/
.iss-id-check, .iss-id-check span{cursor:default}
.iss-id-check input{cursor:pointer}
.iss-id-check .spn-title{color: #000; font-weight: 600;margin-bottom:0;}
/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 5. MY SETTINGS ///////////////////////*/
/*.my-set-ttip{margin-left:5px;}*/
.settings-icon {
    margin-right:7px;
    font-size:16px;
    position: relative;
    top: 1px;
}
.settings-image {
    width:22px;
    height:22px;
    margin-right:8px;
}
.content, .content-wrap {
    border: none;
    margin: 5px 25px 10px 25px;
}
.io-images button {
    width:16%
}
/* Tab */
.tab-col {
    padding-right: 0px;
}
.mysettings div.tab button {
    width: auto;
}
.mysettings #tab_1,
.mysettings #tab_2,
.mysettings #tab_3,
.mysettings #tab_4,
.mysettings #tab_5,
.mysettings #tab_6 {
    height: auto;
}

.mysettings #tab_1 .save-button {text-align: right;}
.mysettings #tab_5 .onoffswitch {
    margin:0 auto
}
.mysettings #tab_1 .form-group {
    margin-bottom:0px
}

.col-content {background:white;border-radius:10px;}
.mysettings #tab_1 .col-content,
.mysettings #tab_3 .col-content,
.mysettings #tab_4 .col-content,
.mysettings #tab_5 .col-content,
.mysettings #tab_6 .col-content {
    padding: 10px;
}
#SaveQRURLSect {padding-right:0px;background: #fff;border-radius: 10px;}
#updateQRCode{margin: 10px 10px;}
.mysettings #tab_1 .col-content,.mysettings #tab_7 .col-content{
    padding: 10px 20px 10px 20px;
}
.mysettings #tab_8 .col-content {
	padding: 10px 0px 10px 0px;
}
.mysettings #tab_1 .col-content h5,.mysettings #tab_8 .col-content h5 {border-bottom:1px solid #dedede;padding-bottom:4px}
.mysettings #tab_7 .col-content h5 {border-bottom:1px solid #dedede;padding-bottom:20px}
.mysettings #tab_1 .col-form-label {
    text-align: left;
}
.mysettings #tab_2 .col-content {
    padding:20px 10px;
}
.mysettings #tab_1 .space-left-col {padding-right:0px}
.mysettings #tab_1 .api-info .col-form-label {text-align: left;}
.api-info {padding: 12px 4px!important;}
#tab_3 .col-content h5,
#tab_4 .col-content h5,
#tab_5 .col-content h5,
#tab_6 .col-content h5 {padding-bottom:5px;border-bottom:1px solid #dedede}
#addExprWrap label{margin-right:3px;}
#addExprWrap input, #addExprWrap input:hover{border: 1px solid #c3d2da; border-radius: 5px; height: 25px;}
#addExprWrapTitle {margin-bottom:15px;}
.option-wrap {
    display:flex;
}
#tab_3 h5,
#tab_4 h5,
#tab_5 h5 {font-size:14px}
#tab_4 .option-wrap {padding: 10px 0px;}
#tab_3 .container-fluid {padding:0px}
#tab_3 .col-form-label, #tab_5 .col-form-label, #tab_7 .col-form-label {font-weight: 400;}
.option-col {flex:1;text-align: center;}
.option-col .onoffswitch {margin: 0 auto;margin-bottom: 5px;}
.mysettings #tab_3 .col-content,
.mysettings #tab_4 .col-content,
.mysettings #tab_5 .col-content,
.mysettings #tab_6 .col-content {margin-bottom:10px;}
.set-txt-span{font-weight: 400;color: #3f4d64; margin: 2px 0px; padding-top: 2px;pointer-events: none;}
.reminder-inner-left-div{position: relative; padding-right: 70px;}
.rem-dyn-div{margin-bottom:10px;}
.remind-left-div{border-left:1px solid #dedede;}
.remind-left-div >div{padding-right:10px;padding-left:30px;}
.remind-icon-act{position:absolute;right:0;top:5px;}
.btn-secondary-blue{float:right;height: 35px; padding: 5px 15px;}
.btn-secondary-blue .fa-plus{
	border-radius: 50%;
	background: #FFFFFF;
	padding: 2px;
	color: #00B1F3;
}
#addExprWrapTitle:after{content:"";display:table;clear:both;}
#addExprWrapTitle .fa-plus{
	border-radius: 50%;
    background: #00B1F3;
    padding: 1px;
    color: #FFFFFF;
    float: right;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 14px;
}
#addExprWrapTitle .fa-save {
    padding: 1px;
    color: #00B1F3;
    float: right;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 20px;
    margin-right: 5px;
    margin-top: 1px;
}
#addExprWrapTitle .fa-plus.disabled{border: 1px solid #d9dbdc; background: #d9dbdc; color:#FFFFFF;cursor: not-allowed;}
#addExprWrapTitle span{pointer-events:none;}
.remind-icon-act .fa-trash-alt{color:#e05050;}
.remind-icon-act .fa-save{color:#00B1F3;font-size: 14px;}
.remind-icon-act i {
    margin-left: 10px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}
#addExprWrap .alertdanger{color: #d23434;display:none;}
#addExprWrap {text-align:left;}
.add-exp-tit-help{font-size:14px; float: left; margin-top: 7px;color: #00B1F3;margin-left:5px;}
#tab_3 .fade {opacity: .5;}
#tab_4 .col-form-label {font-weight:400}
#tab_4 h5 i {font-size:13px}
#tab_3 .table thead,
#tab_4 .table thead,
#tab_5 .table thead,
#tab_6 .table thead
{margin-bottom:20px}
#tab_3 .table thead tr th,
#tab_5 .table thead tr th,
#tab_6 .table thead tr th,
#tab_4 .table thead {
    border:none;
    border-top:none;
    padding: 0px 0px 20px 0px;
    font-size:16px;
}

#tab_3 .table thead tr,
#tab_5 .table thead tr  {
    background:white
}


#tab_2 figcaption {
    width: 78px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab_2 .k-upload-button,
#tab_2 .k-upload-files {width:100%}
#tab_2 .preview_container {
    border-width: 0.37px;
    border-color: rgb(145, 145, 145);
    border-style: solid;
    border-radius: 3px;
    background-color: rgb(240, 250, 255);
    z-index: 0;
    width: 229px;
    height: 214px;
    float: right;
}
#tab_2 .preview_container .empty_container {
    border-width: 0.37px;
    border-color: rgb(145, 145, 145);
    border-style: solid;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    width: 134px;
    height: 120px;
    z-index: 1;
    margin: 20%;
}
#tab_2 .preview_container {
    visibility: hidden;
}
#tab_3 .table td, #tab_5 .table td, #tab_6 .table td  {border-bottom: 1px solid #e2e2e2; vertical-align: middle;}
#tab_3 .help, #tab_5 .help, #tab_6 .help {margin:0px 2px}
#tab_3 .table td {padding:2px}

.qr-url-sect .tooltip{
	margin-left:10px;
}
#tab_6 h6{margin-bottom:20px;}

.qrcode-table {display: flex;margin: 10px 0px;align-items: center;}
.qrcode-table tr th {border: none;}
.qrcode-table tr th strong {margin-left: 0px!important}
.qrcode-table tr th:first-child {
    width:75px;
    vertical-align: middle;
    padding: 0px;
}
#QR_Code_Tab label{
	line-height: 27px;
}
#CustomQRURL, .qr_type_of_url{width:300px;vertical-align: middle;}
#CustomQRURL{
	border: 1px solid #c3d2da;
    border-radius: 5px;
    resize: none;
    padding: 8px 10px;
	margin-left: 3%;
}
#QR_Code_Tab .form-group:first-of-type{
	margin-bottom: 28px;
}
.on-off-ctrl{display: inline-block; vertical-align: middle;}
.qr-url-sect{padding:15px 0px;}
.setg-icon-shadow{
	border:1px solid #e8e8e8;background: #F6F6F6;padding: 15px;border-radius: 5px;margin: 10px 0;
}
.cert-icon-shadow{
	border:1px solid #e8e8e8;background: #F6F6F6;padding: 15px;border-radius: 12px;position:relative;min-height:180px;
}
.just-cont-center{justify-content:center;}
.setg-icon-div{
	display: grid;align-items: center;justify-content: center;min-height: 150px;border:2px solid #F9F9F9;background: #1F2836;border-radius: 5px;
}
.cert-btn .btn{width: 150px;padding: 5px;}
.setg-icon-div a span,.setg-icon-div a{display: block;text-align: center;color: #F9F9F9;text-decoration:none;}
.setg-icon-div a img{height: 50px; margin-bottom: 10px;}
.set-prof.setg-icon-div :hover{background: url('../img/mysettings/profile-hover.png');}
.setg-icon-shadow:hover,.cert-icon-shadow:hover{
	background: #CAEFFF;color:#CAEFFF;
}
.setg-icon-div:hover{
	color:#CAEFFF;
}
.poi-evt-none-crsr-disb .setg-icon-div{ background: #b4b6b9;}
/*certificate section*/
#certificateList img{height:148px;width:100%;}
.certf-id-tle{white-space: nowrap;overflow: hidden;}
.cert-page-top-div{border-bottom:1px solid #ddd;}
.cert-page-top-div button{float:right;padding: 5px 10px;}
.cert-page-top-div:after{clear:both;}
.certificate-preview{
	background:#ddd;
	min-height: 385px;
    border-radius: 5px;
}
.certificate-preview img{
	padding: 20px;
    margin: 0 auto;
    width: 100%;
}
#CertificateName{display: inline;width: 90%;}
.cc-alert-msg{
	color: #3f9653;
	background-color: #e7ffed;
	margin-left: 13px;
	padding: 3px 10px;
    border-radius: 4px;
    width: 175px;
    text-align: center;
}
.cert-help{
	margin-top: 20px;
    padding: 0;
}
.cert-radio .checked{
	background: #1F2836;
    padding-top: 2px;
    margin-bottom: 2px;
    padding-right: 4px;
    color: #FFF;
    border-radius: 2px;
}
.cert-top-input-box [class*='col-']{padding-left:10px;padding-right:10px;}
#elemStyleDiv [class*='col-md']{padding-left:10px;padding-right:10px;}
.font-setg-wrap, .cert-top-input-box{margin-left:-10px;margin-right:-10px;}
.cert-top-input-box .cert-label{padding-top:10px;}
#image-parent-cont .wild-card-div{padding-left:8px;}
#previewCertificate{height: 100%;width: 100%;}
#custCertfUploadForm .btn {
	width: 110px;
    margin-left: 10px;
}
#custCertfUploadForm {display: flex;align-items: start;}
#certWalletUploadImg {width: 235px;}
#certListBtn{cursor: pointer;color: #00B1F3;}
#certListBtn:hover{text-decoration: underline;}
#custCertfUploadForm .k-upload-button{width: 200px;line-height: 15px;}
#certUploadImgdMsg {
	position: absolute;
    background: #FFF8F8;
    color: #d23434;
    top: -26px;
	white-space: nowrap;
}
/* form */
.mysettings  .phone-num-wrap,
.view_badge_details .phone-num-wrap,
.earner-details .phone-num-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: row;
}


.mysettings  .phone-num-wrap .list-ctry,
.view_badge_details .phone-num-wrap .list-ctry,
.earner-details .phone-num-wrap .list-ctry
{
    background: white;
    padding: 5px 0 5px 5px;
    height:40px;
    border-radius: 5px;
    border: 1px solid #c3d2da;
    cursor: pointer;
    margin-right:5px;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-flex: 2;
    flex:2;
}


.mysettings .phone-num-wrap .list-ctry:hover,
.mysettings .phone-num-wrap .list-ctry:focus,
.mysettings .phone-num-wrap .list-ctry:active,
.view_badge_details .phone-num-wrap .list-ctry:hover,
.view_badge_details .phone-num-wrap .list-ctry:focus,
.view_badge_details .phone-num-wrap .list-ctry:active,
.earner-details .phone-num-wrap .list-ctry:hover,
.earner-details .phone-num-wrap .list-ctry:focus,
.earner-details .phone-num-wrap .list-ctry:active {
    border: 1px solid #00B1F3;
    box-shadow: 0px 0px 10px 2px rgba(0, 177, 243, 0.2);
    background-position: 0 0;
    outline: none;
}

.mysettings .phone-num-wrap .prefix-code,
.view_badge_details .phone-num-wrap .prefix-code,
.earner-details .phone-num-wrap .prefix-code  {
    position: relative;
    margin-right:5px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1
}
.view_badge_details .phone-num-wrap .prefix-code {margin-right:0px}

/*
.mysettings .phone-num-wrap .prefix-code .line_input1,
.view_badge_details .phone-num-wrap .prefix-code .line_input1,
.earner-details .phone-num-wrap .prefix-code .line_input1 {
    padding-left: 20px;
}*/
.profile_table .prefix-code:before{
    content: '+';
    position: absolute;
    font-size: 20px;
    color: #3f4d64;
    font-weight: 400;
	top: 6px;
    left: 3px;
}
.profile-edit-mode #profileMobileCtryCode,.profile-edit-mode #profileCtryCode{padding-left: 14px;}
.profile_table .prefix-code{position:relative;}

/*
.mysettings .phone-num-wrap .prefix-code:before,
.view_badge_details .phone-num-wrap .prefix-code:before,
.earner-details .phone-num-wrap .prefix-code:before {
    content: '+';
    position: absolute;
    left: 9px;
    top: 6px;
    font-size: 20px;
    color: #3f4d64;
    font-weight: 400;
}*/
.mysettings .phone-num-wrap .input-wrap,
.view_badge_details .phone-num-wrap .input-wrap,
.earner-details .phone-num-wrap .input-wrap {
    margin-right:5px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1
}

.mysettings .phone-num-wrap .ext-number,
.view_badge_details .phone-num-wrap .ext-number,
.earner-details .phone-num-wrap .ext-number {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1;
}

.mysettings .phone-num-wrap .mobile-input-wrap,
.view_badge_details .phone-num-wrap .mobile-input-wrap,
.earner-details .phone-num-wrap .mobile-input-wrap {
    padding: 0px 0px 0px 95px;
}
.mysettings .mobile-num-wrap,
.view_badge_details .mobile-num-wrap,
.earner-details .mobile-num-wrap {
    position: relative;
    padding-top: 0px;
}
.flagstrap {
    display: inline-block;
    position: relative;
    width: auto;
    margin-right: 5px;
    flex:1
}
.flagstrap button {width:100%}
#flagstrap-drop-down-ZAto2VFO,
#flagstrap-IIUw2EAW {padding:5px 8px}
#basic select, #basic2 select {width: 100%;}
#basic ul li,
#basic2 ul li {font-size:14px;font-weight:400;padding:5px;width: 260px;}
.set-phone-box .cc-picker-code-select-enabled{width: 158px;/*width: 195px;*/}
.admin-phone.set-phone-box .cc-picker-code-select-enabled{width: 145px;/*width: 195px;*/}
/* Country list*/
.phone-n {display:flex}
.country-list-wrap {
    border: 1px solid #c3d2da;
    border-radius: 5px;
    height: 40px;
    padding: 0px 0px 0px 10px;
    background: white;
    font-weight: 400;
    display: flex;
    width: 100%;
}
.phone-n .ext-number {
    width: 145px;margin-left: 5px;
}
.admin-phone .phone-n .ext-number {
    width: 138px;margin-left: 5px;
}
.input-reset,
.input-reset:hover,
.input-reset:active,
.input-reset:focus {
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
    background:none!important;
    padding-right:0px!important;
    width: 100%;
}
.prof-upd{margin-top:20px}
#adminList.k-grid td{
    padding: 0px 5px;
}
/*certificate*/
.cert-tab, .wallet-tab{
	float: left;
	min-width: 100px;
	width: auto;
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
	background:#EEEEEE;
	color: #000 !important;
	border: none;
}
.cert-tab{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.wallet-tab{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.cert-tab.active, .wallet-tab.active{
	background:#212735;
	color: #FFF !important;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/*Only IE */
@media screen and (min-width:0\0){
	.set-phone-box .phone-n .ext-number{width:90px;}
	*::-ms-backdrop, .set-phone-box .phone-n .ext-number{width:145px;}
	.set-phone-box .cc-picker-code-select-enabled{width:90px;}
	*::-ms-backdrop, .set-phone-box .cc-picker-code-select-enabled{width:158px;}
	.set-phone-box .phone-n .country-list-wrap{width:235px;}
	*::-ms-backdrop, .set-phone-box .phone-n .country-list-wrap{width:100%;}

	.profile-edit-mode .phone-n .country-list-wrap{width:auto;}
	*::-ms-backdrop, .profile-edit-mode .phone-n .country-list-wrap{width:100%;}

	.phone-and-ext .country-list-wrap{width:259px;}
	*::-ms-backdrop, .phone-and-ext .country-list-wrap{width:100%;}
	.phone-and-ext .cc-picker-code-select-enabled{width:90px;}
	*::-ms-backdrop, .phone-and-ext .cc-picker-code-select-enabled{width:158px;}
	.phone-and-ext .phone-n .ext-number{width:90px;}
	*::-ms-backdrop, .phone-and-ext .phone-n .ext-number{width:145px;}

	#editbadgeEarner #phoneIncWdth .country-list-wrap{width:257px;}
	*::-ms-backdrop, #editbadgeEarner #phoneIncWdth .country-list-wrap{width:100%;}
	#editbadgeEarner #phoneIncWdth .cc-picker-code-select-enabled{width:90px;}
	*::-ms-backdrop, #editbadgeEarner #phoneIncWdth .cc-picker-code-select-enabled{width:175px;}
	#editbadgeEarner #phoneIncWdth .phone-n .ext-number{width:90px;}
	*::-ms-backdrop, #editbadgeEarner #phoneIncWdth .phone-n .ext-number{width:145px;}

}
#PhoneCountryList,
#PhoneCountryList:focus,
#PhoneCountryList:hover,
#PhoneCountryList:active,
#adminPhoneCountryList,
#adminPhoneCountryList:focus,
#adminPhoneCountryList:hover,
#adminPhoneCountryList:active,
#MobileCountryList,
#MobileCountryList:focus,
#MobileCountryList:hover,
#MobileCountryList:active {
    border: none;
    box-shadow: none;
    outline: none;
}
.mysettings .phone-num-wrap .country-code{
    -webkit-box-flex: 2;
    -ms-flex: 2;
    -moz-box-flex: 2;
    flex:2
}

.view_badge_details .phone-num-wrap .country-code,
.earner-details .phone-num-wrap .country-code{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1}

.view_badge_details .phone-num-wrap .country-code {margin-right:5px}

.mysettings .phone-num-wrap .mobile-number,
.view_badge_details .phone-num-wrap .mobile-number,
.earner-details .phone-num-wrap .mobile-number {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1
}

.view_badge_details .phone-num-wrap .mobile-number-container {flex:1}

.mysettings .phone-num-wrap .mobile-prefix-code,
.view_badge_details .phone-num-wrap .mobile-prefix-code,
.earner-details .phone-num-wrap .mobile-prefix-code {
    left: unset;
}
.settings-conf-art-footer{border-top: none;}

/* Custom Tooltip */
.tooltip-custom {
    position: relative;
    display: inline-block;
  }

.tooltip-custom .myear-csv.tooltiptext {
	width: 145px;
}
.tooltip-custom .setorg.tooltiptext {
width: 255px; left: -51px;
}
.tooltip-custom .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 40%;
    margin-left: -65px;
    font-size:12px
  }
.tooltip-custom .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

.tooltip-custom:hover .tooltiptext {
    visibility: visible;
  }

#roster_grid_1 a img,
#roster_grid_2 a img  {
    margin: 0 auto;
}

#roster_grid_1 .onoffswitch,
#roster_grid_2 .onoffswitch,
#roster_grid_3 .onoffswitch,
#socialmedia_grid .onoffswitch  {
    margin: 0 auto;
}
.other_info {
    margin: 0 0 10px;
    padding: 15px 0 0;
    border-top: 1px solid #ccc;
}

#socialmedia_grid .onoffswitch-label {
    position: relative;
    left:5px;
    margin: 5px 0px;
}
#socialmedia_grid h6 {margin-bottom:0px}
#socialmedia_grid .row {align-items: center;}

.key-container, #roster_grid_1 .container-row,
.key-container, #roster_grid_2 .container-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.key-container .k-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1;
}

#roster_grid_1 .container-row .column,
#roster_grid_2 .container-row .column {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    flex:1;
}

#roster_grid_1 h6,
#roster_grid_2 h6 {
    margin-bottom:0px
}
.cont-mymodaltemplate {
    display:inline-block
}
.key {
    width: 100%;
    border: 1px solid #efefef;
    border-radius: 5px;
    height: 40px;
    padding: 0px 10px;
    font-weight: 600;
    line-height: 40px;
    background: #efefef;
}
.key label {
    margin-bottom: 0px;
}

.custom_images_input {
    padding: 2px 0;
}
.custom_inner_images label,
.custom_outer_images label {
    margin: 5px;
}
.custom_inner_images img,
.custom_outer_images img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.custom_inner_images table td,
.custom_outer_images table td {
    padding: 5px;
    text-align: center;
    font-weight: 400;
    font-size: 11px;
}
.custom_inner_images,
.custom_outer_images {
    margin-top: 0px;
}
.show-image {
    position: relative;
    margin: 5px;
    display: inline-block;
    height: 78px;
    width: 78px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .show-image {margin-bottom:12px}
}
.show-image td {
    padding: 5px;
}
.show-image:hover img {
    opacity: 0.7;
}
.show-image:hover button {
    display: block;
}
.show-image button {
    position: absolute;
    display: none;
}
.show-image button.delete {
    top: 12px;
    right: 20px;
    background: #f4f8f9;
    border: none;
    color: #1ab9f4;
    border-radius: 60px;
}
.show-image button.delete:hover {
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}
#expiration_grid .row:first-child {
    border-bottom: 1px solid #e6e6e6;
}
#expiration_grid td {
    text-align: left;
}

#expiration_grid thead th tr {
    font-weight:700;
    font-size:16px
}
#expiration_grid th {
    text-align: left;
    vertical-align: middle;
    width: 50%;
    border-top:none
}
.mysettingsEmilTemp #subjectRow .note{margin-bottom: -5px;}
.mysettingsEmilTemp .k-editor .k-editable-area{height:230px;}
#step5Wizard #customEmailTemplateWiz .k-editor-widget .k-editable-area{height:120px;}
/*.adminPhoneccfilt{z-index:1080 !important;}*/
#adminList .k-button{background: none;border-style: none;background-position:unset;}
#adminList .k-button:hover{box-shadow:none;}
#adminList .k-button:focus{box-shadow:none;}
#adminList .k-i-check{color: #777;}
#adminList .k-grid-update .k-i-check, #adminList .k-grid-edit{color: #00B1F3;}
#adminList .k-i-trash{color: #FF4E4E;}
#adminList.k-grid .k-icon {
    opacity: 1;
}
#customReminderMsg .alert-danger{font-size: 80%; font-weight: 400; color: #d23434;}
/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 6. ANALYTICS ///////////////////////*/
.dropdown-menu-right {
    min-width: 220px;
}

.analytics-pad {
    background:white;
    padding:15px;
    border-radius:10px;
}
.analytics-pad .col-one {
    margin:0px 15px;
}
.analytics-pad .img-first-row {
    padding: 15px;
    height: 55px;
    width: 55px;
    border-radius: 10px;
    background: #E4F7FF;
    margin-bottom: 10px;
}
.analytics-pad .img-second-row {
    padding: 2px;
    height: 45px;
    width: 45px;
    margin-right: 10px;
}
.analytics-pad.second-row .count1 {
    margin-top: 0px;
    color:white;
    font-size: 16px;
}
.analytics-pad.second-row .label1 {
    color:white
}


.analytics-pad.second-row .count1,
.analytics-pad.second-row .label1,
.analytics-pad.second-row a,
.analytics-pad.second-row .count_name {
    flex: 0 1 auto;
}

.analytics-pad.second-row .label1 {line-height: 14px;}

.analytics-pad.second-row .count1, .analytics-pad.second-row .count_name {margin-left:auto}
.analytics-pad.second-row .count_name {margin-left:0;}

.upload, .reset {
    position: relative;
    background:#00B1F3;
    color:white
}
.reset.red {
    background:#FF4E4E
}
.circle-center {
    float: none;
    margin: 15px auto;
}

.section2, .section1, .section3  {margin:12px 30px}
.section1 .col-padding,
.section2 .col-padding,
.section3 .col-padding {
    padding: 0px 5px 0px 5px;
}

.section2 .border-right {
    border-right: 1px solid #dcdcdc;
}
.section2 .label1 {
    vertical-align: middle;
    line-height: 18px;
    margin-right:10px
}
.section3 .third-row {
    padding: 15px;
}
.section3 .third-row.anylt-earner-box{padding: 15px 6px;}
.section3 .third-row h3 {
    font-weight:400;
}
.section3 .chart {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.section3 .logged_earners_engagement {
    background-color: #fff;
    border-color: rgb(210, 210, 210);
    border-style: solid;
    border-radius: 3px;
    border-width: 1px;
    margin-left: 3px;
    height: 172px;
    padding: 3%;
}
.section3 .logged_earners_engagement figcaption {
    padding: 5%;
}
.section3 .logged_earners_engagement .c100 {
    margin: 3% 8%;
}
.section3 .period-title input[type=radio] {
    margin:3px
}
.section3 #enggRadioButtons .period-title {
    padding-left: 0px;
    font-weight: 600;
    font-size: 16px;
}
.section3 .control input {
    position: relative;
    margin:3px
}
.section3 .period-col {flex:1}
.section3 .area_chart {flex:3}

#analytics_dates .date-field {
    margin-bottom:5px
}
.section4 .add {
    padding-left: 10px;
    padding-right: 0px;
}
.section4 td {
    text-align: center;
}
.section4 .form-inline {
    align-items: baseline;
}

.section4 {margin:12px 20px}
.section4 .clear, .section4 .filter {
    position: relative;
    top: -2px;
}

.progress {
    height: 10px;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 30px;
    flex:0 1 auto
}
.label1 {
    font-size: 16px;
    font-weight: 600;
    color: #3f4d64;
    line-height: 5px;
    display: inline-block;
}
.label2 {
    font-size: 16px;
    color: #3f4d64;
    font-weight:400;
}
.count_name {
    font-size: 14px;
    color: white;
    font-weight: 400;
    margin-left: 0px;
    display: inline-block;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;

}
.count1, .count2 {
    font-size: 16px;
    color: #3f4d64;
    margin-left: 5px;
    margin-right:0px;
    line-height: 10px;
    flex:0 1 auto
}

.count1 {font-weight:600}
.count2 {font-weight:300}

.bg-yellow {
    background:#FFC756
}
.bg-white {
    background: #ffffff!important;
}
.bg-green {
    background:#4CDC65
}
.bg-light-blue {
    background:#00D4FF
}
.bg-white .k-chart path {
    fill: white;
}
.bg-white .k-chart [clip-path*="url"] path {
    fill: #00B1F3;
    fill-opacity: 1;
}
.period-title {
    margin-bottom: 10px;
    padding-left: 0;
}
.border-0 {
    border-right: 0;
}
.progress-bar {
    background-color: #B3D3D9;
}
.progress-bar1 {
    background-color: #00B1F3;
}
.progress-bar2 {
    background-color: #00B1F3;
}
.progress-bar3 {
    background-color: #00B1F3;
}
.logged_earners_engagement .col-sm-6 {
    text-align: center;
    margin: 0 auto;
}
.xls {
    cursor: pointer;
    text-decoration: none;
    color:#3f4d64!important;
    opacity: .9;
    font-weight:400
}
.xls span {
    text-decoration: none;
    margin-right: 6px;
    font-size: 14px;
    font-weight:400
}
.xls span:hover {
    text-decoration: underline;
    opacity: 1;
    font-weight:400
}
.xls i {
    color:#00B1F3
}

.ana-badge-class{
	font-size: 12px;
	vertical-align: middle;
}

/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 7. BADGE PORTFOLIO ///////////////////////*/


#showGroupNameOnBadgeDisplay {margin:5px 0px; font-size:14px;}
.badge-banner img
.view_badge a img
.preview_container a,
.share-img-preview {
    cursor:default!important;
}

.header-unique {
    display: inline-block;
    margin-top: -5px;
    vertical-align: middle;
}

.badge-ico-align .badge-link {
    display: inline-block;
    vertical-align: middle;
    margin-top: -7px;
}
.badge-ico-align {
    margin-top: -4px;
}
.badge-ico-align .header-unique {
    font-size: 14px;
    padding-right: 5px;
}
.bp-breadcrumb-options {
    width:100%;
    text-align: right;
}
.copy-send-cont {display:inline-block}
.share-img-preview {
    height: auto;
    width: 120px;
    object-fit: contain;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .share-img-preview {
        height: auto;
        width: 120px;
        object-fit: contain;
     }
}
#share, #shareGroup {flex:1}

/* badges and group list*/

#earner_badeges_list .box:hover {
    cursor: move;
}
#earner_badeges_list .overlay_icon:hover {
    cursor: default;
}
#earner_badeges_list .box  {
    position: relative;
    display: inline-block;
}
#earner_badeges_list .boxInner {
    position: relative;
    margin:10px 0px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow:none;
    margin: 5px;
    padding: 10px;
    display:inline-block;
    width: 150px;
    height: 150px;
}

#earner_badeges_list .box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
/*.badge-display, .group-display {min-height:60vh}*/
.badges-wrap, .group-wrap {
    height: auto;
    padding: 0px;
    overflow-y: auto;
    padding-bottom: 50px;
    overflow-x: hidden;
}
.group-wrap {margin-top:3rem}
.group {
    position: relative;
}
.group-container {
    padding:4px 5px;
    display: inline-block;
}
.group-image {
    position: absolute;
    left: 47px;
    top: 35px;
}
.group-number {
    position: absolute;
    left: 121px;
    top: 17px;
}
.group-number:hover {
    text-decoration: none!important;
}


.group-name {
    position: absolute;
    top: 55%;
    transform: translateY(-55%);
    width: 95%;
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 12px;
    cursor: pointer;
    font-size:16px;
    word-break: break-word;
	word-wrap: break-word;
}

.group-badge-count {
    color: #fff;
    position: relative;
    top: 0px;
    left: -6px;
    font-weight: bold;
    cursor: pointer;
    background: #ffa26b;
    z-index: 9;
    height: 30px;
    width: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
	border-radius: 20px;
}

.group-wrap .folder img {
    height:auto;
    width: 135px;
}
.badge-portfol-parent{
	/*display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	flex-wrap: wrap;
	flex-flow:co
	-ms-flex-wrap: -ms-flex;*/
	display:table;
}
.badge-portfol-parent .badge-div, .badge-portfol-parent .group-div{
	/*display: flex;
	ms-flex-direction: column;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex; */
	display:table-cell;
	width:50%;
}

.folder img:hover {
    background-color: #fafafa;
    opacity: 0.2;
    border-radius:10px
}
.folder img:hover .overlay_icon a {
    display: block;
    text-align: center;
}
.folder_overlay_icon {
    position: absolute;
    top: 50%;
    left:7%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.folder_overlay_icon a {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 30px;
    line-height: 34px;
    border: none;
    margin: 0 2px;
    text-align: center;
    display: none;
}
.folder_overlay_icon a:hover {
    background:white;}
.folder_overlay_icon a:hover i { color:#00B1F3}


.folder_overlay_icon a i.delete {
    color: #FF4E4E;
}
.folder_overlay_icon a i {
    color: #00B1F3
}

.view_badge.share img {
    width:70%
}
.unique-code {
    color: #55ecff;
    font-weight: bold;
}

.display {
    background-color: #fafafa;
    box-shadow:none;
    margin: 2% 1%;
    height: auto;
    border-radius:10px;
    padding:10px
}
.badge-portfol-parent .display{min-height:80vh;}
.badge-portfolio-header {
    border:none;
    background:none;
    padding: 10px 10px 10px 0px;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
}

.badge-portfolio-msg {
    border-radius: 7px;
    background-color: #f3f3f3;
    margin: 10px 0px;
    padding: 5px 7px;
    font-size: 13px;
    color:#647582
}
.badge-portfolio-header button {
    position: absolute;
    right: 0px;
    top: 0px;
    display: inline-block;
    margin-left: 20px;
}
.portfolio {
    display: none;
}
.portfolio table {
    border-width: 6px;
    background-color: #101824;
    width: 100%;
}
.portfolio table tr {
    border-bottom:1px solid #2a3a50
}
.portfolio table td:first-child {
    font-size: 13px;
    color: #daf4ff;
    padding: 5px 20px;
    font-weight:400;
}
.portfolio table td:nth-child(2) {
    font-size: 14px;
    color: #daf4ff;
}
.portfolio{
	height: auto;
    overflow-y: auto;
    max-height: 210px;
}
.portfolio-earner{
    max-height: 260px;
}
.table-scroll {
    overflow-y: auto;
    max-height: 55vh;
    margin-bottom:10px
}

#share_grid tbody td:first-child {
    text-align: left;
}
.share_email {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.share_email input {margin-right:10px}
.share_icons {
    margin-bottom: 10px;
}
.share_icons img {
    width: 35px;
}
.share_icons img:hover {
    transform: scale(0.9);
}
.share_icons h6 {
    display: inline-block;
    margin-right: 5px;
}
.add_to_ln {
    margin: 15px 0px 5px;
}
.share-badge {
    background: #ffffff;
}
.badge-image .btn {
    width: 45%;
}

.tab-badge-image {
    width: 100%;
}
.desc-box td:first-child, .dynamic-tr td:first-child, .optional-box td:first-child{width:125px;}
.modal-custom-portfolio .col-calendar { padding-top: 6px; }
/*.wdt150{width:150px;}*/
/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 8. MY PROFILE ///////////////////////*/
.profile-table {
    table-layout: fixed;
}
#profileUpdateMsg {
    text-align: left;
    width: 100%;
    color: #2e940e;
    font-size: 13px;
}
.profile_body {
    background-color: white;
    padding: 20px 25px 30px 20px;
    border-radius:10px;
}
.profile-wrap {
    padding: 0px;
}
.profile-wrap .v-separator {
    padding: 0 35px 0 10px;
    border-right: 1px solid #c7c7c7;
}
.profile-wrap .profile-details {
    padding: 0px;
}
.profile-wrap .profile-details .wrap {
    display:table;
    margin-top:20px
}

.profile-wrap .profile-details .wrap .badge_card {
    width:100%;
}
.profile-details .numbers {
    float: right;
}

.profile-details ul li:first-child {
    margin-left: 10px;
}
.profile-wrap .profile-details .wrap {padding:0px 5px;height: 100%;}
.profile-wrap .profile-details .wrap .total_badges,
.profile-wrap .profile-details .wrap .self-recorded-badges {margin-right:10px}
.profile-wrap .profile-details .total_badges,
.profile-wrap .profile-details .issued_badges {float:none}
.profile-view-mode .phone-num-wrap .prefix-code,
.profile-view-mode .phone-num-wrap,
#profilePhoneExtView {display:inline-block}
.profile-view-mode .phone-num-wrap .prefix-code span {
    font-size:18px;
    font-weight:600;
    line-height: 18px;
    position: relative;
    top: 1px;
    display: inline-block;
}
.profile-view-mode .phone-num-wrap .prefix-code .profile-view-mode {
    padding-left: 0px;
    display: inline-block;
}
.profile-view-mode .phone-num-wrap .input-wrap {
    padding:0px;
    display:inline-block
}
.profile-view-mode .phone-num-wrap.field {
    display:inline-block
}
.profile-edit-mode .phone-num-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.profile-edit-mode .phone-num-wrap .list-ctry {
    flex: 3;
    margin-right:4px
}
.profile-edit-mode .prefix-code {
    flex:1;
    margin-right:4px
}
.profile-edit-mode .phone-num-wrap #profilePhonetd {
    flex:2;margin-right:4px
}
.profile-edit-mode .phone-num-wrap .extn {
    flex:1
}
.profile_bg img {
    width: 100%;
    box-shadow: 0px 3px 4.35px 0.65px rgba(0, 0, 0, 0.2);
}
.profile_title {
    margin-bottom:20px;
}
.profile_title h6 {
    display: inline-block;
}
.profile_title img {
    float: right;
    width: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.profile-view-mode .line_input1 {
    display:inline-block;
    width: 100%;
}
#profileFirstName.ear-acc, #profileLastName.ear-acc {
    display: inline-block;
    width: 94%;
}

.earnerTTip {
    position:relative;
    top:1px
}

.profile_table .phone-num-wrap .profile-view-mode,
.profile_table .phone-num-wrap .profile-view-mode .profile-view-mode {display:inline-block}
.profile_table .phone-num-wrap .mobile-number-edit,
.profile_table .phone-num-wrap .profile-edit-mode  {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width:100%;
}
.profile_table .phone-num-wrap .profile-edit-mode > .profile-edit-mode {flex:2}


.profile_table .phone-num-wrap.field .prefix-code:before {
    z-index: 2;
}
.profile_table {
    background-color: #fff;
    width: 100%;
}
.profile_table tr {
    border-bottom: 1px solid #e2e2e2;
}
.profile_table td {
    padding: 3px 0px;
    color:#3f4d64;
}

.profile_table tr td div {
    font-weight: 400;
    color: #3f4d64;
}
.profile_table a {
    color: #00B1F3!important;
}
.profile_table td:first-child {
    width: 25%;
}
.profile_table td:nth-child(2),
.profile_table td:nth-child(3) {
    color: #939393
}
.profile-info {
    margin-left: 15px;
    width: 60%;
}
.profile-info .name {
    word-break: break-word;
	word-wrap: break-word;
}
.profile_bg {
    position: absolute;
    width: 98%;
}
.profile_pic {
    position: relative;
}
.profile_pic img {
    border:none;
    border-radius: 50%;
    margin-left: 44%;
    margin-top: 2%;
    width: 11%;
    margin-bottom: 10px;
}
.profile_pic_edit, .profile_pic_remove {
    background: #00B1F3;
    padding:7px 9px;
    border-radius: 20px;
    transition: .3s;
    margin-left: 0px;
}
.profile_pic_remove {
    background:#ff4d4d;
    padding: 7px 9px;
}
.profile_pic_edit:hover {
    background:#daf4ff
}
.profile_pic_remove:hover {
    background:#ffd9d9
}

.profile_pic_edit i, .profile_pic_remove i {color:white;font-size: 12px;}
.profile_pic_remove i {font-size: 13px;}
.profile_pic_edit:hover i {
    color:#00B1F3
}
.profile_pic_remove:hover i {
    color:#ff4d4d
}

.profile_pic_edit img:hover,
.profile_edit img:hover {
    transform: scale(0.8);
}

.profile_edit:hover {
    text-decoration: none!important;
}
.profile_pic_edit img {
    width: 12px;
}

.profile_edit i {
    margin: 0px;
}
.member_since {
   color:#8B9094
}
#alterEmailDiv p{color:#8B9094;}
.alternate_email {
    padding: 5px 0px 20px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 60%;
}
.profile_bagde_count:hover {
    box-shadow: 0px 3px 4.35px 0.65px rgba(0, 0, 0, 0.2);
}
#alternateEmailOverlay table td img {
    margin: 0 4px;
}
#rowOverlayDiv table tr td:first-child{width:45%;}
.cert-fld-cls{color: blue;margin-top: -21px !important;position: absolute;}
.roll-fld-blue{color: blue;padding-left:0px;}
.info-title {
   display:inline-block;
   font-weight:700
}
.info-title i {display:inline-block}
.pro-img-wrap {
    display: flex;
    align-items: center;
}
.pro-img-wrap img {
    width: 120px;
    height: 120px;
    margin:0px;
}
.edit-img-wrap {
    text-align: center;
    margin-bottom:0px;
    position:relative;
    display:inline-block
}

.profile-info p {margin-bottom:0rem}
.profile-info h4 {font-size:20px}
.earnerTTip{margin-top: 3px;}
/* phone fields increase width on focus */

/*my settings*/
.my-set-ext-incr-wth{
	position: absolute;
    width: 95px !important;
    top: 0;
    right: 8px;
}
.my-set-phone-incr-wth{
	position: absolute;
    width: 145px !important;
    top: 0;
}
#phonePrefixCtr.my-set-ctr-cde-incr-wdth:before{
	top: -14px;
	z-index: 2;
}
.my-set-phctr-code-incr-wdth{
	position: absolute;
    top: -20px;
    width: 70px !important;
    left: 0px;
}
/*my profile*/
.myprf-phne-incrwdth{
	position: absolute;
    top: -20px;
    width: 155px !important;
    left: 0;
}
.myprf-phne-ext-incrwdth{
	position: absolute;
    width: 100px !important;
    right: 15px;
}
.myprf-ctrcode-incrwdth{
	position: absolute;
    top: -20px;
    width: 65px !important;
}
#prPhonePrefixCtr.myprf-ctrcdeplus-incrwdth:before{
	top: -14px;
	z-index: 2;
}
.prmEmilCls, .altEmilCls{
	color : #3f4d64;
	font-size: 16px;
}
/*common style*/
.phne-post-rel{position:relative;}
.phne-post-rel .prefix-code{position:static !important;}
.phne-post-rel .prefix-code:before{z-index:2;}
.phne-ctrCde-incWdth,.phne-ctrCdeSymbal{
	position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
	z-index: 4;
}
.phne-ctrCdeSymbal{
	z-index: 1;
}
.disp-none{display:none;}
.disp-block{display:block;}
/*common style*/
/* phone fields increase width on focus End*/
/*common popup window*/
.modal-second-level {
    background: rgba(0,0,0,0.7);
}
.cc-picker-code-list{z-index:1055 !important;}
.k-calendar td.k-state-focused .k-link
{
  box-shadow: none !important;
}

.k-calendar td.k-today .k-link, .k-calendar td.k-today.k-state-focused .k-link{
	box-shadow: inset 0 0 0 1px #00B1F3 !important;
}
/*common popup window end*/
/*/////////////////////////////////////////////////////////////*/
/*////////////////////////// 10. RESPONSIVE ///////////////////////*/
@media (min-width:1919px) and (max-width:3840px) {
    #badeges_list .boxInner {
        width: 220px;
        height: 220px;
    }
}
@media (max-width:767px) {
	.badge-tab3-alert{ margin-top: 30px;}
}
@media (min-width:1601px)  {
    .k-editor .k-editable-area {
        height:150px
    }
    #myModalAdd .modal-large {max-width:900px}
    .mul-badge-image {
        height: 150px;
        width: 150px;
    }
    .modal-custom-size {
        max-width: 880px;
    }
    .modal-xxlarge {width: 80%;}
    #model-details-overview table.view_badge_details tr td:first-child{
        width:225px
    }
    #model-details-overview .ibc-view table.view_badge_details tr td:first-child {
        width:25%
    }
    #tab_2 {width: 100%;}
    #tab_5 {width:75%}
    #tab_6, #tab_3  {width:65%}
    #myModalAdd .modal-xlarge {
        max-width: 1025px;
    }
    .toggle-compet > div {
        width: 91%;
    }

    .space-left-col.xs {
        max-width: 20.333333%;
    }
    .space-right-col.xs {
       min-width: 79.666667%;
    }
    #editbadgeEarner .space-left-col {
        min-width: 29.333333%;
    }
    #editbadgeEarner .space-right-col {
        max-width: 70%;
    }
    #tab_1 .col-content {max-width:100%}
    .IssueBadgeNewEarner {width:75%}
    .view_badge_table.second {
        width:52%
    }
    #badeges_list_rolldown .badge-image {
        width:160px;height:160px
    }
    #child_badeges_list .mul-badge-image {
        height: 145px;
        width: 145px;
    }

}
@media (max-width:1600px) and (min-width:1441px) {

    /* IssueBadgeCert*/

    /* Analytics*/
    .section3 .third-row {height:200px}
    /* My Badges */
    .empty-badges .desktop {width:55%}
    .no-badges-wrap h3 {font-size: 32px;font-weight:700}
    .modal-large {
            max-width: 850px;
    }

    /* My Settings*/
    #tab_2 .custom-col.io-images {max-width:100%}
    #tab_2 .custom-col.files {max-width:65%}

    #tab_1 .col-content {max-width:100%}
    /* MyProfile*/
    .profile-wrap .profile-details .wrap .badge_card {padding:20px}
    /* MyEarners*/
    .earn-filt-btn {text-align: right;}

    /* Badgeportfolio*/
    .badge-portfol-parent .display {
        min-height: 65vh;
    }
    #model-details-overview table.view_badge_details tr td:first-child
   {
        width:220px
    }
    #model-details-overview .ibc-view table.view_badge_details tr td:first-child {
        width:25%
    }

}

@media (max-width: 1440px) and (min-width:768px) {

    body {font-size:13px}

    /* MyBadges*/
    #model-details-overview table.view_badge_details tr td:first-child
    {
        width:210px
    }
    #badeges_list .boxInner {
        height:140px;
        width:140px
    }
    #pagination-container {
        padding: 0px 12px;
    }
    /* Navigation elements*/
    .header2 h3 {font-size:20px}
    /* My earners */
    .modal-xxlarge {max-width: 96%;}

    .myearners h5 {margin-top:10px}
    /* My Settings*/
     #tab_3  {width:95%}

    #tab_3 .tab-col {
        min-width: 31.5%;
    }
    /*#tab_3 .tab-col.large {
        min-width: 50%;
    }*/
    .io-images button {width:20%}
    #tab_4 .custom-col,
    #tab_5 .col,
    #tab_6 .col,
    .section1 .col,
    #tab_3 .custom-col {min-width: 100%;}
    #tab_5 .share-title {padding-right: 10px!important;}
    #tab_6 .share-title {padding-right: 10px!important;}
    #editbadgeEarner .modal-larger {width:99%}
    #editbadgeEarner .modal-header {padding: 10px 15px;}
    #editbadgeEarner .modal-body {padding: 15px;}
    #editbadgeEarner .space-left-col {min-width: 28.333333%;}
    #editbadgeEarner .space-right-col {max-width: 71%;}


    #tab_1 .space-left-col.xs {
        max-width: 31.333333%;
    }
    #tab_1 .space-right-col.xs {
       min-width: 68.666667%;
    }


    /* Firefox only*/
    @-moz-document url-prefix() {
        .mysettings .phone-num-wrap, .earner-details .phone-num-wrap {position: relative;top:3px}
        .mysettings  .phone-num-wrap,
        .view_badge_details_box2 .phone-num-wrap,
        .earner-details .phone-num-wrap  {display:inline-block}

        .mysettings .phone-num-wrap .list-ctry,
        .mysettings .phone-num-wrap .prefix-code,
        .mysettings .phone-num-wrap .input-wrap,
        .mysettings .phone-num-wrap .ext-number,
        .view_badge_details_box2 .phone-num-wrap .list-ctry,
        .view_badge_details_box2 .phone-num-wrap .prefix-code,
        .view_badge_details_box2 .phone-num-wrap .input-wrap,
        .view_badge_details_box2 .phone-num-wrap .ext-number,
        .earner-details .phone-num-wrap .list-ctry,
        .earner-details .phone-num-wrap .prefix-code,
        .earner-details .phone-num-wrap .input-wrap,
        .earner-details .phone-num-wrap .ext-number {
           float:left;
        }
        .mysettings  .phone-num-wrap .list-ctry, .view_badge_details_box2 .phone-num-wrap .list-ctry,
        .earner-details .phone-num-wrap .list-ctry {width:34%}
        .mysettings .phone-num-wrap .prefix-code, .view_badge_details_box2 .phone-num-wrap .prefix-code,
        .earner-details .phone-num-wrap .prefix-code {width:15%}
        .mysettings .phone-num-wrap .input-wrap, .view_badge_details_box2 .phone-num-wrap .input-wrap {width:31.4%}
        .earner-details .phone-num-wrap .input-wrap  {width:31.3%}
        .mysettings .phone-num-wrap .ext-number,.earner-details .phone-num-wrap .ext-number {width:15%}
        .view_badge_details_box2 .phone-num-wrap .ext-number {width:14.5%}

        .mysettings .phone-num-wrap .country-code,
        .view_badge_details_box2 .phone-num-wrap .country-code,
        .earner-details .phone-num-wrap .country-code {float:left;width:40.4%}
        .earner-details .phone-num-wrap .country-code .line_input1 {width:100%}

        .mysettings .phone-num-wrap .mobile-number,
        .view_badge_details_box2 .phone-num-wrap .mobile-number,
        .earner-details .phone-num-wrap .mobile-number {float:left;width:58%}

        #editbadgeEarner #phoneIncWdth .country-list-wrap  {width:280px}
        #editbadgeEarner #phoneIncWdth .cc-picker-code-select-enabled {width: 135px;}
        #myNewIssuanceForm .phone-and-ext .cc-picker-code-select-enabled {width: 255px;}
        #editbadgeEarner #phoneIncWdth .cc-picker-flag.empty {width:240px}
        #editbadgeEarner #phoneIncWdth #phEdit {width:135px!important}
        #editbadgeEarner #phoneIncWdth .phone-n .ext-number  {width:145px}
        #myNewIssuanceForm .phone-and-ext .phone-n .ext-number {width:100%}
        .mysettings #tab_1 .set-phone-box .cc-picker-code-select-enabled {
            width: 250px;
        }
        }

    /* Analytics*/
    .section3 .third-row {height:220px}
    .analytics-pad {margin-right:0px}
    .analytics-pad .img-first-row {
        padding: 8px;
        width: 35px;
        margin-bottom:5px;
        height:35px
    }
    .section2 .col-custom {
        min-width:33.33%;
    }
    #enggRadioButtons .control--radio {
        font-size:13px;
    }
    #enggRadioButtons h4.control--radio {
        font-weight: 600;
        margin-top: 10px;
        font-size:15px
    }

    #enggRadioButtons {float:left}
    #enggDatacontainer {float:right}
    .section1 .label1,
    .section1 .label2,
    .section1 .count1,
    .section1 .count2,
    .section2 .label1,
    .section2 .count1
    {font-size:14px;line-height:0px;}

    .section3 .label1 {font-size:14px;line-height:22px}

    .analytics-pad .img-second-row {
        height: 38px;
        width: 38px;
        margin-right: 6px;
    }
    .section4 {margin:8px 15px}

    .section4 .analytics-pad {
        margin-right:5px;
        padding:12px
    }
    .section4 .analytics-pad .row {
        align-items: baseline;
    }
    .circle-center {
        margin: 20px auto;
    }



    /* My Badges, badge-portfolio*/
    #earner_badeges_list .boxInner {
        width:105px;
        height:105px
    }

    .no-results img {width:22%}
    .folder_overlay_icon {left: 3%}
    .folder_overlay_icon a {
        width:30px;height:30px;
        line-height: 30px;
    }

    .folder_overlay_icon a i {
        font-size:12px
    }
    .group-number {
        left: 90px;
        top: 10px;
    }
    .group-badge-count {
        left: -2px;
    }
    .group-wrap .folder img {
        width: 110px
    }
    .group-name {
        font-size:13px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .overlay_icon a i {font-size:14px}
    .overlay_icon a {
        width: 35px;
        height: 35px;
        line-height: 28px;
    }

    /*.badge-display, .group-display {min-height: 72vh;}*/


    /* tables */
    .badge-table input[type=checkbox] {margin:10px}
    .badge-table .k-filtercell .k-widget.k-dropdown {right:0px}
    .profile_table td:first-child {
        width: 28%;
        padding-right:8px;
    }
    .badge-table .k-grid-header th.k-header input[type=checkbox]:first-child {
        margin:8px
    }


   /* Others*/
    .no-padding {padding:0px}


    .profile-wrap .profile-details .wrap .badge_card {
        width: 100%;
    }

    /* RollDownList*/

    #badeges_list_rolldown .badge-image, .mul-badge-image {
        height:100px;
        width:100px
    }

    /* navigation*/
    .header1 {padding: 8px 25px 8px 25px;}
    /* Form*/
    input.line_input1 {padding:0px 8px}
    /* IssueBadgeCert*/
    #myNewIssuanceForm .space-left-col {
        max-width: 28.333333%;
    }
    #myNewIssuanceForm .space-right-col {
        min-width:71%
    }

}


@media (max-width:1024px) {

    .filter-msg {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* MyBadges*/
    #useStandardImage, #useCustomImage {
        width: 49.7%;
        padding:0
    }
    #pagination-container {
        padding: 0px 12px;
    }
    /* Navigation */
    .content, .content-wrap {
        border: none;
        margin: 5px 10px 35px 10px;
    }

    p {font-size:14px}
    /* My Earners*/
    .preview_container a img {width:180px;height:auto}
    .earn-filt-btn {margin-top:0px}
    .dropdown-menu-right {
        min-width: 240px;
    }

    .myearners .col-upload {max-width:51%}
    #massUplaodRosterButton {padding:5px}
    .myearners .col-filters {min-width:100%}
    .myearners .col-filters {margin: 5px 0px 10px 0px;}
    #clearFilterEarers {margin-top:0px!important}

    /* Analytics */
    .section4 .table-filter-img {
        width: 25px;
        height: 25px;
    }
    .section4 .clear, .section4 .filter {
        padding:5px 16px
    }
    .section4 .k-grid-header th.k-header {
        padding: 5px;
    }
    .k-grid-header .k-i-sort-asc-sm {
        margin-left: -2px;
    }
    .section2, .section1, .section3 {
        margin: 5px 15px;
    }
    .analytics-pad {
        padding: 7px;
        margin-right: 2px;
    }
    .section2 .count1 {
        margin-top: 5px;
        font-size: 16px;
    }
    .section2 .tab-align {
        vertical-align: top;
    }
    .count_name {
       margin-right:0px;
       margin-top:0px;
       font-size: 13px;
    }

    .analytics-pad.second-row .count1 {font-size:14px}
    /* MyBadgePortfolio*/

    .display {margin: 2% 0px;}
    .align-position {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
    }
    /* My Profile */

    .profile-details ul li:first-child {
        margin-left: 0px;
    }
    /* Tables*/
    .badge-table input[type=checkbox] {
        margin:6px
    }
    .badge-table .k-grid-header th.k-header input[type=checkbox]:first-child {
        margin:5px
    }

    /* IssueBadgeCert*/
    .IssueBadgeView .earn-filt-btn {
        position: relative;
        top:-5px
    }
    .IssueBadge form tr:nth-child(4) td:nth-child(4) input {
        width: 128px;
    }
    .date-picker-align {
        width: 100%!important;
    }
    #myIssuanceForm .full-col {min-width:100%}
    #myIssuanceForm .preview-img-col {
        text-align: center;
        min-width: 100%;
    }
	#CustomQRURL{
		margin-top: 20px;
		margin-left: 0;
	}
    /* Modal*/
    .modal-xxlarge {max-width:96%}

}


@media (max-width:992px) {

    /* MyBadges*/
    .other_input_roll_badges {
        border-left:none;
        padding: 0px 15px;
    }
    .other_input_roll_points,
    .other_input_rolldown_badges {
        border-left:none
    }
    /* My Profile */

    /* My Earners*/
    #massUplaodRosterButton {width:100%}
    #editbadgeEarner .edit-badge-row {
        margin:3px 0px
    }

    /* Analytics */
    .analytics-pad img.first-row {width:50px}
    .section1 .col-padding {margin-bottom:8px}
    /* Buttons*/
    .k-upload-button {width:100%}
    .k-upload-files {width:auto}
}

@media (min-width:769px) {
    /* MyBadges*/
    .empty-badges .responsive {display: none;}
}


/* Ipad pro*/
@media only screen
  and (min-width: 1024px)
  and (max-height: 1366px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
 {
    /* MyBadges*/
    .competTab {
        min-width: 55%;
    }
    .step4 .tab .form-check {width:100%}
    .check-container {
        width: 92%;
    }

    #tab_1 .form-group {
        min-width:50%
    }
    .badge-portfol-parent .display {
        min-height: 50vh;
    }

    .data-info {
        display: flex;
    }

    .myearners .col-upload {
        min-width: 50%;
    }
    .myearners .col-filters .no-right {
        padding-right: 15px;
        padding-left: 15px;
    }

    .myearners .col-filters h6 {
        margin-left: -0px;
    }
    #editbadgeEarner .col-lg-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    #editbadgeEarner .form-group {margin-bottom:0px}
    #editbadgeEarner .edit-badge-row {
        margin:3px 0px
    }

    #tab_1 .col-md-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* My Settings*/
    .pro-img-wrap {
        display: block;
    }
    .profile-info {
        margin-left: 5px;
        width: 50%;
        margin-top: 20px;
    }
    .profile_table .cc-picker-code-select-enabled {
        width: 75%;
    }

    .profile_table td:first-child,.profile_table td:nth-child(2) {
        float:left;
        width:100%
    }

    .pro-img-wrap img {
        width:100px;
        height:100px
    }
    .mysettings .phone-num-wrap .ext-number {width: 16.5%;}
    .mysettings .phone-num-wrap {width:100%}
    #tab_3 .tab-col {
        min-width: 50%!important;
    }
    #tab_3 .tab-col.large {
        min-width: 100%!important;
    }

    .mysettings #tab_1 .api-info .form-group {
        max-width: 33.333333%;
    }
    .mysettings #tab_1 .api-info {min-width:50%}

    /* MyEarners*/



}
@media only screen
  and (min-width: 1024px)
  and (max-height: 1366px)
  and (orientation: portrait) {
	.competTab {
		min-width: 56%;
	}
  }
@media only screen
  and (min-width: 1024px)
  and (max-height: 1366px)
  and (orientation: landscape) {
	.competTab {
		min-width: 56%;
	}
  }
@media only screen
  and (min-width: 1024px)
  and (max-height: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
    .badge-portfol-parent .display {
        min-height: 52vh;
    }
	.competTab {
		min-width: 56%;
	}
}
@media only screen
  and (min-width: 1366px)
  and (max-height: 768px) {
    .portfolio{
		height: auto;
		overflow-y: auto;
		max-height: 135px;
	}
	#badeges_list .boxInner {
		margin: 0px 5px;
		padding: 4px 10px;
	}
	.box .overlay {padding: 0px 5px;}
	.overlay {padding:0% 5%;}
	.badge-cert-wrap {
		padding: 3px 15px;
		margin: 5px 5px 0px 5px;
	}
	#badeges_list {
		margin: 0px 10px 5px 10px;
	}
	/*.badge-cert-wrap{
		padding: 0px 15px;
		margin: 5px 5px 0px 5px;
	}
	#badeges_list {
		margin: 0px 10px 5px 10px;
	}
	#badeges_list .boxInner {
		margin: 0px 5px 3px 5px;
		padding: 0px 10px;
	}*/
}


/* Ipad portrait*/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .cont-mymodaltemplate {
        margin: 5px 0px;
    }

    /* MyEarners*/
    #editbadgeEarner .modal-xxlarge {
        max-width: 80%;
    }

    /* MyBadges*/
    .step5 .wrap-options {justify-content:flex-start}

    .check-container {
        width:90%
    }
    .badge_options a {
        padding: 8px 10px;
    }
    .step4 .tab .form-check {width:auto}

    .competTab {
        min-width:65%;
    }
    .card-view-table {
        padding: 20px 0px;
    }
    .card-view-table .data-image {
        flex: 2;
    }
    .view_badge_table {
        margin-right: 0px;
    }
    .view_badge_table.second {
        flex: 1;
    }
    .data-info {display: flex;margin-left:8px}
    .data-image {
        margin-bottom:0px
    }

    .wizard-content.inline .modal-title {width:25%}
    .wizard-content.inline .wizard-steps-panel {text-align: left;}
    .wizard-steps-panel .step-number .number:after {left: calc( 57% + 1.9em/2 );}
    /* Settings*/
    #CustomQRURL, .qr_type_of_url {
        width: 95%;
        vertical-align: middle;
    }
    #tab_5 .tab-col {
        max-width: 48.5%;
    }
    #tab_3 .tab-col.large {
        min-width: 100%;
    }

    .wrap-mymodalemailtemplate {
        display: flex;
        justify-content: center;
    }
    #tab_4 .tab-col  {
        min-width: 70%!important;padding-right: 0px;
    }
    .mysettings #tab_3 .col-content,
    .mysettings #tab_4 .col-content,
.mysettings #tab_5 .col-content {
        margin-bottom: 10px;
    }
    #tab_1 .space-left-col.xs {
        max-width: 25.333333%;
    }
    #tab_1 .space-right-col.xs {
        min-width: 74.666667%;
    }
    /* Firefox only*/
    @-moz-document url-prefix() {
        .view_badge_details_box2 .phone-num-wrap .ext-number {
            width: 16%
        }

        .mysettings .phone-num-wrap .input-wrap {width:31%}
        .mysettings .phone-num-wrap .country-code {width:40.3%}
    }

    /* IssueBadgeCert*/
    .cc-picker-code-select-enabled {
        width: 195px;
    }
    #myNewIssuanceForm .action-btn-container .btn-large {
        width:100%;margin-bottom:5px
    }
    #myNewIssuanceForm .space-left-col {
    max-width: 30.333333%;
}
    #myNewIssuanceForm .space-right-col {
        min-width: 69%;
    }

    /* Modal*/
    .modal-custom-size {
        max-width: 95%;
    }

    /* Badge Portfolio*/
    .modal-custom-portfolio {
        max-width: 95%;
    }

    /* MySettings*/
    .profile-info {
        margin-left: 5px;
        width: 100%;
        margin-top: 20px;
    }
}

/* tablet orientation:landscape*/

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

        /* Analytics*/
        .section4 {
            margin: 8px 3px;
        }
        #enggRadioButtons {padding-right: 0px;}
        .section4 .filter {
            margin-top:0px
        }
        #analytics_dates {display:block}

        #enggRadioButtons .control--radio {
            font-size: 12px;
        }
        .control__indicator {
            height: 15px;
            width: 15px;
        }

        /* My Profile*/
        .edit-img-wrap {
            margin-left: 30px;
        }

        .profile-info {
            margin-left: 5px;
            width: 100%;
            margin-top: 10px;
        }
        .profile-details .wrap {min-width: 100%;}
        .profile-info p {
            font-size: 14px;
            line-height: 20px;
        }
        .pro-img-wrap img {margin-top:20px}
        .mysettings .phone-num-wrap {width:100%}

        /* BADGEPORTFOLIO*/
        .group-wrap .folder img {
            width: 100px;
        }
        #showGroupNameOnBadgeDisplay {font-size:12px}
        #showGroupNameOnBadgeDisplay i {
            padding: 7px;
            font-size: 10px;
        }
          #earner_badeges_list .boxInner {
            width:95px;
            height:95px
        }

        .group-number {
            left: 81px;
            top: 2px;
        }
        .badge-portfol-parent .display {
            min-height: 82vh;
        }

        /*MySettings*/
        .tab-col {padding-right: 15px;min-width: 50%!important;}
        #tab_3 .tab-col.large {
            min-width: 100%!important;
        }
        .api-info {min-width: 100%;}
        .wrap-mymodalemailtemplate {
            display: flex;
            justify-content: center;
        }
        #tab_1 .space-left-col.xs {
            max-width: 15.333333%;
        }
        #tab_1 .space-right-col.xs {
            min-width: 84.666667%;
        }
        .cont-mymodaltemplate {
            display:block;
            margin:5px 0px;
            padding-left:25px
        }
        #tab_1 .form-group {
            min-width: 50%;
        }

        div.tab button {
            padding: 8px 20px;
            font-size: 14px;
        }

        /* Profile*/
        .profile-wrap .col-custom {
            min-width:100%
        }

        .profile-wrap .profile-details .wrap .badge_card {
            width: 40%;
        }
        .pro-img-wrap {
            display: block;
            text-align: center;
        }


        /* Issuebadgecert View*/
        #myNewIssuanceForm .phone-n .country-list-wrap {width:78%}
        #myNewIssuanceForm .phone-n .cc-picker-code-select-enabled {
            width: 250px;
        }
        .IssueBadgeView .earn-filt-btn {
            position: relative;
            top: -5px;
        }
        .IssueBadgeView .filter {margin-bottom:5px}
        .IssueBadgeView .filter, .IssueBadgeView .clear {width:100%}
        .earner-details .phone-num-wrap .input-wrap {
            width: 31%;
        }

        /* MyEarners */
        #editbadgeEarner .view_badge {
            margin:15px 0px;
            height: 100px;
            width: 100px;
        }

        #editbadgeEarner .modal-xxlarge {
            max-width: 74%;
        }
        #editbadgeEarner.space-left-col {
            max-width: 28.333333%;
        }

        #editbadgeEarner.space-right-col {
            min-width: 71.666667%;
        }
        .myearners .col-upload {min-width:50%}
        .myearners .col-filters {
            min-width: 70%;
        }
        .myearners .col-filters {
            min-width: 70%;
        }
        .myearners .col-filters:last-child {
            min-width: 30%;
            margin-top: 2.5rem;
        }
        #filterErrMes {margin-left:10px}

        /* MyBadges*/
        .wizard-steps-panel .step-number .number:after {left: calc( 57% + 1.3em/2 );}

        #badeges_list .boxInner {
            height: 135px;
            width: 135px;
        }
        #uploadBadgeImgTypeBtnGrp.btn-group {text-align: center;
            margin: 0px;}


        /* My Earners*/
        #editbadgeEarner.space-left-col {
            max-width: 28.333333%;
        }

        #editbadgeEarner.space-right-col {
            min-width: 71.666667%;
        }

        .myearners .col-filters h6 {
            margin-left: 0px;
        }
        .myearners .col-filters .no-right {
            padding-right: 5px;
            padding-left: 5px;
        }
        .myearners .col-filters .no-right.left
       {
            padding-left: 15px;
        }

        #editbadgeEarner .col-lg-6 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
        #editbadgeEarner .form-group {margin-bottom:0px}
        #editbadgeEarner .edit-badge-row {
            margin:3px 0px
        }
        .earner-details .phone-num-wrap .mobile-number {flex:2}
        @-moz-document url-prefix() {
            .earner-details .phone-num-wrap .country-code {width:40.2%}
            .view_badge_details_box2 .phone-num-wrap .ext-number{ width: 16.5%}
            .view_badge_details_box2 .phone-num-wrap .mobile-number {width:58.6%}

        }

        /* Modals*/
        .modal-custom-size {
            max-width: 80%;
        }


  }

@media (max-width:768px) {


    /* MyBadges*/
    #badeges_list .boxInner {
        height: 120px;
       width: 120px;
   }
    .badge-ico-align .header-unique {padding-right: 0px;}
    .badge-portfol-parent .badge-div, .badge-portfol-parent .group-div {
        display:block;width:100%
    }
    .badge-image {padding: 10px 0px;}
    #createBadge {margin-bottom: 5px;}

    .search-breadcrumb.line_input1 {width: 85%}
    div.tab {
        white-space: nowrap;
        overflow-x: auto;
    }
    .toggle-compet > div {
        margin-top: 0px;
        width: 87%;
    }

    .step4-prev-badge {
        justify-content: center;
    }
    .toggle-compet:after {margin-right:auto;top:0px}
    .breadcrumb-right .position {text-align: left;}
    .wizard-steps-panel.steps-quantity-4 .step-number {width: 20%;}
    .view_badge.share img {width:40%}
    .share_badge {text-align: center}
    .badge-portfol-parent .display {min-height:50vh}
    .empty-badges .responsive {width:65%}
    .empty-badges .desktop {display: none;}
    .no-results img {width:45%}
    .badge-cert-wrap {
        padding: 10px 0px;
        margin: 15px 0px 5px 0px;
    }
    div.tab button {
        padding: 10px 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
    .other_input_roll_badges,
    .other_input_roll_points,
    .other_input_rolldown_badges {
        padding: 5px 15px;
    }
    .badge_options {
        padding: 20px 0px;
    }
    .competTab {
        margin-bottom: 10px;
    }
    /* My Profile*/

    .edit-img-wrap {
        margin-left: 70px;
    }
    .profile-wrap .profile-details .wrap {display:block}
    .profile-wrap .profile-details .wrap .badge_card
    {margin:10px 0px;
    display:inline-block;
    width:100%
    }
    .alternate_email {width:100%}

    .pro-img-wrap {display:block; text-align: center}

    .profile_body {padding: 20px}
    .profile-wrap .profile-details .wrap {
        margin-top: 0px;
    }
    .profile-wrap .v-separator {
        padding: 0;
        border-right: 0;
    }
    /* IssueBadgecert*/

    .issue-badge-btn {text-align: center!important;}
    #myNewIssuanceForm .form-group {min-width:100%}

    .issue-badge-btn {text-align:center!important}
    #myIssuanceForm .form-group {min-width: 100%!important;margin-bottom: 0px;}

    .IssueBadgeView .clear{
        margin-top:5px;
        margin-left:0px;
        width:120px
    }
    .IssueBadgeView .filter  {
        margin-top:3px;
        width:120px
    }
    /* Badge Portfolio */
    .bp-breadcrumb-options {text-align: right;}
    .copy-send-cont {display:block}
    /*.badge-display, .group-display {height:auto}*/
    .pagination-control .pagination-container {position: absolute;}

    .align-position {
        text-align: left;
    }

    /* Buttons*/
     .btn-large {padding: .375rem 1.8rem;}
     .btn-group .btn {font-size:14px}
     #badgeTypeBtnGrp .btn {font-size:13px}
    .btn-group.dropdown {margin:10px 0px}
    .issue-badge-btn button.blue {
        display: block;
        margin: 10px auto;
    }
    button.gray {
        padding: 8px 20px;
    }
     /* Navigation Elements*/
     .header1 .nav_menu {margin-right:5px}
     .header_icons_left {width: 80%;}
     .header1 .header_icons_right a span{
        display:none
    }
    .header1 .header_icons_right a {padding:0px}
    .header1 .header_icons_right a i {
        font-size:14px;
        cursor: pointer;
        opacity: .9;
        padding:13px;
        border-radius:5px;
        margin-left: 0px;
    }
    .header1 {
        padding: 10px 15px 10px 15px;
    }

    .header2 {
        padding: 10px 0px 5px 0px;
    }

    .content, .content-wrap {
        border: none;
        margin: 5px 15px 35px 15px;
    }
    .nav {
        display: none;
    }

    .nav {
        height: 141vh;
    }

    /* Analytics*/

    .section4 .clear, .section4 .filter {margin-top:10px;flex: 1 1 auto;}
    .section4 .date-field {width: 100%}
    .section4 .k-datepicker {margin-bottom:10px}
    .section-wrapper { margin: 5px 15px}
    .section1 .col-lg-4 {margin-bottom: 10px;}
    .section1 .col-lg-4:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
    .section1 .border-right {
        border-right: 0!important;
    }
    .section2 .label1 {
        margin-left: 2px;
        vertical-align: middle;
    }
    .section2 img {
        margin-top: 5px !important;
    }
    .count2 {
        clear: both;
    }
    .section3 .logged_earners_engagement .c100 {
        margin: 0;
    }
    .section2 .col-custom {
        min-width:100%;
        margin:5px 0px
    }

    .section2 .flex-1 {
        flex:none
    }
    .section3 .third-row {
        margin-bottom:15px
    }
    .control {padding-left:8px}

    .section4 {margin:5px}
    .section4 .analytics-pad {
        padding: 20px 15px;
    }
    #analytics_dates .k-datepicker {
        margin-right:0px
    }

    /* Others*/
    .xls {margin: 20px 0px}
    .help {
        padding-left: 0;
    }
    .avg {
        width: 100%;
    }
    .pad-10-m {
        padding-top: 10px;
    }
    /* MyEarners*/
    .myearners .col-filters .no-right.left
    {padding-left: 15px;}

    @-moz-document url-prefix() {
        #editbadgeEarner #phoneIncWdth .cc-picker-code-select-enabled {width:162px}
        #editbadgeEarner #phoneIncWdth .phone-n .ext-number {width:23%}
    }


    #editbadgeEarner .form-group {margin-bottom:0px}

    .myearners .col-filters h6 {margin-left: 0px;}

    .myearners .col-filters .no-right {
        padding-right:15px;
        padding-left:15px
    }
    .IssueBadgeNewEarner, .IssueBadge,
    .myearners {
        padding: 10px 0px;
    }
    .myearners form .col-lg-2 button.blue {
        float: right;
    }

    .myearners .filters-buttons-row {
        min-width:100%
    }
    .exprt-btn {
        width: auto;
        margin-left: auto;
    }
    .earn-filt-btn {margin-top:0px}
    /* Forms */
    input.line_input {
        width: 60% !important;
    }
    .IssueBadge form tr:nth-child(4) td:nth-child(4) input {
        width: 128px;
    }
    /* MySettings*/
    .custom_inner_images, .custom_outer_images {
        margin-top: 10px;
    }
    .custom_inner_images label, .custom_outer_images label {padding-left: 0px;}

    .mysettings .phone-num-wrap .country-code {
        flex: 3;
    }
    .io-images button {width: 49.5%;}
    #tab_1 .form-group {
        min-width:100%
    }
    .custom_inner .custom-col {
        min-width:100%
    }
    .mysettings #tab_5 .col {padding: 10px}
    .mysettings #tab_6 {padding: 0px;}
	.onoffSwitch{margin-top: -7px;margin-left: 10px;}
    /* Modals*/
    #myModalAdd .modal-dialog,
    #myModalEdit .modal-dialog {
        max-width: 700px;
    }

    /* K-editor */
    .wildcard-body-field {padding-right:0px!important}
    .body_wildcard
    #wildcard_1,
    .body_wildcard .k-dropdown {width:90%}

    /* Rolldownlist*/
    #child_badeges_list, #parent_badeges_list {
        background:none;
        padding:0px;
        border-radius:0px
    }
    .badge-image, .mul-badge-image {
        background: white;
        padding: 0px;
        border-radius: 10px;
        margin: 5px 0px;
    }


}
@media (min-width: 768px){
	.onoffSwitch {
		margin-top: 7px;
		margin-right: 10px;
	}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	#CustomQRURL, .qr_type_of_url{width:91%;}
	.setg-icon-div{
		min-height: 105px;
	}
	.cert-list-resp{display:none}
	#certificateList img{height:115px;}
	.setg-icon-shadow,.cert-icon-shadow{
		padding: 7px;
	}
	.setg-icon-shadow,.cert-icon-shadow{
		margin-bottom: 5px;
	}
	.setg-icon-div a img{height: 30px; margin-bottom: 5px;}
}
@media (min-width: 768px) and (max-width: 1023px){
	.setg-icon-div{
		min-height: 105px;
	}
	#certificateList img{height:115px;}
	.setg-icon-shadow,.cert-icon-shadow{
		padding: 7px;
	}
	.setg-icon-shadow,.cert-icon-shadow{
		margin-bottom: 5px;
	}
	.setg-icon-div a img{height: 30px; margin-bottom: 5px;}
	.resp-shadow-box{
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}
@media only screen and (max-width: 320px) {
	#CustomQRURL, .qr_type_of_url{width:91%;}
	#profileFirstName, #profileLastName {
        width:92%
    }
}
/* Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {
	#CustomQRURL, .qr_type_of_url{width:215px;}
}*/
/* Small Screens */

@media (max-width: 767px) {
    /* Modals*/
    #myModalAdd .btn-upload {
        padding: 10px;
    }
    #myModalAdd form {
        margin-top: 8px;
    }

    .modal-xxlarge,.modal-larger {
        max-width: 100%;
    }

    #myModalAdd .modal-body {
        border-top: none;
        margin-top: 40px;
    }
    .step5 .step_modal_buttons {
        padding: 8px 15px;
    }
        /*.footer {
            display: none;
        }*/
        .footer ul.footer_menu {
            padding-left:0px
        }
        /* MyEarners*/
        .edit_earner_badge_details tr td:first-child {
            width: 28%;
            color: #57759B;
        }

        .view_badge_details_box1 label {
            text-align: left;
        }
        #filterErrMes {text-align: right;}
        #massUploadMsg {text-align: right;}
        .myearners .col-upload {max-width:100%}
        .myearners .k-datepicker {
            width: 99.5%;
        }
        .my-earners-dt {width:100%}
        /*Profile */
        #profileFirstName, #profileLastName {
            width:94%
        }
        .profile_table tr td div {
            flex: initial;
        }
        /*.profile-table #phoneIncWdth .phone-n .country-list-wrap {flex:1}*/
        .profile-table .cc-picker-code-select-enabled {
            width: 105px
        }
        .profile-table .cc-picker-code {
            width: 70px;
        }

        .profile_table td:first-child {
            width: 100%;
            float: left;
        }
        .profile_table td:nth-child(2) {
            padding: 3px 0px;
            float: left;
            width: 100%;
        }
        .profile_table {
            table-layout: fixed;
        }


        /* MyBadges*/
        .step5 .wrap-options {justify-content: center}

        .opt-number {
            padding-right:15px
        }
        #gamepoints {margin-bottom:8px}
        #chooseInner a img,
        .set_2 a img {
            margin-top: 0px;
            width: 55px;
            height: 55px;
        }
        .step1 .step_modal_buttons,
        .step2 .step_modal_buttons,
        .step3 .step_modal_buttons,
        .step4 .step_modal_buttons {
            padding: 5px;
        }
        .wildcard-col {
            margin-top:5px
        }
        #earner_model_details_overview .view_badge_table tr {
            line-height: 18px;
        }
        #earner_model_details_overview .view_badge_table tr th,
        #earner_model_details_overview .view_badge_details tr td {
            float: left;
            width: 100%;
        }
        .col-calendar {
            position: relative;
            top: 5px;
        }
        .step4-prev-badge {
            justify-content: center;
        }
        .competTab .note {
            top: 45px;
        }

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

        .toggle-compet {
            margin-top:20px
        }
        .data-info {
            margin-left: 0px;
        }
        .data-image {justify-content: center;}
        .wizard-content.inline .wizard-steps-panel {
            width: 100%;
            float: none;
            margin-left: 0px;
            margin-top: 10px;
            display: inline-block;
            height: auto;
            position: absolute;
            top: 40px;
        }

        .wizard-content.inline .modal-title {
            width: 85%;
            float: none;
            margin-left: 10px;
            margin-top: 5px;
            display: inline-block;
            height: auto;
        }
        .wizard-content.inline .close {
            width: 30px;
            float: right;
        }
        .wizard-content.inline .close i {
            margin-right: 15px;
            margin-top: 10px;
        }
        #myModalAdd .popup-padding {margin-top: 30px;}
        .card-view-table {display: block;}
        .badge_options {text-align: center;}
        #model-details-overview table.view_badge_details tr td:first-child,
        .view_badge_details td:nth-child(2n) {
            float: left;
            width: 100%;
        }


        #model-details-overview .ibc-view table.view_badge_details tr td:first-child {
            width:40%
        }

        #model-details-overview .ibc-view table.view_badge_details tr td:first-child,
        #model-details-overview .ibc-view table.view_badge_details tr td:nth-child(2n) {
            float:none
        }
        #competency {flex:1}
        .step4 .form-check {
            margin: 5px 0px;
            display:block
        }
        .toggle-compet:after {
        top: -10px;
        margin-left:5px
        }
        .step1 .input-model {
            margin-top: 0px;
        }
        .key-container .btn.add {
            width:auto
        }
        .view_badge_table tr th:nth-child(2n) {
            width: 132px;
        }

    #useStandardImage, #useCustomImage {width: 100%;}
    #uploadBadgeImgTypeBtnGrp button:nth-child(1) {border-radius: 5px;margin-bottom: 5px;}
    #uploadBadgeImgTypeBtnGrp button:last-child {border-radius: 5px;}

    .set_1, .set_2 {
        margin-top: 0px;
        text-align: center;
    }
    #myModalAdd .preview-txt {margin-top:20px}
    .wizard-steps-panel .step-number .number:after { left: calc( 63% + 1.4em/2 );}
    .wizard-steps-panel.steps-quantity-4 .step-number {
        width: 25%;
    }
    /* Navigation Elements*/
    .has-left-menu {
        overflow: hidden;
    }
    .side-bar {
        visibility: hidden;
        left: -100%;
        transition: 0.2s ease-in;
    }
    .has-left-menu .side-bar {
        visibility: visible;
        left: 0;
        width: 265px;
    }
    .bg-overlay {
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        transition: 0.2s ease-in;
        z-index: 99;
    }
    .has-left-menu .bg-overlay {
        opacity: 1;
    }
    .rhs-wrapper {
        padding-left: 0;
    }
    #publicShareDiv {
        float: none;
    }
    /* badge Portfolio*/
    #earner_model_details_overview .data-image .view_badge {
        width: 120px;
        height: 120px;
        margin: 0px;
    }
    #earner_model_details_overview .data-image  {margin-bottom:0px}
    .group-wrap {margin-top:0rem}
    .copy-send-cont .tooltiptext {
        margin-left: -18px;
    }

    .copy-send-cont .tooltiptext::after {
        left: 15%
    }
    .pagination-control .pagination-container {position: relative;}

    #earner_badeges_list .boxInner {
        width:145px;
        height:145px
    }
    .bp-breadcrumb-options {
        text-align: left;
        margin-top: 10px;
    }
    .pagination-control .pagination-container {left:0%}
    #share, #shareGroup {flex:3}
    .share_icons {text-align: center;}
    .share_icons h6, .share_icons .btn-facebook,
    .share_icons .btn-twitter, .share_icons .btn-linkedin {
        display:block;
        margin-bottom:5px
    }
    .share-img-preview  {
        width:30%
     }
    .group-container {
        padding-left: 8px;
        padding-right: 8px;
    }
    .pro-img-wrap .member_since {
        position: static;
        width: 100%;
        margin: 0 auto;
    }

    .IssueBadgeNewEarner button.blue,
    .IssueBadgeNewEarner button.gray {
        width: 190px;
        margin-bottom: 10px!important;
    }
    .count1,
    .count2 {
        float: none;
        display: block;
    }

    #myModalEditGroup .modal-dialog {
        max-width: 100%;
        width: auto;
    }
    #roster_grid2 .wrap-mymodalemailtemplate {
        position:relative
    }

    /* Modals*/
    .modal-custom-size {
        max-width:95%
    }
    .confirmation-modal {
        margin-top: 3em;
    }
    #editbadgeEarner .tooltip-custom .tooltiptext {
        margin-left: -100px;
    }
    #editbadgeEarner .tooltip-custom .tooltiptext::after {
        left: 77%;
    }
    /* Analytics*/

    .section3 .chart {display:block}

    /* Settings */
    #SaveQRURLSect {padding-right:15px}
    .mysettings #tab_1 .col-form-label {
        text-align: left;
    }
    .setg-sub-row .col-lg-4 {padding-left:15px}
    #roster_grid_1 .hide-sm {display:none}
    #roster_grid_1 h5,
    #roster_grid_2 h5  {
        font-size: 13px;
    }
    #roster_grid_1 .onoffswitch,
    #roster_grid_2 .onoffswitch {width:65px}
    #roster_grid_1 .onoffswitch-label,
    #roster_grid_2 .onoffswitch-label {width: 56px;}
    #roster_grid_1 .onoffswitch-inner,
    #roster_grid_2 .onoffswitch-inner {width: 135px;}
    #roster_grid_1 .onoffswitch-inner:after,
    #roster_grid_2 .onoffswitch-inner:after{padding-right: 4px;}
    #roster_grid_1 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch,
    #roster_grid_2 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {left:24px}
    div.tab button {
        padding: 5px 10px;
        font-size: 14px;
    }

    /* Forms*/
    .country-list-wrap .ext-number {
        width:90px
    }
    input.line_input1 {
        padding: 0px 8px;
    }
    /* Rolldown list*/
    .divider .alert {
        width: 80%;
        text-align: center;
    }

    /* IssueBadgeCert*/
    #myNewIssuanceForm .space-left-col {
        max-width: 100%;
    }
    #myIssuanceForm .preview-img-col {
        margin: 10px 0px;
    }
    .IssueBadgeView .col-padding {
        padding: 0px 15px;
    }

    /* RollDownList*/
    #badeges_list_rolldown {padding: 15px;}
    #badeges_list_rolldown .badge-image {
        height: 120px;
        width: 120px;
        margin: 0px;
        padding: 2px;
    }
    /* Modal Body*/
    .modal-body {
        padding: 5px 10px 15px 10px;
    }

    /* Buttons*/
    .btn-large {
        width: 100%;
        margin-bottom: 5px;
    }
    /* MySettins*/
    .name-certificate {margin-right: 14px!important}
    .mysettings #tab_1 .save-button {text-align: center;}


}


@media(max-width:540px) {
    /* Modals*/
    .modal-title {font-size:18px;line-height: 24px;}
    /* Buttons*/
    .btn-large {
        width: 100%;
        margin-bottom: 8px;
        padding: 0px 30px;
    }
    /* Badge Portfolio*/
    #earner_badeges_list .boxInner {
        width:120px;
        height:120px
    }

    .group-wrap .folder img {
        width: 120px;
    }

    .group-number {
        left: 100px;
        top: 10px;
    }
    .group-badge-count {
        left: 7px;
    }
    .align-position {
        display:block
    }
    /* MyBadges*/
    #badeges_list .boxInner {
        width:150px;
        height:150px
    }

    .create-badge {margin-bottom:5px}
    /* Modals*/
    .modal-body {
        padding: 20px 15px;
    }

    .cc-picker-code-select-enabled {
        width: 195px;
    }

    .phone-n .ext-number {
        width: 105px;
    }

    .profile-table .cc-picker-code-select-enabled {
        width: 105px;
    }
    .profile-table .phone-n .ext-number {
        width: 70px;
    }
}


@media (max-width: 450px) {

    #profileFirstName, #profileLastName {
        width:92%
    }

    .btn-large {width:100%}
    .folder_overlay_icon {left:2%}
    /* Forms*/
    input.line_input {
        width: 60% !important;
    }
     /* NAVIGATION ELEMENTS*/
    .header2 {
        padding-right: 10px !important;
    }
    .header2 .header_icons_right {
        width: 30% !important;
    }
    #badeges_list .boxInner {
        width: 150px;
        height: 150px;
    }
    .search-breadcrumb.line_input1 {
        width: 82%;
    }
}

@media (max-width: 375px) {
    #badeges_list .boxInner {
        width: 150px;
        height: 150px;
    }
     /* NAVIGATION ELEMENTS*/
    .header2 .header_icons_right {
        width: 35% !important;
    }
    /* Badge Portfolio > List of Badges*/
    .email-temp-link {
        margin-left: 0% !important;
    }

}

@media (width: 320px) {
    /* NAVIGATION ELEMENTS*/
    .header2 .header_icons_right {
        width: 45% !important;
    }
    .header_icons_right a  {
        margin: 0px
    }
    /* ANALYTICS*/
    .section4 .k-datepicker {
        width: 92px !important;
    }
    /* OTHERS*/
    .add {
        padding-right: 0px !important;
        padding-left: 3px !important;
    }
    /* ISSUEBADGECERT*/
    .IssueBadge form tr:nth-child(4) td:nth-child(4) input {
        width: 230px !important;
    }

    #badeges_list .boxInner {
        width: 135px;
        height: 135px;
    }

}
@media (max-width:360px) {
	.remind-icon-act{top: 20px;}
@media only screen and (max-width: 1024px) {
  .remind-left-div {
    border-left: none;
  }
}