/* 
    Created on : 8-May-2020, 2:43:02 PM
    Author     : Ryan
    Purpose    : Add styling for all the pages imported from talentsorter for the recruitment flow
*/

:root {
  --job-green: #0d705c;
  --job-purple: #5e359d;
  --job-dark-green: #155a4c;
}

#MainBlock{
    padding-left: 10px;
    padding-right: 10px;
}

#MainBlock .form-group{
    margin-right: 0px;
}

a,   /*Overrides Unify*/
button.btn-link{
    color: var(--job-green);
}

.btn-assess:hover, .btn-assess:focus, .btn-assess:active,
.open > .dropdown-toggle.btn-assess {
    background: var(--job-dark-green);  /* Gives  */
}

.purple-well a{
    color: var(--job-purple);
}

a.btn{
    color: #474747;
}

.purple-well p, .purple-well li, .purple-well em {
    font-size: 1.2rem;
}

.purple-well h1, .purple-well h2, .purple-well h3{
    color: var(--job-purple);
}

.purple-well h2{
    font-weight: 600;
}

.purple-well h3{
    font-weight: 500;
    font-size: 1.3rem;
}

.purple-well .jobLogo{  /* Original is 300 x 100*/
    width: 240px;
    height: 80px;
}

.progress-bar{
    background-color: var(--job-green);
}

/*
Section: Spinner CSS
Ex:
<button class="btn btn-assess" id="pageSubmitBtn" onclick="verifyForm(event)"><ts:language var="Save & Continue"/></button>
<div class="appFormSpinner" id="pageSubmitSpinner">
    <i class="fa fa-gear fa-spin"></i>
    <span class="spinnerText">
        <ts:language var='Saving'/>...
    </span>
</div>

function showSpinner() {
    $('#pageSubmitBtn').hide();
    $('#pageSubmitSpinner').show();
}
*/

.appFormSpinner{
    position: relative;
    top:5px;
    display:none;
}

.appFormSpinner > .fa-gear{
    font-size:25px;
}

.appFormSpinner > .spinnerText{
    position:relative;
    bottom:4px;
    margin-left: 2px;
}

.text-green{
    color: #657f42;
}

.text-blue{
    color: #2e7ac0;
}

.text-purple{
    color: #65419d;
}

.text-mb-5 p{
    margin-bottom: 5px;
}

.title-30{
    font-size:30px !important;
}

.inline-block{
    display: inline-block;
}

i.fa {
    font-size: 20px;
}

/*Make placeholde text lighter grey*/
:root {
  --placeholder-grey: #949393;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--placeholder-grey) !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--placeholder-grey) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--placeholder-grey) !important;
}

/* Overrides Unify*/
.u-check input[type="checkbox"]:checked + .u-check-icon-radio-v8 {
  color: var(--job-green);
  border-color: var(--job-green);
}

.u-check input[type="checkbox"]:checked + .u-check-icon-radio-v8 i::after {
  background-color: var(--job-green);  
}

.veryFaint{
    opacity: 40%;
}

/* Override Unify */
[aria-labelledby][data-toggle]{
    opacity: 100;
}