/*

    $default-text: #33383e;

$neutral: #33383E;
$neutral-100: #CECFD0;
$neutral-300: #A7A9AC;
$neutral-500: #818487;
$neutral-600: #6D7175;
$neutral-800: #464B50;
$neutral-900: #33383E;
$neutral-50: #E2E2E3;
$neutral-25: #F5F5F5;
$neutral-10: #FAFAFA;

$grey-light: #F5F5F5;
$grey-dark: #33383e;

$slate: #2a636a;

$green-main: #C5EDD2;
#green-light: #daf5e4;
$green-dark: #2A636A;

$yellow-main: #eae19d
$yellow-light: #f4f0cb
$yellow-dark: #656447

$pink-main: #F5D5D8;
$pink-light: #FBE8EA;
$pink-dark: #33383e;
*/

#main-body {background-color: #f5f5f5 !important;position:relative}

h1, h2, h3, h4, h5, h6, p {}

h1 {font-size:36px;text-transform:uppercase;font-weight:bolder}
h2 {font-size:30px}
h3 {font-size:24px}
h4 {font-size:18px}
h5 {font-size:16px;}
h6 {font-size: 14px;}

.fs-11 {font-size: 11px;}
.fs-13 {font-size: 13px;}
.fs-14 {font-size: 14px;}
.fs-15 {font-size: 15px;}
.fs-16 {font-size: 16px;}
.fs-18 {font-size: 18px;}

.fw-t {font-weight: 100;}
.fw-xl {font-weight: 200;}
.fw-l {font-weight: 300;}
.fw-r {font-weight: 400;}
.fw-m {font-weight: 500;}
.fw-b {font-weight: bold;}

.fw-t h1,.fw-t h2,.fw-t h3,.fw-t h4,.fw-t h5,.fw-t h6 {font-weight: 100;}
.fw-xl h1,.fw-xl h2,.fw-xl h3,.fw-xl h4,.fw-xl h5,.fw- h6 {font-weight: 200;}
.fw-l h1,.fw-l h2,.fw-l h3,.fw-l h4,.fw-l h5,.fw-l h6 {font-weight: 300;}
.fw-r h1,.fw-r h2,.fw-r h3,.fw-r h4,.fw-r h5,.fw-r h6 {font-weight: 400;}
.fw-m h1,.fw-m h2,.fw-m h3,.fw-m h4,.fw-m h5,.fw-m h6 {font-weight: 500;}
.fw-b h1,.fw-b h2,.fw-b h3,.fw-b h4,.fw-b h5,.fw-b h6 {font-weight: bold;}


.bg-green-light {
    background-color: #daf5e4 !important
}
.bg-green-dark {background-color: #2A636A}


.bg-yellow-light {
    background-color: #f4f0cb
}
.bg-yellow-dark {background-color: #656447}

.bg-yellow-gradient {
    color:  #656447;
    background: #f4f0cb;
    background: linear-gradient(8deg, #eae19d 0%, #f4f0cb 90%);
}

    .bg-yellow-gradient.connection-wave {
        background-color: #f0eab8;
        background-image: url('https://dev-my.per-people.com/waves//white%20connection%20wave.png') !important;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: 0% -300px !important;
        background-attachment:fixed;
    }

        .bg-yellow-gradient .btn {
    background-color:  #656447;
    color: #eae19d
}

.bg-yellow-gradient .btn {
    background-color: #eae19d;
    border:1px solid #eae19d;
    color:  #656447;
}


.bg-yellow-gradient .btn.selected {
    background-color:  #656447;
    color: #eae19d
}


.colourize-yellow {
    filter: sepia(100%) hue-rotate(5deg) saturate(150%) brightness(90%) contrast(80%);
}


.btn-yellow-light {background-color:#f4f0cb !important;color:#656447;border-color:#f4f0cb}
.btn-yellow-light:hover {background-color:#eae19d !important;color:#656447;border-color:#eae19d}

.btn-yellow {background-color:#eae19d;color:#656447;border-color:#eae19d !important}
.btn-yellow:hover {background-color:#f4f0cb;color:#656447;border-color:#f4f0cb !important}

.btn-yellow-dark {background-color:#656447 !important;color:#f4f0cb !important;border:1px solid #656447 !important}
.btn-yellow-dark:hover {background-color:#656447 !important;color:#fff !important;border-color:#656447 !important}

.btn-yellow-light.btn-border {
    color: #33383e;
    border: 1px solid #656447 !important;
}
.btn-yellow-light.selected {
    background-color: #656447 !important;
    color: #f4f0cb !important;
    border: 1px solid #656447 !important
}

.btn-light-grey {
    background-color: #F5F5F5;
    border-color: #f5f5f5
}
.btn-light-grey:hover {background-color:#E2E2E3}

.btn-green-light {background-color:#daf5e4;color:#2A636A;border-color:#daf5e4 !important}
.btn-green-light:hover {background-color:#C5EDD2;color:#2A636A;border-color:#C5EDD2 !important}

.btn-green {background-color:#C5EDD2;color:#2A636A;border-color:#C5EDD2 !important}
.btn-green:hover {background-color:#daf5e4;color:#2A636A;border-color:#daf5e4 !important}

.btn-green-dark {background-color:#2A636A;color:#daf5e4;border-color:#2A636A !important}
.btn-green-dark:hover {background-color:#2A636A;color:#fff;border-color:#2A636A !important}

.btn-pink-light {background-color:#FBE8EA;color:#33383e;border-color:#FBE8EA !important}
.btn-pink-light:hover {background-color:#F5D5D8;color:#33383e;border-color:#F5D5D8 !important}

.btn-pink {background-color:#F5D5D8;color:#33383e;border-color:#F5D5D8 !important}
.btn-pink:hover {background-color:#FBE8EA;color:#33383e;border-color:#FBE8EA}

.btn-pink-dark {background-color:#33383e;color:#FBE8EA;border-color:#33383e !important}
.btn-pink-dark:hover {background-color:#33383e;color:#fff;border-color:#33383e}

.input-light-yellow {background-color:#f4f0cb !important}

.audience-selector a:link {
    text-decoration: none;
}
.audience-selector a:hover {text-decoration: none;}
.audience-selector a:visited {text-decoration: none;}

.audience-item {
    padding: 5px 10px;
    float: left;
    margin-right: 5px;
    text-transform: uppercase;
    font-size:14px;
        letter-spacing: .84px;
}

.audience-item.audience-green.selected {
    background-color: #daf5e4;
    color: #2A636A;
}

.audience-item.audience-yellow.selected {
    background-color: #f4f0cb;
    color: #656447;
}

.audience-item.audience-pink.selected {
    background-color: #FBE8EA;
    color: #33383e;
}

.navbar {
    box-shadow: none;
    border-bottom: none !important;
    z-index:3000;
}

.navbar-nav .nav-item  {margin-left:30px}
.navbar-nav .nav-item a:link {font-size:15px;color:#464B50}
.navbar-nav .nav-item a:hover  {font-size:15px;color:#464B50}
.navbar-nav .nav-item a:visited {font-size:15px;color:#464B50}

.container-fluid {padding:0px 0px !important}

.main-header,.roles-header {
    background-color: #f4f0cb;
    color: #656447;
    background: #f4f0cb;
    background-image: url('https://dev-my.per-people.com/waves//white%20connection%20wave.png'),linear-gradient(8deg, #eae19d 0%, #f4f0cb 90%);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    background-position: 0% 80%;
}

.header-links {text-align:right}


.offset-body-holder {
    margin-top: -195px;
    padding-top: 10px;
    padding-bottom:20px
}


.my-icon {border-radius:50% 50%;height:18px;width:18px;background-color:#eae19d;color:#656447;text-align:center;padding:0px;line-height:17px;font-size:14px;margin-top:-27px}
.my-section-header  {border-bottom:1px solid  #CECFD0;padding-bottom:20px;}
.my-section-header:hover {cursor:pointer}

thead {border-bottom:1px solid #E2E2E3 !important;font-weight:bold}

td {padding:4px !important}

#roles-list-holder.fixed-scroll {height: calc(100vh - 280px) !important}
 #role-details.fixed-scroll {height: calc(100vh - 280px);overflow-y:scroll}

 .role-tag {background-color:#F4F0CB80;color:#656447;float:left;margin-right:10px;margin-bottom:10px;padding:4px 10px;border-radius:15px;}

 .btn-link {padding-top:15px}

.list-ref {
    float: left
}
.role-list-label {
    background-color: #F4F0CB80;
    color: #656447;
    float: right;
    font-size: 10px;
    ;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 15px;
}

.role-list-label.new {
    float:left;
}

    .assignment-item {
        border: 1px solid #fff;
        border-left: 5px solid #fff;
        font-weight: 400;
        font-size: 16px
    }
    .assignment-item:hover {
        background-color: #f4f0cb;
        cursor: pointer
    }

.assignment-item.selected {border:1px solid #f4f0cb;border-left:5px solid #656447;background-color:#f4f0cb}


footer {
    background-color: #33383e;
    border:none !important
}


/* Footer Styles */
.footer-column ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 15px;
    line-height: 40px;
}




.footer-header {
    text-transform: uppercase;font-size:14px;line-height:40px;margin-bottom:20px;letter-spacing:2px
}


.footer-column.green .footer-header {
        color:#daf5e4;
        border-bottom: 1px solid #daf5e4;
    }
        
.footer-column.green     a:link {color:#daf5e4;}
.footer-column.green     a:hover {color:#daf5e4 !important;}
.footer-column.green     a:visited {color:#daf5e4;}


.footer-column.pink .footer-header {
        color:#FBE8EA;
        border-bottom: 1px solid #FBE8EA;
    }
.footer-column.pink    a:link {color:#FBE8EA;}
.footer-column.pink    a:hover {color:#FBE8EA !important;}
.footer-column.pink    a:visited {color:#FBE8EA;}



.footer-column.yellow .footer-header {
        color:#f4f0cb;
        border-bottom: 1px solid #f4f0cb
    }

 .footer-column.yellow  a:hover {color:#f4f0cb !important;}
  .footer-column.yellow  a:link {color:#f4f0cb !important;}
 .footer-column.yellow   a:visited {color:#f4f0cb !important;}



.footer-column.white .footer-header {
        color:#fff;
    }

 .footer-column.white   a:hover {color:#fff}
 .footer-column.white   a:link {color:#fff}
 .footer-column.white   a:visited {color:#fff}

 .input-white {background-color:#fff !important;color:#656447 !important}


/* The switch - the box around the slider */
.small-switch {
    transform: scale(0.7)
}

.per-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .per-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.per-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}

    .per-slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
    }

input:checked + .per-slider {
    background-color: #656447;
}

input:focus + .per-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .per-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.per-slider.round {
    border-radius: 34px;
}

    .per-slider.round:before {
        border-radius: 50%;
    }





/*
 * Some basic positioning styles, and we give it the pointer cursor to show 
 * that it's clickable
 */

.label-check-box input {display:none}

.label-check-box {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
}


.label-check-box span {
  position: relative;
  line-height: 22px;
}

.label-check-box span:before,
.label-check-box span:after {
  content: '';
}

.label-check-box span:before {
  border: 1px solid #6C757D;
  border-radius:2px;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  margin-top:7px;
  display: inline-block;
  vertical-align: top;
}

.label-check-box span:after {
  background: #656447;
  border-radius:1px;
  width: 8px;
  height: 8px;
  position: absolute;
  margin-top:2px;
  top: 4px;
  left: 2px;
  transition: 300ms;
  opacity: 0;
}

.label-check-box input:checked+span:after {
  opacity: 1;
}


/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 363px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}