/* JPC Button
    How to use : Use with bootstrap class 'btn' 
    Example : <button class="btn jpc-primary-btn">

*/

#edit-email,
#edit-password,
#edit-tel,
#close-button,
#open-preview-exam,
#send-check,
#upload-resume,
#culture-matching,
#upload-image,
#add-test,
#candidate-skills,
#add-answer-group,
#login-anonymous{
    border-color: #59C4AE !important;
    color: #59C4AE !important;

    &:hover {
        color: #71e8c4 !important;
        border-color: #71e8c4 !important;
    }
}

#delete-button{
    border-color: #EB3C2B !important;
    color: #EB3C2B !important;
    background-color: transparent !important;
    box-shadow: none !important;

    &:hover {
        background:#FCEAEC !important;
    }
}

#positive-confirm-button{
    box-shadow: none !important;
}

#positive-cancel-button{
    color : #59C4AE !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    border-color: #59C4AE !important;

    &:hover {
        color: #71e8c4 !important;
    }
}

#cancel-button{
    border: none !important;
    color : #59C4AE !important;
    background-color: transparent !important;
    box-shadow: none !important;

    &:hover {
        color: #71e8c4 !important;
    }
}

.jpc-btn-lg{
    min-height: 64px !important;
    border-radius: 24px !important;
}

.jpc-btn-md{
    min-height: 48px !important;
    border-radius: 16px !important;
}

.jpc-btn-sm{
    min-height: 40px !important;
    border-radius: 16px !important;
}

.jpc-primary-btn {
    background: #00dbb6!important;
    border-color: #00dbb6;
    color: #212e4b;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    font-style: normal;
    font-weight: 600;
}

.jpc-primary-btn:hover {
    background: #71e8c4!important;
    border-color: #71e8c4;
}

.jpc-primary-btn:active {
    background: #59c4ae!important;
    border-color: #59c4ae;
}

.jpc-primary-btn:disabled,
.jpc-primary-btn[disabled="disabled"],
#delete-button:disabled,
#delete-button[disabled="disabled"]{
    background: #e0e0e0!important;
    border-color: #e0e0e0!important;
    color: #bdbdbd!important;
    box-shadow: none;
    pointer-events: none;
}

.jpc-secondary-btn {
    background: #ffffff;
    border: 1.5px solid #59c4ae!important;;
    box-sizing: border-box;
    border-radius: 16px;
    color: #59c4ae!important;;
    font-style: normal;
    font-weight: 600;
}

.jpc-secondary-btn:hover {
    background: #ffffff;
    border: 1.5px solid #71e8c4 !important;
    color: #71e8c4 !important;
}

.jpc-secondary-btn:active {
    background: #defaf2!important;;
    border: 1.5px solid #59c4ae!important;
    color: #59c4ae;
}

.jpc-secondary-btn:disabled {
    background: #f5f5f5;
    border: 1.5px solid #bdbdbd !important;
    color: #bdbdbd!important;
    pointer-events: none;
}

/*text color*/

.jpc-primary-color {
    color: #00dbb6;
}

.jpc-primary-color:hover {
    color: #defaf2;
}

.jpc-secondary-color {
    color: #4b8df1;
}

.jpc-secondary-color:hover {
    color: #3149ad;
}

/*link color*/

.jpc-link {
    color: #4b8df1;
}

.jpc-link:hover {
    color: #7ab8f9;
}

.jpc-link:active {
    color: #3149ad;
}

.jpc-link:disabled {
    color: #bdbdbd;
}

.jpc-link-disabled {
    color: #bdbdbd;
    pointer-events: none;
    cursor: default;
}

/* JPC Checkbox
    How to use : Use with bootstrap class 'form-check-input' 
    Example : <input class="form-check-input jpc-checkbox" type="checkbox">

*/

.jpc-checkbox[type="checkbox"] {
    width: 24px;
    height: 24px;
    border: 1px solid #9e9e9e;
    box-sizing: border-box;
    border-radius: 4px;
}

.jpc-checkbox:checked[type="checkbox"] {
    background-image: url(../images/new_Jobpasscard/new-checkmark.png);
    background-color: #00dbb6;
    border-color: #00dbb6;
    background-size: 75%;
}

/*
    Custom JPC Switch
    How to use: No bootstrap required, look at example
    Example:
        <div class="jpc-switch">
            <input type="checkbox"/>
            <label></label>
        </div>
*/

.jpc-switch {
    position: relative;
    width: 35px;
}

.jpc-switch label {
    background: #c1c7d2; /*7a89a6 with 0.38 opacity*/
    position: relative;
    height: 14px;
    width: 34px;
    border-radius: 7px;
    display: inline-block;
    transition: all 0.3s ease;
}

.jpc-switch label:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    left: -1px;
    top: -3px;
    z-index: 2;
    background: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 2px rgba(0, 0, 0, 0.12),
        0px 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.jpc-switch input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.jpc-switch input:checked+label {
    background: #93e6d8 /*#00dbb6 with 0.38 opacity*/
}

.jpc-switch input:checked+label:after {
    background: #00dbb6;
    left: 15px;
}

/*Utilities*/

/* set height of object to 48 */
.h-48{
    height: 48px! important;
}



/*Toast*/

.jpc-toast{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 24px;
    width: auto;
    height: 48px;
    background: #616161;
    box-shadow: 0px 4px 160px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    /*font*/
}


.jpc-toast-normal-bg{
    background: #616161;
    /*font*/
}

.jpc-toast-success-bg{
    background: #00DBB6;
}

.jpc-toast-warning-bg{
    background: #FBEA73;
}

.jpc-toast-danger-bg{
    background: #E16D67;
}

.jpc-toast-primary-bg{
    background: #7AB8F9;
}

.jpc-toast-success-icon{
    content: url("../images/new_Jobpasscard/jpc_icons/toast_icons/checkmark-dark.png");
    width:18px;
    height:13px;
    margin: auto;
    margin-right: 16px;
}

.jpc-toast-warning-icon{
    content: url("../images/new_Jobpasscard/jpc_icons/toast_icons/alert-triangle-dark.png");
    width: 21px;
    height: 18px;
    margin: auto;
    margin-right: 16px;
}

.jpc-toast-danger-icon{
    content: url("../images/new_Jobpasscard/jpc_icons/toast_icons/alert-circle-light.png");
    width: 20px; 
    height: 20px;
    margin: auto;
    margin-right: 16px;
}

.jpc-toast-primary-icon{
    content: url("../images/new_Jobpasscard/jpc_icons/toast_icons/alert-circle-dark.png");
    width: 20px; 
    height: 20px;
    margin: auto;
    margin-right: 16px;
}

.jpc-toast-text-light{
    color: #F5F5F5;
}

.jpc-toast-text-dark{
    color: #212E4B;
}

.jpc-toast-body-dark{
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
    padding: 0;
}

.jpc-toast-body-light{
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #F5F5F5;
    padding: 0;
}

.jpc-toast-close{
    margin-left: 32px!important;
}

.jpc-toast-bottom{
    bottom: 32px;
}