/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
/* line 6, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone, .dropzone * {
  box-sizing: border-box;
}

/* line 9, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone {
  position: relative;
}

/* line 11, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 120px;
  margin: 0.5em;
}

/* line 16, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview .dz-progress {
  display: block;
  height: 15px;
  border: 1px solid #aaa;
}

/* line 20, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}

/* line 25, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}

/* line 28, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}

/* line 30, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
}

/* line 32, /Users/preston/.rvm/gems/ruby-3.1.0/gems/dropzonejs-rails-0.8.5/app/assets/stylesheets/dropzone/basic.scss */
.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
}
/* line 5, /Users/preston/projects/jx-hr/app/assets/stylesheets/applications.scss */
.btn-buff {
  margin-top: 5px;
  margin-bottom: 5px;
}
/* line 4, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.loading-text {
  font-size: .75em;
  font-style: italic;
}

/* line 9, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.display-toggle {
  visibility: hidden;
}

/* line 13, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.upload-message {
  font-size: .85em;
}

/* line 17, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.spacer {
  margin-bottom: 15px;
}

/* line 21, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.jx-doc-loader {
  color: #02acc1;
  font-size: 20px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 15px 15px 0 auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

/* line 37, /Users/preston/projects/jx-hr/app/assets/stylesheets/documents.scss */
.tccs-doc-loader {
  color: #046a9c;
  font-size: 20px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 15px 15px 0 auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* line 5, /Users/preston/projects/jx-hr/app/assets/stylesheets/staff_members.scss */
.info-element {
  margin-top: 3px;
}

/* line 9, /Users/preston/projects/jx-hr/app/assets/stylesheets/staff_members.scss */
.note-border {
  border: 1px solid #8abeb7;
  padding: 5px;
  margin-bottom: 10px;
}
/* line 4, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.loading-text {
  font-size: .75em;
  font-style: italic;
}

/* line 9, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.display-toggle {
  visibility: hidden;
}

/* line 13, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.upload-message {
  font-size: .85em;
}

/* line 17, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.spacer {
  margin-bottom: 15px;
}

/* line 21, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.jx-doc-loader {
  color: #02acc1;
  font-size: 20px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 15px 15px 0 auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

/* line 37, /Users/preston/projects/jx-hr/app/assets/stylesheets/supervisions.scss */
.tccs-doc-loader {
  color: #046a9c;
  font-size: 20px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 15px 15px 0 auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */


body{
    color: #8e99a2;
}

.logo{
    width: 275px;
    height: 200px;
}

.logo-sm{
    width: 50px;
    height: 75px;
}

.div-border{
    border: 1px solid #c0c0c0;
    margin: 5px 0px;
    overflow: scroll;
    height: inherit;
}


/*For TCCS*/
.tccs-links{
    color: #046a9c;
}

.tccs-btn-primary {
    color: #fff;
    background-color: #046a9c;
    border-color: #046a9c;
}

.tccs-btn-outline-primary {
    color: #046a9c;
    background-color: transparent;
    background-image: none;
    border-color: #046a9c;
}

.tccs-btn-primary:focus, .tccs-btn-primary:hover{
    color: #fff;
    background-color: #043c6d;
    border-color: #043c6d;
}

.tccs-btn-outline-primary:focus, .tccs-btn-outline-primary:hover{
    color: #fff;
    background-color: #043c6d;
    border-color: #043c6d;
}

.tccs-btn-outline-primary:active:focus{
    color: #fff;
    background-color: #046a9c;
    box-shadow: none;
}

#tccs-progress {
    width: 0;
    height: 100%;
    background: #046a9c;
    border-radius: 10px;
    transition: all 200ms;
}

/*End For TCCS*/

/*For JX*/
.jx-links{
    color: #02acc1;
}

.jx-btn-primary {
    color: #fff;
    background-color: #02acc1;
    border-color: #02acc1;
}

.jx-btn-primary:focus, .jx-btn-primary:hover{
    color: #fff;
    background-color: #026168;
    border-color: #026168;
}

.jx-btn-outline-primary {
    color: #02acc1;
    background-color: transparent;
    background-image: none;
    border-color: #02acc1;
}

.jx-btn-outline-primary:focus, .jx-btn-outline-primary:hover{
    color: #fff;
    background-color: #026168;
    border-color: #026168;
}

.jx-btn-outline-primary:active:focus{
    color: #fff;
    background-color: #02acc1;
    box-shadow: none;
}

#jx-progress {
    width: 0;
    height: 100%;
    background: #02acc1;
    border-radius: 10px;
    transition: all 200ms;
}
/*End For JX*/


/*For JXC*/
.jxc-links{
    color: #b244c5;
}

.jxc-btn-primary {
    color: #fff;
    background-color: #b244c5;
    border-color: #b244c5;
}

.jxc-btn-primary:focus, .jxc-btn-primary:hover{
    color: #fff;
    background-color: #8015ac;
    border-color: #8015ac;
}

.jxc-btn-outline-primary {
    color: #b244c5;
    background-color: transparent;
    background-image: none;
    border-color: #b244c5;
}

.jxc-btn-outline-primary:focus, .jxc-btn-outline-primary:hover{
    color: #fff;
    background-color: #8015ac;
    border-color: #8015ac;
}

.jxc-btn-outline-primary:active:focus{
    color: #fff;
    background-color: #b244c5;
    box-shadow: none;
}

#jxc-progress {
    width: 0;
    height: 100%;
    background: #b244c5;
    border-radius: 10px;
    transition: all 200ms;
}
/*End For JXC*/

.spacer{
    margin-top: 20px;
}

.panel-heading{
    border-bottom: 1px solid #c0c0c0;
    padding: 5px;
    margin-bottom: 10px;
}

.id-img{
    max-height: 200px;
    max-width: 200px;
    border: 1px solid #000;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    visibility: hidden;
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.logout-warn {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 75%;
    height: 150px;
    background-color: #fff;
    border-radius: 3px;
    border: 3px solid #c0c0c0;
    padding: 10px;
}

.logout-text {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #585C64;
}

.btn-centred {
    margin: auto;
}

#progress-bar {
    margin-top: 25px;
    width: 500px;
    height: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}

#document_file {
    display:none;
}

#supervision_file {
    display:none;
}

#annual_review_file {
    display:none;
}