/**************************************************************************
* Required
**************************************************************************/

span.required {color: #ff0000; display: inline-block !important;}


/**************************************************************************
* Button
**************************************************************************/

.ui-btn
{
  background-color: #bbb;
  border: 0;
  box-sizing: border-box;
  color: #fff !important;
  cursor: pointer;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 15px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ui-btn:focus,
.ui-btn:hover,
.ui-btn:active {/*background-color: #999;*/ background-color: #454545; text-decoration: none;}

.ui-btn.cta {background-color: #2b2b2b;}
.ui-btn.cta:focus,
.ui-btn.cta:hover,
.ui-btn.cta:active {background-color: #2b2b2b;}

.ui-btn.discreet:focus,
.ui-btn.discreet:hover,
.ui-btn.discreet:active {background-color: #999;}

.ui-btn.delete {background-color: #e66747;}
.ui-btn.delete:focus,
.ui-btn.delete:hover,
.ui-btn.delete:active {background-color: #dc441e;}


/**************************************************************************
* Calendar
**************************************************************************/

.ui-calendar-header {font-weight: bold; margin-bottom: 10px;}
.ui-calendar-header:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;} /* clear-fix */
.ui-calendar-header .prev-next,
.ui-calendar-header .prev-next a,
.ui-calendar-header .month-title {float: left;}

.ui-calendar-header .prev-next {border: 1px solid #E6e6e6;}
.ui-calendar-header .prev-next a {background-color: #fff; color: #999; display: block; font-size: 12px; height: 20px; line-height: 20px; padding: 8px; text-align: center; width: 20px;}
.ui-calendar-header .prev-next a:first-child {border-right: 1px solid #E6e6e6;}
.ui-calendar-header .prev-next a:hover {background-color: #f0f0f0;}

.ui-calendar-header .month-title {line-height: 36px; margin-left: 10px;}

.ui-calendar {border-collapse: collapse; margin: 0; padding: 0; width: 100%;}
.ui-calendar,
.ui-calendar tr,
.ui-calendar td {background-color: #fff; border: 1px solid #E6e6e6;}
.ui-calendar td {width: 14.2857142857%;}
.ui-calendar thead td {background-color: #f3f3f3; font-weight: 400; line-height: 24px; padding: 5px;}
.ui-calendar tbody td {height: 100px; padding: 2px; vertical-align: top;}

.ui-calendar tbody td .day-number {font-size: 13px;}
.ui-calendar tbody td.calendar-day-np {background-color: #fbfbfb;}
.ui-calendar tbody td .event {background-color: /*#f9f9f9*/#2b2b2b; border: 1px solid /*#f0f0f0*/#2CA83D; color: #fff; margin-bottom: 2px; padding: 2px;}


/**************************************************************************
* Details List
**************************************************************************/

.ui-details-list {background: #fff; border: 1px solid #ddd; padding: 40px;}
.ui-details-list dl {margin: 0;}
.ui-details-list dl dt,
.ui-details-list dl dd {line-height: 30px;}
.ui-details-list dl dd.img {height: auto; }
.ui-details-list dl dd.img img {max-width: 100%; }
.ui-details-list dl dt {color: #98A0AB; float: left; text-align: right; width: 180px; margin-top: 10px; line-height: 1.5;}
.ui-details-list dl dt span{display: block;}
.ui-details-list dl dd {min-height: 30px; margin-left: 200px;}

.ui-details-list.edit-form dl {margin-bottom: 20px;}
.ui-details-list.edit-form dl dt {line-height: 16px;}
.ui-details-list.edit-form dl dt label {display: block;}
.ui-details-list.edit-form dl dd {height: auto;} /* height was set to 42px to stop collapsing - changed to auto to allow textarea */
.ui-details-list.edit-form dl dd label.error {color:red;}
.ui-details-list.edit-form .r_submit .ui-btn.discreet {float:none;}


/**************************************************************************
* Forms
**************************************************************************/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; display: block; font-size: 1.4rem; height: 42px; line-height: 20px; padding: 10px; width: 100%;}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea
.ui-datepicker-month {display: inline;}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}

/* NB: Height is 80px (4 lines) + 20px padding (2 x 10px) + 2px border (2 x 1px)*/
textarea {height: 102px; resize: vertical;}

.ui-form-item {margin-top: 15px;}
.ui-form-item.first {margin-top: 0;}

.ui-form-item label {display: block; padding-bottom: 5px;}
.ui-form-item label input[type="checkbox"] {float: right;}


/**************************************************************************
* List
**************************************************************************/

.ui-list-header {margin: 20px 0 10px;}
.ui-list-header:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;} /* Clear-fix */
.ui-list-header h2 {display: block; line-height: 30px; margin-bottom: 10px; padding: 0;}
.ui-list-header .btns .ui-btn {margin-bottom: 15px;}

.ui-list a,
.ui-list span.single {background-color: #fff; border: 1px solid #ddd; display: block; line-height: 24px; margin-top: -1px; position: relative; padding: 15px 30px 15px 15px;}

.ui-list a:first-child,
.ui-list span.single {margin-top: 0;}

.ui-list a:focus,
.ui-list a:hover,
.ui-list a:active {background-color: #f6f6f6; text-decoration: none;color:#454545}

/* Arrow */
.ui-list a:after {content: ''; position: absolute; height: 0; margin-top: -6px; right: 15px; top: 50%; width: 0;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ddd;
	border-top: 6px solid transparent;
}

/**************************************************************************
* List Info
**************************************************************************/

.ui-list-info {background-color: #fff; border: 1px solid #ddd; display: block; line-height: 24px; margin-top: -1px; position: relative; padding: 15px 30px 15px 15px;}

.ui-list-info .candidate {border-bottom:1px solid #333;}

.ui-list-info .candidate:first-child a h4 {margin:0;}
.ui-list-info .candidate a h4 {margin-bottom:0;}

.ui-list-info .candidate h5 {margin: 0;}

.ui-list-info .candidate .info .current,
.ui-list-info .candidate .info .desired {float: left; width: 50%;}



/**************************************************************************
* Item Group
**************************************************************************/

.ui-item-group {margin-bottom: 30px;}
.ui-item-group .item-row {background-color: #fff; border: 1px solid #D5DAE0; display: block; line-height: 24px; margin-top: -1px; position: relative; padding: 10px 14px;}
.ui-item-group .item-row.headers {background-color: #2BCAE5; color: #fff;}
.ui-item-group .item-row:first-child {margin-top: 0;}
.ui-item-group .item-row:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;} /* clear-fix */
.ui-item-group .item-row > span {box-sizing: content-box; display: inline-block; float: left; height: 24px; overflow: hidden; padding-right: 10px; text-overflow: ellipsis; white-space: nowrap;}
.ui-item-group .item-row > .actions {float: right;}

/* Make the action links look like ui-links */
.ui-item-group .item-row > .actions span {color: #37BC9B; display: inline-block; margin-left: 10px; text-decoration: none;}
.ui-item-group .item-row > .actions span:hover {cursor: pointer; text-decoration: none;}

/* Item group with full row links */
.ui-item-group > a.item-row,
.ui-item-group > a.item-row:link,
.ui-item-group > a.item-row:visited {background: #fff url("../../../images/icons/arrow-right-44.png") no-repeat right top; color: #656D78;}
.ui-item-group > a.item-row:focus,
.ui-item-group > a.item-row:hover,
.ui-item-group > a.item-row:active {background-color: #f0f0f0; text-decoration: none;}

/* Bootstrap styling clear */
.ui-item-group .item-row .label {display: inline; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-align: left; white-space: nowrap; vertical-align: baseline; border-radius: 0;}


/**************************************************************************
* Notification Panel
**************************************************************************/

#ui-notification-panel {background: #ccc url('../images/icons/notification-close.png') no-repeat top right; box-shadow: 0 0 3px 0 #acacac; color: #fff; font-size: 12px; left: 0; line-height: 16px; padding: 10px 40px 10px 10px; position: fixed; top: 60px; width: calc(100% - 50px); z-index: 9;}
#ui-notification-panel.success {background-color: #7ec51b;}
#ui-notification-panel.fail {background-color: #dc441e;}
#ui-notification-panel.close {cursor: pointer; height: 36px; position: absolute; right: 0; top: 0; width: 36px;}


/**************************************************************************
* Page Header
**************************************************************************/

.ui-page-header {position: relative;}
.ui-page-header:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;} /* Clear-fix */
.ui-page-header.no-margin-bottom {margin-bottom: 0;}
.ui-page-header h1 {display: block; line-height: 40px; margin-bottom: 10px; padding: 0;}
.ui-page-header .btns .ui-btn {margin-bottom: 15px;}


/**************************************************************************
* Section / Sheet (paper elements)
**************************************************************************/

.ui-section {margin-bottom: 30px;}

.ui-section-header {line-height: 20px; margin: 30px 0 10px;}
.ui-section-header.no-top-margin,
.ui-section-header.no-margin-top {margin-top: 0;}
.ui-section-header:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;} /* clear-fix */
.ui-section-header h2 {float: left; font-size: 18px; line-height: 20px; margin: 0;}
.ui-section-header .actions {float: right;}
.ui-section-header .actions .mdi-delete {margin-right: 2px;}
.ui-section-header .actions > span,
.ui-section-header .actions > a,
.ui-section-header .actions > a:link,
.ui-section-header .actions > a:visited,
.ui-section-header .actions > div {color: #666; cursor: pointer; display: block; font-size: 12px; float: left; margin-left: 10px; text-decoration: none;}
.ui-section-header .actions > div:focus span,
.ui-section-header .actions > div:hover span,
.ui-section-header .actions > div:active span,
.ui-section-header .actions > a:focus span,
.ui-section-header .actions > a:hover span,
.ui-section-header .actions > a:active span {color: #333; text-decoration: underline;}
.ui-section-header .actions > div:focus,
.ui-section-header .actions > div:hover,
.ui-section-header .actions > div:active,
.ui-section-header .actions > a:focus,
.ui-section-header .actions > a:hover,
.ui-section-header .actions > a:active {color: #333;}
.ui-section-header .actions div:active,
.ui-section-header .actions a:active {position: relative; top: 1px;}
.ui-section-header .actions span i,
.ui-section-header .actions a i {font-size: 14px; position: relative; top: 1px;}


/**************************************************************************
* Table
**************************************************************************/

.ui-table {background-color: #fff; border-collapse: collapse; margin: 0; padding: 0; width: 100%;}
.ui-table,
.ui-table tr,
.ui-table th {border: 1px solid #D5DAE0;}
.ui-table th,
.ui-table td {padding: 10px;}

/* Header */
.ui-table thead {background-color: #f0f0f0;}
.ui-table thead th {font-weight: bold; text-align: left; white-space: nowrap;}



/**************************************************************************
* Responsive / Media Queries
**************************************************************************/


@media all and (min-width: 600px){

  /**************************************************************************
  * List Header
  **************************************************************************/

  .ui-list-header {margin-top: 40px;}
  .ui-list-header h2 {display: inline-block; float: left; margin: 0;}
  .ui-list-header .btns {float: right;}
  .ui-list-header .btns .ui-btn {float: left; margin-bottom: 0; margin-left: 10px; padding: 5px 20px;}
  .ui-list-header .btns .ui-btn:first-child {margin-left: 0;}


  /**************************************************************************
  * Page Header
  **************************************************************************/

  .ui-page-header {margin-bottom: 20px;}
  .ui-page-header h1 {display: inline-block; float: left; margin: 0;}
  .ui-page-header .btns {float: right;}
  .ui-page-header .btns .ui-btn {float: left; margin-bottom: 0; margin-left: 10px; padding: 10px 20px;}
  .ui-page-header .btns .ui-btn:first-child {margin-left: 0;}

}

@media all and (min-width: 1000px){


  /**************************************************************************
  * Button
  **************************************************************************/

  /*.ui-btn {display: inline-block; padding: 8px 16px;}*/
  .ui-btn {display: inline-block; padding: 10px 16px;}

  /**************************************************************************
  * List Header
  **************************************************************************/

  .ui-list-header h2 {display: inline-block;}
  .ui-list-header .btns {float: right;}


  /**************************************************************************
  * Notification Panel
  **************************************************************************/

  body.l_admin #ui-notification-panel,
  body.l_candidates #ui-notification-panel {left: 250px; width: calc(100% - 300px);}


  /**************************************************************************
  * Page Header
  **************************************************************************/

  .ui-page-header h1 {display: inline-block;}
  .ui-page-header .btns {float: right;}

  /**************************************************************************
  * Page Footer
  **************************************************************************/

  .ui-page-footer {margin-top: 30px;}
  .ui-page-footer .actions {float: right;}
}


/**************************************************************************
* Extra stuff
**************************************************************************/

.card-transparent {
  background-color: transparent!important;
  border: 0px!important;
  box-shadow: none!important;
  text-align: center!important;
}

.card-icon-number  {

  height:150px;
  width:300px;
  margin-left:15%;
  margin-right:15%;
}

.card-dashboard-number {

 font-size:80px;

}

.card-header-dash {

  background-color: #F6AE2D;
}


.card .card-header-dash .card-icon,
.card .card-header-dash .card-text,
.card .card-header-dash:not(.card-header-icon):not(.card-header-text), .card.bg-info,
.card.card-rotate.bg-dash .front,
.card.card-rotate.bg-dash .back {
  background: linear-gradient(60deg, #F0A202, #F0A202); }

.card-header-tasks {
  background-color:#4392F1!important;
}

.btn-tasks,
.btn-tasks:hover,
.btn-tasks:active
{
  background-color:#4392F1!important;
  border-color:#4392F1!important;
  color:#ffffff!important;

}

.dashboard-numbers {

   background-color: #F6AE2D;
   height: 190px!important;
   border-radius:3px;
   box-shadow: 0 4px 20px 0px rgba(246, 174, 45, 0.14), 0 7px 10px -5px rgba(246, 174, 45, 0.4);
 }
.dashboard-numbers-fran {

  background-color: #CBD2D0;
  height: 190px!important;
  border-radius:3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(203,210,208,0.4);
}

.dash-color-brown {

  background-color: #4B4237!important;
}

.dash-col-yellow {

  background-color: #F6AE2D!important;

}

.card .card-header-alt1 .card-icon, .card .card-header-alt1 .card-text, .card .card-header-alt1:not(.card-header-icon):not(.card-header-text), .card.bg-alt1, .card.card-rotate.bg-alt1 .front, .card.card-rotate.bg-alt1 .back {

  background-color: #1D3557!important
}

.card .card-header-alt2 .card-icon, .card .card-header-alt2 .card-text, .card .card-header-alt2:not(.card-header-icon):not(.card-header-text), .card.bg-alt2, .card.card-rotate.bg-alt2 .front, .card.card-rotate.bg-alt2 .back {

  background-color: #4B4237!important
}
.mt{margin-top: 30px;}
.col-md-3 a .card-img-top{
  object-fit: cover;
  object-position: right;
  height: 290px;
}
.col-md-3 a .card .card-body{
    background-color: rgba(0, 0, 0, .5) !important;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute !important;
    display: flex;
    align-items: center;
}

.custom-select-arrow{
  position: relative;
  line-height: 1;
}
.custom-select-arrow::after{
  content: "\f101";
  margin-left: -4px;
  font-size: 100%;
  font-style: normal;
  color: #000;
  font-weight: 400;
  font-family: FontAwesome;
  position: absolute;
  right: 20px;
}

select{
  line-height: 1.5 !important;
  position: relative;
}
/*.collapse {
  display: none;
  padding-left: 10px;
  background: rgb(57, 181, 74);
  padding-bottom: 15px;
}

.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div.collapse > ul > li > a .sidebar-normal, 
.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div.collapse > ul > li > a:hover .sidebar-normal{
  color: #fff;
}
.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div.collapse > ul > li > a i{
  color: #fff;
}

.sidebar .nav div.collapse li.nav-item.active > a{
  background-color: rgba(200, 200, 200, 0.3) !important;
}*/
.sidebar .caret{
	display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.sidebar a[aria-expanded="true"] .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: transparent;
}
.nav-item.active .collapse.show[aria-expanded="false"]{
	display: none !important;
}



/* Social widgets container (stacked icons) */
#support-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff; /* blue */
    color: #fff;
    border-radius: 50%;
    padding: 14px;
    font-size: 28px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 25px;
    width: 25px;
}

#support-float:hover {
    background-color: #0056b3;
    transform: scale(1.1);
    box-shadow: 2px 2px 15px rgba(0,0,0,0.4);
}

/* Social widgets container (stacked icons) */
.social-widgets {
    position: fixed;
    bottom: 80px; /* above the support button */
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1099;
}