@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Roboto:wght@900&family=Rubik:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --erp-main-red-Color: #e70e6c !important;
  --erp-main-orange-Color: #f1651f !important;
}

body {
  background-color: #DEE2E6;
}

main {  
  padding: 25px 0 0 0;
  background-color: #DEE2E6;  
}

header {
  padding: 10px 35px 10px 30px;
  background: #FFFFFF;
  height: 70px;
}

.form-control {
  border-radius: 0px !important;;
}

footer {
  margin: 0px !important;
  height: 50px;
  padding: 10px 0 10px 0;
  background: rgb(78, 75, 74) !important;
}

footer p {
  color: #ffffff;  
  margin: 0px;
}

footer i {
  color: #ffffff;
  margin: 0 5px 0 5px;
}

.nav-masthead .nav-link {
  background: rgb(231,14,108);
  background: linear-gradient(69deg, rgba(231,14,108,1) 0%, rgba(241,101,31,1) 100%);   
  font-weight: 700;
  color: #FFFFFF;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
  border-radius: 20px;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
  font: normal normal 900 24px/32px Roboto;
}


.personSpecific.personSpecific {
  text-align: center;
}

.personSpecific .avatarImg {
  width: 100%;
}

.supportBoxWrapper .txtWrapper {
  background-color: #FFFFFF;
  text-align: left;
  color: #000000;
  padding: 20px;  
  position: relative;
  margin: 0;
}

.supportBoxWrapper .txtWrapper span {
  display: block;

}

.supportBoxWrapper .name {
  font: normal normal 900 24px/32px Roboto;
  letter-spacing: 0.24px;
  color: #323232;
  opacity: 1;
}

.supportBoxWrapper .title {
  text-align: left;
  font: normal normal 900 16px/30px Roboto;
  letter-spacing: 0.28px;
  color: #707070;
  opacity: 1;
}

.supportBoxWrapper .description {
  color: #323232;
  text-align: left;
  font: normal normal normal 14px/17px Rubik;
  letter-spacing: 0px;
  color: #323232;
  opacity: 1;
  margin-top: 5px;
}

.supportBoxWrapper .btn {
  background: #04BB47 !important;  
  font: normal normal 900 20px/26px Roboto;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  opacity: 1;
  border: solid 3px #04BB47;
  padding: 1px 5px 1px 5px !important;
  margin-top: 15px;
}

.supportBoxWrapper .btn:hover {
  background: #FFFFFF !important;
  border: solid 3px #04BB47;
  color: #04BB47;
}

.supportBoxWrapper .btn i {
  font-size: 22px;
  margin-right: 6px;
}


@keyframes pulseStatusInd {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.personSpecific .statusIndicator {
  position: absolute;
  top: -32px;
  right: -3px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  -webkit-transition: opacity 1s ease-in-out, width 0.75s;
  -moz-transition: opacity 1s ease-in-out, width 0.75s;
  -ms-transition: opacity 1s ease-in-out, width 0.75s;
  -o-transition: opacity 1s ease-in-out, width 0.75s;
  transition: opacity 1s ease-in-out, width 0.75s;

  box-shadow: 0 0 0 0 rgb(253, 253, 253);
	transform: scale(1);
	animation: pulseStatusInd 1.5s infinite;
}

.personSpecific .statusIndicator:hover {
  width: 100px;
}

.personSpecific .statusIndicator.offline:hover {
  width: 125px;
}

.personSpecific .statusIndicator.online:hover {
  width: 120px;
}

.personSpecific .statusIndicator .text { 
  font: normal normal 900 20px/26px Roboto;
  letter-spacing: 0.2px;
  opacity: 0;
}

.personSpecific .statusIndicator:hover .text {
  opacity: 1;
  margin-left: 35px; 
  line-height: 38px;
  color: #FFFFFF;
  display: none;
}

.personSpecific .statusIndicator.busy { 
  background: #FFD500;
  background-image: url('../img/bi-busy.png');  
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 18px 8px;
}

.personSpecific .statusIndicator.busy:hover .text::after {  
  content: 'BUSY';
}

.personSpecific .statusIndicator.online { 
  background: #04B047;
  background-image: url('../img/bi-online.png');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 10px 10px;
}

.personSpecific .statusIndicator.online:hover .text::after {
  content: 'ONLINE';
}

.personSpecific .statusIndicator.offline { 
  background: #EF3451;
  background-image: url('../img/bi-offline.png');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 10px 10px;
}

.personSpecific .statusIndicator.offline:hover .text::after {
  content: 'OFFLINE';
}

.supportBoxTitle {
  text-align: left;
  font: normal normal normal 20px/24px Rubik;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;  
  margin-bottom: 15px;
}

.departmentSpecific {
  margin-top: 50px;
  margin-bottom: 100px;
}

.supportBoxWrapper.departmentSpecific .txtWrapper {
  width: 100%;  
}

.supportBoxWrapper .btn.sendMail {
  background: #818386 !important;  
  border: solid 3px #818386;
  color: #FFFFFF;
}

.supportBoxWrapper .btn.sendMail:hover {
  background: #FFFFFF !important;
  border: solid 3px #818386;
  color: #818386;
}

.departmentSpecific .coverImageWrapper {  
  background-size: 100% 100%;
  width: 440px;
  height: 281px;
  display: table-cell;
  vertical-align: middle;    
}

.erpDepIT .coverImageWrapper {  
  background:url(../img/itDepAvatar.jpg);
  transition: all 0.5s ease;
}

.erpDepEconomic .coverImageWrapper {  
  background:url(../img/erpDepAvatar.jpg);
}

.erpDepAll .coverImageWrapper {  
  background:url(../img/erpDepSupport.jpg?v4=ok);
}

.erpDepIT .coverImageWrapper:hover {    
  background: linear-gradient(69deg, rgba(231,14,108, 0.55) 0%, rgba(241,101,31,0.55) 100%), url(../img/itDepAvatar.jpg);  
}

.erpDepEconomic .coverImageWrapper:hover {  
  background: linear-gradient(69deg, rgba(231,14,108, 0.55) 0%, rgba(241,101,31,0.55) 100%), url(../img/erpDepAvatar.jpg);
}

.erpDepAll .coverImageWrapper:hover {  
  background: linear-gradient(69deg, rgba(231,14,108, 0.55) 0%, rgba(241,101,31,0.55) 100%), url(../img/erpDepSupport.jpg?v4=ok);
}

.departmentSpecific .tag {
  background: rgb(231,14,108);
  background: linear-gradient(69deg, rgba(231,14,108,1) 0%, rgba(241,101,31,1) 100%);
  text-align: center;
  font: normal normal bold 20px/24px Rubik;
  letter-spacing: 0px;
  color: #FFFFFF;
  border-radius: 25px;
  display: inline;
  padding: 10px 20px 10px 20px;
}

.departmentSpecific .coverImageWrapper:hover .tag {  
  color: white;  
  background: none;
}

.supportBoxWrapper.departmentSpecific .txtWrapper {
  margin: 0 !important;
}

.loginBox {
  width: 450px;
  height: 340px;
  background: rgb(231,14,108);
  background: linear-gradient(69deg, rgba(231,14,108,1) 0%, rgba(241,101,31,1) 100%); 
  margin: auto;
  border-radius: 22px;
}

.loginBox .form-control {
  font-family: Roboto;
  font-weight: 400;
  padding-left: 25px;
}

.loginPage h1 {
  font-family: Roboto;
  font-size: 28px;
  font-weight: 500;  
  padding-top: 20px;
}

.loginPage form {
  width: 80%;
  margin-left: 10%;
  margin-top: 8%;
}

.loginPage .submitBtn {
  margin-top: 10px;
  background: #FFFFFF !important;
  border: none !important;
  color:rgb(78, 75, 74);
  font: normal normal 100 18px/26px Roboto;
  font-weight: 400;
}

.loginPage .submitBtn:hover {  
  background: transparent !important;
  border: 2px solid white !important;
  color: white;
}

.loginPage .submitBtn:focus {
  box-shadow: none !important;
}

.loginPage .container {
  position: relative;
  margin-top: 10%;
}

.loginPage .form-control {
  border-width: 0px !important;
}

.loginPage .form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #fff;
  outline: 0;  
  border: none !important;
  box-shadow: none !important;
}

.welcomeTxt {
  text-align: left;
  font: normal normal normal 28px/38px Rubik;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;  
  margin-bottom: 15px;
}

.btn.reqSupport {
  display: none;
}

.bootbox-body {
  color: #000000;
  text-align: left;
}

.bootbox-close-button.close {
  display: none;
}


.bootbox-accept:focus, 
#contactModal .submitbtn:focus {
  box-shadow: none !important;
  border-color: #04BB47 !important;
}

.bootbox-accept, 
#contactModal .submitbtn {
  background: #04BB47 !important;
  border: solid 3px #04BB47;
  color: #FFFFFF;
  margin-top: 20px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
}

#contactModal .submitbtn:after {
  content: '\f1d8';
  font-family: 'Font Awesome 5 Free';
  float: left;
  margin-right: 5px;
  font-size: 14px;
}

.bootbox-accept:HOVER,
#contactModal .submitbtn:HOVER {
  background: #FFFFFF !important;
  border: solid 3px #04BB47;
  color: #04BB47;  
}

#contactModal .submitbtn span {  
  font: normal normal 900 24px/32px Roboto;  
  margin-left: 6px;
}

#contactModal .modal-title {
  color: #818386;
}

.bootbox-body {
  font: normal normal 900 24px/32px Roboto;  
  font-weight: 500;
}

#contactModal .form-control:focus {
  box-shadow: none !important;  
}

.form-group .inputAnimLine {
  height: 2px;
  width: 0px;
  position: absolute;
  background-color: transparent;
  display: inline-block;
  transition: .3s width ease-in-out;
  position: relative;
  top: -12px;
}

textarea:focus+.inputAnimLine, select:focus+.inputAnimLine,
input[type=text]:focus+.inputAnimLine, select:focus+.inputAnimLine {
  width: 100%;
  background-color: white;
}

.inputTextIcon {  
  position: relative;
  float: left;
  color: gray;
  top: 25px;
  left: 5px;    
}

.contactForm .form-group textarea,
.contactForm .form-group input {
  border-width: 0px;
  border-bottom: 1px solid gray !important;
}

.contactForm textarea:focus+.inputAnimLine, .contactForm select:focus+.inputAnimLine,
.contactForm input[type=text]:focus+.inputAnimLine, .contactForm select:focus+.inputAnimLine {  
  background-color: #04BB47;
}

.loadingoverlay_element svg {
  width: 50px !important;
  height: 50px !important;
}

.loadingoverlay_element svg circle {
  fill: #FF0000 !important;
}

.personSpecific .description {
  color: #818386;
}